@nattstack/ui 0.0.106 → 0.1.0

package/dist/components/picker/picker-trigger.stylex.d.ts

@@ -0,0 +1,60 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/picker/picker-trigger.stylex.d.ts
+declare const pickerTriggerStyles: Readonly<{
+  readonly 32: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 8>;
+    readonly height: stylex.StyleXClassNameFor<"height", 32>;
+  }>;
+  readonly 36: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 9>;
+    readonly height: stylex.StyleXClassNameFor<"height", 36>;
+  }>;
+  readonly 40: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 10>;
+    readonly height: stylex.StyleXClassNameFor<"height", 40>;
+  }>;
+  readonly 44: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 11>;
+    readonly height: stylex.StyleXClassNameFor<"height", 44>;
+  }>;
+  readonly 48: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 12>;
+    readonly height: stylex.StyleXClassNameFor<"height", 48>;
+  }>;
+  readonly base: Readonly<{
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--color-bg-shell-inner)" | "var(--color-gray-3)">;
+    readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "inset 0 0 0 1px var(--color-border)" | "inset 0 0 0 1px var(--color-gray-6)" | "inset 0 0 0 1px transparent">;
+    readonly columnGap: stylex.StyleXClassNameFor<"columnGap", 8>;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer" | "not-allowed">;
+    readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | "var(--opacity-picker-disabled)">;
+    readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", "transparent" | "var(--color-primary)">;
+    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 paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 16>;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "150ms">;
+    readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color, box-shadow">;
+    readonly width: stylex.StyleXClassNameFor<"width", "stretch">;
+  }>;
+  readonly icon: Readonly<{
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly height: stylex.StyleXClassNameFor<"height", 16>;
+    readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+    readonly marginLeft: stylex.StyleXClassNameFor<"marginLeft", "auto">;
+    readonly rotate: stylex.StyleXClassNameFor<"rotate", "0deg" | "180deg">;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "150ms">;
+    readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "rotate">;
+    readonly width: stylex.StyleXClassNameFor<"width", 16>;
+  }>;
+  readonly roundedFull: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 9999>;
+  }>;
+}>;
+//#endregion
+export { pickerTriggerStyles };

package/dist/components/picker/picker-trigger.stylex.js

@@ -0,0 +1,67 @@
+//#region src/components/picker/picker-trigger.stylex.ts
+const pickerTriggerStyles = {
+	"32": {
+		kaIpWk: "xur7f20",
+		kZKoxP: "x10w6t97",
+		$$css: true
+	},
+	"36": {
+		kaIpWk: "xhpnuu7",
+		kZKoxP: "xc9qbxq",
+		$$css: true
+	},
+	"40": {
+		kaIpWk: "x1q4ynmn",
+		kZKoxP: "x1vqgdyp",
+		$$css: true
+	},
+	"44": {
+		kaIpWk: "x1ctf4ec",
+		kZKoxP: "xn3w4p2",
+		$$css: true
+	},
+	"48": {
+		kaIpWk: "x4pepcl",
+		kZKoxP: "xsdox4t",
+		$$css: true
+	},
+	base: {
+		kGNEyG: "x6s0dn4",
+		kWkggS: "xfi2sx2 xm4hijy x1h73wb5",
+		kGVxlE: "xwsgaks xofwk0p x1er153n",
+		k1C7PZ: "xfex06f",
+		kkrTdU: "x1s07b3s x1ypdohk",
+		k1xSpc: "x3nfvp2",
+		kmuXW: "x2lah0s",
+		kSiTet: "xpdez7c x1hc1fzr",
+		kjBf7l: "xr5th1z x1uczgqu",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "xaatb59",
+		kMeerF: "x1de99jn",
+		kVQacm: "xb3r6kr",
+		k8WAf4: "xt970qd",
+		kg3NbH: "x1hr3lfm",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "x106061f",
+		kzqmXN: "x1brm51p",
+		$$css: true
+	},
+	icon: {
+		kGNEyG: "x6s0dn4",
+		k1xSpc: "x78zum5",
+		kZKoxP: "xlup9mm",
+		kjj79g: "xl56j7k",
+		koQZXg: "x8x9d4c",
+		k4XH5M: "x1gcftaf xxh3ss5",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "x1s3hfkw",
+		kzqmXN: "x1kky2od",
+		$$css: true
+	},
+	roundedFull: {
+		kaIpWk: "x10hpsqq",
+		$$css: true
+	}
+};
+//#endregion
+export { pickerTriggerStyles };

