@moduix/react 1.1.1 → 2.0.0

package/dist/components/stack/Stack.js

@@ -1,15 +1,13 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Stack_module_default from "./Stack.module.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
-import { Children, Fragment as Fragment$1, forwardRef } from "react";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/stack/Stack.tsx
-const StackRoot = forwardRef(function StackRoot({ asChild, children, className, style, direction, gap, align, justify, wrap, fill, separator, ...props }, ref) {
+const StackRoot = forwardRef(function StackRoot({ asChild, children, className, style, direction, gap, align, justify, wrap, fill, ...props }, ref) {
 	const mobileDirection = typeof direction === "string" ? direction : direction?.mobile ?? direction?.desktop;
 	const desktopDirection = typeof direction === "string" ? direction : direction?.desktop ?? direction?.mobile;
-	const childArray = separator == null ? void 0 : Children.toArray(children);
-	const content = childArray == null ? children : childArray.map((child, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [index > 0 ? separator : null, child] }, index));
 	return /* @__PURE__ */ jsx(ark.div, {
 		...props,
 		ref,
@@ -28,7 +26,7 @@ const StackRoot = forwardRef(function StackRoot({ asChild, children, className,
 			flexWrap: wrap,
 			...style
 		},
-		children: content
+		children
 	});
 });
 const Stack = Object.assign(StackRoot, { Root: StackRoot });

package/dist/components/steps/Steps.d.ts

@@ -1,4 +1,4 @@
-import { Steps } from "@ark-ui/react/steps";
+import { Steps, useSteps } from "@ark-ui/react/steps";
 
 //#region src/components/steps/Steps.d.ts
 declare const Steps$1: import("react").ForwardRefExoticComponent<Omit<Steps.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
@@ -14,6 +14,7 @@ declare const Steps$1: import("react").ForwardRefExoticComponent<Omit<Steps.Root
   PrevTrigger: import("react").ForwardRefExoticComponent<Omit<Steps.PrevTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   NextTrigger: import("react").ForwardRefExoticComponent<Omit<Steps.NextTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Progress: import("react").ForwardRefExoticComponent<Omit<Steps.ProgressProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  useSteps: typeof useSteps;
 };
 //#endregion
 export { Steps$1 as Steps };

package/dist/components/steps/Steps.js

@@ -1,10 +1,10 @@
-import { CheckIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CheckIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import Steps_module_default from "./Steps.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Steps, useStepsItemContext } from "@ark-ui/react/steps";
+import { jsx } from "react/jsx-runtime";
+import { Steps, useSteps, useStepsItemContext } from "@ark-ui/react/steps";
 //#region src/components/steps/Steps.tsx
 const StepsRoot = forwardRef(function StepsRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Steps.Root, {
@@ -116,7 +116,8 @@ const Steps$1 = Object.assign(StepsRoot, {
 	CompletedContent: StepsCompletedContent,
 	PrevTrigger: StepsPrevTrigger,
 	NextTrigger: StepsNextTrigger,
-	Progress: StepsProgress
+	Progress: StepsProgress,
+	useSteps
 });
 //#endregion
 export { Steps$1 as Steps };

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

@@ -51,11 +51,11 @@
     }
 
     @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)));
       }
     }

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

@@ -115,6 +115,8 @@
 
   .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,7 +127,6 @@
       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"] & {
@@ -143,6 +144,7 @@
     }
 
     &[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%;

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

@@ -82,47 +82,17 @@
   }
 
   .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, 1rem);
