@techsio/ui-kit 0.3.1 → 0.4.0

package/dist/molecules/steps.js

@@ -1,178 +1,543 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { normalizeProps, useMachine } from "@zag-js/react";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { mergeProps, normalizeProps, useMachine } from "@zag-js/react";
 import { connect, machine } from "@zag-js/steps";
-import { useId } from "react";
+import { createContext, useContext, useId } from "react";
 import { Button } from "../atoms/button.js";
-import { slugify, tv } from "../utils.js";
+import { Icon } from "../atoms/icon.js";
+import { tv } from "../utils.js";
 const stepsVariants = tv({
     slots: {
         root: [
-            'relative flex bg-steps-root-bg',
-            'gap-root',
-            'text-steps-fg',
-            'data-[orientation=horizontal]:flex-col',
-            'data-[orientation=vertical]:grid data-[orientation=vertical]:grid-cols-[auto_1fr]'
+            "flex w-full flex-col gap-steps-root",
+            "text-steps-fg",
+            "data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-start"
         ],
         list: [
-            'relative flex bg-steps-list-bg gap-list',
-            'data-[orientation=vertical]:flex-col',
-            'data-[orientation=vertical]:h-full'
+            "flex w-full gap-steps-list",
+            "data-[orientation=horizontal]:items-start",
+            "data-[orientation=vertical]:w-auto data-[orientation=vertical]:min-w-steps-list-vertical data-[orientation=vertical]:flex-col"
+        ],
+        panels: [
+            "flex w-full flex-col gap-steps-panels",
+            "data-[orientation=vertical]:min-w-0 data-[orientation=vertical]:flex-1"
         ],
         item: [
-            'relative flex bg-steps-item-bg items-center gap-item',
-            'focus-visible:outline-none',
-            'data-[orientation=horizontal]:w-full data-[orientation=horizontal]:justify-start',
-            'data-[orientation=vertical]:flex-col data-[orientation=vertical]:h-full'
+            "relative flex min-w-0 gap-steps-item",
+            "data-[orientation=horizontal]:flex-1 data-[orientation=horizontal]:items-center",
+            "data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start"
         ],
         trigger: [
-            'relative gap-trigger flex cursor-pointer group',
-            'items-center justify-center',
-            'transition-all duration-200',
-            'focus-visible:outline-none',
-            'data-[orientation=horizontal]:flex-row',
-            'data-[orientation=vertical]:flex-col'
+            "group relative flex min-w-0 items-center justify-start gap-steps-trigger",
+            "text-left",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-steps-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)",
+            "data-[orientation=vertical]:items-start",
+            "data-disabled:cursor-not-allowed",
+            "transition-colors duration-200 motion-reduce:transition-none"
         ],
-        content: [
-            'grid p-content bg-steps-content-bg',
-            'focus-visible:outline-none',
-            'focus-visible:ring',
-            'focus-visible:ring-steps-ring',
-            'data-[orientation=horizontal]:w-full',
-            'data-[orientation=vertical]:flex-1'
+        itemText: [
+            "inline-flex min-w-0 flex-col gap-steps-text",
+            "data-[orientation=vertical]:items-start"
         ],
         indicator: [
-            'grid place-items-center',
-            'h-steps-indicator rounded-full aspect-square',
-            'bg-steps-indicator-bg data-[complete]:bg-steps-indicator-bg-complete',
-            'group-focus-visible:ring',
-            'group-focus-visible:ring-steps-ring',
-            'group-hover:bg-steps-indicator-bg-hover',
-            'group-hover:text-steps-fg-active',
-            'transition-all duration-200 ease-out',
-            'data-[current]:bg-steps-indicator-bg-current',
-            'focus-visible:data-[current]:ring',
-            'focus-visible:data-[current]:ring-steps-ring',
-            'data-[current]:outline-none',
-            'data-[current]:text-steps-fg-current data-[complete]:text-steps-fg-active'
+            "flex shrink-0 items-center justify-center rounded-steps-indicator",
+            "border-(length:--border-width-steps-indicator) border-steps-indicator-border",
+            "bg-steps-indicator-bg text-steps-indicator-fg",
+            "group-hover:border-steps-indicator-border-hover group-hover:bg-steps-indicator-bg-hover",
+            "data-current:border-steps-indicator-border-current data-current:bg-steps-indicator-bg-current data-current:text-steps-indicator-fg-current",
+            "data-complete:border-steps-indicator-border-complete data-complete:bg-steps-indicator-bg-complete data-complete:text-steps-indicator-fg-complete",
+            "transition-colors duration-200 motion-reduce:transition-none"
+        ],
+        indicatorIcon: "text-steps-icon",
+        number: [
+            "font-steps-number leading-none"
+        ],
+        title: [
+            "truncate font-steps-title text-steps-title text-steps-title-fg",
+            "data-current:text-steps-title-fg-current",
+            "data-complete:text-steps-title-fg-complete",
+            "transition-colors duration-200 motion-reduce:transition-none"
+        ],
+        description: [
+            "text-steps-description text-steps-description-fg",
+            "data-current:text-steps-description-fg-current",
+            "data-complete:text-steps-description-fg-complete",
+            "transition-colors duration-200 motion-reduce:transition-none"
         ],
         separator: [
-            'bg-steps-separator-bg',
-            'data-[complete]:bg-steps-separator-bg-complete',
-            'data-[orientation=horizontal]:h-steps-separator data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-1',
-            'data-[orientation=vertical]:w-steps-separator data-[orientation=vertical]:h-full'
-        ],
-        containerButtons: [
-            'flex gap-2 h-fit',
-            'data-[orientation=vertical]:col-start-2'
-        ],
-        stepButton: [
-            'rounded-none p-steps-btn',
-            'focus-visible:ring',
-            'focus-visible:ring-steps-ring'
-        ]
+            "shrink-0 rounded-steps-separator bg-steps-separator-bg",
+            "data-current:bg-steps-separator-bg-current",
+            "data-complete:bg-steps-separator-bg-complete",
+            "data-last:hidden",
+            "data-[orientation=horizontal]:h-steps-separator data-[orientation=horizontal]:flex-1",
+            "data-[orientation=vertical]:ms-steps-separator-offset data-[orientation=vertical]:min-h-steps-separator-vertical data-[orientation=vertical]:w-steps-separator data-[orientation=vertical]:flex-1",
+            "transition-colors duration-200 motion-reduce:transition-none"
+        ],
+        progress: [
+            "relative overflow-hidden rounded-steps-progress bg-steps-progress-bg",
+            "data-[orientation=horizontal]:h-steps-progress data-[orientation=horizontal]:w-full",
+            "data-[orientation=vertical]:w-steps-progress data-[orientation=vertical]:self-stretch"
+        ],
+        progressRange: [
+            "absolute rounded-steps-progress bg-steps-progress-range-bg",
+            "transition-[width,height] duration-200 motion-reduce:transition-none",
+            "data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:start-0",
+            "data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:top-0"
+        ],
+        content: [
+            "border-(length:--border-width-steps-content) w-full rounded-steps-content",
+            "border-steps-content-border bg-steps-content-bg",
+            "text-steps-content-fg",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-steps-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)"
+        ],
+        completedContent: [
+            "border-(length:--border-width-steps-content) w-full rounded-steps-content",
+            "border-steps-content-border bg-steps-content-bg",
+            "text-steps-content-fg",
+            "data-complete:border-steps-content-border-complete",
+            "data-complete:bg-steps-content-bg-complete"
+        ],
+        navigation: [
+            "flex flex-wrap items-center gap-steps-navigation",
+            "data-[orientation=vertical]:justify-start"
+        ],
+        prevTrigger: "",
+        nextTrigger: ""
+    },
+    variants: {
+        variant: {
+            subtle: {},
+            solid: {
+                trigger: [
+                    "rounded-steps-trigger px-steps-trigger-x py-steps-trigger-y",
+                    "hover:bg-steps-trigger-bg-hover",
+                    "data-current:bg-steps-trigger-bg-current",
+                    "data-complete:bg-steps-trigger-bg-complete"
+                ],
+                indicator: [
+                    "border-transparent bg-steps-indicator-bg-solid text-steps-indicator-fg-solid",
+                    "group-hover:bg-steps-indicator-bg-solid-hover",
+                    "data-current:bg-steps-indicator-bg-solid-current data-current:text-steps-indicator-fg-solid-current",
+                    "data-complete:bg-steps-indicator-bg-solid-complete data-complete:text-steps-indicator-fg-solid-complete"
+                ]
+            }
+        },
+        size: {
+            sm: {
+                indicator: "size-steps-indicator-sm",
+                indicatorIcon: "text-steps-icon-sm",
+                number: "text-steps-number-sm",
+                title: "text-steps-title-sm",
+                description: "text-steps-description-sm",
+                content: "p-steps-content-sm text-steps-content-sm",
+                completedContent: "p-steps-content-sm text-steps-content-sm"
+            },
+            md: {
+                indicator: "size-steps-indicator-md",
+                indicatorIcon: "text-steps-icon-md",
+                number: "text-steps-number-md",
+                title: "text-steps-title-md",
+                description: "text-steps-description-md",
+                content: "p-steps-content-md text-steps-content-md",
+                completedContent: "p-steps-content-md text-steps-content-md"
+            },
+            lg: {
+                indicator: "size-steps-indicator-lg",
+                indicatorIcon: "text-steps-icon-lg",
+                number: "text-steps-number-lg",
+                title: "text-steps-title-lg",
+                description: "text-steps-description-lg",
+                content: "p-steps-content-lg text-steps-content-lg",
+                completedContent: "p-steps-content-lg text-steps-content-lg"
+            }
+        }
+    },
+    defaultVariants: {
+        variant: "subtle",
+        size: "md"
     }
 });
