feat(system): root proxy types improved

package.json

@@ -19,7 +19,7 @@
     "dev:docs": "turbo run dev --scope=@nextui-org/docs --no-deps",
     "start:docs": "turbo run start --scope=@nextui-org/docs --no-deps",
     "build:docs": "turbo run build --scope=@nextui-org/docs",
-    "build": "turbo run build --filter=!./examples/*",
+    "build": "turbo run build --filter=!./examples/* --filter=!./apps/* --filter=!./packages/components/snippet",
     "build:fast": "turbo run build:fast --filter=!./examples/*",
     "sb": "pnpm storybook",
     "storybook": "start-storybook -p 6006",

packages/components/link/src/index.ts

@@ -1,5 +1,5 @@
 // export types
-export type { LinkProps } from "./link";
+export type {LinkProps} from "./link";
 
 // export component
-export { default as Link } from './link';
+export {default as Link} from "./link";

packages/components/link/src/link-icon.tsx

@@ -1,24 +1,29 @@
-import {StyledLinkIcon} from "./link.styles";
+import {NextUI} from "@nextui-org/system";
+// import {StyledLinkIcon} from "./link.styles";
 
-export const LinkIcon: React.FC<{}> = () => {
-  return (
-    <StyledLinkIcon
-      className="nextui-link-icon"
-      fill="none"
-      height="1em"
-      shapeRendering="geometricPrecision"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-      viewBox="0 0 24 24"
-      width="1em"
-    >
-      <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
-      <path d="M15 3h6v6" />
-      <path d="M10 14L21 3" />
-    </StyledLinkIcon>
-  );
-};
+export const LinkIcon = () => (
+  <NextUI.Svg
+    className="nextui-link-icon"
+    css={{
+      ml: "$1",
+      as: "center",
+      display: "flex",
+      color: "currentColor",
+    }}
+    fill="none"
+    height="1em"
+    shapeRendering="geometricPrecision"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="1.5"
+    viewBox="0 0 24 24"
+    width="1em"
+  >
+    <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
+    <path d="M15 3h6v6" />
+    <path d="M10 14L21 3" />
+  </NextUI.Svg>
+);
 
 LinkIcon.toString = () => ".nextui-link-icon";

packages/components/link/src/link.styles.ts

@@ -39,10 +39,3 @@ export const StyledLink = styled(
   },
   cssFocusVisible,
 );
-
-export const StyledLinkIcon = styled("svg", {
-  ml: "$1",
-  as: "center",
-  display: "flex",
-  color: "currentColor",
-});

packages/components/snippet/src/snippet-icon.tsx

@@ -1,4 +1,4 @@
-import {nextui, forwardRef, HTMLNextUIProps} from "@nextui-org/system";
+import {NextUI, forwardRef, HTMLNextUIProps} from "@nextui-org/system";
 import {useDOMRef} from "@nextui-org/dom-utils";
 import {clsx, __DEV__} from "@nextui-org/shared-utils";
 
@@ -10,7 +10,7 @@ const SnippetIcon = forwardRef<SnippetIconProps, "div">((props, ref) => {
   const domRef = useDOMRef(ref);
 
   return (
-    <nextui.svg ref={domRef} className={clsx("nextui-snippet-icon", className)} {...otherProps} />
+    <NextUI.Svg ref={domRef} className={clsx("nextui-snippet-icon", className)} {...otherProps} />
   );
 });
 

packages/components/user/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
     "paths": {
-      "@stitches/react": ["../../../node_modules/@stitches/react"]
+      "@stitches/react": ["../../../node_modules/@stitches/react"],
+      "@react-types/link": ["../../../node_modules/@react-types/link"],
     }
   },
   "include": ["src", "index.ts"]

packages/core/system/src/root.ts

@@ -1,9 +1,14 @@
 /**
  * Part of this code is taken from @chakra-ui/system 🙏🏻
  */
