@nattstack/ui 0.0.106 → 0.1.0

package/dist/components/input/input.d.ts

@@ -1,22 +1,14 @@
-import { VariantProps } from "class-variance-authority";
+import { inputStyles } from "./input.stylex.js";
 import { ComponentProps, JSX } from "react";
 //#region src/components/input/input.d.ts
-interface InputProps extends Omit<ComponentProps<"input">, "aria-pressed" | "autoFocus" | "disabled" | "readOnly" | "required"> {
-  isActive?: boolean;
-  isAutoFocus?: boolean;
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  isReadOnly?: boolean;
-  isRequired?: boolean;
-  isRounded?: boolean;
-  isValid?: boolean;
+interface InputProps extends Omit<ComponentProps<"input">, "aria-pressed"> {
+  active?: boolean;
+  invalid?: boolean;
+  rounded?: boolean;
   size?: InputSize;
+  valid?: boolean;
 }
-type InputSize = NonNullable<VariantProps<typeof inputVariants>["size"]>;
+type InputSize = 32 | 36 | 40 | 44 | 48;
 declare function Input(props: InputProps): JSX.Element;
-declare const inputVariants: (props?: ({
-  isRounded?: boolean | null | undefined;
-  size?: 32 | 36 | 40 | 44 | 48 | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
-export { Input, InputProps, inputVariants };
+export { Input, InputProps, InputSize, inputStyles };

package/dist/components/input/input.js

@@ -1,45 +1,18 @@
-import input_module_default from "./input.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { inputStyles } from "./input.stylex.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/input/input.tsx
 function Input(props) {
-	const { className: customClassName = "", isActive = false, isAutoFocus = false, isDisabled = false, isInvalid = void 0, isReadOnly = false, isRequired = false, isRounded = false, isValid = void 0, size = 48, type = "text", ...rest } = props;
+	const { className: customClassName = "", active = false, invalid = void 0, rounded = false, valid = void 0, size = 48, ...rest } = props;
 	return /* @__PURE__ */ jsx("input", {
-		autoFocus: isAutoFocus,
-		className: inputVariants({
-			className: customClassName,
-			isRounded,
-			size
-		}),
-		"data-is-active": isActive,
-		"data-is-invalid": isInvalid,
-		"data-is-valid": isValid,
+		className: cn(sx(inputStyles.base, inputStyles[size], rounded && inputStyles.roundedFull), customClassName),
+		"data-is-active": active,
+		"data-is-invalid": invalid,
+		"data-is-valid": valid,
 		"data-slot": "input",
-		disabled: isDisabled,
-		readOnly: isReadOnly,
-		required: isRequired,
-		type,
+		type: "text",
 		...rest
 	});
 }
-const inputVariants = cva(input_module_default.base, {
-	defaultVariants: {
-		isRounded: false,
-		size: 48
-	},
-	variants: {
-		isRounded: {
-			false: input_module_default.rounded_base,
-			true: input_module_default.rounded_full
-		},
-		size: {
-			32: input_module_default.size_32,
-			36: input_module_default.size_36,
-			40: input_module_default.size_40,
-			44: input_module_default.size_44,
-			48: input_module_default.size_48
-		}
-	}
-});
 //#endregion
-export { Input, inputVariants };
+export { Input, inputStyles };

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

@@ -0,0 +1,66 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/input/input.stylex.d.ts
+declare const inputStyles: Readonly<{
+  readonly 32: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 8>;
+    readonly minHeight: stylex.StyleXClassNameFor<"minHeight", 32>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 8>;
+  }>;
+  readonly 36: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 9>;
+    readonly minHeight: stylex.StyleXClassNameFor<"minHeight", 36>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 10>;
+  }>;
+  readonly 40: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 10>;
+    readonly minHeight: stylex.StyleXClassNameFor<"minHeight", 40>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 12>;
+  }>;
+  readonly 44: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 11>;
+    readonly minHeight: stylex.StyleXClassNameFor<"minHeight", 44>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 14>;
+  }>;
+  readonly 48: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 12>;
+    readonly minHeight: stylex.StyleXClassNameFor<"minHeight", 48>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 16>;
+  }>;
+  readonly base: Readonly<{
+    readonly "::placeholder": stylex.StyleXClassNameFor<"::placeholder", {
+      readonly color: "var(--color-gray-9)";
+      readonly userSelect: "none";
+    }>;
+    readonly appearance: stylex.StyleXClassNameFor<"appearance", "none">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--color-bg-shell-inner)">;
+    readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
+    readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "inset 0 0 0 1px var(--color-border)" | "inset 0 0 0 1px var(--color-gray-6)">;
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-text-primary)">;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "text" | "not-allowed">;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 14>;
+    readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", 400>;
+    readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", 1.5>;
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | 0.5>;
+    readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", "var(--color-outline)" | "transparent" | "#e5484d" | "#30a46c">;
+    readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", -2>;
+    readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+    readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 2>;
+    readonly textDecoration: stylex.StyleXClassNameFor<"textDecoration", "none">;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "150ms">;
+    readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "box-shadow, opacity">;
+    readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+  }>;
+  readonly roundedBase: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 12>;
+  }>;
+  readonly roundedFull: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 9999>;
+  }>;
+}>;
+//#endregion
+export { inputStyles };

