@moduix/react 2.2.0 → 2.2.4

package/dist/components/table/{Table.css → Table_module.css}

@@ -1,5 +1,5 @@
 @layer moduix.components {
-  .-X2Dga_scrollArea {
+  .scrollArea-kAB0bv {
     box-sizing: border-box;
     isolation: isolate;
     border: var(--moduix-table-scroll-area-border-width, var(--moduix-table-border-width, var(--moduix-border-width-sm)))
@@ -14,7 +14,7 @@
     overflow-x: auto;
   }
 
-  .-X2Dga_root {
+  .root-iUez_7 {
     --moduix-table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-4));
     --moduix-table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-3));
     --moduix-table-empty-padding-y-default: calc(var(--moduix-table-cell-padding-y-default) * 2);
@@ -28,28 +28,28 @@
     line-height: var(--moduix-table-line-height, var(--moduix-line-height-text-sm));
     text-align: left;
     isolation: isolate;
+  }
+
+  .root-iUez_7[data-size="sm"] {
+    --moduix-table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-3));
+    --moduix-table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-2));
+    font-size: var(--moduix-table-font-size-sm, var(--moduix-text-xs));
+    line-height: var(--moduix-table-line-height-sm, var(--moduix-line-height-text-xs));
+  }
 
-    &[data-size="sm"] {
-      --moduix-table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-3));
-      --moduix-table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-2));
-      font-size: var(--moduix-table-font-size-sm, var(--moduix-text-xs));
-      line-height: var(--moduix-table-line-height-sm, var(--moduix-line-height-text-xs));
-    }
-
-    &[data-size="lg"] {
-      --moduix-table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-5));
-      --moduix-table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-4));
-      font-size: var(--moduix-table-font-size-lg, var(--moduix-text-md));
-      line-height: var(--moduix-table-line-height-lg, var(--moduix-line-height-text-md));
-    }
-
-    &[data-variant="outline"] {
-      border: var(--moduix-table-border-width, var(--moduix-border-width-sm)) solid
+  .root-iUez_7[data-size="lg"] {
+    --moduix-table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-5));
+    --moduix-table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-4));
+    font-size: var(--moduix-table-font-size-lg, var(--moduix-text-md));
+    line-height: var(--moduix-table-line-height-lg, var(--moduix-line-height-text-md));
+  }
+
+  .root-iUez_7[data-variant="outline"] {
+    border: var(--moduix-table-border-width, var(--moduix-border-width-sm)) solid
         var(--moduix-table-border-color, var(--moduix-color-border));
-    }
   }
 
