@nattstack/ui 0.0.107 → 0.1.0

package/dist/components/switch/switch.d.ts

@@ -1,19 +1,11 @@
-import { VariantProps } from "class-variance-authority";
+import { switchStyles } from "./switch.stylex.js";
 import { Switch } from "@base-ui/react";
 import { ComponentProps, JSX } from "react";
 //#region src/components/switch/switch.d.ts
-interface SwitchProps extends Omit<ComponentProps<typeof Switch.Root>, "checked" | "defaultChecked" | "disabled" | "nativeButton" | "readOnly" | "required"> {
-  isChecked?: boolean;
-  isDefaultChecked?: boolean;
-  isDisabled?: boolean;
-  isReadOnly?: boolean;
-  isRequired?: boolean;
+interface SwitchProps extends Omit<ComponentProps<typeof Switch.Root>, "nativeButton"> {
   size?: SwitchSize;
 }
-type SwitchSize = NonNullable<VariantProps<typeof switchVariants>["size"]>;
+type SwitchSize = 18 | 24;
 declare function Switch$1(props: SwitchProps): JSX.Element;
-declare const switchVariants: (props?: ({
-  size?: 18 | 24 | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
-export { Switch$1 as Switch, SwitchProps, switchVariants };
+export { Switch$1 as Switch, SwitchProps, SwitchSize, switchStyles };

package/dist/components/switch/switch.js

@@ -1,32 +1,16 @@
-import switch_module_default from "./switch.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { switchStyles } from "./switch.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Switch } from "@base-ui/react";
 //#region src/components/switch/switch.tsx
 function Switch$1(props) {
-	const { className: customClassName = "", isChecked = void 0, isDefaultChecked = false, isDisabled = false, isReadOnly = false, isRequired = false, size = 24, ...rest } = props;
-	const combinedClassName = switchVariants({
-		className: customClassName,
-		size
-	});
+	const { className: customClassName = "", size = 24, ...rest } = props;
 	return /* @__PURE__ */ jsx(Switch.Root, {
-		checked: isChecked,
-		className: combinedClassName,
+		className: cn(sx(switchStyles.base, switchStyles[size]), customClassName),
 		"data-slot": "switch",
-		defaultChecked: isDefaultChecked,
-		disabled: isDisabled,
-		readOnly: isReadOnly,
-		required: isRequired,
 		...rest,
-		children: /* @__PURE__ */ jsx(Switch.Thumb, { className: switch_module_default.thumb })
+		children: /* @__PURE__ */ jsx(Switch.Thumb, { className: sx(switchStyles.thumb) })
 	});
 }
-const switchVariants = cva(switch_module_default.base, {
-	defaultVariants: { size: 24 },
-	variants: { size: {
-		18: switch_module_default.size_18,
-		24: switch_module_default.size_24
-	} }
-});
 //#endregion
-export { Switch$1 as Switch, switchVariants };
+export { Switch$1 as Switch, switchStyles };

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

@@ -0,0 +1,41 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/switch/switch.stylex.d.ts
+declare const switchStyles: Readonly<{
+  readonly 18: Readonly<{
+    readonly "--translateX": stylex.StyleXClassNameFor<"--translateX", "12px">;
+    readonly height: stylex.StyleXClassNameFor<"height", 18>;
+    readonly width: stylex.StyleXClassNameFor<"width", 30>;
+  }>;
+  readonly 24: Readonly<{
+    readonly "--translateX": stylex.StyleXClassNameFor<"--translateX", "16px">;
+    readonly height: stylex.StyleXClassNameFor<"height", 24>;
+    readonly width: stylex.StyleXClassNameFor<"width", 40>;
+  }>;
+  readonly base: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--color-gray-6)" | "var(--color-primary-9)">;
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 9999>;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer" | "not-allowed">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | 0.5>;
+    readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", "var(--color-primary-9)">;
+    readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", 2>;
+    readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+    readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0 | 2>;
+    readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+    readonly padding: stylex.StyleXClassNameFor<"padding", 2>;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "150ms">;
+    readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color">;
+  }>;
+  readonly thumb: Readonly<{
+    readonly aspectRatio: stylex.StyleXClassNameFor<"aspectRatio", "1 / 1">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "white">;
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 9999>;
+    readonly height: stylex.StyleXClassNameFor<"height", "100%">;
+    readonly transform: stylex.StyleXClassNameFor<"transform", "none" | "translateX(var(--translateX))">;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "150ms">;
+    readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "transform">;
+  }>;
+}>;
+//#endregion
+export { switchStyles };

package/dist/components/switch/switch.stylex.js

@@ -0,0 +1,44 @@
+//#region src/components/switch/switch.stylex.ts
+const switchStyles = {
+	"18": {
+		"--translateX": "x16tb73e",
+		kZKoxP: "xmix8c7",
+		kzqmXN: "x1849jeq",
+		$$css: true
+	},
+	"24": {
+		"--translateX": "xksez7u",
+		kZKoxP: "xxk0z11",
+		kzqmXN: "x100vrsf",
+		$$css: true
+	},
+	base: {
+		kWkggS: "x1hhl9jx xfl8pkj",
+		kaIpWk: "x10hpsqq",
+		kkrTdU: "x5ezrf1 x1ypdohk",
+		k1xSpc: "x78zum5",
+		kmuXW: "x2lah0s",
+		kSiTet: "xxh3kiz x1hc1fzr",
+		kjBf7l: "x1luwoo2",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "xaatb59",
+		kMeerF: "x784prv x1k57tk5",
+		kVQacm: "xb3r6kr",
+		kmVPX3: "x1i3ajwb",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "x15406qy",
+		$$css: true
+	},
+	thumb: {
+		kOBAk4: "x1y5e3q9",
+		kWkggS: "x12peec7",
+		kaIpWk: "x10hpsqq",
+		kZKoxP: "x5yr21d",
+		k3aq6I: "x1bad46t x1c071of",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "x11xpdln",
+		$$css: true
+	}
+};
+//#endregion
+export { switchStyles };

package/dist/components/tabs/tabs-panel.d.ts

@@ -1,8 +1,8 @@
+import { tabsPanelStyles } from "./tabs-panel.stylex.js";
 import { Tabs } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/tabs/tabs-panel.d.ts
 interface TabsPanelProps extends Tabs.Panel.Props {}
 declare function TabsPanel(props: TabsPanelProps): JSX.Element;
-declare const tabsPanelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { TabsPanel, TabsPanelProps, tabsPanelVariants };
+export { TabsPanel, TabsPanelProps, tabsPanelStyles };

package/dist/components/tabs/tabs-panel.js

@@ -1,17 +1,17 @@
-import tabs_panel_module_default from "./tabs-panel.module.js";
-import { cva } from "class-variance-authority";
+import { cn } from "../cn.js";
+import { tabsPanelStyles } from "./tabs-panel.stylex.js";
+import * as stylex from "@stylexjs/stylex";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react";
 //#region src/components/tabs/tabs-panel.tsx
 function TabsPanel(props) {
-	const { className: customClassName = "", ...rest } = props;
-	const combinedClassName = tabsPanelVariants({ className: customClassName });
+	const { className = "", ...rest } = props;
+	const { className: stylexClassName } = stylex.props(tabsPanelStyles.base);
 	return /* @__PURE__ */ jsx(Tabs.Panel, {
-		className: combinedClassName,
+		className: cn(stylexClassName, className),
 		"data-slot": "tabs-panel",
 		...rest
 	});
 }
-const tabsPanelVariants = cva(tabs_panel_module_default.base);
 //#endregion
-export { TabsPanel, tabsPanelVariants };
+export { TabsPanel, tabsPanelStyles };

package/dist/components/tabs/tabs-panel.stylex.d.ts

@@ -0,0 +1,14 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/tabs/tabs-panel.stylex.d.ts
+declare const tabsPanelStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+    readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", "transparent" | "var(--color-primary-9)">;
+    readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", -2>;
+    readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+    readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0 | 2>;
+  }>;
+}>;
+//#endregion
+export { tabsPanelStyles };

