@nexus-cross/design-system 1.0.4-beta.1 → 1.0.4

package/dist/chunks/{chunk-LBKBCI2K.mjs → chunk-VIGRCJAE.mjs}

@@ -22,17 +22,10 @@ var ErrorBoundary = class extends React.Component {
         "div",
         {
           role: "alert",
-          style: {
-            padding: "16px",
-            borderRadius: "8px",
-            border: "1px solid #ef4444",
-            backgroundColor: "#fef2f2",
-            color: "#991b1b",
-            fontSize: "14px"
-          },
+          className: "nexus-error-boundary",
           children: [
-            /* @__PURE__ */ jsx("p", { style: { margin: 0, fontWeight: 600 }, children: "Something went wrong" }),
-            this.state.error && /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0", opacity: 0.8 }, children: this.state.error.message })
+            /* @__PURE__ */ jsx("p", { className: "nexus-error-boundary__title", children: "Something went wrong" }),
+            this.state.error && /* @__PURE__ */ jsx("p", { className: "nexus-error-boundary__message", children: this.state.error.message })
           ]
         }
       );

package/dist/chunks/chunk-VVXQZ4XH.mjs

@@ -0,0 +1,93 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var buttonVariants = cva("nexus-btn", {
+  variants: {
+    semantic: {
+      primary: "nexus-btn--primary",
+      secondary: "nexus-btn--secondary",
+      normal: "nexus-btn--normal",
+      danger: "nexus-btn--danger"
+    },
+    variant: {
+      contained: "nexus-btn--contained",
+      outlined: "nexus-btn--outlined",
+      subtle: "nexus-btn--subtle",
+      ghost: "nexus-btn--ghost"
+    },
+    size: {
+      xl: "nexus-btn--xl",
+      lg: "nexus-btn--lg",
+      md: "nexus-btn--md",
+      sm: "nexus-btn--sm"
+    },
+    radius: {
+      default: "",
+      circle: "nexus-btn--circle"
+    }
+  },
+  defaultVariants: {
+    semantic: "primary",
+    variant: "contained",
+    size: "md",
+    radius: "default"
+  }
+});
+var Button = React.forwardRef(
+  ({
+    className,
+    semantic,
+    variant,
+    size,
+    radius,
+    asChild = false,
+    detectDoubleClick = false,
+    disabled,
+    children,
+    onClick,
+    style,
+    ...props
+  }, ref) => {
+    const clickTimeoutRef = React.useRef(
+      null
+    );
+    const handleClick = React.useCallback(
+      (e) => {
+        if (detectDoubleClick && clickTimeoutRef.current) return;
+        onClick?.(e);
+        if (detectDoubleClick) {
+          clickTimeoutRef.current = setTimeout(() => {
+            clickTimeoutRef.current = null;
+          }, 500);
+        }
+      },
+      [detectDoubleClick, onClick]
+    );
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        type: asChild ? void 0 : "button",
+        role: asChild ? "button" : void 0,
+        className: cn(
+          buttonVariants({ semantic, variant, size, radius }),
+          className
+        ),
+        disabled: asChild ? void 0 : disabled,
+        "aria-disabled": disabled || void 0,
+        tabIndex: disabled ? -1 : void 0,
+        onClick: disabled ? void 0 : handleClick,
+        style,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/dist/chunks/{chunk-Z7OKV6NW.mjs → chunk-W4GG5A7K.mjs}

@@ -1,25 +1,17 @@
-import { cn } from './chunk-XALPBGSC.mjs';
+import { cn } from './chunk-MCKOWMLS.mjs';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
-var tooltipContentVariants = cva(
-  [
-    "nx:z-50 nx:flex nx:overflow-hidden nx:rounded-md nx:border nx:px-3 nx:py-2 nx:text-sm",
-    "nx:data-[state=closed]:animate-out nx:data-[state=closed]:fade-out-0 nx:data-[state=closed]:zoom-out-95",
-    "nx:data-[side=bottom]:slide-in-from-top-2 nx:data-[side=left]:slide-in-from-right-2",
-    "nx:data-[side=right]:slide-in-from-left-2 nx:data-[side=top]:slide-in-from-bottom-2"
-  ],
-  {
-    variants: {
-      variant: {
-        light: "nx:border nx:border-border-default nx:bg-static-white nx:text-static-black nx:shadow-md",
-        dark: "nx:border-none nx:bg-static-black nx:text-static-white"
-      }
-    },
-    defaultVariants: { variant: "dark" }
-  }
-);
+var tooltipContentVariants = cva("nexus-tooltip-content", {
+  variants: {
+    variant: {
+      light: "nexus-tooltip--light",
+      dark: "nexus-tooltip--dark"
+    }
+  },
+  defaultVariants: { variant: "dark" }
+});
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = ({
   children,
@@ -34,7 +26,7 @@ var Tooltip = ({
 }) => {
   if (disabled) return /* @__PURE__ */ jsx(Fragment, { children });
   return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration, children: /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { children: [
-    /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, className: cn("nx:cursor-default", triggerClassName), children: /* @__PURE__ */ jsx("span", { children }) }),
+    /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, className: cn("nexus-tooltip-trigger", triggerClassName), children: /* @__PURE__ */ jsx("span", { children }) }),
     /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
       TooltipPrimitive.Content,
       {
@@ -47,7 +39,7 @@ var Tooltip = ({
           /* @__PURE__ */ jsx(
             TooltipPrimitive.Arrow,
             {
-              style: { fill: variant === "dark" ? "#000000" : "#FFFFFF" }
+              className: variant === "dark" ? "nexus-tooltip-arrow--dark" : "nexus-tooltip-arrow--light"
             }
           )
         ]

package/dist/chunks/chunk-WGGBE4ZD.mjs

@@ -0,0 +1,201 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function formatWithComma(value) {
+  if (!value) return value;
+  const [intPart, decPart] = value.split(".");
+  const formatted = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return decPart !== void 0 ? `${formatted}.${decPart}` : formatted;
+}
+function stripComma(value) {
+  return value.replace(/,/g, "");
+}
+var priceInputVariants = cva("nexus-price-input", {
+  variants: {
+    size: {
+      md: "nexus-price-input--md",
+      lg: "nexus-price-input--lg",
+      xl: "nexus-price-input--xl"
+    },
+    state: {
+      default: "nexus-price-input--default",
+      error: "nexus-price-input--error"
+    }
+  },
+  defaultVariants: { size: "md", state: "default" }
+});
+var PriceInput = React.forwardRef(
+  ({
+    className,
+    size,
+    error,
+    prefix = true,
+    suffix,
+    label,
+    description,
+    balance,
+    balanceLabel = "Balance",
+    balanceContent,
+    maxBalance,
+    separator = false,
+    align = "left",
+    onValueChange,
+    onBalanceClick,
+    onChange,
+    value: controlledValue,
+    disabled,
+    id,
+    ...props
+  }, ref) => {
+    const fallbackId = React.useRef(
+      `nexus-pi-${Math.random().toString(36).slice(2, 9)}`
+    );
+    const inputId = id || fallbackId.current;
+    const inputRef = React.useRef(null);
+    const setInputRef = React.useCallback(
+      (node) => {
+        inputRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      [ref]
+    );
+    const isControlled = controlledValue !== void 0;
+    const [internalValue, setInternalValue] = React.useState("");
+    const currentValue = isControlled ? String(controlledValue) : internalValue;
+    const numericValue = currentValue !== "" ? parseFloat(currentValue) : NaN;
+    const isExceeded = maxBalance !== void 0 && !Number.isNaN(numericValue) && numericValue > maxBalance;
+    const hasError = error || isExceeded;
+    const state = hasError ? "error" : "default";
+    const prefixContent = prefix === true ? "$" : prefix === false ? null : prefix;
+    const hasHeader = !!(label || balance !== void 0);
+    const hasField = hasHeader || !!description;
+    const handleChange = React.useCallback(
+      (e) => {
+        const rawInput = e.target.value;
+        const raw = separator ? stripComma(rawInput) : rawInput;
+        if (!isControlled) setInternalValue(raw);
+        onValueChange?.(raw);
+        onChange?.(e);
+        if (separator && inputRef.current) {
+          const cursorPos = e.target.selectionStart ?? 0;
+          const commasBefore = (rawInput.slice(0, cursorPos).match(/,/g) || []).length;
+          const formatted = formatWithComma(raw);
+          const el = inputRef.current;
+          requestAnimationFrame(() => {
+            el.value = formatted;
+            const commasAfter = (formatted.slice(0, cursorPos).match(/,/g) || []).length;
+            const newPos = cursorPos + (commasAfter - commasBefore);
+            el.setSelectionRange(newPos, newPos);
+          });
+        }
+      },
+      [isControlled, onValueChange, onChange, separator]
+    );
+    const handleBalanceClick = React.useCallback(() => {
+      if (disabled || balance === void 0) return;
+      const balanceStr = String(balance);
+      const input = inputRef.current;
+      if (input) {
+        const setter = Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          "value"
+        )?.set;
+        if (setter) {
+          setter.call(input, balanceStr);
+          input.dispatchEvent(new Event("input", { bubbles: true }));
+        }
+      }
+      if (!isControlled) setInternalValue(balanceStr);
+      onValueChange?.(balanceStr);
+      onBalanceClick?.(balance);
+      input?.focus();
+    }, [disabled, balance, isControlled, onValueChange, onBalanceClick]);
+    const handleWrapperClick = React.useCallback(() => {
+      if (!disabled) inputRef.current?.focus();
+    }, [disabled]);
+    const inputBox = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          priceInputVariants({ size, state }),
+          disabled && "nexus-price-input--disabled",
+          !hasField && className
+        ),
+        onClick: handleWrapperClick,
+        children: [
+          prefixContent && /* @__PURE__ */ jsx("span", { className: "nexus-price-input__prefix", children: prefixContent }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: setInputRef,
+              id: label ? inputId : id,
+              className: cn(
+                "nexus-price-input__inner",
+                align === "right" && "nexus-price-input__inner--right"
+              ),
+              disabled,
+              "aria-invalid": hasError || void 0,
+              "aria-describedby": description ? `${inputId}-desc` : void 0,
+              value: isControlled ? separator ? formatWithComma(String(controlledValue)) : controlledValue : void 0,
+              defaultValue: !isControlled ? void 0 : void 0,
+              onChange: handleChange,
+              inputMode: "decimal",
+              ...props
+            }
+          ),
+          suffix && /* @__PURE__ */ jsx("span", { className: "nexus-price-input__suffix", children: suffix })
+        ]
+      }
+    );
+    if (!hasField) return inputBox;
+    return /* @__PURE__ */ jsxs("div", { className: cn("nexus-price-input-field", className), children: [
+      hasHeader && /* @__PURE__ */ jsxs("div", { className: "nexus-price-input-field__header", children: [
+        label && /* @__PURE__ */ jsx(
+          "label",
+          {
+            className: "nexus-price-input-field__label",
+            htmlFor: inputId,
+            children: label
+          }
+        ),
+        balance !== void 0 && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "nexus-price-input-field__balance",
+            onClick: handleBalanceClick,
+            disabled,
+            tabIndex: -1,
+            children: balanceContent ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+              balanceLabel,
+              " ",
+              /* @__PURE__ */ jsx("span", { className: cn(
+                "nexus-price-input-field__balance-value",
+                isExceeded && "nexus-price-input-field__balance-value--exceeded"
+              ), children: balance })
+            ] })
+          }
+        )
+      ] }),
+      inputBox,
+      description && /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: `${inputId}-desc`,
+          className: cn(
+            "nexus-price-input-field__description",
+            hasError && "nexus-price-input-field__description--error"
+          ),
+          children: description
+        }
+      )
+    ] });
+  }
+);
+PriceInput.displayName = "PriceInput";
+
+export { PriceInput, priceInputVariants };

