@nattstack/ui 0.1.0 → 0.1.1

package/dist/components/spacer/spacer.js

@@ -1,22 +1,21 @@
 import { cn } from "../cn.js";
 import { spacerStyles } from "./spacer.stylex.js";
-import * as stylex from "@stylexjs/stylex";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/spacer/spacer.tsx
 function Spacer(props) {
 	const { className = "", height, style: customStyle, width, ...rest } = props;
-	const { className: stylexClassName } = stylex.props(spacerStyles.base);
+	const combinedClassName = cn(spacerStyles.base, className);
 	const combinedStyle = {
 		...customStyle,
 		...width === void 0 ? {} : { width },
 		...height === void 0 ? {} : { height }
 	};
 	return /* @__PURE__ */ jsx("div", {
-		className: cn(stylexClassName, className),
-		"data-slot": "spacer",
+		className: combinedClassName,
+		"data-component": "spacer",
 		style: combinedStyle,
 		...rest
 	});
 }
 //#endregion
-export { Spacer, spacerStyles };
+export { Spacer };

package/dist/components/stylex.css

@@ -171,6 +171,10 @@
     padding-block: 8px;
   }
 
+  .xnjsko4 {
+    padding-inline: 0;
+  }
+
   .x1awh872 {
     padding-inline: 10px;
   }
@@ -666,10 +670,6 @@
     text-overflow: ellipsis;
   }
 
-  .x19pm5ym {
-    text-shadow: none;
-  }
-
   .x1kol6zn {
     transform-origin: 0;
   }

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

@@ -1,4 +1,3 @@
-import { switchStyles } from "./switch.stylex.js";
 import { Switch } from "@base-ui/react";
 import { ComponentProps, JSX } from "react";
 //#region src/components/switch/switch.d.ts
@@ -8,4 +7,4 @@ interface SwitchProps extends Omit<ComponentProps<typeof Switch.Root>, "nativeBu
 type SwitchSize = 18 | 24;
 declare function Switch$1(props: SwitchProps): JSX.Element;
 //#endregion
-export { Switch$1 as Switch, SwitchProps, SwitchSize, switchStyles };
+export { Switch$1 as Switch, SwitchProps, SwitchSize };

package/dist/components/switch/switch.js

@@ -1,16 +1,17 @@
-import { cn, sx } from "../cn.js";
-import { switchStyles } from "./switch.stylex.js";
+import { cn } from "../cn.js";
+import { switchStyles, switchStylesBy } 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 = "", size = 24, ...rest } = props;
+	const { className = "", size = 24, ...rest } = props;
+	const combinedClassName = cn(switchStyles.base, switchStylesBy.size[size], className);
 	return /* @__PURE__ */ jsx(Switch.Root, {
-		className: cn(sx(switchStyles.base, switchStyles[size]), customClassName),
-		"data-slot": "switch",
+		className: combinedClassName,
+		"data-component": "switch",
 		...rest,
-		children: /* @__PURE__ */ jsx(Switch.Thumb, { className: sx(switchStyles.thumb) })
+		children: /* @__PURE__ */ jsx(Switch.Thumb, { className: cn(switchStyles.thumb) })
 	});
 }
 //#endregion
-export { Switch$1 as Switch, switchStyles };
+export { Switch$1 as Switch };

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

@@ -1,17 +1,5 @@
 //#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",
@@ -29,6 +17,18 @@ const switchStyles = {
 		k1ekBW: "x15406qy",
 		$$css: true
 	},
+	size_18: {
+		"--translateX": "x16tb73e",
+		kZKoxP: "xmix8c7",
+		kzqmXN: "x1849jeq",
+		$$css: true
+	},
+	size_24: {
+		"--translateX": "xksez7u",
+		kZKoxP: "xxk0z11",
+		kzqmXN: "x100vrsf",
+		$$css: true
+	},
 	thumb: {
 		kOBAk4: "x1y5e3q9",
 		kWkggS: "x12peec7",
@@ -40,5 +40,9 @@ const switchStyles = {
 		$$css: true
 	}
 };