+    --close-button-radius: var(--tag-close-trigger-radius, var(--radius-full));
+    --close-button-icon-size: var(--tag-close-trigger-icon-size, .625rem);
+    --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(--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, {

package/dist/components/tags-input/TagsInput.css

@@ -197,49 +197,12 @@
     --close-button-color-hover: var(--tags-input-clear-trigger-color-hover, var(--color-foreground));
     --close-button-focus-ring-color: var(--tags-input-trigger-focus-ring-color, var(--color-ring));
     --close-button-focus-ring-width: var(--tags-input-trigger-focus-ring-width, var(--border-width-sm));
-    width: var(--tags-input-clear-trigger-size, 1.5rem);
-    height: var(--tags-input-clear-trigger-size, 1.5rem);
-    border-radius: var(--tags-input-clear-trigger-radius, var(--radius-sm));
-    background-color: var(--tags-input-clear-trigger-bg, transparent);
-    color: var(--tags-input-clear-trigger-color, var(--color-muted-foreground));
-    cursor: pointer;
-    transition: background-color var(--tags-input-transition, var(--transition-default)),
-      color var(--tags-input-transition, var(--transition-default)),
-      opacity var(--tags-input-transition, var(--transition-default)),
-      outline-color var(--tags-input-transition, var(--transition-default));
-    border: 0;
-    outline: 0;
+    --close-button-focus-ring-offset: var(--tags-input-trigger-focus-ring-offset, 2px);
+    --close-button-transition: var(--tags-input-transition, var(--transition-default));
+    --close-button-disabled-opacity: var(--tags-input-disabled-opacity, var(--opacity-disabled));
     flex: none;
-    justify-content: center;
     align-self: center;
-    align-items: center;
     margin-inline-start: auto;
-    padding: 0;
-    display: inline-flex;
-
-    & > svg {
-      width: var(--tags-input-clear-trigger-icon-size, .75rem);
-      height: var(--tags-input-clear-trigger-icon-size, .75rem);
-      pointer-events: none;
-      flex: none;
-    }
-
-    &:hover {
-      background-color: var(--tags-input-clear-trigger-bg-hover, var(--color-muted));
-      color: var(--tags-input-clear-trigger-color-hover, var(--color-foreground));
-    }
-
-    &:focus-visible {
-      outline: var(--tags-input-trigger-focus-ring-width, var(--border-width-sm)) solid
-        var(--tags-input-trigger-focus-ring-color, var(--color-ring));
-      outline-offset: var(--tags-input-trigger-focus-ring-offset, 2px);
-    }
-
-    &[data-disabled], &:disabled {
-      cursor: default;
-      opacity: var(--tags-input-disabled-opacity, var(--opacity-disabled));
-      pointer-events: none;
-    }
 
     &[data-readonly] {
       display: none;

package/dist/components/tags-input/TagsInput.d.ts

@@ -1,20 +1,23 @@
-import { TagsInput } from "@ark-ui/react/tags-input";
+import { ReactNode } from "react";
+import { TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext } from "@ark-ui/react/tags-input";
 
 //#region src/components/tags-input/TagsInput.d.ts
+declare function TagsInputItems(): import("react").JSX.Element;
 declare const TagsInput$1: import("react").ForwardRefExoticComponent<Omit<TagsInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<TagsInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<TagsInput.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Label: import("react").ForwardRefExoticComponent<Omit<TagsInput.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   Control: import("react").ForwardRefExoticComponent<Omit<TagsInput.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Item: import("react").ForwardRefExoticComponent<Omit<TagsInput.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemContext: (props: TagsInput.ItemContextProps) => ReactNode;
   ItemPreview: import("react").ForwardRefExoticComponent<Omit<TagsInput.ItemPreviewProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemText: import("react").ForwardRefExoticComponent<Omit<TagsInput.ItemTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   ItemDeleteTrigger: import("react").ForwardRefExoticComponent<Omit<TagsInput.ItemDeleteTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   ItemInput: import("react").ForwardRefExoticComponent<Omit<TagsInput.ItemInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
   Input: import("react").ForwardRefExoticComponent<Omit<TagsInput.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
   ClearTrigger: import("react").ForwardRefExoticComponent<Omit<TagsInput.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  HiddenInput: import("react").ForwardRefExoticComponent<Omit<TagsInput.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-  Context: (props: TagsInput.ContextProps) => import("react").ReactNode;
+  Context: (props: TagsInput.ContextProps) => ReactNode;
+  Items: typeof TagsInputItems;
 };
 //#endregion
-export { TagsInput$1 as TagsInput };
+export { TagsInput$1 as TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext };