@nattstack/ui 0.0.106 → 0.1.0

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

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

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

@@ -1,18 +1,16 @@
-import tabs_segmented_tab_module_default from "./tabs-segmented-tab.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { tabsSegmentedTabStyles } from "./tabs-segmented-tab.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react";
 //#region src/components/tabs-segmented/tabs-segmented-tab.tsx
 function TabsSegmentedTab(props) {
-	const { className: customClassName = "", isNativeButton = true, ...rest } = props;
-	const combinedClassName = tabsSegmentedTabVariants({ className: customClassName });
+	const { className: customClassName = "", ...rest } = props;
 	return /* @__PURE__ */ jsx(Tabs.Tab, {
-		className: combinedClassName,
+		className: cn(sx(tabsSegmentedTabStyles.base), customClassName),
 		"data-slot": "tabs-segmented-tab",
-		nativeButton: isNativeButton,
+		nativeButton: true,
 		...rest
 	});
 }
-const tabsSegmentedTabVariants = cva(tabs_segmented_tab_module_default.base);
 //#endregion
-export { TabsSegmentedTab, tabsSegmentedTabVariants };
+export { TabsSegmentedTab, tabsSegmentedTabStyles };

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

@@ -0,0 +1,28 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/tabs-segmented/tabs-segmented-tab.stylex.d.ts
+declare const tabsSegmentedTabStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 10>;
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-gray-12)" | "var(--color-gray-11)">;
+    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", "100%">;
+    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", "color">;
+    readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
+  }>;
+}>;
+//#endregion
+export { tabsSegmentedTabStyles };

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

@@ -0,0 +1,26 @@
+//#region src/components/tabs-segmented/tabs-segmented-tab.stylex.ts
+const tabsSegmentedTabStyles = { base: {
+	kGNEyG: "x6s0dn4",
+	kaIpWk: "x1q4ynmn",
+	kMwMTN: "x1srrrpr x58zf59 x1dtbpl2",
+	k1C7PZ: "xfex06f",
+	kkrTdU: "x1ypdohk",
+	k1xSpc: "x78zum5",
+	kmuXW: "x2lah0s",
+	kGuDYH: "xif65rj",
+	k63SB2: "x10p5zqr",
+	kZKoxP: "x5yr21d",
+	kjj79g: "xl56j7k",
+	kjBf7l: "x1luwoo2",
+	kInvED: "xr2mjdv",
+	k3XXqK: "xaatb59",
+	kMeerF: "x784prv x1k57tk5",
+	k8WAf4: "xt970qd",
+	kg3NbH: "xqin4a2",
+	kIyJzY: "xx6bhzk",
+	k1ekBW: "xt3l3uh",
+	khDVqt: "xuxw1ft",
+	$$css: true
+} };
+//#endregion
+export { tabsSegmentedTabStyles };

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

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

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

@@ -0,0 +1,14 @@
+//#region src/components/tabs-underline/tabs-underline-indicator.stylex.ts
+const tabsUnderlineIndicatorStyles = { base: {
+	kWkggS: "xa4c8pb",
+	krVfgx: "x1ey2m1c",
+	kZKoxP: "x36qwtl",
+	kbCHJM: "xvbikie",
+	kVAEAm: "x10l6tqk",
+	kIyJzY: "xx6bhzk",
+	k1ekBW: "x1ym43eq",
+	kzqmXN: "xoffw1",
+	$$css: true
+} };
+//#endregion
+export { tabsUnderlineIndicatorStyles };

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

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

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

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

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

@@ -0,0 +1,14 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/tabs-underline/tabs-underline-list.stylex.d.ts
+declare const tabsUnderlineListStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly borderBottomColor: stylex.StyleXClassNameFor<"borderBottomColor", "var(--color-gray-4)">;
+    readonly borderBottomStyle: stylex.StyleXClassNameFor<"borderBottomStyle", "solid">;
+    readonly borderBottomWidth: stylex.StyleXClassNameFor<"borderBottomWidth", 1>;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly overflowX: stylex.StyleXClassNameFor<"overflowX", "auto">;
+    readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+  }>;
+}>;
+//#endregion
+export { tabsUnderlineListStyles };

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

