@nattstack/ui 0.1.0 → 0.1.2

package/README.md

@@ -20,6 +20,9 @@ bun add @nattstack/ui
 @import "tailwindcss";
 @import "@nattstack/ui/tailwind-colors";
 @import "@nattstack/ui/tailwind-tokenless-10";
+
+/* Required: the compiled component styles */
+@import "@nattstack/ui/components";
 ```
 
 ```tsx

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

@@ -1,4 +1,4 @@
-import { sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { buttonSpinnerStyles } from "./button-spinner.stylex.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/button/button-spinner.tsx
@@ -19,10 +19,10 @@ const BAR_STYLES = [
 ];
 function ButtonSpinner() {
 	return /* @__PURE__ */ jsx("div", {
-		className: sx(buttonSpinnerStyles.base),
-		"data-slot": "button-spinner",
+		className: cn(buttonSpinnerStyles.base),
+		"data-component": "button-spinner",
 		style: { "--size": `${SIZE}px` },
-		children: BAR_STYLES.map((barStyle, index) => /* @__PURE__ */ jsx("div", { className: sx(buttonSpinnerStyles.bar, barStyle) }, index))
+		children: BAR_STYLES.map((barStyle, index) => /* @__PURE__ */ jsx("div", { className: cn(buttonSpinnerStyles.bar, barStyle) }, index))
 	});
 }
 //#endregion

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

@@ -86,7 +86,7 @@ const buttonSpinnerStyles = {
 		kKVMdj: "x1m7ugx0",
 		kyAemX: "xbv57ra",
 		kZKoxP: "x188dgw3",
-		kVAEAm: "x10l6tqk",
+		kVAEAm: "x1n2onr6",
 		km0Bbg: "xngwomw",
 		kzqmXN: "x1fjlwjz",
 		$$css: true

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

@@ -1,12 +1,10 @@
-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"> {
   fullWidth?: boolean;
   iconEnd?: ReactNode;
   iconStart?: ReactNode;
-  label?: number | number[] | string | string[];
+  label?: string;
   loading?: boolean;
   rounded?: boolean;
   size?: ButtonSize;
@@ -15,14 +13,5 @@ interface ButtonProps extends Omit<ComponentProps<"button">, "children"> {
 type ButtonSize = 32 | 36 | 40 | 44 | 48;
 type ButtonVariant = "ghost" | "primary" | "secondary";
 declare function Button(props: ButtonProps): JSX.Element;
-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, ButtonSize, ButtonVariant, buttonStyles, getButtonClassName };
+export { Button, ButtonProps, ButtonSize, ButtonVariant };

package/dist/components/button/button.js

@@ -1,45 +1,23 @@
-import { cn, sx } from "../cn.js";
+import { buttonStyles, buttonStylesBy } from "./button.stylex.js";
+import { cn } from "../cn.js";
 import { ButtonSpinner } from "./button-spinner.js";
-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 = "", disabled = false, iconStart = "", iconEnd = "", fullWidth = false, loading = false, rounded = false, label = "", variant = "primary", size = 40, ...rest } = props;
+	const { className = "", disabled = false, fullWidth = false, iconEnd = "", iconStart = "", label = "", loading = false, rounded = false, size = 40, variant = "primary", ...rest } = props;
+	const combinedClassName = cn(buttonStyles.base, buttonStylesBy.rounded[rounded ? "full" : "base"][size], buttonStylesBy.size[size], buttonStylesBy.variant[variant], buttonStylesBy.width[fullWidth ? "full" : "base"], (disabled || loading) && buttonStyles.disabled, className);
 	return /* @__PURE__ */ jsxs("button", {
-		className: getButtonClassName({
-			className,
-			disabled,
-			fullWidth,
-			loading,
-			rounded,
-			size,
-			variant
-		}),
-		"data-slot": "button",
+		className: combinedClassName,
+		"data-component": "button",
 		disabled: disabled || loading,
-		type: "button",
 		...rest,
 		children: [
+			!loading && iconStart,
 			loading && /* @__PURE__ */ jsx(ButtonSpinner, {}),
-			hideWhenLoading(iconStart, loading),
-			label !== "" && /* @__PURE__ */ jsx("span", {
-				className: sx(loading && buttonStyles.loadingContent),
-				children: label
-			}),
-			hideWhenLoading(iconEnd, loading)
+			label,
+			iconEnd
 		]
 	});
 }