package/dist/components/tabs/tabs-panel.stylex.js

@@ -0,0 +1,12 @@
+//#region src/components/tabs/tabs-panel.stylex.ts
+const tabsPanelStyles = { base: {
+	k1xSpc: "x78zum5",
+	kXwgrk: "xdt5ytf",
+	kjBf7l: "x1mp0jls x1uczgqu",
+	kInvED: "x2ssjo2",
+	k3XXqK: "xaatb59",
+	kMeerF: "x784prv x1k57tk5",
+	$$css: true
+} };
+//#endregion
+export { tabsPanelStyles };

package/dist/components/tabs/tabs.d.ts

@@ -1,8 +1,8 @@
+import { tabsStyles } from "./tabs.stylex.js";
 import { Tabs } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/tabs/tabs.d.ts
 interface TabsProps extends Tabs.Root.Props {}
 declare function Tabs$1(props: TabsProps): JSX.Element;
-declare const tabsVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { Tabs$1 as Tabs, TabsProps, tabsVariants };
+export { Tabs$1 as Tabs, TabsProps, tabsStyles };

package/dist/components/tabs/tabs.js

@@ -1,17 +1,17 @@
-import tabs_module_default from "./tabs.module.js";
-import { cva } from "class-variance-authority";
+import { cn } from "../cn.js";
+import { tabsStyles } from "./tabs.stylex.js";
+import * as stylex from "@stylexjs/stylex";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react";
 //#region src/components/tabs/tabs.tsx
 function Tabs$1(props) {
-	const { className: customClassName = "", ...rest } = props;
-	const combinedClassName = tabsVariants({ className: customClassName });
+	const { className = "", ...rest } = props;
+	const { className: stylexClassName } = stylex.props(tabsStyles.base);
 	return /* @__PURE__ */ jsx(Tabs.Root, {
-		className: combinedClassName,
+		className: cn(stylexClassName, className),
 		"data-slot": "tabs",
 		...rest
 	});
 }
