@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/{BadgeSection-yihyh7oT.js → BadgeSection-C9_vLylm.js}

@@ -1,24 +1,22 @@
 import { jsxs as i, Fragment as t, jsx as e } from "react/jsx-runtime";
-import { T as l, C as r, a as s, J as a, P as d, A as n, c as o } from "../index-D3gBsvbO.js";
-import "lucide-react";
+import { H as d, C as s, a as l, T as r, K as a, P as n, A as o, c as m } from "../index-19KsCnyX.js";
+import { Award as h } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const f = () => /* @__PURE__ */ i(t, { children: [
-  /* @__PURE__ */ i("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(l, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Badge" }),
-    /* @__PURE__ */ e(
-      l,
-      {
-        tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-        children: "A badge component for displaying status indicators and labels with various styles and sizes."
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "space-y-6", children: [
+const w = () => /* @__PURE__ */ i(t, { children: [
+  /* @__PURE__ */ e(
+    d,
+    {
+      title: "Badge",
+      description: `A badge component for displaying status indicators and labels with
+          various styles and sizes.`,
+      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-teal-500 to-emerald-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(h, { 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(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "space-y-6", children: [
     /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Status Badges" }),
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Status Badges" }),
       /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
         /* @__PURE__ */ e(a, { status: "active", children: "Active" }),
         /* @__PURE__ */ e(a, { status: "inactive", children: "Inactive" }),
@@ -27,7 +25,7 @@ const f = () => /* @__PURE__ */ i(t, { children: [
       ] })
     ] }),
     /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Status Indicators (Dots Only)" }),
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Status Indicators (Dots Only)" }),
       /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
         /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ e(a, { status: "active", withDot: !0 }),
@@ -44,7 +42,7 @@ const f = () => /* @__PURE__ */ i(t, { children: [
       ] })
     ] }),
     /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Dot Indicator" }),
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Dot Indicator" }),
       /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
         /* @__PURE__ */ e(a, { status: "active", withDot: !0, children: "Active" }),
         /* @__PURE__ */ e(a, { status: "inactive", withDot: !0, children: "Inactive" }),
@@ -52,7 +50,7 @@ const f = () => /* @__PURE__ */ i(t, { children: [
       ] })
     ] })
   ] }) }) }) }),
-  /* @__PURE__ */ e(r, { 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__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
     /* @__PURE__ */ e(a, { color: "primary", children: "Primary" }),
     /* @__PURE__ */ e(a, { color: "success", children: "Success" }),
     /* @__PURE__ */ e(a, { color: "info", children: "Info" }),
@@ -60,15 +58,15 @@ const f = () => /* @__PURE__ */ i(t, { children: [
     /* @__PURE__ */ e(a, { color: "danger", children: "Danger" }),
     /* @__PURE__ */ e(a, { color: "gray", children: "Gray" })
   ] }) }) }) }),
-  /* @__PURE__ */ e(r, { 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__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
     /* @__PURE__ */ e(a, { size: "tiny", color: "primary", children: "Tiny" }),
     /* @__PURE__ */ e(a, { size: "small", color: "primary", children: "Small" }),
     /* @__PURE__ */ e(a, { size: "medium", color: "primary", children: "Medium" }),
     /* @__PURE__ */ e(a, { size: "large", color: "primary", children: "Large" })
   ] }) }) }) }),
-  /* @__PURE__ */ e(r, { 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__ */ i("div", { className: "space-y-4", children: [
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "space-y-4", children: [
     /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Solid" }),
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Solid" }),
       /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
         /* @__PURE__ */ e(a, { variant: "solid", color: "primary", children: "Primary" }),
         /* @__PURE__ */ e(a, { variant: "solid", color: "success", children: "Success" }),
@@ -76,7 +74,7 @@ const f = () => /* @__PURE__ */ i(t, { children: [
       ] })
     ] }),
     /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Soft" }),
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Soft" }),
       /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
         /* @__PURE__ */ e(a, { variant: "soft", color: "primary", children: "Primary" }),
         /* @__PURE__ */ e(a, { variant: "soft", color: "success", children: "Success" }),
@@ -84,7 +82,7 @@ const f = () => /* @__PURE__ */ i(t, { children: [
       ] })
     ] }),
     /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Outline" }),
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Outline" }),
       /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
         /* @__PURE__ */ e(a, { variant: "outline", color: "primary", children: "Primary" }),
         /* @__PURE__ */ e(a, { variant: "outline", color: "success", children: "Success" }),
