@forgedevstack/bear 1.0.2 → 1.0.4-alpha

package/dist/components/Stepper/Stepper.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../utils/cn.cjs"),z=({className:i})=>e.jsx("svg",{className:i,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:3,d:"M5 13l4 4L19 7"})}),C=({steps:i,activeStep:c,onStepClick:l,orientation:u="horizontal",variant:m="default",size:o="md",className:f,completedIcon:g,showConnector:j=!0,allowClickOnCompleted:w=!0})=>{const x={sm:{circle:"bear-w-6 bear-h-6 bear-text-xs",text:"bear-text-xs",icon:"bear-w-3 bear-h-3"},md:{circle:"bear-w-8 bear-h-8 bear-text-sm",text:"bear-text-sm",icon:"bear-w-4 bear-h-4"},lg:{circle:"bear-w-10 bear-h-10 bear-text-base",text:"bear-text-base",icon:"bear-w-5 bear-h-5"}},n=u==="horizontal",p=(r,a)=>{const b=a<c,s=a===c,d=l&&(b?w:s),h=()=>{d&&(l==null||l(a))},N=()=>b?g||e.jsx(z,{className:x[o].icon}):r.icon?r.icon:a+1,k=t.cn("bear-rounded-full bear-flex bear-items-center bear-justify-center bear-font-medium bear-transition-all bear-shrink-0",x[o].circle,b&&"bear-bg-pink-500 bear-text-white",s&&"bear-bg-pink-500 bear-text-white bear-ring-4 bear-ring-pink-500/30",!b&&!s&&"bear-bg-zinc-700 bear-text-zinc-400",r.error&&"bear-bg-red-500 bear-text-white",d&&"bear-cursor-pointer hover:bear-scale-110");return m==="dots"?e.jsx("div",{onClick:h,className:t.cn("bear-w-3 bear-h-3 bear-rounded-full bear-transition-all",b&&"bear-bg-pink-500",s&&"bear-bg-pink-500 bear-w-6",!b&&!s&&"bear-bg-zinc-600",d&&"bear-cursor-pointer")},a):e.jsxs("div",{className:t.cn("bear-flex bear-items-center",n?"bear-flex-col":"bear-flex-row bear-gap-3"),children:[e.jsx("div",{onClick:h,className:k,children:N()}),e.jsxs("div",{className:t.cn("bear-text-center",n?"bear-mt-2":""),children:[e.jsxs("div",{className:t.cn(x[o].text,s?"bear-text-white bear-font-medium":"bear-text-zinc-400"),children:[r.label,r.optional&&e.jsx("span",{className:"bear-text-zinc-500 bear-ml-1",children:"(Optional)"})]}),r.description&&e.jsx("div",{className:"bear-text-xs bear-text-zinc-500 bear-mt-0.5",children:r.description})]})]},a)},v=r=>{if(!j||r===i.length-1)return null;const a=r<c;if(m==="progress"){const b=a?100:r===c?50:0;return e.jsx("div",{className:t.cn("bear-bg-zinc-700 bear-rounded-full bear-overflow-hidden",n?"bear-flex-1 bear-h-1 bear-mx-2":"bear-w-1 bear-h-8 bear-my-2 bear-ml-4"),children:e.jsx("div",{className:"bear-bg-pink-500 bear-h-full bear-transition-all bear-duration-300",style:{[n?"width":"height"]:`${b}%`}})})}return e.jsx("div",{className:t.cn("bear-transition-colors",n?"bear-flex-1 bear-h-0.5 bear-mx-2":"bear-w-0.5 bear-h-8 bear-my-2 bear-ml-4",a?"bear-bg-pink-500":"bear-bg-zinc-700")})};return e.jsx("div",{className:t.cn("bear-flex",n?"bear-flex-row bear-items-start":"bear-flex-col",f),children:i.map((r,a)=>e.jsxs("div",{className:t.cn("bear-flex",n?"bear-flex-1 bear-items-center":""),children:[p(r,a),v(a)]},a))})};exports.Stepper=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),P=require("react"),t=require("../../utils/cn.cjs"),r=require("./Stepper.const.cjs"),p=require("../Button/Button.cjs"),y=()=>e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",children:e.jsx("polyline",{points:"20 6 9 17 4 12"})}),k=()=>e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),v=P.forwardRef(({steps:l,activeStep:c,onStepClick:a,orientation:m="horizontal",size:d="md",showNumbers:h=!0,clickable:S=!1,showConnectors:x=!0,connectorStyle:_="solid",alternativeLabel:E=!1,completedIcon:N,errorIcon:f,testId:j,className:A,...I},L)=>{const g=(s,n)=>n.status?n.status:s<c?"completed":s===c?"active":"pending",C=m==="horizontal",B=r.STEP_INDICATOR_SIZES[d],u=r.STEP_LABEL_SIZES[d],R=(s,n,i)=>{const T=r.STEP_STATUS_CLASSES[i];let o=null;return s.icon?o=s.icon:i==="completed"?o=N||e.jsx(y,{}):i==="error"?o=f||e.jsx(k,{}):h&&(o=n+1),e.jsx("div",{className:t.cn(r.STEP_INDICATOR_BASE,B,T.indicator,S&&!s.disabled&&"cursor-pointer hover:scale-105"),onClick:()=>{S&&!s.disabled&&a&&a(n)},children:o})},b=s=>{if(!x||s===l.length-1)return null;const n=s<c;return e.jsx("div",{className:t.cn(r.CONNECTOR_BASE,C?r.CONNECTOR_HORIZONTAL:r.CONNECTOR_VERTICAL,n?r.CONNECTOR_STATUS.completed:r.CONNECTOR_STATUS.pending,_==="dashed"&&"border-t-2 border-dashed bg-transparent")})};return e.jsx("div",{ref:L,className:t.cn(r.STEPPER_BASE_CLASSES,C?r.STEPPER_HORIZONTAL_CLASSES:r.STEPPER_VERTICAL_CLASSES,A),"data-testid":j,...I,children:l.map((s,n)=>{const i=g(n,s),T=r.STEP_STATUS_CLASSES[i];return e.jsxs("div",{className:t.cn("Bear-Stepper__step",C?r.STEP_WRAPPER_HORIZONTAL:r.STEP_WRAPPER_VERTICAL),children:[C?e.jsxs("div",{className:t.cn("flex",E?"flex-col items-center":"items-center gap-3"),children:[R(s,n,i),e.jsxs("div",{className:t.cn(E&&"text-center mt-2"),children:[e.jsx("div",{className:t.cn(r.STEP_LABEL_BASE,u.label,T.label),children:s.label}),s.description&&e.jsx("div",{className:t.cn(r.STEP_DESCRIPTION_CLASSES,u.description),children:s.description})]})]}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"flex-shrink-0 mr-4",children:R(s,n,i)}),e.jsxs("div",{className:"flex-1 pt-0.5",children:[e.jsx("div",{className:t.cn(r.STEP_LABEL_BASE,u.label,T.label),children:s.label}),s.description&&e.jsx("div",{className:t.cn(r.STEP_DESCRIPTION_CLASSES,u.description),children:s.description}),s.content&&i==="active"&&e.jsx("div",{className:"mt-4",children:s.content})]})]}),b(n)]},n)})})});v.displayName="Stepper";const O=P.forwardRef(({activeStep:l,totalSteps:c,onPrev:a,onNext:m,onComplete:d,disablePrev:h=!1,disableNext:S=!1,prevLabel:x="Previous",nextLabel:_="Next",completeLabel:E="Complete",showIndicator:N=!0},f)=>{const j=l===0,A=l===c-1;return e.jsxs("div",{ref:f,className:"Bear-StepperControls flex items-center justify-between mt-6",children:[e.jsx(p.Button,{variant:"outline",onClick:a,disabled:j||h,children:x}),N&&e.jsxs("span",{className:"text-sm text-gray-500 dark:text-gray-400",children:["Step ",l+1," of ",c]}),A?e.jsx(p.Button,{variant:"primary",onClick:d,children:E}):e.jsx(p.Button,{variant:"primary",onClick:m,disabled:S,children:_})]})});O.displayName="StepperControls";exports.Stepper=v;exports.StepperControls=O;