-const tabsVariants = cva(tabs_module_default.base);
 //#endregion
-export { Tabs$1 as Tabs, tabsVariants };
+export { Tabs$1 as Tabs, tabsStyles };

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

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

package/dist/components/tabs/tabs.stylex.js

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

package/dist/components/tabs-pill/tabs-pill-indicator.js

@@ -1,18 +1,16 @@
-import tabs_pill_indicator_module_default from "./tabs-pill-indicator.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { tabsPillIndicatorStyles } from "./tabs-pill-indicator.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react";
 //#region src/components/tabs-pill/tabs-pill-indicator.tsx
 function TabsPillIndicator(props) {
 	const { className: customClassName = "", ...rest } = props;
-	const combinedClassName = tabsPillIndicatorVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Tabs.Indicator, {
-		className: combinedClassName,
+		className: cn(sx(tabsPillIndicatorStyles.base), customClassName),
 		"data-slot": "tabs-pill-indicator",
 		renderBeforeHydration: true,
 		...rest
 	});
 }
-const tabsPillIndicatorVariants = cva(tabs_pill_indicator_module_default.base);
 //#endregion
-export { TabsPillIndicator, tabsPillIndicatorVariants };
+export { TabsPillIndicator };

package/dist/components/tabs-pill/tabs-pill-indicator.stylex.js

@@ -0,0 +1,16 @@
+//#region src/components/tabs-pill/tabs-pill-indicator.stylex.ts
+const tabsPillIndicatorStyles = { base: {
+	kWkggS: "x1escjlh",
+	kaIpWk: "x4pepcl",
+	kZKoxP: "x1gezbiy",
+	kbCHJM: "xvbikie",
+	kVAEAm: "x10l6tqk",
+	k87sOh: "x10uur0e",
+	kIyJzY: "xx6bhzk",
+	k1ekBW: "x1ym43eq",
+	kzqmXN: "xoffw1",
+	kY2c9j: "x8knxv4",
+	$$css: true
+} };
+//#endregion
+export { tabsPillIndicatorStyles };

package/dist/components/tabs-pill/tabs-pill-list.d.ts

@@ -1,8 +1,8 @@
+import { tabsPillListStyles } from "./tabs-pill-list.stylex.js";
 import { Tabs } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/tabs-pill/tabs-pill-list.d.ts
 interface TabsPillListProps extends Tabs.List.Props {}
 declare function TabsPillList(props: TabsPillListProps): JSX.Element;
-declare const tabsPillListVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { TabsPillList, TabsPillListProps, tabsPillListVariants };
+export { TabsPillList, TabsPillListProps, tabsPillListStyles };

package/dist/components/tabs-pill/tabs-pill-list.js

@@ -1,19 +1,17 @@
+import { cn, sx } from "../cn.js";
 import { TabsPillIndicator } from "./tabs-pill-indicator.js";