package/dist/chunks/{chunk-WSWD5ZUJ.js → chunk-WKCXACMZ.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkQJNQCLMV_js = require('./chunk-QJNQCLMV.js');
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
 var React = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
@@ -26,32 +26,25 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var chipVariants = classVarianceAuthority.cva(
-  [
-    "nx:inline-flex nx:items-center nx:gap-1.5 nx:whitespace-nowrap nx:font-medium nx:transition-colors",
-    "nx:select-none nx:rounded-full nx:border",
-    "nx:aria-disabled:opacity-50 nx:aria-disabled:pointer-events-none"
-  ],
-  {
-    variants: {
-      variant: {
-        default: "nx:border-border-default nx:bg-surface-default nx:text-text-primary",
-        filled: "nx:border-transparent nx:bg-surface-hover nx:text-text-primary",
-        outline: "nx:border-border-default nx:bg-transparent nx:text-text-primary",
-        accent: "nx:border-transparent nx:bg-accent-primary/10 nx:text-accent-primary"
-      },
-      size: {
-        sm: "nx:h-6 nx:px-2 nx:text-xs",
-        md: "nx:h-7 nx:px-2.5 nx:text-xs",
-        lg: "nx:h-8 nx:px-3 nx:text-sm"
-      }
+var chipVariants = classVarianceAuthority.cva("nexus-chip", {
+  variants: {
+    variant: {
+      default: "nexus-chip--default",
+      filled: "nexus-chip--filled",
+      outline: "nexus-chip--outline",
+      accent: "nexus-chip--accent"
     },
-    defaultVariants: {
-      variant: "default",
-      size: "md"
+    size: {
+      sm: "nexus-chip--sm",
+      md: "nexus-chip--md",
+      lg: "nexus-chip--lg"
     }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md"
   }
-);
+});
 var CloseIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -79,7 +72,7 @@ var Chip = React__namespace.forwardRef(
       Comp,
       {
         ref,
-        className: chunkQJNQCLMV_js.cn(chipVariants({ variant, size }), className),
+        className: chunkCZC76ZD5_js.cn(chipVariants({ variant, size }), className),
         "aria-disabled": disabled || void 0,
         ...props,
         children: [
@@ -88,11 +81,11 @@ var Chip = React__namespace.forwardRef(
             "button",
             {
               type: "button",
-              className: "nx:inline-flex nx:shrink-0 nx:items-center nx:justify-center nx:rounded-full nx:p-0.5 nx:opacity-60 nx:hover:opacity-100 nx:transition-opacity",
+              className: "nexus-chip__close",
               onClick: disabled ? void 0 : onClose,
               disabled,
               "aria-label": "Remove",
-              children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { className: "nx:size-3" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { className: "nexus-chip__close-icon" })
             }
           )
         ]

package/dist/chunks/{chunk-GSLIY6WW.js → chunk-X2SHTVZQ.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkQJNQCLMV_js = require('./chunk-QJNQCLMV.js');
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
 var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
@@ -25,34 +25,15 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var switchVariants = classVarianceAuthority.cva(
-  [
-    "nx:relative nx:inline-flex nx:shrink-0 nx:cursor-pointer nx:rounded-full nx:transition-colors nx:duration-200",
-    "nx:border-2 nx:border-transparent",
-    "nx:disabled:cursor-not-allowed nx:disabled:opacity-50"
-  ],
-  {
-    variants: {
-      size: {
-        sm: "nx:h-5 nx:w-9",
-        md: "nx:h-6 nx:w-11"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-var thumbVariants = classVarianceAuthority.cva(
-  "nx:pointer-events-none nx:block nx:rounded-full nx:bg-white nx:shadow-sm nx:transition-transform nx:duration-200",
-  {
-    variants: {
-      size: {
-        sm: "nx:size-4",
-        md: "nx:size-5"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
+var switchVariants = classVarianceAuthority.cva("nexus-switch", {
+  variants: {
+    size: {
+      sm: "nexus-switch--sm",
+      md: "nexus-switch--md"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
 var Switch = React__namespace.forwardRef(
   ({ className, size, checked, disabled, readOnly, onCheckedChange, onChange, ...props }, ref) => {
     const handleChange = React__namespace.useCallback(
@@ -62,14 +43,12 @@ var Switch = React__namespace.forwardRef(
       },
       [onCheckedChange, onChange]
     );
-    const translateClass = size === "sm" ? "nx:translate-x-4" : "nx:translate-x-5";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
-        className: chunkQJNQCLMV_js.cn(
+        className: chunkCZC76ZD5_js.cn(
           switchVariants({ size }),
-          checked ? "nx:bg-accent-primary" : "nx:bg-border-default",
-          disabled && "nx:cursor-not-allowed nx:opacity-50",
+          checked ? "nexus-switch--checked" : "nexus-switch--unchecked",
           className
         ),
         children: [
@@ -79,7 +58,7 @@ var Switch = React__namespace.forwardRef(
               ref,
               type: "checkbox",
               role: "switch",
-              className: "nx:sr-only",
+              className: "nexus-sr-only",
               checked,
               disabled,
               readOnly,
@@ -92,9 +71,10 @@ var Switch = React__namespace.forwardRef(
             "span",
             {
               "aria-hidden": "true",
-              className: chunkQJNQCLMV_js.cn(
-                thumbVariants({ size }),
-                checked ? translateClass : "nx:translate-x-0"
+              className: chunkCZC76ZD5_js.cn(
+                "nexus-switch__thumb",
+                size === "sm" ? "nexus-switch__thumb--sm" : "nexus-switch__thumb--md",
+                checked ? size === "sm" ? "nexus-switch__thumb--sm-on" : "nexus-switch__thumb--md-on" : "nexus-switch__thumb--off"
               )
             }
           )

package/dist/chunks/chunk-X3CTJ7TD.js

@@ -0,0 +1,108 @@
+'use strict';
+
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var stepperVariants = classVarianceAuthority.cva("nexus-stepper", {
+  variants: {
+    orientation: {
+      horizontal: "nexus-stepper--horizontal",
+      vertical: "nexus-stepper--vertical"
+    },
+    size: {
+      sm: "nexus-stepper--sm",
+      md: "nexus-stepper--md"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    size: "md"
+  }
+});
+var CheckIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 8.5l3 3 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var Stepper = React__namespace.forwardRef(
+  ({ className, orientation, size, steps, current = 0, status = "process", ...props }, ref) => {
+    const isHorizontal = orientation !== "vertical";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: chunkCZC76ZD5_js.cn(stepperVariants({ orientation, size }), className),
+        "aria-label": "Progress",
+        ...props,
+        children: steps.map((step, i) => {
+          const state = i < current ? "completed" : i === current ? status === "error" ? "error" : "active" : "pending";
+          const isFirst = i === 0;
+          const isLast = i === steps.length - 1;
+          const prevCompleted = i <= current;
+          const nextCompleted = i < current;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: chunkCZC76ZD5_js.cn("nexus-stepper__step", `nexus-stepper__step--${state}`),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-stepper__indicator-wrap", children: isHorizontal ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: chunkCZC76ZD5_js.cn(
+                        "nexus-stepper__connector",
+                        isFirst && "nexus-stepper__connector--hidden",
+                        prevCompleted && "nexus-stepper__connector--completed"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-stepper__indicator", children: state === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "nexus-stepper__check" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: i + 1 }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: chunkCZC76ZD5_js.cn(
+                        "nexus-stepper__connector",
+                        isLast && "nexus-stepper__connector--hidden",
+                        nextCompleted && "nexus-stepper__connector--completed"
+                      )
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  !isFirst && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkCZC76ZD5_js.cn("nexus-stepper__connector", prevCompleted && "nexus-stepper__connector--completed") }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-stepper__indicator", children: state === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "nexus-stepper__check" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: i + 1 }) })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-stepper__content", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-stepper__label", children: step.label }),
+                  step.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-stepper__description", children: step.description })
+                ] })
+              ]
+            },
+            i
+          );
+        })
+      }
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+
+exports.Stepper = Stepper;
+exports.stepperVariants = stepperVariants;