package/dist/components/Stepper/Stepper.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t="Bear-Stepper",e="flex items-start",S="flex flex-col",E="flex-1 relative",r="relative flex items-start pb-8 last:pb-0",_="Bear-Stepper__indicator flex items-center justify-center rounded-full font-medium transition-all",a={sm:"w-6 h-6 text-xs",md:"w-8 h-8 text-sm",lg:"w-10 h-10 text-base"},T={pending:{indicator:"bg-gray-200 dark:bg-zinc-700 text-gray-500 dark:text-gray-400",label:"text-gray-500 dark:text-gray-400"},active:{indicator:"bg-pink-500 text-white shadow-lg shadow-pink-500/30",label:"text-gray-900 dark:text-white font-medium"},completed:{indicator:"bg-green-500 text-white",label:"text-gray-700 dark:text-gray-300"},error:{indicator:"bg-red-500 text-white",label:"text-red-500 dark:text-red-400"}},n="Bear-Stepper__connector absolute transition-colors",o="top-4 left-1/2 right-0 h-0.5 -translate-y-1/2",l="left-4 top-8 w-0.5 h-full -translate-x-1/2",s={pending:"bg-gray-200 dark:bg-zinc-700",completed:"bg-green-500"},A="Bear-Stepper__label transition-colors",i={sm:{label:"text-xs",description:"text-[10px]"},md:{label:"text-sm",description:"text-xs"},lg:{label:"text-base",description:"text-sm"}},R="text-gray-500 dark:text-gray-400 mt-0.5";exports.CONNECTOR_BASE=n;exports.CONNECTOR_HORIZONTAL=o;exports.CONNECTOR_STATUS=s;exports.CONNECTOR_VERTICAL=l;exports.STEPPER_BASE_CLASSES=t;exports.STEPPER_HORIZONTAL_CLASSES=e;exports.STEPPER_VERTICAL_CLASSES=S;exports.STEP_DESCRIPTION_CLASSES=R;exports.STEP_INDICATOR_BASE=_;exports.STEP_INDICATOR_SIZES=a;exports.STEP_LABEL_BASE=A;exports.STEP_LABEL_SIZES=i;exports.STEP_STATUS_CLASSES=T;exports.STEP_WRAPPER_HORIZONTAL=E;exports.STEP_WRAPPER_VERTICAL=r;