-import tabs_pill_list_module_default from "./tabs-pill-list.module.js";
-import { cva } from "class-variance-authority";
+import { tabsPillListStyles } from "./tabs-pill-list.stylex.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react";
 //#region src/components/tabs-pill/tabs-pill-list.tsx
 function TabsPillList(props) {
 	const { className: customClassName = "", children = void 0, ...rest } = props;
-	const combinedClassName = tabsPillListVariants({ className: customClassName });
 	return /* @__PURE__ */ jsxs(Tabs.List, {
-		className: combinedClassName,
+		className: cn(sx(tabsPillListStyles.base), customClassName),
 		"data-slot": "tabs-pill-list",
 		...rest,
 		children: [children, /* @__PURE__ */ jsx(TabsPillIndicator, {})]
 	});
 }
-const tabsPillListVariants = cva(tabs_pill_list_module_default.base);
 //#endregion
-export { TabsPillList, tabsPillListVariants };
+export { TabsPillList, tabsPillListStyles };

package/dist/components/tabs-pill/tabs-pill-list.stylex.d.ts

@@ -0,0 +1,13 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/tabs-pill/tabs-pill-list.stylex.d.ts
+declare const tabsPillListStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly columnGap: stylex.StyleXClassNameFor<"columnGap", 8>;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly isolation: stylex.StyleXClassNameFor<"isolation", "isolate">;
+    readonly overflowX: stylex.StyleXClassNameFor<"overflowX", "auto">;
+    readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+  }>;
+}>;
+//#endregion
+export { tabsPillListStyles };

package/dist/components/tabs-pill/tabs-pill-list.stylex.js

@@ -0,0 +1,11 @@
+//#region src/components/tabs-pill/tabs-pill-list.stylex.ts
+const tabsPillListStyles = { base: {
+	k1C7PZ: "xfex06f",
+	k1xSpc: "x78zum5",
+	kHBbk8: "xc8icb0",
+	kXHlph: "xw2csxc",
+	kVAEAm: "x1n2onr6",
+	$$css: true
+} };
+//#endregion
+export { tabsPillListStyles };

package/dist/components/tabs-pill/tabs-pill-tab.d.ts

@@ -1,10 +1,8 @@
+import { tabsPillTabStyles } from "./tabs-pill-tab.stylex.js";
 import { Tabs } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/tabs-pill/tabs-pill-tab.d.ts
-interface TabsPillTabProps extends Omit<Tabs.Tab.Props, "nativeButton"> {
-  isNativeButton?: Tabs.Tab.Props["nativeButton"];
-}
+interface TabsPillTabProps extends Tabs.Tab.Props {}
 declare function TabsPillTab(props: TabsPillTabProps): JSX.Element;
-declare const tabsPillTabVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { TabsPillTab, TabsPillTabProps, tabsPillTabVariants };
+export { TabsPillTab, TabsPillTabProps, tabsPillTabStyles };

package/dist/components/tabs-pill/tabs-pill-tab.js

@@ -1,21 +1,19 @@
-import tabs_pill_tab_module_default from "./tabs-pill-tab.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { tabsPillTabStyles } from "./tabs-pill-tab.stylex.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react";
 //#region src/components/tabs-pill/tabs-pill-tab.tsx
 function TabsPillTab(props) {
-	const { className: customClassName = "", isNativeButton = true, ...rest } = props;
-	const combinedClassName = tabsPillTabVariants({ className: customClassName });
+	const { className: customClassName = "", ...rest } = props;
 	return /* @__PURE__ */ jsxs("div", {
-		className: tabs_pill_tab_module_default.wrapper,
+		className: sx(tabsPillTabStyles.wrapper),
 		children: [/* @__PURE__ */ jsx(Tabs.Tab, {
-			className: combinedClassName,
+			className: cn(sx(tabsPillTabStyles.base), customClassName),
 			"data-slot": "tabs-pill-tab",
-			nativeButton: isNativeButton,
+			nativeButton: true,
 			...rest
-		}), /* @__PURE__ */ jsx("div", { className: tabs_pill_tab_module_default.background })]
+		}), /* @__PURE__ */ jsx("div", { className: sx(tabsPillTabStyles.background) })]
 	});
 }
-const tabsPillTabVariants = cva(tabs_pill_tab_module_default.base);
 //#endregion
-export { TabsPillTab, tabsPillTabVariants };
+export { TabsPillTab, tabsPillTabStyles };

