@veevarts/design-system 0.1.16 → 0.1.17

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps as ButtonHeroUIProps } from '@heroui/react';
+export type ButtonProps = ButtonHeroUIProps;
+export declare function Button({ color, radius, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@heroui/react");require("react");const n={brand:{primary:"#C14615",secondary:"#000000",accent:"#F59E0B"},semantic:{success:"#10B981",warning:"#F59E0B",error:"#EF4444",info:"#3B82F6"},neutral:{white:"#FFFFFF",black:"#000000",gray:{50:"#F9FAFB",100:"#F3F4F6",200:"#E5E7EB",300:"#D1D5DB",400:"#9CA3AF",500:"#6B7280",600:"#4B5563",700:"#374151",800:"#1F2937",900:"#111827"}}},a={xs:"0.25rem",sm:"0.5rem",md:"1rem",lg:"1.5rem",xl:"2rem","2xl":"3rem","3xl":"4rem","4xl":"6rem","5xl":"8rem"},i={fontFamily:{primary:'"NeueMontreal", system-ui, sans-serif',secondary:'"Scholar", Georgia, serif',sans:'"NeueMontreal", system-ui, sans-serif',serif:'"Scholar", Georgia, serif',mono:'"JetBrains Mono", Consolas, monospace'},fontSize:{xs:"0.75rem",sm:"0.875rem",base:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem"},fontWeight:{normal:"400",semibold:"600",bold:"700"},lineHeight:{tight:"1.25",normal:"1.5",relaxed:"1.75"}},o={colors:{primary:{50:"#fef5f1",100:"#fde8e0",200:"#fbd5c7",300:"#f7b79f",400:"#f18d68",500:n.brand.primary,600:"#a83b11",700:"#8b2f0e",800:"#73260d",900:"#5f210c",DEFAULT:n.brand.primary},secondary:{50:"#f9fafb",100:"#f3f4f6",200:"#e5e7eb",300:"#d1d5db",400:"#9ca3af",500:n.brand.secondary,600:"#000000",700:"#000000",800:"#000000",900:"#000000",DEFAULT:n.brand.secondary}}};function s({children:t}){return e.jsx(r.HeroUIProvider,{children:t})}function l(t){return e.jsx("div",{className:"w-full p-8",children:e.jsx("div",{className:"container mx-auto flex items-center justify-center",children:e.jsx(r.Alert,{description:"This component needs to be implemented using HeroUI Navbar, NavbarBrand, NavbarContent, and NavbarItem components. Include logo, navigation links, language selector dropdown, and authentication state.",title:"TODO: Implement Navbar Pattern",variant:"faded"})})})}function c(t){return e.jsx("div",{className:"w-full p-8",children:e.jsx("div",{className:"container mx-auto flex items-center justify-center",children:e.jsx(r.Alert,{description:"This component needs to be implemented with visual step indicators, connecting lines, and support for both horizontal and vertical orientations. Include completed (green), current (blue), and upcoming (gray) states.",title:"TODO: Implement Stepper Pattern",variant:"faded"})})})}function m(t){return e.jsx("footer",{className:"w-full py-12",children:e.jsx("div",{className:"container mx-auto px-6 flex items-center justify-center",children:e.jsx(r.Alert,{description:"This component needs to be implemented using HeroUI Link components. Include grid layout with link sections, logo, social media icons, and copyright text. Should be responsive and adapt to mobile/desktop.",title:"TODO: Implement Footer Pattern",variant:"faded"})})})}function d(t){return e.jsx("div",{className:"min-h-screen flex flex-col",children:e.jsx("div",{className:"flex-1 flex items-center justify-center p-12",children:e.jsx(r.Alert,{description:"This template combines Navbar, Footer, and a confirmation Card. Include title, message, confirmation number, details list, icon, and action buttons. Use Card for the confirmation content.",title:"TODO: Implement ConfirmationPageTemplate",variant:"faded",className:"max-w-2xl"})})})}function p(t){return e.jsx("div",{className:"min-h-screen flex flex-col",children:e.jsx("div",{className:"flex-1 flex items-center justify-center p-12",children:e.jsx(r.Alert,{description:"This template combines Navbar, Stepper, Footer, and an event details Card. Include event image, category/spots chips, tags, details grid, and action buttons. Use Card, CardHeader, CardBody for content structure.",title:"TODO: Implement EventDetailsTemplate",variant:"faded",className:"max-w-2xl"})})})}exports.ConfirmationPageTemplate=d;exports.EventDetailsTemplate=p;exports.Footer=m;exports.HeroUIProvider=s;exports.Navbar=l;exports.Stepper=c;exports.colors=n;exports.spacing=a;exports.theme=o;exports.typography=i;Object.keys(r).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>r[t]})});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("@heroui/react"),n=require("react"),p=require("framer-motion"),v={brand:{primary:"#C14615",secondary:"#000000",accent:"#F59E0B"},semantic:{success:"#10B981",warning:"#F59E0B",error:"#EF4444",info:"#3B82F6"},neutral:{white:"#FFFFFF",black:"#000000",gray:{50:"#F9FAFB",100:"#F3F4F6",200:"#E5E7EB",300:"#D1D5DB",400:"#9CA3AF",500:"#6B7280",600:"#4B5563",700:"#374151",800:"#1F2937",900:"#111827"}}},F={xs:"0.25rem",sm:"0.5rem",md:"1rem",lg:"1.5rem",xl:"2rem","2xl":"3rem","3xl":"4rem","4xl":"6rem","5xl":"8rem"},C={fontFamily:{primary:'"NeueMontreal", system-ui, sans-serif',secondary:'"Scholar", Georgia, serif',sans:'"NeueMontreal", system-ui, sans-serif',serif:'"Scholar", Georgia, serif',mono:'"JetBrains Mono", Consolas, monospace'},fontSize:{xs:"0.75rem",sm:"0.875rem",base:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem"},fontWeight:{normal:"400",semibold:"600",bold:"700"},lineHeight:{tight:"1.25",normal:"1.5",relaxed:"1.75"}},k={colors:{primary:{50:"#fef5f1",100:"#fde8e0",200:"#fbd5c7",300:"#f7b79f",400:"#f18d68",500:v.brand.primary,600:"#a83b11",700:"#8b2f0e",800:"#73260d",900:"#5f210c",DEFAULT:v.brand.primary},secondary:{50:"#f9fafb",100:"#f3f4f6",200:"#e5e7eb",300:"#d1d5db",400:"#9ca3af",500:v.brand.secondary,600:"#000000",700:"#000000",800:"#000000",900:"#000000",DEFAULT:v.brand.secondary}}};function E({children:r}){return e.jsx(o.HeroUIProvider,{children:r})}function T({color:r="primary",radius:d="full",...i}){return e.jsx(o.Button,{color:r,radius:d,...i})}function B(r){return e.jsx("div",{className:"w-full p-8",children:e.jsx("div",{className:"container mx-auto flex items-center justify-center",children:e.jsx(o.Alert,{description:"This component needs to be implemented using HeroUI Navbar, NavbarBrand, NavbarContent, and NavbarItem components. Include logo, navigation links, language selector dropdown, and authentication state.",title:"TODO: Implement Navbar Pattern",variant:"faded"})})})}var N;const O=typeof document<"u"?(N=n.useInsertionEffect)!==null&&N!==void 0?N:n.useLayoutEffect:()=>{};function S(r,d,i){let[m,b]=n.useState(r||d),u=n.useRef(m),h=n.useRef(r!==void 0),c=r!==void 0;n.useEffect(()=>{let a=h.current;a!==c&&process.env.NODE_ENV!=="production"&&console.warn(`WARN: A component changed from ${a?"controlled":"uncontrolled"} to ${c?"controlled":"uncontrolled"}.`),h.current=c},[c]);let x=c?r:m;O(()=>{u.current=x});let[,g]=n.useReducer(()=>({}),{}),y=n.useCallback((a,...j)=>{let f=typeof a=="function"?a(u.current):a;Object.is(u.current,f)||(u.current=f,b(f),g(),i?.(f,...j))},[i]);return[x,y]}function A(r){return e.jsx("svg",{...r,fill:"none",stroke:"currentColor",strokeWidth:2,viewBox:"0 0 24 24",children:e.jsx(p.m.path,{animate:{pathLength:1},d:"M5 13l4 4L19 7",initial:{pathLength:0},strokeLinecap:"round",strokeLinejoin:"round",transition:{delay:.2,type:"tween",ease:"easeOut",duration:.3}})})}const w=n.forwardRef(({color:r="primary",stepsCount:d=3,defaultStep:i=0,label:m,onStepChange:b,currentStep:u,hideProgressBars:h=!1,stepClassName:c,className:x,...g},y)=>{const[a,j]=S(u,i,b),f=n.useMemo(()=>{let l,t;const s=["[--active-fg-color:hsl(var(--step-fg-color))]","[--active-border-color:hsl(var(--step-color))]","[--active-color:hsl(var(--step-color))]","[--complete-background-color:hsl(var(--step-color))]","[--complete-border-color:hsl(var(--step-color))]","[--inactive-border-color:hsl(var(--heroui-default-300))]","[--inactive-color:hsl(var(--heroui-default-300))]"];switch(r){case"primary":l="[--step-color:var(--heroui-primary)]",t="[--step-fg-color:var(--heroui-primary-foreground)]";break;case"secondary":l="[--step-color:var(--heroui-secondary)]",t="[--step-fg-color:var(--heroui-secondary-foreground)]";break;case"success":l="[--step-color:var(--heroui-success)]",t="[--step-fg-color:var(--heroui-success-foreground)]";break;case"warning":l="[--step-color:var(--heroui-warning)]",t="[--step-fg-color:var(--heroui-warning-foreground)]";break;case"danger":l="[--step-color:var(--heroui-danger)]",t="[--step-fg-color:var(--heroui-danger-foreground)]";break;case"default":l="[--step-color:var(--heroui-default)]",t="[--step-fg-color:var(--heroui-default-foreground)]";break;default:l="[--step-color:var(--heroui-primary)]",t="[--step-fg-color:var(--heroui-primary-foreground)]";break}return s.unshift(t),s.unshift(l),s},[r]);return e.jsxs("nav",{"aria-label":"Progress",className:"flex max-w-fit items-center overflow-x-auto",children:[m&&e.jsx("label",{className:"text-small text-default-foreground lg:text-medium font-light w-full me-3",children:m}),e.jsx("ol",{className:o.cn("flex flex-row flex-nowrap gap-x-3",f,x),children:Array.from({length:d})?.map((l,t)=>{const s=a===t?"active":a<t?"inactive":"complete";return e.jsx("li",{className:"relative flex w-full items-center pr-12",children:e.jsxs("button",{ref:y,"aria-current":s==="active"?"step":void 0,className:o.cn("group rounded-large flex w-full cursor-pointer flex-row items-center justify-center gap-x-3 py-2.5",c),onClick:()=>j(t),...g,children:[e.jsx("div",{className:"h-ful relative flex items-center",children:e.jsx(p.LazyMotion,{features:p.domAnimation,children:e.jsx(p.m.div,{animate:s,className:"relative",children:e.jsx(p.m.div,{animate:s,className:o.cn("border-medium text-large text-default-foreground relative flex h-[26px] w-[26px] items-center justify-center rounded-full font-semibold",{"shadow-lg":s==="complete"}),initial:!1,transition:{duration:.25},variants:{inactive:{backgroundColor:"transparent",borderColor:"var(--inactive-border-color)",color:"var(--inactive-color)"},active:{backgroundColor:"transparent",borderColor:"var(--active-border-color)",color:"var(--active-color)"},complete:{backgroundColor:"var(--complete-background-color)",borderColor:"var(--complete-border-color)",color:"var(--active-fg-color)"}},children:e.jsx("div",{className:"flex items-center justify-center",children:s==="complete"?e.jsx(A,{className:"h-5 w-5 text-(--active-fg-color)"}):e.jsx("span",{})})})})})}),t<d-1&&!h&&e.jsx("div",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-0 left-[26px] w-[calc(100%-13px)] flex-none items-center",style:{"--idx":t},children:e.jsx("div",{className:o.cn("bg-default-200 relative h-0.5 w-full transition-colors duration-300","after:absolute after:block after:h-full after:w-0 after:bg-(--active-border-color) after:transition-[width] after:duration-300 after:content-['']",{"after:w-full":t<a})})})]},t)},t)})})]})});w.displayName="Stepper";function D(r){return e.jsx("footer",{className:"w-full py-12",children:e.jsx("div",{className:"container mx-auto px-6 flex items-center justify-center",children:e.jsx(o.Alert,{description:"This component needs to be implemented using HeroUI Link components. Include grid layout with link sections, logo, social media icons, and copyright text. Should be responsive and adapt to mobile/desktop.",title:"TODO: Implement Footer Pattern",variant:"faded"})})})}function $(r){return e.jsx("div",{className:"min-h-screen flex flex-col",children:e.jsx("div",{className:"flex-1 flex items-center justify-center p-12",children:e.jsx(o.Alert,{description:"This template combines Navbar, Footer, and a confirmation Card. Include title, message, confirmation number, details list, icon, and action buttons. Use Card for the confirmation content.",title:"TODO: Implement ConfirmationPageTemplate",variant:"faded",className:"max-w-2xl"})})})}function P(r){return e.jsx("div",{className:"min-h-screen flex flex-col",children:e.jsx("div",{className:"flex-1 flex items-center justify-center p-12",children:e.jsx(o.Alert,{description:"This template combines Navbar, Stepper, Footer, and an event details Card. Include event image, category/spots chips, tags, details grid, and action buttons. Use Card, CardHeader, CardBody for content structure.",title:"TODO: Implement EventDetailsTemplate",variant:"faded",className:"max-w-2xl"})})})}exports.Button=T;exports.ConfirmationPageTemplate=$;exports.EventDetailsTemplate=P;exports.Footer=D;exports.HeroUIProvider=E;exports.Navbar=B;exports.Stepper=w;exports.colors=v;exports.spacing=F;exports.theme=k;exports.typography=C;Object.keys(o).forEach(r=>{r!=="default"&&!Object.prototype.hasOwnProperty.call(exports,r)&&Object.defineProperty(exports,r,{enumerable:!0,get:()=>o[r]})});

package/dist/index.d.ts

@@ -7,8 +7,10 @@ export type { ColorToken } from './tokens';
 export { theme } from './theme';
 export type { Theme } from './theme';
 export { HeroUIProvider } from './providers';
+export { Button } from './components';
+export type { ButtonProps } from './components';
 export { Navbar, Stepper, Footer } from './patterns';
-export type { NavbarProps, NavbarLink, NavbarLanguage, StepperProps, Step, FooterProps, FooterSection, FooterLink, SocialLink, } from './patterns';
+export type { NavbarProps, NavbarLink, NavbarLanguage, StepperProps, FooterProps, FooterSection, FooterLink, SocialLink, } from './patterns';
 export { ConfirmationPageTemplate, EventDetailsTemplate } from './templates';
 export type { ConfirmationPageTemplateProps, ConfirmationDetails, EventDetailsTemplateProps, EventInfo, } from './templates';
 export * from '@heroui/react';

package/dist/index.js

@@ -1,8 +1,9 @@
-import { jsx as e } from "react/jsx-runtime";
-import { HeroUIProvider as a, Alert as t } from "@heroui/react";
+import { jsx as e, jsxs as F } from "react/jsx-runtime";
+import { HeroUIProvider as E, Button as B, Alert as g, cn as p } from "@heroui/react";
 export * from "@heroui/react";
-import "react";
-const r = {
+import h, { useState as $, useRef as C, useEffect as T, useReducer as D, useCallback as S } from "react";
+import { LazyMotion as j, domAnimation as O, m as k } from "framer-motion";
+const v = {
   brand: {
     primary: "#C14615",
     secondary: "#000000",
@@ -30,7 +31,7 @@ const r = {
       900: "#111827"
     }
   }
-}, l = {
+}, R = {
   xs: "0.25rem",
   // 4px - Fine control (½ of base unit)
   sm: "0.5rem",
@@ -49,7 +50,7 @@ const r = {
   // 96px
   "5xl": "8rem"
   // 128px
-}, c = {
+}, V = {
   fontFamily: {
     primary: '"NeueMontreal", system-ui, sans-serif',
     secondary: '"Scholar", Georgia, serif',
@@ -90,7 +91,7 @@ const r = {
     normal: "1.5",
     relaxed: "1.75"
   }
-}, m = {
+}, W = {
   colors: {
     primary: {
       50: "#fef5f1",
@@ -98,13 +99,13 @@ const r = {
       200: "#fbd5c7",
       300: "#f7b79f",
       400: "#f18d68",
-      500: r.brand.primary,
+      500: v.brand.primary,
       // #C14615
       600: "#a83b11",
       700: "#8b2f0e",
       800: "#73260d",
       900: "#5f210c",
-      DEFAULT: r.brand.primary
+      DEFAULT: v.brand.primary
     },
     secondary: {
       50: "#f9fafb",
@@ -112,22 +113,25 @@ const r = {
       200: "#e5e7eb",
       300: "#d1d5db",
       400: "#9ca3af",
-      500: r.brand.secondary,
+      500: v.brand.secondary,
       // #000000
       600: "#000000",
       700: "#000000",
       800: "#000000",
       900: "#000000",
-      DEFAULT: r.brand.secondary
+      DEFAULT: v.brand.secondary
     }
   }
 };
-function d({ children: n }) {
-  return /* @__PURE__ */ e(a, { children: n });
+function z({ children: r }) {
+  return /* @__PURE__ */ e(E, { children: r });
 }
-function p(n) {
+function G({ color: r = "primary", radius: c = "full", ...l }) {
+  return /* @__PURE__ */ e(B, { color: r, radius: c, ...l });
+}
+function J(r) {
   return /* @__PURE__ */ e("div", { className: "w-full p-8", children: /* @__PURE__ */ e("div", { className: "container mx-auto flex items-center justify-center", children: /* @__PURE__ */ e(
-    t,
+    g,
     {
       description: "This component needs to be implemented using HeroUI Navbar, NavbarBrand, NavbarContent, and NavbarItem components. Include logo, navigation links, language selector dropdown, and authentication state.",
       title: "TODO: Implement Navbar Pattern",
@@ -135,19 +139,183 @@ function p(n) {
     }
   ) }) });
 }
-function f(n) {
-  return /* @__PURE__ */ e("div", { className: "w-full p-8", children: /* @__PURE__ */ e("div", { className: "container mx-auto flex items-center justify-center", children: /* @__PURE__ */ e(
-    t,
+var w;
+const A = typeof document < "u" ? (w = h.useInsertionEffect) !== null && w !== void 0 ? w : h.useLayoutEffect : () => {
+};
+function I(r, c, l) {
+  let [f, b] = $(r || c), s = C(f), u = C(r !== void 0), i = r !== void 0;
+  T(() => {
+    let o = u.current;
+    o !== i && process.env.NODE_ENV !== "production" && console.warn(`WARN: A component changed from ${o ? "controlled" : "uncontrolled"} to ${i ? "controlled" : "uncontrolled"}.`), u.current = i;
+  }, [
+    i
+  ]);
+  let m = i ? r : f;
+  A(() => {
+    s.current = m;
+  });
+  let [, x] = D(() => ({}), {}), y = S((o, ...N) => {
+    let d = typeof o == "function" ? o(s.current) : o;
+    Object.is(s.current, d) || (s.current = d, b(d), x(), l?.(d, ...N));
+  }, [
+    l
+  ]);
+  return [
+    m,
+    y
+  ];
+}
+function L(r) {
+  return /* @__PURE__ */ e("svg", { ...r, fill: "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", children: /* @__PURE__ */ e(
+    k.path,
     {
-      description: "This component needs to be implemented with visual step indicators, connecting lines, and support for both horizontal and vertical orientations. Include completed (green), current (blue), and upcoming (gray) states.",
-      title: "TODO: Implement Stepper Pattern",
-      variant: "faded"
+      animate: { pathLength: 1 },
+      d: "M5 13l4 4L19 7",
+      initial: { pathLength: 0 },
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      transition: {
+        delay: 0.2,
+        type: "tween",
+        ease: "easeOut",
+        duration: 0.3
+      }
     }
-  ) }) });
+  ) });
 }
-function u(n) {
+const U = h.forwardRef(
+  ({
+    color: r = "primary",
+    stepsCount: c = 3,
+    defaultStep: l = 0,
+    label: f,
+    onStepChange: b,
+    currentStep: s,
+    hideProgressBars: u = !1,
+    stepClassName: i,
+    className: m,
+    ...x
+  }, y) => {
+    const [o, N] = I(s, l, b), d = h.useMemo(() => {
+      let a, t;
+      const n = [
+        "[--active-fg-color:hsl(var(--step-fg-color))]",
+        "[--active-border-color:hsl(var(--step-color))]",
+        "[--active-color:hsl(var(--step-color))]",
+        "[--complete-background-color:hsl(var(--step-color))]",
+        "[--complete-border-color:hsl(var(--step-color))]",
+        "[--inactive-border-color:hsl(var(--heroui-default-300))]",
+        "[--inactive-color:hsl(var(--heroui-default-300))]"
+      ];
+      switch (r) {
+        case "primary":
+          a = "[--step-color:var(--heroui-primary)]", t = "[--step-fg-color:var(--heroui-primary-foreground)]";
+          break;
+        case "secondary":
+          a = "[--step-color:var(--heroui-secondary)]", t = "[--step-fg-color:var(--heroui-secondary-foreground)]";
+          break;
+        case "success":
+          a = "[--step-color:var(--heroui-success)]", t = "[--step-fg-color:var(--heroui-success-foreground)]";
+          break;
+        case "warning":
+          a = "[--step-color:var(--heroui-warning)]", t = "[--step-fg-color:var(--heroui-warning-foreground)]";
+          break;
+        case "danger":
+          a = "[--step-color:var(--heroui-danger)]", t = "[--step-fg-color:var(--heroui-danger-foreground)]";
+          break;
+        case "default":
+          a = "[--step-color:var(--heroui-default)]", t = "[--step-fg-color:var(--heroui-default-foreground)]";
+          break;
+        default:
+          a = "[--step-color:var(--heroui-primary)]", t = "[--step-fg-color:var(--heroui-primary-foreground)]";
+          break;
+      }
+      return n.unshift(t), n.unshift(a), n;
+    }, [r]);
+    return /* @__PURE__ */ F("nav", { "aria-label": "Progress", className: "flex max-w-fit items-center overflow-x-auto", children: [
+      f && /* @__PURE__ */ e("label", { className: "text-small text-default-foreground lg:text-medium font-light w-full me-3", children: f }),
+      /* @__PURE__ */ e("ol", { className: p("flex flex-row flex-nowrap gap-x-3", d, m), children: Array.from({ length: c })?.map((a, t) => {
+        const n = o === t ? "active" : o < t ? "inactive" : "complete";
+        return /* @__PURE__ */ e("li", { className: "relative flex w-full items-center pr-12", children: /* @__PURE__ */ F(
+          "button",
+          {
+            ref: y,
+            "aria-current": n === "active" ? "step" : void 0,
+            className: p(
+              "group rounded-large flex w-full cursor-pointer flex-row items-center justify-center gap-x-3 py-2.5",
+              i
+            ),
+            onClick: () => N(t),
+            ...x,
+            children: [
+              /* @__PURE__ */ e("div", { className: "h-ful relative flex items-center", children: /* @__PURE__ */ e(j, { features: O, children: /* @__PURE__ */ e(k.div, { animate: n, className: "relative", children: /* @__PURE__ */ e(
+                k.div,
+                {
+                  animate: n,
+                  className: p(
+                    "border-medium text-large text-default-foreground relative flex h-[26px] w-[26px] items-center justify-center rounded-full font-semibold",
+                    {
+                      "shadow-lg": n === "complete"
+                    }
+                  ),
+                  initial: !1,
+                  transition: { duration: 0.25 },
+                  variants: {
+                    inactive: {
+                      backgroundColor: "transparent",
+                      borderColor: "var(--inactive-border-color)",
+                      color: "var(--inactive-color)"
+                    },
+                    active: {
+                      backgroundColor: "transparent",
+                      borderColor: "var(--active-border-color)",
+                      color: "var(--active-color)"
+                    },
+                    complete: {
+                      backgroundColor: "var(--complete-background-color)",
+                      borderColor: "var(--complete-border-color)",
+                      color: "var(--active-fg-color)"
+                    }
+                  },
+                  children: /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: n === "complete" ? /* @__PURE__ */ e(L, { className: "h-5 w-5 text-(--active-fg-color)" }) : /* @__PURE__ */ e("span", {}) })
+                }
+              ) }) }) }),
+              t < c - 1 && !u && /* @__PURE__ */ e(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: "pointer-events-none absolute inset-x-0 left-[26px] w-[calc(100%-13px)] flex-none items-center",
+                  style: {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-expect-error
+                    "--idx": t
+                  },
+                  children: /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: p(
+                        "bg-default-200 relative h-0.5 w-full transition-colors duration-300",
+                        "after:absolute after:block after:h-full after:w-0 after:bg-(--active-border-color) after:transition-[width] after:duration-300 after:content-['']",
+                        {
+                          "after:w-full": t < o
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          t
+        ) }, t);
+      }) })
+    ] });
+  }
+);
+U.displayName = "Stepper";
+function q(r) {
   return /* @__PURE__ */ e("footer", { className: "w-full py-12", children: /* @__PURE__ */ e("div", { className: "container mx-auto px-6 flex items-center justify-center", children: /* @__PURE__ */ e(
-    t,
+    g,
     {
       description: "This component needs to be implemented using HeroUI Link components. Include grid layout with link sections, logo, social media icons, and copyright text. Should be responsive and adapt to mobile/desktop.",
       title: "TODO: Implement Footer Pattern",
@@ -155,9 +323,9 @@ function u(n) {
     }
   ) }) });
 }
-function b(n) {
+function K(r) {
   return /* @__PURE__ */ e("div", { className: "min-h-screen flex flex-col", children: /* @__PURE__ */ e("div", { className: "flex-1 flex items-center justify-center p-12", children: /* @__PURE__ */ e(
-    t,
+    g,
     {
       description: "This template combines Navbar, Footer, and a confirmation Card. Include title, message, confirmation number, details list, icon, and action buttons. Use Card for the confirmation content.",
       title: "TODO: Implement ConfirmationPageTemplate",
@@ -166,9 +334,9 @@ function b(n) {
     }
   ) }) });
 }
-function x(n) {
+function Q(r) {
   return /* @__PURE__ */ e("div", { className: "min-h-screen flex flex-col", children: /* @__PURE__ */ e("div", { className: "flex-1 flex items-center justify-center p-12", children: /* @__PURE__ */ e(
-    t,
+    g,
     {
       description: "This template combines Navbar, Stepper, Footer, and an event details Card. Include event image, category/spots chips, tags, details grid, and action buttons. Use Card, CardHeader, CardBody for content structure.",
       title: "TODO: Implement EventDetailsTemplate",
@@ -178,14 +346,15 @@ function x(n) {
   ) }) });
 }
 export {
-  b as ConfirmationPageTemplate,
-  x as EventDetailsTemplate,
-  u as Footer,
-  d as HeroUIProvider,
-  p as Navbar,
-  f as Stepper,
-  r as colors,
-  l as spacing,
-  m as theme,
-  c as typography
+  G as Button,
+  K as ConfirmationPageTemplate,
+  Q as EventDetailsTemplate,
+  q as Footer,
+  z as HeroUIProvider,
+  J as Navbar,
+  U as Stepper,
+  v as colors,
+  R as spacing,
+  W as theme,
+  V as typography
 };

package/dist/patterns/Stepper/Stepper.d.ts

@@ -1,28 +1,209 @@
+import { ButtonProps } from '@heroui/react';
+import { default as React } from 'react';
 /**
- * Stepper Pattern
- * TODO: Implement visual composition for step-by-step processes
- *
- * Requirements:
- * - Visual step indicators (completed, current, upcoming)
- * - Horizontal and vertical orientation
- * - Connecting lines between steps
- * - Clickable steps (optional)
- * - States: completed (green), current (blue), upcoming (gray)
- * - Show number or checkmark based on state
- * - Externally controlled state via props
- * - No business logic
- * - Strict TypeScript
+ * Props for the Stepper component
+ *
+ * @interface StepperProps
+ * @extends {React.HTMLAttributes<HTMLButtonElement>}
  */
-export interface Step {
-    id: string;
-    label: string;
-    description?: string;
-}
-export interface StepperProps {
-    steps: Step[];
-    currentStep: number;
-    orientation?: 'horizontal' | 'vertical';
-    onStepClick?: (stepIndex: number) => void;
-    allowStepClick?: boolean;
+export interface StepperProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Optional label displayed before the stepper to provide context.
+     *
+     * @example
+     * ```tsx
+     * <Stepper label="Step 2 of 4" stepsCount={4} />
+     * ```
+     */
+    label?: string;
+    /**
+     * Total number of steps in the sequence.
+     *
+     * @default 3
+     * @minimum 1
+     *
+     * @example
+     * ```tsx
+     * <Stepper stepsCount={5} /> // Creates 5 steps
+     * ```
+     */
+    stepsCount?: number;
+    /**
+     * The color theme for the stepper.
+     * Applies to active and completed steps.
+     *
+     * @default "primary"
+     *
+     * @example
+     * ```tsx
+     * <Stepper color="success" stepsCount={3} />
+     * ```
+     */
+    color?: ButtonProps['color'];
+    /**
+     * The current active step index (zero-based).
+     * Use this prop for controlled mode.
+     *
+     * @controlled
+     *
+     * @example
+     * ```tsx
+     * const [step, setStep] = useState(0);
+     * <Stepper currentStep={step} onStepChange={setStep} />
+     * ```
+     */
+    currentStep?: number;
+    /**
+     * The initial step index for uncontrolled mode.
+     *
+     * @default 0
+     * @uncontrolled
+     *
+     * @example
+     * ```tsx
+     * <Stepper defaultStep={2} stepsCount={5} />
+     * ```
+     */
+    defaultStep?: number;
+    /**
+     * Whether to hide the connecting lines between steps.
+     *
+     * @default false
+     *
+     * @example
+     * ```tsx
+     * <Stepper hideProgressBars stepsCount={4} /> // No progress bars
+     * ```
+     */
+    hideProgressBars?: boolean;
+    /**
+     * Custom CSS class for the stepper wrapper (ol element).
+     *
+     * @example
+     * ```tsx
+     * <Stepper className="gap-x-6" stepsCount={3} />
+     * ```
+     */
+    className?: string;
+    /**
+     * Custom CSS class applied to each individual step button.
+     *
+     * @example
+     * ```tsx
+     * <Stepper
+     *   stepClassName="hover:bg-gray-100"
+     *   stepsCount={3}
+     * />
+     * ```
+     */
+    stepClassName?: string;
+    /**
+     * Callback fired when the active step changes.
+     * Used in controlled mode.
+     *
+     * @param stepIndex - The new step index (zero-based)
+     *
+     * @example
+     * ```tsx
+     * <Stepper
+     *   onStepChange={(index) => console.log('Step:', index)}
+     *   stepsCount={4}
+     * />
+     * ```
+     */
+    onStepChange?: (stepIndex: number) => void;
 }
-export declare function Stepper(_props: StepperProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Stepper - A horizontal progress indicator for multi-step processes.
+ *
+ * @description
+ * The Stepper component displays a sequence of numbered steps that indicate progress
+ * through a multi-step workflow. Each step can be clicked to navigate between steps,
+ * and completed steps are marked with a checkmark.
+ *
+ * @component
+ *
+ * @features
+ * - **Three step states**: inactive (upcoming), active (current), complete (finished)
+ * - **Interactive navigation**: Click any step to jump to it
+ * - **Animated transitions**: Smooth color and checkmark animations
+ * - **Progress indicators**: Optional connecting lines show completion progress
+ * - **Controlled & uncontrolled**: Works in both modes
+ * - **Customizable colors**: Supports all HeroUI color variants
+ * - **Accessible**: Full ARIA support and keyboard navigation
+ *
+ * @accessibility
+ * - Uses semantic HTML (`<nav>`, `<ol>`, `<li>`)
+ * - Includes `aria-label="Progress"` on navigation
+ * - Active step marked with `aria-current="step"`
+ * - All steps are keyboard accessible via tab navigation
+ *
+ * @performance
+ * - Lazy loads Framer Motion animations
+ * - Memoizes color calculations
+ * - Uses CSS variables for theming
+ *
+ * @example
+ * **Basic uncontrolled stepper**
+ * ```tsx
+ * <Stepper stepsCount={4} defaultStep={0} />
+ * ```
+ *
+ * @example
+ * **Controlled stepper with callback**
+ * ```tsx
+ * function MyForm() {
+ *   const [currentStep, setCurrentStep] = useState(0);
+ *
+ *   return (
+ *     <Stepper
+ *       currentStep={currentStep}
+ *       onStepChange={setCurrentStep}
+ *       stepsCount={4}
+ *       color="primary"
+ *       label={`Step ${currentStep + 1} of 4`}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * **With validation (prevent forward navigation)**
+ * ```tsx
+ * function ValidatedStepper() {
+ *   const [step, setStep] = useState(0);
+ *   const [completed, setCompleted] = useState<number[]>([]);
+ *
+ *   const handleStepChange = (newStep: number) => {
+ *     // Only allow navigation to completed steps or current step
+ *     if (newStep <= step || completed.includes(newStep)) {
+ *       setStep(newStep);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <Stepper
+ *       currentStep={step}
+ *       onStepChange={handleStepChange}
+ *       stepsCount={5}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * **Custom styling**
+ * ```tsx
+ * <Stepper
+ *   stepsCount={3}
+ *   color="success"
+ *   className="gap-x-8"
+ *   stepClassName="hover:bg-gray-50 rounded-xl"
+ *   hideProgressBars
+ * />
+ * ```
+ *
+ * @see {@link StepperProps} for all available props
+ * @see {@link https://storybook.heroui.com Storybook} for interactive examples
+ */
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/patterns/Stepper/Stepper.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Stepper Component Tests
+ */
+export {};

package/dist/patterns/Stepper/examples/FormExampleStepper.d.ts

@@ -0,0 +1 @@
+export declare function FormExampleStepper(): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/Stepper/examples/InteractiveStepper.d.ts

@@ -0,0 +1,2 @@
+import { StepperProps } from '../Stepper';
+export declare function InteractiveStepper(args: StepperProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/Stepper/examples/ValidationStepper.d.ts

@@ -0,0 +1 @@
+export declare function ValidationStepper(): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/Stepper/examples/index.d.ts

@@ -0,0 +1,3 @@
+export { InteractiveStepper } from './InteractiveStepper';
+export { FormExampleStepper } from './FormExampleStepper';
+export { ValidationStepper } from './ValidationStepper';

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

@@ -1,2 +1,2 @@
 export { Stepper } from './Stepper';
-export type { StepperProps, Step } from './Stepper';
+export type { StepperProps } from './Stepper';

package/dist/patterns/index.d.ts

@@ -2,5 +2,5 @@ export { Navbar } from './Navbar';
 export { Stepper } from './Stepper';
 export { Footer } from './Footer';
 export type { NavbarProps, NavbarLink, NavbarLanguage } from './Navbar';
-export type { StepperProps, Step } from './Stepper';
+export type { StepperProps } from './Stepper';
 export type { FooterProps, FooterSection, FooterLink, SocialLink } from './Footer';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "0.1.16",
+    "version": "0.1.17",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -14,6 +14,12 @@
         "build": "vite build",
         "lint": "eslint .",
         "preview": "vite preview",
+        "test": "vitest --run",
+        "test:watch": "vitest",
+        "test:unit": "vitest --project unit --run",
+        "test:unit:watch": "vitest --project unit",
+        "test:ui": "vitest --ui",
+        "test:coverage": "vitest --coverage --run",
         "storybook": "storybook dev -p 6006",
         "build-storybook": "storybook build",
         "deploy-storybook": "npm run build-storybook && npx vercel storybook-static --prod"
@@ -25,21 +31,21 @@
         "react-dom": "^18.0.0 || ^19.0.0"
     },
     "dependencies": {
-        "vite-plugin-dts": "latest",
-        "vite-plugin-css-injected-by-js": "latest"
+        "vite-plugin-css-injected-by-js": "latest",
+        "vite-plugin-dts": "latest"
     },
     "devDependencies": {
-        "@heroui/react": "^2.8.7",
-        "framer-motion": "^11.15.0",
-        "react": "19.2.3",
-        "react-dom": "19.2.3",
         "@chromatic-com/storybook": "^4.1.3",
         "@eslint/js": "^9.39.1",
+        "@heroui/react": "^2.8.7",
         "@storybook/addon-a11y": "^10.0.8",
         "@storybook/addon-docs": "^10.0.8",
         "@storybook/addon-onboarding": "^10.0.8",
         "@storybook/addon-vitest": "^10.0.8",
         "@storybook/react-vite": "^10.0.8",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.1",
+        "@testing-library/user-event": "^14.6.1",
         "@types/node": "^24.10.1",
         "@types/react": "^19.2.5",
         "@types/react-dom": "^19.2.3",
@@ -51,9 +57,13 @@
         "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-react-refresh": "^0.4.24",
         "eslint-plugin-storybook": "^10.0.8",
+        "framer-motion": "^11.15.0",
         "globals": "^16.5.0",
+        "jsdom": "^27.4.0",
         "playwright": "^1.56.1",
         "postcss": "^8.5.6",
+        "react": "19.2.3",
+        "react-dom": "19.2.3",
         "storybook": "^10.0.8",
         "tailwindcss": "^3.4.19",
         "typescript": "~5.9.3",