@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/PieChartSection-CjOgCPaN.js

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=[{name:"Chrome",value:62},{name:"Safari",value:19},{name:"Firefox",value:10},{name:"Edge",value:6},{name:"Other",value:3}],r=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-base md:text-base font-semibold",children:"PieChart"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Pie and donut chart component for displaying proportions and distributions with labels and inner content support."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Pie Chart",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.PieChart,{data:t,height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Donut Chart",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.PieChart,{data:t,donut:!0,height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Donut with Inner Content",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.PieChart,{data:t,donut:!0,height:300,innerContent:e.jsxs("div",{className:"text-center",children:[e.jsx("p",{className:"text-2xl font-bold",children:"100%"}),e.jsx("p",{className:"text-sm text-gray-500",children:"Total"})]})})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Without Labels",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.PieChart,{data:t,showLabels:!1,height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Usage",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{code:`import { PieChart } from '@e-burgos/tucu-ui';
+
+const data = [
+  { name: 'Chrome', value: 62 },
+  { name: 'Safari', value: 19 },
+  { name: 'Firefox', value: 10 },
+  { name: 'Edge', value: 6 },
+  { name: 'Other', value: 3 },
+];
+
+<PieChart
+  data={data}
+  height={300}
+  donut
+  showLabels
+  showTooltip
+  showLegend
+  innerContent={<p>Center</p>}
+/>`,language:"tsx"})})})}),e.jsx(a.PropPlayground,{componentName:"PieChart",defaultValues:{height:300,donut:!1,showLabels:!0,showTooltip:!0,showLegend:!0,animate:!0},excludeProps:["data","colors","className","innerContent","emptyMessage"],children:s=>e.jsx(a.PieChart,{data:t,...s})}),e.jsx(a.AutoPropsTable,{componentName:"PieChart"})]});exports.default=r;

package/documentation/{PieChartSection-DuRH9AFw.js → PieChartSection-DgARlxCn.js}

@@ -1,42 +1,42 @@
-import { jsxs as s, Fragment as o, jsx as e } from "react/jsx-runtime";
-import { T as r, C as a, a as t, n as l, c as d, P as m, A as h } from "../index-D3gBsvbO.js";
+import { jsxs as n, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { T as r, C as a, a as t, n as l, c as d, P as m, A as h } from "../index-19KsCnyX.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const n = [
+const s = [
   { name: "Chrome", value: 62 },
   { name: "Safari", value: 19 },
   { name: "Firefox", value: 10 },
   { name: "Edge", value: 6 },
   { name: "Other", value: 3 }
-], N = () => /* @__PURE__ */ s(o, { children: [
-  /* @__PURE__ */ s("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(r, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "PieChart" }),
+], v = () => /* @__PURE__ */ n(o, { children: [
+  /* @__PURE__ */ n("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(r, { tag: "h2", className: "text-base md:text-base font-semibold", children: "PieChart" }),
     /* @__PURE__ */ e(
       r,
       {
         tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        className: "text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
         children: "Pie and donut chart component for displaying proportions and distributions with labels and inner content support."
       }
     )
   ] }),
-  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Basic Pie Chart", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(l, { data: n, height: 300 }) }) }) }),
-  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Donut Chart", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(l, { data: n, donut: !0, height: 300 }) }) }) }),
+  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Basic Pie Chart", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(l, { data: s, height: 300 }) }) }) }),
+  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Donut Chart", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(l, { data: s, donut: !0, height: 300 }) }) }) }),
   /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Donut with Inner Content", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
     l,
     {
-      data: n,
+      data: s,
       donut: !0,
       height: 300,
-      innerContent: /* @__PURE__ */ s("div", { className: "text-center", children: [
+      innerContent: /* @__PURE__ */ n("div", { className: "text-center", children: [
         /* @__PURE__ */ e("p", { className: "text-2xl font-bold", children: "100%" }),
         /* @__PURE__ */ e("p", { className: "text-sm text-gray-500", children: "Total" })
       ] })
     }
   ) }) }) }),
-  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Without Labels", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(l, { data: n, showLabels: !1, height: 300 }) }) }) }),
+  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Without Labels", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(l, { data: s, showLabels: !1, height: 300 }) }) }) }),
   /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Usage", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
     d,
     {
@@ -81,11 +81,11 @@ const data = [
         "innerContent",
         "emptyMessage"
       ],
-      children: (i) => /* @__PURE__ */ e(l, { data: n, ...i })
+      children: (i) => /* @__PURE__ */ e(l, { data: s, ...i })
     }
   ),
   /* @__PURE__ */ e(h, { componentName: "PieChart" })
 ] });
 export {
-  N as default
+  v as default
 };

package/documentation/PinCodeSection-BZ9lZb1m.js

@@ -0,0 +1,32 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),a=require("../index-DMs_SmPq.js"),m=require("lucide-react");require("react-router-dom");require("react-dom");const g=()=>{const[n,r]=i.useState(""),[d,o]=i.useState(""),t=[{label:"Primary",color:"primary"},{label:"Secondary",color:"secondary"},{label:"Danger",color:"danger"},{label:"Info",color:"info"},{label:"Success",color:"success"},{label:"Warning",color:"warning"}],c=[{label:"Small",size:"sm"},{label:"Medium",size:"md"},{label:"Large",size:"lg"}],h=[{label:"Square",rounded:"none"},{label:"Soft",rounded:"sm"},{label:"Default",rounded:"md"},{label:"Large",rounded:"lg"},{label:"Pill",rounded:"full"}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"PinCode",description:"A pin code input component for entering numeric codes digit by digit.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-amber-500 via-orange-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg border border-amber-500/50",children:e.jsx(m.Hash,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"4 Digit PinCode"}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2",children:"Pin Code"}),e.jsx(a.PinCode,{length:4,value:n,onChange:r})]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"6 Digit PinCode"}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2",children:"Verification Code"}),e.jsx(a.PinCode,{length:6,value:n,onChange:r})]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2",children:"Security Code"}),e.jsx(a.PinCode,{length:4,helperText:"Enter the 4-digit code",value:n,onChange:r})]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2",children:"Pin Code"}),e.jsx(a.PinCode,{length:4,error:"Invalid pin code",value:n,onChange:r})]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2",children:"Pin Code"}),e.jsx(a.PinCode,{length:4,disabled:!0})]})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.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:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2",children:"Ghost (default)"}),e.jsx(a.PinCode,{length:4,variant:"ghost"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2",children:"Solid"}),e.jsx(a.PinCode,{length:4,variant:"solid"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2",children:"Transparent"}),e.jsx(a.PinCode,{length:4,variant:"transparent"})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Colors",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",children:t.map(({label:s,color:l})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2 text-sm",children:s}),e.jsx(a.PinCode,{length:4,color:l})]},l))})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 md:grid-cols-3",children:c.map(({label:s,size:l})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2 text-sm",children:s}),e.jsx(a.PinCode,{length:4,size:l})]},l))})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Shapes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",children:h.map(({label:s,rounded:l})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2 text-sm",children:s}),e.jsx(a.PinCode,{length:4,rounded:l})]},l))})})})}),e.jsx(a.PropPlayground,{componentName:"PinCode",defaultValues:{length:4,type:"text",placeholder:"-",mask:!1,center:!0,size:"md",rounded:"md",variant:"ghost",color:"primary",helperText:"",error:"",fullWidth:!1,disabled:!1},controlOverrides:[{name:"placeholder",type:"text",description:"Character placeholder rendered in each box"},{name:"disabled",type:"boolean",description:"Disables the pin input and prevents interaction"}],includeProps:["length","type","placeholder","mask","center","size","rounded","variant","color","helperText","error","fullWidth","disabled"],excludeProps:["value","onChange","inputClassName","errorClassName","helperTextClassName","className"],children:s=>e.jsx("div",{className:"w-full max-w-lg flex justify-center",children:e.jsx(a.PinCode,{...s,value:d,onChange:o})})}),e.jsx(a.AutoPropsTable,{componentName:"PinCode"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{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="secondary" />
+<PinCode length={4} color="danger" />
+<PinCode length={4} color="info" />
+<PinCode length={4} color="success" />
+<PinCode length={4} color="warning" />
+
+// Sizes
+<PinCode length={4} size="sm" />
+<PinCode length={4} size="md" />
+<PinCode length={4} size="lg" />
+
+// Shapes
+<PinCode length={4} rounded="none" />
+<PinCode length={4} rounded="sm" />
+<PinCode length={4} rounded="md" />
+<PinCode length={4} rounded="lg" />
+<PinCode length={4} rounded="full" />`})})})})]})};exports.default=g;

