@nattstack/ui 0.1.0 → 0.1.1

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

@@ -1,21 +1,22 @@
-import { cn, sx } from "../cn.js";
+import { cn } 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-radio-item.tsx
 function MenuRadioItem(props) {
-	const { children, className: customClassName = "", ...rest } = props;
+	const { children, className = "", ...rest } = props;
+	const combinedClassName = cn(pickerItemStyles.base, className);
 	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
-		className: cn(sx(pickerItemStyles.base), customClassName),
-		"data-slot": "menu-radio-item",
+		className: combinedClassName,
+		"data-component": "menu-radio-item",
 		...rest,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: sx(pickerItemStyles.label),
-			"data-slot": "menu-radio-item-text",
+			className: cn(pickerItemStyles.label),
+			"data-component": "menu-radio-item-text",
 			children
 		}), /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
-			className: sx(pickerItemStyles.indicator),
-			"data-slot": "menu-radio-item-indicator",
+			className: cn(pickerItemStyles.indicator),
+			"data-component": "menu-radio-item-indicator",
 			children: /* @__PURE__ */ jsx("svg", {
 				height: "14px",
 				viewBox: "0 0 18 18",

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

@@ -1,13 +1,14 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { pickerSeparatorStyles } from "../picker/picker-separator.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react";
 //#region src/components/menu/menu-separator.tsx
 function MenuSeparator(props) {
-	const { className: customClassName = "", ...rest } = props;
+	const { className = "", ...rest } = props;
+	const combinedClassName = cn(pickerSeparatorStyles.base, className);
 	return /* @__PURE__ */ jsx(Menu.Separator, {
-		className: cn(sx(pickerSeparatorStyles.base), customClassName),
-		"data-slot": "menu-separator",
+		className: combinedClassName,
+		"data-component": "menu-separator",
 		...rest
 	});
 }

package/dist/components/menu/menu-submenu-trigger.d.ts

@@ -1,4 +1,3 @@
-import { menuSubmenuTriggerStyles } from "./menu-submenu-trigger.stylex.js";
 import { Menu } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/menu/menu-submenu-trigger.d.ts
@@ -7,4 +6,4 @@ interface MenuSubmenuTriggerProps extends Omit<Menu.SubmenuTrigger.Props, "class
 }
 declare function MenuSubmenuTrigger(props: MenuSubmenuTriggerProps): JSX.Element;
 //#endregion
-export { MenuSubmenuTrigger, MenuSubmenuTriggerProps, menuSubmenuTriggerStyles };
+export { MenuSubmenuTrigger, MenuSubmenuTriggerProps };

package/dist/components/menu/menu-submenu-trigger.js

@@ -1,4 +1,4 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { pickerItemStyles } from "../picker/picker-item.stylex.js";
 import { menuItemStyles } from "./menu-item.stylex.js";
 import { menuSubmenuTriggerStyles } from "./menu-submenu-trigger.stylex.js";
@@ -6,14 +6,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react";
 //#region src/components/menu/menu-submenu-trigger.tsx
 function MenuSubmenuTrigger(props) {
-	const { children, className: customClassName = "", ...rest } = props;
+	const { children, className = "", ...rest } = props;
+	const combinedClassName = cn(pickerItemStyles.base, menuItemStyles.base, menuSubmenuTriggerStyles.base, className);
 	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
-		className: cn(sx(pickerItemStyles.base, menuItemStyles.base, menuSubmenuTriggerStyles.base), customClassName),
-		"data-slot": "menu-submenu-trigger",
+		className: combinedClassName,
+		"data-component": "menu-submenu-trigger",
 		...rest,
 		children: [children, /* @__PURE__ */ jsx("span", {
-			className: sx(menuSubmenuTriggerStyles.icon),
-			"data-slot": "menu-submenu-trigger-icon",
+			className: cn(menuSubmenuTriggerStyles.icon),
+			"data-component": "menu-submenu-trigger-icon",
 			children: /* @__PURE__ */ jsx("svg", {
 				height: "14px",
 				viewBox: "0 0 18 18",
@@ -34,4 +35,4 @@ function MenuSubmenuTrigger(props) {
 	});
 }
 //#endregion
-export { MenuSubmenuTrigger, menuSubmenuTriggerStyles };
+export { MenuSubmenuTrigger };

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

@@ -4,7 +4,7 @@ import { Menu } from "@base-ui/react";
 function MenuSubmenu(props) {
 	const { ...rest } = props;
 	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
-		"data-slot": "menu-submenu",
+		"data-component": "menu-submenu",
 		...rest
 	});
 }

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

@@ -4,7 +4,7 @@ import { Menu } from "@base-ui/react";
 function MenuTrigger(props) {
 	const { ...rest } = props;
 	return /* @__PURE__ */ jsx(Menu.Trigger, {
-		"data-slot": "menu-trigger",
+		"data-component": "menu-trigger",
 		...rest
 	});
 }

package/dist/components/menu/menu.js

@@ -4,7 +4,7 @@ import { Menu } from "@base-ui/react";
 function Menu$1(props) {
 	const { ...rest } = props;
 	return /* @__PURE__ */ jsx(Menu.Root, {
-		"data-slot": "menu",
+		"data-component": "menu",
 		...rest
 	});
 }

package/dist/components/otp-field/otp-field-input.d.ts

@@ -1,8 +1,7 @@
-import { otpFieldInputStyles } from "./otp-field-input.stylex.js";
 import { OTPField } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/otp-field/otp-field-input.d.ts
 interface OTPFieldInputProps extends OTPField.Input.Props {}
 declare function OTPFieldInput(props: OTPFieldInputProps): JSX.Element;
 //#endregion
-export { OTPFieldInput, otpFieldInputStyles };
+export { OTPFieldInput, OTPFieldInputProps };

package/dist/components/otp-field/otp-field-input.js

@@ -1,16 +1,17 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { otpFieldStyles } from "./otp-field.stylex.js";
 import { otpFieldInputStyles } from "./otp-field-input.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { OTPField } from "@base-ui/react";
 //#region src/components/otp-field/otp-field-input.tsx
 function OTPFieldInput(props) {
-	const { className: customClassName = "", ...rest } = props;
+	const { className = "", ...rest } = props;
+	const combinedClassName = cn(otpFieldInputStyles.base, otpFieldStyles.masked_input, className);
 	return /* @__PURE__ */ jsx(OTPField.Input, {
-		className: cn(sx(otpFieldInputStyles.base, otpFieldStyles.maskedInput), customClassName),
-		"data-slot": "otp-field-input",
+		className: combinedClassName,
+		"data-component": "otp-field-input",
 		...rest
 	});
 }
 //#endregion
-export { OTPFieldInput, otpFieldInputStyles };
+export { OTPFieldInput };

package/dist/components/otp-field/otp-field.d.ts

@@ -1,4 +1,3 @@
-import { otpFieldStyles } from "./otp-field.stylex.js";
 import { OTPField } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/otp-field/otp-field.d.ts
@@ -7,4 +6,4 @@ interface OTPFieldProps extends Omit<OTPField.Root.Props, "mask"> {
 }
 declare function OTPField$1(props: OTPFieldProps): JSX.Element;
 //#endregion
-export { OTPField$1 as OTPField, otpFieldStyles };
+export { OTPField$1 as OTPField, OTPFieldProps };

package/dist/components/otp-field/otp-field.js

@@ -1,17 +1,18 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { otpFieldStyles } from "./otp-field.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { OTPField } from "@base-ui/react";
 //#region src/components/otp-field/otp-field.tsx
 function OTPField$1(props) {
-	const { className: customClassName = "", masked = false, ...rest } = props;
+	const { className = "", masked = false, ...rest } = props;
+	const combinedClassName = cn(otpFieldStyles.base, className);
 	return /* @__PURE__ */ jsx(OTPField.Root, {
-		className: cn(sx(otpFieldStyles.base), customClassName),
+		className: combinedClassName,
+		"data-component": "otp-field",
 		"data-is-masked": masked,
-		"data-slot": "otp-field",
 		mask: masked,
 		...rest
 	});
 }
 //#endregion
-export { OTPField$1 as OTPField, otpFieldStyles };
+export { OTPField$1 as OTPField };

package/dist/components/otp-field/otp-field.stylex.js

@@ -8,7 +8,7 @@ const otpFieldStyles = {
 		kzqmXN: "xeq5yr9",
 		$$css: true
 	},
-	maskedInput: {
+	masked_input: {
 		kMv6JI: "xjb2p0i x1iczwhp",
 		$$css: true
 	}

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

@@ -1,30 +1,5 @@
 //#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",
@@ -58,10 +33,45 @@ const pickerTriggerStyles = {
 		kzqmXN: "x1kky2od",
 		$$css: true
 	},
-	roundedFull: {
+	rounded_full: {
 		kaIpWk: "x10hpsqq",
 		$$css: true
+	},
+	size_32: {
+		kaIpWk: "xur7f20",
+		kZKoxP: "x10w6t97",
+		$$css: true
+	},
+	size_36: {
+		kaIpWk: "xhpnuu7",
+		kZKoxP: "xc9qbxq",
+		$$css: true
+	},
+	size_40: {
+		kaIpWk: "x1q4ynmn",
+		kZKoxP: "x1vqgdyp",
+		$$css: true
+	},
+	size_44: {
+		kaIpWk: "x1ctf4ec",
+		kZKoxP: "xn3w4p2",
+		$$css: true
+	},
+	size_48: {
+		kaIpWk: "x4pepcl",
+		kZKoxP: "xsdox4t",
+		$$css: true
+	}
+};
+const pickerTriggerStylesBy = {
+	rounded: { full: pickerTriggerStyles.rounded_full },
+	size: {
+		32: pickerTriggerStyles.size_32,
+		36: pickerTriggerStyles.size_36,
+		40: pickerTriggerStyles.size_40,
+		44: pickerTriggerStyles.size_44,
+		48: pickerTriggerStyles.size_48
 	}
 };
 //#endregion
-export { pickerTriggerStyles };
+export { pickerTriggerStyles, pickerTriggerStylesBy };

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

@@ -1,4 +1,3 @@
-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;
@@ -13,4 +12,4 @@ interface RowInternalProps {
 }
 declare function Row(props: RowProps): JSX.Element;
 //#endregion
-export { Row, RowProps, rowStyles };
+export { Row, RowProps };

package/dist/components/row/row.js

@@ -1,11 +1,10 @@
 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 = "", 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 combinedClassName = cn(rowStyles.base, className);
 	const combinedStyle = {
 		...customStyle,
 		...gap === void 0 ? {} : { gap },
@@ -16,11 +15,11 @@ function Row(props) {
 		...justifyContent === void 0 ? {} : { justifyContent }
 	};
 	return createElement(as, {
-		className: cn(stylexClassName, className),
-		"data-slot": "row",
+		className: combinedClassName,
+		"data-component": "row",
 		style: combinedStyle,
 		...rest
 	});
 }
 //#endregion
-export { Row, rowStyles };
+export { Row };

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

@@ -1,4 +1,3 @@
-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
@@ -8,4 +7,4 @@ interface SelectContentProps extends Omit<Select.Popup.Props, "className">, Pick
 }
 declare function SelectContent(props: SelectContentProps): JSX.Element;
 //#endregion
-export { SelectContent, SelectContentProps, pickerPopupStyles as selectContentStyles };
+export { SelectContent, SelectContentProps };

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

@@ -1,37 +1,38 @@
-import { cn, sx } from "../cn.js";
+import { cn } 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 { align = "start", alignItemWithTrigger = false, alignOffset = void 0, anchor = void 0, arrowPadding = void 0, children, className = "", 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 = cn(pickerPopupStyles.base, className);
 	return /* @__PURE__ */ jsx(Select.Portal, {
 		container,
-		"data-slot": "select-portal",
+		"data-component": "select-portal",
 		children: /* @__PURE__ */ jsx(Select.Positioner, {
 			align,
 			alignItemWithTrigger,
 			alignOffset,
 			anchor,
 			arrowPadding,
-			className: sx(pickerPopupStyles.positioner),
+			className: cn(pickerPopupStyles.positioner),
 			collisionAvoidance,
 			collisionBoundary,
 			collisionPadding,
-			"data-slot": "select-positioner",
+			"data-component": "select-positioner",
 			disableAnchorTracking,
 			positionMethod,
 			side,
 			sideOffset,
 			sticky,
 			children: /* @__PURE__ */ jsx(Select.Popup, {
-				className: cn(sx(pickerPopupStyles.base), customClassName),
-				"data-slot": "select-content",
+				className: combinedClassName,
+				"data-component": "select-content",
 				...rest,
 				children: /* @__PURE__ */ jsx(Select.List, {
-					className: sx(pickerListStyles.base),
-					"data-slot": "select-list",
+					className: cn(pickerListStyles.base),
+					"data-component": "select-list",
 					children
 				})
 			})
@@ -39,4 +40,4 @@ function SelectContent(props) {
 	});
 }
 //#endregion
-export { SelectContent, pickerPopupStyles as selectContentStyles };
+export { SelectContent };

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

@@ -1,13 +1,14 @@
-import { cn, sx } from "../cn.js";
+import { cn } 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 { className = "", ...rest } = props;
+	const combinedClassName = cn(pickerGroupStyles.label, className);
 	return /* @__PURE__ */ jsx(Select.GroupLabel, {
-		className: cn(sx(pickerGroupStyles.label), customClassName),
-		"data-slot": "select-group-label",
+		className: combinedClassName,
+		"data-component": "select-group-label",
 		...rest
 	});
 }

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

@@ -1,4 +1,3 @@
-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
@@ -7,4 +6,4 @@ interface SelectGroupProps extends Omit<Select.Group.Props, "className"> {
 }
 declare function SelectGroup(props: SelectGroupProps): JSX.Element;
 //#endregion
-export { SelectGroup, SelectGroupProps, pickerGroupStyles as selectGroupStyles };
+export { SelectGroup, SelectGroupProps };

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

@@ -1,15 +1,16 @@
-import { cn, sx } from "../cn.js";
+import { cn } 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 { className = "", ...rest } = props;
+	const combinedClassName = cn(pickerGroupStyles.base, className);
 	return /* @__PURE__ */ jsx(Select.Group, {
-		className: cn(sx(pickerGroupStyles.base), customClassName),
-		"data-slot": "select-group",
+		className: combinedClassName,
+		"data-component": "select-group",
 		...rest
 	});
 }
 //#endregion
-export { SelectGroup, pickerGroupStyles as selectGroupStyles };
+export { SelectGroup };

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

@@ -1,4 +1,3 @@
-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
@@ -7,4 +6,4 @@ interface SelectItemProps extends Omit<Select.Item.Props, "className"> {
 }
 declare function SelectItem(props: SelectItemProps): JSX.Element;
 //#endregion
-export { SelectItem, SelectItemProps, pickerItemStyles as selectItemStyles };
+export { SelectItem, SelectItemProps };

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

@@ -1,21 +1,22 @@
-import { cn, sx } from "../cn.js";
+import { cn } 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 = "", ...rest } = props;
+	const { children, className = "", ...rest } = props;
+	const combinedClassName = cn(pickerItemStyles.base, className);
 	return /* @__PURE__ */ jsxs(Select.Item, {
-		className: cn(sx(pickerItemStyles.base), customClassName),
-		"data-slot": "select-item",
+		className: combinedClassName,
+		"data-component": "select-item",
 		...rest,
 		children: [/* @__PURE__ */ jsx(Select.ItemText, {
-			className: sx(pickerItemStyles.label),
-			"data-slot": "select-item-text",
+			className: cn(pickerItemStyles.label),
+			"data-component": "select-item-text",
 			children
 		}), /* @__PURE__ */ jsx(Select.ItemIndicator, {
-			className: sx(pickerItemStyles.indicator),
-			"data-slot": "select-item-indicator",
+			className: cn(pickerItemStyles.indicator),
+			"data-component": "select-item-indicator",
 			children: /* @__PURE__ */ jsx("svg", {
 				height: "14px",
 				viewBox: "0 0 18 18",
@@ -36,4 +37,4 @@ function SelectItem(props) {
 	});
 }
 //#endregion
-export { SelectItem, pickerItemStyles as selectItemStyles };
+export { SelectItem };

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

@@ -1,4 +1,3 @@
-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
@@ -7,4 +6,4 @@ interface SelectSeparatorProps extends Omit<Select.Separator.Props, "className">
 }
 declare function SelectSeparator(props: SelectSeparatorProps): JSX.Element;
 //#endregion
-export { SelectSeparator, SelectSeparatorProps, pickerSeparatorStyles as selectSeparatorStyles };
+export { SelectSeparator, SelectSeparatorProps };

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

@@ -1,15 +1,16 @@
-import { cn, sx } from "../cn.js";
+import { cn } 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 { className = "", ...rest } = props;
+	const combinedClassName = cn(pickerSeparatorStyles.base, className);
 	return /* @__PURE__ */ jsx(Select.Separator, {
-		className: cn(sx(pickerSeparatorStyles.base), customClassName),
-		"data-slot": "select-separator",
+		className: combinedClassName,
+		"data-component": "select-separator",
 		...rest
 	});
 }
 //#endregion
-export { SelectSeparator, pickerSeparatorStyles as selectSeparatorStyles };
+export { SelectSeparator };

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

@@ -1,4 +1,3 @@
-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
@@ -9,4 +8,4 @@ interface SelectTriggerProps extends Select.Trigger.Props {
 type SelectTriggerSize = 32 | 36 | 40 | 44 | 48;
 declare function SelectTrigger(props: SelectTriggerProps): JSX.Element;
 //#endregion
-export { SelectTrigger, SelectTriggerProps, SelectTriggerSize, pickerTriggerStyles as selectTriggerStyles };
+export { SelectTrigger, SelectTriggerProps, SelectTriggerSize };

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

@@ -1,17 +1,18 @@
-import { cn, sx } from "../cn.js";
-import { pickerTriggerStyles } from "../picker/picker-trigger.stylex.js";
+import { cn } from "../cn.js";
+import { pickerTriggerStyles, pickerTriggerStylesBy } 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 = "", rounded = false, size = 40, ...rest } = props;
+	const { children = void 0, className = "", rounded = false, size = 40, ...rest } = props;
+	const combinedClassName = cn(pickerTriggerStyles.base, pickerTriggerStylesBy.size[size], rounded && pickerTriggerStylesBy.rounded.full, className);
 	return /* @__PURE__ */ jsxs(Select.Trigger, {
-		className: cn(sx(pickerTriggerStyles.base, pickerTriggerStyles[size], rounded && pickerTriggerStyles.roundedFull), customClassName),
-		"data-slot": "select-trigger",
+		className: combinedClassName,
+		"data-component": "select-trigger",
 		...rest,
 		children: [children, /* @__PURE__ */ jsx(Select.Icon, {
-			className: sx(pickerTriggerStyles.icon),
-			"data-slot": "select-icon",
+			className: cn(pickerTriggerStyles.icon),
+			"data-component": "select-icon",
 			children: /* @__PURE__ */ jsx("svg", {
 				height: "14",
 				viewBox: "0 0 18 18",
@@ -30,4 +31,4 @@ function SelectTrigger(props) {
 	});
 }
 //#endregion
-export { SelectTrigger, pickerTriggerStyles as selectTriggerStyles };
+export { SelectTrigger };

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

@@ -1,8 +1,7 @@
-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;
 //#endregion
-export { SelectValue, SelectValueProps, selectValueStyles };
+export { SelectValue, SelectValueProps };

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

@@ -1,14 +1,15 @@
-import { cn, sx } from "../cn.js";
+import { cn } 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 { children = void 0, className = "", placeholder = void 0, render = /* @__PURE__ */ jsx("div", {}), ...rest } = props;
 	const resolvedChildren = typeof children === "function" ? (selectedValue) => (selectedValue ?? void 0) === void 0 ? placeholder : children(selectedValue) : children;
+	const combinedClassName = cn(selectValueStyles.base, className);
 	return /* @__PURE__ */ jsx(Select.Value, {
-		className: cn(sx(selectValueStyles.base), customClassName),
-		"data-slot": "select-value",
+		className: combinedClassName,
+		"data-component": "select-value",
 		placeholder,
 		render,
 		...rest,
@@ -16,4 +17,4 @@ function SelectValue(props) {
 	});
 }
 //#endregion
-export { SelectValue, selectValueStyles };
+export { SelectValue };

package/dist/components/select/select.js

@@ -4,7 +4,7 @@ import { Select } from "@base-ui/react";
 function Select$1(props) {
 	const { ...rest } = props;
 	return /* @__PURE__ */ jsx(Select.Root, {
-		"data-slot": "select",
+		"data-component": "select",
 		...rest
 	});
 }

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

@@ -1,4 +1,3 @@
-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"> {
@@ -7,4 +6,4 @@ interface SpacerProps extends Omit<ComponentProps<"div">, "children"> {
 }
 declare function Spacer(props: SpacerProps): JSX.Element;
 //#endregion
-export { Spacer, SpacerProps, spacerStyles };
+export { Spacer, SpacerProps };