@moduix/react 1.1.0 → 2.0.0

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/spinner/Spinner.module.js

@@ -1,9 +1,9 @@
 import './Spinner.css';
 //#region src/components/spinner/Spinner.module.css
 var Spinner_module_default = {
-	"indicator": "mDsGJa_indicator",
-	"ring": "mDsGJa_ring",
-	"root": "mDsGJa_root"
+	"indicator": "nzbtuq_indicator",
+	"ring": "nzbtuq_ring",
+	"root": "nzbtuq_root"
 };
 //#endregion
 export { Spinner_module_default as default };

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

@@ -1,15 +1,15 @@
 @layer ui.components {
-  .A0sAVa_root {
+  .iLFhoa_root {
     align-items: stretch;
     display: inline-flex;
   }
 
-  .A0sAVa_action {
+  .iLFhoa_action {
     border-start-end-radius: 0;
     border-end-end-radius: 0;
   }
 
-  .A0sAVa_trigger {
+  .iLFhoa_trigger {
     min-width: 0;
     border-start-start-radius: 0;
     border-end-start-radius: 0;
@@ -18,7 +18,7 @@
     position: relative;
   }
 
-  .A0sAVa_trigger:before {
+  .iLFhoa_trigger:before {
     content: "";
     opacity: .16;
     pointer-events: none;
@@ -29,23 +29,23 @@
     inset-inline-start: 0;
   }
 
-  .A0sAVa_trigger[data-variant="outline"]:before, .A0sAVa_trigger[data-variant="destructive-outline"]:before {
+  .iLFhoa_trigger[data-variant="outline"]:before, .iLFhoa_trigger[data-variant="destructive-outline"]:before {
     opacity: 0;
   }
 
-  .A0sAVa_trigger[data-size="xs"] {
+  .iLFhoa_trigger[data-size="xs"] {
     padding-inline: .5rem;
   }
 
-  .A0sAVa_trigger[data-size="sm"] {
+  .iLFhoa_trigger[data-size="sm"] {
     padding-inline: .625rem;
   }
 
-  .A0sAVa_trigger[data-size="lg"] {
+  .iLFhoa_trigger[data-size="lg"] {
     padding-inline: .875rem;
   }
 
-  .A0sAVa_trigger[data-size="xl"] {
+  .iLFhoa_trigger[data-size="xl"] {
     padding-inline: 1rem;
   }
 }

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/split-button/SplitButton.module.js

@@ -1,9 +1,9 @@
 import './SplitButton.css';
 //#region src/components/split-button/SplitButton.module.css
 var SplitButton_module_default = {
-	"action": "A0sAVa_action",
-	"root": "A0sAVa_root",
-	"trigger": "A0sAVa_trigger"
+	"action": "iLFhoa_action",
+	"root": "iLFhoa_root",
+	"trigger": "iLFhoa_trigger"
 };
 //#endregion
 export { SplitButton_module_default as default };

package/dist/components/splitter/Splitter.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .o8nV3W_root {
+  .qnjB1q_root {
     box-sizing: border-box;
     min-width: var(--splitter-min-width, 0);
     min-height: var(--splitter-min-height, 0);
@@ -26,7 +26,7 @@
     }
   }
 
-  .o8nV3W_panel {
+  .qnjB1q_panel {
     box-sizing: border-box;
     min-width: var(--splitter-panel-min-width, 0);
     min-height: var(--splitter-panel-min-height, 12.5rem);
@@ -44,11 +44,11 @@
     }
   }
 
-  .o8nV3W_root[data-orientation="vertical"] > .o8nV3W_panel {
+  .qnjB1q_root[data-orientation="vertical"] > .qnjB1q_panel {
     min-height: var(--splitter-panel-min-height-vertical, 0);
   }
 
-  .o8nV3W_resizeTrigger {
+  .qnjB1q_resizeTrigger {
     z-index: 1;
     box-sizing: border-box;
     flex: 0 0 var(--splitter-resize-trigger-line-size, 1px);
@@ -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));
@@ -95,7 +95,7 @@
 
       &: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 {
@@ -104,15 +104,11 @@
       }
     }
 
-    &[data-focus] {
-      &:before {
-        background-color: var(--splitter-resize-trigger-line-color-focus, var(--splitter-resize-trigger-line-color, var(--color-border)));
-      }
-    }
-
     &[data-dragging] {
       &:before {
-        background-color: var(--splitter-resize-trigger-line-color-dragging, var(--splitter-resize-trigger-line-color, var(--color-border)));
+        background-color: var(--splitter-resize-trigger-line-color-dragging, color-mix(in oklab,
+            var(--splitter-resize-trigger-line-color, var(--color-border)) 72%,
+            var(--color-muted-foreground)));
       }
     }
 
@@ -123,14 +119,16 @@
   }
 
   @media (hover: hover) {
-    .o8nV3W_resizeTrigger:hover:not(:disabled, [data-disabled]) {
+    .qnjB1q_resizeTrigger:hover:not(:disabled, [data-disabled]) {
       &:before {
-        background-color: var(--splitter-resize-trigger-line-color-hover, var(--splitter-resize-trigger-line-color, var(--color-border)));
+        background-color: var(--splitter-resize-trigger-line-color-hover, color-mix(in oklab,
+            var(--splitter-resize-trigger-line-color, var(--color-border)) 72%,
+            var(--color-muted-foreground)));
       }
     }
   }
 
-  .o8nV3W_resizeTriggerIndicator {
+  .qnjB1q_resizeTriggerIndicator {
     z-index: 2;
     box-sizing: border-box;
     width: var(--splitter-resize-trigger-indicator-width, .375rem);
@@ -142,7 +140,8 @@
     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%;
@@ -154,17 +153,23 @@
     }
   }
 
-  .o8nV3W_resizeTrigger[data-dragging] .o8nV3W_resizeTriggerIndicator {
+  .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);
   }
 
-  .o8nV3W_resizeTrigger[data-focus]:not([data-dragging]) .o8nV3W_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));
+    }
   }
 
-  .o8nV3W_resizeTrigger[data-disabled] .o8nV3W_resizeTriggerIndicator {
+  .qnjB1q_resizeTrigger[data-disabled] .qnjB1q_resizeTriggerIndicator {
     visibility: hidden;
   }
 }

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/Splitter.module.js

@@ -1,10 +1,10 @@
 import './Splitter.css';
 //#region src/components/splitter/Splitter.module.css
 var Splitter_module_default = {
-	"panel": "o8nV3W_panel",
-	"resizeTrigger": "o8nV3W_resizeTrigger",
-	"resizeTriggerIndicator": "o8nV3W_resizeTriggerIndicator",
-	"root": "o8nV3W_root"
+	"panel": "qnjB1q_panel",
+	"resizeTrigger": "qnjB1q_resizeTrigger",
+	"resizeTriggerIndicator": "qnjB1q_resizeTriggerIndicator",
+	"root": "qnjB1q_root"
 };
 //#endregion
 export { Splitter_module_default as default };

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

@@ -1,12 +1,12 @@
 @layer ui.components {
-  ._1ZYGLa_root {
+  .uJ8lyW_root {
     flex: var(--stack-flex, initial);
     flex-direction: var(--stack-direction-mobile, column);
     display: flex;
   }
 
   @media (width >= 640px) {
-    ._1ZYGLa_root {
+    .uJ8lyW_root {
       flex-direction: var(--stack-direction-desktop, var(--stack-direction-mobile, column));
     }
   }

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/stack/Stack.module.js

@@ -1,5 +1,5 @@
 import './Stack.css';
 //#region src/components/stack/Stack.module.css
-var Stack_module_default = { "root": "_1ZYGLa_root" };
+var Stack_module_default = { "root": "uJ8lyW_root" };
 //#endregion
 export { Stack_module_default as default };

package/dist/components/steps/Steps.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .XFk_Vq_root {
+  ._1tbAxa_root {
     box-sizing: border-box;
     width: 100%;
     max-width: var(--steps-max-width, 52rem);
@@ -19,7 +19,7 @@
     }
   }
 
-  .XFk_Vq_list {
+  ._1tbAxa_list {
     width: 100%;
     min-width: 0;
     margin: 0;
@@ -41,7 +41,7 @@
     }
   }
 
-  .XFk_Vq_item {
+  ._1tbAxa_item {
     align-items: center;
     gap: var(--steps-trigger-gap, var(--spacing-3));
     flex: 1 1 0;
@@ -52,7 +52,7 @@
     &:last-child {
       flex: none;
 
-      & .XFk_Vq_separator {
+      & ._1tbAxa_separator {
         display: none;
       }
     }
@@ -64,7 +64,7 @@
     }
   }
 
-  .XFk_Vq_trigger {
+  ._1tbAxa_trigger {
     z-index: 1;
     align-items: center;
     gap: var(--steps-trigger-gap, var(--spacing-3));
@@ -87,7 +87,7 @@
       align-items: flex-start;
     }
 
-    &:focus-visible .XFk_Vq_indicator {
+    &: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);
@@ -98,14 +98,14 @@
     }
 
     @media (hover: hover) {
-      &:hover .XFk_Vq_indicator[data-incomplete] {
+      &:hover ._1tbAxa_indicator[data-incomplete] {
         border-color: var(--steps-indicator-border-color-hover, var(--steps-indicator-border-color-current, var(--color-foreground)));
         color: var(--steps-indicator-color-hover, var(--steps-indicator-color-current, var(--color-foreground)));
       }
     }
   }
 
-  .XFk_Vq_indicator {
+  ._1tbAxa_indicator {
     box-sizing: border-box;
     width: var(--steps-indicator-size, 2rem);
     height: var(--steps-indicator-size, 2rem);
@@ -144,7 +144,7 @@
     }
   }
 
-  .XFk_Vq_separator {
+  ._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);
@@ -169,7 +169,7 @@
     }
   }
 
-  .XFk_Vq_content, .XFk_Vq_completedContent {
+  ._1tbAxa_content, ._1tbAxa_completedContent {
     box-sizing: border-box;
     min-height: var(--steps-content-min-height, 10rem);
     min-width: 0;
@@ -199,13 +199,13 @@
     }
   }
 
-  .XFk_Vq_completedContent {
+  ._1tbAxa_completedContent {
     color: var(--steps-completed-content-color, var(--color-foreground));
     font-weight: var(--steps-completed-content-font-weight, var(--weight-medium));
     text-align: center;
   }
 
-  .XFk_Vq_prevTrigger, .XFk_Vq_nextTrigger {
+  ._1tbAxa_prevTrigger, ._1tbAxa_nextTrigger {
     box-sizing: border-box;
     min-height: var(--steps-action-height, 2rem);
     justify-content: center;
@@ -248,7 +248,7 @@
     }
   }
 
-  .XFk_Vq_nextTrigger {
+  ._1tbAxa_nextTrigger {
     border-color: var(--steps-next-action-border-color, var(--color-foreground));
     background-color: var(--steps-next-action-bg, var(--color-foreground));
     color: var(--steps-next-action-color, var(--color-background));
@@ -260,7 +260,7 @@
     }
   }
 
-  .XFk_Vq_progress {
+  ._1tbAxa_progress {
     width: 100%;
     height: var(--steps-progress-height, var(--border-width-md));
     border-radius: var(--steps-progress-radius, var(--radius-full));

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/steps/Steps.module.js

@@ -1,17 +1,17 @@
 import './Steps.css';
 //#region src/components/steps/Steps.module.css
 var Steps_module_default = {
-	"completedContent": "XFk_Vq_completedContent",
-	"content": "XFk_Vq_content",
-	"indicator": "XFk_Vq_indicator",
-	"item": "XFk_Vq_item",
-	"list": "XFk_Vq_list",
-	"nextTrigger": "XFk_Vq_nextTrigger",
-	"prevTrigger": "XFk_Vq_prevTrigger",
-	"progress": "XFk_Vq_progress",
-	"root": "XFk_Vq_root",
-	"separator": "XFk_Vq_separator",
-	"trigger": "XFk_Vq_trigger"
+	"completedContent": "_1tbAxa_completedContent",
+	"content": "_1tbAxa_content",
+	"indicator": "_1tbAxa_indicator",
+	"item": "_1tbAxa_item",
+	"list": "_1tbAxa_list",
+	"nextTrigger": "_1tbAxa_nextTrigger",
+	"prevTrigger": "_1tbAxa_prevTrigger",
+	"progress": "_1tbAxa_progress",
+	"root": "_1tbAxa_root",
+	"separator": "_1tbAxa_separator",
+	"trigger": "_1tbAxa_trigger"
 };
 //#endregion
 export { Steps_module_default as default };