@nattstack/ui 0.0.107 → 0.1.0

package/README.md

@@ -1,6 +1,6 @@
 # @nattstack/ui
 
-A collection of reusable React components built with Base UI, TypeScript, and CSS Modules.
+A collection of reusable React components built with Base UI and StyleX.
 
 ## Links
 

package/dist/baseline/index.css

@@ -29,13 +29,17 @@
 html {
   -moz-text-size-adjust: none;
   -webkit-text-size-adjust: none;
-  color-scheme: light dark;
+  color-scheme: light;
   scrollbar-color: var(--color-gray-6) transparent;
   scrollbar-width: thin;
   text-size-adjust: none;
   touch-action: manipulation;
 }
 
+html.dark {
+  color-scheme: dark;
+}
+
 /*
     Base typography and theme tokens
     - Improve font rendering

package/dist/components/button/button-spinner.js

@@ -1,13 +1,28 @@
-import button_spinner_module_default from "./button-spinner.module.js";
+import { sx } from "../cn.js";
+import { buttonSpinnerStyles } from "./button-spinner.stylex.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/button/button-spinner.tsx
 const SIZE = 18;
+const BAR_STYLES = [
+	buttonSpinnerStyles[1],
+	buttonSpinnerStyles[2],
+	buttonSpinnerStyles[3],
+	buttonSpinnerStyles[4],
+	buttonSpinnerStyles[5],
+	buttonSpinnerStyles[6],
+	buttonSpinnerStyles[7],
+	buttonSpinnerStyles[8],
+	buttonSpinnerStyles[9],
+	buttonSpinnerStyles[10],
+	buttonSpinnerStyles[11],
+	buttonSpinnerStyles[12]
+];
 function ButtonSpinner() {
 	return /* @__PURE__ */ jsx("div", {
-		className: button_spinner_module_default.base,
+		className: sx(buttonSpinnerStyles.base),
 		"data-slot": "button-spinner",
 		style: { "--size": `${SIZE}px` },
-		children: Array.from({ length: 12 }).map((_, index) => /* @__PURE__ */ jsx("div", {}, index))
+		children: BAR_STYLES.map((barStyle, index) => /* @__PURE__ */ jsx("div", { className: sx(buttonSpinnerStyles.bar, barStyle) }, index))
 	});
 }
 //#endregion

package/dist/components/button/button-spinner.stylex.js

@@ -0,0 +1,96 @@
+//#region src/components/button/button-spinner.stylex.ts
+const buttonSpinnerStyles = {
+	"1": {
+		kSiTet: "x1hc1fzr",
+		k4XH5M: "x1gcftaf",
+		$$css: true
+	},
+	"2": {
+		kSiTet: "x1skojfp",
+		k4XH5M: "xqd20pc",
+		$$css: true
+	},
+	"3": {
+		kSiTet: "xiiclqw",
+		k4XH5M: "xhmk0vv",
+		$$css: true
+	},
+	"4": {
+		kSiTet: "x11t8jnp",
+		k4XH5M: "xq77vm1",
+		$$css: true
+	},
+	"5": {
+		kSiTet: "x1ks1olk",
+		k4XH5M: "x1yqfaqn",
+		$$css: true
+	},
+	"6": {
+		kSiTet: "x8qkkdt",
+		k4XH5M: "x1rtxy7",
+		$$css: true
+	},
+	"7": {
+		kSiTet: "xwq05k6",
+		k4XH5M: "x1qul50q",
+		$$css: true
+	},
+	"8": {
+		kSiTet: "x1sfcrbg",
+		k4XH5M: "x5f4xin",
+		$$css: true
+	},
+	"9": {
+		kSiTet: "xti2d7y",
+		k4XH5M: "x13zb3im",
+		$$css: true
+	},
+	"10": {
+		kSiTet: "x1b0snh4",
+		k4XH5M: "x7lonkb",
+		$$css: true
+	},
+	"11": {
+		kSiTet: "xvpkmg4",
+		k4XH5M: "xyp7w1s",
+		$$css: true
+	},
+	"12": {
+		kSiTet: "x1xyvc85",
+		k4XH5M: "xggx6ht",
+		$$css: true
+	},
+	bar: {
+		ks3ayO: "x1hfhjwi",
+		kUfP38: "x1f3l70z",
+		k5JduY: "x1s928wv",
+		k4zj60: "x1wsn0xg",
+		kwXMNM: "x1j6awrg",
+		kLxBhq: "xnbfe2x",
+		kkgrvl: "xdnmdmm",
+		kZKoxP: "x13gmgbj",
+		kfzvcC: "x47corl",
+		kVAEAm: "x10l6tqk",
+		kCIrl2: "x3m8u43",
+		k87sOh: "xwa60dl",
+		k3nNDw: "x1kol6zn",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "xfagghw",
+		kIY38u: "x3sa99s",
+		kzqmXN: "xtnyu7h",
+		$$css: true
+	},
+	base: {
+		k44tkh: "x1q3qbx4",
+		ko0y90: "xa4qsjk",
+		kKVMdj: "x1m7ugx0",
+		kyAemX: "xbv57ra",
+		kZKoxP: "x188dgw3",
+		kVAEAm: "x10l6tqk",
+		km0Bbg: "xngwomw",
+		kzqmXN: "x1fjlwjz",
+		$$css: true
+	}
+};
+//#endregion
+export { buttonSpinnerStyles };