-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, buttonStyles, getButtonClassName };
+export { Button };

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

@@ -1,30 +1,11 @@
 //#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",
+		kmuXW: "x2lah0s",
 		kGuDYH: "xif65rj",
 		k63SB2: "x10p5zqr",
 		kjj79g: "xl56j7k",
@@ -45,114 +26,134 @@ const buttonStyles = {
 		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: {
+	rounded_base_32: {
 		kaIpWk: "xur7f20",
-		k8WAf4: "xt970qd",
 		kg3NbH: "xaope02",
 		$$css: true
 	},
-	roundedBase36: {
+	rounded_base_36: {
 		kaIpWk: "xhpnuu7",
-		k8WAf4: "xt970qd",
 		kg3NbH: "xqin4a2",
 		$$css: true
 	},
-	roundedBase40: {
+	rounded_base_40: {
 		kaIpWk: "x1q4ynmn",
-		k8WAf4: "xt970qd",
 		kg3NbH: "x1hr3lfm",
 		$$css: true
 	},
-	roundedBase44: {
+	rounded_base_44: {
 		kaIpWk: "x1ctf4ec",
-		k8WAf4: "xt970qd",
 		kg3NbH: "x12j899k",
 		$$css: true
 	},
-	roundedBase48: {
+	rounded_base_48: {
 		kaIpWk: "x4pepcl",
-		k8WAf4: "xt970qd",
 		kg3NbH: "x17qtykl",
 		$$css: true
 	},
-	roundedFull32: {
+	rounded_full_32: {
 		kaIpWk: "xgqmno8",
-		k8WAf4: "xt970qd",
 		kg3NbH: "xaope02",
 		$$css: true
 	},
-	roundedFull36: {
+	rounded_full_36: {
 		kaIpWk: "xugzpu4",
-		k8WAf4: "xt970qd",
 		kg3NbH: "xelufkg",
 		$$css: true
 	},
-	roundedFull40: {
+	rounded_full_40: {
 		kaIpWk: "x1m3ak92",
-		k8WAf4: "xt970qd",
 		kg3NbH: "x17qtykl",
 		$$css: true
 	},
-	roundedFull44: {
+	rounded_full_44: {
 		kaIpWk: "x13pz1uv",
-		k8WAf4: "xt970qd",
 		kg3NbH: "x16l46lf",
 		$$css: true
 	},
-	roundedFull48: {
+	rounded_full_48: {
 		kaIpWk: "x1khhgft",
-		k8WAf4: "xt970qd",
 		kg3NbH: "x1pbfunf",
 		$$css: true
 	},
-	secondary: {
+	size_32: {
+		kZKoxP: "x10w6t97",
+		$$css: true
+	},
+	size_36: {
+		kZKoxP: "xc9qbxq",
+		$$css: true
+	},
+	size_40: {
+		kZKoxP: "x1vqgdyp",
+		$$css: true
+	},
+	size_44: {
+		kZKoxP: "xn3w4p2",
+		$$css: true
+	},
+	size_48: {
+		kZKoxP: "xsdox4t",
+		$$css: true
+	},
+	variant_ghost: {
+		kWkggS: "x1pflddp xjbqb8w",
+		kMwMTN: "x197k1c5",
+		$$css: true
+	},
+	variant_primary: {
+		kWkggS: "xalcron x1escjlh",
+		kMwMTN: "xf4b43d",
+		$$css: true
+	},
+	variant_secondary: {
 		kWkggS: "x1pflddp x1h73wb5",
 		kGVxlE: "x7auhu6 x1er153n",
 		kMwMTN: "x197k1c5",
 		$$css: true
 	},
-	widthBase: {
+	width_base: {
 		kzqmXN: "xeq5yr9",
 		$$css: true
 	},
-	widthFull: {
+	width_full: {
 		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
+const buttonStylesBy = {
+	rounded: {
+		base: {
+			32: buttonStyles.rounded_base_32,
+			36: buttonStyles.rounded_base_36,
+			40: buttonStyles.rounded_base_40,
+			44: buttonStyles.rounded_base_44,
+			48: buttonStyles.rounded_base_48
+		},
+		full: {
+			32: buttonStyles.rounded_full_32,
+			36: buttonStyles.rounded_full_36,
+			40: buttonStyles.rounded_full_40,
+			44: buttonStyles.rounded_full_44,
+			48: buttonStyles.rounded_full_48
+		}
+	},
+	size: {
+		32: buttonStyles.size_32,
+		36: buttonStyles.size_36,
+		40: buttonStyles.size_40,
+		44: buttonStyles.size_44,
+		48: buttonStyles.size_48
+	},
+	variant: {
+		ghost: buttonStyles.variant_ghost,
+		primary: buttonStyles.variant_primary,
+		secondary: buttonStyles.variant_secondary
+	},
+	width: {
+		base: buttonStyles.width_base,
+		full: buttonStyles.width_full
+	}
 };
 //#endregion
-export { buttonRoundedBaseStyles, buttonRoundedFullStyles, buttonStyles };
+export { buttonStyles, buttonStylesBy };

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

@@ -7,7 +7,7 @@ interface ButtonLinkInternalProps<ComponentType extends ElementType = "a"> {
   fullWidth?: boolean;
   iconEnd?: ReactNode;
   iconStart?: ReactNode;
-  label?: number | number[] | string | string[];
+  label?: string;
   rounded?: boolean;
   size?: ButtonSize;
   variant?: ButtonVariant;

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

@@ -1,21 +1,17 @@
-import { getButtonClassName } from "../button/button.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { buttonStyles, buttonStylesBy } from "../button/button.stylex.js";
+import { cn } from "../cn.js";
+import { jsxs } from "react/jsx-runtime";
 //#region src/components/button-link/button-link.tsx
 function ButtonLink(props) {
-	const { as: Component = "a", className = "", iconStart = "", iconEnd = "", fullWidth = false, rounded = false, label = "", size = 40, variant = "primary", ...rest } = props;
+	const { as: Component = "a", className = "", fullWidth = false, iconEnd = "", iconStart = "", label = "", rounded = false, size = 40, variant = "primary", ...rest } = props;
+	const combinedClassName = cn(buttonStyles.base, buttonStylesBy.rounded[rounded ? "full" : "base"][size], buttonStylesBy.size[size], buttonStylesBy.variant[variant], buttonStylesBy.width[fullWidth ? "full" : "base"], className);
 	return /* @__PURE__ */ jsxs(Component, {
-		className: getButtonClassName({
-			className,
-			fullWidth,
-			rounded,
-			size,
-			variant
-		}),
-		"data-slot": "button-link",
+		className: combinedClassName,
+		"data-component": "button-link",
 		...rest,
 		children: [
 			iconStart,
-			label !== "" && /* @__PURE__ */ jsx("span", { children: label }),
+			label,
 			iconEnd
 		]
 	});

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

@@ -1,11 +1,11 @@
-import { sx } from "../cn.js";
+import { cn } 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) {
 	const { ...rest } = props;
 	return /* @__PURE__ */ jsx("svg", {
-		"data-slot": "checkbox-icon",
+		"data-component": "checkbox-icon",
 		fill: "none",
 		height: "24",
 		viewBox: "0 0 24 24",
@@ -13,7 +13,7 @@ function CheckboxIcon(props) {
 		xmlns: "http://www.w3.org/2000/svg",
 		...rest,
 		children: /* @__PURE__ */ jsx("path", {
-			className: sx(checkboxStyles.iconPath),
+			className: cn(checkboxStyles.icon_path),
 			d: "M5 13.875L9.2 18L19 7",
 			strokeLinecap: "round",
 			strokeLinejoin: "round"

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

@@ -1,8 +1,7 @@
-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;
 //#endregion
-export { Checkbox$1 as Checkbox, CheckboxProps, checkboxStyles };
+export { Checkbox$1 as Checkbox, CheckboxProps };

package/dist/components/checkbox/checkbox.js

@@ -1,20 +1,21 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { checkboxStyles } from "./checkbox.stylex.js";
 import { CheckboxIcon } from "./checkbox-icon.js";
 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 { children = void 0, className = "", ...rest } = props;
+	const combinedClassName = cn(checkboxStyles.base, className);
 	return /* @__PURE__ */ jsx(Checkbox.Root, {
-		className: cn(sx(checkboxStyles.base), customClassName),
-		"data-slot": "checkbox",
+		className: combinedClassName,
+		"data-component": "checkbox",
 		...rest,
 		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
-			className: sx(checkboxStyles.indicator),
-			children: children ?? /* @__PURE__ */ jsx(CheckboxIcon, { className: sx(checkboxStyles.icon) })
+			className: cn(checkboxStyles.indicator),
+			children: children ?? /* @__PURE__ */ jsx(CheckboxIcon, { className: cn(checkboxStyles.icon) })
 		})
 	});
 }
 //#endregion
-export { Checkbox$1 as Checkbox, checkboxStyles };
+export { Checkbox$1 as Checkbox };

package/dist/components/checkbox/checkbox.stylex.js

@@ -27,7 +27,7 @@ const checkboxStyles = {
 		kzqmXN: "x1fjlwjz",
 		$$css: true
 	},
-	iconPath: {
+	icon_path: {
 		kjVXCG: "xqvyd8v",
 		kfJifR: "xqjr0vm",
 		$$css: true

package/dist/components/cn.js

@@ -1,18 +1,20 @@
 import * as stylex from "@stylexjs/stylex";
 //#region src/components/cn.ts
 /**
-* Join class names, dropping empty values.
+* Compile StyleX styles and join class names, dropping empty values.
 *
 * `cn` is short for class names.
 *
-* @param {unknown[]} values - Class strings and optional empty values to ignore.
+* @param {unknown[]} values - StyleX styles, class strings, and optional empty values to ignore.
 * @returns {string} A single space-separated class string.
 */
 function cn(...values) {
-	return values.filter((value) => typeof value === "string" && value !== "").join(" ");
-}
-function sx(...styles) {
-	return stylex.props(...styles).className ?? "";
+	const stylexStyles = [];
+	const classNames = [];
+	for (const value of values) if (typeof value === "string") {
+		if (value !== "") classNames.push(value);
+	} else if (typeof value !== "function") stylexStyles.push(value);
+	return [stylexStyles.length === 0 ? "" : stylex.props(...stylexStyles).className ?? "", ...classNames].filter((value) => value !== "").join(" ");
 }
 //#endregion
-export { cn, sx };
+export { cn };

package/dist/components/column/column.d.ts

@@ -1,4 +1,3 @@
-import { columnStyles } from "./column.stylex.js";
 import { CSSProperties, ComponentProps, ElementType, JSX } from "react";
 //#region src/components/column/column.d.ts
 type ColumnProps<ComponentType extends ElementType = "div"> = ColumnInternalProps & ComponentProps<ComponentType>;
@@ -13,4 +12,4 @@ interface ColumnInternalProps {
 }
 declare function Column(props: ColumnProps): JSX.Element;
 //#endregion
-export { Column, ColumnProps, columnStyles };
+export { Column, ColumnProps };

package/dist/components/column/column.js

@@ -1,11 +1,10 @@
 import { cn } from "../cn.js";
 import { columnStyles } from "./column.stylex.js";
-import * as stylex from "@stylexjs/stylex";
 import { createElement } from "react";
 //#region src/components/column/column.tsx
 function Column(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(columnStyles.base);
+	const combinedClassName = cn(columnStyles.base, className);
 	const combinedStyle = {
 		...customStyle,
 		...gap === void 0 ? {} : { gap },
@@ -16,11 +15,11 @@ function Column(props) {
 		...justifyContent === void 0 ? {} : { justifyContent }
 	};
 	return createElement(as, {
-		className: cn(stylexClassName, className),
-		"data-slot": "column",
+		className: combinedClassName,
+		"data-component": "column",
 		style: combinedStyle,
 		...rest
 	});
 }
 //#endregion
-export { Column, columnStyles };
+export { Column };

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

@@ -1,31 +1,32 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { pickerPopupStyles } from "../picker/picker-popup.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react";
 //#region src/components/combobox/combobox-content.tsx
 function ComboboxContent(props) {
-	const { align = "start", 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", 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(Combobox.Portal, {
 		container,
-		"data-slot": "combobox-portal",
+		"data-component": "combobox-portal",
 		children: /* @__PURE__ */ jsx(Combobox.Positioner, {
 			align,
 			alignOffset,
 			anchor,
 			arrowPadding,
-			className: sx(pickerPopupStyles.positioner),
+			className: cn(pickerPopupStyles.positioner),
 			collisionAvoidance,
 			collisionBoundary,
 			collisionPadding,
-			"data-slot": "combobox-positioner",
+			"data-component": "combobox-positioner",
 			disableAnchorTracking,
 			positionMethod,
 			side,
 			sideOffset,
 			sticky,
 			children: /* @__PURE__ */ jsx(Combobox.Popup, {
-				className: cn(sx(pickerPopupStyles.base), customClassName),
-				"data-slot": "combobox-content",
+				className: combinedClassName,
+				"data-component": "combobox-content",
 				...rest,
 				children
 			})

package/dist/components/combobox/combobox-empty.d.ts

@@ -1,4 +1,3 @@
-import { comboboxEmptyStyles } from "./combobox-empty.stylex.js";
 import { Combobox } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/combobox/combobox-empty.d.ts
@@ -7,4 +6,4 @@ interface ComboboxEmptyProps extends Omit<Combobox.Empty.Props, "className"> {
 }
 declare function ComboboxEmpty(props: ComboboxEmptyProps): JSX.Element;
 //#endregion
-export { ComboboxEmpty, ComboboxEmptyProps, comboboxEmptyStyles };
+export { ComboboxEmpty, ComboboxEmptyProps };

package/dist/components/combobox/combobox-empty.js

@@ -1,15 +1,16 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { comboboxEmptyStyles } from "./combobox-empty.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react";
 //#region src/components/combobox/combobox-empty.tsx
 function ComboboxEmpty(props) {
-	const { className: customClassName = "", ...rest } = props;
+	const { className = "", ...rest } = props;
+	const combinedClassName = cn(comboboxEmptyStyles.base, className);
 	return /* @__PURE__ */ jsx(Combobox.Empty, {
-		className: cn(sx(comboboxEmptyStyles.base), customClassName),
-		"data-slot": "combobox-empty",
+		className: combinedClassName,
+		"data-component": "combobox-empty",
 		...rest
 	});
 }
 //#endregion
-export { ComboboxEmpty, comboboxEmptyStyles };
+export { ComboboxEmpty };

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

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

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

@@ -1,4 +1,3 @@
-import { comboboxInputStyles } from "./combobox-input.stylex.js";
 import { Combobox } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/combobox/combobox-input.d.ts
@@ -10,4 +9,4 @@ interface ComboboxInputProps extends Omit<Combobox.Input.Props, "className" | "s
 type ComboboxInputSize = 32 | 36 | 40 | 44 | 48;
 declare function ComboboxInput(props: ComboboxInputProps): JSX.Element;
 //#endregion
-export { ComboboxInput, ComboboxInputProps, ComboboxInputSize, comboboxInputStyles };
+export { ComboboxInput, ComboboxInputProps, ComboboxInputSize };