package/dist/components/input/input.stylex.js

@@ -0,0 +1,71 @@
+//#region src/components/input/input.stylex.ts
+const inputStyles = {
+	"32": {
+		kaIpWk: "xur7f20",
+		kAzted: "x21xpn4",
+		k8WAf4: "xt970qd",
+		kg3NbH: "xdqyycr",
+		$$css: true
+	},
+	"36": {
+		kaIpWk: "xhpnuu7",
+		kAzted: "xu0aao5",
+		k8WAf4: "xt970qd",
+		kg3NbH: "x1awh872",
+		$$css: true
+	},
+	"40": {
+		kaIpWk: "x1q4ynmn",
+		kAzted: "x1ba4aug",
+		k8WAf4: "xt970qd",
+		kg3NbH: "xaope02",
+		$$css: true
+	},
+	"44": {
+		kaIpWk: "x1ctf4ec",
+		kAzted: "x1gg8mnh",
+		k8WAf4: "xt970qd",
+		kg3NbH: "xqin4a2",
+		$$css: true
+	},
+	"48": {
+		kaIpWk: "x4pepcl",
+		kAzted: "x1wxaq2x",
+		k8WAf4: "xt970qd",
+		kg3NbH: "x1hr3lfm",
+		$$css: true
+	},
+	base: {
+		k8Qsv1: "x1ta7s2x",
+		kI5SfV: "xjp5s5a",
+		kysU6D: "xjyslct",
+		kWkggS: "x1h73wb5",
+		ksu8eU: "xng3xce",
+		kGVxlE: "xnn6d81 xho1339 x1rlgnxn xhxsgan x1er153n",
+		kMwMTN: "x1tgivj0",
+		kkrTdU: "x1s07b3s x1ed109x",
+		kGuDYH: "xif65rj",
+		k63SB2: "xo1l8bm",
+		kLWn49: "x1evy7pa",
+		kSiTet: "xijokvz x1hc1fzr",
+		kjBf7l: "xfcj4rt x43j12e x1mr6snm x1uczgqu",
+		kInvED: "x2ssjo2",
+		k3XXqK: "xaatb59",
+		kMeerF: "x1de99jn",
+		kybGjl: "x1hl2dhg",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "xe97l14",
+		kzqmXN: "xh8yej3",
+		$$css: true
+	},
+	roundedBase: {
+		kaIpWk: "x4pepcl",
+		$$css: true
+	},
+	roundedFull: {
+		kaIpWk: "x10hpsqq",
+		$$css: true
+	}
+};
+//#endregion
+export { inputStyles };

package/dist/components/label/label.d.ts

@@ -1,7 +1,7 @@
+import { labelStyles } from "./label.stylex.js";
 import { ComponentProps, JSX } from "react";
 //#region src/components/label/label.d.ts
 interface LabelProps extends ComponentProps<"label"> {}
 declare function Label(props: LabelProps): JSX.Element;
-declare const labelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { Label, LabelProps, labelVariants };
+export { Label, LabelProps, labelStyles };

package/dist/components/label/label.js

