@nattstack/ui 0.0.106 → 0.1.0

package/dist/components/checkbox/checkbox.js

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

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

@@ -0,0 +1,40 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/checkbox/checkbox.stylex.d.ts
+declare const checkboxStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly "--size": stylex.StyleXClassNameFor<"--size", "16px">;
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--color-bg-shell-inner)" | "var(--color-gray-3)" | "var(--color-primary)">;
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "transparent" | "var(--color-gray-6)" | "var(--color-border)">;
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 4>;
+    readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+    readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 1>;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly height: stylex.StyleXClassNameFor<"height", "var(--size)">;
+    readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+    readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", "var(--color-primary)">;
+    readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", 2>;
+    readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+    readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0 | 2>;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "150ms">;
+    readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color, border-color">;
+    readonly width: stylex.StyleXClassNameFor<"width", "var(--size)">;
+  }>;
+  readonly icon: Readonly<{
+    readonly "--size": stylex.StyleXClassNameFor<"--size", "12px">;
+    readonly height: stylex.StyleXClassNameFor<"height", "var(--size)">;
+    readonly width: stylex.StyleXClassNameFor<"width", "var(--size)">;
+  }>;
+  readonly iconPath: Readonly<{
+    readonly stroke: stylex.StyleXClassNameFor<"stroke", "white">;
+    readonly strokeWidth: stylex.StyleXClassNameFor<"strokeWidth", 3>;
+  }>;
+  readonly indicator: Readonly<{
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1>;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "150ms">;
+    readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+  }>;
+}>;
+//#endregion
+export { checkboxStyles };

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

@@ -0,0 +1,43 @@
+//#region src/components/checkbox/checkbox.stylex.ts
+const checkboxStyles = {
+	base: {
+		"--size": "x1fwrj7o",
+		kGNEyG: "x6s0dn4",
+		kWkggS: "x12icss0 x1qny0gl x1h73wb5",
+		kVAM5u: "x7n6cpb x81i4et x14i3s5s",
+		kaIpWk: "x12oqio5",
+		ksu8eU: "x1y0btm7",
+		kMzoRj: "xmkeg23",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x78zum5",
+		kZKoxP: "x188dgw3",
+		kjj79g: "xl56j7k",
+		kjBf7l: "x1du7r5n",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "xaatb59",
+		kMeerF: "x784prv x1k57tk5",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "xts7igz",
+		kzqmXN: "x1fjlwjz",
+		$$css: true
+	},
+	icon: {
+		"--size": "x14kqwz2",
+		kZKoxP: "x188dgw3",
+		kzqmXN: "x1fjlwjz",
+		$$css: true
+	},
+	iconPath: {
+		kjVXCG: "xqvyd8v",
+		kfJifR: "xqjr0vm",
+		$$css: true
+	},
+	indicator: {
+		kSiTet: "xyn2shw xg01cxk",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "x19991ni",
+		$$css: true
+	}
+};
+//#endregion
+export { checkboxStyles };

package/dist/components/cn.d.ts

@@ -0,0 +1,6 @@
+import { CompiledStyles, InlineStyles, StyleXArray } from "@stylexjs/stylex";
+//#region src/components/cn.d.ts
+type StylexStyle = StyleXArray<boolean | CompiledStyles | false | null | Readonly<[CompiledStyles, InlineStyles]> | undefined>;
+declare function sx(...styles: StylexStyle[]): string;
+//#endregion
+export { sx };

package/dist/components/cn.js

