"use strict";(self.webpackChunkelite_events_nextjs=self.webpackChunkelite_events_nextjs||[]).push([[1669],{"./src/components/ui/Stepper/Stepper.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{FirstStep:()=>FirstStep,HorizontalDefault:()=>HorizontalDefault,Interactive:()=>Interactive,LastStep:()=>LastStep,ManySteps:()=>ManySteps,VerticalDefault:()=>VerticalDefault,VerticalInteractive:()=>VerticalInteractive,WithoutDescription:()=>WithoutDescription,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Stepper_stories});var jsx_runtime=__webpack_require__("./node_modules/next/dist/compiled/react/jsx-runtime.js"),react=__webpack_require__("./node_modules/next/dist/compiled/react/index.js"),icons=__webpack_require__("./src/components/ui/icons/index.ts"),core=__webpack_require__("./src/lib/core/index.ts");const Stepper=react.forwardRef(({steps,currentStep,onStepClick,clickable=!1,orientation="horizontal",showDescription=!0,className},ref)=>{const isHorizontal="horizontal"===orientation;return(0,jsx_runtime.jsx)("div",{ref,className:(0,core.cn)("stepper",isHorizontal?"flex items-start":"flex flex-col",className),role:"navigation","aria-label":"Progress",children:steps.map((step,index)=>{const status=(index=>index<currentStep?"completed":index===currentStep?"current":"upcoming")(index),isCompleted="completed"===status,isCurrent="current"===status,isClickable=clickable&&isCompleted,isLast=index===steps.length-1;return(0,jsx_runtime.jsx)("div",{className:(0,core.cn)("stepper-item",isHorizontal?"flex-1":"flex",isHorizontal&&!isLast&&"pb-0",!isHorizontal&&!isLast&&"pb-8"),children:(0,jsx_runtime.jsxs)("div",{className:(0,core.cn)(isHorizontal?"flex flex-col items-center":"flex items-start","w-full"),children:[(0,jsx_runtime.jsxs)("div",{className:(0,core.cn)("flex items-center",isHorizontal?"w-full":"flex-shrink-0"),children:[(0,jsx_runtime.jsx)("button",{type:"button",onClick:()=>(index=>{clickable&&index<currentStep&&onStepClick&&onStepClick(index)})(index),disabled:!isClickable,className:(0,core.cn)("stepper-circle","relative flex items-center justify-center","w-10 h-10 rounded-full","font-medium text-sm","transition-all duration-200","focus:outline-none focus:ring-2 focus:ring-offset-2",isCompleted&&["bg-primary text-white",isClickable&&"cursor-pointer hover:bg-primary-700",!isClickable&&"cursor-default"],isCurrent&&["bg-primary text-white","ring-4 ring-primary-100","cursor-default"],!isCompleted&&!isCurrent&&["bg-gray-200 text-gray-500","cursor-default"],"focus:ring-primary-200"),"aria-current":isCurrent?"step":void 0,"aria-label":`${isCompleted?"Completed: ":isCurrent?"Current: ":""}${step.label}`,children:step.icon?step.icon:isCompleted?(0,jsx_runtime.jsx)(icons.Sr,{className:"w-5 h-5","aria-hidden":"true"}):(0,jsx_runtime.jsx)("span",{children:index+1})}),!isLast&&(0,jsx_runtime.jsx)("div",{className:(0,core.cn)("stepper-connector",isHorizontal?"flex-1 h-0.5 mx-2":"w-0.5 ml-5 flex-1",isCompleted?"bg-primary":"bg-gray-200","transition-colors duration-200"),"aria-hidden":"true"})]}),(0,jsx_runtime.jsxs)("div",{className:(0,core.cn)("stepper-content",isHorizontal?"mt-3 text-center":"ml-4 pb-8"),children:[(0,jsx_runtime.jsx)("div",{className:(0,core.cn)("text-sm font-medium",isCurrent&&"text-primary",isCompleted&&"text-gray-900",!isCurrent&&!isCompleted&&"text-gray-500"),children:step.label}),showDescription&&step.description&&(0,jsx_runtime.jsx)("div",{className:(0,core.cn)("mt-1 text-xs",isCurrent&&"text-gray-600",isCompleted&&"text-gray-500",!isCurrent&&!isCompleted&&"text-gray-400"),children:step.description})]})]})},index)})})});Stepper.displayName="Stepper";const ui_Stepper=Stepper,Stepper_stories={title:"UI/Stepper",component:Stepper,parameters:{layout:"padded"},tags:["autodocs"]},checkoutSteps=[{id:"shipping",label:"Shipping",description:"Enter delivery address"},{id:"payment",label:"Payment",description:"Choose payment method"},{id:"review",label:"Review",description:"Confirm your order"}],onboardingSteps=[{id:"account",label:"Account",description:"Create your account"},{id:"profile",label:"Profile",description:"Set up your profile"},{id:"preferences",label:"Preferences",description:"Choose your preferences"},{id:"complete",label:"Complete",description:"Start using the app"}],HorizontalDefault={args:{steps:checkoutSteps,currentStep:1,orientation:"horizontal",showDescription:!0}},VerticalDefault={args:{steps:checkoutSteps,currentStep:1,orientation:"vertical",showDescription:!0}},WithoutDescription={args:{steps:checkoutSteps,currentStep:1,orientation:"horizontal",showDescription:!1}},FirstStep={args:{steps:checkoutSteps,currentStep:0,orientation:"horizontal"}},LastStep={args:{steps:checkoutSteps,currentStep:2,orientation:"horizontal"}},ManySteps={args:{steps:onboardingSteps,currentStep:2,orientation:"horizontal"}};function InteractiveExample(){const[currentStep,setCurrentStep]=(0,react.useState)(1);return(0,jsx_runtime.jsxs)("div",{className:"space-y-8",children:[(0,jsx_runtime.jsx)(ui_Stepper,{steps:checkoutSteps,currentStep,onStepClick:setCurrentStep,clickable:!0,orientation:"horizontal"}),(0,jsx_runtime.jsxs)("div",{className:"flex gap-4 justify-center",children:[(0,jsx_runtime.jsx)("button",{onClick:()=>setCurrentStep(Math.max(0,currentStep-1)),disabled:0===currentStep,className:"px-4 py-2 bg-gray-200 rounded disabled:opacity-50",children:"Previous"}),(0,jsx_runtime.jsx)("button",{onClick:()=>setCurrentStep(Math.min(checkoutSteps.length-1,currentStep+1)),disabled:currentStep===checkoutSteps.length-1,className:"px-4 py-2 bg-primary text-white rounded disabled:opacity-50",children:"Next"})]})]})}const Interactive={render:()=>(0,jsx_runtime.jsx)(InteractiveExample,{})};function VerticalInteractiveExample(){const[currentStep,setCurrentStep]=(0,react.useState)(1);return(0,jsx_runtime.jsxs)("div",{className:"flex gap-8",children:[(0,jsx_runtime.jsx)(ui_Stepper,{steps:onboardingSteps,currentStep,onStepClick:setCurrentStep,clickable:!0,orientation:"vertical"}),(0,jsx_runtime.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,jsx_runtime.jsx)("button",{onClick:()=>setCurrentStep(Math.max(0,currentStep-1)),disabled:0===currentStep,className:"px-4 py-2 bg-gray-200 rounded disabled:opacity-50",children:"Previous"}),(0,jsx_runtime.jsx)("button",{onClick:()=>setCurrentStep(Math.min(onboardingSteps.length-1,currentStep+1)),disabled:currentStep===onboardingSteps.length-1,className:"px-4 py-2 bg-primary text-white rounded disabled:opacity-50",children:"Next"})]})]})}const VerticalInteractive={render:()=>(0,jsx_runtime.jsx)(VerticalInteractiveExample,{})},__namedExportsOrder=["HorizontalDefault","VerticalDefault","WithoutDescription","FirstStep","LastStep","ManySteps","Interactive","VerticalInteractive"]}}]);