@moduix/react 1.1.1 → 2.1.0

package/dist/components/slider/Slider.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Slider_module_default from "./Slider.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { Slider } from "@ark-ui/react/slider";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Slider, useSlider, useSliderContext } from "@ark-ui/react/slider";
 //#region src/components/slider/Slider.tsx
 const SliderRoot = forwardRef(function SliderRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Slider.Root, {
@@ -61,22 +61,28 @@ const SliderRange = forwardRef(function SliderRange({ className, ...props }, ref
 		...props
 	});
 });
-const SliderThumb = forwardRef(function SliderThumb({ className, ...props }, ref) {
+const SliderThumb = forwardRef(function SliderThumb({ asChild, children, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Slider.Thumb, {
 		ref,
+		asChild,
 		"data-slot": "slider-thumb",
 		className: clsx(Slider_module_default.thumb, normalizeClassName(className)),
-		...props
-	});
-});
-const SliderHiddenInput = forwardRef(function SliderHiddenInput({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Slider.HiddenInput, {
-		ref,
-		"data-slot": "slider-hidden-input",
-		className: normalizeClassName(className),
-		...props
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
+function withHiddenInput(children, asChild) {
+	const hiddenInput = /* @__PURE__ */ jsx(Slider.HiddenInput, { "data-slot": "slider-hidden-input" });
+	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInput] });
+	const child = Children.only(children);
+	return cloneElement(child, {}, child.props.children, hiddenInput);
+}
+function SliderThumbs({ className }) {
+	return useSliderContext().value.map((_, index) => /* @__PURE__ */ jsx(SliderThumb, {
+		index,
+		className
+	}, index));
+}
 const SliderMarkerGroup = forwardRef(function SliderMarkerGroup({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Slider.MarkerGroup, {
 		ref,
@@ -104,16 +110,19 @@ const SliderDraggingIndicator = forwardRef(function SliderDraggingIndicator({ cl
 const Slider$1 = Object.assign(SliderRoot, {
 	Root: SliderRoot,
 	RootProvider: SliderRootProvider,
+	Context: Slider.Context,
+	useSlider,
+	useSliderContext,
 	Label: SliderLabel,
 	ValueText: SliderValueText,
 	Control: SliderControl,
 	Track: SliderTrack,
 	Range: SliderRange,
 	Thumb: SliderThumb,
-	HiddenInput: SliderHiddenInput,
+	Thumbs: SliderThumbs,
 	MarkerGroup: SliderMarkerGroup,
 	Marker: SliderMarker,
 	DraggingIndicator: SliderDraggingIndicator
 });
 //#endregion
-export { Slider$1 as Slider };
+export { Slider$1 as Slider, useSlider, useSliderContext };

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

@@ -1,2 +1,2 @@
-import { Slider } from "./Slider.js";
-export { Slider };
+import { Slider, useSlider, useSliderContext } from "./Slider.js";
+export { Slider, useSlider, useSliderContext };

package/dist/components/spinner/Spinner.css

@@ -1,6 +1,6 @@
 @layer ui.components {
   .nzbtuq_root, [data-scope="spinner"][data-part="root"] {
-    --_spinner-size: var(--spinner-size, var(--spinner-size-md, 1.25rem));
+    --_spinner-size: var(--spinner-size, var(--spinner-size-md, var(--spacing-5)));
     width: var(--_spinner-size);
     height: var(--_spinner-size);
     color: var(--spinner-color, currentColor);
@@ -37,19 +37,19 @@
   }
 
   .nzbtuq_root[data-size="xs"], [data-scope="spinner"][data-part="root"][data-size="xs"] {
-    --_spinner-size: var(--spinner-size, var(--spinner-size-xs, .75rem));
+    --_spinner-size: var(--spinner-size, var(--spinner-size-xs, var(--spacing-3)));
   }
 
   .nzbtuq_root[data-size="sm"], [data-scope="spinner"][data-part="root"][data-size="sm"] {
-    --_spinner-size: var(--spinner-size, var(--spinner-size-sm, 1rem));
+    --_spinner-size: var(--spinner-size, var(--spinner-size-sm, var(--spacing-4)));
   }
 
   .nzbtuq_root[data-size="lg"], [data-scope="spinner"][data-part="root"][data-size="lg"] {
-    --_spinner-size: var(--spinner-size, var(--spinner-size-lg, 1.75rem));
+    --_spinner-size: var(--spinner-size, var(--spinner-size-lg, var(--spacing-7)));
   }
 
   .nzbtuq_root[data-size="xl"], [data-scope="spinner"][data-part="root"][data-size="xl"] {
-    --_spinner-size: var(--spinner-size, var(--spinner-size-xl, 2.25rem));
+    --_spinner-size: var(--spinner-size, var(--spinner-size-xl, var(--size-md)));
   }
 
   @media (prefers-reduced-motion: reduce) {

package/dist/components/spinner/Spinner.js

@@ -1,15 +1,16 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Spinner_module_default from "./Spinner.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/spinner/Spinner.tsx
 const SpinnerRoot = forwardRef(function SpinnerRoot({ asChild, children, className, decorative = false, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, size = "md", ...props }, ref) {
 	const accessibleLabel = decorative ? void 0 : ariaLabel ?? (ariaLabelledBy ? void 0 : "Loading");
 	return /* @__PURE__ */ jsx(ark.span, {
 		ref,
 		asChild,
+		...props,
 		"data-scope": "spinner",
 		"data-part": "root",
 		"data-slot": "spinner-root",
@@ -19,7 +20,6 @@ const SpinnerRoot = forwardRef(function SpinnerRoot({ asChild, children, classNa
 		"aria-label": accessibleLabel,
 		"aria-labelledby": decorative ? void 0 : ariaLabelledBy,
 		className: clsx(Spinner_module_default.root, normalizeClassName(className)),
-		...props,
 		children: asChild ? children : /* @__PURE__ */ jsx("span", {
 			"data-scope": "spinner",
 			"data-part": "indicator",

package/dist/components/split-button/SplitButton.css

@@ -11,22 +11,22 @@
 
   .iLFhoa_trigger {
     min-width: 0;
+    padding-inline: var(--split-button-trigger-padding-x-md, var(--spacing-3));
     border-start-start-radius: 0;
     border-end-start-radius: 0;
     margin-inline-start: calc(var(--button-border-width, var(--border-width-sm)) * -1);
-    padding-inline: .75rem;
     position: relative;
   }
 
   .iLFhoa_trigger:before {
     content: "";
-    opacity: .16;
+    inset-block: var(--split-button-separator-inset, var(--spacing-1-5));
+    width: var(--split-button-separator-width, var(--border-width-sm));
+    background-color: var(--split-button-separator-color, currentColor);
+    opacity: var(--split-button-separator-opacity, .16);
     pointer-events: none;
-    background-color: currentColor;
-    width: 1px;
     position: absolute;
-    inset-block: .375rem;
-    inset-inline-start: 0;
+    inset-inline-start: var(--split-button-separator-offset, 0);
   }
 
   .iLFhoa_trigger[data-variant="outline"]:before, .iLFhoa_trigger[data-variant="destructive-outline"]:before {
@@ -34,18 +34,18 @@
   }
 
   .iLFhoa_trigger[data-size="xs"] {
-    padding-inline: .5rem;
+    padding-inline: var(--split-button-trigger-padding-x-xs, var(--spacing-2));
   }
 
   .iLFhoa_trigger[data-size="sm"] {
-    padding-inline: .625rem;
+    padding-inline: var(--split-button-trigger-padding-x-sm, var(--spacing-2-5));
   }
 
   .iLFhoa_trigger[data-size="lg"] {
-    padding-inline: .875rem;
+    padding-inline: var(--split-button-trigger-padding-x-lg, var(--spacing-3-5));
   }
 
   .iLFhoa_trigger[data-size="xl"] {
-    padding-inline: 1rem;
+    padding-inline: var(--split-button-trigger-padding-x-xl, var(--spacing-4));
   }
 }

package/dist/components/split-button/SplitButton.d.ts

@@ -11,7 +11,7 @@ type SplitButtonActionProps = Omit<ButtonProps, 'size' | 'variant'> & {
   size?: SplitButtonSize;
   variant?: SplitButtonVariant;
 };
-type SplitButtonTriggerProps = ComponentProps<typeof Menu.Trigger> & {
+type SplitButtonTriggerProps = Omit<ComponentProps<typeof Menu.Trigger>, 'asChild'> & {
   size?: SplitButtonSize;
   variant?: SplitButtonVariant;
 };

package/dist/components/split-button/SplitButton.js

@@ -1,11 +1,11 @@
-import { ChevronDownIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { ChevronDownIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { Button } from "../button/Button.js";
 import { Menu } from "../menu/Menu.js";
 import SplitButton_module_default from "./SplitButton.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { createContext, forwardRef, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/split-button/SplitButton.tsx
 const SplitButtonContext = createContext(null);
 function useSplitButtonContext(componentName) {
@@ -48,7 +48,7 @@ const SplitButtonAction = forwardRef(function SplitButtonAction({ className, siz
 		...props
 	});
 });
-const SplitButtonTrigger = forwardRef(function SplitButtonTrigger({ asChild, children, className, size, variant, "aria-label": ariaLabel, ...props }, ref) {
+const SplitButtonTrigger = forwardRef(function SplitButtonTrigger({ children, className, size, variant, "aria-label": ariaLabel, ...props }, ref) {
 	const context = useSplitButtonContext("SplitButton.Trigger");
 	const isIconOnly = children == null;
 	return /* @__PURE__ */ jsx(Menu.Trigger, {
@@ -59,7 +59,6 @@ const SplitButtonTrigger = forwardRef(function SplitButtonTrigger({ asChild, chi
 		className: clsx(SplitButton_module_default.trigger, normalizeClassName(className)),
 		...props,
 		children: /* @__PURE__ */ jsx(Button, {
-			asChild,
 			size: size ?? context.size,
 			variant: variant ?? context.variant,
 			children: children ?? /* @__PURE__ */ jsx(ChevronDownIcon, {})

package/dist/components/splitter/Splitter.css

@@ -68,7 +68,7 @@
     position: relative;
 
     &:before {
-      width: var(--splitter-resize-trigger-line-size, 1px);
+      width: var(--splitter-resize-trigger-line-thickness, .5px);
       height: var(--splitter-resize-trigger-line-length, 100%);
       border-radius: var(--splitter-resize-trigger-line-radius, var(--radius-full));
       background-color: var(--splitter-resize-trigger-line-color, var(--color-border));
@@ -80,7 +80,7 @@
 
     &:after {
       z-index: 1;
-      width: var(--splitter-resize-trigger-size, .625rem);
+      width: var(--splitter-resize-trigger-size, var(--spacing-2-5));
       content: "";
       height: 100%;
       position: absolute;
@@ -95,18 +95,12 @@
 
       &:before {
         width: var(--splitter-resize-trigger-line-length, 100%);
-        height: var(--splitter-resize-trigger-line-size, 1px);
+        height: var(--splitter-resize-trigger-line-thickness, .5px);
       }
 
       &:after {
         width: 100%;
-        height: var(--splitter-resize-trigger-size, .625rem);
-      }
-    }
-
-    &:focus-visible {
-      &:before {
-        background-color: var(--splitter-resize-trigger-line-color-focus, var(--splitter-resize-trigger-line-color, var(--color-border)));
+        height: var(--splitter-resize-trigger-size, var(--spacing-2-5));
       }
     }
 
@@ -137,8 +131,8 @@
   .qnjB1q_resizeTriggerIndicator {
     z-index: 2;
     box-sizing: border-box;
-    width: var(--splitter-resize-trigger-indicator-width, .375rem);
-    height: var(--splitter-resize-trigger-indicator-height, 1.5rem);
+    width: var(--splitter-resize-trigger-indicator-width, var(--spacing-1-5));
+    height: var(--splitter-resize-trigger-indicator-height, var(--size-xs));
     border: var(--splitter-resize-trigger-indicator-border-width, var(--border-width-sm)) solid
       var(--splitter-resize-trigger-indicator-border-color, var(--color-border));
     border-radius: var(--splitter-resize-trigger-indicator-radius, var(--radius-full));
@@ -146,26 +140,33 @@
     box-shadow: var(--splitter-resize-trigger-indicator-shadow, var(--shadow-sm));
     pointer-events: none;
     transition: border-color var(--splitter-transition, var(--transition-default)),
-      box-shadow var(--splitter-transition, var(--transition-default));
+      box-shadow var(--splitter-transition, var(--transition-default)),
+      transform var(--splitter-transition, var(--transition-default));
     position: absolute;
     inset-block-start: 50%;
     inset-inline-start: 50%;
     transform: translate(-50%, -50%);
 
     &[data-orientation="vertical"] {
-      width: var(--splitter-resize-trigger-indicator-height, 1.5rem);
-      height: var(--splitter-resize-trigger-indicator-width, .375rem);
+      width: var(--splitter-resize-trigger-indicator-height, var(--size-xs));
+      height: var(--splitter-resize-trigger-indicator-width, var(--spacing-1-5));
     }
   }
 
   .qnjB1q_resizeTrigger[data-dragging] .qnjB1q_resizeTriggerIndicator {
     border-color: var(--splitter-resize-trigger-indicator-border-color-dragging, var(--splitter-resize-trigger-indicator-border-color, var(--color-border)));
     background-color: var(--splitter-resize-trigger-indicator-bg-dragging, var(--splitter-resize-trigger-indicator-bg, var(--color-background)));
-    box-shadow: var(--splitter-resize-trigger-indicator-shadow-dragging, var(--splitter-resize-trigger-indicator-shadow, var(--shadow-sm)));
+    box-shadow: var(--splitter-resize-trigger-indicator-shadow-dragging, var(--shadow-md));
+    transform: translate(-50%, -50%) scale(1.08);
   }
 
-  .qnjB1q_resizeTrigger:focus-visible:not([data-dragging]) .qnjB1q_resizeTriggerIndicator {
-    box-shadow: var(--splitter-resize-trigger-indicator-shadow-focus, var(--splitter-resize-trigger-indicator-shadow, var(--shadow-sm)));
+  @media (hover: hover) {
+    .qnjB1q_resizeTrigger:hover:not(:disabled, [data-disabled]) .qnjB1q_resizeTriggerIndicator {
+      border-color: var(--splitter-resize-trigger-indicator-border-color-hover, color-mix(in oklab,
+          var(--splitter-resize-trigger-indicator-border-color, var(--color-border)) 72%,
+          var(--color-muted-foreground)));
+      box-shadow: var(--splitter-resize-trigger-indicator-shadow-hover, var(--shadow-md));
+    }
   }
 
   .qnjB1q_resizeTrigger[data-disabled] .qnjB1q_resizeTriggerIndicator {

package/dist/components/splitter/Splitter.d.ts

@@ -1,4 +1,4 @@
-import { Splitter } from "@ark-ui/react/splitter";
+import { Splitter, SplitterPanelData, createSplitterRegistry, useSplitter, useSplitterContext } from "@ark-ui/react/splitter";
 
 //#region src/components/splitter/Splitter.d.ts
 declare const Splitter$1: import("react").ForwardRefExoticComponent<Omit<Splitter.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
@@ -9,4 +9,4 @@ declare const Splitter$1: import("react").ForwardRefExoticComponent<Omit<Splitte
   ResizeTriggerIndicator: import("react").ForwardRefExoticComponent<Omit<Splitter.ResizeTriggerIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion
-export { Splitter$1 as Splitter };
+export { Splitter$1 as Splitter, type SplitterPanelData, createSplitterRegistry, useSplitter, useSplitterContext };

package/dist/components/splitter/Splitter.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Splitter_module_default from "./Splitter.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Splitter } from "@ark-ui/react/splitter";
+import { jsx } from "react/jsx-runtime";
+import { Splitter, createSplitterRegistry, useSplitter, useSplitterContext } from "@ark-ui/react/splitter";
 //#region src/components/splitter/Splitter.tsx
 const rootStyle = {
 	width: "var(--splitter-width, 100%)",
@@ -41,14 +41,6 @@ const SplitterPanel = forwardRef(function SplitterPanel({ className, ...props },
 		...props
 	});
 });
-const SplitterResizeTrigger = forwardRef(function SplitterResizeTrigger({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Splitter.ResizeTrigger, {
-		ref,
-		"data-slot": "splitter-resize-trigger",
-		className: clsx(Splitter_module_default.resizeTrigger, normalizeClassName(className)),
-		...props
-	});
-});
 const SplitterResizeTriggerIndicator = forwardRef(function SplitterResizeTriggerIndicator({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Splitter.ResizeTriggerIndicator, {
 		ref,
@@ -57,6 +49,15 @@ const SplitterResizeTriggerIndicator = forwardRef(function SplitterResizeTrigger
 		...props
 	});
 });
+const SplitterResizeTrigger = forwardRef(function SplitterResizeTrigger({ children, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Splitter.ResizeTrigger, {
+		ref,
+		"data-slot": "splitter-resize-trigger",
+		className: clsx(Splitter_module_default.resizeTrigger, normalizeClassName(className)),
+		...props,
+		children: children === void 0 ? /* @__PURE__ */ jsx(SplitterResizeTriggerIndicator, {}) : children
+	});
+});
 const Splitter$1 = Object.assign(SplitterRoot, {
 	Root: SplitterRoot,
 	RootProvider: SplitterRootProvider,
@@ -65,4 +66,4 @@ const Splitter$1 = Object.assign(SplitterRoot, {
 	ResizeTriggerIndicator: SplitterResizeTriggerIndicator
 });
 //#endregion
-export { Splitter$1 as Splitter };
+export { Splitter$1 as Splitter, createSplitterRegistry, useSplitter, useSplitterContext };

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

@@ -1,2 +1,2 @@
-import { Splitter } from "./Splitter.js";
-export { Splitter };
+import { Splitter, SplitterPanelData, createSplitterRegistry, useSplitter, useSplitterContext } from "./Splitter.js";
+export { Splitter, type SplitterPanelData, createSplitterRegistry, useSplitter, useSplitterContext };

package/dist/components/stack/Stack.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from "react";
+import { CSSProperties } from "react";
 
 //#region src/components/stack/Stack.d.ts
 type StackDirection = 'row' | 'column';
@@ -12,7 +12,6 @@ declare const Stack: import("react").ForwardRefExoticComponent<Omit<import("reac
   justify?: CSSProperties["justifyContent"];
   wrap?: CSSProperties["flexWrap"];
   fill?: boolean;
-  separator?: ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
     direction?: StackDirection | {
@@ -24,7 +23,6 @@ declare const Stack: import("react").ForwardRefExoticComponent<Omit<import("reac
     justify?: CSSProperties["justifyContent"];
     wrap?: CSSProperties["flexWrap"];
     fill?: boolean;
-    separator?: ReactNode;
   } & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion

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.css

@@ -88,9 +88,9 @@
     }
 
     &:focus-visible ._1tbAxa_indicator {
-      outline: var(--steps-focus-ring-width, var(--border-width-sm)) solid
-        var(--steps-focus-ring-color, var(--color-ring));
-      outline-offset: var(--steps-focus-ring-offset, 2px);
+      outline: var(--steps-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--steps-focus-ring-color, var(--color-ring));
+      outline-offset: var(--steps-focus-ring-offset, var(--focus-ring-offset));
     }
 
     &[data-incomplete] {
@@ -107,8 +107,8 @@
 
   ._1tbAxa_indicator {
     box-sizing: border-box;
-    width: var(--steps-indicator-size, 2rem);
-    height: var(--steps-indicator-size, 2rem);
+    width: var(--steps-indicator-size, var(--spacing-8));
+    height: var(--steps-indicator-size, var(--spacing-8));
     border: var(--steps-indicator-border-width, var(--border-width-sm)) solid
       var(--steps-indicator-border-color, var(--color-border));
     border-radius: var(--steps-indicator-radius, var(--radius-full));
@@ -127,8 +127,8 @@
     display: inline-flex;
 
     & :where(svg) {
-      width: var(--steps-indicator-icon-size, .875rem);
-      height: var(--steps-indicator-icon-size, .875rem);
+      width: var(--steps-indicator-icon-size, var(--spacing-3-5));
+      height: var(--steps-indicator-icon-size, var(--spacing-3-5));
     }
 
     &[data-current] {
@@ -147,7 +147,7 @@
   ._1tbAxa_separator {
     height: var(--steps-separator-thickness, var(--border-width-sm));
     min-width: var(--steps-separator-min-width, var(--spacing-8));
-    margin-inline: var(--steps-separator-inset, .5rem);
+    margin-inline: var(--steps-separator-inset, var(--spacing-2));
     background-color: var(--steps-separator-color, var(--color-border));
     pointer-events: none;
     flex: auto;
@@ -157,9 +157,10 @@
     }
 
     &[data-orientation="vertical"] {
-      top: calc(var(--steps-indicator-size, 2rem) + var(--steps-separator-inset, .5rem));
+      top: calc(var(--steps-indicator-size, var(--spacing-8)) +
+          var(--steps-separator-inset, var(--spacing-2)));
       bottom: calc(var(--steps-gap, var(--spacing-4)) * -1);
-      left: calc(var(--steps-indicator-size, 2rem) / 2);
+      left: calc(var(--steps-indicator-size, var(--spacing-8)) / 2);
       width: var(--steps-separator-thickness, var(--border-width-sm));
       min-width: 0;
       height: auto;
@@ -193,9 +194,9 @@
     }
 
     &:focus-visible {
-      outline: var(--steps-focus-ring-width, var(--border-width-sm)) solid
-        var(--steps-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--steps-focus-ring-offset, 2px) * -1);
+      outline: var(--steps-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--steps-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--steps-focus-ring-offset, var(--focus-ring-offset)) * -1);
     }
   }
 
@@ -207,15 +208,15 @@
 
   ._1tbAxa_prevTrigger, ._1tbAxa_nextTrigger {
     box-sizing: border-box;
-    min-height: var(--steps-action-height, 2rem);
+    min-height: var(--steps-action-height, var(--size-sm));
     justify-content: center;
     align-items: center;
     gap: var(--steps-action-gap, var(--spacing-2));
     border: var(--steps-action-border-width, var(--border-width-sm)) solid
       var(--steps-action-border-color, var(--color-border));
     border-radius: var(--steps-action-radius, var(--radius-md));
-    padding-block: var(--steps-action-padding-y, .375rem);
-    padding-inline: var(--steps-action-padding-x, .75rem);
+    padding-block: var(--steps-action-padding-y, var(--spacing-1-5));
+    padding-inline: var(--steps-action-padding-x, var(--spacing-3));
     background-color: var(--steps-action-bg, var(--color-background));
     color: var(--steps-action-color, var(--color-foreground));
     font: inherit;
@@ -237,9 +238,9 @@
     }
 
     &:focus-visible {
-      outline: var(--steps-focus-ring-width, var(--border-width-sm)) solid
-        var(--steps-focus-ring-color, var(--color-ring));
-      outline-offset: var(--steps-focus-ring-offset, 2px);
+      outline: var(--steps-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--steps-focus-ring-color, var(--color-ring));
+      outline-offset: var(--steps-focus-ring-offset, var(--focus-ring-offset));
     }
 
     &:is(:disabled, [data-disabled]) {

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 };