+const switchStylesBy = { size: {
+	18: switchStyles.size_18,
+	24: switchStyles.size_24
+} };
 //#endregion
-export { switchStyles };
+export { switchStyles, switchStylesBy };

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

@@ -1,8 +1,7 @@
-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;
 //#endregion
-export { TabsPanel, TabsPanelProps, tabsPanelStyles };
+export { TabsPanel, TabsPanelProps };

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

@@ -1,17 +1,16 @@
 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 = "", ...rest } = props;
-	const { className: stylexClassName } = stylex.props(tabsPanelStyles.base);
+	const combinedClassName = cn(tabsPanelStyles.base, className);
 	return /* @__PURE__ */ jsx(Tabs.Panel, {
-		className: cn(stylexClassName, className),
-		"data-slot": "tabs-panel",
+		className: combinedClassName,
+		"data-component": "tabs-panel",
 		...rest
 	});
 }
 //#endregion
-export { TabsPanel, tabsPanelStyles };
+export { TabsPanel };

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

@@ -1,8 +1,7 @@
-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;
 //#endregion
-export { Tabs$1 as Tabs, TabsProps, tabsStyles };
+export { Tabs$1 as Tabs, TabsProps };

package/dist/components/tabs/tabs.js

@@ -1,17 +1,16 @@
 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 = "", ...rest } = props;
-	const { className: stylexClassName } = stylex.props(tabsStyles.base);
+	const combinedClassName = cn(tabsStyles.base, className);
 	return /* @__PURE__ */ jsx(Tabs.Root, {
-		className: cn(stylexClassName, className),
-		"data-slot": "tabs",
+		className: combinedClassName,
+		"data-component": "tabs",
 		...rest
 	});
 }
 //#endregion
-export { Tabs$1 as Tabs, tabsStyles };
+export { Tabs$1 as Tabs };

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

@@ -1,13 +1,14 @@
-import { cn, sx } from "../cn.js";
+import { cn } 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 { className = "", ...rest } = props;
+	const combinedClassName = cn(tabsPillIndicatorStyles.base, className);
 	return /* @__PURE__ */ jsx(Tabs.Indicator, {
-		className: cn(sx(tabsPillIndicatorStyles.base), customClassName),
-		"data-slot": "tabs-pill-indicator",
+		className: combinedClassName,
+		"data-component": "tabs-pill-indicator",
 		renderBeforeHydration: true,
 		...rest
 	});

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

@@ -1,8 +1,7 @@
-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;
 //#endregion
-export { TabsPillList, TabsPillListProps, tabsPillListStyles };
+export { TabsPillList, TabsPillListProps };

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

@@ -1,17 +1,18 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { TabsPillIndicator } from "./tabs-pill-indicator.js";
 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 { className = "", children = void 0, ...rest } = props;
+	const combinedClassName = cn(tabsPillListStyles.base, className);
 	return /* @__PURE__ */ jsxs(Tabs.List, {
-		className: cn(sx(tabsPillListStyles.base), customClassName),
-		"data-slot": "tabs-pill-list",
+		className: combinedClassName,
+		"data-component": "tabs-pill-list",
 		...rest,
 		children: [children, /* @__PURE__ */ jsx(TabsPillIndicator, {})]
 	});
 }
 //#endregion
-export { TabsPillList, tabsPillListStyles };
+export { TabsPillList };

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

@@ -1,8 +1,7 @@
-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 Tabs.Tab.Props {}
 declare function TabsPillTab(props: TabsPillTabProps): JSX.Element;
 //#endregion
-export { TabsPillTab, TabsPillTabProps, tabsPillTabStyles };
+export { TabsPillTab, TabsPillTabProps };

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

@@ -1,19 +1,20 @@
-import { cn, sx } from "../cn.js";
+import { cn } 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 = "", ...rest } = props;
+	const { className = "", ...rest } = props;
+	const combinedClassName = cn(tabsPillTabStyles.base, className);
 	return /* @__PURE__ */ jsxs("div", {
-		className: sx(tabsPillTabStyles.wrapper),
+		className: cn(tabsPillTabStyles.wrapper),
 		children: [/* @__PURE__ */ jsx(Tabs.Tab, {
-			className: cn(sx(tabsPillTabStyles.base), customClassName),
-			"data-slot": "tabs-pill-tab",
+			className: combinedClassName,
+			"data-component": "tabs-pill-tab",
 			nativeButton: true,
 			...rest
-		}), /* @__PURE__ */ jsx("div", { className: sx(tabsPillTabStyles.background) })]
+		}), /* @__PURE__ */ jsx("div", { className: cn(tabsPillTabStyles.background) })]
 	});
 }
 //#endregion
-export { TabsPillTab, tabsPillTabStyles };
+export { TabsPillTab };

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

@@ -1,13 +1,14 @@
-import { cn, sx } from "../cn.js";
+import { cn } 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 { className = "", ...rest } = props;
+	const combinedClassName = cn(tabsSegmentedIndicatorStyles.base, className);
 	return /* @__PURE__ */ jsx(Tabs.Indicator, {
-		className: cn(sx(tabsSegmentedIndicatorStyles.base), customClassName),
-		"data-slot": "tabs-segmented-indicator",
+		className: combinedClassName,
+		"data-component": "tabs-segmented-indicator",
 		renderBeforeHydration: true,
 		...rest
 	});

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

@@ -1,8 +1,7 @@
-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;
 //#endregion
-export { TabsSegmentedList, TabsSegmentedListProps, tabsSegmentedListStyles };
+export { TabsSegmentedList, TabsSegmentedListProps };

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

@@ -1,17 +1,18 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { TabsSegmentedIndicator } from "./tabs-segmented-indicator.js";
 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 { className = "", children = void 0, ...rest } = props;
+	const combinedClassName = cn(tabsSegmentedListStyles.base, className);
 	return /* @__PURE__ */ jsxs(Tabs.List, {
-		className: cn(sx(tabsSegmentedListStyles.base), customClassName),
-		"data-slot": "tabs-segmented-list",
+		className: combinedClassName,
+		"data-component": "tabs-segmented-list",
 		...rest,
 		children: [children, /* @__PURE__ */ jsx(TabsSegmentedIndicator, {})]
 	});
 }
 //#endregion
-export { TabsSegmentedList, tabsSegmentedListStyles };
+export { TabsSegmentedList };

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

@@ -1,8 +1,7 @@
-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 Tabs.Tab.Props {}
 declare function TabsSegmentedTab(props: TabsSegmentedTabProps): JSX.Element;
 //#endregion
-export { TabsSegmentedTab, TabsSegmentedTabProps, tabsSegmentedTabStyles };
+export { TabsSegmentedTab, TabsSegmentedTabProps };

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

@@ -1,16 +1,17 @@
-import { cn, sx } from "../cn.js";
+import { cn } 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 = "", ...rest } = props;
+	const { className = "", ...rest } = props;
+	const combinedClassName = cn(tabsSegmentedTabStyles.base, className);
 	return /* @__PURE__ */ jsx(Tabs.Tab, {
-		className: cn(sx(tabsSegmentedTabStyles.base), customClassName),
-		"data-slot": "tabs-segmented-tab",
+		className: combinedClassName,
+		"data-component": "tabs-segmented-tab",
 		nativeButton: true,
 		...rest
 	});
 }
 //#endregion
-export { TabsSegmentedTab, tabsSegmentedTabStyles };
+export { TabsSegmentedTab };

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

