@moduix/react 1.1.1 → 2.1.0

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

@@ -19,14 +19,14 @@
   .PUgkqa_control {
     box-sizing: border-box;
     width: var(--switch-width, 3rem);
-    height: var(--switch-height, 1.5rem);
-    --switch-thumb-translate-default: calc(var(--switch-width, 3rem) - var(--switch-thumb-size, 1.25rem) -
-        (var(--switch-padding, .125rem) * 2) -
+    height: var(--switch-height, var(--size-xs));
+    --switch-thumb-translate-default: calc(var(--switch-width, 3rem) - var(--switch-thumb-size, var(--spacing-5)) -
+        (var(--switch-padding, var(--spacing-0-5)) * 2) -
         (var(--switch-border-width, var(--border-width-sm)) * 2));
     border: var(--switch-border-width, var(--border-width-sm)) solid
       var(--switch-border-color, var(--color-border));
     border-radius: var(--switch-radius, var(--radius-full));
-    padding: var(--switch-padding, .125rem);
+    padding: var(--switch-padding, var(--spacing-0-5));
     background-color: var(--switch-bg, var(--color-muted));
     user-select: none;
     transition: background-color var(--switch-transition, var(--transition-default)),
@@ -45,17 +45,17 @@
     }
 
     &[data-focus-visible] {
-      outline: var(--switch-focus-ring-width, var(--border-width-sm)) solid
-        var(--switch-focus-ring-color, var(--color-ring));
+      outline: var(--switch-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--switch-focus-ring-color, var(--color-ring));
       outline-offset: var(--switch-focus-ring-offset, var(--border-width-sm));
     }
 
     @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)));
       }
     }
@@ -64,36 +64,36 @@
   .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);
+    --switch-thumb-size: var(--switch-thumb-size-xs, var(--spacing-3));
   }
 
   .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);
+    --switch-thumb-size: var(--switch-thumb-size-sm, var(--spacing-4));
   }
 
   .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);
+    --switch-height: var(--switch-height-md, var(--size-xs));
+    --switch-thumb-size: var(--switch-thumb-size-md, var(--spacing-5));
   }
 
   .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);
+    --switch-thumb-size: var(--switch-thumb-size-lg, var(--size-xs));
   }
 
   .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);
+    --switch-height: var(--switch-height-xl, var(--size-sm));
+    --switch-thumb-size: var(--switch-thumb-size-xl, var(--spacing-7));
   }
 
   .PUgkqa_thumb {
-    width: var(--switch-thumb-size, 1.25rem);
-    height: var(--switch-thumb-size, 1.25rem);
+    width: var(--switch-thumb-size, var(--spacing-5));
+    height: var(--switch-thumb-size, var(--spacing-5));
     border: var(--switch-thumb-border-width, 0) solid var(--switch-thumb-border-color, transparent);
     border-radius: var(--switch-thumb-radius, var(--radius-full));
     background-color: var(--switch-thumb-bg-unchecked, var(--switch-thumb-bg, var(--color-background)));

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/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

@@ -79,11 +79,11 @@
       var(--table-border-color, var(--color-border));
   }
 
-  .-X2Dga_root[data-striped] .-X2Dga_body .-X2Dga_row:nth-child(2n):not(.-X2Dga_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));
   }
 
-  .-X2Dga_root[data-interactive] .-X2Dga_body .-X2Dga_row:not(.-X2Dga_emptyRow):hover {
+  .-X2Dga_root[data-interactive] .-X2Dga_body .-X2Dga_row:not([data-empty]):hover {
     background-color: var(--table-row-bg-hover, var(--color-muted));
   }
 
@@ -149,7 +149,7 @@
   }
 
   .-X2Dga_numeric {
-    text-align: right;
+    text-align: end;
     white-space: nowrap;
     font-variant-numeric: tabular-nums;
   }

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