@@ -0,0 +1,18 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/cn.ts
+/**
+* Join class names, dropping empty values.
+*
+* `cn` is short for class names.
+*
+* @param {unknown[]} values - 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 ?? "";
+}
+//#endregion
+export { cn, sx };

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

@@ -1,3 +1,4 @@
+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>;
@@ -11,6 +12,5 @@ interface ColumnInternalProps {
   justifyContent?: CSSProperties["justifyContent"];
 }
 declare function Column(props: ColumnProps): JSX.Element;
-declare const columnVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { Column, ColumnProps, columnVariants };
+export { Column, ColumnProps, columnStyles };

package/dist/components/column/column.js

@@ -1,24 +1,26 @@
-import column_module_default from "./column.module.js";
-import { cva } from "class-variance-authority";
+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: 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(columnStyles.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: columnVariants({ className: customClassName }),
+		className: cn(stylexClassName, className),
 		"data-slot": "column",
-		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 columnVariants = cva(column_module_default.base);
 //#endregion
-export { Column, columnVariants };
+export { Column, columnStyles };

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

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

package/dist/components/column/column.stylex.js

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

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

@@ -6,6 +6,5 @@ interface ComboboxContentProps extends Omit<Combobox.Popup.Props, "className">,
   container?: Combobox.Portal.Props["container"];
 }
 declare function ComboboxContent(props: ComboboxContentProps): JSX.Element;
-declare const comboboxContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { ComboboxContent, ComboboxContentProps, comboboxContentVariants };
+export { ComboboxContent, ComboboxContentProps };

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

@@ -1,11 +1,10 @@
-import picker_popup_module_default from "../picker/picker-popup.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } 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 combinedClassName = comboboxContentVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Combobox.Portal, {
 		container,
 		"data-slot": "combobox-portal",
@@ -14,7 +13,7 @@ function ComboboxContent(props) {
 			alignOffset,
 			anchor,
 			arrowPadding,
-			className: picker_popup_module_default.positioner,
+			className: sx(pickerPopupStyles.positioner),
 			collisionAvoidance,
 			collisionBoundary,
 			collisionPadding,
@@ -25,7 +24,7 @@ function ComboboxContent(props) {
 			sideOffset,
 			sticky,
 			children: /* @__PURE__ */ jsx(Combobox.Popup, {
-				className: combinedClassName,
+				className: cn(sx(pickerPopupStyles.base), customClassName),
 				"data-slot": "combobox-content",
 				...rest,
 				children
@@ -33,6 +32,5 @@ function ComboboxContent(props) {
 		})
 	});
 }
-const comboboxContentVariants = cva(picker_popup_module_default.base);
 //#endregion
-export { ComboboxContent, comboboxContentVariants };
+export { ComboboxContent };

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

@@ -1,3 +1,4 @@
+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
@@ -5,6 +6,5 @@ interface ComboboxEmptyProps extends Omit<Combobox.Empty.Props, "className"> {
   className?: string;
 }
 declare function ComboboxEmpty(props: ComboboxEmptyProps): JSX.Element;
-declare const comboboxEmptyVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { ComboboxEmpty, ComboboxEmptyProps, comboboxEmptyVariants };
+export { ComboboxEmpty, ComboboxEmptyProps, comboboxEmptyStyles };

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

@@ -1,17 +1,15 @@
-import combobox_empty_module_default from "./combobox-empty.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } 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 combinedClassName = comboboxEmptyVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Combobox.Empty, {
-		className: combinedClassName,
+		className: cn(sx(comboboxEmptyStyles.base), customClassName),
 		"data-slot": "combobox-empty",
 		...rest
 	});
 }
-const comboboxEmptyVariants = cva(combobox_empty_module_default.base);
 //#endregion
-export { ComboboxEmpty, comboboxEmptyVariants };
+export { ComboboxEmpty, comboboxEmptyStyles };

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

@@ -0,0 +1,13 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/combobox/combobox-empty.stylex.d.ts
+declare const comboboxEmptyStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "transparent" | "var(--color-text-secondary)">;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 0 | 14>;
+    readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", 400 | 450>;
+    readonly padding: stylex.StyleXClassNameFor<"padding", 0 | "8px 12px">;
+    readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "center">;
+  }>;
+}>;
+//#endregion
+export { comboboxEmptyStyles };

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

@@ -0,0 +1,11 @@
+//#region src/components/combobox/combobox-empty.stylex.ts
+const comboboxEmptyStyles = { base: {
+	kMwMTN: "x5y519c x19co3pv",
+	kGuDYH: "xigw2gj xgxxoiu",
+	k63SB2: "xhqi7ye xo1l8bm",
+	kmVPX3: "x3cdv55 x1717udv",
+	k9WMMc: "x2b8uid",
+	$$css: true
+} };
+//#endregion
+export { comboboxEmptyStyles };

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

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

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

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

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

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

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

