@e-burgos/tucu-ui 2.0.2 → 2.0.4

package/{ParamTabSection-CDuKVp-d.mjs → documentation/ParamTabSection-guQ8aCfG.js}

@@ -1,76 +1,16 @@
-import { jsxs as t, Fragment as y, jsx as e } from "react/jsx-runtime";
-import { T as a, C as i, a as l, ae as n, ac as r, B as h, c as f } from "./index-HwvOEWI7.mjs";
-import { Home as p, BarChart as b, FileText as g, Settings as c, User as v, Bell as N } from "lucide-react";
+import { jsxs as t, Fragment as p, jsx as e } from "react/jsx-runtime";
+import { T as a, C as i, a as l, aq as n, ao as s, A as b, c as g } from "../index-B6CStnMG.js";
+import { Home as o, BarChart as m, FileText as h, Settings as c, User as x, Bell as y } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const R = () => {
-  const o = [
+const S = () => {
+  const d = [
     { title: "Overview", path: "overview" },
     { title: "Details", path: "details" },
     { title: "Settings", path: "settings" }
-  ], u = [
-    {
-      title: "Dashboard",
-      path: "dashboard",
-      icon: /* @__PURE__ */ e(p, { size: 16 })
-    },
-    {
-      title: "Analytics",
-      path: "analytics",
-      icon: /* @__PURE__ */ e(b, { size: 16 })
-    },
-    {
-      title: "Reports",
-      path: "reports",
-      icon: /* @__PURE__ */ e(g, { size: 16 })
-    },
-    {
-      title: "Settings",
-      path: "settings",
-      icon: /* @__PURE__ */ e(c, { size: 16 })
-    }
-  ], x = [
-    {
-      title: "Profile",
-      path: "profile",
-      icon: /* @__PURE__ */ e(v, { size: 16 })
-    },
-    {
-      title: "Notifications",
-      path: "notifications",
-      icon: /* @__PURE__ */ e(N, { size: 16 })
-    },
-    {
-      title: "Settings",
-      path: "settings",
-      icon: /* @__PURE__ */ e(c, { size: 16 })
-    }
-  ], d = [
-    {
-      key: "prop",
-      label: "Prop",
-      render: (s) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(s) })
-    },
-    {
-      key: "type",
-      label: "Type",
-      render: (s) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(s) })
-    },
-    {
-      key: "default",
-      label: "Default",
-      render: (s) => {
-        const m = String(s);
-        return m === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: m });
-      }
-    },
-    {
-      key: "description",
-      label: "Description"
-    }
   ];
