@e-burgos/tucu-ui 1.1.1 → 1.5.0

package/PinCodeSection-DRvKUePb.mjs

@@ -0,0 +1,263 @@
+import { jsxs as a, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { T as l, C as i, a as r, P as s, B as p, c as m } from "./index-DCf83AyI.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const y = () => {
+  const [n, d] = h("");
+  return /* @__PURE__ */ a(o, { children: [
+    /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "PinCode" }),
+      /* @__PURE__ */ e(
+        l,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "A pin code input component for entering numeric codes digit by digit."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "4 Digit PinCode" }),
+        /* @__PURE__ */ a("div", { children: [
+          /* @__PURE__ */ e(l, { tag: "h5", className: "mb-2", children: "Pin Code" }),
+          /* @__PURE__ */ e(
+            s,
+            {
+              length: 4,
+              value: n,
+              onChange: d
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "6 Digit PinCode" }),
+        /* @__PURE__ */ a("div", { children: [
+          /* @__PURE__ */ e(l, { tag: "h5", className: "mb-2", children: "Verification Code" }),
+          /* @__PURE__ */ e(
+            s,
+            {
+              length: 6,
+              value: n,
+              onChange: d
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
+        /* @__PURE__ */ a("div", { children: [
+          /* @__PURE__ */ e(l, { tag: "h5", className: "mb-2", children: "Security Code" }),
+          /* @__PURE__ */ e(
+            s,
+            {
+              length: 4,
+              helperText: "Enter the 4-digit code",
+              value: n,
+              onChange: d
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Error" }),
+        /* @__PURE__ */ a("div", { children: [
+          /* @__PURE__ */ e(l, { tag: "h5", className: "mb-2", children: "Pin Code" }),
+          /* @__PURE__ */ e(
+            s,
+            {
+              length: 4,
+              error: "Invalid pin code",
+              value: n,
+              onChange: d
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Disabled" }),
+        /* @__PURE__ */ a("div", { children: [
+          /* @__PURE__ */ e(l, { tag: "h5", className: "mb-2", children: "Pin Code" }),
+          /* @__PURE__ */ e(s, { length: 4, disabled: !0 })
+        ] })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-2", children: "Ghost (default)" }),
+        /* @__PURE__ */ e(s, { length: 4, variant: "ghost" })
+      ] }),
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-2", children: "Solid" }),
+        /* @__PURE__ */ e(s, { length: 4, variant: "solid" })
+      ] }),
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-2", children: "Transparent" }),
+        /* @__PURE__ */ e(s, { length: 4, variant: "transparent" })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Colors & Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-2", children: "Different Colors" }),
+        /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(l, { tag: "h5", className: "mb-1 text-xs", children: "Primary" }),
+            /* @__PURE__ */ e(s, { length: 4, color: "primary" })
+          ] }),
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(l, { tag: "h5", className: "mb-1 text-xs", children: "Danger" }),
+            /* @__PURE__ */ e(s, { length: 4, color: "danger" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(l, { tag: "h5", className: "mb-2", children: "Different Sizes" }),
+        /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(l, { tag: "h5", className: "mb-1 text-xs", children: "Small" }),
+            /* @__PURE__ */ e(s, { length: 4, size: "sm" })
+          ] }),
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(l, { tag: "h5", className: "mb-1 text-xs", children: "Medium" }),
+            /* @__PURE__ */ e(s, { length: 4, size: "md" })
+          ] }),
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(l, { tag: "h5", className: "mb-1 text-xs", children: "Large" }),
+            /* @__PURE__ */ e(s, { length: 4, size: "lg" })
+          ] })
+        ] })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(p, { columns: [
+      {
+        key: "prop",
+        label: "Prop",
+        render: (t) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(t) })
+      },
+      {
+        key: "type",
+        label: "Type",
+        render: (t) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(t) })
+      },
+      {
+        key: "default",
+        label: "Default",
+        render: (t) => {
+          const c = String(t);
+          return c === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: c });
+        }
+      },
+      {
+        key: "description",
+        label: "Description"
+      }
+    ], data: [
+      {
+        prop: "length",
+        type: "number",
+        default: "required",
+        description: "Number of pin code digits"
+      },
+      {
+        prop: "value",
+        type: "string",
+        default: "-",
+        description: "Current pin code value"
+      },
+      {
+        prop: "onChange",
+        type: "(value: string) => void",
+        default: "-",
+        description: "Callback when pin code changes"
+      },
+      {
+        prop: "variant",
+        type: "'ghost' | 'solid' | 'transparent'",
+        default: "'ghost'",
+        description: "Visual variant of the pin code inputs"
+      },
+      {
+        prop: "size",
+        type: "'sm' | 'md' | 'lg' | 'xl'",
+        default: "'md'",
+        description: "Size of the pin code inputs"
+      },
+      {
+        prop: "color",
+        type: "'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning'",
+        default: "'primary'",
+        description: "Color theme of the pin code inputs"
+      },
+      {
+        prop: "type",
+        type: "'text' | 'number'",
+        default: "'text'",
+        description: "Input type for pin code fields"
+      },
+      {
+        prop: "mask",
+        type: "boolean",
+        default: "false",
+        description: "Mask the pin code values"
+      },
+      {
+        prop: "center",
+        type: "boolean",
+        default: "false",
+        description: "Center the pin code horizontally"
+      },
+      {
+        prop: "disabled",
+        type: "boolean",
+        default: "false",
+        description: "Disables all pin code inputs"
+      },
+      {
+        prop: "error",
+        type: "string",
+        default: "-",
+        description: "Error message to display"
+      },
+      {
+        prop: "helperText",
+        type: "string",
+        default: "-",
+        description: "Helper text displayed below the pin code"
+      }
+    ] }) }) }) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      m,
+      {
+        language: "tsx",
+        code: `import { PinCode } from '@e-burgos/tucu-ui';
+
+<PinCode
+  length={4}
+  value={value}
+  onChange={setValue}
+/>
+
+// Variants
+<PinCode length={4} variant="ghost" />
+<PinCode length={4} variant="solid" />
+<PinCode length={4} variant="transparent" />
+
+// Colors
+<PinCode length={4} color="primary" />
+<PinCode length={4} color="danger" />
+<PinCode length={4} color="success" />
+
+// Sizes
+<PinCode length={4} size="sm" />
+<PinCode length={4} size="md" />
+<PinCode length={4} size="lg" />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  y as default
+};

package/ProgressbarSection-CKbkhmQS.mjs

@@ -0,0 +1,195 @@
+import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { T as s, C as i, a as o, $ as r, B as h, c as g } from "./index-DCf83AyI.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const P = () => {
+  const [l, c] = u(45), n = [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (t) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(t) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (t) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(t) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (t) => {
+        const d = String(t);
+        return d === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: d });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ], p = [
+    {
+      prop: "value",
+      type: "number",
+      default: "-",
+      description: "Percentage value (0-100)"
+    },
+    {
+      prop: "label",
+      type: "React.ReactNode",
+      default: "''",
+      description: "Label to display inside the bar"
+    },
+    {
+      prop: "size",
+      type: "'sm' | 'DEFAULT' | 'lg' | 'xl'",
+      default: "'DEFAULT'",
+      description: "Size of the progressbar"
+    },
+    {
+      prop: "rounded",
+      type: "'none' | 'sm' | 'md' | 'lg' | 'DEFAULT'",
+      default: "'DEFAULT'",
+      description: "Border radius"
+    },
+    {
+      prop: "color",
+      type: "'DEFAULT' | 'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning'",
+      default: "'DEFAULT'",
+      description: "Color variant"
+    },
+    {
+      prop: "variant",
+      type: "'solid' | 'flat'",
+      default: "'solid'",
+      description: "Visual variant"
+    },
+    {
+      prop: "className",
+      type: "string",
+      default: "-",
+      description: "Additional CSS classes"
+    }
+  ];
+  return /* @__PURE__ */ a(m, { children: [
+    /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Progressbar" }),
+      /* @__PURE__ */ e(
+        s,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "A progress bar component for displaying completion status with customizable colors, sizes, and variants."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Basic Progressbar" }),
+        /* @__PURE__ */ e(r, { value: l })
+      ] }),
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "With Label" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            value: l,
+            label: `${l}%`,
+            size: "xl"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Interactive Example" }),
+        /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(
+            r,
+            {
+              value: l,
+              label: `${l}%`,
+              size: "xl"
+            }
+          ),
+          /* @__PURE__ */ a("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: () => c(Math.max(0, l - 10)),
+                className: "px-3 py-1 bg-light-dark rounded border border-gray-300 dark:border-gray-600 hover:opacity-80 transition-opacity",
+                children: "-10"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: () => c(Math.min(100, l + 10)),
+                className: "px-3 py-1 bg-light-dark rounded border border-gray-300 dark:border-gray-600 hover:opacity-80 transition-opacity",
+                children: "+10"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ a("div", { children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Colors" }),
+        /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(r, { value: 60, color: "primary" }),
+          /* @__PURE__ */ e(r, { value: 60, color: "success" }),
+          /* @__PURE__ */ e(r, { value: 60, color: "danger" }),
+          /* @__PURE__ */ e(r, { value: 60, color: "info" }),
+          /* @__PURE__ */ e(r, { value: 60, color: "warning" })
+        ] })
+      ] }),
+      /* @__PURE__ */ a("div", { children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Variants" }),
+        /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(r, { value: 60, variant: "solid" }),
+          /* @__PURE__ */ e(r, { value: 60, variant: "flat" })
+        ] })
+      ] }),
+      /* @__PURE__ */ a("div", { children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Sizes" }),
+        /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(r, { value: 60, size: "sm" }),
+          /* @__PURE__ */ e(r, { value: 60, size: "DEFAULT" }),
+          /* @__PURE__ */ e(r, { value: 60, size: "lg" }),
+          /* @__PURE__ */ e(r, { value: 60, size: "xl" })
+        ] })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(h, { columns: n, data: p }) }) }) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      g,
+      {
+        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" />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  P as default
+};

package/ProgressbarSection-CRCYjRpw.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),s=require("./index-BoEJRnmP.js");require("lucide-react");require("react-router-dom");require("react-dom");const n=()=>{const[r,l]=c.useState(45),o=[{key:"prop",label:"Prop",render:a=>e.jsx("code",{className:"text-xs text-brand",children:String(a)})},{key:"type",label:"Type",render:a=>e.jsx("code",{className:"text-xs",children:String(a)})},{key:"default",label:"Default",render:a=>{const i=String(a);return i==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:i})}},{key:"description",label:"Description"}],t=[{prop:"value",type:"number",default:"-",description:"Percentage value (0-100)"},{prop:"label",type:"React.ReactNode",default:"''",description:"Label to display inside the bar"},{prop:"size",type:"'sm' | 'DEFAULT' | 'lg' | 'xl'",default:"'DEFAULT'",description:"Size of the progressbar"},{prop:"rounded",type:"'none' | 'sm' | 'md' | 'lg' | 'DEFAULT'",default:"'DEFAULT'",description:"Border radius"},{prop:"color",type:"'DEFAULT' | 'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning'",default:"'DEFAULT'",description:"Color variant"},{prop:"variant",type:"'solid' | 'flat'",default:"'solid'",description:"Visual variant"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Progressbar"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A progress bar component for displaying completion status with customizable colors, sizes, and variants."})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Basic Progressbar"}),e.jsx(s.Progressbar,{value:r})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Label"}),e.jsx(s.Progressbar,{value:r,label:`${r}%`,size:"xl"})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Interactive Example"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Progressbar,{value:r,label:`${r}%`,size:"xl"}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx("button",{onClick:()=>l(Math.max(0,r-10)),className:"px-3 py-1 bg-light-dark rounded border border-gray-300 dark:border-gray-600 hover:opacity-80 transition-opacity",children:"-10"}),e.jsx("button",{onClick:()=>l(Math.min(100,r+10)),className:"px-3 py-1 bg-light-dark rounded border border-gray-300 dark:border-gray-600 hover:opacity-80 transition-opacity",children:"+10"})]})]})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Colors"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Progressbar,{value:60,color:"primary"}),e.jsx(s.Progressbar,{value:60,color:"success"}),e.jsx(s.Progressbar,{value:60,color:"danger"}),e.jsx(s.Progressbar,{value:60,color:"info"}),e.jsx(s.Progressbar,{value:60,color:"warning"})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Variants"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Progressbar,{value:60,variant:"solid"}),e.jsx(s.Progressbar,{value:60,variant:"flat"})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Sizes"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Progressbar,{value:60,size:"sm"}),e.jsx(s.Progressbar,{value:60,size:"DEFAULT"}),e.jsx(s.Progressbar,{value:60,size:"lg"}),e.jsx(s.Progressbar,{value:60,size:"xl"})]})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.BasicTable,{columns:o,data:t})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.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=n;