-function Steps({ id, items, currentStep = 0, orientation = 'horizontal', linear = false, showControls = true, completeText, onStepChange, onStepComplete }) {
+const StepsContext = /*#__PURE__*/ createContext(null);
+function useStepsContext() {
+    const context = useContext(StepsContext);
+    if (!context) throw new Error("Steps components must be used within Steps.Root");
+    return context;
+}
+const StepsItemContext = /*#__PURE__*/ createContext(null);
+function useStepsItemContext() {
+    const context = useContext(StepsItemContext);
+    if (!context) throw new Error("Steps item components must be used within Steps.Item");
+    return context;
+}
+function getStepStatusDataProps(state) {
+    return {
+        "data-complete": state.completed || void 0,
+        "data-current": state.current || void 0,
+        "data-incomplete": state.incomplete || void 0
+    };
+}
+function getOrientationFromApi(api) {
+    const rootProps = api.getRootProps();
+    return rootProps["data-orientation"] ?? "horizontal";
+}
+function getControlSize(size) {
+    if ("sm" === size) return "sm";
+    if ("lg" === size) return "lg";
+    return "md";
+}
+function useSteps({ id, ...props }) {
     const generatedId = useId();
-    const uniqueId = id || generatedId;
     const service = useMachine(machine, {
-        id: uniqueId,
-        count: items.length,
-        step: currentStep,
-        orientation,
+        id: id ?? generatedId,
+        ...props
+    });
+    return connect(service, normalizeProps);
+}
+function Steps({ id, count = 1, defaultStep, dir = "ltr", linear = false, onStepChange, onStepComplete, orientation = "horizontal", size, step, variant, children, className, ref, ...props }) {
+    const api = useSteps({
+        count,
+        defaultStep,
+        dir,
+        id,
         linear,
-        onStepChange: (details)=>{
-            onStepChange?.(details.step);
+        onStepChange,
+        onStepComplete,
+        orientation,
+        step
+    });
+    const styles = stepsVariants({
+        size,
+        variant
+    });
+    const rootProps = mergeProps(props, api.getRootProps());
+    return /*#__PURE__*/ jsx(StepsContext.Provider, {
+        value: {
+            api,
+            orientation,
+            size,
+            styles
         },
-        onStepComplete: ()=>{
-            onStepComplete?.();
-        }
+        children: /*#__PURE__*/ jsx("div", {
+            className: styles.root({
+                className
+            }),
+            ref: ref,
+            ...rootProps,
+            children: children
+        })
+    });
+}
+Steps.RootProvider = function({ value, size, variant, children, className, ref, ...props }) {
+    const styles = stepsVariants({
+        size,
+        variant
     });
-    const api = connect(service, normalizeProps);
-    const { root, list, item, trigger, separator, indicator, content, containerButtons, stepButton } = stepsVariants();
-    return /*#__PURE__*/ jsxs("div", {
-        className: root(),
-        ...api.getRootProps(),
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: list(),
-                ...api.getListProps(),
-                children: items.map((step, index)=>/*#__PURE__*/ jsxs("div", {
-                        className: item(),
-                        ...api.getItemProps({
-                            index
-                        }),
-                        children: [
-                            /*#__PURE__*/ jsxs("button", {
-                                className: trigger(),
-                                ...api.getTriggerProps({
-                                    index
-                                }),
-                                children: [
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: indicator(),
-                                        ...api.getIndicatorProps({
-                                            index
-                                        }),
-                                        children: index + 1
-                                    }),
-                                    /*#__PURE__*/ jsx("span", {
-                                        children: step.title
-                                    })
-                                ]
-                            }),
-                            index < items.length - 1 && /*#__PURE__*/ jsx("div", {
-                                className: separator(),
-                                ...api.getSeparatorProps({
-                                    index
-                                })
-                            })
-                        ]
-                    }, slugify(step.title)))
+    const resolvedOrientation = getOrientationFromApi(value);
+    const rootProps = mergeProps(props, value.getRootProps());
+    return /*#__PURE__*/ jsx(StepsContext.Provider, {
+        value: {
+            api: value,
+            orientation: resolvedOrientation,
+            size,
+            styles
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            className: styles.root({
+                className
             }),
-            items.map((step, index)=>/*#__PURE__*/ jsx("div", {
-                    className: content(),
-                    ...api.getContentProps({
-                        index
-                    }),
-                    children: /*#__PURE__*/ jsxs("article", {
-                        className: "h-fit",
-                        children: [
-                            /*#__PURE__*/ jsx("h3", {
-                                children: step.title
-                            }),
-                            step.content
-                        ]
-                    })
-                }, `content-${slugify(step.title)}`)),
-            /*#__PURE__*/ jsx("div", {
-                className: content(),
-                ...api.getContentProps({
-                    index: items.length
-                }),
-                children: completeText
+            ref: ref,
+            ...rootProps,
+            children: children
+        })
+    });
+};
+Steps.List = function({ children, className, ref, ...props }) {
+    const { api, styles } = useStepsContext();
+    const listProps = mergeProps(props, api.getListProps());
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.list({
+            className
+        }),
+        ref: ref,
+        ...listProps,
+        children: children
+    });
+};
+Steps.Panels = function({ children, className, ref, ...props }) {
+    const { orientation, styles } = useStepsContext();
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.panels({
+            className
+        }),
+        ref: ref,
+        ...props,
+        "data-orientation": orientation,
+        children: children
+    });
+};
+Steps.Navigation = function({ children, className, ref, ...props }) {
+    const { orientation, styles } = useStepsContext();
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.navigation({
+            className
+        }),
+        ref: ref,
+        ...props,
+        "data-orientation": orientation,
+        children: children
+    });
+};
+Steps.Item = function({ index, children, className, ref, ...props }) {
+    const { api, styles } = useStepsContext();
+    const state = api.getItemState({
+        index
+    });
+    const itemProps = mergeProps(props, api.getItemProps({
+        index
+    }));
+    return /*#__PURE__*/ jsx(StepsItemContext.Provider, {
+        value: {
+            index,
+            state
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            className: styles.item({
+                className
             }),
-            showControls && /*#__PURE__*/ jsxs("div", {
-                className: containerButtons(),
-                "data-orientation": orientation,
-                children: [
-                    /*#__PURE__*/ jsx(Button, {
-                        theme: "solid",
-                        size: "sm",
-                        className: stepButton(),
-                        ...api.getPrevTriggerProps(),
-                        children: "Back"
-                    }),
-                    /*#__PURE__*/ jsx(Button, {
-                        size: "sm",
-                        theme: "solid",
-                        className: stepButton(),
-                        ...api.getNextTriggerProps(),
-                        children: "Next"
-                    })
-                ]
-            })
-        ]
+            ref: ref,
+            ...itemProps,
+            children: children
+        })
     });