package/dist/components/row/row.d.ts

@@ -1,3 +1,4 @@
+import { rowStyles } from "./row.stylex.js";
 import { CSSProperties, ComponentProps, ElementType, JSX } from "react";
 //#region src/components/row/row.d.ts
 type RowProps<ComponentType extends ElementType = "div"> = ComponentProps<ComponentType> & RowInternalProps;
@@ -11,6 +12,5 @@ interface RowInternalProps {
   justifyContent?: CSSProperties["justifyContent"];
 }
 declare function Row(props: RowProps): JSX.Element;
-declare const rowVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { Row, RowProps, rowVariants };
+export { Row, RowProps, rowStyles };

package/dist/components/row/row.js

@@ -1,24 +1,26 @@
-import row_module_default from "./row.module.js";
-import { cva } from "class-variance-authority";
+import { cn } from "../cn.js";
+import { rowStyles } from "./row.stylex.js";
+import * as stylex from "@stylexjs/stylex";
 import { createElement } from "react";
 //#region src/components/row/row.tsx
 function Row(props) {
-	const { alignItems = void 0, as = "div", className: customClassName = "", flexWrap = void 0, gap = void 0, gapX = void 0, gapY = void 0, justifyContent = void 0, style: customStyle, ...rest } = props;
+	const { alignItems = void 0, as = "div", className = "", flexWrap = void 0, gap = void 0, gapX = void 0, gapY = void 0, justifyContent = void 0, style: customStyle, ...rest } = props;
+	const { className: stylexClassName } = stylex.props(rowStyles.base);
+	const combinedStyle = {
+		...customStyle,
+		...gap === void 0 ? {} : { gap },
+		...gapX === void 0 ? {} : { columnGap: gapX },
+		...gapY === void 0 ? {} : { rowGap: gapY },
+		...flexWrap === void 0 ? {} : { flexWrap },
+		...alignItems === void 0 ? {} : { alignItems },
+		...justifyContent === void 0 ? {} : { justifyContent }
+	};
 	return createElement(as, {
-		className: rowVariants({ className: customClassName }),
+		className: cn(stylexClassName, className),
 		"data-slot": "row",
-		style: {
-			...customStyle,
-			...gap === void 0 ? {} : { gap },
-			...gapX === void 0 ? {} : { columnGap: gapX },
-			...gapY === void 0 ? {} : { rowGap: gapY },
-			...flexWrap === void 0 ? {} : { flexWrap },
-			...alignItems === void 0 ? {} : { alignItems },
-			...justifyContent === void 0 ? {} : { justifyContent }
-		},
+		style: combinedStyle,
 		...rest
 	});
 }
-const rowVariants = cva(row_module_default.base);
 //#endregion
-export { Row, rowVariants };
+export { Row, rowStyles };

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

@@ -0,0 +1,10 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/row/row.stylex.d.ts
+declare const rowStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "row">;
+  }>;
+}>;
+//#endregion
+export { rowStyles };

package/dist/components/row/row.stylex.js

@@ -0,0 +1,8 @@
+//#region src/components/row/row.stylex.ts
+const rowStyles = { base: {
+	k1xSpc: "x78zum5",
+	kXwgrk: "x1q0g3np",
+	$$css: true
+} };
+//#endregion
+export { rowStyles };

package/dist/components/select/select-content.d.ts

@@ -1,3 +1,4 @@
+import { pickerPopupStyles } from "../picker/picker-popup.stylex.js";
 import { Select } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/select/select-content.d.ts
@@ -6,6 +7,5 @@ interface SelectContentProps extends Omit<Select.Popup.Props, "className">, Pick
   container?: Select.Portal.Props["container"];
 }
 declare function SelectContent(props: SelectContentProps): JSX.Element;
-declare const selectContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { SelectContent, SelectContentProps, selectContentVariants };
+export { SelectContent, SelectContentProps, pickerPopupStyles as selectContentStyles };

package/dist/components/select/select-content.js

