@moduix/react 2.2.0 → 2.2.4

package/dist/components/steps/Steps.js

@@ -1,123 +1,124 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import { CheckIcon } from "../../lib/moduix/icons/ui/Icons.js";
-import Steps_module_default from "./Steps.module.js";
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Steps, useSteps, useStepsContext, useStepsItemContext } from "@ark-ui/react/steps";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-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, {
-		ref,
-		"data-slot": "steps-root",
-		className: clsx(Steps_module_default.root, normalizeClassName(className)),
-		...props
-	});
+import { CheckIcon } from "../../internal/icons/ui/index.js";
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Steps_module from "./Steps.module.js";
+const Steps_StepsRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Steps.Root, {
+        ref: ref,
+        "data-slot": "steps-root",
+        className: clsx(Steps_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const StepsRootProvider = forwardRef(function StepsRootProvider({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Steps.RootProvider, {
-		ref,
-		"data-slot": "steps-root-provider",
-		className: clsx(Steps_module_default.root, normalizeClassName(className)),
-		...props
-	});
+const Steps_StepsRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Steps.RootProvider, {
+        ref: ref,
+        "data-slot": "steps-root-provider",
+        className: clsx(Steps_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const StepsList = forwardRef(function StepsList({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Steps.List, {
-		ref,
-		"data-slot": "steps-list",
-		className: clsx(Steps_module_default.list, normalizeClassName(className)),
-		...props
-	});
+const Steps_StepsList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Steps.List, {
+        ref: ref,
+        "data-slot": "steps-list",
+        className: clsx(Steps_module.list, normalizeClassName(className)),
+        ...props
+    });
 });
-const StepsItem = forwardRef(function StepsItem({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Steps.Item, {
-		ref,
-		"data-slot": "steps-item",
-		className: clsx(Steps_module_default.item, normalizeClassName(className)),
-		...props
-	});
+const Steps_StepsItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Steps.Item, {
+        ref: ref,
+        "data-slot": "steps-item",
+        className: clsx(Steps_module.item, normalizeClassName(className)),
+        ...props
+    });
 });
-const StepsTrigger = forwardRef(function StepsTrigger({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Steps.Trigger, {
-		ref,
-		"data-slot": "steps-trigger",
-		className: clsx(Steps_module_default.trigger, normalizeClassName(className)),
-		...props
-	});
+const Steps_StepsTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Steps.Trigger, {
+        ref: ref,
+        "data-slot": "steps-trigger",
+        className: clsx(Steps_module.trigger, normalizeClassName(className)),
+        ...props
+    });
 });
-const StepsIndicator = forwardRef(function StepsIndicator({ className, children, ...props }, ref) {
-	const item = useStepsItemContext();
-	return /* @__PURE__ */ jsx(Steps.Indicator, {
-		ref,
-		"data-slot": "steps-indicator",
-		className: clsx(Steps_module_default.indicator, normalizeClassName(className)),
-		...props,
-		children: children ?? (item.completed ? /* @__PURE__ */ jsx(CheckIcon, {}) : item.index + 1)
-	});
+const Steps_StepsIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
+    const item = useStepsItemContext();
+    return /*#__PURE__*/ jsx(Steps.Indicator, {
+        ref: ref,
+        "data-slot": "steps-indicator",
+        className: clsx(Steps_module.indicator, normalizeClassName(className)),
+        ...props,
+        children: children ?? (item.completed ? /*#__PURE__*/ jsx(CheckIcon, {}) : item.index + 1)
+    });
 });
-const StepsSeparator = forwardRef(function StepsSeparator({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Steps.Separator, {
-		ref,
-		"data-slot": "steps-separator",
-		className: clsx(Steps_module_default.separator, normalizeClassName(className)),
-		...props
-	});
+const Steps_StepsSeparator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Steps.Separator, {
+        ref: ref,
+        "data-slot": "steps-separator",
+        className: clsx(Steps_module.separator, normalizeClassName(className)),
+        ...props
+    });
 });
-const StepsContent = forwardRef(function StepsContent({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Steps.Content, {
-		ref,
-		"data-slot": "steps-content",
-		className: clsx(Steps_module_default.content, normalizeClassName(className)),
-		...props
-	});
+const Steps_StepsContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Steps.Content, {
+        ref: ref,
+        "data-slot": "steps-content",
+        className: clsx(Steps_module.content, normalizeClassName(className)),
+        ...props
+    });
 });
-const StepsCompletedContent = forwardRef(function StepsCompletedContent({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Steps.CompletedContent, {
-		ref,
-		"data-slot": "steps-completed-content",
-		className: clsx(Steps_module_default.completedContent, normalizeClassName(className)),
-		...props
-	});
+const Steps_StepsCompletedContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Steps.CompletedContent, {
+        ref: ref,
+        "data-slot": "steps-completed-content",
+        className: clsx(Steps_module.completedContent, normalizeClassName(className)),
+        ...props
+    });
 });