-  return /* @__PURE__ */ t(y, { children: [
+  return /* @__PURE__ */ t(p, { children: [
     /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
       /* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "ParamTab" }),
       /* @__PURE__ */ e(
@@ -93,8 +33,8 @@ const R = () => {
             children: "Classic underline style with animated indicator. URL syncs with ?view=overview, ?view=details, etc."
           }
         ),
-        /* @__PURE__ */ t(n, { tabMenu: o, variant: "underline", children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+        /* @__PURE__ */ t(n, { tabMenu: d, variant: "underline", children: [
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
             /* @__PURE__ */ e(
               a,
               {
@@ -112,7 +52,7 @@ const R = () => {
               }
             )
           ] }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
             /* @__PURE__ */ e(
               a,
               {
@@ -130,7 +70,7 @@ const R = () => {
               }
             )
           ] }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
             /* @__PURE__ */ e(
               a,
               {
@@ -160,10 +100,31 @@ const R = () => {
             children: "Modern rounded pills with icon support for enhanced visual clarity."
           }
         ),
-        /* @__PURE__ */ t(n, { tabMenu: u, variant: "pills", size: "medium", children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+        /* @__PURE__ */ t(n, { tabMenu: [
+          {
+            title: "Dashboard",
+            path: "dashboard",
+            icon: /* @__PURE__ */ e(o, { size: 16 })
+          },
+          {
+            title: "Analytics",
+            path: "analytics",
+            icon: /* @__PURE__ */ e(m, { size: 16 })
+          },
+          {
+            title: "Reports",
+            path: "reports",
+            icon: /* @__PURE__ */ e(h, { size: 16 })
+          },
+          {
+            title: "Settings",
+            path: "settings",
+            icon: /* @__PURE__ */ e(c, { size: 16 })
+          }
+        ], variant: "pills", size: "medium", children: [
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
             /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
-              /* @__PURE__ */ e(p, { className: "text-brand", size: 24 }),
+              /* @__PURE__ */ e(o, { className: "text-brand", size: 24 }),
               /* @__PURE__ */ e(a, { tag: "h3", className: "text-xl font-semibold", children: "Dashboard Home" })
             ] }),
             /* @__PURE__ */ e(
@@ -175,9 +136,9 @@ const R = () => {
               }
             )
           ] }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
             /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
-              /* @__PURE__ */ e(b, { className: "text-brand", size: 24 }),
+              /* @__PURE__ */ e(m, { className: "text-brand", size: 24 }),
               /* @__PURE__ */ e(a, { tag: "h3", className: "text-xl font-semibold", children: "Analytics Overview" })
             ] }),
             /* @__PURE__ */ e(
@@ -189,9 +150,9 @@ const R = () => {
               }
             )
           ] }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
             /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
-              /* @__PURE__ */ e(g, { className: "text-brand", size: 24 }),
+              /* @__PURE__ */ e(h, { className: "text-brand", size: 24 }),
               /* @__PURE__ */ e(a, { tag: "h3", className: "text-xl font-semibold", children: "Reports Center" })
             ] }),
             /* @__PURE__ */ e(
@@ -203,7 +164,7 @@ const R = () => {
               }
             )
           ] }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
             /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
               /* @__PURE__ */ e(c, { className: "text-brand", size: 24 }),
               /* @__PURE__ */ e(a, { tag: "h3", className: "text-xl font-semibold", children: "Application Settings" })
@@ -229,8 +190,24 @@ const R = () => {
             children: "Distinct bordered style with highlighted selection state."
           }
         ),
-        /* @__PURE__ */ t(n, { tabMenu: x, variant: "bordered", children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+        /* @__PURE__ */ t(n, { tabMenu: [
+          {
+            title: "Profile",
+            path: "profile",
+            icon: /* @__PURE__ */ e(x, { size: 16 })
+          },
+          {
+            title: "Notifications",
+            path: "notifications",
+            icon: /* @__PURE__ */ e(y, { size: 16 })
+          },
+          {
+            title: "Settings",
+            path: "settings",
+            icon: /* @__PURE__ */ e(c, { size: 16 })
+          }
+        ], variant: "bordered", children: [
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
             /* @__PURE__ */ e(
               a,
               {
@@ -248,7 +225,7 @@ const R = () => {
               }
             )
           ] }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
             /* @__PURE__ */ e(
               a,
               {
@@ -266,7 +243,7 @@ const R = () => {
               }
             )
           ] }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
             /* @__PURE__ */ e(
               a,
               {
@@ -296,8 +273,8 @@ const R = () => {
             children: "Compact solid background style perfect for space-constrained layouts."
           }
         ),
-        /* @__PURE__ */ t(n, { tabMenu: o, variant: "solid", size: "small", children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(i, { className: "p-6", children: /* @__PURE__ */ e(
+        /* @__PURE__ */ t(n, { tabMenu: d, variant: "solid", size: "small", children: [
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { className: "p-6", children: /* @__PURE__ */ e(
             a,
             {
               tag: "p",
@@ -305,7 +282,7 @@ const R = () => {
               children: "Compact overview content with small tab size."
             }
           ) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(i, { className: "p-6", children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { className: "p-6", children: /* @__PURE__ */ e(
             a,
             {
               tag: "p",
@@ -313,7 +290,7 @@ const R = () => {
               children: "Detailed information in a compact format."
             }
           ) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(i, { className: "p-6", children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { className: "p-6", children: /* @__PURE__ */ e(
             a,
             {
               tag: "p",
@@ -398,66 +375,49 @@ const R = () => {
         )
       ] })
     ] }) }) }) }),
-    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "TabMenuItem Interface", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(h, { columns: d, data: [
-      {
-        prop: "title",
-        type: "React.ReactNode",
-        default: "required",
-        description: "Tab label (can be text, JSX, or components)"
-      },
-      {
-        prop: "path",
-        type: "string",
-        default: "required",
-        description: 'Unique path for URL parameter (e.g., "overview")'
-      },
-      {
-        prop: "icon",
-        type: "React.ReactNode",
-        default: "-",
-        description: "Optional icon to display before tab label"
-      }
-    ] }) }) }) }),
-    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(h, { columns: d, data: [
-      {
-        prop: "tabMenu",
-        type: "TabMenuItem[]",
-        default: "required",
-        description: "Array of tab menu items with title, path, and optional icon"
-      },
-      {
-        prop: "children",
-        type: "React.ReactNode",
-        default: "required",
-        description: "TabPanel components for each tab content"
-      },
-      {
-        prop: "variant",
-        type: "'underline' | 'pills' | 'bordered' | 'solid'",
-        default: "'underline'",
-        description: "Visual style variant of the tabs"
-      },
-      {
-        prop: "size",
-        type: "'small' | 'medium' | 'large'",
-        default: "'medium'",
-        description: "Size of the tab items"
-      },
-      {
-        prop: "tabListClassName",
-        type: "string",
-        default: "-",
-        description: "Additional CSS classes for tab list container"
-      },
-      {
-        prop: "showMobileSelect",
-        type: "boolean",
-        default: "true",
-        description: "Whether to show TabSelect on mobile devices"
-      }
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "TabMenuItem Interface", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("table", { className: "w-full text-sm text-left", children: [
+      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ t("tr", { className: "border-b border-gray-200 dark:border-gray-700", children: [
+        /* @__PURE__ */ e("th", { className: "px-3 py-2 font-semibold", children: "Prop" }),
+        /* @__PURE__ */ e("th", { className: "px-3 py-2 font-semibold", children: "Type" }),
+        /* @__PURE__ */ e("th", { className: "px-3 py-2 font-semibold", children: "Default" }),
+        /* @__PURE__ */ e("th", { className: "px-3 py-2 font-semibold", children: "Description" })
+      ] }) }),
+      /* @__PURE__ */ e("tbody", { children: [
+        {
+          prop: "title",
+          type: "React.ReactNode",
+          default: "required",
+          description: "Tab label (can be text, JSX, or components)"
+        },
+        {
+          prop: "path",
+          type: "string",
+          default: "required",
+          description: 'Unique path for URL parameter (e.g., "overview")'
+        },
+        {
+          prop: "icon",
+          type: "React.ReactNode",
+          default: "-",
+          description: "Optional icon to display before tab label"
+        }
+      ].map((r) => /* @__PURE__ */ t(
+        "tr",
+        {
+          className: "border-b border-gray-100 dark:border-gray-800",
+          children: [
+            /* @__PURE__ */ e("td", { className: "px-3 py-2", children: /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: r.prop }) }),
+            /* @__PURE__ */ e("td", { className: "px-3 py-2", children: /* @__PURE__ */ e("code", { className: "text-xs", children: r.type }) }),
+            /* @__PURE__ */ e("td", { className: "px-3 py-2", children: r.default === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: r.default }) }),
+            /* @__PURE__ */ e("td", { className: "px-3 py-2 text-gray-600 dark:text-gray-400", children: r.description })
+          ]
+        },
+        r.prop
+      )) })
     ] }) }) }) }),
+    /* @__PURE__ */ e(b, { componentName: "ParamTab" }),
     /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Code Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-      f,
