acai-ui-library 0.1.11

package/dist/components/stepper.cjs

@@ -0,0 +1,201 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/stepper.tsx
+var stepper_exports = {};
+__export(stepper_exports, {
+  Stepper: () => Stepper,
+  StepperItem: () => StepperItem
+});
+module.exports = __toCommonJS(stepper_exports);
+var React = __toESM(require("react"), 1);
+var import_lucide_react = require("lucide-react");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/stepper.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var StepperContext = React.createContext({
+  activeStep: 0,
+  totalSteps: 0,
+  clickable: false,
+  registerButton: () => {
+  }
+});
+var Stepper = React.forwardRef(
+  ({
+    activeStep,
+    clickable = false,
+    onStepChange,
+    className,
+    children,
+    onKeyDown,
+    ...props
+  }, ref) => {
+    const steps = React.Children.toArray(children);
+    const buttonRefs = React.useRef([]);
+    const registerButton = React.useCallback(
+      (index, el) => {
+        buttonRefs.current[index] = el;
+      },
+      []
+    );
+    const focusButton = (index) => {
+      const btn = buttonRefs.current[index];
+      if (btn && !btn.disabled) btn.focus();
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (!clickable) return;
+      if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+      const current = buttonRefs.current.findIndex(
+        (b) => b === document.activeElement
+      );
+      if (current === -1) return;
+      const dir = e.key === "ArrowRight" ? 1 : -1;
+      const last = steps.length - 1;
+      let next = current + dir;
+      while (next >= 0 && next <= last) {
+        const btn = buttonRefs.current[next];
+        if (btn && !btn.disabled) {
+          e.preventDefault();
+          focusButton(next);
+          return;
+        }
+        next += dir;
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StepperContext.Provider,
+      {
+        value: {
+          activeStep,
+          totalSteps: steps.length,
+          clickable,
+          onStepChange,
+          registerButton
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ref,
+            className: cn("flex w-full items-start", className),
+            onKeyDown: handleKeyDown,
+            ...props,
+            children: steps.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(React.Fragment, { children: [
+              React.isValidElement(child) ? React.cloneElement(child, { _index: index }) : child,
+              index < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-1 items-center pt-[16px] px-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: cn(
+                    "h-[2px] w-full transition-colors duration-300 ease-out",
+                    index < activeStep ? "bg-[var(--hc-primary-600)]" : "bg-[var(--hc-grey-200)]"
+                  )
+                }
+              ) })
+            ] }, index))
+          }
+        )
+      }
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+var StepperItem = React.forwardRef(({ label, className, _index = 0, ...props }, ref) => {
+  const { activeStep, clickable, onStepChange, registerButton } = React.useContext(StepperContext);
+  const status = _index < activeStep ? "completed" : _index === activeStep ? "active" : "upcoming";
+  const circle = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: cn(
+        "flex h-[32px] w-[32px] shrink-0 items-center justify-center rounded-full text-[14px] transition-colors duration-300 ease-out",
+        status === "upcoming" && "border-[2px] border-[var(--hc-grey-200)] bg-white text-[var(--hc-grey-400)]",
+        status === "active" && "bg-[var(--hc-primary-600)] font-semibold text-white",
+        status === "completed" && "bg-[var(--hc-primary-600)] text-white"
+      ),
+      children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "h-[14px] w-[14px]" }) : _index + 1
+    }
+  );
+  const labelEl = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mt-[8px] text-center text-[12px] text-foreground", children: label });
+  if (clickable) {
+    const disabled = _index > activeStep;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col items-center", className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            type: "button",
+            ref: (el) => registerButton(_index, el),
+            disabled,
+            tabIndex: status === "active" ? 0 : -1,
+            onClick: () => !disabled && onStepChange?.(_index),
+            className: cn(
+              "flex flex-col items-center rounded-[4px] outline-none",
+              "focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-600)] focus-visible:ring-offset-2",
+              disabled ? "cursor-default" : "cursor-pointer"
+            ),
+            "aria-current": status === "active" ? "step" : void 0,
+            children: [
+              circle,
+              labelEl
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col items-center", className),
+      ...props,
+      children: [
+        circle,
+        labelEl
+      ]
+    }
+  );
+});
+StepperItem.displayName = "StepperItem";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Stepper,
+  StepperItem
+});
+//# sourceMappingURL=stepper.cjs.map