-const StepsPrevTrigger = forwardRef(function StepsPrevTrigger({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Steps.PrevTrigger, {
-		ref,
-		"data-slot": "steps-prev-trigger",
-		className: clsx(Steps_module_default.prevTrigger, normalizeClassName(className)),
-		...props
-	});
+const Steps_StepsPrevTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Steps.PrevTrigger, {
+        ref: ref,
+        "data-slot": "steps-prev-trigger",
+        className: clsx(Steps_module.prevTrigger, normalizeClassName(className)),
+        ...props
+    });
 });
-const StepsNextTrigger = forwardRef(function StepsNextTrigger({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Steps.NextTrigger, {
-		ref,
-		"data-slot": "steps-next-trigger",
-		className: clsx(Steps_module_default.nextTrigger, normalizeClassName(className)),
-		...props
-	});
+const Steps_StepsNextTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Steps.NextTrigger, {
+        ref: ref,
+        "data-slot": "steps-next-trigger",
+        className: clsx(Steps_module.nextTrigger, normalizeClassName(className)),
+        ...props
+    });
 });
-const StepsProgress = forwardRef(function StepsProgress({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Steps.Progress, {
-		ref,
-		"data-slot": "steps-progress",
-		className: clsx(Steps_module_default.progress, normalizeClassName(className)),
-		...props
-	});
+const Steps_StepsProgress = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Steps.Progress, {
+        ref: ref,
+        "data-slot": "steps-progress",
+        className: clsx(Steps_module.progress, normalizeClassName(className)),
+        ...props
+    });
 });