package/dist/components/Stepper/Stepper.const.d.ts

@@ -0,0 +1,29 @@
+import { StepperSize, StepStatus } from './Stepper.types';
+export declare const STEPPER_BASE_CLASSES = "Bear-Stepper";
+export declare const STEPPER_HORIZONTAL_CLASSES = "flex items-start";
+export declare const STEPPER_VERTICAL_CLASSES = "flex flex-col";
+export declare const STEP_WRAPPER_HORIZONTAL = "flex-1 relative";
+export declare const STEP_WRAPPER_VERTICAL = "relative flex items-start pb-8 last:pb-0";
+export declare const STEP_INDICATOR_BASE = "Bear-Stepper__indicator flex items-center justify-center rounded-full font-medium transition-all";
+export declare const STEP_INDICATOR_SIZES: Record<StepperSize, string>;
+export declare const STEP_STATUS_CLASSES: Record<StepStatus, {
+    indicator: string;
+    label: string;
+}>;
+export declare const CONNECTOR_BASE = "Bear-Stepper__connector absolute transition-colors";
+export declare const CONNECTOR_HORIZONTAL = "top-4 left-1/2 right-0 h-0.5 -translate-y-1/2";
+export declare const CONNECTOR_VERTICAL = "left-4 top-8 w-0.5 h-full -translate-x-1/2";
+export declare const CONNECTOR_STYLES: {
+    solid: string;
+    dashed: string;
+};
+export declare const CONNECTOR_STATUS: {
+    pending: string;
+    completed: string;
+};
+export declare const STEP_LABEL_BASE = "Bear-Stepper__label transition-colors";
+export declare const STEP_LABEL_SIZES: Record<StepperSize, {
+    label: string;
+    description: string;
+}>;
+export declare const STEP_DESCRIPTION_CLASSES = "text-gray-500 dark:text-gray-400 mt-0.5";

package/dist/components/Stepper/Stepper.const.js

@@ -0,0 +1,46 @@
+const t = "Bear-Stepper", e = "flex items-start", r = "flex flex-col", a = "flex-1 relative", n = "relative flex items-start pb-8 last:pb-0", o = "Bear-Stepper__indicator flex items-center justify-center rounded-full font-medium transition-all", s = {
+  sm: "w-6 h-6 text-xs",
+  md: "w-8 h-8 text-sm",
+  lg: "w-10 h-10 text-base"
+}, l = {
+  pending: {
+    indicator: "bg-gray-200 dark:bg-zinc-700 text-gray-500 dark:text-gray-400",
+    label: "text-gray-500 dark:text-gray-400"
+  },
+  active: {
+    indicator: "bg-pink-500 text-white shadow-lg shadow-pink-500/30",
+    label: "text-gray-900 dark:text-white font-medium"
+  },
+  completed: {
+    indicator: "bg-green-500 text-white",
+    label: "text-gray-700 dark:text-gray-300"
+  },
+  error: {
+    indicator: "bg-red-500 text-white",
+    label: "text-red-500 dark:text-red-400"
+  }
+}, S = "Bear-Stepper__connector absolute transition-colors", i = "top-4 left-1/2 right-0 h-0.5 -translate-y-1/2", E = "left-4 top-8 w-0.5 h-full -translate-x-1/2", x = {
+  pending: "bg-gray-200 dark:bg-zinc-700",
+  completed: "bg-green-500"
+}, c = "Bear-Stepper__label transition-colors", _ = {
+  sm: { label: "text-xs", description: "text-[10px]" },
+  md: { label: "text-sm", description: "text-xs" },
+  lg: { label: "text-base", description: "text-sm" }
+}, d = "text-gray-500 dark:text-gray-400 mt-0.5";
+export {
+  S as CONNECTOR_BASE,
+  i as CONNECTOR_HORIZONTAL,
+  x as CONNECTOR_STATUS,
+  E as CONNECTOR_VERTICAL,
+  t as STEPPER_BASE_CLASSES,
+  e as STEPPER_HORIZONTAL_CLASSES,
+  r as STEPPER_VERTICAL_CLASSES,
+  d as STEP_DESCRIPTION_CLASSES,
+  o as STEP_INDICATOR_BASE,
+  s as STEP_INDICATOR_SIZES,
+  c as STEP_LABEL_BASE,
+  _ as STEP_LABEL_SIZES,
+  l as STEP_STATUS_CLASSES,
+  a as STEP_WRAPPER_HORIZONTAL,
+  n as STEP_WRAPPER_VERTICAL
+};