package/dist/components/stepper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/stepper.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport { Check } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\n/* ---------------------------------- Types --------------------------------- */\n\nexport interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Zero-indexed active step */\n  activeStep: number\n  /** When true, each step's circle+label is rendered inside a button. */\n  clickable?: boolean\n  /** Called when a clickable step is activated (click or Enter/Space). */\n  onStepChange?: (index: number) => void\n}\n\nexport interface StepperItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Label displayed below the step circle */\n  label: string\n}\n\n/* ----------------------------- Internal context ---------------------------- */\n\ninterface StepperContextValue {\n  activeStep: number\n  totalSteps: number\n  clickable: boolean\n  onStepChange?: (index: number) => void\n  registerButton: (index: number, el: HTMLButtonElement | null) => void\n}\n\nconst StepperContext = React.createContext<StepperContextValue>({\n  activeStep: 0,\n  totalSteps: 0,\n  clickable: false,\n  registerButton: () => {},\n})\n\n/* --------------------------------- Stepper -------------------------------- */\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  (\n    {\n      activeStep,\n      clickable = false,\n      onStepChange,\n      className,\n      children,\n      onKeyDown,\n      ...props\n    },\n    ref\n  ) => {\n    const steps = React.Children.toArray(children)\n    const buttonRefs = React.useRef<Array<HTMLButtonElement | null>>([])\n\n    const registerButton = React.useCallback(\n      (index: number, el: HTMLButtonElement | null) => {\n        buttonRefs.current[index] = el\n      },\n      []\n    )\n\n    const focusButton = (index: number) => {\n      const btn = buttonRefs.current[index]\n      if (btn && !btn.disabled) btn.focus()\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(e)\n      if (!clickable) return\n      if (e.key !== \"ArrowLeft\" && e.key !== \"ArrowRight\") return\n\n      const current = buttonRefs.current.findIndex(\n        (b) => b === document.activeElement\n      )\n      if (current === -1) return\n\n      const dir = e.key === \"ArrowRight\" ? 1 : -1\n      const last = steps.length - 1\n      let next = current + dir\n      // Skip disabled (upcoming) buttons.\n      while (next >= 0 && next <= last) {\n        const btn = buttonRefs.current[next]\n        if (btn && !btn.disabled) {\n          e.preventDefault()\n          focusButton(next)\n          return\n        }\n        next += dir\n      }\n    }\n\n    return (\n      <StepperContext.Provider\n        value={{\n          activeStep,\n          totalSteps: steps.length,\n          clickable,\n          onStepChange,\n          registerButton,\n        }}\n      >\n        <div\n          ref={ref}\n          className={cn(\"flex w-full items-start\", className)}\n          onKeyDown={handleKeyDown}\n          {...props}\n        >\n          {steps.map((child, index) => (\n            <React.Fragment key={index}>\n              {/* Render the StepperItem with injected index */}\n              {React.isValidElement<StepperItemProps & { _index?: number }>(child)\n                ? React.cloneElement(child, { _index: index } as any)\n                : child}\n\n              {/* Connecting line between steps */}\n              {index < steps.length - 1 && (\n                <div className=\"flex flex-1 items-center pt-[16px] px-2\">\n                  <div\n                    className={cn(\n                      \"h-[2px] w-full transition-colors duration-300 ease-out\",\n                      index < activeStep\n                        ? \"bg-[var(--hc-primary-600)]\"\n                        : \"bg-[var(--hc-grey-200)]\"\n                    )}\n                  />\n                </div>\n              )}\n            </React.Fragment>\n          ))}\n        </div>\n      </StepperContext.Provider>\n    )\n  }\n)\nStepper.displayName = \"Stepper\"\n\n/* ------------------------------- StepperItem ------------------------------ */\n\nconst StepperItem = React.forwardRef<\n  HTMLDivElement,\n  StepperItemProps & { _index?: number }\n>(({ label, className, _index = 0, ...props }, ref) => {\n  const { activeStep, clickable, onStepChange, registerButton } =\n    React.useContext(StepperContext)\n\n  const status: \"completed\" | \"active\" | \"upcoming\" =\n    _index < activeStep\n      ? \"completed\"\n      : _index === activeStep\n        ? \"active\"\n        : \"upcoming\"\n\n  const circle = (\n    <div\n      className={cn(\n        \"flex h-[32px] w-[32px] shrink-0 items-center justify-center rounded-full text-[14px] transition-colors duration-300 ease-out\",\n        status === \"upcoming\" &&\n          \"border-[2px] border-[var(--hc-grey-200)] bg-white text-[var(--hc-grey-400)]\",\n        status === \"active\" &&\n          \"bg-[var(--hc-primary-600)] font-semibold text-white\",\n        status === \"completed\" && \"bg-[var(--hc-primary-600)] text-white\"\n      )}\n    >\n      {status === \"completed\" ? (\n        <Check className=\"h-[14px] w-[14px]\" />\n      ) : (\n        _index + 1\n      )}\n    </div>\n  )\n\n  const labelEl = (\n    <span className=\"mt-[8px] text-center text-[12px] text-foreground\">\n      {label}\n    </span>\n  )\n\n  if (clickable) {\n    const disabled = _index > activeStep\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex flex-col items-center\", className)}\n        {...props}\n      >\n        <button\n          type=\"button\"\n          ref={(el) => registerButton(_index, el)}\n          disabled={disabled}\n          tabIndex={status === \"active\" ? 0 : -1}\n          onClick={() => !disabled && onStepChange?.(_index)}\n          className={cn(\n            \"flex flex-col items-center rounded-[4px] outline-none\",\n            \"focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-600)] focus-visible:ring-offset-2\",\n            disabled ? \"cursor-default\" : \"cursor-pointer\"\n          )}\n          aria-current={status === \"active\" ? \"step\" : undefined}\n        >\n          {circle}\n          {labelEl}\n        </button>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex flex-col items-center\", className)}\n      {...props}\n    >\n      {circle}\n      {labelEl}\n    </div>\n  )\n})\nStepperItem.displayName = \"StepperItem\"\n\nexport { Stepper, StepperItem }\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":"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","names":[]}

package/dist/components/stepper.d.cts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Zero-indexed active step */
+    activeStep: number;
+    /** When true, each step's circle+label is rendered inside a button. */
+    clickable?: boolean;
+    /** Called when a clickable step is activated (click or Enter/Space). */
+    onStepChange?: (index: number) => void;
+}
+interface StepperItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Label displayed below the step circle */
+    label: string;
+}
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+declare const StepperItem: React.ForwardRefExoticComponent<StepperItemProps & {
+    _index?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+
+export { Stepper, StepperItem, type StepperItemProps, type StepperProps };

package/dist/components/stepper.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Zero-indexed active step */
+    activeStep: number;
+    /** When true, each step's circle+label is rendered inside a button. */
+    clickable?: boolean;
+    /** Called when a clickable step is activated (click or Enter/Space). */
+    onStepChange?: (index: number) => void;
+}
+interface StepperItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Label displayed below the step circle */
+    label: string;
+}
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+declare const StepperItem: React.ForwardRefExoticComponent<StepperItemProps & {
+    _index?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+
+export { Stepper, StepperItem, type StepperItemProps, type StepperProps };

package/dist/components/stepper.js

@@ -0,0 +1,165 @@
+// src/components/stepper.tsx
+import * as React from "react";
+import { Check } from "lucide-react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/stepper.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var StepperContext = React.createContext({
+  activeStep: 0,
+  totalSteps: 0,
+  clickable: false,
+  registerButton: () => {
+  }
+});
+var Stepper = React.forwardRef(
+  ({
+    activeStep,
+    clickable = false,
+    onStepChange,
+    className,
+    children,
+    onKeyDown,
+    ...props
+  }, ref) => {
+    const steps = React.Children.toArray(children);
+    const buttonRefs = React.useRef([]);
+    const registerButton = React.useCallback(
+      (index, el) => {
+        buttonRefs.current[index] = el;
+      },
+      []
+    );
+    const focusButton = (index) => {
+      const btn = buttonRefs.current[index];
+      if (btn && !btn.disabled) btn.focus();
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (!clickable) return;
+      if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+      const current = buttonRefs.current.findIndex(
+        (b) => b === document.activeElement
+      );
+      if (current === -1) return;
+      const dir = e.key === "ArrowRight" ? 1 : -1;
+      const last = steps.length - 1;
+      let next = current + dir;
+      while (next >= 0 && next <= last) {
+        const btn = buttonRefs.current[next];
+        if (btn && !btn.disabled) {
+          e.preventDefault();
+          focusButton(next);
+          return;
+        }
+        next += dir;
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      StepperContext.Provider,
+      {
+        value: {
+          activeStep,
+          totalSteps: steps.length,
+          clickable,
+          onStepChange,
+          registerButton
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            className: cn("flex w-full items-start", className),
+            onKeyDown: handleKeyDown,
+            ...props,
+            children: steps.map((child, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              React.isValidElement(child) ? React.cloneElement(child, { _index: index }) : child,
+              index < steps.length - 1 && /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center pt-[16px] px-2", children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "h-[2px] w-full transition-colors duration-300 ease-out",
+                    index < activeStep ? "bg-[var(--hc-primary-600)]" : "bg-[var(--hc-grey-200)]"
+                  )
+                }
+              ) })
+            ] }, index))
+          }
+        )
+      }
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+var StepperItem = React.forwardRef(({ label, className, _index = 0, ...props }, ref) => {
+  const { activeStep, clickable, onStepChange, registerButton } = React.useContext(StepperContext);
+  const status = _index < activeStep ? "completed" : _index === activeStep ? "active" : "upcoming";
+  const circle = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex h-[32px] w-[32px] shrink-0 items-center justify-center rounded-full text-[14px] transition-colors duration-300 ease-out",
+        status === "upcoming" && "border-[2px] border-[var(--hc-grey-200)] bg-white text-[var(--hc-grey-400)]",
+        status === "active" && "bg-[var(--hc-primary-600)] font-semibold text-white",
+        status === "completed" && "bg-[var(--hc-primary-600)] text-white"
+      ),
+      children: status === "completed" ? /* @__PURE__ */ jsx(Check, { className: "h-[14px] w-[14px]" }) : _index + 1
+    }
+  );
+  const labelEl = /* @__PURE__ */ jsx("span", { className: "mt-[8px] text-center text-[12px] text-foreground", children: label });
+  if (clickable) {
+    const disabled = _index > activeStep;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col items-center", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            ref: (el) => registerButton(_index, el),
+            disabled,
+            tabIndex: status === "active" ? 0 : -1,
+            onClick: () => !disabled && onStepChange?.(_index),
+            className: cn(
+              "flex flex-col items-center rounded-[4px] outline-none",
+              "focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-600)] focus-visible:ring-offset-2",
+              disabled ? "cursor-default" : "cursor-pointer"
+            ),
+            "aria-current": status === "active" ? "step" : void 0,
+            children: [
+              circle,
+              labelEl
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col items-center", className),
+      ...props,
+      children: [
+        circle,
+        labelEl
+      ]
+    }
+  );
+});
+StepperItem.displayName = "StepperItem";
+export {
+  Stepper,
+  StepperItem
+};
+//# sourceMappingURL=stepper.js.map