@@ -92,7 +90,7 @@ const f = () => /* @__PURE__ */ i(t, { children: [
       ] })
     ] }),
     /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Ghost" }),
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Ghost" }),
       /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
         /* @__PURE__ */ e(a, { variant: "ghost", color: "primary", children: "Primary" }),
         /* @__PURE__ */ e(a, { variant: "ghost", color: "success", children: "Success" }),
@@ -100,13 +98,13 @@ const f = () => /* @__PURE__ */ i(t, { children: [
       ] })
     ] })
   ] }) }) }) }),
-  /* @__PURE__ */ e(r, { 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__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Shapes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
     /* @__PURE__ */ e(a, { shape: "rounded", color: "primary", children: "Rounded" }),
     /* @__PURE__ */ e(a, { shape: "pill", color: "success", children: "Pill" }),
     /* @__PURE__ */ e(a, { shape: "circle", color: "danger", size: "large", withDot: !0 })
   ] }) }) }) }),
   /* @__PURE__ */ e(
-    d,
+    n,
     {
       componentName: "Badge",
       defaultValues: {
@@ -120,9 +118,9 @@ const f = () => /* @__PURE__ */ i(t, { children: [
       children: (c) => /* @__PURE__ */ e(a, { ...c, children: "Badge" })
     }
   ),
-  /* @__PURE__ */ e(n, { componentName: "Badge" }),
-  /* @__PURE__ */ e(r, { 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(
-    o,
+  /* @__PURE__ */ e(o, { componentName: "Badge" }),
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { 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 { Badge } from '@e-burgos/tucu-ui';
@@ -177,5 +175,5 @@ const f = () => /* @__PURE__ */ i(t, { children: [
   ) }) }) })
 ] });
 export {
-  f as default
+  w as default
 };

package/documentation/BadgeSection-Dy1g7XfP.js

@@ -0,0 +1,49 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Badge",description:`A badge component for displaying status indicators and labels with
+          various styles and sizes.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-teal-500 to-emerald-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(i.Award,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.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-6",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Status Badges"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{status:"active",children:"Active"}),e.jsx(a.Badge,{status:"inactive",children:"Inactive"}),e.jsx(a.Badge,{status:"pending",children:"Pending"}),e.jsx(a.Badge,{status:"default",children:"Default"})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Status Indicators (Dots Only)"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a.Badge,{status:"active",withDot:!0}),e.jsx("span",{className:"text-sm",children:"Online"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a.Badge,{status:"inactive",withDot:!0}),e.jsx("span",{className:"text-sm",children:"Offline"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a.Badge,{status:"pending",withDot:!0}),e.jsx("span",{className:"text-sm",children:"Away"})]})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Dot Indicator"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{status:"active",withDot:!0,children:"Active"}),e.jsx(a.Badge,{status:"inactive",withDot:!0,children:"Inactive"}),e.jsx(a.Badge,{status:"pending",withDot:!0,children:"Pending"})]})]})]})})})}),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.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{color:"primary",children:"Primary"}),e.jsx(a.Badge,{color:"success",children:"Success"}),e.jsx(a.Badge,{color:"info",children:"Info"}),e.jsx(a.Badge,{color:"warning",children:"Warning"}),e.jsx(a.Badge,{color:"danger",children:"Danger"}),e.jsx(a.Badge,{color:"gray",children:"Gray"})]})})})}),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.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{size:"tiny",color:"primary",children:"Tiny"}),e.jsx(a.Badge,{size:"small",color:"primary",children:"Small"}),e.jsx(a.Badge,{size:"medium",color:"primary",children:"Medium"}),e.jsx(a.Badge,{size:"large",color:"primary",children:"Large"})]})})})}),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:"space-y-4",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{variant:"solid",color:"primary",children:"Primary"}),e.jsx(a.Badge,{variant:"solid",color:"success",children:"Success"}),e.jsx(a.Badge,{variant:"solid",color:"danger",children:"Danger"})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Soft"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{variant:"soft",color:"primary",children:"Primary"}),e.jsx(a.Badge,{variant:"soft",color:"success",children:"Success"}),e.jsx(a.Badge,{variant:"soft",color:"danger",children:"Danger"})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Outline"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{variant:"outline",color:"primary",children:"Primary"}),e.jsx(a.Badge,{variant:"outline",color:"success",children:"Success"}),e.jsx(a.Badge,{variant:"outline",color:"danger",children:"Danger"})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Ghost"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{variant:"ghost",color:"primary",children:"Primary"}),e.jsx(a.Badge,{variant:"ghost",color:"success",children:"Success"}),e.jsx(a.Badge,{variant:"ghost",color:"danger",children:"Danger"})]})]})]})})})}),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.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{shape:"rounded",color:"primary",children:"Rounded"}),e.jsx(a.Badge,{shape:"pill",color:"success",children:"Pill"}),e.jsx(a.Badge,{shape:"circle",color:"danger",size:"large",withDot:!0})]})})})}),e.jsx(a.PropPlayground,{componentName:"Badge",defaultValues:{variant:"solid",size:"small",shape:"pill",color:"primary",withDot:!1},excludeProps:["status"],children:s=>e.jsx(a.Badge,{...s,children:"Badge"})}),e.jsx(a.AutoPropsTable,{componentName:"Badge"}),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 { Badge } from '@e-burgos/tucu-ui';
+
+// Basic usage with status
+<Badge status="active">Active</Badge>
+<Badge status="inactive">Inactive</Badge>
+<Badge status="pending">Pending</Badge>
+
+// Status indicators (dots only)
+<Badge status="active" withDot />
+<Badge status="inactive" withDot />
+
+// With dot indicator and text
+<Badge status="active" withDot>Active</Badge>
+
+// Different colors
+<Badge color="primary">Primary</Badge>
+<Badge color="success">Success</Badge>
+<Badge color="info">Info</Badge>
+<Badge color="warning">Warning</Badge>
+<Badge color="danger">Danger</Badge>
+
+// Different sizes
+<Badge size="tiny">Tiny</Badge>
+<Badge size="small">Small</Badge>
+<Badge size="medium">Medium</Badge>
+<Badge size="large">Large</Badge>
+
+// Different variants
+<Badge variant="solid" color="primary">Solid</Badge>
+<Badge variant="soft" color="success">Soft</Badge>
+<Badge variant="outline" color="danger">Outline</Badge>
+<Badge variant="ghost" color="info">Ghost</Badge>
+
+// Different shapes
+<Badge shape="rounded">Rounded</Badge>
+<Badge shape="pill">Pill</Badge>
+<Badge shape="circle" withDot />
+
+// Combinations
+<Badge 
+  color="success" 
+  variant="soft" 
+  size="medium"
+  shape="pill"
+  withDot
+>
+  Online
+</Badge>`})})})})]});exports.default=r;

package/documentation/BarChartSection-BTBiEaRw.js

@@ -0,0 +1,23 @@
+"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 s=[{name:"Jan",sales:4e3,returns:400,target:4500},{name:"Feb",sales:3e3,returns:300,target:3500},{name:"Mar",sales:5e3,returns:500,target:4800},{name:"Apr",sales:4780,returns:478,target:5e3},{name:"May",sales:5890,returns:589,target:5500},{name:"Jun",sales:6390,returns:639,target:6e3}],t=()=>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:"BarChart"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Bar chart component for comparing categorical data with support for stacking, horizontal layout, and custom bar styling."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Bar Chart",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BarChart,{data:s,series:[{dataKey:"sales",name:"Sales"},{dataKey:"returns",name:"Returns"}],height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Stacked Bars",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BarChart,{data:s,series:[{dataKey:"sales",name:"Sales",stackId:"a"},{dataKey:"returns",name:"Returns",stackId:"a"}],stacked:!0,height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Horizontal Layout",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BarChart,{data:s,series:[{dataKey:"sales",name:"Sales"}],layout:"vertical",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 { BarChart } from '@e-burgos/tucu-ui';
+
+const data = [
+  { name: 'Jan', sales: 4000, returns: 400 },
+  { name: 'Feb', sales: 3000, returns: 300 },
+  { name: 'Mar', sales: 5000, returns: 500 },
+];
+
+<BarChart
+  data={data}
+  series={[
+    { dataKey: 'sales', name: 'Sales' },
+    { dataKey: 'returns', name: 'Returns' },
+  ]}
+  height={300}
+  layout="horizontal"
+  stacked={false}
+  barRadius={4}
+  barGap={4}
+  showGrid
+  showTooltip
+  showLegend
+/>`,language:"tsx"})})})}),e.jsx(a.PropPlayground,{componentName:"BarChart",defaultValues:{height:300,stacked:!1,layout:"horizontal",showGrid:!0,showTooltip:!0,showLegend:!0,barRadius:4,barGap:4,animate:!0},excludeProps:["data","series","colors","className","xAxisKey","emptyMessage"],children:r=>e.jsx(a.BarChart,{data:s,series:[{dataKey:"sales",name:"Sales"},{dataKey:"returns",name:"Returns"}],...r})}),e.jsx(a.AutoPropsTable,{componentName:"BarChart"})]});exports.default=t;