@@ -0,0 +1,12 @@
+//#region src/components/tabs-underline/tabs-underline-list.stylex.ts
+const tabsUnderlineListStyles = { base: {
+	kL6WhQ: "x1s77fqg",
+	kfdmCh: "x1q0q8m5",
+	kt9PQ7: "xso031l",
+	k1xSpc: "x78zum5",
+	kXHlph: "xw2csxc",
+	kVAEAm: "x1n2onr6",
+	$$css: true
+} };
+//#endregion
+export { tabsUnderlineListStyles };

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

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

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

@@ -1,18 +1,16 @@
-import tabs_underline_tab_module_default from "./tabs-underline-tab.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { tabsUnderlineTabStyles } from "./tabs-underline-tab.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react";
 //#region src/components/tabs-underline/tabs-underline-tab.tsx
 function TabsUnderlineTab(props) {
-	const { className: customClassName = "", isNativeButton = true, ...rest } = props;
-	const combinedClassName = tabsUnderlineTabVariants({ className: customClassName });
+	const { className: customClassName = "", ...rest } = props;
 	return /* @__PURE__ */ jsx(Tabs.Tab, {
-		className: combinedClassName,
+		className: cn(sx(tabsUnderlineTabStyles.base), customClassName),
 		"data-slot": "tabs-underline-tab",
-		nativeButton: isNativeButton,
+		nativeButton: true,
 		...rest
 	});
 }
-const tabsUnderlineTabVariants = cva(tabs_underline_tab_module_default.base);
 //#endregion
-export { TabsUnderlineTab, tabsUnderlineTabVariants };
+export { TabsUnderlineTab, tabsUnderlineTabStyles };

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

@@ -0,0 +1,27 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/tabs-underline/tabs-underline-tab.stylex.d.ts
+declare const tabsUnderlineTabStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 8>;
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-gray-12)" | "var(--color-gray-11)">;
+    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 marginBottom: stylex.StyleXClassNameFor<"marginBottom", 6>;
+    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 paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 6>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 12>;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "150ms">;
+    readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "color">;
+    readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
+  }>;
+}>;
+//#endregion
+export { tabsUnderlineTabStyles };

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

@@ -0,0 +1,25 @@
+//#region src/components/tabs-underline/tabs-underline-tab.stylex.ts
+const tabsUnderlineTabStyles = { base: {
+	kGNEyG: "x6s0dn4",
+	kaIpWk: "xur7f20",
+	kMwMTN: "x1srrrpr x58zf59 x1dtbpl2",
+	k1C7PZ: "xfex06f",
+	kkrTdU: "x1ypdohk",
+	k1xSpc: "x78zum5",
+	kmuXW: "x2lah0s",
+	kGuDYH: "xif65rj",
+	k63SB2: "x10p5zqr",
+	k1K539: "xzueoph",
+	kjBf7l: "x1luwoo2",
+	kInvED: "x2ssjo2",
+	k3XXqK: "xaatb59",
+	kMeerF: "x784prv x1k57tk5",
+	k8WAf4: "x1t0vds8",
+	kg3NbH: "xaope02",
+	kIyJzY: "xx6bhzk",
+	k1ekBW: "xt3l3uh",
+	khDVqt: "xuxw1ft",
+	$$css: true
+} };
+//#endregion
+export { tabsUnderlineTabStyles };

package/dist/components/textarea/textarea.d.ts

@@ -1,17 +1,12 @@
+import { textareaStyles } from "./textarea.stylex.js";
 import { ComponentProps, JSX } from "react";
 //#region src/components/textarea/textarea.d.ts