-
-import {styled} from "./stitches.config";
-import {As, DOMElements, NextUIComponent, HTMLNextUIComponents} from "./system";
+import {
+  As,
+  rootStyled,
+  DOMElements,
+  CapitalizedDOMElements,
+  NextUIComponent,
+  HTMLNextUIComponents,
+} from "./system";
 
 type NextUIRoot = {
   <T extends As, P = {}>(component: T): NextUIComponent<T, P>;
@@ -12,25 +17,27 @@ type NextUIRoot = {
 function root() {
   const cache = new Map<DOMElements, NextUIComponent<DOMElements>>();
 
-  return new Proxy(styled, {
+  return new Proxy(rootStyled, {
     /**
      * @example
      * const Div = NextUI("div")
      * const StyledComponent = NextUI(AnotherComponent)
      */
     apply(target, thisArg, argArray: [DOMElements]) {
-      return styled(...argArray);
+      return rootStyled(...argArray);
     },
     /**
      * @example
-     * <nextui.div />
+     * <NextUI.Div />
      */
-    get(_, element: DOMElements) {
-      if (!cache.has(element)) {
-        cache.set(element, styled(element));
+    get(_, element: CapitalizedDOMElements) {
+      const key = element.toLowerCase() as DOMElements;
+
+      if (!cache.has(key)) {
+        cache.set(key, rootStyled(key));
       }
 
-      return cache.get(element);
+      return cache.get(key);
     },
   }) as NextUIRoot & HTMLNextUIComponents;
 }
@@ -39,4 +46,4 @@ function root() {
  * and also a function that can be used to enable custom component receive nextui's props.
  *
  */
-export const nextui = root();
+export const NextUI = root();

packages/core/system/src/stitches.config.ts

@@ -57,17 +57,3 @@ export type ScaleValue<T> = Stitches.ScaleValue<T>;
 export type CSSProperties = Stitches.CSSProperties;
 export type CSS = Stitches.CSS<StitchesConfig>;
 export type StitchesTheme = typeof theme;
-
-// common theme types
-export type Spaces = StitchesConfig["theme"]["space"];
-export type FontSizes = StitchesConfig["theme"]["fontSizes"];
-export type Fonts = StitchesConfig["theme"]["fonts"];
-export type FontWeights = StitchesConfig["theme"]["fontWeights"];
-export type LineHeights = StitchesConfig["theme"]["lineHeights"];
-export type LetterSpacings = StitchesConfig["theme"]["letterSpacings"];
-export type Colors = StitchesConfig["theme"]["colors"];
-export type Radii = StitchesConfig["theme"]["radii"];
-export type zIndices = StitchesConfig["theme"]["zIndices"];
-export type BorderWeights = StitchesConfig["theme"]["borderWeights"];
-export type Tranistions = StitchesConfig["theme"]["transitions"];
-export type Breakpoints = StitchesConfig["theme"]["breakpoints"];

packages/core/system/src/system.ts

@@ -4,10 +4,11 @@
 
 import {forwardRef as baseForwardRef} from "react";
 
-import {CSS} from "./stitches.config";
+import {CSS, styled} from "./stitches.config";
 
 export type As<Props = any> = React.ElementType<Props>;
 export type DOMElements = keyof JSX.IntrinsicElements;
+export type CapitalizedDOMElements = Capitalize<DOMElements>;
 
 export interface NextUIProps {
   /**
@@ -90,5 +91,11 @@ export interface NextUIComponent<C extends As, P = {}>
   extends ComponentWithAs<C, NextUIProps & P> {}
 
 export type HTMLNextUIComponents = {
-  [Tag in DOMElements]: NextUIComponent<Tag, {}>;
+  [Tag in CapitalizedDOMElements]: NextUIComponent<Uncapitalize<Tag>, {}>;
 };
+
+export function rootStyled<T extends As, P = {}>(component: T) {
+  const Component = styled(component as React.ComponentType<any>, {});
+
+  return Component as NextUIComponent<T, P>;
+}

packages/core/system/src/types.ts

@@ -1,4 +1,4 @@
-import {StitchesTheme, createThemeBase, CSS} from "./stitches.config";
+import {StitchesTheme, createThemeBase} from "./stitches.config";
 import commonTheme from "./common";
 
 /** Configuration Interface */
@@ -53,13 +53,3 @@ export type NextUIThemeContext = {
   theme?: NextUITheme;
   isDark?: boolean;
 };
-
-/**
- * Stitches CSS Props
- */
-export type CSSFontSize = CSS["fontSize"];
-export type CSSColor = CSS["color"];
-export type CSSGapUnit = CSS["gap"];
-export type CSSFontWeight = CSS["fontWeight"];
-export type CSSLineHeight = CSS["lineHeight"];
-export type CSSLetterSpacing = CSS["letterSpacing"];