package/dist/components/button/button.d.ts

@@ -1,25 +1,28 @@
-import { VariantProps } from "class-variance-authority";
+import { sx } from "../cn.js";
+import { buttonStyles } from "./button.stylex.js";
 import { ComponentProps, JSX, ReactNode } from "react";
 //#region src/components/button/button.d.ts
-interface ButtonProps extends Omit<ComponentProps<"button">, "children" | "disabled"> {
+interface ButtonProps extends Omit<ComponentProps<"button">, "children"> {
+  fullWidth?: boolean;
   iconEnd?: ReactNode;
   iconStart?: ReactNode;
-  isDisabled?: ComponentProps<"button">["disabled"];
-  isFullWidth?: VariantProps<typeof button>["isFullWidth"];
-  isLoading?: ComponentProps<"button">["disabled"];
-  isRounded?: VariantProps<typeof button>["isRounded"];
   label?: number | number[] | string | string[];
-  size?: VariantProps<typeof button>["size"];
-  variant?: VariantProps<typeof button>["variant"];
+  loading?: boolean;
+  rounded?: boolean;
+  size?: ButtonSize;
+  variant?: ButtonVariant;
 }
+type ButtonSize = 32 | 36 | 40 | 44 | 48;
+type ButtonVariant = "ghost" | "primary" | "secondary";
 declare function Button(props: ButtonProps): JSX.Element;
-declare const button: (props?: ({
-  isDisabled?: boolean | null | undefined;
-  isFullWidth?: boolean | null | undefined;
-  isLoading?: boolean | null | undefined;
-  isRounded?: boolean | null | undefined;
-  size?: 32 | 36 | 40 | 44 | 48 | null | undefined;
-  variant?: "ghost" | "primary" | "secondary" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function getButtonClassName(options: {
+  className?: string;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  loading?: boolean;
+  rounded?: boolean;
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+}, ...overrides: Parameters<typeof sx>): string;
 //#endregion
-export { Button, ButtonProps, button };
+export { Button, ButtonProps, ButtonSize, ButtonVariant, buttonStyles, getButtonClassName };

package/dist/components/button/button.js

@@ -1,55 +1,45 @@
+import { cn, sx } from "../cn.js";
 import { ButtonSpinner } from "./button-spinner.js";
-import button_module_default from "./button.module.js";
-import { cva } from "class-variance-authority";
+import { buttonRoundedBaseStyles, buttonRoundedFullStyles, buttonStyles } from "./button.stylex.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/button/button.tsx
 function Button(props) {
-	const { className = "", isDisabled = false, iconStart = "", iconEnd = "", isFullWidth = false, isLoading = false, isRounded = false, label = "", variant = "primary", size = 40, ...rest } = props;
+	const { className = "", disabled = false, iconStart = "", iconEnd = "", fullWidth = false, loading = false, rounded = false, label = "", variant = "primary", size = 40, ...rest } = props;
 	return /* @__PURE__ */ jsxs("button", {
-		className: button({
+		className: getButtonClassName({
 			className,
-			isDisabled,
-			isFullWidth,
-			isLoading,
-			isRounded,
+			disabled,
+			fullWidth,
+			loading,
+			rounded,
 			size,
 			variant
 		}),
 		"data-slot": "button",
-		disabled: isDisabled || isLoading,
+		disabled: disabled || loading,
 		type: "button",
 		...rest,
 		children: [
-			isLoading && /* @__PURE__ */ jsx(ButtonSpinner, {}),
-			iconStart,
-			label !== "" && /* @__PURE__ */ jsx("span", { children: label }),
-			iconEnd
+			loading && /* @__PURE__ */ jsx(ButtonSpinner, {}),
+			hideWhenLoading(iconStart, loading),
+			label !== "" && /* @__PURE__ */ jsx("span", {
+				className: sx(loading && buttonStyles.loadingContent),
+				children: label
+			}),
+			hideWhenLoading(iconEnd, loading)
 		]
 	});
 }
-const button = cva(button_module_default.base, { variants: {
-	isDisabled: { true: button_module_default.disabled },
-	isFullWidth: {
-		false: button_module_default.width_base,
-		true: button_module_default.width_full
-	},
-	isLoading: { true: button_module_default.loading },
-	isRounded: {
-		false: button_module_default.rounded_base,
-		true: button_module_default.rounded_full
-	},
-	size: {
-		32: button_module_default.size_32,
-		36: button_module_default.size_36,
-		40: button_module_default.size_40,
-		44: button_module_default.size_44,
-		48: button_module_default.size_48
-	},
-	variant: {
-		ghost: button_module_default.variant_ghost,
-		primary: button_module_default.variant_primary,
-		secondary: button_module_default.variant_secondary
-	}
-} });
+function getButtonClassName(options, ...overrides) {
+	const { className = "", disabled = false, fullWidth = false, loading = false, rounded = false, size = 40, variant = "primary" } = options;
+	return cn(sx(buttonStyles.base, buttonStyles[size], (rounded ? buttonRoundedFullStyles : buttonRoundedBaseStyles)[size], buttonStyles[variant], fullWidth ? buttonStyles.widthFull : buttonStyles.widthBase, disabled && buttonStyles.disabled, loading && buttonStyles.loading, ...overrides), className);
+}
+function hideWhenLoading(node, loading) {
+	if (!loading || node === "") return node;
+	return /* @__PURE__ */ jsx("span", {
+		className: sx(buttonStyles.loadingContent),
+		children: node
+	});
+}
 //#endregion
-export { Button, button };
+export { Button, buttonStyles, getButtonClassName };

package/dist/components/button/button.stylex.d.ts

@@ -0,0 +1,121 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/button/button.stylex.d.ts
+declare const buttonStyles: Readonly<{
+  readonly 32: Readonly<{
+    readonly height: stylex.StyleXClassNameFor<"height", 32>;
+  }>;
+  readonly 36: Readonly<{
+    readonly height: stylex.StyleXClassNameFor<"height", 36>;
+  }>;
+  readonly 40: Readonly<{
+    readonly height: stylex.StyleXClassNameFor<"height", 40>;
+  }>;
+  readonly 44: Readonly<{
+    readonly height: stylex.StyleXClassNameFor<"height", 44>;
+  }>;
+  readonly 48: Readonly<{
+    readonly height: stylex.StyleXClassNameFor<"height", 48>;
+  }>;
+  readonly base: Readonly<{
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly columnGap: stylex.StyleXClassNameFor<"columnGap", 8>;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+    readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 14>;
+    readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", 450>;
+    readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+    readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", "var(--color-outline)" | "transparent">;
+    readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", 2>;
+    readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+    readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 2>;
+    readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+    readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "150ms">;
+    readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color, box-shadow, translate">;
+    readonly translate: stylex.StyleXClassNameFor<"translate", "0 1px" | "0 0">;
+    readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
+  }>;
+  readonly disabled: Readonly<{
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "not-allowed">;
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.5>;
+  }>;
+  readonly ghost: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent" | "var(--color-gray-4)">;
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-gray-12)">;
+  }>;
+  readonly loading: Readonly<{
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "not-allowed">;
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.5>;
+  }>;
+  readonly loadingContent: Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "transparent">;
+    readonly textShadow: stylex.StyleXClassNameFor<"textShadow", "none">;
+  }>;
+  readonly primary: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--color-gray-12)" | "color-mix(in oklab, var(--color-gray-12) 100%, var(--color-gray-1) 25%)">;
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-gray-1)">;
+  }>;
+  readonly roundedBase32: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 8>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 12>;
+  }>;
+  readonly roundedBase36: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 9>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 14>;
+  }>;
+  readonly roundedBase40: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 10>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 16>;
+  }>;
+  readonly roundedBase44: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 11>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 18>;
+  }>;
+  readonly roundedBase48: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 12>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 20>;
+  }>;
+  readonly roundedFull32: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 16>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 12>;
+  }>;
+  readonly roundedFull36: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 18>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 17>;
+  }>;
+  readonly roundedFull40: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 20>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 20>;
+  }>;
+  readonly roundedFull44: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 22>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 23>;
+  }>;
+  readonly roundedFull48: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 24>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 28>;
+  }>;
+  readonly secondary: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--color-gray-4)" | "var(--color-bg-shell-inner)">;
+    readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "none" | "inset 0 0 0 1px var(--color-border)">;
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-gray-12)">;
+  }>;
+  readonly widthBase: Readonly<{
+    readonly width: stylex.StyleXClassNameFor<"width", "fit-content">;
+  }>;
+  readonly widthFull: Readonly<{
+    readonly width: stylex.StyleXClassNameFor<"width", "stretch">;
+  }>;
+}>;
+//#endregion
+export { buttonStyles };