-const Steps$1 = Object.assign(StepsRoot, {
-	Root: StepsRoot,
-	RootProvider: StepsRootProvider,
-	List: StepsList,
-	Item: StepsItem,
-	Trigger: StepsTrigger,
-	Indicator: StepsIndicator,
-	Separator: StepsSeparator,
-	Content: StepsContent,
-	CompletedContent: StepsCompletedContent,
-	PrevTrigger: StepsPrevTrigger,
-	NextTrigger: StepsNextTrigger,
-	Progress: StepsProgress,
-	useSteps
+const Steps_Steps = Object.assign(Steps_StepsRoot, {
+    Root: Steps_StepsRoot,
+    RootProvider: Steps_StepsRootProvider,
+    Context: Steps.Context,
+    ItemContext: Steps.ItemContext,
+    List: Steps_StepsList,
+    Item: Steps_StepsItem,
+    Trigger: Steps_StepsTrigger,
+    Indicator: Steps_StepsIndicator,
+    Separator: Steps_StepsSeparator,
+    Content: Steps_StepsContent,
+    CompletedContent: Steps_StepsCompletedContent,
+    PrevTrigger: Steps_StepsPrevTrigger,
+    NextTrigger: Steps_StepsNextTrigger,
+    Progress: Steps_StepsProgress,
+    useSteps: useSteps
 });
-//#endregion
-export { Steps$1 as Steps };
+export { Steps_Steps as Steps, useSteps, useStepsContext, useStepsItemContext };

package/dist/components/steps/Steps.module.js

@@ -1,17 +1,15 @@
-import './Steps.css';
-//#region src/components/steps/Steps.module.css
-var Steps_module_default = {
-	"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"
+import "./Steps_module.css";
+const Steps_module = {
+    root: "root-FkZrbo",
+    list: "list-heLEy0",
+    item: "item-mpBfoh",
+    separator: "separator-KWpGaK",
+    trigger: "trigger-mmZxCr",
+    indicator: "indicator-C3B2HX",
+    content: "content-AM56xB",
+    completedContent: "completedContent-qEpQ8K",
+    prevTrigger: "prevTrigger-n0gQx3",
+    nextTrigger: "nextTrigger-y2dzVS",
+    progress: "progress-oYMuFz"
 };
-//#endregion
-export { Steps_module_default as default };
+export default Steps_module;

package/dist/components/steps/{Steps.css → Steps_module.css}

@@ -1,70 +1,89 @@
 @layer moduix.components {
-  ._1tbAxa_root {
+  .root-FkZrbo {
     box-sizing: border-box;
     width: 100%;
     max-width: var(--moduix-steps-max-width, 52rem);
     min-width: 0;
     color: var(--moduix-steps-color, var(--moduix-color-foreground));
     display: flex;
+  }
+
+  .root-FkZrbo[data-orientation="horizontal"] {
+    gap: var(--moduix-steps-root-gap, var(--moduix-spacing-4));
+    flex-direction: column;
+  }
+
+  .root-FkZrbo[data-orientation="vertical"] {
+    align-items: stretch;
+    gap: var(--moduix-steps-vertical-gap, var(--moduix-spacing-6));
+    flex-direction: row;
+  }
 
-    &[data-orientation="horizontal"] {
+  @media (max-width: 40rem) {
+    .root-FkZrbo[data-orientation="vertical"] {
       gap: var(--moduix-steps-root-gap, var(--moduix-spacing-4));
       flex-direction: column;
     }
-
-    &[data-orientation="vertical"] {
-      align-items: stretch;
-      gap: var(--moduix-steps-vertical-gap, var(--moduix-spacing-6));
-      flex-direction: row;
-    }
   }
 
-  ._1tbAxa_list {
+  .list-heLEy0 {
     width: 100%;
     min-width: 0;
     margin: 0;
     padding: 0;
     list-style: none;
     display: flex;
+  }
 
-    &[data-orientation="horizontal"] {
-      flex-direction: row;
-      align-items: center;
+  .list-heLEy0[data-orientation="horizontal"] {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .list-heLEy0[data-orientation="vertical"] {
+    align-items: flex-start;
+    gap: var(--moduix-steps-gap, var(--moduix-spacing-4));
+    flex-direction: column;
+    flex: none;
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+
+  @media (max-width: 40rem) {
+    .list-heLEy0[data-orientation="horizontal"] {
+      scrollbar-width: thin;
+      overflow-x: auto;
     }
 
-    &[data-orientation="vertical"] {
-      align-items: flex-start;
-      gap: var(--moduix-steps-gap, var(--moduix-spacing-4));
-      flex-direction: column;
+    .list-heLEy0[data-orientation="horizontal"] .item-mpBfoh {
       flex: none;
-      width: fit-content;
     }
   }
 
-  ._1tbAxa_item {
+  .item-mpBfoh {
     align-items: center;
     gap: var(--moduix-steps-trigger-gap, var(--moduix-spacing-3));
     flex: 1 1 0;
     min-width: 0;
     display: flex;
     position: relative;
+  }
 
-    &:last-child {
-      flex: none;
+  .item-mpBfoh:last-child {
+    flex: none;
+  }
 
-      & ._1tbAxa_separator {
-        display: none;
-      }
-    }
+  .item-mpBfoh:last-child .separator-KWpGaK {
+    display: none;
+  }
 
-    &[data-orientation="vertical"] {
-      min-height: var(--moduix-steps-vertical-item-min-height, 4rem);
-      flex: none;
-      align-items: flex-start;
-    }
+  .item-mpBfoh[data-orientation="vertical"] {
+    min-height: var(--moduix-steps-vertical-item-min-height, 4rem);
+    flex: none;
+    align-items: flex-start;
   }
 
-  ._1tbAxa_trigger {
+  .trigger-mmZxCr {
     z-index: 1;
     align-items: center;
     gap: var(--moduix-steps-trigger-gap, var(--moduix-spacing-3));
@@ -73,6 +92,7 @@
     color: inherit;
     font: inherit;
     text-align: left;
+    -webkit-user-select: none;
     user-select: none;
     cursor: pointer;
     background: none;
@@ -82,30 +102,30 @@
     text-decoration: none;
     display: inline-flex;
     position: relative;
+  }
 
-    &[data-orientation="vertical"] {
-      align-items: flex-start;
-    }
+  .trigger-mmZxCr[data-orientation="vertical"] {
+    align-items: flex-start;
+  }
 
-    &:focus-visible ._1tbAxa_indicator {
-      outline: var(--moduix-steps-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+  .trigger-mmZxCr:focus-visible {
+    outline: var(--moduix-steps-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
         solid var(--moduix-steps-focus-ring-color, var(--moduix-color-ring));
-      outline-offset: var(--moduix-steps-focus-ring-offset, var(--moduix-focus-ring-offset));
-    }
+    outline-offset: var(--moduix-steps-focus-ring-offset, var(--moduix-focus-ring-offset));
+  }
 
-    &[data-incomplete] {
-      color: var(--moduix-steps-trigger-color-incomplete, inherit);
-    }
+  .trigger-mmZxCr[data-incomplete] {
+    color: var(--moduix-steps-trigger-color-incomplete, inherit);
+  }
 
-    @media (hover: hover) {
-      &:hover ._1tbAxa_indicator[data-incomplete] {
-        border-color: var(--moduix-steps-indicator-border-color-hover, var(--moduix-steps-indicator-border-color-current, var(--moduix-color-foreground)));
-        color: var(--moduix-steps-indicator-color-hover, var(--moduix-steps-indicator-color-current, var(--moduix-color-foreground)));
-      }
+  @media (hover: hover) {
+    .trigger-mmZxCr:hover .indicator-C3B2HX[data-incomplete] {
+      border-color: var(--moduix-steps-indicator-border-color-hover, var(--moduix-steps-indicator-border-color-current, var(--moduix-color-foreground)));
+      color: var(--moduix-steps-indicator-color-hover, var(--moduix-steps-indicator-color-current, var(--moduix-color-foreground)));
     }
   }
 
-  ._1tbAxa_indicator {
+  .indicator-C3B2HX {
     box-sizing: border-box;
     width: var(--moduix-steps-indicator-size, var(--moduix-spacing-8));
     height: var(--moduix-steps-indicator-size, var(--moduix-spacing-8));
@@ -125,52 +145,53 @@
     align-items: center;
     line-height: 1;
     display: inline-flex;
+  }
 
-    & :where(svg) {
-      width: var(--moduix-steps-indicator-icon-size, var(--moduix-spacing-3-5));
-      height: var(--moduix-steps-indicator-icon-size, var(--moduix-spacing-3-5));
-    }
+  .indicator-C3B2HX :where(svg) {
+    width: var(--moduix-steps-indicator-icon-size, var(--moduix-spacing-3-5));
+    height: var(--moduix-steps-indicator-icon-size, var(--moduix-spacing-3-5));
+  }
 
-    &[data-current] {
-      border-color: var(--moduix-steps-indicator-border-color-current, var(--moduix-steps-indicator-border-color-complete, var(--moduix-color-foreground)));
-      background-color: var(--moduix-steps-indicator-bg-current, var(--moduix-steps-indicator-bg, var(--moduix-color-background)));
-      color: var(--moduix-steps-indicator-color-current, var(--moduix-color-foreground));
-    }
+  .indicator-C3B2HX[data-current] {
+    border-color: var(--moduix-steps-indicator-border-color-current, var(--moduix-steps-indicator-border-color-complete, var(--moduix-color-foreground)));
+    background-color: var(--moduix-steps-indicator-bg-current, var(--moduix-steps-indicator-bg, var(--moduix-color-background)));
+    color: var(--moduix-steps-indicator-color-current, var(--moduix-color-foreground));
+  }
 
-    &[data-complete] {
-      border-color: var(--moduix-steps-indicator-border-color-complete, var(--moduix-color-foreground));
-      background-color: var(--moduix-steps-indicator-bg-complete, var(--moduix-color-foreground));
-      color: var(--moduix-steps-indicator-color-complete, var(--moduix-color-background));
-    }
+  .indicator-C3B2HX[data-complete] {
+    border-color: var(--moduix-steps-indicator-border-color-complete, var(--moduix-color-foreground));
+    background-color: var(--moduix-steps-indicator-bg-complete, var(--moduix-color-foreground));
+    color: var(--moduix-steps-indicator-color-complete, var(--moduix-color-background));
   }
 
-  ._1tbAxa_separator {
+  .separator-KWpGaK {
     height: var(--moduix-steps-separator-thickness, var(--moduix-border-width-sm));
     min-width: var(--moduix-steps-separator-min-width, var(--moduix-spacing-8));
     margin-inline: var(--moduix-steps-separator-inset, var(--moduix-spacing-2));
     background-color: var(--moduix-steps-separator-color, var(--moduix-color-border));
     pointer-events: none;
     flex: auto;
+  }
 
-    &[data-complete] {
-      background-color: var(--moduix-steps-separator-color-complete, var(--moduix-color-foreground));
-    }
+  .separator-KWpGaK[data-complete] {
+    background-color: var(--moduix-steps-separator-color-complete, var(--moduix-color-foreground));
+  }
 
-    &[data-orientation="vertical"] {
-      top: calc(var(--moduix-steps-indicator-size, var(--moduix-spacing-8)) +
+  .separator-KWpGaK[data-orientation="vertical"] {
+    top: calc(var(--moduix-steps-indicator-size, var(--moduix-spacing-8)) +
           var(--moduix-steps-separator-inset, var(--moduix-spacing-2)));
-      bottom: calc(var(--moduix-steps-gap, var(--moduix-spacing-4)) * -1);
-      left: calc(var(--moduix-steps-indicator-size, var(--moduix-spacing-8)) / 2);
-      width: var(--moduix-steps-separator-thickness, var(--moduix-border-width-sm));
-      min-width: 0;
-      height: auto;
-      margin-inline: 0;
-      position: absolute;
-      translate: -50%;
-    }
+    bottom: calc(var(--moduix-steps-gap, var(--moduix-spacing-4)) * -1);
+    width: var(--moduix-steps-separator-thickness, var(--moduix-border-width-sm));
+    min-width: 0;
+    height: auto;
+    margin-inline: 0;
+    position: absolute;
+    inset-inline-start: calc((var(--moduix-steps-indicator-size, var(--moduix-spacing-8)) -
+            var(--moduix-steps-separator-thickness, var(--moduix-border-width-sm))) /
+          2);
   }
 
-  ._1tbAxa_content, ._1tbAxa_completedContent {
+  .content-AM56xB, .completedContent-qEpQ8K {
     box-sizing: border-box;
     min-height: var(--moduix-steps-content-min-height, 10rem);
     min-width: 0;
@@ -184,29 +205,29 @@
     outline: none;
     place-items: center;
     display: grid;
+  }
 
-    &[hidden]:not([hidden="until-found"]) {
-      display: none;
-    }
+  :is(.content-AM56xB, .completedContent-qEpQ8K)[hidden]:not([hidden="until-found"]) {
+    display: none;
+  }
 
-    &[data-orientation="vertical"] {
-      flex: auto;
-    }
+  :is(.content-AM56xB, .completedContent-qEpQ8K)[data-orientation="vertical"] {
+    flex: auto;
+  }
 
-    &:focus-visible {
-      outline: var(--moduix-steps-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+  :is(.content-AM56xB, .completedContent-qEpQ8K):focus-visible {
+    outline: var(--moduix-steps-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
         solid var(--moduix-steps-focus-ring-color, var(--moduix-color-ring));
-      outline-offset: calc(var(--moduix-steps-focus-ring-offset, var(--moduix-focus-ring-offset)) * -1);
-    }
+    outline-offset: calc(var(--moduix-steps-focus-ring-offset, var(--moduix-focus-ring-offset)) * -1);
   }
 
-  ._1tbAxa_completedContent {
+  .completedContent-qEpQ8K {
     color: var(--moduix-steps-completed-content-color, var(--moduix-color-foreground));
     font-weight: var(--moduix-steps-completed-content-font-weight, var(--moduix-weight-medium));
     text-align: center;
   }
 
-  ._1tbAxa_prevTrigger, ._1tbAxa_nextTrigger {
+  .prevTrigger-n0gQx3, .nextTrigger-y2dzVS {
     box-sizing: border-box;
     min-height: var(--moduix-steps-action-height, var(--moduix-size-sm));
     justify-content: center;
@@ -230,38 +251,38 @@
     outline: none;
     text-decoration: none;
     display: inline-flex;
+  }
 
-    @media (hover: hover) {
-      &:hover:not(:disabled):not([data-disabled]) {
-        background-color: var(--moduix-steps-action-bg-hover, var(--moduix-color-accent));
-      }
+  @media (hover: hover) {
+    :is(.prevTrigger-n0gQx3, .nextTrigger-y2dzVS):hover:not(:disabled):not([data-disabled]) {
+      background-color: var(--moduix-steps-action-bg-hover, var(--moduix-color-accent));
     }
+  }
 
-    &:focus-visible {
-      outline: var(--moduix-steps-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+  :is(.prevTrigger-n0gQx3, .nextTrigger-y2dzVS):focus-visible {
+    outline: var(--moduix-steps-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
         solid var(--moduix-steps-focus-ring-color, var(--moduix-color-ring));
-      outline-offset: var(--moduix-steps-focus-ring-offset, var(--moduix-focus-ring-offset));
-    }
+    outline-offset: var(--moduix-steps-focus-ring-offset, var(--moduix-focus-ring-offset));
+  }
 
-    &:is(:disabled, [data-disabled]) {
-      opacity: var(--moduix-steps-disabled-opacity, var(--moduix-opacity-disabled));
-      cursor: default;
-    }
+  :is(.prevTrigger-n0gQx3, .nextTrigger-y2dzVS):is(:disabled, [data-disabled]) {
+    opacity: var(--moduix-steps-disabled-opacity, var(--moduix-opacity-disabled));
+    cursor: default;
   }
 
-  ._1tbAxa_nextTrigger {
+  .nextTrigger-y2dzVS {
     border-color: var(--moduix-steps-next-action-border-color, var(--moduix-color-foreground));
     background-color: var(--moduix-steps-next-action-bg, var(--moduix-color-foreground));
     color: var(--moduix-steps-next-action-color, var(--moduix-color-background));
+  }
 
-    @media (hover: hover) {
-      &:hover:not(:disabled):not([data-disabled]) {
-        background-color: var(--moduix-steps-next-action-bg-hover, var(--moduix-color-foreground));
-      }
+  @media (hover: hover) {
+    .nextTrigger-y2dzVS:hover:not(:disabled):not([data-disabled]) {
+      background-color: var(--moduix-steps-next-action-bg-hover, var(--moduix-color-foreground));
     }
   }
 
-  ._1tbAxa_progress {
+  .progress-oYMuFz {
     width: 100%;
     height: var(--moduix-steps-progress-height, var(--moduix-border-width-md));
     border-radius: var(--moduix-steps-progress-radius, var(--moduix-radius-full));
@@ -269,16 +290,17 @@
     display: block;
     position: relative;
     overflow: hidden;
+  }
 
-    &:before {
-      content: "";
-      width: var(--percent, 0%);
-      border-radius: inherit;
-      background-color: var(--moduix-steps-progress-fill-bg, var(--moduix-color-foreground));
-      transition: width var(--moduix-transition-default);
-      position: absolute;
-      inset-block: 0;
-      inset-inline-start: 0;
-    }
+  .progress-oYMuFz:before {
+    content: "";
+    width: var(--percent, 0%);
+    border-radius: inherit;
+    background-color: var(--moduix-steps-progress-fill-bg, var(--moduix-color-foreground));
+    transition: width var(--moduix-transition-default);
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
   }
 }
+

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

@@ -1,2 +1 @@
-import { Steps } from "./Steps.js";
-export { Steps };
+export { Steps, useSteps, useStepsContext, useStepsItemContext } from './Steps.js';

package/dist/components/steps/index.js

@@ -0,0 +1 @@
+export { Steps, useSteps, useStepsContext, useStepsItemContext } from "./Steps.js";