package/dist/components/tabs-pill/tabs-pill-tab.stylex.d.ts

@@ -0,0 +1,44 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/tabs-pill/tabs-pill-tab.stylex.d.ts
+declare const tabsPillTabStyles: Readonly<{
+  readonly background: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--color-gray-3)">;
+    readonly inset: stylex.StyleXClassNameFor<"inset", 0>;
+    readonly position: stylex.StyleXClassNameFor<"position", "absolute">;
+    readonly zIndex: stylex.StyleXClassNameFor<"zIndex", -2>;
+  }>;
+  readonly base: Readonly<{
+    readonly "--border-radius": stylex.StyleXClassNameFor<"--border-radius", "12px">;
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent" | "var(--color-gray-4)">;
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "var(--border-radius)">;
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-gray-12)" | "var(--color-gray-1)">;
+    readonly columnGap: stylex.StyleXClassNameFor<"columnGap", 8>;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 14>;
+    readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", 450>;
+    readonly height: stylex.StyleXClassNameFor<"height", 40>;
+    readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+    readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", "var(--color-primary-9)">;
+    readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", -4>;
+    readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+    readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0 | 2>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 14>;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "150ms">;
+    readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color, color">;
+    readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
+  }>;
+  readonly wrapper: Readonly<{
+    readonly "--border-radius": stylex.StyleXClassNameFor<"--border-radius", "12px">;
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "var(--border-radius)">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+    readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+  }>;
+}>;
+//#endregion
+export { tabsPillTabStyles };

package/dist/components/tabs-pill/tabs-pill-tab.stylex.js

@@ -0,0 +1,46 @@
+//#region src/components/tabs-pill/tabs-pill-tab.stylex.ts
+const tabsPillTabStyles = {
+	background: {
+		kWkggS: "x2j0cto",
+		kpwlN0: "x10a8y8t",
+		kVAEAm: "x10l6tqk",
+		kY2c9j: "x1fdshc9",
+		$$css: true
+	},
+	base: {
+		"--border-radius": "xq5qtd1",
+		kGNEyG: "x6s0dn4",
+		kWkggS: "x135mljp x18ejm1c xjbqb8w",
+		kaIpWk: "xujip75",
+		kMwMTN: "x1dua4oe x197k1c5",
+		k1C7PZ: "xfex06f",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x78zum5",
+		kmuXW: "x2lah0s",
+		kGuDYH: "xif65rj",
+		k63SB2: "x10p5zqr",
+		kZKoxP: "x1vqgdyp",
+		kjj79g: "xl56j7k",
+		kjBf7l: "x1luwoo2",
+		kInvED: "xr2mjdv",
+		k3XXqK: "xaatb59",
+		kMeerF: "x784prv x1k57tk5",
+		k8WAf4: "xt970qd",
+		kg3NbH: "xqin4a2",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "xs2xxs2",
+		khDVqt: "xuxw1ft",
+		$$css: true
+	},
+	wrapper: {
+		"--border-radius": "xq5qtd1",
+		kaIpWk: "xujip75",
+		k1xSpc: "x78zum5",
+		kmuXW: "x2lah0s",
+		kVQacm: "xb3r6kr",
+		kVAEAm: "x1n2onr6",
+		$$css: true
+	}
+};
+//#endregion
+export { tabsPillTabStyles };

package/dist/components/tabs-segmented/tabs-segmented-indicator.js

@@ -1,18 +1,16 @@
-import tabs_segmented_indicator_module_default from "./tabs-segmented-indicator.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { tabsSegmentedIndicatorStyles } from "./tabs-segmented-indicator.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react";
 //#region src/components/tabs-segmented/tabs-segmented-indicator.tsx
 function TabsSegmentedIndicator(props) {
 	const { className: customClassName = "", ...rest } = props;
-	const combinedClassName = tabsSegmentedIndicatorVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Tabs.Indicator, {
-		className: combinedClassName,
+		className: cn(sx(tabsSegmentedIndicatorStyles.base), customClassName),
 		"data-slot": "tabs-segmented-indicator",
 		renderBeforeHydration: true,
 		...rest
 	});
 }
-const tabsSegmentedIndicatorVariants = cva(tabs_segmented_indicator_module_default.base);
 //#endregion
-export { TabsSegmentedIndicator, tabsSegmentedIndicatorVariants };
+export { TabsSegmentedIndicator };