package/dist/components/button/button.stylex.js

@@ -0,0 +1,158 @@
+//#region src/components/button/button.stylex.ts
+const buttonStyles = {
+	"32": {
+		kZKoxP: "x10w6t97",
+		$$css: true
+	},
+	"36": {
+		kZKoxP: "xc9qbxq",
+		$$css: true
+	},
+	"40": {
+		kZKoxP: "x1vqgdyp",
+		$$css: true
+	},
+	"44": {
+		kZKoxP: "xn3w4p2",
+		$$css: true
+	},
+	"48": {
+		kZKoxP: "xsdox4t",
+		$$css: true
+	},
+	base: {
+		kGNEyG: "x6s0dn4",
+		k1C7PZ: "xfex06f",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x3nfvp2",
+		kGuDYH: "xif65rj",
+		k63SB2: "x10p5zqr",
+		kjj79g: "xl56j7k",
+		kjBf7l: "xfcj4rt x1uczgqu",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "xaatb59",
+		kMeerF: "x1de99jn",
+		kVQacm: "xb3r6kr",
+		kVAEAm: "x1n2onr6",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "x101bfz1",
+		kIY38u: "x1avgydi x1qeszuu",
+		kfSwDN: "x87ps6o",
+		$$css: true
+	},
+	disabled: {
+		kkrTdU: "x1h6gzvc",
+		kSiTet: "xbyyjgo",
+		$$css: true
+	},
+	ghost: {
+		kWkggS: "x1pflddp xjbqb8w",
+		kMwMTN: "x197k1c5",
+		$$css: true
+	},
+	loading: {
+		kkrTdU: "x1h6gzvc",
+		kSiTet: "xbyyjgo",
+		$$css: true
+	},
+	loadingContent: {
+		kMwMTN: "x19co3pv",
+		kKMj4B: "x19pm5ym",
+		$$css: true
+	},
+	primary: {
+		kWkggS: "xalcron x1escjlh",
+		kMwMTN: "xf4b43d",
+		$$css: true
+	},
+	roundedBase32: {
+		kaIpWk: "xur7f20",
+		k8WAf4: "xt970qd",
+		kg3NbH: "xaope02",
+		$$css: true
+	},
+	roundedBase36: {
+		kaIpWk: "xhpnuu7",
+		k8WAf4: "xt970qd",
+		kg3NbH: "xqin4a2",
+		$$css: true
+	},
+	roundedBase40: {
+		kaIpWk: "x1q4ynmn",
+		k8WAf4: "xt970qd",
+		kg3NbH: "x1hr3lfm",
+		$$css: true
+	},
+	roundedBase44: {
+		kaIpWk: "x1ctf4ec",
+		k8WAf4: "xt970qd",
+		kg3NbH: "x12j899k",
+		$$css: true
+	},
+	roundedBase48: {
+		kaIpWk: "x4pepcl",
+		k8WAf4: "xt970qd",
+		kg3NbH: "x17qtykl",
+		$$css: true
+	},
+	roundedFull32: {
+		kaIpWk: "xgqmno8",
+		k8WAf4: "xt970qd",
+		kg3NbH: "xaope02",
+		$$css: true
+	},
+	roundedFull36: {
+		kaIpWk: "xugzpu4",
+		k8WAf4: "xt970qd",
+		kg3NbH: "xelufkg",
+		$$css: true
+	},
+	roundedFull40: {
+		kaIpWk: "x1m3ak92",
+		k8WAf4: "xt970qd",
+		kg3NbH: "x17qtykl",
+		$$css: true
+	},
+	roundedFull44: {
+		kaIpWk: "x13pz1uv",
+		k8WAf4: "xt970qd",
+		kg3NbH: "x16l46lf",
+		$$css: true
+	},
+	roundedFull48: {
+		kaIpWk: "x1khhgft",
+		k8WAf4: "xt970qd",
+		kg3NbH: "x1pbfunf",
+		$$css: true
+	},
+	secondary: {
+		kWkggS: "x1pflddp x1h73wb5",
+		kGVxlE: "x7auhu6 x1er153n",
+		kMwMTN: "x197k1c5",
+		$$css: true
+	},
+	widthBase: {
+		kzqmXN: "xeq5yr9",
+		$$css: true
+	},
+	widthFull: {
+		kzqmXN: "x1brm51p",
+		$$css: true
+	}
+};
+const buttonRoundedBaseStyles = {
+	32: buttonStyles.roundedBase32,
+	36: buttonStyles.roundedBase36,
+	40: buttonStyles.roundedBase40,
+	44: buttonStyles.roundedBase44,
+	48: buttonStyles.roundedBase48
+};
+const buttonRoundedFullStyles = {
+	32: buttonStyles.roundedFull32,
+	36: buttonStyles.roundedFull36,
+	40: buttonStyles.roundedFull40,
+	44: buttonStyles.roundedFull44,
+	48: buttonStyles.roundedFull48
+};
+//#endregion
+export { buttonRoundedBaseStyles, buttonRoundedFullStyles, buttonStyles };