package/dist/components/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/stepper.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport { Check } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\n/* ---------------------------------- Types --------------------------------- */\n\nexport interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Zero-indexed active step */\n  activeStep: number\n  /** When true, each step's circle+label is rendered inside a button. */\n  clickable?: boolean\n  /** Called when a clickable step is activated (click or Enter/Space). */\n  onStepChange?: (index: number) => void\n}\n\nexport interface StepperItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Label displayed below the step circle */\n  label: string\n}\n\n/* ----------------------------- Internal context ---------------------------- */\n\ninterface StepperContextValue {\n  activeStep: number\n  totalSteps: number\n  clickable: boolean\n  onStepChange?: (index: number) => void\n  registerButton: (index: number, el: HTMLButtonElement | null) => void\n}\n\nconst StepperContext = React.createContext<StepperContextValue>({\n  activeStep: 0,\n  totalSteps: 0,\n  clickable: false,\n  registerButton: () => {},\n})\n\n/* --------------------------------- Stepper -------------------------------- */\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  (\n    {\n      activeStep,\n      clickable = false,\n      onStepChange,\n      className,\n      children,\n      onKeyDown,\n      ...props\n    },\n    ref\n  ) => {\n    const steps = React.Children.toArray(children)\n    const buttonRefs = React.useRef<Array<HTMLButtonElement | null>>([])\n\n    const registerButton = React.useCallback(\n      (index: number, el: HTMLButtonElement | null) => {\n        buttonRefs.current[index] = el\n      },\n      []\n    )\n\n    const focusButton = (index: number) => {\n      const btn = buttonRefs.current[index]\n      if (btn && !btn.disabled) btn.focus()\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(e)\n      if (!clickable) return\n      if (e.key !== \"ArrowLeft\" && e.key !== \"ArrowRight\") return\n\n      const current = buttonRefs.current.findIndex(\n        (b) => b === document.activeElement\n      )\n      if (current === -1) return\n\n      const dir = e.key === \"ArrowRight\" ? 1 : -1\n      const last = steps.length - 1\n      let next = current + dir\n      // Skip disabled (upcoming) buttons.\n      while (next >= 0 && next <= last) {\n        const btn = buttonRefs.current[next]\n        if (btn && !btn.disabled) {\n          e.preventDefault()\n          focusButton(next)\n          return\n        }\n        next += dir\n      }\n    }\n\n    return (\n      <StepperContext.Provider\n        value={{\n          activeStep,\n          totalSteps: steps.length,\n          clickable,\n          onStepChange,\n          registerButton,\n        }}\n      >\n        <div\n          ref={ref}\n          className={cn(\"flex w-full items-start\", className)}\n          onKeyDown={handleKeyDown}\n          {...props}\n        >\n          {steps.map((child, index) => (\n            <React.Fragment key={index}>\n              {/* Render the StepperItem with injected index */}\n              {React.isValidElement<StepperItemProps & { _index?: number }>(child)\n                ? React.cloneElement(child, { _index: index } as any)\n                : child}\n\n              {/* Connecting line between steps */}\n              {index < steps.length - 1 && (\n                <div className=\"flex flex-1 items-center pt-[16px] px-2\">\n                  <div\n                    className={cn(\n                      \"h-[2px] w-full transition-colors duration-300 ease-out\",\n                      index < activeStep\n                        ? \"bg-[var(--hc-primary-600)]\"\n                        : \"bg-[var(--hc-grey-200)]\"\n                    )}\n                  />\n                </div>\n              )}\n            </React.Fragment>\n          ))}\n        </div>\n      </StepperContext.Provider>\n    )\n  }\n)\nStepper.displayName = \"Stepper\"\n\n/* ------------------------------- StepperItem ------------------------------ */\n\nconst StepperItem = React.forwardRef<\n  HTMLDivElement,\n  StepperItemProps & { _index?: number }\n>(({ label, className, _index = 0, ...props }, ref) => {\n  const { activeStep, clickable, onStepChange, registerButton } =\n    React.useContext(StepperContext)\n\n  const status: \"completed\" | \"active\" | \"upcoming\" =\n    _index < activeStep\n      ? \"completed\"\n      : _index === activeStep\n        ? \"active\"\n        : \"upcoming\"\n\n  const circle = (\n    <div\n      className={cn(\n        \"flex h-[32px] w-[32px] shrink-0 items-center justify-center rounded-full text-[14px] transition-colors duration-300 ease-out\",\n        status === \"upcoming\" &&\n          \"border-[2px] border-[var(--hc-grey-200)] bg-white text-[var(--hc-grey-400)]\",\n        status === \"active\" &&\n          \"bg-[var(--hc-primary-600)] font-semibold text-white\",\n        status === \"completed\" && \"bg-[var(--hc-primary-600)] text-white\"\n      )}\n    >\n      {status === \"completed\" ? (\n        <Check className=\"h-[14px] w-[14px]\" />\n      ) : (\n        _index + 1\n      )}\n    </div>\n  )\n\n  const labelEl = (\n    <span className=\"mt-[8px] text-center text-[12px] text-foreground\">\n      {label}\n    </span>\n  )\n\n  if (clickable) {\n    const disabled = _index > activeStep\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex flex-col items-center\", className)}\n        {...props}\n      >\n        <button\n          type=\"button\"\n          ref={(el) => registerButton(_index, el)}\n          disabled={disabled}\n          tabIndex={status === \"active\" ? 0 : -1}\n          onClick={() => !disabled && onStepChange?.(_index)}\n          className={cn(\n            \"flex flex-col items-center rounded-[4px] outline-none\",\n            \"focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-600)] focus-visible:ring-offset-2\",\n            disabled ? \"cursor-default\" : \"cursor-pointer\"\n          )}\n          aria-current={status === \"active\" ? \"step\" : undefined}\n        >\n          {circle}\n          {labelEl}\n        </button>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex flex-col items-center\", className)}\n      {...props}\n    >\n      {circle}\n      {labelEl}\n    </div>\n  )\n})\nStepperItem.displayName = \"StepperItem\"\n\nexport { Stepper, StepperItem }\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,aAAa;;;ACDtB,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADwGY,SASM,KATN;AA/EZ,IAAM,iBAAuB,oBAAmC;AAAA,EAC9D,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,gBAAgB,MAAM;AAAA,EAAC;AACzB,CAAC;AAID,IAAM,UAAgB;AAAA,EACpB,CACE;AAAA,IACE;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,QAAc,eAAS,QAAQ,QAAQ;AAC7C,UAAM,aAAmB,aAAwC,CAAC,CAAC;AAEnE,UAAM,iBAAuB;AAAA,MAC3B,CAAC,OAAe,OAAiC;AAC/C,mBAAW,QAAQ,KAAK,IAAI;AAAA,MAC9B;AAAA,MACA,CAAC;AAAA,IACH;AAEA,UAAM,cAAc,CAAC,UAAkB;AACrC,YAAM,MAAM,WAAW,QAAQ,KAAK;AACpC,UAAI,OAAO,CAAC,IAAI,SAAU,KAAI,MAAM;AAAA,IACtC;AAEA,UAAM,gBAAgB,CAAC,MAA2C;AAChE,kBAAY,CAAC;AACb,UAAI,CAAC,UAAW;AAChB,UAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAAc;AAErD,YAAM,UAAU,WAAW,QAAQ;AAAA,QACjC,CAAC,MAAM,MAAM,SAAS;AAAA,MACxB;AACA,UAAI,YAAY,GAAI;AAEpB,YAAM,MAAM,EAAE,QAAQ,eAAe,IAAI;AACzC,YAAM,OAAO,MAAM,SAAS;AAC5B,UAAI,OAAO,UAAU;AAErB,aAAO,QAAQ,KAAK,QAAQ,MAAM;AAChC,cAAM,MAAM,WAAW,QAAQ,IAAI;AACnC,YAAI,OAAO,CAAC,IAAI,UAAU;AACxB,YAAE,eAAe;AACjB,sBAAY,IAAI;AAChB;AAAA,QACF;AACA,gBAAQ;AAAA,MACV;AAAA,IACF;AAEA,WACE;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,OAAO;AAAA,UACL;AAAA,UACA,YAAY,MAAM;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,GAAG,2BAA2B,SAAS;AAAA,YAClD,WAAW;AAAA,YACV,GAAG;AAAA,YAEH,gBAAM,IAAI,CAAC,OAAO,UACjB,qBAAO,gBAAN,EAEE;AAAA,cAAM,qBAAuD,KAAK,IACzD,mBAAa,OAAO,EAAE,QAAQ,MAAM,CAAQ,IAClD;AAAA,cAGH,QAAQ,MAAM,SAAS,KACtB,oBAAC,SAAI,WAAU,2CACb;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,QAAQ,aACJ,+BACA;AAAA,kBACN;AAAA;AAAA,cACF,GACF;AAAA,iBAjBiB,KAmBrB,CACD;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,QAAQ,cAAc;AAItB,IAAM,cAAoB,iBAGxB,CAAC,EAAE,OAAO,WAAW,SAAS,GAAG,GAAG,MAAM,GAAG,QAAQ;AACrD,QAAM,EAAE,YAAY,WAAW,cAAc,eAAe,IACpD,iBAAW,cAAc;AAEjC,QAAM,SACJ,SAAS,aACL,cACA,WAAW,aACT,WACA;AAER,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW,cACT;AAAA,QACF,WAAW,YACT;AAAA,QACF,WAAW,eAAe;AAAA,MAC5B;AAAA,MAEC,qBAAW,cACV,oBAAC,SAAM,WAAU,qBAAoB,IAErC,SAAS;AAAA;AAAA,EAEb;AAGF,QAAM,UACJ,oBAAC,UAAK,WAAU,oDACb,iBACH;AAGF,MAAI,WAAW;AACb,UAAM,WAAW,SAAS;AAC1B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,8BAA8B,SAAS;AAAA,QACpD,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,KAAK,CAAC,OAAO,eAAe,QAAQ,EAAE;AAAA,YACtC;AAAA,YACA,UAAU,WAAW,WAAW,IAAI;AAAA,YACpC,SAAS,MAAM,CAAC,YAAY,eAAe,MAAM;AAAA,YACjD,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA,WAAW,mBAAmB;AAAA,YAChC;AAAA,YACA,gBAAc,WAAW,WAAW,SAAS;AAAA,YAE5C;AAAA;AAAA,cACA;AAAA;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,8BAA8B,SAAS;AAAA,MACpD,GAAG;AAAA,MAEH;AAAA;AAAA,QACA;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;AACD,YAAY,cAAc;","names":[]}

package/dist/components/switch.cjs

@@ -0,0 +1,99 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/switch.tsx
+var switch_exports = {};
+__export(switch_exports, {
+  Switch: () => Switch,
+  switchVariants: () => switchVariants
+});
+module.exports = __toCommonJS(switch_exports);
+var React = __toESM(require("react"), 1);
+var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"), 1);
+var import_class_variance_authority = require("class-variance-authority");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/switch.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var switchVariants = (0, import_class_variance_authority.cva)(
+  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-[var(--hc-grey-200)] aria-[invalid=true]:ring-2 aria-[invalid=true]:ring-destructive aria-[invalid=true]:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "data-[state=checked]:bg-[var(--hc-primary-600)]",
+        destructive: "data-[state=checked]:bg-destructive",
+        success: "data-[state=checked]:bg-success"
+      },
+      size: {
+        sm: "h-5 w-9",
+        default: "h-[28px] w-[52px]",
+        lg: "h-[36px] w-[64px]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var thumbStyles = {
+  sm: "h-3.5 w-3.5 data-[state=unchecked]:translate-x-[3px] data-[state=checked]:translate-x-[15px]",
+  default: "h-[22px] w-[22px] data-[state=unchecked]:translate-x-[3px] data-[state=checked]:translate-x-[23px]",
+  lg: "h-[26px] w-[26px] data-[state=unchecked]:translate-x-[4px] data-[state=checked]:translate-x-[30px]"
+};
+var Switch = React.forwardRef(({ className, variant, size = "default", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  SwitchPrimitives.Root,
+  {
+    className: cn(switchVariants({ variant, size }), className),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform duration-200 [[disabled]_&]:bg-[var(--hc-grey-300)]",
+          thumbStyles[size ?? "default"]
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Switch,
+  switchVariants
+});
+//# sourceMappingURL=switch.cjs.map

package/dist/components/switch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/switch.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"../lib/utils\"\n\ntype SwitchSize = \"sm\" | \"default\" | \"lg\"\n\nconst switchVariants = cva(\n  \"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-[var(--hc-grey-200)] aria-[invalid=true]:ring-2 aria-[invalid=true]:ring-destructive aria-[invalid=true]:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default: \"data-[state=checked]:bg-[var(--hc-primary-600)]\",\n        destructive: \"data-[state=checked]:bg-destructive\",\n        success: \"data-[state=checked]:bg-success\",\n      },\n      size: {\n        sm: \"h-5 w-9\",\n        default: \"h-[28px] w-[52px]\",\n        lg: \"h-[36px] w-[64px]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst thumbStyles: Record<SwitchSize, string> = {\n  sm: \"h-3.5 w-3.5 data-[state=unchecked]:translate-x-[3px] data-[state=checked]:translate-x-[15px]\",\n  default:\n    \"h-[22px] w-[22px] data-[state=unchecked]:translate-x-[3px] data-[state=checked]:translate-x-[23px]\",\n  lg: \"h-[26px] w-[26px] data-[state=unchecked]:translate-x-[4px] data-[state=checked]:translate-x-[30px]\",\n}\n\nexport interface SwitchProps\n  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>,\n    VariantProps<typeof switchVariants> {}\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  SwitchProps\n>(({ className, variant, size = \"default\", ...props }, ref) => (\n  <SwitchPrimitives.Root\n    className={cn(switchVariants({ variant, size }), className)}\n    {...props}\n    ref={ref}\n  >\n    <SwitchPrimitives.Thumb\n      className={cn(\n        \"pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform duration-200 [[disabled]_&]:bg-[var(--hc-grey-300)]\",\n        thumbStyles[(size ?? \"default\") as SwitchSize]\n      )}\n    />\n  </SwitchPrimitives.Root>\n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch, switchVariants }\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,uBAAkC;AAClC,sCAAuC;;;ACFvC,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;AD4CI;AA1CJ,IAAM,qBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aAAa;AAAA,QACb,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,IAAM,cAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,SACE;AAAA,EACF,IAAI;AACN;AAMA,IAAM,SAAe,iBAGnB,CAAC,EAAE,WAAW,SAAS,OAAO,WAAW,GAAG,MAAM,GAAG,QACrD;AAAA,EAAkB;AAAA,EAAjB;AAAA,IACC,WAAW,GAAG,eAAe,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,IACzD,GAAG;AAAA,IACJ;AAAA,IAEA;AAAA,MAAkB;AAAA,MAAjB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAa,QAAQ,SAAwB;AAAA,QAC/C;AAAA;AAAA,IACF;AAAA;AACF,CACD;AACD,OAAO,cAA+B,sBAAK;","names":[]}

package/dist/components/switch.d.cts

@@ -0,0 +1,14 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { VariantProps } from 'class-variance-authority';
+
+declare const switchVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, VariantProps<typeof switchVariants> {
+}
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Switch, type SwitchProps, switchVariants };

package/dist/components/switch.d.ts

@@ -0,0 +1,14 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { VariantProps } from 'class-variance-authority';
+
+declare const switchVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, VariantProps<typeof switchVariants> {
+}
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Switch, type SwitchProps, switchVariants };

package/dist/components/switch.js

@@ -0,0 +1,63 @@
+// src/components/switch.tsx
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cva } from "class-variance-authority";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/switch.tsx
+import { jsx } from "react/jsx-runtime";
+var switchVariants = cva(
+  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-[var(--hc-grey-200)] aria-[invalid=true]:ring-2 aria-[invalid=true]:ring-destructive aria-[invalid=true]:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "data-[state=checked]:bg-[var(--hc-primary-600)]",
+        destructive: "data-[state=checked]:bg-destructive",
+        success: "data-[state=checked]:bg-success"
+      },
+      size: {
+        sm: "h-5 w-9",
+        default: "h-[28px] w-[52px]",
+        lg: "h-[36px] w-[64px]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var thumbStyles = {
+  sm: "h-3.5 w-3.5 data-[state=unchecked]:translate-x-[3px] data-[state=checked]:translate-x-[15px]",
+  default: "h-[22px] w-[22px] data-[state=unchecked]:translate-x-[3px] data-[state=checked]:translate-x-[23px]",
+  lg: "h-[26px] w-[26px] data-[state=unchecked]:translate-x-[4px] data-[state=checked]:translate-x-[30px]"
+};
+var Switch = React.forwardRef(({ className, variant, size = "default", ...props }, ref) => /* @__PURE__ */ jsx(
+  SwitchPrimitives.Root,
+  {
+    className: cn(switchVariants({ variant, size }), className),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsx(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform duration-200 [[disabled]_&]:bg-[var(--hc-grey-300)]",
+          thumbStyles[size ?? "default"]
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+export {
+  Switch,
+  switchVariants
+};
+//# sourceMappingURL=switch.js.map