feat(root): generated types size reduced

apps/docs/content/docs/components/checkbox.mdx

@@ -37,7 +37,7 @@ import { Checkbox } from "@nextui-org/react";
 
 <Playground
   title="Colors"
-  desc="You can change the color with `color` prop"
+  desc="You can change the color with the `color` prop"
   files={checkboxContent.color}
 />
 

packages/components/card/src/card.styles.ts

@@ -1,4 +1,4 @@
-import {styled} from "@nextui-org/system";
+import {styled, VariantProps} from "@nextui-org/system";
 import {cssFocusVisible, cssNoBlurriness} from "@nextui-org/shared-css";
 
 export const StyledCardBody = styled("div", {

packages/components/card/src/card.tsx

@@ -1,17 +1,57 @@
-import {forwardRef} from "@nextui-org/system";
+import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
 import {clsx, __DEV__} from "@nextui-org/shared-utils";
 import {Divider} from "@nextui-org/divider";
 import {Image} from "@nextui-org/image";
 import {Drip} from "@nextui-org/drip";
+import {useDOMRef} from "@nextui-org/dom-utils";
 
-import {
-  StyledCard,
-  StyledCardHeader as CardHeader,
-  StyledCardFooter as CardFooter,
-  StyledCardBody as CardBody,
-} from "./card.styles";
+import {StyledCard, StyledCardFooter, StyledCardHeader, StyledCardBody} from "./card.styles";
 import {UseCardProps, useCard} from "./use-card";
 
+const CardHeader = forwardRef<HTMLNextUIProps, "div">((props, ref) => {
+  const {className, children, ...otherProps} = props;
+
+  const domRef = useDOMRef(ref);
+
+  return (
+    <StyledCardHeader
+      ref={domRef}
+      {...otherProps}
+      className={clsx("nextui-card-header", className)}
+    >
+      {children}
+    </StyledCardHeader>
+  );
+});
+
+const CardBody = forwardRef<HTMLNextUIProps, "div">((props, ref) => {
+  const {className, children, ...otherProps} = props;
+
+  const domRef = useDOMRef(ref);
+
+  return (
+    <StyledCardBody ref={domRef} {...otherProps} className={clsx("nextui-card-body", className)}>
+      {children}
+    </StyledCardBody>
+  );
+});
+
+const CardFooter = forwardRef<HTMLNextUIProps & {isBlurred?: boolean}, "div">((props, ref) => {
+  const {className, children, ...otherProps} = props;
+
+  const domRef = useDOMRef(ref);
+
+  return (
+    <StyledCardFooter
+      ref={domRef}
+      {...otherProps}
+      className={clsx("nextui-card-footer", className)}
+    >
+      {children}
+    </StyledCardFooter>
+  );
+});
+
 export interface CardProps extends Omit<UseCardProps, "ref"> {}
 
 type CompoundCard = {

packages/components/spacer/src/index.ts

@@ -1,5 +1,3 @@
-export * from "./use-spacer";
-
 // export types
 export type {SpacerProps} from "./spacer";
 

packages/core/react/package.json

@@ -41,15 +41,24 @@
   "dependencies": {
     "@nextui-org/system": "workspace:*",
     "@nextui-org/avatar": "workspace:*",
-    "@nextui-org/col": "workspace:*",
-    "@nextui-org/row": "workspace:*",
-    "@nextui-org/spacer": "workspace:*",
-    "@nextui-org/container": "workspace:*",
     "@nextui-org/badge": "workspace:*",
+    "@nextui-org/button": "workspace:*",
+    "@nextui-org/card": "workspace:*",
+    "@nextui-org/checkbox": "workspace:*",
+    "@nextui-org/code": "workspace:*",
+    "@nextui-org/col": "workspace:*",
+    "@nextui-org/container": "workspace:*",
+    "@nextui-org/divider": "workspace:*",
+    "@nextui-org/drip": "workspace:*",
     "@nextui-org/grid": "workspace:*",
-    "@nextui-org/text": "workspace:*",
+    "@nextui-org/image": "workspace:*",
     "@nextui-org/link": "workspace:*",
-    "@nextui-org/code": "workspace:*"
+    "@nextui-org/loading": "workspace:*",
+    "@nextui-org/row": "workspace:*",
+    "@nextui-org/snippet": "workspace:*",
+    "@nextui-org/spacer": "workspace:*",
+    "@nextui-org/text": "workspace:*",
+    "@nextui-org/user": "workspace:*"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

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

@@ -57,3 +57,4 @@ export type ScaleValue<T> = Stitches.ScaleValue<T>;
 export type CSSProperties = Stitches.CSSProperties;
 export type CSS = Stitches.CSS<StitchesConfig>;
 export type StitchesTheme = typeof theme;
+export type CSSComponent = typeof css;

packages/core/system/src/system.ts

@@ -65,7 +65,7 @@ export type PropsOf<T extends As> = React.ComponentPropsWithoutRef<T> & {
   as?: As;
 };
 
-export type HTMLNextUIProps<T extends As, K extends object = {}> = Omit<
+export type HTMLNextUIProps<T extends As = "div", K extends object = {}> = Omit<
   Omit<PropsOf<T>, "ref" | "color"> & NextUIProps,
   keyof K
 > &

packages/core/system/tsup.config.ts

@@ -3,7 +3,7 @@ import {findUpSync} from "find-up";
 
 export default defineConfig({
   clean: true,
-  minify: false,
+  minify: true,
   treeshake: true,
   format: ["cjs", "esm"],
   outExtension(ctx) {

packages/utilities/shared-css/package.json

@@ -34,7 +34,6 @@
     "postpack": "clean-package restore"
   },
   "devDependencies": {
-    "@nextui-org/system": "workspace:*",
     "clean-package": "2.1.1"
   }
 }

packages/utilities/shared-css/src/focus.ts

@@ -1,6 +1,4 @@
-import {css} from "@nextui-org/system";
-
-export const sharedFocus = css({
+export const sharedFocus = {
   WebkitTapHighlightColor: "transparent",
   "&:focus:not(&:focus-visible)": {
     boxShadow: "none",
@@ -13,9 +11,9 @@ export const sharedFocus = css({
     WebkitTapHighlightColor: "transparent",
     outline: "none",
   },
-});
+};
 
-export const cssFocusVisible = css({
+export const cssFocusVisible = {
   variants: {
     isFocusVisible: {
       true: {
@@ -28,10 +26,10 @@ export const cssFocusVisible = css({
       },
     },
   },
-});
+};
 
-export const cssNoBlurriness = css({
+export const cssNoBlurriness = {
   /* Avoid blurriness */
   transform: "translateZ(0)",
   backfaceVisibility: "hidden",
-});
+};

packages/utilities/shared-css/src/visibility.ts

@@ -1,6 +1,4 @@
-import {css} from "@nextui-org/system";
-
-export const sharedVisuallyHidden = css({
+export const sharedVisuallyHidden = {
   border: "0px",
   clip: "rect(0px, 0px, 0px, 0px)",
   height: "1px",
@@ -10,9 +8,9 @@ export const sharedVisuallyHidden = css({
   overflow: "hidden",
   whiteSpace: "nowrap",
   position: "absolute",
-});
+};
 
-export const cssHideIn = css({
+export const cssHideIn = {
   variants: {
     hideIn: {
       xs: {
@@ -42,9 +40,9 @@ export const cssHideIn = css({
       },
     },
   },
-});
+};
 
-export const cssShowIn = css({
+export const cssShowIn = {
   variants: {
     showIn: {
       xs: {
@@ -74,6 +72,6 @@ export const cssShowIn = css({
       },
     },
   },
-});
+};
 
-export const cssHideShowIn = css(cssHideIn, cssShowIn);
+export const cssHideShowIn = {...cssHideIn, ...cssShowIn};

pnpm-lock.yaml

@@ -730,30 +730,48 @@ importers:
     specifiers:
       '@nextui-org/avatar': workspace:*
       '@nextui-org/badge': workspace:*
+      '@nextui-org/button': workspace:*
+      '@nextui-org/card': workspace:*
+      '@nextui-org/checkbox': workspace:*
       '@nextui-org/code': workspace:*
       '@nextui-org/col': workspace:*
       '@nextui-org/container': workspace:*
+      '@nextui-org/divider': workspace:*
+      '@nextui-org/drip': workspace:*
       '@nextui-org/grid': workspace:*
+      '@nextui-org/image': workspace:*
       '@nextui-org/link': workspace:*
+      '@nextui-org/loading': workspace:*
       '@nextui-org/row': workspace:*
+      '@nextui-org/snippet': workspace:*
       '@nextui-org/spacer': workspace:*
       '@nextui-org/system': workspace:*
       '@nextui-org/text': workspace:*
+      '@nextui-org/user': workspace:*
       '@stitches/react': 1.2.8
       clean-package: 2.1.1
       react: 17.0.2
     dependencies:
       '@nextui-org/avatar': link:../../components/avatar
       '@nextui-org/badge': link:../../components/badge
+      '@nextui-org/button': link:../../components/button
+      '@nextui-org/card': link:../../components/card
+      '@nextui-org/checkbox': link:../../components/checkbox
       '@nextui-org/code': link:../../components/code
       '@nextui-org/col': link:../../components/col
       '@nextui-org/container': link:../../components/container
+      '@nextui-org/divider': link:../../components/divider
+      '@nextui-org/drip': link:../../components/drip
       '@nextui-org/grid': link:../../components/grid
+      '@nextui-org/image': link:../../components/image
       '@nextui-org/link': link:../../components/link
+      '@nextui-org/loading': link:../../components/loading
       '@nextui-org/row': link:../../components/row
+      '@nextui-org/snippet': link:../../components/snippet
       '@nextui-org/spacer': link:../../components/spacer
       '@nextui-org/system': link:../system
       '@nextui-org/text': link:../../components/text
+      '@nextui-org/user': link:../../components/user
     devDependencies:
       '@stitches/react': 1.2.8_react@17.0.2
       clean-package: 2.1.1
@@ -838,10 +856,8 @@ importers:
 
   packages/utilities/shared-css:
     specifiers:
-      '@nextui-org/system': workspace:*
       clean-package: 2.1.1
     devDependencies:
-      '@nextui-org/system': link:../../core/system
       clean-package: 2.1.1
 
   packages/utilities/shared-icons:

tsup.config.ts

@@ -1,11 +1,11 @@
-import { defineConfig } from "tsup"
-import { findUpSync } from "find-up"
+import {defineConfig} from "tsup";
+import {findUpSync} from "find-up";
 
 export default defineConfig({
   clean: true,
   format: ["cjs", "esm"],
   outExtension(ctx) {
-    return { js: `.${ctx.format}.js` }
+    return {js: `.${ctx.format}.js`};
   },
   inject: process.env.JSX ? [findUpSync("react-shim.js")!] : undefined,
-})
+});