package/dist/components/button-link/button-link.d.ts

@@ -1,17 +1,16 @@
-import { button } from "../button/button.js";
-import { VariantProps } from "class-variance-authority";
+import { ButtonSize, ButtonVariant } from "../button/button.js";
 import { ComponentProps, ElementType, JSX, ReactNode } from "react";
 //#region src/components/button-link/button-link.d.ts
 type ButtonLinkProps<ComponentType extends ElementType = "a"> = ButtonLinkInternalProps<ComponentType> & Omit<ComponentProps<ComponentType>, "children" | keyof ButtonLinkInternalProps>;
 interface ButtonLinkInternalProps<ComponentType extends ElementType = "a"> {
   as?: ComponentType;
+  fullWidth?: boolean;
   iconEnd?: ReactNode;
   iconStart?: ReactNode;
-  isFullWidth?: VariantProps<typeof button>["isFullWidth"];
-  isRounded?: VariantProps<typeof button>["isRounded"];
   label?: number | number[] | string | string[];
-  size?: VariantProps<typeof button>["size"];
-  variant?: VariantProps<typeof button>["variant"];
+  rounded?: boolean;
+  size?: ButtonSize;
+  variant?: ButtonVariant;
 }
 declare function ButtonLink<ComponentType extends ElementType = "a">(props: ButtonLinkProps<ComponentType>): JSX.Element;
 //#endregion