@@ -1,17 +1,18 @@
-import label_module_default from "./label.module.js";
-import { cva } from "class-variance-authority";
+import { cn } from "../cn.js";
+import { labelStyles } from "./label.stylex.js";
+import * as stylex from "@stylexjs/stylex";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/label/label.tsx
 function Label(props) {
-	const { className: customClassName = "", htmlFor = void 0, children = void 0, ...rest } = props;
+	const { className = "", htmlFor = void 0, children = void 0, ...rest } = props;
+	const { className: stylexClassName } = stylex.props(labelStyles.base);
 	return /* @__PURE__ */ jsx("label", {
-		className: labelVariants({ className: customClassName }),
+		className: cn(stylexClassName, className),
 		"data-slot": "label",
 		htmlFor,
 		...rest,
 		children
 	});
 }
-const labelVariants = cva(label_module_default.base);
 //#endregion
-export { Label, labelVariants };
+export { Label, labelStyles };

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

@@ -0,0 +1,12 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/label/label.stylex.d.ts
+declare const labelStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-text-secondary)">;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 13>;
+    readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", 450>;
+    readonly width: stylex.StyleXClassNameFor<"width", "fit-content">;
+  }>;
+}>;
+//#endregion
+export { labelStyles };

package/dist/components/label/label.stylex.js

@@ -0,0 +1,10 @@
+//#region src/components/label/label.stylex.ts
+const labelStyles = { base: {
+	kMwMTN: "xv1l7n4",
+	kGuDYH: "x4z9k3i",
+	k63SB2: "x10p5zqr",
+	kzqmXN: "xeq5yr9",
+	$$css: true
+} };
+//#endregion
+export { labelStyles };

package/dist/components/menu/menu-checkbox-item.d.ts

@@ -1,13 +1,9 @@
 import { Menu } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/menu/menu-checkbox-item.d.ts
-interface MenuCheckboxItemProps extends Omit<Menu.CheckboxItem.Props, "checked" | "className" | "defaultChecked" | "disabled"> {
+interface MenuCheckboxItemProps extends Omit<Menu.CheckboxItem.Props, "className"> {
   className?: string;
-  isChecked?: Menu.CheckboxItem.Props["checked"];
-  isDefaultChecked?: Menu.CheckboxItem.Props["defaultChecked"];
-  isDisabled?: Menu.CheckboxItem.Props["disabled"];
 }
 declare function MenuCheckboxItem(props: MenuCheckboxItemProps): JSX.Element;
-declare const menuCheckboxItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { MenuCheckboxItem, MenuCheckboxItemProps, menuCheckboxItemVariants };
+export { MenuCheckboxItem, MenuCheckboxItemProps };

package/dist/components/menu/menu-checkbox-item.js

@@ -1,24 +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 { Menu } from "@base-ui/react";
 //#region src/components/menu/menu-checkbox-item.tsx
 function MenuCheckboxItem(props) {
-	const { children, className: customClassName = "", isChecked = void 0, isDefaultChecked = false, isDisabled = false, ...rest } = props;
-	const combinedClassName = menuCheckboxItemVariants({ className: customClassName });
+	const { children, className: customClassName = "", ...rest } = props;
 	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
-		checked: isChecked,
-		className: combinedClassName,
+		className: cn(sx(pickerItemStyles.base), customClassName),
 		"data-slot": "menu-checkbox-item",
-		defaultChecked: isDefaultChecked,
-		disabled: isDisabled,
 		...rest,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: picker_item_module_default.label,
+			className: sx(pickerItemStyles.label),
 			"data-slot": "menu-checkbox-item-text",
 			children
 		}), /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
-			className: picker_item_module_default.indicator,
+			className: sx(pickerItemStyles.indicator),
 			"data-slot": "menu-checkbox-item-indicator",
 			children: /* @__PURE__ */ jsx("svg", {
 				height: "14px",
@@ -39,6 +35,5 @@ function MenuCheckboxItem(props) {
 		})]
 	});
 }
-const menuCheckboxItemVariants = cva(picker_item_module_default.base);
 //#endregion
-export { MenuCheckboxItem, menuCheckboxItemVariants };
+export { MenuCheckboxItem };

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

@@ -1,3 +1,4 @@
+import { menuContentStyles } from "./menu-content.stylex.js";
 import { Menu } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/menu/menu-content.d.ts
@@ -6,6 +7,5 @@ interface MenuContentProps extends Omit<Menu.Popup.Props, "className">, Pick<Men
   container?: Menu.Portal.Props["container"];
 }
 declare function MenuContent(props: MenuContentProps): JSX.Element;