-interface TextareaProps extends Omit<ComponentProps<"textarea">, "aria-pressed" | "disabled" | "readOnly" | "required"> {
-  isActive?: boolean;
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  isReadOnly?: boolean;
-  isRequired?: boolean;
-  isRounded?: boolean;
-  isValid?: boolean;
+interface TextareaProps extends Omit<ComponentProps<"textarea">, "aria-pressed"> {
+  active?: boolean;
+  invalid?: boolean;
+  rounded?: boolean;
+  valid?: boolean;
 }
 declare function Textarea(props: TextareaProps): JSX.Element;
-declare const textareaVariants: (props?: ({
-  isRounded?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
-export { Textarea, TextareaProps, textareaVariants };
+export { Textarea, TextareaProps, textareaStyles };

package/dist/components/textarea/textarea.js

@@ -1,32 +1,19 @@
-import input_module_default from "../input/input.module.js";
-import textarea_module_default from "./textarea.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { inputStyles } from "../input/input.stylex.js";
+import { textareaStyles } from "./textarea.stylex.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/textarea/textarea.tsx
 function Textarea(props) {
-	const { className: customClassName = "", isActive = false, isDisabled = false, isInvalid = void 0, isReadOnly = false, isRequired = false, isRounded = false, isValid = void 0, rows = 2, ...rest } = props;
+	const { className: customClassName = "", active = false, invalid = void 0, rounded = false, valid = void 0, ...rest } = props;
 	return /* @__PURE__ */ jsx("textarea", {
-		className: textareaVariants({
-			className: customClassName,
-			isRounded
-		}),
-		"data-is-active": isActive,
-		"data-is-invalid": isInvalid,
-		"data-is-valid": isValid,
+		className: cn(sx(inputStyles.base, textareaStyles.base, rounded ? inputStyles.roundedFull : inputStyles.roundedBase), customClassName),
+		"data-is-active": active,
+		"data-is-invalid": invalid,
+		"data-is-valid": valid,
 		"data-slot": "textarea",
-		disabled: isDisabled,
-		readOnly: isReadOnly,
-		required: isRequired,
-		rows,
+		rows: 2,
 		...rest
 	});
 }
-const textareaVariants = cva([input_module_default.base, textarea_module_default.base], {
-	defaultVariants: { isRounded: false },
-	variants: { isRounded: {
-		false: input_module_default.rounded_base,
-		true: input_module_default.rounded_full
-	} }
-});
 //#endregion
-export { Textarea, textareaVariants };
+export { Textarea, textareaStyles };

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

@@ -0,0 +1,13 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/textarea/textarea.stylex.d.ts
+declare const textareaStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly height: stylex.StyleXClassNameFor<"height", "auto">;
+    readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "none">;
+    readonly minHeight: stylex.StyleXClassNameFor<"minHeight", 66>;
+    readonly padding: stylex.StyleXClassNameFor<"padding", 12>;
+    readonly resize: stylex.StyleXClassNameFor<"resize", "vertical">;
+  }>;
+}>;
+//#endregion
+export { textareaStyles };

package/dist/components/textarea/textarea.stylex.js

@@ -0,0 +1,11 @@
+//#region src/components/textarea/textarea.stylex.ts
+const textareaStyles = { base: {
+	kZKoxP: "xt7dq6l",
+	kskxy: "x7ab17h",
+	kAzted: "xcr9lap",
+	kmVPX3: "xc7ga6q",
+	kHenm0: "x288g5",
+	$$css: true
+} };
+//#endregion
+export { textareaStyles };

package/dist/components/toggle-group/toggle-group-item.d.ts

@@ -1,11 +1,8 @@
+import { toggleGroupItemStyles } from "./toggle-group-item.stylex.js";
 import { Toggle } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/toggle-group/toggle-group-item.d.ts
-interface ToggleGroupItemProps extends Omit<Toggle.Props, "disabled" | "nativeButton"> {
-  isDisabled?: Toggle.Props["disabled"];
-  isNativeButton?: Toggle.Props["nativeButton"];
-}
+interface ToggleGroupItemProps extends Toggle.Props {}
 declare function ToggleGroupItem(props: ToggleGroupItemProps): JSX.Element;
-declare const toggleGroupItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { ToggleGroupItem, ToggleGroupItemProps, toggleGroupItemVariants };
+export { ToggleGroupItem, ToggleGroupItemProps, toggleGroupItemStyles };

package/dist/components/toggle-group/toggle-group-item.js

@@ -1,18 +1,16 @@
-import toggle_group_item_module_default from "./toggle-group-item.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { toggleGroupItemStyles } from "./toggle-group-item.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react";
 //#region src/components/toggle-group/toggle-group-item.tsx
 function ToggleGroupItem(props) {
-	const { className: customClassName = "", isDisabled = false, isNativeButton = true, ...rest } = props;
+	const { className: customClassName = "", ...rest } = props;
 	return /* @__PURE__ */ jsx(Toggle, {
-		className: toggleGroupItemVariants({ className: customClassName }),
+		className: cn(sx(toggleGroupItemStyles.base), customClassName),
 		"data-slot": "toggle-group-item",
-		disabled: isDisabled,
-		nativeButton: isNativeButton,
+		nativeButton: true,
 		...rest
 	});
 }
-const toggleGroupItemVariants = cva(toggle_group_item_module_default.base);
 //#endregion
-export { ToggleGroupItem, toggleGroupItemVariants };
+export { ToggleGroupItem, toggleGroupItemStyles };

package/dist/components/toggle-group/toggle-group-item.stylex.d.ts

@@ -0,0 +1,33 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/toggle-group/toggle-group-item.stylex.d.ts
+declare const toggleGroupItemStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent" | "var(--color-gray-4)" | "var(--color-gray-3)">;
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 10>;
+    readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "none" | "inset 0 0 0 1px var(--color-primary)">;
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-text-primary)" | "var(--color-text-secondary)">;
+    readonly columnGap: stylex.StyleXClassNameFor<"columnGap", 8>;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer" | "not-allowed">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 14>;
+    readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", 450>;
+    readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | 0.5>;
+    readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", "var(--color-outline)">;
+    readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", 2>;
+    readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+    readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0 | 2>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 8>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 12>;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "150ms">;
+    readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color, box-shadow, color">;
+    readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
+  }>;
+  readonly icon: Readonly<{
+    readonly height: stylex.StyleXClassNameFor<"height", 16>;
+    readonly width: stylex.StyleXClassNameFor<"width", 16>;
+  }>;
+}>;
+//#endregion
+export { toggleGroupItemStyles };

