"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("react"),e=require("../index-DEZRGktf.js"),o=require("lucide-react");require("react-router-dom");require("react-dom");const c=()=>{const[r,a]=i.useState(45);return s.jsxs(s.Fragment,{children:[s.jsx(e.HeroCard,{title:"Progressbar",description:`A progress bar component for displaying completion status with
          customizable colors, sizes, and variants.`,icon:s.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:s.jsx(o.BarChart3,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),s.jsx(e.CardContainer,{className:"overflow-hidden",children:s.jsx(e.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:s.jsx("div",{className:"w-full p-4 sm:p-6",children:s.jsxs("div",{className:"space-y-4",children:[s.jsxs(e.CardContainer,{className:"p-4",children:[s.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Basic Progressbar"}),s.jsx(e.Progressbar,{value:r})]}),s.jsxs(e.CardContainer,{className:"p-4",children:[s.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"With Label"}),s.jsx(e.Progressbar,{value:r,label:`${r}%`,size:"xl"})]}),s.jsxs(e.CardContainer,{className:"p-4",children:[s.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Interactive Example"}),s.jsxs("div",{className:"space-y-2",children:[s.jsx(e.Progressbar,{value:r,label:`${r}%`,size:"xl"}),s.jsxs("div",{className:"flex gap-2",children:[s.jsx("button",{onClick:()=>a(Math.max(0,r-10)),className:"px-3 py-1 bg-light-dark rounded border border-border hover:opacity-80 transition-opacity",children:"-10"}),s.jsx("button",{onClick:()=>a(Math.min(100,r+10)),className:"px-3 py-1 bg-light-dark rounded border border-border hover:opacity-80 transition-opacity",children:"+10"})]})]})]})]})})})}),s.jsx(e.CardContainer,{className:"overflow-hidden",children:s.jsx(e.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:s.jsx("div",{className:"w-full p-4 sm:p-6",children:s.jsxs("div",{className:"space-y-4",children:[s.jsxs("div",{children:[s.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Colors"}),s.jsxs("div",{className:"space-y-2",children:[s.jsx(e.Progressbar,{value:60,color:"primary"}),s.jsx(e.Progressbar,{value:60,color:"success"}),s.jsx(e.Progressbar,{value:60,color:"danger"}),s.jsx(e.Progressbar,{value:60,color:"info"}),s.jsx(e.Progressbar,{value:60,color:"warning"})]})]}),s.jsxs("div",{children:[s.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Variants"}),s.jsxs("div",{className:"space-y-2",children:[s.jsx(e.Progressbar,{value:60,variant:"solid"}),s.jsx(e.Progressbar,{value:60,variant:"flat"})]})]}),s.jsxs("div",{children:[s.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Sizes"}),s.jsxs("div",{className:"space-y-2",children:[s.jsx(e.Progressbar,{value:60,size:"sm"}),s.jsx(e.Progressbar,{value:60,size:"DEFAULT"}),s.jsx(e.Progressbar,{value:60,size:"lg"}),s.jsx(e.Progressbar,{value:60,size:"xl"})]})]})]})})})}),s.jsx(e.PropPlayground,{componentName:"Progressbar",defaultValues:{value:65,variant:"solid",size:"DEFAULT",color:"primary",rounded:"DEFAULT"},excludeProps:["label","barClassName","labelClassName"],children:l=>s.jsx("div",{className:"w-full",children:s.jsx(e.Progressbar,{...l})})}),s.jsx(e.AutoPropsTable,{componentName:"Progressbar"}),s.jsx(e.CardContainer,{className:"overflow-hidden",children:s.jsx(e.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:s.jsx("div",{className:"w-full p-4 sm:p-6",children:s.jsx(e.CodeBlock,{language:"tsx",code:`import { Progressbar } from '@e-burgos/tucu-ui';

// Basic usage
<Progressbar value={45} />

// With label
<Progressbar value={45} label="45%" size="xl" />

// Different colors
<Progressbar value={60} color="primary" />
<Progressbar value={60} color="success" />
<Progressbar value={60} color="danger" />

// Different variants
<Progressbar value={60} variant="solid" />
<Progressbar value={60} variant="flat" />

// Different sizes
<Progressbar value={60} size="sm" />
<Progressbar value={60} size="lg" />
<Progressbar value={60} size="xl" />`})})})})]})};exports.default=c;