package/dist/components/tabs-segmented/tabs-segmented-indicator.stylex.js

@@ -0,0 +1,16 @@
+//#region src/components/tabs-segmented/tabs-segmented-indicator.stylex.ts
+const tabsSegmentedIndicatorStyles = { base: {
+	kWkggS: "xm8sm7k",
+	kaIpWk: "x1q4ynmn",
+	kZKoxP: "x1gezbiy",
+	kbCHJM: "xvbikie",
+	kVAEAm: "x10l6tqk",
+	k87sOh: "x10uur0e",
+	kIyJzY: "xx6bhzk",
+	k1ekBW: "x1ym43eq",
+	kzqmXN: "xoffw1",
+	kY2c9j: "x8knxv4",
+	$$css: true
+} };
+//#endregion
+export { tabsSegmentedIndicatorStyles };

package/dist/components/tabs-segmented/tabs-segmented-list.d.ts

@@ -1,8 +1,8 @@
+import { tabsSegmentedListStyles } from "./tabs-segmented-list.stylex.js";
 import { Tabs } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/tabs-segmented/tabs-segmented-list.d.ts
 interface TabsSegmentedListProps extends Tabs.List.Props {}
 declare function TabsSegmentedList(props: TabsSegmentedListProps): JSX.Element;
-declare const tabsSegmentedListVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { TabsSegmentedList, TabsSegmentedListProps, tabsSegmentedListVariants };
+export { TabsSegmentedList, TabsSegmentedListProps, tabsSegmentedListStyles };

package/dist/components/tabs-segmented/tabs-segmented-list.js

@@ -1,19 +1,17 @@
+import { cn, sx } from "../cn.js";
 import { TabsSegmentedIndicator } from "./tabs-segmented-indicator.js";
-import tabs_segmented_list_module_default from "./tabs-segmented-list.module.js";
-import { cva } from "class-variance-authority";
+import { tabsSegmentedListStyles } from "./tabs-segmented-list.stylex.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react";
 //#region src/components/tabs-segmented/tabs-segmented-list.tsx
 function TabsSegmentedList(props) {
 	const { className: customClassName = "", children = void 0, ...rest } = props;
-	const combinedClassName = tabsSegmentedListVariants({ className: customClassName });
 	return /* @__PURE__ */ jsxs(Tabs.List, {
-		className: combinedClassName,
+		className: cn(sx(tabsSegmentedListStyles.base), customClassName),
 		"data-slot": "tabs-segmented-list",
 		...rest,
 		children: [children, /* @__PURE__ */ jsx(TabsSegmentedIndicator, {})]
 	});
 }
-const tabsSegmentedListVariants = cva(tabs_segmented_list_module_default.base);
 //#endregion
-export { TabsSegmentedList, tabsSegmentedListVariants };
+export { TabsSegmentedList, tabsSegmentedListStyles };

package/dist/components/tabs-segmented/tabs-segmented-list.stylex.d.ts

@@ -0,0 +1,17 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/tabs-segmented/tabs-segmented-list.stylex.d.ts
+declare const tabsSegmentedListStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--color-gray-3)">;
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 12>;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly height: stylex.StyleXClassNameFor<"height", 40>;
+    readonly isolation: stylex.StyleXClassNameFor<"isolation", "isolate">;
+    readonly overflowX: stylex.StyleXClassNameFor<"overflowX", "auto">;
+    readonly padding: stylex.StyleXClassNameFor<"padding", 2>;
+    readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+    readonly width: stylex.StyleXClassNameFor<"width", "fit-content">;
+  }>;
+}>;
+//#endregion
+export { tabsSegmentedListStyles };

package/dist/components/tabs-segmented/tabs-segmented-list.stylex.js

@@ -0,0 +1,15 @@
+//#region src/components/tabs-segmented/tabs-segmented-list.stylex.ts
+const tabsSegmentedListStyles = { base: {
+	kWkggS: "x2j0cto",
+	kaIpWk: "x4pepcl",
+	k1xSpc: "x78zum5",
+	kZKoxP: "x1vqgdyp",
+	kHBbk8: "xc8icb0",
+	kXHlph: "xw2csxc",
+	kmVPX3: "x1i3ajwb",
+	kVAEAm: "x1n2onr6",
+	kzqmXN: "xeq5yr9",
+	$$css: true
+} };
+//#endregion
+export { tabsSegmentedListStyles };