-declare const menuContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { MenuContent, MenuContentProps, menuContentVariants };
+export { MenuContent, MenuContentProps, menuContentStyles };

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

@@ -1,13 +1,12 @@
-import picker_popup_module_default from "../picker/picker-popup.module.js";
-import picker_list_module_default from "../picker/picker-list.module.js";
-import menu_content_module_default from "./menu-content.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 { menuContentStyles } from "./menu-content.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react";
 //#region src/components/menu/menu-content.tsx
 function MenuContent(props) {
 	const { align = "start", alignOffset = getDefaultAlignOffset, 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 = void 0, sideOffset = getDefaultSideOffset, sticky = void 0, ...rest } = props;
-	const combinedClassName = menuContentVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Menu.Portal, {
 		container,
 		"data-slot": "menu-portal",
@@ -16,7 +15,7 @@ function MenuContent(props) {
 			alignOffset,
 			anchor,
 			arrowPadding,
-			className: picker_popup_module_default.positioner,
+			className: sx(pickerPopupStyles.positioner),
 			collisionAvoidance,
 			collisionBoundary,
 			collisionPadding,
@@ -27,11 +26,11 @@ function MenuContent(props) {
 			sideOffset,
 			sticky,
 			children: /* @__PURE__ */ jsx(Menu.Popup, {
-				className: combinedClassName,
+				className: cn(sx(pickerPopupStyles.base, menuContentStyles.base), customClassName),
 				"data-slot": "menu-content",
 				...rest,
 				children: /* @__PURE__ */ jsx("div", {
-					className: picker_list_module_default.base,
+					className: sx(pickerListStyles.base),
 					"data-slot": "menu-list",
 					children
 				})
@@ -45,6 +44,5 @@ function getDefaultAlignOffset(data) {
 function getDefaultSideOffset(data) {
 	return data.side === "bottom" || data.side === "top" ? 6 : -4;
 }
-const menuContentVariants = cva([picker_popup_module_default.base, menu_content_module_default.base]);
 //#endregion
-export { MenuContent, menuContentVariants };
+export { MenuContent, menuContentStyles };

package/dist/components/menu/menu-content.stylex.d.ts

@@ -0,0 +1,11 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/menu/menu-content.stylex.d.ts
+declare const menuContentStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "min(var(--available-width), 320px)">;
+    readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 180>;
+    readonly width: stylex.StyleXClassNameFor<"width", "max-content">;
+  }>;
+}>;
+//#endregion
+export { menuContentStyles };

package/dist/components/menu/menu-content.stylex.js

@@ -0,0 +1,9 @@
+//#region src/components/menu/menu-content.stylex.ts
+const menuContentStyles = { base: {
+	ks0D6T: "xnx49gs",
+	k7Eaqz: "xfb3i0g",
+	kzqmXN: "xezivpi",
+	$$css: true
+} };
+//#endregion
+export { menuContentStyles };

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

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

package/dist/components/menu/menu-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 { Menu } from "@base-ui/react";
 //#region src/components/menu/menu-group-label.tsx
 function MenuGroupLabel(props) {
 	const { className: customClassName = "", ...rest } = props;
-	const combinedClassName = menuGroupLabelVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
-		className: combinedClassName,
+		className: cn(sx(pickerGroupStyles.label), customClassName),
 		"data-slot": "menu-group-label",
 		...rest
 	});
 }
-const menuGroupLabelVariants = cva(picker_group_module_default.label);
 //#endregion
-export { MenuGroupLabel, menuGroupLabelVariants };
+export { MenuGroupLabel };

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

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

package/dist/components/menu/menu-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 { Menu } from "@base-ui/react";
 //#region src/components/menu/menu-group.tsx
 function MenuGroup(props) {
 	const { className: customClassName = "", ...rest } = props;
-	const combinedClassName = menuGroupVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Menu.Group, {
-		className: combinedClassName,
+		className: cn(sx(pickerGroupStyles.base), customClassName),
 		"data-slot": "menu-group",
 		...rest
 	});
 }
-const menuGroupVariants = cva(picker_group_module_default.base);
 //#endregion
-export { MenuGroup, menuGroupVariants };
+export { MenuGroup };

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

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

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

@@ -1,19 +1,16 @@
-import picker_item_module_default from "../picker/picker-item.module.js";
-import menu_item_module_default from "./menu-item.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { pickerItemStyles } from "../picker/picker-item.stylex.js";
+import { menuItemStyles } from "./menu-item.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react";
 //#region src/components/menu/menu-item.tsx
 function MenuItem(props) {
-	const { className: customClassName = "", isDisabled = false, ...rest } = props;
-	const combinedClassName = menuItemVariants({ className: customClassName });
+	const { className: customClassName = "", ...rest } = props;
 	return /* @__PURE__ */ jsx(Menu.Item, {
-		className: combinedClassName,
+		className: cn(sx(pickerItemStyles.base, menuItemStyles.base), customClassName),
 		"data-slot": "menu-item",
-		disabled: isDisabled,
 		...rest
 	});
 }
-const menuItemVariants = cva([picker_item_module_default.base, menu_item_module_default.base]);
 //#endregion
-export { MenuItem, menuItemVariants };
+export { MenuItem, menuItemStyles };

package/dist/components/menu/menu-item.stylex.d.ts

@@ -0,0 +1,11 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/menu/menu-item.stylex.d.ts
+declare const menuItemStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-text-primary)">;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 14>;
+    readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", 450>;
+  }>;
+}>;
+//#endregion
+export { menuItemStyles };