@@ -6,7 +6,6 @@ var Table_module_default = {
 	"cell": "-X2Dga_cell",
 	"columnHeader": "-X2Dga_columnHeader",
 	"empty": "-X2Dga_empty",
-	"emptyRow": "-X2Dga_emptyRow",
 	"footer": "-X2Dga_footer",
 	"header": "-X2Dga_header",
 	"numeric": "-X2Dga_numeric",

package/dist/components/tabs/Tabs.css

@@ -1,7 +1,7 @@
 @layer ui.components {
   .ostTjG_root {
     box-sizing: border-box;
-    gap: var(--tabs-gap, .75rem);
+    gap: var(--tabs-gap, var(--spacing-3));
     min-width: 0;
     color: var(--tabs-color, var(--color-foreground));
     flex-direction: column;
@@ -17,11 +17,11 @@
     box-sizing: border-box;
     z-index: 0;
     align-items: stretch;
-    gap: var(--tabs-list-gap, .25rem);
+    gap: var(--tabs-list-gap, var(--spacing-1));
     width: fit-content;
     max-width: 100%;
-    padding: var(--tabs-list-padding-y, var(--tabs-list-padding, .25rem))
-      var(--tabs-list-padding-x, var(--tabs-list-padding, .25rem));
+    padding: var(--tabs-list-padding-y, var(--tabs-list-padding, var(--spacing-1)))
+      var(--tabs-list-padding-x, var(--tabs-list-padding, var(--spacing-1)));
     border: var(--tabs-list-border-width, var(--border-width-sm)) solid
       var(--tabs-list-border-color, var(--color-border));
     border-radius: var(--tabs-radius, var(--radius-lg));
@@ -54,11 +54,11 @@
     z-index: 1;
     justify-content: center;
     align-items: center;
-    gap: var(--tabs-tab-content-gap, .5rem);
-    height: var(--tabs-tab-height, 2rem);
+    gap: var(--tabs-tab-content-gap, var(--spacing-2));
+    height: var(--tabs-tab-height, var(--size-sm));
     appearance: none;
     border-radius: var(--tabs-tab-radius, var(--radius-md));
-    padding-inline: var(--tabs-tab-padding-x, .625rem);
+    padding-inline: var(--tabs-tab-padding-x, var(--spacing-2-5));
     color: var(--tabs-tab-color, var(--color-muted-foreground));
     font: inherit;
     font-size: var(--tabs-tab-font-size, var(--text-sm));
@@ -91,8 +91,8 @@
       &:before {
         content: "";
         border-radius: inherit;
-        outline: var(--tabs-focus-ring-width, var(--border-width-sm)) solid
-          var(--tabs-focus-ring-color, var(--color-ring));
+        outline: var(--tabs-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+          solid var(--tabs-focus-ring-color, var(--color-ring));
         outline-offset: var(--tabs-focus-ring-offset, 0);
         position: absolute;
         inset: 0;
@@ -106,8 +106,8 @@
     }
 
     & > svg {
-      width: var(--tabs-tab-icon-size, 1rem);
-      height: var(--tabs-tab-icon-size, 1rem);
+      width: var(--tabs-tab-icon-size, var(--spacing-4));
+      height: var(--tabs-tab-icon-size, var(--spacing-4));
       color: var(--tabs-tab-icon-color, currentColor);
       flex-shrink: 0;
     }
@@ -115,8 +115,10 @@
 
   .ostTjG_indicator {
     z-index: 0;
+    top: 50%;
+    left: var(--left, 0);
     width: var(--width, 0);
-    height: var(--tabs-indicator-size, 2rem);
+    height: var(--tabs-indicator-size, var(--spacing-8));
     border-radius: var(--tabs-indicator-radius, var(--radius-md));
     background-color: var(--tabs-indicator-bg, var(--color-background));
     box-shadow: var(--tabs-indicator-shadow, var(--shadow-sm));
@@ -125,11 +127,10 @@
       top var(--tabs-indicator-transition, var(--transition-default)),
       left var(--tabs-indicator-transition, var(--transition-default));
     position: absolute;
-    top: 50%;
     translate: 0 -50%;
 
     .ostTjG_root[data-variant="line"] & {
-      height: var(--tabs-line-indicator-size, 2px);
+      height: var(--tabs-line-indicator-size, var(--spacing-0-5));
       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)));
       box-shadow: none;
@@ -143,13 +144,14 @@
     }
 
     &[data-orientation="vertical"] {
-      width: calc(100% - (var(--tabs-list-padding-x, var(--tabs-list-padding, .25rem)) * 2));
+      top: var(--top, 0);
+      width: calc(100% - (var(--tabs-list-padding-x, var(--tabs-list-padding, var(--spacing-1))) * 2));
       height: var(--height, 0);
       left: 50%;
       translate: -50%;
 
       .ostTjG_root[data-variant="line"] & {
-        width: var(--tabs-line-indicator-size, 2px);
+        width: var(--tabs-line-indicator-size, var(--spacing-0-5));
         bottom: auto;
         left: 0;
         translate: none;
@@ -164,7 +166,7 @@
     border-radius: var(--tabs-radius, var(--radius-lg));
     background-color: var(--tabs-bg, var(--color-background));
     min-width: 0;
-    padding: var(--tabs-panel-padding, 1rem);
+    padding: var(--tabs-panel-padding, var(--spacing-4));
     color: var(--tabs-panel-color, var(--tabs-color, var(--color-foreground)));
     font-size: var(--tabs-panel-font-size, var(--text-sm));
     line-height: var(--tabs-panel-line-height, var(--line-height-text-sm));
@@ -173,9 +175,9 @@
     margin: 0;
 
     &:focus-visible {
-      outline: var(--tabs-focus-ring-width, var(--border-width-sm)) solid
-        var(--tabs-focus-ring-color, var(--color-ring));
-      outline-offset: var(--tabs-panel-focus-ring-offset, -1px);
+      outline: var(--tabs-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--tabs-focus-ring-color, var(--color-ring));
+      outline-offset: var(--tabs-panel-focus-ring-offset, var(--focus-ring-inset-offset));
       border-radius: inherit;
     }
 

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/index.d.ts

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

package/dist/components/tag/Tag.css

@@ -2,7 +2,7 @@
   .mVOnGG_root {
     box-sizing: border-box;
     align-items: center;
-    gap: var(--tag-gap, .375rem);
+    gap: var(--tag-gap, var(--spacing-1-5));
     border: var(--tag-border-width, var(--border-width-sm)) solid
       var(--tag-border-color, transparent);
     border-radius: var(--tag-radius, var(--radius-full));
@@ -14,9 +14,9 @@
     font-size: var(--tag-font-size, var(--text-xs));
     font-weight: var(--tag-font-weight, var(--weight-medium));
     line-height: var(--tag-line-height, var(--line-height-text-xs));
-    min-height: var(--tag-height-md, 1.5rem);
-    padding-block: var(--tag-padding-y-md, .125rem);
-    padding-inline: var(--tag-padding-x-md, .5rem);
+    min-height: var(--tag-height-md, var(--size-xs));
+    padding-block: var(--tag-padding-y-md, var(--spacing-0-5));
+    padding-inline: var(--tag-padding-x-md, var(--spacing-2));
     white-space: nowrap;
     vertical-align: middle;
     transition: color var(--tag-transition, var(--transition-default)),
@@ -25,17 +25,17 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--tag-icon-size, .75rem);
-      height: var(--tag-icon-size, .75rem);
+      width: var(--tag-icon-size, var(--spacing-3));
+      height: var(--tag-icon-size, var(--spacing-3));
       pointer-events: none;
       flex-shrink: 0;
     }
 
     &[data-size="sm"] {
-      gap: var(--tag-gap-sm, .25rem);
+      gap: var(--tag-gap-sm, var(--spacing-1));
       min-height: var(--tag-height-sm, 1.25rem);
       padding-block: var(--tag-padding-y-sm, 0);
-      padding-inline: var(--tag-padding-x-sm, .375rem);
+      padding-inline: var(--tag-padding-x-sm, var(--spacing-1-5));
     }
 
     &[data-variant="secondary"] {
@@ -56,7 +56,7 @@
     &[data-variant="destructive"] {
       background-color: var(--tag-bg, var(--color-destructive));
       border-color: var(--tag-border-color, transparent);
-      color: var(--tag-color, var(--color-primary-foreground));
+      color: var(--tag-color, var(--color-destructive-foreground));
     }
   }
 
@@ -74,55 +74,25 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--tag-icon-size, .75rem);
-      height: var(--tag-icon-size, .75rem);
+      width: var(--tag-icon-size, var(--spacing-3));
+      height: var(--tag-icon-size, var(--spacing-3));
       pointer-events: none;
       flex-shrink: 0;
     }
   }
 
   .mVOnGG_closeTrigger {
-    width: var(--tag-close-trigger-size, 1rem);
-    height: var(--tag-close-trigger-size, 1rem);
-    border-radius: var(--tag-close-trigger-radius, var(--radius-full));
-    background-color: var(--tag-close-trigger-bg, transparent);
-    color: inherit;
-    cursor: pointer;
-    transition: color var(--tag-transition, var(--transition-default)),
-      background-color var(--tag-transition, var(--transition-default)),
-      box-shadow var(--tag-transition, var(--transition-default));
-    border: 0;
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    display: inline-flex;
-
-    & > svg {
-      width: var(--tag-close-trigger-icon-size, .625rem);
-      height: var(--tag-close-trigger-icon-size, .625rem);
-      pointer-events: none;
-      flex-shrink: 0;
-    }
-
-    &:hover {
-      background-color: var(--tag-close-trigger-bg-hover, color-mix(in oklab, currentColor 12%, transparent));
-    }
-
-    &:focus-visible {
-      box-shadow: 0 0 0 var(--tag-close-trigger-focus-ring-offset, 0)
-          var(--tag-close-trigger-focus-ring-offset-color, transparent),
-        0 0 0
-          calc(var(--tag-close-trigger-focus-ring-width, var(--border-width-sm)) +
-              var(--tag-close-trigger-focus-ring-offset, 0))
-          var(--tag-close-trigger-focus-ring-color, var(--color-ring));
-      outline: none;
-    }
-
-    &[disabled], &[data-disabled] {
-      cursor: default;
-      opacity: var(--tag-disabled-opacity, var(--opacity-disabled));
-      pointer-events: none;
-    }
+    --close-button-size: var(--tag-close-trigger-size, var(--spacing-4));
+    --close-button-radius: var(--tag-close-trigger-radius, var(--radius-full));
+    --close-button-icon-size: var(--tag-close-trigger-icon-size, var(--spacing-2-5));
+    --close-button-bg: var(--tag-close-trigger-bg, transparent);
+    --close-button-bg-hover: var(--tag-close-trigger-bg-hover, color-mix(in oklab, currentColor 12%, transparent));
+    --close-button-color: inherit;
+    --close-button-color-hover: inherit;
+    --close-button-disabled-opacity: var(--tag-disabled-opacity, var(--opacity-disabled));
+    --close-button-focus-ring-width: var(--tag-close-trigger-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)));
+    --close-button-focus-ring-color: var(--tag-close-trigger-focus-ring-color, var(--color-ring));
+    --close-button-focus-ring-offset: var(--tag-close-trigger-focus-ring-offset, 0);
+    --close-button-transition: var(--tag-transition, var(--transition-default));
   }
 }