package/dist/components/Stepper/Stepper.d.ts

@@ -1,3 +1,10 @@
-import { FC } from 'react';
-import { StepperProps } from './Stepper.types';
-export declare const Stepper: FC<StepperProps>;
+import { StepperProps, StepperControlsProps } from './Stepper.types';
+/**
+ * Stepper - Multi-step wizard component
+ */
+export declare const Stepper: import('react').ForwardRefExoticComponent<StepperProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * StepperControls - Navigation buttons for stepper
+ */
+export declare const StepperControls: import('react').ForwardRefExoticComponent<StepperControlsProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Stepper;

package/dist/components/Stepper/Stepper.js

@@ -1,100 +1,151 @@
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { cn as t } from "../../utils/cn.js";
-const j = ({ className: l }) => /* @__PURE__ */ a("svg", { className: l, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) }), A = ({
-  steps: l,
-  activeStep: s,
-  onStepClick: c,
-  orientation: u = "horizontal",
-  variant: x = "default",
-  size: m = "md",
-  className: g,
-  completedIcon: w,
-  showConnector: p = !0,
-  allowClickOnCompleted: N = !0
-}) => {
-  const d = {
-    sm: { circle: "bear-w-6 bear-h-6 bear-text-xs", text: "bear-text-xs", icon: "bear-w-3 bear-h-3" },
-    md: { circle: "bear-w-8 bear-h-8 bear-text-sm", text: "bear-text-sm", icon: "bear-w-4 bear-h-4" },
-    lg: { circle: "bear-w-10 bear-h-10 bear-text-base", text: "bear-text-base", icon: "bear-w-5 bear-h-5" }
-  }, n = u === "horizontal", k = (e, r) => {
-    const b = r < s, i = r === s, h = c && (b ? N : i), f = () => {
-      h && (c == null || c(r));
-    }, z = () => b ? w || /* @__PURE__ */ a(j, { className: d[m].icon }) : e.icon ? e.icon : r + 1, C = t(
-      "bear-rounded-full bear-flex bear-items-center bear-justify-center bear-font-medium bear-transition-all bear-shrink-0",
-      d[m].circle,
-      b && "bear-bg-pink-500 bear-text-white",
-      i && "bear-bg-pink-500 bear-text-white bear-ring-4 bear-ring-pink-500/30",
-      !b && !i && "bear-bg-zinc-700 bear-text-zinc-400",
-      e.error && "bear-bg-red-500 bear-text-white",
-      h && "bear-cursor-pointer hover:bear-scale-110"
-    );
-    return x === "dots" ? /* @__PURE__ */ a(
-      "div",
-      {
-        onClick: f,
-        className: t(
-          "bear-w-3 bear-h-3 bear-rounded-full bear-transition-all",
-          b && "bear-bg-pink-500",
-          i && "bear-bg-pink-500 bear-w-6",
-          !b && !i && "bear-bg-zinc-600",
-          h && "bear-cursor-pointer"
-        )
-      },
-      r
-    ) : /* @__PURE__ */ o(
+import { jsx as r, jsxs as l, Fragment as Z } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import { cn as i } from "../../utils/cn.js";
+import { STEP_STATUS_CLASSES as I, STEP_LABEL_SIZES as z, STEP_LABEL_BASE as O, STEP_DESCRIPTION_CLASSES as g, STEP_WRAPPER_HORIZONTAL as H, STEP_WRAPPER_VERTICAL as W, STEPPER_HORIZONTAL_CLASSES as j, STEPPER_VERTICAL_CLASSES as D, STEPPER_BASE_CLASSES as V, STEP_INDICATOR_SIZES as F, STEP_INDICATOR_BASE as U, CONNECTOR_STATUS as L, CONNECTOR_HORIZONTAL as q, CONNECTOR_VERTICAL as G, CONNECTOR_BASE as J } from "./Stepper.const.js";
+import { Button as v } from "../Button/Button.js";
+const K = () => /* @__PURE__ */ r("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: /* @__PURE__ */ r("polyline", { points: "20 6 9 17 4 12" }) }), M = () => /* @__PURE__ */ l("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: [
+  /* @__PURE__ */ r("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ r("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] }), Q = b(
+  ({
+    steps: s,
+    activeStep: o,
+    onStepClick: a,
+    orientation: N = "horizontal",
+    size: d = "md",
+    showNumbers: f = !0,
+    clickable: m = !1,
+    showConnectors: T = !0,
+    connectorStyle: _ = "solid",
+    alternativeLabel: S = !1,
+    completedIcon: p,
+    errorIcon: u,
+    testId: A,
+    className: R,
+    ...x
+  }, y) => {
+    const B = (e, t) => t.status ? t.status : e < o ? "completed" : e === o ? "active" : "pending", E = N === "horizontal", k = F[d], h = z[d], P = (e, t, n) => {
+      const C = I[n];
+      let c = null;
+      return e.icon ? c = e.icon : n === "completed" ? c = p || /* @__PURE__ */ r(K, {}) : n === "error" ? c = u || /* @__PURE__ */ r(M, {}) : f && (c = t + 1), /* @__PURE__ */ r(
+        "div",
+        {
+          className: i(
+            U,
+            k,
+            C.indicator,
+            m && !e.disabled && "cursor-pointer hover:scale-105"
+          ),
+          onClick: () => {
+            m && !e.disabled && a && a(t);
+          },
+          children: c
+        }
+      );
+    }, w = (e) => {
+      if (!T || e === s.length - 1) return null;
+      const t = e < o;
+      return /* @__PURE__ */ r(
+        "div",
+        {
+          className: i(
+            J,
+            E ? q : G,
+            t ? L.completed : L.pending,
+            _ === "dashed" && "border-t-2 border-dashed bg-transparent"
+          )
+        }
+      );
+    };
+    return /* @__PURE__ */ r(
       "div",
       {
-        className: t(
-          "bear-flex bear-items-center",
-          n ? "bear-flex-col" : "bear-flex-row bear-gap-3"
+        ref: y,
+        className: i(
+          V,
+          E ? j : D,
+          R
         ),
-        children: [
-          /* @__PURE__ */ a("div", { onClick: f, className: C, children: z() }),
-          /* @__PURE__ */ o("div", { className: t("bear-text-center", n ? "bear-mt-2" : ""), children: [
-            /* @__PURE__ */ o("div", { className: t(
-              d[m].text,
-              i ? "bear-text-white bear-font-medium" : "bear-text-zinc-400"
-            ), children: [
-              e.label,
-              e.optional && /* @__PURE__ */ a("span", { className: "bear-text-zinc-500 bear-ml-1", children: "(Optional)" })
-            ] }),
-            e.description && /* @__PURE__ */ a("div", { className: "bear-text-xs bear-text-zinc-500 bear-mt-0.5", children: e.description })
-          ] })
-        ]
-      },
-      r
+        "data-testid": A,
+        ...x,
+        children: s.map((e, t) => {
+          const n = B(t, e), C = I[n];
+          return /* @__PURE__ */ l(
+            "div",
+            {
+              className: i(
+                "Bear-Stepper__step",
+                E ? H : W
+              ),
+              children: [
+                E ? (
+                  // Horizontal layout
+                  /* @__PURE__ */ l("div", { className: i("flex", S ? "flex-col items-center" : "items-center gap-3"), children: [
+                    P(e, t, n),
+                    /* @__PURE__ */ l("div", { className: i(S && "text-center mt-2"), children: [
+                      /* @__PURE__ */ r("div", { className: i(O, h.label, C.label), children: e.label }),
+                      e.description && /* @__PURE__ */ r("div", { className: i(g, h.description), children: e.description })
+                    ] })
+                  ] })
+                ) : (
+                  // Vertical layout
+                  /* @__PURE__ */ l(Z, { children: [
+                    /* @__PURE__ */ r("div", { className: "flex-shrink-0 mr-4", children: P(e, t, n) }),
+                    /* @__PURE__ */ l("div", { className: "flex-1 pt-0.5", children: [
+                      /* @__PURE__ */ r("div", { className: i(O, h.label, C.label), children: e.label }),
+                      e.description && /* @__PURE__ */ r("div", { className: i(g, h.description), children: e.description }),
+                      e.content && n === "active" && /* @__PURE__ */ r("div", { className: "mt-4", children: e.content })
+                    ] })
+                  ] })
+                ),
+                w(t)
+              ]
+            },
+            t
+          );
+        })
+      }
     );
-  }, v = (e) => {
-    if (!p || e === l.length - 1) return null;
-    const r = e < s;
-    if (x === "progress") {
-      const b = r ? 100 : e === s ? 50 : 0;
-      return /* @__PURE__ */ a("div", { className: t(
-        "bear-bg-zinc-700 bear-rounded-full bear-overflow-hidden",
-        n ? "bear-flex-1 bear-h-1 bear-mx-2" : "bear-w-1 bear-h-8 bear-my-2 bear-ml-4"
-      ), children: /* @__PURE__ */ a(
-        "div",
+  }
+);
+Q.displayName = "Stepper";
+const X = b(
+  ({
+    activeStep: s,
+    totalSteps: o,
+    onPrev: a,
+    onNext: N,
+    onComplete: d,
+    disablePrev: f = !1,
+    disableNext: m = !1,
+    prevLabel: T = "Previous",
+    nextLabel: _ = "Next",
+    completeLabel: S = "Complete",
+    showIndicator: p = !0
+  }, u) => {
+    const A = s === 0, R = s === o - 1;
+    return /* @__PURE__ */ l("div", { ref: u, className: "Bear-StepperControls flex items-center justify-between mt-6", children: [
+      /* @__PURE__ */ r(
+        v,
         {
-          className: "bear-bg-pink-500 bear-h-full bear-transition-all bear-duration-300",
-          style: { [n ? "width" : "height"]: `${b}%` }
+          variant: "outline",
+          onClick: a,
+          disabled: A || f,
+          children: T
         }
-      ) });
-    }
-    return /* @__PURE__ */ a("div", { className: t(
-      "bear-transition-colors",
-      n ? "bear-flex-1 bear-h-0.5 bear-mx-2" : "bear-w-0.5 bear-h-8 bear-my-2 bear-ml-4",
-      r ? "bear-bg-pink-500" : "bear-bg-zinc-700"
-    ) });
-  };
-  return /* @__PURE__ */ a("div", { className: t(
-    "bear-flex",
-    n ? "bear-flex-row bear-items-start" : "bear-flex-col",
-    g
-  ), children: l.map((e, r) => /* @__PURE__ */ o("div", { className: t("bear-flex", n ? "bear-flex-1 bear-items-center" : ""), children: [
-    k(e, r),
-    v(r)
-  ] }, r)) });
-};
+      ),
+      p && /* @__PURE__ */ l("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+        "Step ",
+        s + 1,
+        " of ",
+        o
+      ] }),
+      R ? /* @__PURE__ */ r(v, { variant: "primary", onClick: d, children: S }) : /* @__PURE__ */ r(v, { variant: "primary", onClick: N, disabled: m, children: _ })
+    ] });
+  }
+);
+X.displayName = "StepperControls";
 export {
-  A as Stepper
+  Q as Stepper,
+  X as StepperControls
 };