@@ -1,13 +1,14 @@
-import { cn, sx } from "../cn.js";
+import { cn } 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 { className = "", ...rest } = props;
+	const combinedClassName = cn(tabsUnderlineIndicatorStyles.base, className);
 	return /* @__PURE__ */ jsx(Tabs.Indicator, {
-		className: cn(sx(tabsUnderlineIndicatorStyles.base), customClassName),
-		"data-slot": "tabs-underline-indicator",
+		className: combinedClassName,
+		"data-component": "tabs-underline-indicator",
 		renderBeforeHydration: true,
 		...rest
 	});

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

@@ -1,8 +1,7 @@
-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;
 //#endregion
-export { TabsUnderlineList, TabsUnderlineListProps, tabsUnderlineListStyles };
+export { TabsUnderlineList, TabsUnderlineListProps };

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

@@ -1,17 +1,18 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { TabsUnderlineIndicator } from "./tabs-underline-indicator.js";
 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 { className = "", children = void 0, ...rest } = props;
+	const combinedClassName = cn(tabsUnderlineListStyles.base, className);
 	return /* @__PURE__ */ jsxs(Tabs.List, {
-		className: cn(sx(tabsUnderlineListStyles.base), customClassName),
-		"data-slot": "tabs-underline-list",
+		className: combinedClassName,
+		"data-component": "tabs-underline-list",
 		...rest,
 		children: [children, /* @__PURE__ */ jsx(TabsUnderlineIndicator, {})]
 	});
 }
 //#endregion
-export { TabsUnderlineList, tabsUnderlineListStyles };
+export { TabsUnderlineList };

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

@@ -1,8 +1,7 @@
-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 Tabs.Tab.Props {}
 declare function TabsUnderlineTab(props: TabsUnderlineTabProps): JSX.Element;
 //#endregion
-export { TabsUnderlineTab, TabsUnderlineTabProps, tabsUnderlineTabStyles };
+export { TabsUnderlineTab, TabsUnderlineTabProps };

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

@@ -1,16 +1,17 @@
-import { cn, sx } from "../cn.js";
+import { cn } 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 = "", ...rest } = props;
+	const { className = "", ...rest } = props;
+	const combinedClassName = cn(tabsUnderlineTabStyles.base, className);
 	return /* @__PURE__ */ jsx(Tabs.Tab, {
-		className: cn(sx(tabsUnderlineTabStyles.base), customClassName),
-		"data-slot": "tabs-underline-tab",
+		className: combinedClassName,
+		"data-component": "tabs-underline-tab",
 		nativeButton: true,
 		...rest
 	});
 }
 //#endregion
-export { TabsUnderlineTab, tabsUnderlineTabStyles };
+export { TabsUnderlineTab };

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

@@ -1,4 +1,3 @@
-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"> {
@@ -9,4 +8,4 @@ interface TextareaProps extends Omit<ComponentProps<"textarea">, "aria-pressed">
 }
 declare function Textarea(props: TextareaProps): JSX.Element;
 //#endregion
-export { Textarea, TextareaProps, textareaStyles };
+export { Textarea, TextareaProps };

package/dist/components/textarea/textarea.js

@@ -1,19 +1,20 @@
-import { cn, sx } from "../cn.js";
-import { inputStyles } from "../input/input.stylex.js";
+import { cn } from "../cn.js";
+import { inputStyles, inputStylesBy } 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 = "", active = false, invalid = void 0, rounded = false, valid = void 0, ...rest } = props;
+	const { className = "", active = false, invalid = void 0, rounded = false, valid = void 0, ...rest } = props;
+	const combinedClassName = cn(inputStyles.base, textareaStyles.base, inputStylesBy.rounded[rounded ? "full" : "base"], className);
 	return /* @__PURE__ */ jsx("textarea", {
-		className: cn(sx(inputStyles.base, textareaStyles.base, rounded ? inputStyles.roundedFull : inputStyles.roundedBase), customClassName),
+		className: combinedClassName,
+		"data-component": "textarea",
 		"data-is-active": active,
 		"data-is-invalid": invalid,
 		"data-is-valid": valid,
-		"data-slot": "textarea",
 		rows: 2,
 		...rest
 	});
 }
 //#endregion
