@grupor5/raya 0.2.1 → 0.2.2

package/dist/molecules/select/index.mjs

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { ChevronDownIcon, ChevronUpIcon, CheckIcon } from '@radix-ui/react-icons';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        className
+      )
+    }, props), {
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4 opacity-50" }) })
+      ]
+    })
+  );
+});
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollUpButton,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "h-4 w-4" })
+    })
+  );
+});
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollDownButton,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4" })
+    })
+  );
+});
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React.forwardRef((_a, ref) => {
+  var _b = _a, { className, children, position = "popper" } = _b, props = __objRest(_b, ["className", "children", "position"]);
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    SelectPrimitive.Content,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    })
+  ) });
+});
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Label,
+    __spreadValues({
+      ref,
+      className: cn("px-2 py-1.5 text-sm font-semibold", className)
+    }, props)
+  );
+});
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Item,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+      ]
+    })
+  );
+});
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Separator,
+    __spreadValues({
+      ref,
+      className: cn("-mx-1 my-1 h-px bg-muted", className)
+    }, props)
+  );
+});
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/molecules/stepper/index.d.mts

@@ -0,0 +1,67 @@
+import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+type StepStatus = 'completed' | 'current' | 'upcoming';
+interface StepperContextValue {
+    activeStep: number;
+    orientation: 'horizontal' | 'vertical';
+    steps: {
+        status: StepStatus;
+    }[];
+    stepCount: number;
+}
+declare const useStepper: () => StepperContextValue;
+interface StepperAPI {
+    goToNextStep: () => void;
+    goToPrevStep: () => void;
+    activeStep: number;
+}
+/**
+ * A container for all the steps.
+ * @param {number} initialStep - The initial step to be active.
+ * @param {'horizontal' | 'vertical'} orientation - The orientation of the stepper.
+ * @param {function} onStepChange - A callback for when the step changes.
+ * @param {object[]} steps - An array of objects that represent each step.
+ * @param {string} steps[].label - The label of the step.
+ * @param {string} steps[].description - The description of the step.
+ * @param {React.ReactNode} steps[].content - The content of the step.
+ * @example
+ * <Stepper
+ *  initialStep={0}
+ *  steps={[
+ *   {
+ *    label: 'Step 1',
+ *    description: 'Create an account',
+ *    content: <div>Step 1 content</div>,
+ *   },
+ *   {
+ *    label: 'Step 2',
+ *    description: 'Personal Information',
+ *    content: <div>Step 2 content</div>,
+ *   },
+ *  ]}
+ * />
+ */
+declare const Stepper: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    initialStep?: number;
+    orientation?: "horizontal" | "vertical";
+    onStepChange?: (step: number) => void;
+    steps: {
+        label: string;
+        description?: string;
+        content: React.ReactNode;
+    }[];
+} & React.RefAttributes<StepperAPI>>;
+declare const Step: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    index: number;
+} & VariantProps<(props?: ({
+    status?: "current" | "completed" | "upcoming" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+declare const StepLabel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const StepDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const StepContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    index: number;
+} & React.RefAttributes<HTMLDivElement>>;
+
+export { Step, StepContent, StepDescription, StepLabel, Stepper, type StepperAPI, useStepper };

package/dist/molecules/stepper/index.d.ts

@@ -0,0 +1,67 @@
+import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+type StepStatus = 'completed' | 'current' | 'upcoming';
+interface StepperContextValue {
+    activeStep: number;
+    orientation: 'horizontal' | 'vertical';
+    steps: {
+        status: StepStatus;
+    }[];
+    stepCount: number;
+}
+declare const useStepper: () => StepperContextValue;
+interface StepperAPI {
+    goToNextStep: () => void;
+    goToPrevStep: () => void;
+    activeStep: number;
+}
+/**
+ * A container for all the steps.
+ * @param {number} initialStep - The initial step to be active.
+ * @param {'horizontal' | 'vertical'} orientation - The orientation of the stepper.
+ * @param {function} onStepChange - A callback for when the step changes.
+ * @param {object[]} steps - An array of objects that represent each step.
+ * @param {string} steps[].label - The label of the step.
+ * @param {string} steps[].description - The description of the step.
+ * @param {React.ReactNode} steps[].content - The content of the step.
+ * @example
+ * <Stepper
+ *  initialStep={0}
+ *  steps={[
+ *   {
+ *    label: 'Step 1',
+ *    description: 'Create an account',
+ *    content: <div>Step 1 content</div>,
+ *   },
+ *   {
+ *    label: 'Step 2',
+ *    description: 'Personal Information',
+ *    content: <div>Step 2 content</div>,
+ *   },
+ *  ]}
+ * />
+ */
+declare const Stepper: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    initialStep?: number;
+    orientation?: "horizontal" | "vertical";
+    onStepChange?: (step: number) => void;
+    steps: {
+        label: string;
+        description?: string;
+        content: React.ReactNode;
+    }[];
+} & React.RefAttributes<StepperAPI>>;
+declare const Step: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    index: number;
+} & VariantProps<(props?: ({
+    status?: "current" | "completed" | "upcoming" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+declare const StepLabel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const StepDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const StepContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    index: number;
+} & React.RefAttributes<HTMLDivElement>>;
+
+export { Step, StepContent, StepDescription, StepLabel, Stepper, type StepperAPI, useStepper };

package/dist/molecules/stepper/index.js

@@ -0,0 +1,287 @@
+'use strict';
+
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+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 __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var StepperContext = React__namespace.createContext(null);
+var useStepper = () => {
+  const context = React__namespace.useContext(StepperContext);
+  if (!context) {
+    throw new Error("useStepper must be used within a Stepper component");
+  }
+  return context;
+};
+var Stepper = React__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      initialStep = 0,
+      orientation = "horizontal",
+      steps,
+      onStepChange
+    } = _b, props = __objRest(_b, [
+      "className",
+      "initialStep",
+      "orientation",
+      "steps",
+      "onStepChange"
+    ]);
+    var _a2;
+    const [activeStep, setActiveStep] = React__namespace.useState(initialStep);
+    React__namespace.useImperativeHandle(ref, () => ({
+      goToNextStep: () => {
+        setActiveStep((prev) => {
+          const nextStep = prev < steps.length - 1 ? prev + 1 : prev;
+          onStepChange == null ? void 0 : onStepChange(nextStep);
+          return nextStep;
+        });
+      },
+      goToPrevStep: () => {
+        setActiveStep((prev) => {
+          const prevStep = prev > 0 ? prev - 1 : prev;
+          onStepChange == null ? void 0 : onStepChange(prevStep);
+          return prevStep;
+        });
+      },
+      activeStep
+    }));
+    const stepStatuses = React__namespace.useMemo(() => {
+      return steps.map((_, index) => {
+        if (index < activeStep) return { status: "completed" };
+        if (index === activeStep) return { status: "current" };
+        return { status: "upcoming" };
+      });
+    }, [activeStep, steps]);
+    const contextValue = React__namespace.useMemo(
+      () => ({
+        activeStep,
+        orientation,
+        steps: stepStatuses,
+        stepCount: steps.length
+      }),
+      [activeStep, orientation, stepStatuses, steps.length]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(StepperContext.Provider, { value: contextValue, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        __spreadProps(__spreadValues({
+          className: cn(
+            "flex w-full items-start font-sans",
+            orientation === "vertical" ? "flex-col" : "justify-between",
+            className
+          )
+        }, props), {
+          children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(Step, { index, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                orientation === "horizontal" ? "mt-2 text-center" : "ml-4 text-left"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(StepLabel, { children: step.label }),
+                step.description && /* @__PURE__ */ jsxRuntime.jsx(StepDescription, { children: step.description })
+              ]
+            }
+          ) }, index))
+        })
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8 font-sans", children: ((_a2 = steps[activeStep]) == null ? void 0 : _a2.content) && /* @__PURE__ */ jsxRuntime.jsx(StepContent, { index: activeStep, children: steps[activeStep].content }) })
+    ] });
+  }
+);
+Stepper.displayName = "Stepper";
+var stepVariants = classVarianceAuthority.cva(
+  "relative flex flex-col items-center justify-start flex-1",
+  {
+    variants: {
+      status: {
+        completed: "",
+        current: "",
+        upcoming: ""
+      }
+    }
+  }
+);
+var connectorVariants = classVarianceAuthority.cva("", {
+  variants: {
+    status: {
+      completed: "bg-green-600",
+      current: "bg-secondary-600",
+      upcoming: "bg-neutral-300"
+    }
+  },
+  defaultVariants: {
+    status: "upcoming"
+  }
+});
+var Step = React__namespace.forwardRef(({ className, children, index }, ref) => {
+  const { steps, stepCount, orientation } = useStepper();
+  const status = steps[index].status;
+  const isFirst = index === 0;
+  const prevStatus = isFirst ? "upcoming" : steps[index - 1].status;
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-1 items-start gap-4", className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "h-2.5 w-0.5",
+                  connectorVariants({ status: prevStatus })
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 font-semibold shadow-[0_0_0_8px_white]",
+                  status === "completed" && "border-green-600 bg-white text-green-600",
+                  status === "current" && "border-secondary-600 bg-white text-secondary-600",
+                  status === "upcoming" && "border-neutral-300 bg-white text-neutral-400"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: String(index + 1).padStart(2, "0") })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "h-full min-h-12 w-0.5 grow",
+                  connectorVariants({ status })
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2.5", children })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn(stepVariants({ status }), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "absolute top-5 left-0 w-1/2 h-0.5",
+          connectorVariants({ status })
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "absolute top-5 right-0 w-1/2 h-0.5",
+          connectorVariants({ status })
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 font-semibold shadow-[0_0_0_8px_white]",
+          status === "completed" && "border-green-600 bg-white text-green-600",
+          status === "current" && "border-secondary-600 bg-white text-secondary-600",
+          status === "upcoming" && "border-neutral-300 bg-white text-neutral-400"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: String(index + 1).padStart(2, "0") })
+      }
+    ),
+    children
+  ] });
+});
+Step.displayName = "Step";
+var StepLabel = React__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx("p", __spreadValues({ ref, className: cn("text-lg font-normal", className) }, props));
+});
+StepLabel.displayName = "StepLabel";
+var StepDescription = React__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    __spreadValues({
+      ref,
+      className: cn("text-sm font-normal text-primary-700", className)
+    }, props)
+  );
+});
+StepDescription.displayName = "StepDescription";
+var StepContent = React__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className, index, children } = _b, props = __objRest(_b, ["className", "index", "children"]);
+  const { activeStep } = useStepper();
+  if (activeStep !== index) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({ ref, className: cn("w-full", className) }, props), { children }));
+});
+StepContent.displayName = "StepContent";
+
+exports.Step = Step;
+exports.StepContent = StepContent;
+exports.StepDescription = StepDescription;
+exports.StepLabel = StepLabel;
+exports.Stepper = Stepper;
+exports.useStepper = useStepper;