@@ -1,17 +1,13 @@
-import { VariantProps } from "class-variance-authority";
+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
-interface ComboboxInputProps extends Omit<Combobox.Input.Props, "className" | "disabled" | "size"> {
+interface ComboboxInputProps extends Omit<Combobox.Input.Props, "className" | "size"> {
   className?: string;
-  isDisabled?: Combobox.Input.Props["disabled"];
-  isRounded?: VariantProps<typeof comboboxInputVariants>["isRounded"];
-  size?: VariantProps<typeof comboboxInputVariants>["size"];
+  rounded?: boolean;
+  size?: ComboboxInputSize;
 }
+type ComboboxInputSize = 32 | 36 | 40 | 44 | 48;
 declare function ComboboxInput(props: ComboboxInputProps): JSX.Element;
-declare const comboboxInputVariants: (props?: ({
-  isRounded?: boolean | null | undefined;
-  size?: 32 | 36 | 40 | 44 | 48 | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
-export { ComboboxInput, ComboboxInputProps, comboboxInputVariants };
+export { ComboboxInput, ComboboxInputProps, ComboboxInputSize, comboboxInputStyles };

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

@@ -1,30 +1,25 @@
-import combobox_input_module_default from "./combobox-input.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { comboboxInputStyles } from "./combobox-input.stylex.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react";
 //#region src/components/combobox/combobox-input.tsx
 function ComboboxInput(props) {
-	const { className: customClassName = "", isDisabled = false, isRounded = false, size = 40, ...rest } = props;
-	const combinedClassName = comboboxInputVariants({
-		className: customClassName,
-		isRounded,
-		size
-	});
+	const { className: customClassName = "", disabled = false, rounded = false, size = 40, ...rest } = props;
 	return /* @__PURE__ */ jsxs(Combobox.InputGroup, {
-		className: combinedClassName,
+		className: cn(sx(comboboxInputStyles.base, comboboxInputStyles[size], rounded && comboboxInputStyles.roundedFull), customClassName),
 		"data-slot": "combobox-input-group",
 		children: [/* @__PURE__ */ jsx(Combobox.Input, {
-			className: combobox_input_module_default.input,
+			className: sx(comboboxInputStyles.input),
 			"data-slot": "combobox-input",
-			disabled: isDisabled,
+			disabled,
 			...rest
 		}), /* @__PURE__ */ jsx(Combobox.Trigger, {
-			className: combobox_input_module_default.trigger,
+			className: sx(comboboxInputStyles.trigger),
 			"data-slot": "combobox-input-trigger",
-			disabled: isDisabled,
+			disabled,
 			tabIndex: -1,
 			children: /* @__PURE__ */ jsx(Combobox.Icon, {
-				className: combobox_input_module_default.icon,
+				className: sx(comboboxInputStyles.icon),
 				"data-slot": "combobox-input-icon",
 				children: /* @__PURE__ */ jsx("svg", {
 					height: "14",
@@ -44,15 +39,5 @@ function ComboboxInput(props) {
 		})]
 	});
 }
-const comboboxInputVariants = cva(combobox_input_module_default.base, { variants: {
-	isRounded: { true: combobox_input_module_default.rounded_full },
-	size: {
-		32: combobox_input_module_default.size_32,
-		36: combobox_input_module_default.size_36,
-		40: combobox_input_module_default.size_40,
-		44: combobox_input_module_default.size_44,
-		48: combobox_input_module_default.size_48
-	}
-} });
 //#endregion
-export { ComboboxInput, comboboxInputVariants };
+export { ComboboxInput, comboboxInputStyles };

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

@@ -0,0 +1,93 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/combobox/combobox-input.stylex.d.ts
+declare const comboboxInputStyles: 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)">;
+    readonly columnGap: stylex.StyleXClassNameFor<"columnGap", 8>;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "text" | "not-allowed">;
+    readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | 0.5>;
+    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 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 input: 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", "transparent">;
+    readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-text-primary)">;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "text" | "not-allowed">;
+    readonly flexBasis: stylex.StyleXClassNameFor<"flexBasis", 0>;
+    readonly flexGrow: stylex.StyleXClassNameFor<"flexGrow", 1>;
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 1>;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 14>;
+    readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", 450>;
+    readonly height: stylex.StyleXClassNameFor<"height", "100%">;
+    readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+    readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+    readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
+  }>;
+  readonly roundedFull: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 9999>;
+  }>;
+  readonly trigger: Readonly<{
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+    readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
+    readonly color: stylex.StyleXClassNameFor<"color", "inherit">;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer" | "not-allowed">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    readonly height: stylex.StyleXClassNameFor<"height", "100%">;
+    readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+    readonly marginLeft: stylex.StyleXClassNameFor<"marginLeft", "auto">;
+    readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
+    readonly width: stylex.StyleXClassNameFor<"width", 16>;
+  }>;
+}>;
+//#endregion
+export { comboboxInputStyles };