package/documentation/{BarChartSection-vXs_Yolq.js → BarChartSection-Do0Yq1CS.js}

@@ -1,5 +1,5 @@
 import { jsxs as l, Fragment as d, jsx as a } from "react/jsx-runtime";
-import { T as n, C as e, a as t, l as s, c as i, P as m, A as c } from "../index-D3gBsvbO.js";
+import { T as n, C as e, a as s, l as t, c as i, P as m, A as c } from "../index-19KsCnyX.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";
@@ -11,20 +11,20 @@ const r = [
   { name: "Apr", sales: 4780, returns: 478, target: 5e3 },
   { name: "May", sales: 5890, returns: 589, target: 5500 },
   { name: "Jun", sales: 6390, returns: 639, target: 6e3 }
-], f = () => /* @__PURE__ */ l(d, { children: [
+], N = () => /* @__PURE__ */ l(d, { children: [
   /* @__PURE__ */ l("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ a(n, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "BarChart" }),
+    /* @__PURE__ */ a(n, { tag: "h2", className: "text-base md:text-base font-semibold", children: "BarChart" }),
     /* @__PURE__ */ a(
       n,
       {
         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: "Bar chart component for comparing categorical data with support for stacking, horizontal layout, and custom bar styling."
       }
     )
   ] }),
-  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(t, { title: "Basic Bar Chart", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
-    s,
+  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(s, { title: "Basic Bar Chart", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+    t,
     {
       data: r,
       series: [
@@ -34,8 +34,8 @@ const r = [
       height: 300
     }
   ) }) }) }),
-  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(t, { title: "Stacked Bars", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
-    s,
+  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(s, { title: "Stacked Bars", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+    t,
     {
       data: r,
       series: [
@@ -46,8 +46,8 @@ const r = [
       height: 300
     }
   ) }) }) }),
-  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(t, { title: "Horizontal Layout", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
-    s,
+  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(s, { title: "Horizontal Layout", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+    t,
     {
       data: r,
       series: [{ dataKey: "sales", name: "Sales" }],
@@ -55,7 +55,7 @@ const r = [
       height: 350
     }
   ) }) }) }),
