@moduix/react 1.1.0 → 2.0.0

package/dist/components/swap/Swap.css

@@ -0,0 +1,45 @@
+@layer ui.components {
+  .jqWswG_root {
+    vertical-align: middle;
+    grid-template-areas: "jqWswG_swap";
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .jqWswG_indicator {
+    color: inherit;
+    grid-area: jqWswG_swap;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+
+    &[data-state="open"] {
+      animation: jqWswG_swap-enter var(--swap-transition, var(--transition-default));
+    }
+
+    &[data-state="closed"] {
+      animation: jqWswG_swap-exit var(--swap-transition, var(--transition-default));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .jqWswG_indicator[data-state] {
+      animation-duration: 1ms;
+      animation-delay: 0s;
+    }
+  }
+
+  @keyframes jqWswG_swap-enter {
+    from {
+      opacity: var(--swap-enter-starting-opacity, 0);
+      transform: scale(var(--swap-enter-starting-scale, .92));
+    }
+  }
+
+  @keyframes jqWswG_swap-exit {
+    to {
+      opacity: var(--swap-exit-ending-opacity, 0);
+      transform: scale(var(--swap-exit-ending-scale, .92));
+    }
+  }
+}

package/dist/components/swap/Swap.d.ts

@@ -0,0 +1,11 @@
+import { Swap, useSwapContext } from "@ark-ui/react/swap";
+
+//#region src/components/swap/Swap.d.ts
+declare const Swap$1: import("react").ForwardRefExoticComponent<Omit<Swap.RootProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<Swap.RootProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Omit<Swap.RootProviderProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  Indicator: import("react").ForwardRefExoticComponent<Omit<Swap.IndicatorProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  useSwap: (props?: import("@ark-ui/react/swap").UseSwapProps) => import("@ark-ui/react/swap").UseSwapReturn;
+};
+//#endregion
+export { Swap$1 as Swap, useSwapContext };

package/dist/components/swap/Swap.js

@@ -0,0 +1,39 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Swap_module_default from "./Swap.module.js";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Swap, useSwap, useSwapContext } from "@ark-ui/react/swap";
+//#region src/components/swap/Swap.tsx
+const SwapRoot = forwardRef(function SwapRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Swap.Root, {
+		ref,
+		"data-slot": "swap-root",
+		className: clsx(Swap_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const SwapRootProvider = forwardRef(function SwapRootProvider({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Swap.RootProvider, {
+		ref,
+		"data-slot": "swap-root-provider",
+		className: clsx(Swap_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const SwapIndicator = forwardRef(function SwapIndicator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Swap.Indicator, {
+		ref,
+		"data-slot": "swap-indicator",
+		className: clsx(Swap_module_default.indicator, normalizeClassName(className)),
+		...props
+	});
+});
+const Swap$1 = Object.assign(SwapRoot, {
+	Root: SwapRoot,
+	RootProvider: SwapRootProvider,
+	Indicator: SwapIndicator,
+	useSwap
+});
+//#endregion
+export { Swap$1 as Swap, useSwapContext };

package/dist/components/swap/Swap.module.js

@@ -0,0 +1,11 @@
+import './Swap.css';
+//#region src/components/swap/Swap.module.css
+var Swap_module_default = {
+	"indicator": "jqWswG_indicator",
+	"root": "jqWswG_root",
+	"swap": "jqWswG_swap",
+	"swap-enter": "jqWswG_swap-enter",
+	"swap-exit": "jqWswG_swap-exit"
+};
+//#endregion
+export { Swap_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Swap, useSwapContext } from "./Swap.js";
+export { Swap, useSwapContext };

package/dist/components/switch/Switch.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .wDUCnq_root {
+  .PUgkqa_root {
     align-items: center;
     gap: var(--switch-gap, var(--spacing-2));
     vertical-align: middle;
@@ -16,7 +16,7 @@
     }
   }
 
-  .wDUCnq_control {
+  .PUgkqa_control {
     box-sizing: border-box;
     width: var(--switch-width, 3rem);
     height: var(--switch-height, 1.5rem);
@@ -51,47 +51,47 @@
     }
 
     @media (hover: hover) {
-      &[data-state="unchecked"][data-hover]:not([data-readonly]) {
+      &[data-state="unchecked"][data-hover]:not([data-readonly], [data-disabled]) {
         background-color: var(--switch-bg-hover, var(--color-accent));
       }
 
-      &[data-state="checked"][data-hover]:not([data-readonly]) {
+      &[data-state="checked"][data-hover]:not([data-readonly], [data-disabled]) {
         background-color: var(--switch-bg-checked-hover, var(--switch-bg-checked, var(--color-primary)));
       }
     }
   }
 
-  .wDUCnq_root[data-size="xs"] .wDUCnq_control {
+  .PUgkqa_root[data-size="xs"] .PUgkqa_control {
     --switch-width: var(--switch-width-xs, 1.75rem);
     --switch-height: var(--switch-height-xs, 1rem);
     --switch-thumb-size: var(--switch-thumb-size-xs, .75rem);
   }
 
-  .wDUCnq_root[data-size="sm"] .wDUCnq_control {
+  .PUgkqa_root[data-size="sm"] .PUgkqa_control {
     --switch-width: var(--switch-width-sm, 2.25rem);
     --switch-height: var(--switch-height-sm, 1.25rem);
     --switch-thumb-size: var(--switch-thumb-size-sm, 1rem);
   }
 
-  .wDUCnq_root[data-size="md"] .wDUCnq_control {
+  .PUgkqa_root[data-size="md"] .PUgkqa_control {
     --switch-width: var(--switch-width-md, 2.75rem);
     --switch-height: var(--switch-height-md, 1.5rem);
     --switch-thumb-size: var(--switch-thumb-size-md, 1.25rem);
   }
 
-  .wDUCnq_root[data-size="lg"] .wDUCnq_control {
+  .PUgkqa_root[data-size="lg"] .PUgkqa_control {
     --switch-width: var(--switch-width-lg, 3.25rem);
     --switch-height: var(--switch-height-lg, 1.75rem);
     --switch-thumb-size: var(--switch-thumb-size-lg, 1.5rem);
   }
 
-  .wDUCnq_root[data-size="xl"] .wDUCnq_control {
+  .PUgkqa_root[data-size="xl"] .PUgkqa_control {
     --switch-width: var(--switch-width-xl, 3.75rem);
     --switch-height: var(--switch-height-xl, 2rem);
     --switch-thumb-size: var(--switch-thumb-size-xl, 1.75rem);
   }
 
-  .wDUCnq_thumb {
+  .PUgkqa_thumb {
     width: var(--switch-thumb-size, 1.25rem);
     height: var(--switch-thumb-size, 1.25rem);
     border: var(--switch-thumb-border-width, 0) solid var(--switch-thumb-border-color, transparent);
@@ -120,7 +120,7 @@
     }
   }
 
-  .wDUCnq_label {
+  .PUgkqa_label {
     color: var(--switch-label-color, var(--color-foreground));
     font-size: var(--switch-label-font-size, var(--text-sm));
     font-weight: var(--switch-label-font-weight, var(--weight-medium));

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

@@ -1,5 +1,5 @@
-import { ComponentProps } from "react";
-import { Switch } from "@ark-ui/react/switch";
+import { ComponentProps, ReactNode } from "react";
+import { Switch, useSwitch, useSwitchContext } from "@ark-ui/react/switch";
 
 //#region src/components/switch/Switch.d.ts
 type SwitchSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -15,7 +15,7 @@ declare const Switch$1: import("react").ForwardRefExoticComponent<Omit<SwitchRoo
   Control: import("react").ForwardRefExoticComponent<Omit<Switch.ControlProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   Thumb: import("react").ForwardRefExoticComponent<Omit<Switch.ThumbProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   Label: import("react").ForwardRefExoticComponent<Omit<Switch.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  HiddenInput: import("react").ForwardRefExoticComponent<Omit<Switch.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  Context: (props: Switch.ContextProps) => ReactNode;
 };
 //#endregion
-export { Switch$1 as Switch, type SwitchRootProps, type SwitchRootProviderProps, type SwitchSize };
+export { Switch$1 as Switch, type SwitchRootProps, type SwitchRootProviderProps, type SwitchSize, useSwitch, useSwitchContext };

package/dist/components/switch/Switch.js

@@ -1,26 +1,30 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Switch_module_default from "./Switch.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { Switch } from "@ark-ui/react/switch";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Switch, SwitchContext, useSwitch, useSwitchContext } from "@ark-ui/react/switch";
 //#region src/components/switch/Switch.tsx
-const SwitchRoot = forwardRef(function SwitchRoot({ className, size = "md", ...props }, ref) {
+const SwitchRoot = forwardRef(function SwitchRoot({ asChild, children, className, size = "md", ...props }, ref) {
 	return /* @__PURE__ */ jsx(Switch.Root, {
 		ref,
+		asChild,
 		"data-slot": "switch-root",
 		"data-size": size,
 		className: clsx(Switch_module_default.root, normalizeClassName(className)),
-		...props
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
-const SwitchRootProvider = forwardRef(function SwitchRootProvider({ className, size = "md", ...props }, ref) {
+const SwitchRootProvider = forwardRef(function SwitchRootProvider({ asChild, children, className, size = "md", ...props }, ref) {
 	return /* @__PURE__ */ jsx(Switch.RootProvider, {
 		ref,
+		asChild,
 		"data-slot": "switch-root-provider",
 		"data-size": size,
 		className: clsx(Switch_module_default.root, normalizeClassName(className)),
-		...props
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
 const SwitchControl = forwardRef(function SwitchControl({ className, children, ...props }, ref) {
@@ -48,20 +52,19 @@ const SwitchLabel = forwardRef(function SwitchLabel({ className, ...props }, ref
 		...props
 	});
 });
-const SwitchHiddenInput = forwardRef(function SwitchHiddenInput(props, ref) {
-	return /* @__PURE__ */ jsx(Switch.HiddenInput, {
-		ref,
-		"data-slot": "switch-hidden-input",
-		...props
-	});
-});
+function withHiddenInput(children, asChild) {
+	const hiddenInput = /* @__PURE__ */ jsx(Switch.HiddenInput, { "data-slot": "switch-hidden-input" });
+	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInput] });
+	const child = Children.only(children);
+	return cloneElement(child, {}, child.props.children, hiddenInput);
+}
 const Switch$1 = Object.assign(SwitchRoot, {
 	Root: SwitchRoot,
 	RootProvider: SwitchRootProvider,
 	Control: SwitchControl,
 	Thumb: SwitchThumb,
 	Label: SwitchLabel,
-	HiddenInput: SwitchHiddenInput
+	Context: SwitchContext
 });
 //#endregion
-export { Switch$1 as Switch };
+export { Switch$1 as Switch, useSwitch, useSwitchContext };

package/dist/components/switch/Switch.module.js

@@ -1,10 +1,10 @@
 import './Switch.css';
 //#region src/components/switch/Switch.module.css
 var Switch_module_default = {
-	"control": "wDUCnq_control",
-	"label": "wDUCnq_label",
-	"root": "wDUCnq_root",
-	"thumb": "wDUCnq_thumb"
+	"control": "PUgkqa_control",
+	"label": "PUgkqa_label",
+	"root": "PUgkqa_root",
+	"thumb": "PUgkqa_thumb"
 };
 //#endregion
 export { Switch_module_default as default };

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

@@ -1,2 +1,2 @@
-import { Switch, SwitchRootProps, SwitchRootProviderProps, SwitchSize } from "./Switch.js";
-export { Switch, type SwitchRootProps, type SwitchRootProviderProps, type SwitchSize };
+import { Switch, SwitchRootProps, SwitchRootProviderProps, SwitchSize, useSwitch, useSwitchContext } from "./Switch.js";
+export { Switch, type SwitchRootProps, type SwitchRootProviderProps, type SwitchSize, useSwitch, useSwitchContext };

package/dist/components/table/Table.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .YeBawq_scrollArea {
+  .-X2Dga_scrollArea {
     box-sizing: border-box;
     isolation: isolate;
     border: var(--table-scroll-area-border-width, var(--table-border-width, var(--border-width-sm)))
@@ -13,7 +13,7 @@
     overflow-x: auto;
   }
 
-  .YeBawq_root {
+  .-X2Dga_root {
     --table-cell-padding-x-default: var(--table-cell-padding-x, var(--spacing-4));
     --table-cell-padding-y-default: var(--table-cell-padding-y, var(--spacing-3));
     --table-empty-padding-y-default: calc(var(--table-cell-padding-y-default) * 2);
@@ -48,7 +48,7 @@
     }
   }
 
-  .YeBawq_caption {
+  .-X2Dga_caption {
     box-sizing: border-box;
     color: var(--table-caption-color, var(--color-muted-foreground));
     font-size: var(--table-caption-font-size, var(--text-sm));
@@ -70,40 +70,40 @@
     }
   }
 
-  .YeBawq_row {
+  .-X2Dga_row {
     transition: var(--table-row-transition, background-color var(--transition-default));
   }
 
-  .YeBawq_header .YeBawq_row, .YeBawq_body .YeBawq_row {
+  .-X2Dga_header .-X2Dga_row, .-X2Dga_body .-X2Dga_row {
     border-bottom: var(--table-border-width, var(--border-width-sm)) solid
       var(--table-border-color, var(--color-border));
   }
 
-  .YeBawq_root[data-striped] .YeBawq_body .YeBawq_row:nth-child(2n):not(.YeBawq_emptyRow) {
+  .-X2Dga_root[data-striped] .-X2Dga_body .-X2Dga_row:nth-child(2n):not([data-empty]) {
     background-color: var(--table-row-bg-striped, color-mix(in oklab, var(--color-muted) 35%, transparent));
   }
 
-  .YeBawq_root[data-interactive] .YeBawq_body .YeBawq_row:not(.YeBawq_emptyRow):hover {
+  .-X2Dga_root[data-interactive] .-X2Dga_body .-X2Dga_row:not([data-empty]):hover {
     background-color: var(--table-row-bg-hover, var(--color-muted));
   }
 
-  .YeBawq_root[data-show-column-border] :is(.YeBawq_columnHeader, .YeBawq_cell):not(:last-child) {
+  .-X2Dga_root[data-show-column-border] :is(.-X2Dga_columnHeader, .-X2Dga_cell):not(:last-child) {
     border-inline-end: var(--table-column-border-width, var(--table-border-width, var(--border-width-sm)))
       solid var(--table-column-border-color, var(--table-border-color, var(--color-border)));
   }
 
-  .YeBawq_root[data-sticky-header] .YeBawq_header {
+  .-X2Dga_root[data-sticky-header] .-X2Dga_header {
     z-index: var(--table-sticky-header-z-index, 3);
     background-color: var(--table-sticky-header-bg, var(--table-scroll-area-bg, var(--color-card)));
     position: sticky;
     inset-block-start: 0;
   }
 
-  .YeBawq_body .YeBawq_row:last-child {
+  .-X2Dga_body .-X2Dga_row:last-child {
     border-bottom: 0;
   }
 
-  .YeBawq_footer {
+  .-X2Dga_footer {
     border-top: var(--table-border-width, var(--border-width-sm)) solid
       var(--table-border-color, var(--color-border));
     background-color: var(--table-footer-bg, var(--color-muted));
@@ -111,7 +111,7 @@
     font-weight: var(--table-footer-font-weight, var(--weight-medium));
   }
 
-  .YeBawq_columnHeader, .YeBawq_cell {
+  .-X2Dga_columnHeader, .-X2Dga_cell {
     z-index: 0;
     padding-block: var(--table-cell-padding-y-default);
     padding-inline: var(--table-cell-padding-x-default);
@@ -133,28 +133,28 @@
     }
   }
 
-  .YeBawq_root[data-sticky-header] .YeBawq_header .YeBawq_columnHeader[data-sticky] {
+  .-X2Dga_root[data-sticky-header] .-X2Dga_header .-X2Dga_columnHeader[data-sticky] {
     z-index: var(--table-sticky-intersection-z-index, 4);
   }
 
-  .YeBawq_columnHeader {
+  .-X2Dga_columnHeader {
     color: var(--table-column-header-color, var(--color-muted-foreground));
     font-weight: var(--table-column-header-font-weight, var(--weight-medium));
     text-align: inherit;
     white-space: nowrap;
   }
 
-  .YeBawq_cell {
+  .-X2Dga_cell {
     color: inherit;
   }
 
-  .YeBawq_numeric {
-    text-align: right;
+  .-X2Dga_numeric {
+    text-align: end;
     white-space: nowrap;
     font-variant-numeric: tabular-nums;
   }
 
-  .YeBawq_empty {
+  .-X2Dga_empty {
     padding-block: var(--table-empty-padding-y, var(--table-empty-padding-y-default));
     color: var(--table-empty-color, var(--color-muted-foreground));
     text-align: center;

package/dist/components/table/Table.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Table_module_default from "./Table.module.js";
-import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/table/Table.tsx
 const TableRoot = forwardRef(function TableRoot({ asChild, className, interactive = false, showColumnBorder = false, size = "md", stickyHeader = false, striped = false, variant = "line", ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.table, {
@@ -140,8 +140,9 @@ const TableEmpty = forwardRef(function TableEmpty({ asChild, children = "No resu
 	return /* @__PURE__ */ jsx(ark.tr, {
 		"data-scope": "table",
 		"data-part": "row",
+		"data-empty": true,
 		"data-slot": "table-row",
-		className: clsx(Table_module_default.row, Table_module_default.emptyRow),
+		className: Table_module_default.row,
 		children: /* @__PURE__ */ jsx(ark.td, {
 			ref,
 			asChild,

package/dist/components/table/Table.module.js

@@ -1,18 +1,17 @@
 import './Table.css';
 //#region src/components/table/Table.module.css
 var Table_module_default = {
-	"body": "YeBawq_body",
-	"caption": "YeBawq_caption",
-	"cell": "YeBawq_cell",
-	"columnHeader": "YeBawq_columnHeader",
-	"empty": "YeBawq_empty",
-	"emptyRow": "YeBawq_emptyRow",
-	"footer": "YeBawq_footer",
-	"header": "YeBawq_header",
-	"numeric": "YeBawq_numeric",
-	"root": "YeBawq_root",
-	"row": "YeBawq_row",
-	"scrollArea": "YeBawq_scrollArea"
+	"body": "-X2Dga_body",
+	"caption": "-X2Dga_caption",
+	"cell": "-X2Dga_cell",
+	"columnHeader": "-X2Dga_columnHeader",
+	"empty": "-X2Dga_empty",
+	"footer": "-X2Dga_footer",
+	"header": "-X2Dga_header",
+	"numeric": "-X2Dga_numeric",
+	"root": "-X2Dga_root",
+	"row": "-X2Dga_row",
+	"scrollArea": "-X2Dga_scrollArea"
 };
 //#endregion
 export { Table_module_default as default };

package/dist/components/tabs/Tabs.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .Peepwa_root {
+  .ostTjG_root {
     box-sizing: border-box;
     gap: var(--tabs-gap, .75rem);
     min-width: 0;
@@ -13,7 +13,7 @@
     }
   }
 
-  .Peepwa_list {
+  .ostTjG_list {
     box-sizing: border-box;
     z-index: 0;
     align-items: stretch;
@@ -35,7 +35,7 @@
       flex-direction: column;
     }
 
-    .Peepwa_root[data-variant="line"] & {
+    .ostTjG_root[data-variant="line"] & {
       border-width: 0 0 var(--tabs-list-border-width, var(--border-width-sm));
       background-color: #0000;
       border-radius: 0;
@@ -43,13 +43,13 @@
       padding-inline: 0;
     }
 
-    .Peepwa_root[data-orientation="vertical"][data-variant="line"] & {
+    .ostTjG_root[data-orientation="vertical"][data-variant="line"] & {
       width: var(--tabs-vertical-list-width, 12rem);
       border-width: 0 var(--tabs-list-border-width, var(--border-width-sm)) 0 0;
     }
   }
 
-  .Peepwa_trigger {
+  .ostTjG_trigger {
     box-sizing: border-box;
     z-index: 1;
     justify-content: center;
@@ -113,8 +113,10 @@
     }
   }
 
-  .Peepwa_indicator {
+  .ostTjG_indicator {
     z-index: 0;
+    top: 50%;
+    left: var(--left, 0);
     width: var(--width, 0);
     height: var(--tabs-indicator-size, 2rem);
     border-radius: var(--tabs-indicator-radius, var(--radius-md));
@@ -125,10 +127,9 @@
       top var(--tabs-indicator-transition, var(--transition-default)),
       left var(--tabs-indicator-transition, var(--transition-default));
     position: absolute;
-    top: 50%;
     translate: 0 -50%;
 
-    .Peepwa_root[data-variant="line"] & {
+    .ostTjG_root[data-variant="line"] & {
       height: var(--tabs-line-indicator-size, 2px);
       border-radius: var(--tabs-line-indicator-radius, var(--radius-full));
       background-color: var(--tabs-line-indicator-bg, var(--tabs-tab-color-active, var(--color-foreground)));
@@ -143,12 +144,13 @@
     }
 
     &[data-orientation="vertical"] {
+      top: var(--top, 0);
       width: calc(100% - (var(--tabs-list-padding-x, var(--tabs-list-padding, .25rem)) * 2));
       height: var(--height, 0);
       left: 50%;
       translate: -50%;
 
-      .Peepwa_root[data-variant="line"] & {
+      .ostTjG_root[data-variant="line"] & {
         width: var(--tabs-line-indicator-size, 2px);
         bottom: auto;
         left: 0;
@@ -157,7 +159,7 @@
     }
   }
 
-  .Peepwa_content {
+  .ostTjG_content {
     box-sizing: border-box;
     border: var(--tabs-border-width, var(--border-width-sm)) solid
       var(--tabs-border-color, var(--color-border));

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

@@ -1,4 +1,4 @@
-import { Tabs } from "@ark-ui/react/tabs";
+import { Tabs, useTabs } from "@ark-ui/react/tabs";
 
 //#region src/components/tabs/Tabs.d.ts
 type TabsVariant = 'default' | 'line';
@@ -15,6 +15,7 @@ declare const Tabs$1: import("react").ForwardRefExoticComponent<Omit<Tabs.RootPr
   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;
 };
 //#endregion
-export { Tabs$1 as Tabs };
+export { Tabs$1 as Tabs, useTabs };

package/dist/components/tabs/Tabs.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Tabs_module_default from "./Tabs.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Tabs } from "@ark-ui/react/tabs";
+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, {
@@ -61,7 +61,8 @@ const Tabs$1 = Object.assign(TabsRoot, {
 	List: TabsList,
 	Trigger: TabsTrigger,
 	Indicator: TabsIndicator,
-	Content: TabsContent
+	Content: TabsContent,
+	useTabs
 });
 //#endregion
-export { Tabs$1 as Tabs };
+export { Tabs$1 as Tabs, useTabs };

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

@@ -1,11 +1,11 @@
 import './Tabs.css';
 //#region src/components/tabs/Tabs.module.css
 var Tabs_module_default = {
-	"content": "Peepwa_content",
-	"indicator": "Peepwa_indicator",
-	"list": "Peepwa_list",
-	"root": "Peepwa_root",
-	"trigger": "Peepwa_trigger"
+	"content": "ostTjG_content",
+	"indicator": "ostTjG_indicator",
+	"list": "ostTjG_list",
+	"root": "ostTjG_root",
+	"trigger": "ostTjG_trigger"
 };
 //#endregion
 export { Tabs_module_default as default };

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

@@ -1,2 +1,2 @@
-import { Tabs } from "./Tabs.js";
-export { Tabs };
+import { Tabs, useTabs } from "./Tabs.js";
+export { Tabs, useTabs };