-  .-X2Dga_caption {
+  .caption-T3KfUJ {
     box-sizing: border-box;
     color: var(--moduix-table-caption-color, var(--moduix-color-muted-foreground));
     font-size: var(--moduix-table-caption-font-size, var(--moduix-text-sm));
@@ -57,55 +57,55 @@
     padding-inline: var(--moduix-table-caption-padding-x, var(--moduix-table-cell-padding-x-default));
     text-align: left;
     text-wrap: pretty;
+  }
 
-    &[data-side="top"] {
-      caption-side: top;
-      padding-block: var(--moduix-table-caption-padding-edge, var(--moduix-spacing-2))
+  .caption-T3KfUJ[data-side="top"] {
+    caption-side: top;
+    padding-block: var(--moduix-table-caption-padding-edge, var(--moduix-spacing-2))
         var(--moduix-table-caption-padding-y, var(--moduix-spacing-3));
-    }
+  }
 
-    &[data-side="bottom"] {
-      caption-side: bottom;
-      padding-block: var(--moduix-table-caption-padding-y, var(--moduix-spacing-3))
+  .caption-T3KfUJ[data-side="bottom"] {
+    caption-side: bottom;
+    padding-block: var(--moduix-table-caption-padding-y, var(--moduix-spacing-3))
         var(--moduix-table-caption-padding-edge, var(--moduix-spacing-2));
-    }
   }
 
-  .-X2Dga_row {
+  .row-vTGkhP {
     transition: var(--moduix-table-row-transition, background-color var(--moduix-transition-default));
   }
 
-  .-X2Dga_header .-X2Dga_row, .-X2Dga_body .-X2Dga_row {
+  .header-daWIeJ .row-vTGkhP, .body-JqLHru .row-vTGkhP {
     border-bottom: var(--moduix-table-border-width, var(--moduix-border-width-sm)) solid
       var(--moduix-table-border-color, var(--moduix-color-border));
   }
 
-  .-X2Dga_root[data-striped] .-X2Dga_body .-X2Dga_row:nth-child(2n):not([data-empty]) {
+  .root-iUez_7[data-striped] .body-JqLHru .row-vTGkhP:nth-child(2n):not([data-empty]) {
     background-color: var(--moduix-table-row-bg-striped, color-mix(in oklab, var(--moduix-color-muted) 35%, transparent));
   }
 
-  .-X2Dga_root[data-interactive] .-X2Dga_body .-X2Dga_row:not([data-empty]):hover {
+  .root-iUez_7[data-interactive] .body-JqLHru .row-vTGkhP:not([data-empty]):hover {
     background-color: var(--moduix-table-row-bg-hover, var(--moduix-color-muted));
   }
 
-  .-X2Dga_root[data-show-column-border] :is(.-X2Dga_columnHeader, .-X2Dga_cell):not(:last-child) {
+  .root-iUez_7[data-show-column-border] :is(.columnHeader-MBpfL1, .cell-uGo0rz):not(:last-child) {
     border-inline-end: var(--moduix-table-column-border-width, var(--moduix-table-border-width, var(--moduix-border-width-sm)))
       solid
       var(--moduix-table-column-border-color, var(--moduix-table-border-color, var(--moduix-color-border)));
   }
 
-  .-X2Dga_root[data-sticky-header] .-X2Dga_header {
+  .root-iUez_7[data-sticky-header] .header-daWIeJ {
     z-index: var(--moduix-table-sticky-header-z-index, 3);
     background-color: var(--moduix-table-sticky-header-bg, var(--moduix-table-scroll-area-bg, var(--moduix-color-card)));
     position: sticky;
     inset-block-start: 0;
   }
 
-  .-X2Dga_body .-X2Dga_row:last-child {
+  .body-JqLHru .row-vTGkhP:last-child {
     border-bottom: 0;
   }
 
-  .-X2Dga_footer {
+  .footer-wH43ty {
     border-top: var(--moduix-table-border-width, var(--moduix-border-width-sm)) solid
       var(--moduix-table-border-color, var(--moduix-color-border));
     background-color: var(--moduix-table-footer-bg, var(--moduix-color-muted));
@@ -113,52 +113,53 @@
     font-weight: var(--moduix-table-footer-font-weight, var(--moduix-weight-medium));
   }
 
-  .-X2Dga_columnHeader, .-X2Dga_cell {
+  .columnHeader-MBpfL1, .cell-uGo0rz {
     z-index: 0;
     padding-block: var(--moduix-table-cell-padding-y-default);
     padding-inline: var(--moduix-table-cell-padding-x-default);
     vertical-align: middle;
     position: relative;
+  }
 
-    &[data-sticky="start"] {
-      z-index: var(--moduix-table-sticky-column-z-index, 2);
-      background-color: var(--moduix-table-sticky-column-bg, var(--moduix-table-scroll-area-bg, var(--moduix-color-card)));
-      position: sticky;
-      inset-inline-start: 0;
-    }
+  :is(.columnHeader-MBpfL1, .cell-uGo0rz)[data-sticky="start"] {
+    z-index: var(--moduix-table-sticky-column-z-index, 2);
+    background-color: var(--moduix-table-sticky-column-bg, var(--moduix-table-scroll-area-bg, var(--moduix-color-card)));
+    position: sticky;
+    inset-inline-start: 0;
+  }
 
-    &[data-sticky="end"] {
-      z-index: var(--moduix-table-sticky-column-z-index, 2);
-      background-color: var(--moduix-table-sticky-column-bg, var(--moduix-table-scroll-area-bg, var(--moduix-color-card)));
-      position: sticky;
-      inset-inline-end: 0;
-    }
+  :is(.columnHeader-MBpfL1, .cell-uGo0rz)[data-sticky="end"] {
+    z-index: var(--moduix-table-sticky-column-z-index, 2);
+    background-color: var(--moduix-table-sticky-column-bg, var(--moduix-table-scroll-area-bg, var(--moduix-color-card)));
+    position: sticky;
+    inset-inline-end: 0;
   }
 
-  .-X2Dga_root[data-sticky-header] .-X2Dga_header .-X2Dga_columnHeader[data-sticky] {
+  .root-iUez_7[data-sticky-header] .header-daWIeJ .columnHeader-MBpfL1[data-sticky] {
     z-index: var(--moduix-table-sticky-intersection-z-index, 4);
   }
 
-  .-X2Dga_columnHeader {
+  .columnHeader-MBpfL1 {
     color: var(--moduix-table-column-header-color, var(--moduix-color-muted-foreground));
     font-weight: var(--moduix-table-column-header-font-weight, var(--moduix-weight-medium));
     text-align: inherit;
     white-space: nowrap;
   }
 
-  .-X2Dga_cell {
+  .cell-uGo0rz {
     color: inherit;
   }
 
-  .-X2Dga_numeric {
+  .numeric-Epyrfq {
     text-align: end;
     white-space: nowrap;
     font-variant-numeric: tabular-nums;
   }
 
-  .-X2Dga_empty {
+  .empty-dLhlhx {
     padding-block: var(--moduix-table-empty-padding-y, var(--moduix-table-empty-padding-y-default));
     color: var(--moduix-table-empty-color, var(--moduix-color-muted-foreground));
     text-align: center;
   }
 }
+

package/dist/components/table/index.d.ts

@@ -0,0 +1 @@
+export { Table } from './Table.js';

package/dist/components/table/index.js

@@ -0,0 +1 @@
+export { Table } from "./Table.js";

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

@@ -1,21 +1,19 @@
-import { Tabs, useTabs } from "@ark-ui/react/tabs";
-
-//#region src/components/tabs/Tabs.d.ts
+import { Tabs as TabsPrimitive, useTabs, useTabsContext } from '@ark-ui/react/tabs';
 type TabsVariant = 'default' | 'line';
-declare const Tabs$1: import("react").ForwardRefExoticComponent<Omit<Tabs.RootProps & import("react").RefAttributes<HTMLDivElement> & {
-  variant?: TabsVariant;
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<Tabs.RootProps & import("react").RefAttributes<HTMLDivElement> & {
-    variant?: TabsVariant;
-  }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  RootProvider: import("react").ForwardRefExoticComponent<Omit<Tabs.RootProviderProps & import("react").RefAttributes<HTMLDivElement> & {
+declare const Tabs: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement> & {
     variant?: TabsVariant;
-  }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  List: import("react").ForwardRefExoticComponent<Omit<Tabs.ListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Trigger: import("react").ForwardRefExoticComponent<Omit<Tabs.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Indicator: import("react").ForwardRefExoticComponent<Omit<Tabs.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Content: import("react").ForwardRefExoticComponent<Omit<Tabs.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  useTabs: (props?: import("@ark-ui/react/tabs").UseTabsProps) => import("@ark-ui/react/tabs").UseTabsReturn;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement> & {
+        variant?: TabsVariant;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement> & {
+        variant?: TabsVariant;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: TabsPrimitive.ContextProps) => import("react").ReactNode;
+    List: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.ListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    useTabs: (props?: import("@ark-ui/react/tabs").UseTabsProps) => import("@ark-ui/react/tabs").UseTabsReturn;
 };
-//#endregion
-export { Tabs$1 as Tabs, useTabs };
+export { Tabs, useTabs, useTabsContext };

package/dist/components/tabs/Tabs.js

@@ -1,68 +1,70 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import Tabs_module_default from "./Tabs.module.js";
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Tabs, useTabs, useTabsContext } from "@ark-ui/react/tabs";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-import { Tabs, useTabs } from "@ark-ui/react/tabs";
-//#region src/components/tabs/Tabs.tsx
-const TabsRoot = forwardRef(function TabsRoot({ className, variant = "default", ...props }, ref) {
-	return /* @__PURE__ */ jsx(Tabs.Root, {
-		ref,
-		"data-slot": "tabs-root",
-		"data-variant": variant,
-		className: clsx(Tabs_module_default.root, normalizeClassName(className)),
-		...props
-	});
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Tabs_module from "./Tabs.module.js";
+const Tabs_TabsRoot = /*#__PURE__*/ forwardRef(function({ className, orientation, variant = 'default', ...props }, ref) {
+    const resolvedVariant = 'vertical' === orientation ? 'default' : variant;
+    return /*#__PURE__*/ jsx(Tabs.Root, {
+        ref: ref,
+        "data-slot": "tabs-root",
+        "data-variant": resolvedVariant,
+        className: clsx(Tabs_module.root, normalizeClassName(className)),
+        orientation: orientation,
+        ...props
+    });
 });
-const TabsRootProvider = forwardRef(function TabsRootProvider({ className, variant = "default", ...props }, ref) {
-	return /* @__PURE__ */ jsx(Tabs.RootProvider, {
-		ref,
-		"data-slot": "tabs-root-provider",
-		"data-variant": variant,
-		className: clsx(Tabs_module_default.root, normalizeClassName(className)),
-		...props
-	});
+const Tabs_TabsRootProvider = /*#__PURE__*/ forwardRef(function({ className, variant = 'default', ...props }, ref) {
+    return /*#__PURE__*/ jsx(Tabs.RootProvider, {
+        ref: ref,
+        "data-slot": "tabs-root-provider",
+        "data-variant": variant,
+        className: clsx(Tabs_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const TabsList = forwardRef(function TabsList({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Tabs.List, {
-		ref,
-		"data-slot": "tabs-list",
-		className: clsx(Tabs_module_default.list, normalizeClassName(className)),
-		...props
-	});
+const Tabs_TabsList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Tabs.List, {
+        ref: ref,
+        "data-slot": "tabs-list",
+        className: clsx(Tabs_module.list, normalizeClassName(className)),
+        ...props
+    });
 });
-const TabsTrigger = forwardRef(function TabsTrigger({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Tabs.Trigger, {
-		ref,
-		"data-slot": "tabs-trigger",
-		className: clsx(Tabs_module_default.trigger, normalizeClassName(className)),
-		...props
-	});
+const Tabs_TabsTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Tabs.Trigger, {
+        ref: ref,
+        "data-slot": "tabs-trigger",
+        className: clsx(Tabs_module.trigger, normalizeClassName(className)),
+        ...props
+    });
 });
-const TabsIndicator = forwardRef(function TabsIndicator({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Tabs.Indicator, {
-		ref,
-		"data-slot": "tabs-indicator",
-		className: clsx(Tabs_module_default.indicator, normalizeClassName(className)),
-		...props
-	});
+const Tabs_TabsIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Tabs.Indicator, {
+        ref: ref,
+        "data-slot": "tabs-indicator",
+        className: clsx(Tabs_module.indicator, normalizeClassName(className)),
+        ...props
+    });
 });
-const TabsContent = forwardRef(function TabsContent({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Tabs.Content, {
-		ref,
-		"data-slot": "tabs-content",
-		className: clsx(Tabs_module_default.content, normalizeClassName(className)),
-		...props
-	});
+const Tabs_TabsContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Tabs.Content, {
+        ref: ref,
+        "data-slot": "tabs-content",
+        className: clsx(Tabs_module.content, normalizeClassName(className)),
+        ...props
+    });
 });
-const Tabs$1 = Object.assign(TabsRoot, {
-	Root: TabsRoot,
-	RootProvider: TabsRootProvider,
-	List: TabsList,
-	Trigger: TabsTrigger,
-	Indicator: TabsIndicator,
-	Content: TabsContent,
-	useTabs
+const Tabs_Tabs = Object.assign(Tabs_TabsRoot, {
+    Root: Tabs_TabsRoot,
+    RootProvider: Tabs_TabsRootProvider,
+    Context: Tabs.Context,
+    List: Tabs_TabsList,
+    Trigger: Tabs_TabsTrigger,
+    Indicator: Tabs_TabsIndicator,
+    Content: Tabs_TabsContent,
+    useTabs: useTabs
 });
-//#endregion
-export { Tabs$1 as Tabs, useTabs };
+export { Tabs_Tabs as Tabs, useTabs, useTabsContext };

package/dist/components/tabs/Tabs.module.js

@@ -1,11 +1,9 @@
-import './Tabs.css';
-//#region src/components/tabs/Tabs.module.css
-var Tabs_module_default = {
-	"content": "ostTjG_content",
-	"indicator": "ostTjG_indicator",
-	"list": "ostTjG_list",
-	"root": "ostTjG_root",
-	"trigger": "ostTjG_trigger"
+import "./Tabs_module.css";
+const Tabs_module = {
+    root: "root-r9cKMR",
+    list: "list-HWuixw",
+    trigger: "trigger-AcFFlC",
+    indicator: "indicator-Eq3gMQ",
+    content: "content-LlFLnc"
 };
-//#endregion
-export { Tabs_module_default as default };
+export default Tabs_module;

package/dist/components/tabs/{Tabs.css → Tabs_module.css}

@@ -1,23 +1,25 @@
 @layer moduix.components {
-  .ostTjG_root {
+  .root-r9cKMR {
     box-sizing: border-box;
+    inline-size: 100%;
     gap: var(--moduix-tabs-gap, var(--moduix-spacing-3));
     min-width: 0;
     color: var(--moduix-tabs-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: flex;
+  }
 
-    &[data-orientation="vertical"] {
-      flex-direction: row;
-      align-items: stretch;
-    }
+  .root-r9cKMR[data-orientation="vertical"] {
+    flex-direction: row;
+    align-items: stretch;
   }
 
-  .ostTjG_list {
+  .list-HWuixw {
     box-sizing: border-box;
     z-index: 0;
     align-items: stretch;
     gap: var(--moduix-tabs-list-gap, var(--moduix-spacing-1));
+    width: -moz-fit-content;
     width: fit-content;
     max-width: 100%;
     padding: var(--moduix-tabs-list-padding-y, var(--moduix-tabs-list-padding, var(--moduix-spacing-1)))
@@ -28,28 +30,34 @@
     background-color: var(--moduix-tabs-list-bg, var(--moduix-color-muted));
     display: inline-flex;
     position: relative;
+  }
 
-    &[data-orientation="vertical"] {
-      width: var(--moduix-tabs-vertical-list-width, 12rem);
-      min-width: var(--moduix-tabs-vertical-list-width, 12rem);
-      flex-direction: column;
-    }
+  .root-r9cKMR:not([data-orientation="vertical"]) .list-HWuixw {
+    overflow-x: auto;
+  }
 
-    .ostTjG_root[data-variant="line"] & {
-      border-width: 0 0 var(--moduix-tabs-list-border-width, var(--moduix-border-width-sm));
-      background-color: #0000;
-      border-radius: 0;
-      width: 100%;
-      padding-inline: 0;
-    }
+  .list-HWuixw[data-orientation="vertical"] {
+    inline-size: var(--moduix-tabs-vertical-list-width, 12rem);
+    min-inline-size: var(--moduix-tabs-vertical-list-width, 12rem);
+    flex-direction: column;
+  }
 
-    .ostTjG_root[data-orientation="vertical"][data-variant="line"] & {
-      width: var(--moduix-tabs-vertical-list-width, 12rem);
-      border-width: 0 var(--moduix-tabs-list-border-width, var(--moduix-border-width-sm)) 0 0;
+  @media (max-width: 30rem) {
+    .list-HWuixw[data-orientation="vertical"] {
+      inline-size: min(var(--moduix-tabs-vertical-list-width, 12rem), 40%);
+      min-inline-size: 0;
     }
   }
 
-  .ostTjG_trigger {
+  .root-r9cKMR[data-variant="line"]:not([data-orientation="vertical"]) .list-HWuixw {
+    border-width: 0 0 var(--moduix-tabs-list-border-width, var(--moduix-border-width-sm));
+    background-color: #0000;
+    border-radius: 0;
+    width: 100%;
+    padding-inline: 0;
+  }
+
+  .trigger-AcFFlC {
     box-sizing: border-box;
     z-index: 1;
     justify-content: center;
@@ -64,6 +72,7 @@
     font-size: var(--moduix-tabs-tab-font-size, var(--moduix-text-sm));
     font-weight: var(--moduix-tabs-tab-font-weight, var(--moduix-weight-medium));
     line-height: var(--moduix-tabs-tab-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
     user-select: none;
     white-space: nowrap;
     cursor: pointer;
@@ -76,44 +85,42 @@
     text-decoration: none;
     display: inline-flex;
     position: relative;
+  }
 
-    &[data-selected] {
-      color: var(--moduix-tabs-tab-color-active, var(--moduix-color-foreground));
-    }
+  .trigger-AcFFlC[data-selected] {
+    color: var(--moduix-tabs-tab-color-active, var(--moduix-color-foreground));
+  }
 
-    @media (hover: hover) {
-      &:hover {
-        color: var(--moduix-tabs-tab-color-hover, var(--moduix-tabs-tab-color-active, var(--moduix-color-foreground)));
-      }
+  @media (hover: hover) {
+    .trigger-AcFFlC:hover {
+      color: var(--moduix-tabs-tab-color-hover, var(--moduix-tabs-tab-color-active, var(--moduix-color-foreground)));
     }
+  }
 
-    &:focus-visible {
-      &:before {
-        content: "";
-        border-radius: inherit;
-        outline: var(--moduix-tabs-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+  .trigger-AcFFlC:focus-visible:before {
+    content: "";
+    border-radius: inherit;
+    outline: var(--moduix-tabs-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
           solid var(--moduix-tabs-focus-ring-color, var(--moduix-color-ring));
-        outline-offset: var(--moduix-tabs-focus-ring-offset, 0);
-        position: absolute;
-        inset: 0;
-      }
-    }
+    outline-offset: var(--moduix-tabs-focus-ring-offset, 0);
+    position: absolute;
+    inset: 0;
+  }
 
-    &[disabled], &[data-disabled] {
-      cursor: default;
-      opacity: var(--moduix-tabs-tab-disabled-opacity, var(--moduix-opacity-disabled));
-      pointer-events: none;
-    }
+  .trigger-AcFFlC[disabled], .trigger-AcFFlC[data-disabled] {
+    cursor: default;
+    opacity: var(--moduix-tabs-tab-disabled-opacity, var(--moduix-opacity-disabled));
+    pointer-events: none;
+  }
 
-    & > svg {
-      width: var(--moduix-tabs-tab-icon-size, var(--moduix-spacing-4));
-      height: var(--moduix-tabs-tab-icon-size, var(--moduix-spacing-4));
-      color: var(--moduix-tabs-tab-icon-color, currentColor);
-      flex-shrink: 0;
-    }
+  .trigger-AcFFlC > svg {
+    width: var(--moduix-tabs-tab-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-tabs-tab-icon-size, var(--moduix-spacing-4));
+    color: var(--moduix-tabs-tab-icon-color, currentColor);
+    flex-shrink: 0;
   }
 
-  .ostTjG_indicator {
+  .indicator-Eq3gMQ {
     z-index: 0;
     top: 50%;
     left: var(--left, 0);
@@ -128,40 +135,33 @@
       left var(--moduix-tabs-indicator-transition, var(--moduix-transition-default));
     position: absolute;
     translate: 0 -50%;
+  }
 
-    .ostTjG_root[data-variant="line"] & {
-      height: var(--moduix-tabs-line-indicator-size, var(--moduix-spacing-0-5));
-      border-radius: var(--moduix-tabs-line-indicator-radius, var(--moduix-radius-full));
-      background-color: var(--moduix-tabs-line-indicator-bg, var(--moduix-tabs-tab-color-active, var(--moduix-color-foreground)));
-      box-shadow: none;
-      transition: width var(--moduix-tabs-line-indicator-transition, var(--moduix-transition-default)),
+  .root-r9cKMR[data-variant="line"]:not([data-orientation="vertical"]) .indicator-Eq3gMQ {
+    height: var(--moduix-tabs-line-indicator-size, var(--moduix-spacing-0-5));
+    border-radius: var(--moduix-tabs-line-indicator-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-tabs-line-indicator-bg, var(--moduix-tabs-tab-color-active, var(--moduix-color-foreground)));
+    box-shadow: none;
+    transition: width var(--moduix-tabs-line-indicator-transition, var(--moduix-transition-default)),
         height var(--moduix-tabs-line-indicator-transition, var(--moduix-transition-default)),
         top var(--moduix-tabs-line-indicator-transition, var(--moduix-transition-default)),
         left var(--moduix-tabs-line-indicator-transition, var(--moduix-transition-default));
-      top: auto;
-      bottom: 0;
-      translate: none;
-    }
+    top: auto;
+    bottom: 0;
+    translate: none;
+  }
 
-    &[data-orientation="vertical"] {
-      top: var(--top, 0);
-      width: calc(100% -
+  .indicator-Eq3gMQ[data-orientation="vertical"] {
+    top: var(--top, 0);
+    width: calc(100% -
           (var(--moduix-tabs-list-padding-x, var(--moduix-tabs-list-padding, var(--moduix-spacing-1))) *
             2));
-      height: var(--height, 0);
-      left: 50%;
-      translate: -50%;
-
-      .ostTjG_root[data-variant="line"] & {
-        width: var(--moduix-tabs-line-indicator-size, var(--moduix-spacing-0-5));
-        bottom: auto;
-        left: 0;
-        translate: none;
-      }
-    }
+    height: var(--height, 0);
+    left: 50%;
+    translate: -50%;
   }
 
-  .ostTjG_content {
+  .content-LlFLnc {
     box-sizing: border-box;
     border: var(--moduix-tabs-border-width, var(--moduix-border-width-sm)) solid
       var(--moduix-tabs-border-color, var(--moduix-color-border));
@@ -175,16 +175,17 @@
     outline: 0;
     flex: 1;
     margin: 0;
+  }
 
-    &:focus-visible {
-      outline: var(--moduix-tabs-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+  .content-LlFLnc:focus-visible {
+    outline: var(--moduix-tabs-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
         solid var(--moduix-tabs-focus-ring-color, var(--moduix-color-ring));
-      outline-offset: var(--moduix-tabs-panel-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
-      border-radius: inherit;
-    }
+    outline-offset: var(--moduix-tabs-panel-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
+    border-radius: inherit;
+  }
 
-    &[hidden]:not([hidden="until-found"]) {
-      display: none;
-    }
+  .content-LlFLnc[hidden]:not([hidden="until-found"]) {
+    display: none;
   }
 }
+