+      g,
       {
         language: "tsx",
         code: `import { ParamTab, TabPanel } from '@e-burgos/tucu-ui';
@@ -557,5 +517,5 @@ function CompactExample() {
   ] });
 };
 export {
-  R as default
+  S as default
 };

package/documentation/PieChartSection-Ctpv_sQm.js

@@ -0,0 +1,91 @@
+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-B6CStnMG.js";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const n = [
+  { 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" }),
+    /* @__PURE__ */ e(
+      r,
+      {
+        tag: "p",
+        className: "text-xl 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: "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,
+      donut: !0,
+      height: 300,
+      innerContent: /* @__PURE__ */ s("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: "Usage", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    d,
+    {
+      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"
+    }
+  ) }) }) }),
+  /* @__PURE__ */ e(
+    m,
+    {
+      componentName: "PieChart",
+      defaultValues: {
+        height: 300,
+        donut: !1,
+        showLabels: !0,
+        showTooltip: !0,
+        showLegend: !0,
+        animate: !0
+      },
+      excludeProps: [
+        "data",
+        "colors",
+        "className",
+        "innerContent",
+        "emptyMessage"
+      ],
+      children: (i) => /* @__PURE__ */ e(l, { data: n, ...i })
+    }
+  ),
+  /* @__PURE__ */ e(h, { componentName: "PieChart" })
+] });
+export {
+  N as default
+};

package/documentation/PieChartSection-DCd5rWoT.js

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-QnI4b7wS.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-3xl md:text-4xl font-bold",children:"PieChart"}),e.jsx(a.Typography,{tag:"p",className:"text-xl 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/{PinCodeSection-DIDL-bKc.mjs → documentation/PinCodeSection-BD-IvqDl.js}

@@ -1,12 +1,12 @@
-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-HwvOEWI7.mjs";
+import { jsxs as a, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { useState as t } from "react";
+import { T as l, C as i, a as r, s, A as h, c as m } from "../index-B6CStnMG.js";
 import "lucide-react";
 import "react-router-dom";
 import "react-dom";
-const y = () => {
-  const [n, d] = h("");
-  return /* @__PURE__ */ a(o, { children: [
+const b = () => {
+  const [n, d] = t("");
+  return /* @__PURE__ */ a(c, { 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(
@@ -131,103 +131,7 @@ const y = () => {
         ] })
       ] })
     ] }) }) }) }),
-    /* @__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(h, { componentName: "PinCode" }),
     /* @__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,
       {
@@ -259,5 +163,5 @@ const y = () => {
   ] });
 };
 export {
-  y as default
+  b as default
 };

package/documentation/PinCodeSection-BT8N9C8F.js

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),s=require("../index-QnI4b7wS.js");require("lucide-react");require("react-router-dom");require("react-dom");const l=()=>{const[a,i]=n.useState("");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:"PinCode"}),e.jsx(s.Typography,{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."})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.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(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"4 Digit PinCode"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Pin Code"}),e.jsx(s.PinCode,{length:4,value:a,onChange:i})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"6 Digit PinCode"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Verification Code"}),e.jsx(s.PinCode,{length:6,value:a,onChange:i})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Security Code"}),e.jsx(s.PinCode,{length:4,helperText:"Enter the 4-digit code",value:a,onChange:i})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Pin Code"}),e.jsx(s.PinCode,{length:4,error:"Invalid pin code",value:a,onChange:i})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Pin Code"}),e.jsx(s.PinCode,{length:4,disabled:!0})]})]})]})})})}),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:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Ghost (default)"}),e.jsx(s.PinCode,{length:4,variant:"ghost"})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Solid"}),e.jsx(s.PinCode,{length:4,variant:"solid"})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Transparent"}),e.jsx(s.PinCode,{length:4,variant:"transparent"})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Colors & Sizes",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(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Different Colors"}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Primary"}),e.jsx(s.PinCode,{length:4,color:"primary"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Danger"}),e.jsx(s.PinCode,{length:4,color:"danger"})]})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Different Sizes"}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Small"}),e.jsx(s.PinCode,{length:4,size:"sm"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Medium"}),e.jsx(s.PinCode,{length:4,size:"md"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Large"}),e.jsx(s.PinCode,{length:4,size:"lg"})]})]})]})]})})})}),e.jsx(s.AutoPropsTable,{componentName:"PinCode"}),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 { 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" />`})})})})]})};exports.default=l;