-  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(t, { title: "Usage", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(s, { title: "Usage", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
     i,
     {
       code: `import { BarChart } from '@e-burgos/tucu-ui';
@@ -108,7 +108,7 @@ const data = [
         "emptyMessage"
       ],
       children: (o) => /* @__PURE__ */ a(
-        s,
+        t,
         {
           data: r,
           series: [
@@ -123,5 +123,5 @@ const data = [
   /* @__PURE__ */ a(c, { componentName: "BarChart" })
 ] });
 export {
-  f as default
+  N as default
 };

package/documentation/BasicTableSection-C5yPODL4.js

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const s=[{key:"name",label:"Name"},{key:"age",label:"Age"},{key:"city",label:"City"}],l=[{name:"John Doe",age:30,city:"New York"},{name:"Jane Smith",age:25,city:"Los Angeles"},{name:"Bob Johnson",age:35,city:"Chicago"}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"BasicTable",description:`A flexible and customizable table component with support for custom
+          rendering, styling, and interactions.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-teal-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(r.Table2,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.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(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Table"}),e.jsx(a.BasicTable,{columns:s,data:l})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Striped Table"}),e.jsx(a.BasicTable,{columns:s,data:l,striped:!0})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Without Border"}),e.jsx(a.BasicTable,{columns:s,data:l,border:!1})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"BasicTable",title:"BasicTable Playground",defaultValues:{border:!1,hoverable:!0,rounded:!0,striped:!1,showHeader:!0,resizable:!1},excludeProps:["columns","data","className","containerClassName","headerClassName","tableClassName","rowClassName","maxRows"],children:t=>e.jsx(a.BasicTable,{...t,columns:[{key:"name",label:"Name"},{key:"role",label:"Role"},{key:"status",label:"Status"}],data:[{name:"Alice",role:"Developer",status:"Active"},{name:"Bob",role:"Designer",status:"Inactive"},{name:"Carol",role:"Manager",status:"Active"}]})}),e.jsx(a.AutoPropsTable,{componentName:"BasicTable"}),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 { BasicTable } from '@e-burgos/tucu-ui';
+
+const columns = [
+  { key: 'name', label: 'Name' },
+  { key: 'age', label: 'Age' },
+  { key: 'city', label: 'City' },
+];
+
+const data = [
+  { name: 'John Doe', age: 30, city: 'New York' },
+  { name: 'Jane Smith', age: 25, city: 'Los Angeles' },
+  { name: 'Bob Johnson', age: 35, city: 'Chicago' },
+];
+
+// Basic usage
+<BasicTable columns={columns} data={data} />
+
+// With custom render
+const columnsWithRender = [
+  {
+    key: 'name',
+    label: 'Name',
+    render: (value) => <strong>{value}</strong>,
+  },
+  { key: 'age', label: 'Age' },
+];
+
+// Striped table
+<BasicTable columns={columns} data={data} striped />
+
+// Without border
+<BasicTable columns={columns} data={data} border={false} />
+
+// Without hover effect
+<BasicTable columns={columns} data={data} hoverable={false} />`})})})})]})};exports.default=o;

package/documentation/BasicTableSection-Lylimu25.js

@@ -0,0 +1,133 @@
+import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { H as i, C as l, a as n, T as r, y as s, P as d, A as u, c as h } from "../index-19KsCnyX.js";
+import { Table2 as b } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const B = () => {
+  const t = [
+    { key: "name", label: "Name" },
+    { key: "age", label: "Age" },
+    { key: "city", label: "City" }
+  ], o = [
+    { name: "John Doe", age: 30, city: "New York" },
+    { name: "Jane Smith", age: 25, city: "Los Angeles" },
+    { name: "Bob Johnson", age: 35, city: "Chicago" }
+  ];
+  return /* @__PURE__ */ a(m, { children: [
+    /* @__PURE__ */ e(
+      i,
+      {
+        title: "BasicTable",
+        description: `A flexible and customizable table component with support for custom
+          rendering, styling, and interactions.`,
+        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-teal-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(b, { 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(n, { 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(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Basic Table" }),
+        /* @__PURE__ */ e(s, { columns: t, data: o })
+      ] }),
+      /* @__PURE__ */ a(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Striped Table" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            columns: t,
+            data: o,
+            striped: !0
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Without Border" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            columns: t,
+            data: o,
+            border: !1
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(
+      d,
+      {
+        componentName: "BasicTable",
+        title: "BasicTable Playground",
+        defaultValues: {
+          border: !1,
+          hoverable: !0,
+          rounded: !0,
+          striped: !1,
+          showHeader: !0,
+          resizable: !1
+        },
+        excludeProps: ["columns", "data", "className", "containerClassName", "headerClassName", "tableClassName", "rowClassName", "maxRows"],
+        children: (c) => /* @__PURE__ */ e(
+          s,
+          {
+            ...c,
+            columns: [
+              { key: "name", label: "Name" },
+              { key: "role", label: "Role" },
+              { key: "status", label: "Status" }
+            ],
+            data: [
+              { name: "Alice", role: "Developer", status: "Active" },
+              { name: "Bob", role: "Designer", status: "Inactive" },
+              { name: "Carol", role: "Manager", status: "Active" }
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(u, { componentName: "BasicTable" }),
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      h,
+      {
+        language: "tsx",
+        code: `import { BasicTable } from '@e-burgos/tucu-ui';
+
+const columns = [
+  { key: 'name', label: 'Name' },
+  { key: 'age', label: 'Age' },
+  { key: 'city', label: 'City' },
+];
+
+const data = [
+  { name: 'John Doe', age: 30, city: 'New York' },
+  { name: 'Jane Smith', age: 25, city: 'Los Angeles' },
+  { name: 'Bob Johnson', age: 35, city: 'Chicago' },
+];
+
+// Basic usage
+<BasicTable columns={columns} data={data} />
+
+// With custom render
+const columnsWithRender = [
+  {
+    key: 'name',
+    label: 'Name',
+    render: (value) => <strong>{value}</strong>,
+  },
+  { key: 'age', label: 'Age' },
+];
+
+// Striped table
+<BasicTable columns={columns} data={data} striped />
+
+// Without border
+<BasicTable columns={columns} data={data} border={false} />
+
+// Without hover effect
+<BasicTable columns={columns} data={data} hoverable={false} />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  B as default
+};

package/documentation/BasicUsageSection-B_tT0vDW.js

@@ -0,0 +1,133 @@
+import { jsxs as a, Fragment as l, jsx as e } from "react/jsx-runtime";
+import { H as d, T as r, C as t, a as s, c as o } from "../index-19KsCnyX.js";
+import { Code as m } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const F = () => /* @__PURE__ */ a(l, { children: [
+  /* @__PURE__ */ e(
+    d,
+    {
+      title: "Basic Usage",
+      description: "Get started with the form system in three steps: define your types, set defaults, and compose your form with Form + FormField.",
+      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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(m, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ a("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Step by Step" }),
+      /* @__PURE__ */ e(
+        r,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Three steps to create a fully typed, validated form"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(
+        s,
+        {
+          title: "1. Define Form Values Interface",
+          className: "mt-2 mb-2",
+          children: /* @__PURE__ */ a("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
+            /* @__PURE__ */ e(
+              r,
+              {
+                tag: "p",
+                className: "text-gray-600 dark:text-gray-400",
+                children: "Start by defining a TypeScript interface for your form data. This enables type-safe field names and submission handlers."
+              }
+            ),
+            /* @__PURE__ */ e(o, { language: "tsx", code: `export interface FormValues {
+  name: string;
+  email: string;
+  password: string;
+  message: string;
+  acceptTerms: boolean;
+  age: number;
+  gender: string;
+  country: string;
+}` })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "2. Create Default Values", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
+        /* @__PURE__ */ a(
+          r,
+          {
+            tag: "p",
+            className: "text-gray-600 dark:text-gray-400",
+            children: [
+              "Define default values matching your interface. These initialize the form and are used by",
+              " ",
+              /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "reset()" }),
+              "."
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(o, { language: "ts", code: `export const defaultValues: FormValues = {
+  name: '',
+  email: '',
+  password: '',
+  message: '',
+  acceptTerms: false,
+  age: 0,
+  gender: '',
+  country: 'ar',
+};` })
+      ] }) }) }),
+      /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "3. Compose the Form", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
+        /* @__PURE__ */ a(
+          r,
+          {
+            tag: "p",
+            className: "text-gray-600 dark:text-gray-400",
+            children: [
+              "Use",
+              " ",
+              /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "<Form>" }),
+              " ",
+              "as the container and",
+              " ",
+              /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "<FormField>" }),
+              " ",
+              "to wrap each input. FormField handles registration, error display, and labeling."
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(o, { language: "tsx", code: `import { Form, FormField, Input, Button } from '@e-burgos/tucu-ui';
+
+function ContactForm() {
+  const handleSubmit = (data: FormValues) => {
+    console.log('Form submitted:', data);
+  };
+
+  return (
+    <Form<FormValues>
+      onSubmit={handleSubmit}
+      useFormProps={{
+        defaultValues: defaultValues,
+        mode: 'onChange',
+      }}
+    >
+      <FormField<FormValues> name="name" label="Name">
+        <Input placeholder="Enter your name" />
+      </FormField>
+
+      <FormField<FormValues> name="email" label="Email">
+        <Input type="email" placeholder="Enter your email" />
+      </FormField>
+
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}` })
+      ] }) }) })
+    ] })
+  ] })
+] });
+export {
+  F as default
+};