package/dist/components/Stepper/Stepper.types.d.ts

@@ -1,20 +1,70 @@
-import { ReactNode } from 'react';
-export interface StepperStep {
+import { HTMLAttributes, ReactNode } from 'react';
+export type StepperOrientation = 'horizontal' | 'vertical';
+export type StepStatus = 'pending' | 'active' | 'completed' | 'error';
+export type StepperSize = 'sm' | 'md' | 'lg';
+export interface Step {
+    /** Step label/title */
     label: string;
+    /** Step description */
     description?: string;
+    /** Optional icon */
     icon?: ReactNode;
-    optional?: boolean;
-    error?: boolean;
+    /** Step status (auto-calculated if not provided) */
+    status?: StepStatus;
+    /** Whether step is disabled */
+    disabled?: boolean;
+    /** Optional content for this step */
+    content?: ReactNode;
 }
-export interface StepperProps {
-    steps: StepperStep[];
+export interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Array of steps */
+    steps: Step[];
+    /** Current active step (0-indexed) */
     activeStep: number;
-    onStepClick?: (step: number) => void;
-    orientation?: 'horizontal' | 'vertical';
-    variant?: 'default' | 'dots' | 'progress';
-    size?: 'sm' | 'md' | 'lg';
-    className?: string;
+    /** Called when step is clicked */
+    onStepClick?: (stepIndex: number) => void;
+    /** Orientation */
+    orientation?: StepperOrientation;
+    /** Size */
+    size?: StepperSize;
+    /** Show step numbers */
+    showNumbers?: boolean;
+    /** Allow clicking on any step */
+    clickable?: boolean;
+    /** Show connector lines */
+    showConnectors?: boolean;
+    /** Connector line style */
+    connectorStyle?: 'solid' | 'dashed';
+    /** Alternative label position (below for horizontal) */
+    alternativeLabel?: boolean;
+    /** Custom completed icon */
     completedIcon?: ReactNode;
-    showConnector?: boolean;
-    allowClickOnCompleted?: boolean;
+    /** Custom error icon */
+    errorIcon?: ReactNode;
+    /** Test ID */
+    testId?: string;
+}
+export interface StepperControlsProps {
+    /** Current step */
+    activeStep: number;
+    /** Total number of steps */
+    totalSteps: number;
+    /** Go to previous step */
+    onPrev: () => void;
+    /** Go to next step */
+    onNext: () => void;
+    /** On complete all steps */
+    onComplete?: () => void;
+    /** Disable previous button */
+    disablePrev?: boolean;
+    /** Disable next button */
+    disableNext?: boolean;
+    /** Previous button text */
+    prevLabel?: string;
+    /** Next button text */
+    nextLabel?: string;
+    /** Complete button text */
+    completeLabel?: string;
+    /** Show step indicator */
+    showIndicator?: boolean;
 }

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

@@ -1,2 +1,2 @@
-export { Stepper } from './Stepper';
-export type { StepperProps, StepperStep } from './Stepper.types';
+export { Stepper, StepperControls } from './Stepper';
+export type { StepperProps, StepperControlsProps, Step, StepStatus, StepperOrientation, StepperSize } from './Stepper.types';

package/dist/components/Switch/Switch.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../../utils/cn.cjs"),n={sm:{track:"bear-w-8 bear-h-4",thumb:"bear-w-3 bear-h-3",translate:"bear-translate-x-4"},md:{track:"bear-w-11 bear-h-6",thumb:"bear-w-5 bear-h-5",translate:"bear-translate-x-5"},lg:{track:"bear-w-14 bear-h-7",thumb:"bear-w-6 bear-h-6",translate:"bear-translate-x-7"}},u=({label:i,checked:a=!1,onCheckedChange:e,size:t="md",disabled:b=!1,className:l,...o})=>{const c=()=>{b||e==null||e(!a)};return r.jsxs("label",{className:s.cn("bear-inline-flex bear-items-center bear-gap-3 bear-cursor-pointer",b&&"bear-opacity-50 bear-cursor-not-allowed",l),children:[r.jsx("input",{type:"checkbox",checked:a,onChange:c,disabled:b,className:"bear-sr-only",...o}),r.jsx("span",{className:s.cn("bear-relative bear-inline-flex bear-shrink-0 bear-rounded-full","bear-transition-colors bear-duration-200","focus-within:bear-ring-2 focus-within:bear-ring-bear-500 focus-within:bear-ring-offset-2 focus-within:bear-ring-offset-gray-900",a?"bear-bg-bear-500":"bear-bg-gray-600",n[t].track),children:r.jsx("span",{className:s.cn("bear-absolute bear-top-0.5 bear-left-0.5 bear-rounded-full bear-bg-white","bear-shadow bear-transition-transform bear-duration-200",a&&n[t].translate,n[t].thumb)})}),i&&r.jsx("span",{className:"bear-text-sm bear-text-gray-300",children:i})]})};exports.Switch=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../../utils/cn.cjs"),g="Bear-Switch bear-inline-flex bear-items-center bear-gap-3 bear-cursor-pointer",h="bear-opacity-50 bear-cursor-not-allowed",C="Bear-Switch__track bear-relative bear-inline-flex bear-items-center bear-shrink-0 bear-rounded-full bear-transition-colors bear-duration-200 focus-within:bear-ring-2 focus-within:bear-ring-pink-500 focus-within:bear-ring-offset-2 focus-within:bear-ring-offset-white dark:focus-within:bear-ring-offset-zinc-900",p="bear-bg-pink-500",E="bear-bg-gray-300 dark:bear-bg-gray-600",A="Bear-Switch__thumb bear-absolute bear-top-0.5 bear-left-0.5 bear-rounded-full bear-bg-white bear-shadow bear-transition-transform bear-duration-200 bear-flex bear-items-center bear-justify-center",y="Bear-Switch__label bear-text-sm bear-text-gray-700 dark:bear-text-gray-300",l="Bear-Switch__icon bear-flex bear-items-center bear-justify-center",j={sm:{track:"bear-w-8 bear-h-4",thumb:"bear-w-3 bear-h-3",translate:"bear-translate-x-4",iconSize:8},md:{track:"bear-w-11 bear-h-6",thumb:"bear-w-5 bear-h-5",translate:"bear-translate-x-5",iconSize:12},lg:{track:"bear-w-14 bear-h-7",thumb:"bear-w-6 bear-h-6",translate:"bear-translate-x-7",iconSize:16}},T=({label:o,checked:r=!1,onCheckedChange:t,size:u="md",disabled:s=!1,uncheckedIcon:n,checkedIcon:b,showIconsInThumb:S=!1,className:f,testId:x,id:_,...m})=>{const w=()=>{s||t==null||t(!r)},i=j[u],c=n||b;return a.jsxs("label",{id:_,"data-testid":x,className:e.cn(g,s&&h,f),children:[a.jsx("input",{type:"checkbox",checked:r,onChange:w,disabled:s,className:"bear-sr-only",...m}),a.jsxs("span",{className:e.cn(C,r?p:E,i.track),children:[c&&!S&&a.jsxs(a.Fragment,{children:[a.jsx("span",{className:e.cn(l,"bear-absolute bear-left-1",r?"bear-text-white":"bear-text-transparent","bear-transition-colors bear-duration-200"),children:b}),a.jsx("span",{className:e.cn(l,"bear-absolute bear-right-1",r?"bear-text-transparent":"bear-text-gray-600 dark:bear-text-gray-400","bear-transition-colors bear-duration-200"),children:n})]}),a.jsx("span",{className:e.cn(A,r&&i.translate,i.thumb),children:c&&S&&a.jsx("span",{className:e.cn(l,r?"bear-text-pink-500":"bear-text-gray-400"),children:r?b:n})})]}),o&&a.jsx("span",{className:y,children:o})]})};exports.Switch=T;