package/dist/components/button-link/button-link.js

@@ -1,13 +1,13 @@
-import { button } from "../button/button.js";
+import { getButtonClassName } from "../button/button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/button-link/button-link.tsx
 function ButtonLink(props) {
-	const { as: Component = "a", className = "", iconStart = "", iconEnd = "", isFullWidth = false, isRounded = false, label = "", size = 40, variant = "primary", ...rest } = props;
+	const { as: Component = "a", className = "", iconStart = "", iconEnd = "", fullWidth = false, rounded = false, label = "", size = 40, variant = "primary", ...rest } = props;
 	return /* @__PURE__ */ jsxs(Component, {
-		className: button({
+		className: getButtonClassName({
 			className,
-			isFullWidth,
-			isRounded,
+			fullWidth,
+			rounded,
 			size,
 			variant
 		}),

package/dist/components/checkbox/checkbox-icon.js

@@ -1,3 +1,5 @@
+import { sx } from "../cn.js";
+import { checkboxStyles } from "./checkbox.stylex.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/checkbox/checkbox-icon.tsx
 function CheckboxIcon(props) {
@@ -11,11 +13,10 @@ function CheckboxIcon(props) {
 		xmlns: "http://www.w3.org/2000/svg",
 		...rest,
 		children: /* @__PURE__ */ jsx("path", {
+			className: sx(checkboxStyles.iconPath),
 			d: "M5 13.875L9.2 18L19 7",
-			stroke: "black",
 			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "1.5"
+			strokeLinejoin: "round"
 		})
 	});
 }

package/dist/components/checkbox/checkbox.d.ts

@@ -1,8 +1,8 @@
+import { checkboxStyles } from "./checkbox.stylex.js";
 import { Checkbox } from "@base-ui/react";
 import { ComponentProps, JSX } from "react";
 //#region src/components/checkbox/checkbox.d.ts
 interface CheckboxProps extends ComponentProps<typeof Checkbox.Root> {}
 declare function Checkbox$1(props: CheckboxProps): JSX.Element;
-declare const checkboxVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { Checkbox$1 as Checkbox, CheckboxProps, checkboxVariants };
+export { Checkbox$1 as Checkbox, CheckboxProps, checkboxStyles };

package/dist/components/checkbox/checkbox.js

@@ -1,22 +1,20 @@
+import { cn, sx } from "../cn.js";
+import { checkboxStyles } from "./checkbox.stylex.js";
 import { CheckboxIcon } from "./checkbox-icon.js";
-import checkbox_module_default from "./checkbox.module.js";
-import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 import { Checkbox } from "@base-ui/react";
 //#region src/components/checkbox/checkbox.tsx
 function Checkbox$1(props) {
 	const { children = void 0, className: customClassName = "", ...rest } = props;
-	const combinedClassName = checkboxVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Checkbox.Root, {
-		className: combinedClassName,
+		className: cn(sx(checkboxStyles.base), customClassName),
 		"data-slot": "checkbox",
 		...rest,
 		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
-			className: checkbox_module_default.indicator,
-			children: children ?? /* @__PURE__ */ jsx(CheckboxIcon, { className: checkbox_module_default.icon })
+			className: sx(checkboxStyles.indicator),
+			children: children ?? /* @__PURE__ */ jsx(CheckboxIcon, { className: sx(checkboxStyles.icon) })
 		})
 	});
 }
-const checkboxVariants = cva(checkbox_module_default.base);
 //#endregion
-export { Checkbox$1 as Checkbox, checkboxVariants };
+export { Checkbox$1 as Checkbox, checkboxStyles };