package/dist/components/tag/Tag.js

@@ -1,10 +1,10 @@
-import { CloseIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CloseButton } from "../close-button/CloseButton.js";
 import Tag_module_default from "./Tag.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/tag/Tag.tsx
 const DEFAULT_CLOSE_LABEL = "Remove tag";
 const TagRoot = forwardRef(function TagRoot({ className, size = "md", variant = "default", ...props }, ref) {
@@ -49,31 +49,18 @@ const TagEndElement = forwardRef(function TagEndElement({ className, ...props },
 		className: clsx(Tag_module_default.endElement, normalizeClassName(className))
 	});
 });
-const TagCloseTrigger = forwardRef(function TagCloseTrigger({ asChild, className, children, disabled, onClick, type, "aria-disabled": ariaDisabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
-	const isDisabled = disabled || ariaDisabled === true || ariaDisabled === "true";
-	return /* @__PURE__ */ jsx(ark.button, {
+const TagCloseTrigger = forwardRef(function TagCloseTrigger({ asChild, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
+	return /* @__PURE__ */ jsx(CloseButton.Root, {
 		ref,
 		asChild,
-		type: asChild ? type : type ?? "button",
-		disabled,
-		"aria-disabled": ariaDisabled,
-		"aria-label": ariaLabel ?? (!asChild && children == null && ariaLabelledBy == null ? DEFAULT_CLOSE_LABEL : void 0),
-		"aria-labelledby": ariaLabelledBy,
 		...props,
 		"data-scope": "tag",
 		"data-part": "close-trigger",
 		"data-slot": "tag-close-trigger",
-		"data-disabled": isDisabled ? "" : void 0,
+		"aria-label": ariaLabel ?? (!asChild && children == null && ariaLabelledBy == null ? DEFAULT_CLOSE_LABEL : void 0),
+		"aria-labelledby": ariaLabelledBy,
 		className: clsx(Tag_module_default.closeTrigger, normalizeClassName(className)),
-		onClick: (event) => {
-			if (isDisabled) {
-				event.preventDefault();
-				event.stopPropagation();
-				return;
-			}
-			onClick?.(event);
-		},
-		children: children ?? (!asChild ? /* @__PURE__ */ jsx(CloseIcon, {}) : void 0)
+		children
 	});
 });
 const Tag = Object.assign(TagRoot, {