-export { Textarea, textareaStyles };
+export { Textarea };

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

@@ -1,8 +1,7 @@
-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 Toggle.Props {}
 declare function ToggleGroupItem(props: ToggleGroupItemProps): JSX.Element;
 //#endregion
-export { ToggleGroupItem, ToggleGroupItemProps, toggleGroupItemStyles };
+export { ToggleGroupItem, ToggleGroupItemProps };

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

@@ -1,16 +1,17 @@
-import { cn, sx } from "../cn.js";
+import { cn } 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 = "", ...rest } = props;
+	const { className = "", ...rest } = props;
+	const combinedClassName = cn(toggleGroupItemStyles.base, className);
 	return /* @__PURE__ */ jsx(Toggle, {
-		className: cn(sx(toggleGroupItemStyles.base), customClassName),
-		"data-slot": "toggle-group-item",
+		className: combinedClassName,
+		"data-component": "toggle-group-item",
 		nativeButton: true,
 		...rest
 	});
 }
 //#endregion
-export { ToggleGroupItem, toggleGroupItemStyles };
+export { ToggleGroupItem };

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

@@ -1,8 +1,7 @@
-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 ToggleGroup.Props {}
 declare function ToggleGroup$1(props: ToggleGroupProps): JSX.Element;
 //#endregion
-export { ToggleGroup$1 as ToggleGroup, ToggleGroupProps, toggleGroupStyles };
+export { ToggleGroup$1 as ToggleGroup, ToggleGroupProps };

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

@@ -1,16 +1,17 @@
-import { cn, sx } from "../cn.js";
+import { cn } 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 = "", ...rest } = props;
+	const { className = "", ...rest } = props;
+	const combinedClassName = cn(toggleGroupStyles.base, className);
 	return /* @__PURE__ */ jsx(ToggleGroup, {
-		className: cn(sx(toggleGroupStyles.base), customClassName),
-		"data-slot": "toggle-group",
+		className: combinedClassName,
+		"data-component": "toggle-group",
 		loopFocus: true,
 		...rest
 	});
 }
 //#endregion
-export { ToggleGroup$1 as ToggleGroup, toggleGroupStyles };
+export { ToggleGroup$1 as ToggleGroup };

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

@@ -1,8 +1,7 @@
-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;
 //#endregion
-export { TooltipPopup, TooltipPopupProps, tooltipPopupStyles };
+export { TooltipPopup, TooltipPopupProps };

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

@@ -1,19 +1,20 @@
-import { cn, sx } from "../cn.js";
+import { cn } 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 { children = void 0, className = "", side = "top", sideOffset = 4, ...rest } = props;
+	const combinedClassName = cn(tooltipPopupStyles.base, className);
 	return /* @__PURE__ */ jsx(Tooltip.Portal, {
-		className: sx(tooltipPopupStyles.portal),
+		className: cn(tooltipPopupStyles.portal),
 		children: /* @__PURE__ */ jsxs(Tooltip.Positioner, {
-			className: sx(tooltipPopupStyles.positioner),
+			className: cn(tooltipPopupStyles.positioner),
 			side,
 			sideOffset,
 			children: [/* @__PURE__ */ jsx(Tooltip.Popup, {
-				className: cn(sx(tooltipPopupStyles.base), customClassName),
-				"data-slot": "tooltip-popup",
+				className: combinedClassName,
+				"data-component": "tooltip-popup",
 				...rest,
 				children
 			}), /* @__PURE__ */ jsx(Tooltip.Arrow, {})]
@@ -21,4 +22,4 @@ function TooltipPopup(props) {
 	});
 }
 //#endregion
-export { TooltipPopup, tooltipPopupStyles };
+export { TooltipPopup };