package/dist/components/Switch/Switch.js

@@ -1,81 +1,108 @@
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { cn as s } from "../../utils/cn.js";
-const n = {
+import { jsxs as o, jsx as r, Fragment as p } from "react/jsx-runtime";
+import { cn as e } from "../../utils/cn.js";
+const C = "Bear-Switch bear-inline-flex bear-items-center bear-gap-3 bear-cursor-pointer", g = "bear-opacity-50 bear-cursor-not-allowed", E = "Bear-Switch__track bear-relative bear-inline-flex bear-items-center bear-shrink-0 bear-rounded-full bear-transition-colors bear-duration-200 focus-within:bear-ring-2 focus-within:bear-ring-pink-500 focus-within:bear-ring-offset-2 focus-within:bear-ring-offset-white dark:focus-within:bear-ring-offset-zinc-900", A = "bear-bg-pink-500", y = "bear-bg-gray-300 dark:bear-bg-gray-600", T = "Bear-Switch__thumb bear-absolute bear-top-0.5 bear-left-0.5 bear-rounded-full bear-bg-white bear-shadow bear-transition-transform bear-duration-200 bear-flex bear-items-center bear-justify-center", H = "Bear-Switch__label bear-text-sm bear-text-gray-700 dark:bear-text-gray-300", l = "Bear-Switch__icon bear-flex bear-items-center bear-justify-center", L = {
   sm: {
     track: "bear-w-8 bear-h-4",
     thumb: "bear-w-3 bear-h-3",
-    translate: "bear-translate-x-4"
+    translate: "bear-translate-x-4",
+    iconSize: 8
   },
   md: {
     track: "bear-w-11 bear-h-6",
     thumb: "bear-w-5 bear-h-5",
-    translate: "bear-translate-x-5"
+    translate: "bear-translate-x-5",
+    iconSize: 12
   },
   lg: {
     track: "bear-w-14 bear-h-7",
     thumb: "bear-w-6 bear-h-6",
-    translate: "bear-translate-x-7"
+    translate: "bear-translate-x-7",
+    iconSize: 16
   }
-}, h = ({
-  label: i,
-  checked: r = !1,
-  onCheckedChange: e,
-  size: t = "md",
-  disabled: b = !1,
-  className: l,
-  ...o
+}, d = ({
+  label: S,
+  checked: a = !1,
+  onCheckedChange: t,
+  size: _ = "md",
+  disabled: s = !1,
+  uncheckedIcon: b,
+  checkedIcon: n,
+  showIconsInThumb: c = !1,
+  className: m,
+  testId: u,
+  id: w,
+  ...x
 }) => {
-  const f = () => {
-    b || e == null || e(!r);
-  };
-  return /* @__PURE__ */ m(
+  const h = () => {
+    s || t == null || t(!a);
+  }, i = L[_], f = b || n;
+  return /* @__PURE__ */ o(
     "label",
     {
-      className: s(
-        "bear-inline-flex bear-items-center bear-gap-3 bear-cursor-pointer",
-        b && "bear-opacity-50 bear-cursor-not-allowed",
-        l
+      id: w,
+      "data-testid": u,
+      className: e(
+        C,
+        s && g,
+        m
       ),
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ r(
           "input",
           {
             type: "checkbox",
-            checked: r,
-            onChange: f,
-            disabled: b,
+            checked: a,
+            onChange: h,
+            disabled: s,
             className: "bear-sr-only",
-            ...o
+            ...x
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ o(
           "span",
           {
-            className: s(
-              "bear-relative bear-inline-flex bear-shrink-0 bear-rounded-full",
-              "bear-transition-colors bear-duration-200",
-              "focus-within:bear-ring-2 focus-within:bear-ring-bear-500 focus-within:bear-ring-offset-2 focus-within:bear-ring-offset-gray-900",
-              r ? "bear-bg-bear-500" : "bear-bg-gray-600",
-              n[t].track
+            className: e(
+              E,
+              a ? A : y,
+              i.track
             ),
-            children: /* @__PURE__ */ a(
-              "span",
-              {
-                className: s(
-                  "bear-absolute bear-top-0.5 bear-left-0.5 bear-rounded-full bear-bg-white",
-                  "bear-shadow bear-transition-transform bear-duration-200",
-                  r && n[t].translate,
-                  n[t].thumb
-                )
-              }
-            )
+            children: [
+              f && !c && /* @__PURE__ */ o(p, { children: [
+                /* @__PURE__ */ r("span", { className: e(
+                  l,
+                  "bear-absolute bear-left-1",
+                  a ? "bear-text-white" : "bear-text-transparent",
+                  "bear-transition-colors bear-duration-200"
+                ), children: n }),
+                /* @__PURE__ */ r("span", { className: e(
+                  l,
+                  "bear-absolute bear-right-1",
+                  a ? "bear-text-transparent" : "bear-text-gray-600 dark:bear-text-gray-400",
+                  "bear-transition-colors bear-duration-200"
+                ), children: b })
+              ] }),
+              /* @__PURE__ */ r(
+                "span",
+                {
+                  className: e(
+                    T,
+                    a && i.translate,
+                    i.thumb
+                  ),
+                  children: f && c && /* @__PURE__ */ r("span", { className: e(
+                    l,
+                    a ? "bear-text-pink-500" : "bear-text-gray-400"
+                  ), children: a ? n : b })
+                }
+              )
+            ]
           }
         ),
-        i && /* @__PURE__ */ a("span", { className: "bear-text-sm bear-text-gray-300", children: i })
+        S && /* @__PURE__ */ r("span", { className: H, children: S })
       ]
     }
   );
 };
 export {
-  h as Switch
+  d as Switch
 };