@@ -1,12 +1,11 @@
-import picker_popup_module_default from "../picker/picker-popup.module.js";
-import picker_list_module_default from "../picker/picker-list.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { pickerPopupStyles } from "../picker/picker-popup.stylex.js";
+import { pickerListStyles } from "../picker/picker-list.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Select } from "@base-ui/react";
 //#region src/components/select/select-content.tsx
 function SelectContent(props) {
 	const { align = "start", alignItemWithTrigger = false, alignOffset = void 0, anchor = void 0, arrowPadding = void 0, children, className: customClassName = "", collisionAvoidance = void 0, collisionBoundary = void 0, collisionPadding = void 0, container = void 0, disableAnchorTracking = void 0, positionMethod = void 0, side = "bottom", sideOffset = 6, sticky = void 0, ...rest } = props;
-	const combinedClassName = selectContentVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Select.Portal, {
 		container,
 		"data-slot": "select-portal",
@@ -16,7 +15,7 @@ function SelectContent(props) {
 			alignOffset,
 			anchor,
 			arrowPadding,
-			className: picker_popup_module_default.positioner,
+			className: sx(pickerPopupStyles.positioner),
 			collisionAvoidance,
 			collisionBoundary,
 			collisionPadding,
@@ -27,11 +26,11 @@ function SelectContent(props) {
 			sideOffset,
 			sticky,
 			children: /* @__PURE__ */ jsx(Select.Popup, {
-				className: combinedClassName,
+				className: cn(sx(pickerPopupStyles.base), customClassName),
 				"data-slot": "select-content",
 				...rest,
 				children: /* @__PURE__ */ jsx(Select.List, {
-					className: picker_list_module_default.base,
+					className: sx(pickerListStyles.base),
 					"data-slot": "select-list",
 					children
 				})
@@ -39,6 +38,5 @@ function SelectContent(props) {
 		})
 	});
 }
-const selectContentVariants = cva(picker_popup_module_default.base);
 //#endregion
-export { SelectContent, selectContentVariants };
+export { SelectContent, pickerPopupStyles as selectContentStyles };

package/dist/components/select/select-group-label.d.ts

@@ -5,6 +5,5 @@ interface SelectGroupLabelProps extends Omit<Select.GroupLabel.Props, "className
   className?: string;
 }
 declare function SelectGroupLabel(props: SelectGroupLabelProps): JSX.Element;
-declare const selectGroupLabelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { SelectGroupLabel, SelectGroupLabelProps, selectGroupLabelVariants };
+export { SelectGroupLabel, SelectGroupLabelProps };

package/dist/components/select/select-group-label.js

@@ -1,17 +1,15 @@
-import picker_group_module_default from "../picker/picker-group.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { pickerGroupStyles } from "../picker/picker-group.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Select } from "@base-ui/react";
 //#region src/components/select/select-group-label.tsx
 function SelectGroupLabel(props) {
 	const { className: customClassName = "", ...rest } = props;
-	const combinedClassName = selectGroupLabelVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Select.GroupLabel, {
-		className: combinedClassName,
+		className: cn(sx(pickerGroupStyles.label), customClassName),
 		"data-slot": "select-group-label",
 		...rest
 	});
 }
-const selectGroupLabelVariants = cva(picker_group_module_default.label);
 //#endregion
-export { SelectGroupLabel, selectGroupLabelVariants };
+export { SelectGroupLabel };

package/dist/components/select/select-group.d.ts

@@ -1,3 +1,4 @@
+import { pickerGroupStyles } from "../picker/picker-group.stylex.js";
 import { Select } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/select/select-group.d.ts
@@ -5,6 +6,5 @@ interface SelectGroupProps extends Omit<Select.Group.Props, "className"> {
   className?: string;
 }
 declare function SelectGroup(props: SelectGroupProps): JSX.Element;
-declare const selectGroupVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { SelectGroup, SelectGroupProps, selectGroupVariants };
+export { SelectGroup, SelectGroupProps, pickerGroupStyles as selectGroupStyles };

package/dist/components/select/select-group.js