package/documentation/PinCodeSection-v_9DV5Lk.js

@@ -0,0 +1,235 @@
+import { jsxs as l, Fragment as C, jsx as e } from "react/jsx-runtime";
+import { useState as t } from "react";
+import { H as N, C as a, a as s, T as n, r as i, P as b, A as v, c as f } from "../index-19KsCnyX.js";
+import { Hash as P } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const V = () => {
+  const [o, c] = t(""), [m, h] = t(""), g = [
+    { label: "Primary", color: "primary" },
+    { label: "Secondary", color: "secondary" },
+    { label: "Danger", color: "danger" },
+    { label: "Info", color: "info" },
+    { label: "Success", color: "success" },
+    { label: "Warning", color: "warning" }
+  ], p = [
+    { label: "Small", size: "sm" },
+    { label: "Medium", size: "md" },
+    { label: "Large", size: "lg" }
+  ], u = [
+    { label: "Square", rounded: "none" },
+    { label: "Soft", rounded: "sm" },
+    { label: "Default", rounded: "md" },
+    { label: "Large", rounded: "lg" },
+    { label: "Pill", rounded: "full" }
+  ];
+  return /* @__PURE__ */ l(C, { children: [
+    /* @__PURE__ */ e(
+      N,
+      {
+        title: "PinCode",
+        description: "A pin code input component for entering numeric codes digit by digit.",
+        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-amber-500 via-orange-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg border border-amber-500/50", children: /* @__PURE__ */ e(P, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "4 Digit PinCode" }),
+        /* @__PURE__ */ l("div", { children: [
+          /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Pin Code" }),
+          /* @__PURE__ */ e(
+            i,
+            {
+              length: 4,
+              value: o,
+              onChange: c
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "6 Digit PinCode" }),
+        /* @__PURE__ */ l("div", { children: [
+          /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Verification Code" }),
+          /* @__PURE__ */ e(
+            i,
+            {
+              length: 6,
+              value: o,
+              onChange: c
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
+        /* @__PURE__ */ l("div", { children: [
+          /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Security Code" }),
+          /* @__PURE__ */ e(
+            i,
+            {
+              length: 4,
+              helperText: "Enter the 4-digit code",
+              value: o,
+              onChange: c
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "With Error" }),
+        /* @__PURE__ */ l("div", { children: [
+          /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Pin Code" }),
+          /* @__PURE__ */ e(
+            i,
+            {
+              length: 4,
+              error: "Invalid pin code",
+              value: o,
+              onChange: c
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Disabled" }),
+        /* @__PURE__ */ l("div", { children: [
+          /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Pin Code" }),
+          /* @__PURE__ */ e(i, { length: 4, disabled: !0 })
+        ] })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Ghost (default)" }),
+        /* @__PURE__ */ e(i, { length: 4, variant: "ghost" })
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Solid" }),
+        /* @__PURE__ */ e(i, { length: 4, variant: "solid" })
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Transparent" }),
+        /* @__PURE__ */ e(i, { length: 4, variant: "transparent" })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: g.map(({ label: r, color: d }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2 text-sm", children: r }),
+      /* @__PURE__ */ e(i, { length: 4, color: d })
+    ] }, d)) }) }) }) }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: p.map(({ label: r, size: d }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2 text-sm", children: r }),
+      /* @__PURE__ */ e(i, { length: 4, size: d })
+    ] }, d)) }) }) }) }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Shapes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: u.map(({ label: r, rounded: d }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2 text-sm", children: r }),
+      /* @__PURE__ */ e(i, { length: 4, rounded: d })
+    ] }, d)) }) }) }) }),
+    /* @__PURE__ */ e(
+      b,
+      {
+        componentName: "PinCode",
+        defaultValues: {
+          length: 4,
+          type: "text",
+          placeholder: "-",
+          mask: !1,
+          center: !0,
+          size: "md",
+          rounded: "md",
+          variant: "ghost",
+          color: "primary",
+          helperText: "",
+          error: "",
+          fullWidth: !1,
+          disabled: !1
+        },
+        controlOverrides: [
+          {
+            name: "placeholder",
+            type: "text",
+            description: "Character placeholder rendered in each box"
+          },
+          {
+            name: "disabled",
+            type: "boolean",
+            description: "Disables the pin input and prevents interaction"
+          }
+        ],
+        includeProps: [
+          "length",
+          "type",
+          "placeholder",
+          "mask",
+          "center",
+          "size",
+          "rounded",
+          "variant",
+          "color",
+          "helperText",
+          "error",
+          "fullWidth",
+          "disabled"
+        ],
+        excludeProps: [
+          "value",
+          "onChange",
+          "inputClassName",
+          "errorClassName",
+          "helperTextClassName",
+          "className"
+        ],
+        children: (r) => /* @__PURE__ */ e("div", { className: "w-full max-w-lg flex justify-center", children: /* @__PURE__ */ e(
+          i,
+          {
+            ...r,
+            value: m,
+            onChange: h
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ e(v, { componentName: "PinCode" }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      f,
+      {
+        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="secondary" />
+<PinCode length={4} color="danger" />
+<PinCode length={4} color="info" />
+<PinCode length={4} color="success" />
+<PinCode length={4} color="warning" />
+
+// Sizes
+<PinCode length={4} size="sm" />
+<PinCode length={4} size="md" />
+<PinCode length={4} size="lg" />
+
+// Shapes
+<PinCode length={4} rounded="none" />
+<PinCode length={4} rounded="sm" />
+<PinCode length={4} rounded="md" />
+<PinCode length={4} rounded="lg" />
+<PinCode length={4} rounded="full" />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  V as default
+};

package/documentation/ProgressbarSection-D3DYoI4Y.js

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("react"),e=require("../index-DMs_SmPq.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;

package/documentation/ProgressbarSection-DlUhNhf2.js

@@ -0,0 +1,142 @@
+import { jsxs as r, Fragment as t, jsx as e } from "react/jsx-runtime";
+import { useState as n } from "react";
+import { H as m, C as l, a as o, T as i, ae as a, P as h, A as u, c as v } from "../index-19KsCnyX.js";
+import { BarChart3 as p } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const x = () => {
+  const [s, c] = n(45);
+  return /* @__PURE__ */ r(t, { children: [
+    /* @__PURE__ */ e(
+      m,
+      {
+        title: "Progressbar",
+        description: `A progress bar component for displaying completion status with
+          customizable colors, sizes, and variants.`,
+        icon: /* @__PURE__ */ e("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: /* @__PURE__ */ e(p, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(l, { 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__ */ r("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ r(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Basic Progressbar" }),
+        /* @__PURE__ */ e(a, { value: s })
+      ] }),
+      /* @__PURE__ */ r(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "With Label" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            value: s,
+            label: `${s}%`,
+            size: "xl"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Interactive Example" }),
+        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(
+            a,
+            {
+              value: s,
+              label: `${s}%`,
+              size: "xl"
+            }
+          ),
+          /* @__PURE__ */ r("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: () => c(Math.max(0, s - 10)),
+                className: "px-3 py-1 bg-light-dark rounded border border-border hover:opacity-80 transition-opacity",
+                children: "-10"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: () => c(Math.min(100, s + 10)),
+                className: "px-3 py-1 bg-light-dark rounded border border-border hover:opacity-80 transition-opacity",
+                children: "+10"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(l, { 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__ */ r("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ r("div", { children: [
+        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Colors" }),
+        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(a, { value: 60, color: "primary" }),
+          /* @__PURE__ */ e(a, { value: 60, color: "success" }),
+          /* @__PURE__ */ e(a, { value: 60, color: "danger" }),
+          /* @__PURE__ */ e(a, { value: 60, color: "info" }),
+          /* @__PURE__ */ e(a, { value: 60, color: "warning" })
+        ] })
+      ] }),
+      /* @__PURE__ */ r("div", { children: [
+        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Variants" }),
+        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(a, { value: 60, variant: "solid" }),
+          /* @__PURE__ */ e(a, { value: 60, variant: "flat" })
+        ] })
+      ] }),
+      /* @__PURE__ */ r("div", { children: [
+        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Sizes" }),
+        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(a, { value: 60, size: "sm" }),
+          /* @__PURE__ */ e(a, { value: 60, size: "DEFAULT" }),
+          /* @__PURE__ */ e(a, { value: 60, size: "lg" }),
+          /* @__PURE__ */ e(a, { value: 60, size: "xl" })
+        ] })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(
+      h,
+      {
+        componentName: "Progressbar",
+        defaultValues: {
+          value: 65,
+          variant: "solid",
+          size: "DEFAULT",
+          color: "primary",
+          rounded: "DEFAULT"
+        },
+        excludeProps: ["label", "barClassName", "labelClassName"],
+        children: (d) => /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(a, { ...d }) })
+      }
+    ),
+    /* @__PURE__ */ e(u, { componentName: "Progressbar" }),
+    /* @__PURE__ */ e(l, { 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(
+      v,
+      {
+        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 {
+  x as default
+};

package/documentation/{RadarChartSection-CrY3D0r8.js → RadarChartSection-CUbzsVhA.js}

@@ -1,5 +1,5 @@
-import { jsxs as r, Fragment as c, jsx as a } from "react/jsx-runtime";
-import { T as i, C as e, a as t, R as m, c as d, P as o, A as n } from "../index-D3gBsvbO.js";
+import { jsxs as i, Fragment as c, jsx as a } from "react/jsx-runtime";
+import { T as r, C as e, a as t, R as m, c as d, P as o, A as n } from "../index-19KsCnyX.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";
@@ -11,14 +11,14 @@ const s = [
   { subject: "Security", teamA: 95, teamB: 75, teamC: 80 },
   { subject: "Usability", teamA: 80, teamB: 90, teamC: 70 },
   { subject: "Efficiency", teamA: 75, teamB: 65, teamC: 85 }
-], A = () => /* @__PURE__ */ r(c, { children: [
-  /* @__PURE__ */ r("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ a(i, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "RadarChart" }),
+], A = () => /* @__PURE__ */ i(c, { children: [
+  /* @__PURE__ */ i("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ a(r, { tag: "h2", className: "text-base md:text-base font-semibold", children: "RadarChart" }),
     /* @__PURE__ */ a(
-      i,
+      r,
       {
         tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        className: "text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
         children: "Radar chart component for comparing multiple variables across categories, ideal for skill assessments and performance comparisons."
       }
     )

package/documentation/RadarChartSection-Ddb_fGPc.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=[{subject:"Performance",teamA:85,teamB:70,teamC:60},{subject:"Reliability",teamA:90,teamB:80,teamC:75},{subject:"Scalability",teamA:70,teamB:85,teamC:90},{subject:"Security",teamA:95,teamB:75,teamC:80},{subject:"Usability",teamA:80,teamB:90,teamC:70},{subject:"Efficiency",teamA:75,teamB:65,teamC:85}],r=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-base md:text-base font-semibold",children:"RadarChart"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Radar chart component for comparing multiple variables across categories, ideal for skill assessments and performance comparisons."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Radar Chart",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.RadarChart,{data:t,series:[{dataKey:"teamA",name:"Team A"}],height:350})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Multiple Series Comparison",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.RadarChart,{data:t,series:[{dataKey:"teamA",name:"Team A"},{dataKey:"teamB",name:"Team B"},{dataKey:"teamC",name:"Team C"}],height:350})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Higher Fill Opacity",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.RadarChart,{data:t,series:[{dataKey:"teamA",name:"Team A"},{dataKey:"teamB",name:"Team B"}],fillOpacity:.6,height:350})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Usage",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{code:`import { RadarChart } from '@e-burgos/tucu-ui';
+
+const data = [
+  { subject: 'Performance', teamA: 85, teamB: 70 },
+  { subject: 'Reliability', teamA: 90, teamB: 80 },
+  { subject: 'Scalability', teamA: 70, teamB: 85 },
+  { subject: 'Security', teamA: 95, teamB: 75 },
+  { subject: 'Usability', teamA: 80, teamB: 90 },
+];
+
+<RadarChart
+  data={data}
+  series={[
+    { dataKey: 'teamA', name: 'Team A' },
+    { dataKey: 'teamB', name: 'Team B' },
+  ]}
+  height={350}
+  fillOpacity={0.3}
+  showTooltip
+  showLegend
+/>`,language:"tsx"})})})}),e.jsx(a.PropPlayground,{componentName:"RadarChart",defaultValues:{height:350,fillOpacity:.3,showTooltip:!0,showLegend:!0,animate:!0},excludeProps:["data","series","colors","className","emptyMessage"],children:s=>e.jsx(a.RadarChart,{data:t,series:[{dataKey:"teamA",name:"Team A"},{dataKey:"teamB",name:"Team B"}],...s})}),e.jsx(a.AutoPropsTable,{componentName:"RadarChart"})]});exports.default=r;