-}
-export { Steps };
+};
+Steps.Trigger = function({ children, className, disabled, ref, ...props }) {
+    const { api, styles } = useStepsContext();
+    const { index } = useStepsItemContext();
+    const triggerProps = api.getTriggerProps({
+        index
+    });
+    const { onClick: onTriggerClick, disabled: machineDisabled, ...restTriggerProps } = triggerProps;
+    const { onClick, ...restProps } = props;
+    const buttonProps = mergeProps(restProps, restTriggerProps);
+    const isDisabled = Boolean(machineDisabled || disabled);
+    return /*#__PURE__*/ jsx(Button, {
+        className: styles.trigger({
+            className
+        }),
+        ref: ref,
+        size: "current",
+        theme: "unstyled",
+        type: "button",
+        ...buttonProps,
+        "data-disabled": isDisabled || void 0,
+        disabled: isDisabled,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) onTriggerClick?.(event);
+        },
+        children: children
+    });
+};
+Steps.ItemText = function({ children, className, ref, ...props }) {
+    const { orientation, styles } = useStepsContext();
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.itemText({
+            className
+        }),
+        ref: ref,
+        ...props,
+        "data-orientation": orientation,
+        children: children
+    });
+};
+Steps.Indicator = function({ children, className, ref, ...props }) {
+    const { api, styles } = useStepsContext();
+    const { index } = useStepsItemContext();
+    const indicatorProps = mergeProps(props, api.getIndicatorProps({
+        index
+    }));
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.indicator({
+            className
+        }),
+        ref: ref,
+        ...indicatorProps,
+        children: children ?? /*#__PURE__*/ jsx(Steps.Status, {
+            complete: /*#__PURE__*/ jsx(Icon, {
+                className: styles.indicatorIcon(),
+                icon: "token-icon-steps-check"
+            }),
+            current: /*#__PURE__*/ jsx(Steps.Number, {}),
+            incomplete: /*#__PURE__*/ jsx(Steps.Number, {})
+        })
+    });
+};
+Steps.Status = function({ complete, current, incomplete }) {
+    const { state } = useStepsItemContext();
+    if (state.current) return /*#__PURE__*/ jsx(Fragment, {
+        children: current ?? incomplete
+    });
+    if (state.completed) return /*#__PURE__*/ jsx(Fragment, {
+        children: complete
+    });
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: incomplete
+    });
+};
+Steps.Number = function({ className, ref, ...props }) {
+    const { styles } = useStepsContext();
+    const { state } = useStepsItemContext();
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.number({
+            className
+        }),
+        ref: ref,
+        ...props,
+        children: state.index + 1
+    });
+};
+Steps.Title = function({ children, className, ref, ...props }) {
+    const { styles } = useStepsContext();
+    const { state } = useStepsItemContext();
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.title({
+            className
+        }),
+        ref: ref,
+        ...props,
+        ...getStepStatusDataProps(state),
+        children: children
+    });
+};
+Steps.Description = function({ children, className, ref, ...props }) {
+    const { styles } = useStepsContext();
+    const { state } = useStepsItemContext();
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.description({
+            className
+        }),
+        ref: ref,
+        ...props,
+        ...getStepStatusDataProps(state),
+        children: children
+    });
+};
+Steps.Separator = function({ className, ref, ...props }) {
+    const { api, styles } = useStepsContext();
+    const { index, state } = useStepsItemContext();
+    const separatorProps = mergeProps(props, api.getSeparatorProps({
+        index
+    }), {
+        "data-last": state.last || void 0
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.separator({
+            className
+        }),
+        ref: ref,
+        ...separatorProps
+    });
+};
+Steps.Content = function({ index, children, className, ref, ...props }) {
+    const { api, styles } = useStepsContext();
+    const contentProps = mergeProps(props, api.getContentProps({
+        index
+    }));
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.content({
+            className
+        }),
+        ref: ref,
+        ...contentProps,
+        children: children
+    });
+};
+Steps.Progress = function({ className, ref, style, ...props }) {
+    const { api, orientation, styles } = useStepsContext();
+    const progressProps = mergeProps(props, api.getProgressProps());
+    const progressRangeStyle = "horizontal" === orientation ? {
+        width: "var(--percent)"
+    } : {
+        height: "var(--percent)"
+    };
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.progress({
+            className
+        }),
+        ref: ref,
+        ...progressProps,
+        "data-orientation": orientation,
+        style: style,
+        children: /*#__PURE__*/ jsx("span", {
+            "aria-hidden": "true",
+            className: styles.progressRange(),
+            "data-orientation": orientation,
+            style: progressRangeStyle
+        })
+    });
+};
+Steps.CompletedContent = function({ children, className, ref, ...props }) {
+    const { api, styles } = useStepsContext();
+    const contentProps = mergeProps(props, api.getContentProps({
+        index: api.count
+    }));
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.completedContent({
+            className
+        }),
+        ref: ref,
+        ...contentProps,
+        "data-complete": api.isCompleted || void 0,
+        children: children
+    });
+};
+Steps.PrevTrigger = function({ className, ref, size, theme = "outlined", variant = "secondary", ...props }) {
+    const { api, styles, size: rootSize } = useStepsContext();
+    const { onClick: onPrevTriggerClick, disabled: prevTriggerDisabled, ...restPrevTriggerProps } = api.getPrevTriggerProps();
+    const { onClick, disabled, ...restProps } = props;
+    const buttonProps = mergeProps(restProps, restPrevTriggerProps);
+    const isDisabled = Boolean(disabled || prevTriggerDisabled);
+    return /*#__PURE__*/ jsx(Button, {
+        className: styles.prevTrigger({
+            className
+        }),
+        ref: ref,
+        size: size ?? getControlSize(rootSize),
+        theme: theme,
+        variant: variant,
+        ...buttonProps,
+        disabled: isDisabled,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) onPrevTriggerClick?.(event);
+        }
+    });
+};
+Steps.NextTrigger = function({ className, ref, size, theme = "solid", variant = "primary", ...props }) {
+    const { api, styles, size: rootSize } = useStepsContext();
+    const { onClick: onNextTriggerClick, disabled: nextTriggerDisabled, ...restNextTriggerProps } = api.getNextTriggerProps();
+    const { onClick, disabled, ...restProps } = props;
+    const buttonProps = mergeProps(restProps, restNextTriggerProps);
+    const isDisabled = Boolean(disabled || nextTriggerDisabled);
+    return /*#__PURE__*/ jsx(Button, {
+        className: styles.nextTrigger({
+            className
+        }),
+        ref: ref,
+        size: size ?? getControlSize(rootSize),
+        theme: theme,
+        variant: variant,
+        ...buttonProps,
+        disabled: isDisabled,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) onNextTriggerClick?.(event);
+        }
+    });
+};
+Steps.Root = Steps;
+Steps.displayName = "Steps";
+export { Steps, useSteps };