@@ -1,17 +1,15 @@
-import picker_group_module_default from "../picker/picker-group.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { pickerGroupStyles } from "../picker/picker-group.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Select } from "@base-ui/react";
 //#region src/components/select/select-group.tsx
 function SelectGroup(props) {
 	const { className: customClassName = "", ...rest } = props;
-	const combinedClassName = selectGroupVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Select.Group, {
-		className: combinedClassName,
+		className: cn(sx(pickerGroupStyles.base), customClassName),
 		"data-slot": "select-group",
 		...rest
 	});
 }
-const selectGroupVariants = cva(picker_group_module_default.base);
 //#endregion
-export { SelectGroup, selectGroupVariants };
+export { SelectGroup, pickerGroupStyles as selectGroupStyles };

package/dist/components/select/select-item.d.ts

@@ -1,11 +1,10 @@
+import { pickerItemStyles } from "../picker/picker-item.stylex.js";
 import { Select } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/select/select-item.d.ts
-interface SelectItemProps extends Omit<Select.Item.Props, "className" | "disabled"> {
+interface SelectItemProps extends Omit<Select.Item.Props, "className"> {
   className?: string;
-  isDisabled?: Select.Item.Props["disabled"];
 }
 declare function SelectItem(props: SelectItemProps): JSX.Element;
-declare const selectItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { SelectItem, SelectItemProps, selectItemVariants };
+export { SelectItem, SelectItemProps, pickerItemStyles as selectItemStyles };

package/dist/components/select/select-item.js

@@ -1,22 +1,20 @@
-import picker_item_module_default from "../picker/picker-item.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { pickerItemStyles } from "../picker/picker-item.stylex.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react";
 //#region src/components/select/select-item.tsx
 function SelectItem(props) {
-	const { children, className: customClassName = "", isDisabled = false, ...rest } = props;
-	const combinedClassName = selectItemVariants({ className: customClassName });
+	const { children, className: customClassName = "", ...rest } = props;
 	return /* @__PURE__ */ jsxs(Select.Item, {
-		className: combinedClassName,
+		className: cn(sx(pickerItemStyles.base), customClassName),
 		"data-slot": "select-item",
-		disabled: isDisabled,
 		...rest,
 		children: [/* @__PURE__ */ jsx(Select.ItemText, {
-			className: picker_item_module_default.label,
+			className: sx(pickerItemStyles.label),
 			"data-slot": "select-item-text",
 			children
 		}), /* @__PURE__ */ jsx(Select.ItemIndicator, {
-			className: picker_item_module_default.indicator,
+			className: sx(pickerItemStyles.indicator),
 			"data-slot": "select-item-indicator",
 			children: /* @__PURE__ */ jsx("svg", {
 				height: "14px",
@@ -37,6 +35,5 @@ function SelectItem(props) {
 		})]
 	});
 }
-const selectItemVariants = cva(picker_item_module_default.base);
 //#endregion
-export { SelectItem, selectItemVariants };
+export { SelectItem, pickerItemStyles as selectItemStyles };

package/dist/components/select/select-separator.d.ts

@@ -1,3 +1,4 @@
+import { pickerSeparatorStyles } from "../picker/picker-separator.stylex.js";
 import { Select } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/select/select-separator.d.ts
@@ -5,6 +6,5 @@ interface SelectSeparatorProps extends Omit<Select.Separator.Props, "className">
   className?: string;
 }
 declare function SelectSeparator(props: SelectSeparatorProps): JSX.Element;
-declare const selectSeparatorVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { SelectSeparator, SelectSeparatorProps, selectSeparatorVariants };
+export { SelectSeparator, SelectSeparatorProps, pickerSeparatorStyles as selectSeparatorStyles };

package/dist/components/select/select-separator.js

@@ -1,17 +1,15 @@
-import picker_separator_module_default from "../picker/picker-separator.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { pickerSeparatorStyles } from "../picker/picker-separator.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Select } from "@base-ui/react";
 //#region src/components/select/select-separator.tsx
 function SelectSeparator(props) {
 	const { className: customClassName = "", ...rest } = props;
-	const combinedClassName = selectSeparatorVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Select.Separator, {
-		className: combinedClassName,
+		className: cn(sx(pickerSeparatorStyles.base), customClassName),
 		"data-slot": "select-separator",
 		...rest
 	});
 }
-const selectSeparatorVariants = cva(picker_separator_module_default.base);
 //#endregion
-export { SelectSeparator, selectSeparatorVariants };
+export { SelectSeparator, pickerSeparatorStyles as selectSeparatorStyles };

package/dist/components/select/select-trigger.d.ts

@@ -1,15 +1,12 @@
-import { VariantProps } from "class-variance-authority";
+import { pickerTriggerStyles } from "../picker/picker-trigger.stylex.js";
 import { Select } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/select/select-trigger.d.ts
 interface SelectTriggerProps extends Select.Trigger.Props {
-  isRounded?: VariantProps<typeof selectTriggerVariants>["isRounded"];
-  size?: VariantProps<typeof selectTriggerVariants>["size"];
+  rounded?: boolean;
+  size?: SelectTriggerSize;
 }
+type SelectTriggerSize = 32 | 36 | 40 | 44 | 48;
 declare function SelectTrigger(props: SelectTriggerProps): JSX.Element;
-declare const selectTriggerVariants: (props?: ({
-  isRounded?: boolean | null | undefined;
-  size?: 32 | 36 | 40 | 44 | 48 | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
-export { SelectTrigger, SelectTriggerProps, selectTriggerVariants };
+export { SelectTrigger, SelectTriggerProps, SelectTriggerSize, pickerTriggerStyles as selectTriggerStyles };

package/dist/components/select/select-trigger.js

@@ -1,21 +1,16 @@
-import picker_trigger_module_default from "../picker/picker-trigger.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { pickerTriggerStyles } from "../picker/picker-trigger.stylex.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react";
 //#region src/components/select/select-trigger.tsx
 function SelectTrigger(props) {
-	const { children = void 0, className: customClassName = "", isRounded = false, size = 40, ...rest } = props;
-	const combinedClassName = selectTriggerVariants({
-		className: customClassName,
-		isRounded,
-		size
-	});
+	const { children = void 0, className: customClassName = "", rounded = false, size = 40, ...rest } = props;
 	return /* @__PURE__ */ jsxs(Select.Trigger, {
-		className: combinedClassName,
+		className: cn(sx(pickerTriggerStyles.base, pickerTriggerStyles[size], rounded && pickerTriggerStyles.roundedFull), customClassName),
 		"data-slot": "select-trigger",
 		...rest,
 		children: [children, /* @__PURE__ */ jsx(Select.Icon, {
-			className: picker_trigger_module_default.icon,
+			className: sx(pickerTriggerStyles.icon),
 			"data-slot": "select-icon",
 			children: /* @__PURE__ */ jsx("svg", {
 				height: "14",
@@ -34,15 +29,5 @@ function SelectTrigger(props) {
 		})]
 	});
 }
-const selectTriggerVariants = cva(picker_trigger_module_default.base, { variants: {
-	isRounded: { true: picker_trigger_module_default.rounded_full },
-	size: {
-		32: picker_trigger_module_default.size_32,
-		36: picker_trigger_module_default.size_36,
-		40: picker_trigger_module_default.size_40,
-		44: picker_trigger_module_default.size_44,
-		48: picker_trigger_module_default.size_48
-	}
-} });
 //#endregion
-export { SelectTrigger, selectTriggerVariants };
+export { SelectTrigger, pickerTriggerStyles as selectTriggerStyles };

package/dist/components/select/select-value.d.ts

@@ -1,8 +1,8 @@
+import { selectValueStyles } from "./select-value.stylex.js";
 import { Select } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/select/select-value.d.ts
 interface SelectValueProps extends Select.Value.Props {}
 declare function SelectValue(props: SelectValueProps): JSX.Element;
-declare const selectValueVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { SelectValue, SelectValueProps, selectValueVariants };
+export { SelectValue, SelectValueProps, selectValueStyles };

package/dist/components/select/select-value.js

@@ -1,14 +1,13 @@
-import select_value_module_default from "./select-value.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { selectValueStyles } from "./select-value.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Select } from "@base-ui/react";
 //#region src/components/select/select-value.tsx
 function SelectValue(props) {
 	const { children = void 0, className: customClassName = "", placeholder = void 0, render = /* @__PURE__ */ jsx("div", {}), ...rest } = props;
-	const combinedClassName = selectValueVariants({ className: customClassName });
 	const resolvedChildren = typeof children === "function" ? (selectedValue) => (selectedValue ?? void 0) === void 0 ? placeholder : children(selectedValue) : children;
 	return /* @__PURE__ */ jsx(Select.Value, {
-		className: combinedClassName,
+		className: cn(sx(selectValueStyles.base), customClassName),
 		"data-slot": "select-value",
 		placeholder,
 		render,
@@ -16,6 +15,5 @@ function SelectValue(props) {
 		children: resolvedChildren
 	});
 }
-const selectValueVariants = cva(select_value_module_default.base);
 //#endregion
-export { SelectValue, selectValueVariants };
+export { SelectValue, selectValueStyles };

package/dist/components/select/select-value.stylex.d.ts

@@ -0,0 +1,14 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/select/select-value.stylex.d.ts
+declare const selectValueStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-text-primary)" | "var(--color-gray-9)">;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 14>;
+    readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", 450>;
+    readonly overflowX: stylex.StyleXClassNameFor<"overflowX", "hidden">;
+    readonly textOverflow: stylex.StyleXClassNameFor<"textOverflow", "ellipsis">;
+    readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
+  }>;
+}>;
+//#endregion
+export { selectValueStyles };

package/dist/components/select/select-value.stylex.js

@@ -0,0 +1,12 @@
+//#region src/components/select/select-value.stylex.ts
+const selectValueStyles = { base: {
+	kMwMTN: "x1juq307 x1tgivj0",
+	kGuDYH: "xif65rj",
+	k63SB2: "x10p5zqr",
+	kXHlph: "x6ikm8r",
+	kg5iWk: "xlyipyv",
+	khDVqt: "xuxw1ft",
+	$$css: true
+} };
+//#endregion
+export { selectValueStyles };

package/dist/components/spacer/spacer.d.ts

@@ -1,3 +1,4 @@
+import { spacerStyles } from "./spacer.stylex.js";
 import { CSSProperties, ComponentProps, JSX } from "react";
 //#region src/components/spacer/spacer.d.ts
 interface SpacerProps extends Omit<ComponentProps<"div">, "children"> {
@@ -5,6 +6,5 @@ interface SpacerProps extends Omit<ComponentProps<"div">, "children"> {
   width?: CSSProperties["width"];
 }
 declare function Spacer(props: SpacerProps): JSX.Element;
-declare const spacerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { Spacer, SpacerProps, spacerVariants };
+export { Spacer, SpacerProps, spacerStyles };

package/dist/components/spacer/spacer.js

@@ -1,20 +1,22 @@
-import spacer_module_default from "./spacer.module.js";
-import { cva } from "class-variance-authority";
+import { cn } from "../cn.js";
+import { spacerStyles } from "./spacer.stylex.js";
+import * as stylex from "@stylexjs/stylex";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/spacer/spacer.tsx
 function Spacer(props) {
-	const { className: customClassName = "", height, style: customStyle, width, ...rest } = props;
+	const { className = "", height, style: customStyle, width, ...rest } = props;
+	const { className: stylexClassName } = stylex.props(spacerStyles.base);
+	const combinedStyle = {
+		...customStyle,
+		...width === void 0 ? {} : { width },
+		...height === void 0 ? {} : { height }
+	};
 	return /* @__PURE__ */ jsx("div", {
-		className: spacerVariants({ className: customClassName }),
+		className: cn(stylexClassName, className),
 		"data-slot": "spacer",
-		style: {
-			...customStyle,
-			...width === void 0 ? {} : { width },
-			...height === void 0 ? {} : { height }
-		},
+		style: combinedStyle,
 		...rest
 	});
 }
-const spacerVariants = cva(spacer_module_default.base);
 //#endregion
-export { Spacer, spacerVariants };
+export { Spacer, spacerStyles };

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

@@ -0,0 +1,9 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/spacer/spacer.stylex.d.ts
+declare const spacerStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+  }>;
+}>;
+//#endregion
+export { spacerStyles };

package/dist/components/spacer/spacer.stylex.js

@@ -0,0 +1,7 @@
+//#region src/components/spacer/spacer.stylex.ts
+const spacerStyles = { base: {
+	kmuXW: "x2lah0s",
+	$$css: true
+} };
+//#endregion
+export { spacerStyles };