package/dist/components/toggle-group/toggle-group-item.stylex.js

@@ -0,0 +1,34 @@
+//#region src/components/toggle-group/toggle-group-item.stylex.ts
+const toggleGroupItemStyles = {
+	base: {
+		kGNEyG: "x6s0dn4",
+		kWkggS: "x1pflddp xhsv7s5 xjbqb8w",
+		kaIpWk: "x1q4ynmn",
+		kGVxlE: "x11uh7ir x1gnnqk1",
+		kMwMTN: "xp9l56k xv1l7n4",
+		k1C7PZ: "xfex06f",
+		kkrTdU: "x1s07b3s x1ypdohk",
+		k1xSpc: "x78zum5",
+		kGuDYH: "xif65rj",
+		k63SB2: "x10p5zqr",
+		kjj79g: "xl56j7k",
+		kSiTet: "xijokvz x1hc1fzr",
+		kjBf7l: "x43yjvr",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "xaatb59",
+		kMeerF: "x784prv x1k57tk5",
+		k8WAf4: "x1vvogim",
+		kg3NbH: "xaope02",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "x1koyr57",
+		kfSwDN: "x87ps6o",
+		$$css: true
+	},
+	icon: {
+		kZKoxP: "xlup9mm",
+		kzqmXN: "x1kky2od",
+		$$css: true
+	}
+};
+//#endregion
+export { toggleGroupItemStyles };

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

@@ -1,12 +1,8 @@
+import { toggleGroupStyles } from "./toggle-group.stylex.js";
 import { ToggleGroup } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/toggle-group/toggle-group.d.ts
-interface ToggleGroupProps extends Omit<ToggleGroup.Props, "disabled" | "loopFocus" | "multiple"> {
-  isDisabled?: ToggleGroup.Props["disabled"];
-  isLoopFocus?: ToggleGroup.Props["loopFocus"];
-  isMultiple?: ToggleGroup.Props["multiple"];
-}
+interface ToggleGroupProps extends ToggleGroup.Props {}
 declare function ToggleGroup$1(props: ToggleGroupProps): JSX.Element;
-declare const toggleGroupVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { ToggleGroup$1 as ToggleGroup, ToggleGroupProps, toggleGroupVariants };
+export { ToggleGroup$1 as ToggleGroup, ToggleGroupProps, toggleGroupStyles };

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