package/dist/components/menu/menu-item.stylex.js

@@ -0,0 +1,9 @@
+//#region src/components/menu/menu-item.stylex.ts
+const menuItemStyles = { base: {
+	kMwMTN: "x1tgivj0",
+	kGuDYH: "xif65rj",
+	k63SB2: "x10p5zqr",
+	$$css: true
+} };
+//#endregion
+export { menuItemStyles };

package/dist/components/menu/menu-link-item.d.ts

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

package/dist/components/menu/menu-link-item.js

@@ -1,18 +1,16 @@
-import picker_item_module_default from "../picker/picker-item.module.js";
-import menu_item_module_default from "./menu-item.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { pickerItemStyles } from "../picker/picker-item.stylex.js";
+import { menuItemStyles } from "./menu-item.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react";
 //#region src/components/menu/menu-link-item.tsx
 function MenuLinkItem(props) {
 	const { className: customClassName = "", ...rest } = props;
-	const combinedClassName = menuLinkItemVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Menu.LinkItem, {
-		className: combinedClassName,
+		className: cn(sx(pickerItemStyles.base, menuItemStyles.base), customClassName),
 		"data-slot": "menu-link-item",
 		...rest
 	});
 }
-const menuLinkItemVariants = cva([picker_item_module_default.base, menu_item_module_default.base]);
 //#endregion
-export { MenuLinkItem, menuLinkItemVariants };
+export { MenuLinkItem };

package/dist/components/menu/menu-radio-group.d.ts

@@ -1,11 +1,9 @@
 import { Menu } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/menu/menu-radio-group.d.ts
-interface MenuRadioGroupProps extends Omit<Menu.RadioGroup.Props, "className" | "disabled"> {
+interface MenuRadioGroupProps extends Omit<Menu.RadioGroup.Props, "className"> {
   className?: string;
-  isDisabled?: Menu.RadioGroup.Props["disabled"];
 }
 declare function MenuRadioGroup(props: MenuRadioGroupProps): JSX.Element;
-declare const menuRadioGroupVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { MenuRadioGroup, MenuRadioGroupProps, menuRadioGroupVariants };
+export { MenuRadioGroup, MenuRadioGroupProps };

package/dist/components/menu/menu-radio-group.js

@@ -1,18 +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 { Menu } from "@base-ui/react";
 //#region src/components/menu/menu-radio-group.tsx
 function MenuRadioGroup(props) {
-	const { className: customClassName = "", isDisabled = false, ...rest } = props;
-	const combinedClassName = menuRadioGroupVariants({ className: customClassName });
+	const { className: customClassName = "", ...rest } = props;
 	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
-		className: combinedClassName,
+		className: cn(sx(pickerGroupStyles.base), customClassName),
 		"data-slot": "menu-radio-group",
-		disabled: isDisabled,
 		...rest
 	});
 }
-const menuRadioGroupVariants = cva(picker_group_module_default.base);
 //#endregion
-export { MenuRadioGroup, menuRadioGroupVariants };
+export { MenuRadioGroup };