@@ -1,19 +1,16 @@
-import toggle_group_module_default from "./toggle-group.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { toggleGroupStyles } from "./toggle-group.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { ToggleGroup } from "@base-ui/react";
 //#region src/components/toggle-group/toggle-group.tsx
 function ToggleGroup$1(props) {
-	const { className: customClassName = "", isDisabled = false, isLoopFocus = true, isMultiple = false, ...rest } = props;
+	const { className: customClassName = "", ...rest } = props;
 	return /* @__PURE__ */ jsx(ToggleGroup, {
-		className: toggleGroupVariants({ className: customClassName }),
+		className: cn(sx(toggleGroupStyles.base), customClassName),
 		"data-slot": "toggle-group",
-		disabled: isDisabled,
-		loopFocus: isLoopFocus,
-		multiple: isMultiple,
+		loopFocus: true,
 		...rest
 	});
 }
-const toggleGroupVariants = cva(toggle_group_module_default.base);
 //#endregion
-export { ToggleGroup$1 as ToggleGroup, toggleGroupVariants };
+export { ToggleGroup$1 as ToggleGroup, toggleGroupStyles };

package/dist/components/toggle-group/toggle-group.stylex.d.ts

@@ -0,0 +1,11 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/toggle-group/toggle-group.stylex.d.ts
+declare const toggleGroupStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexWrap: stylex.StyleXClassNameFor<"flexWrap", "wrap">;
+    readonly gap: stylex.StyleXClassNameFor<"gap", 8>;
+  }>;
+}>;
+//#endregion
+export { toggleGroupStyles };

package/dist/components/toggle-group/toggle-group.stylex.js

@@ -0,0 +1,9 @@
+//#region src/components/toggle-group/toggle-group.stylex.ts
+const toggleGroupStyles = { base: {
+	k1xSpc: "x78zum5",
+	kwnvtZ: "x1a02dak",
+	kOIVth: "x167g77z",
+	$$css: true
+} };
+//#endregion
+export { toggleGroupStyles };

package/dist/components/tooltip/tooltip-popup.d.ts

@@ -1,8 +1,8 @@
+import { tooltipPopupStyles } from "./tooltip-popup.stylex.js";
 import { Tooltip } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/tooltip/tooltip-popup.d.ts
 interface TooltipPopupProps extends Pick<Tooltip.Positioner.Props, "side" | "sideOffset">, Tooltip.Popup.Props {}
 declare function TooltipPopup(props: TooltipPopupProps): JSX.Element;
-declare const tooltipPopupVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { TooltipPopup, TooltipPopupProps, tooltipPopupVariants };
+export { TooltipPopup, TooltipPopupProps, tooltipPopupStyles };

package/dist/components/tooltip/tooltip-popup.js

@@ -1,18 +1,18 @@
-import tooltip_popup_module_default from "./tooltip-popup.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { tooltipPopupStyles } from "./tooltip-popup.stylex.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react";
 //#region src/components/tooltip/tooltip-popup.tsx
 function TooltipPopup(props) {
 	const { children = void 0, className: customClassName = "", side = "top", sideOffset = 4, ...rest } = props;
-	const combinedClassName = tooltipPopupVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Tooltip.Portal, {
-		className: tooltip_popup_module_default.portal,
+		className: sx(tooltipPopupStyles.portal),
 		children: /* @__PURE__ */ jsxs(Tooltip.Positioner, {
+			className: sx(tooltipPopupStyles.positioner),
 			side,
 			sideOffset,
 			children: [/* @__PURE__ */ jsx(Tooltip.Popup, {
-				className: combinedClassName,
+				className: cn(sx(tooltipPopupStyles.base), customClassName),
 				"data-slot": "tooltip-popup",
 				...rest,
 				children
@@ -20,6 +20,5 @@ function TooltipPopup(props) {
 		})
 	});
 }
-const tooltipPopupVariants = cva(tooltip_popup_module_default.base);
 //#endregion
-export { TooltipPopup, tooltipPopupVariants };
+export { TooltipPopup, tooltipPopupStyles };