@e-burgos/tucu-ui 2.0.2 → 2.0.4

package/documentation/AreaChartSection-DdoeVQoB.js

@@ -0,0 +1,132 @@
+import { jsxs as i, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { T as n, C as s, a, m as t, c as l, P as m, A as c } from "../index-B6CStnMG.js";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const r = [
+  { name: "Jan", users: 400, sessions: 2400, pageViews: 4400 },
+  { name: "Feb", users: 300, sessions: 1398, pageViews: 3210 },
+  { name: "Mar", users: 500, sessions: 3800, pageViews: 5400 },
+  { name: "Apr", users: 780, sessions: 3908, pageViews: 6200 },
+  { name: "May", users: 890, sessions: 4800, pageViews: 7100 },
+  { name: "Jun", users: 1200, sessions: 5800, pageViews: 9400 },
+  { name: "Jul", users: 1500, sessions: 6300, pageViews: 11e3 }
+], y = () => /* @__PURE__ */ i(o, { children: [
+  /* @__PURE__ */ i("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(n, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "AreaChart" }),
+    /* @__PURE__ */ e(
+      n,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "Area chart component for visualizing volume and trends over time with gradient fills, stacking, and smooth curves."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(a, { title: "Basic Area Chart with Gradient", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    t,
+    {
+      data: r,
+      series: [
+        { dataKey: "users", name: "Users" },
+        { dataKey: "sessions", name: "Sessions" }
+      ],
+      height: 300,
+      gradient: !0
+    }
+  ) }) }) }),
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(a, { title: "Stacked Area Chart", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    t,
+    {
+      data: r,
+      series: [
+        { dataKey: "users", name: "Users", stackId: "a" },
+        { dataKey: "sessions", name: "Sessions", stackId: "a" },
+        { dataKey: "pageViews", name: "Page Views", stackId: "a" }
+      ],
+      stacked: !0,
+      height: 300
+    }
+  ) }) }) }),
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(a, { title: "Without Gradient (Flat)", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    t,
+    {
+      data: r,
+      series: [
+        { dataKey: "users", name: "Users" },
+        { dataKey: "sessions", name: "Sessions" }
+      ],
+      gradient: !1,
+      curved: !1,
+      height: 300
+    }
+  ) }) }) }),
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(a, { title: "Usage", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    l,
+    {
+      code: `import { AreaChart } from '@e-burgos/tucu-ui';
+
+const data = [
+  { name: 'Jan', users: 400, sessions: 2400 },
+  { name: 'Feb', users: 300, sessions: 1398 },
+  { name: 'Mar', users: 500, sessions: 3800 },
+];
+
+<AreaChart
+  data={data}
+  series={[
+    { dataKey: 'users', name: 'Users' },
+    { dataKey: 'sessions', name: 'Sessions' },
+  ]}
+  height={300}
+  curved
+  gradient
+  stacked={false}
+  showGrid
+  showTooltip
+  showLegend
+/>`,
+      language: "tsx"
+    }
+  ) }) }) }),
+  /* @__PURE__ */ e(
+    m,
+    {
+      componentName: "AreaChart",
+      defaultValues: {
+        height: 300,
+        curved: !0,
+        gradient: !0,
+        stacked: !1,
+        showGrid: !0,
+        showTooltip: !0,
+        showLegend: !0,
+        animate: !0
+      },
+      excludeProps: [
+        "data",
+        "series",
+        "colors",
+        "className",
+        "xAxisKey",
+        "emptyMessage"
+      ],
+      children: (d) => /* @__PURE__ */ e(
+        t,
+        {
+          data: r,
+          series: [
+            { dataKey: "users", name: "Users" },
+            { dataKey: "sessions", name: "Sessions" }
+          ],
+          ...d
+        }
+      )
+    }
+  ),
+  /* @__PURE__ */ e(c, { componentName: "AreaChart" })
+] });
+export {
+  y as default
+};

package/documentation/AuthorCardSection-C-tk6Y7D.js

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-QnI4b7wS.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=require("../1-CArqgiQa.js"),o=()=>a.jsxs(a.Fragment,{children:[a.jsxs("div",{className:"text-center space-y-4",children:[a.jsx(e.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"AuthorCard"}),a.jsx(e.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A card component for displaying author information with avatar, name, and role."})]}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"With Name and Role"}),a.jsx(e.AuthorCard,{image:r.avatar1Img,name:"John Doe",authorRole:"Senior Developer"})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"With Name Only"}),a.jsx(e.AuthorCard,{image:r.avatar1Img,name:"Jane Smith"})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Avatar Only"}),a.jsx(e.AuthorCard,{image:r.avatar1Img})]})]})})})}),a.jsx(e.PropPlayground,{componentName:"AuthorCard",defaultValues:{name:"John Doe",authorRole:"Developer",image:"https://randomuser.me/api/portraits/men/1.jpg"},excludeProps:[],children:t=>a.jsx(e.AuthorCard,{...t})}),a.jsx(e.AutoPropsTable,{componentName:"AuthorCard"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.CodeBlock,{language:"tsx",code:`import { AuthorCard } from '@e-burgos/tucu-ui';
+
+// With name and role
+<AuthorCard
+  image="/path/to/avatar.jpg"
+  name="John Doe"
+  authorRole="Senior Developer"
+/>
+
+// With name only
+<AuthorCard
+  image="/path/to/avatar.jpg"
+  name="Jane Smith"
+/>
+
+// Avatar only
+<AuthorCard image="/path/to/avatar.jpg" />`})})})})]});exports.default=o;

package/documentation/AuthorCardSection-P8sPh0d7.js

@@ -0,0 +1,81 @@
+import { jsxs as e, Fragment as n, jsx as a } from "react/jsx-runtime";
+import { T as r, C as t, a as m, D as o, P as s, A as d, c as h } from "../index-B6CStnMG.js";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+import { a as l } from "../1-Df9CGZha.js";
+const C = () => /* @__PURE__ */ e(n, { children: [
+  /* @__PURE__ */ e("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ a(r, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "AuthorCard" }),
+    /* @__PURE__ */ a(
+      r,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A card component for displaying author information with avatar, name, and role."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(m, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ e(t, { className: "p-4", children: [
+      /* @__PURE__ */ a(r, { tag: "h5", className: "mb-3", children: "With Name and Role" }),
+      /* @__PURE__ */ a(
+        o,
+        {
+          image: l,
+          name: "John Doe",
+          authorRole: "Senior Developer"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(t, { className: "p-4", children: [
+      /* @__PURE__ */ a(r, { tag: "h5", className: "mb-3", children: "With Name Only" }),
+      /* @__PURE__ */ a(o, { image: l, name: "Jane Smith" })
+    ] }),
+    /* @__PURE__ */ e(t, { className: "p-4", children: [
+      /* @__PURE__ */ a(r, { tag: "h5", className: "mb-3", children: "Avatar Only" }),
+      /* @__PURE__ */ a(o, { image: l })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ a(
+    s,
+    {
+      componentName: "AuthorCard",
+      defaultValues: {
+        name: "John Doe",
+        authorRole: "Developer",
+        image: "https://randomuser.me/api/portraits/men/1.jpg"
+      },
+      excludeProps: [],
+      children: (i) => /* @__PURE__ */ a(o, { ...i })
+    }
+  ),
+  /* @__PURE__ */ a(d, { componentName: "AuthorCard" }),
+  /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(m, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+    h,
+    {
+      language: "tsx",
+      code: `import { AuthorCard } from '@e-burgos/tucu-ui';
+
+// With name and role
+<AuthorCard
+  image="/path/to/avatar.jpg"
+  name="John Doe"
+  authorRole="Senior Developer"
+/>
+
+// With name only
+<AuthorCard
+  image="/path/to/avatar.jpg"
+  name="Jane Smith"
+/>
+
+// Avatar only
+<AuthorCard image="/path/to/avatar.jpg" />`
+    }
+  ) }) }) })
+] });
+export {
+  C as default
+};

package/documentation/AvatarSection-DXJRt7X9.js

@@ -0,0 +1,91 @@
+import { jsxs as e, Fragment as d, jsx as a } from "react/jsx-runtime";
+import { T as i, C as t, a as l, W as s, P as c, A as n, c as o } from "../index-B6CStnMG.js";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+import { a as r } from "../1-Df9CGZha.js";
+const N = () => /* @__PURE__ */ e(d, { children: [
+  /* @__PURE__ */ e("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ a(i, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Avatar" }),
+    /* @__PURE__ */ a(
+      i,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A versatile avatar component for displaying user profile images with multiple sizes and shapes."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(l, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ e(t, { className: "p-4", children: [
+      /* @__PURE__ */ a(i, { tag: "h5", className: "mb-3", children: "Default Avatar" }),
+      /* @__PURE__ */ a(s, { image: r, alt: "User avatar" })
+    ] }),
+    /* @__PURE__ */ e(t, { className: "p-4", children: [
+      /* @__PURE__ */ a(i, { tag: "h5", className: "mb-3", children: "Without Border" }),
+      /* @__PURE__ */ a(s, { image: r, alt: "User avatar", border: !1 })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(l, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ e("div", { children: [
+      /* @__PURE__ */ a(i, { tag: "h5", className: "mb-3", children: "Sizes" }),
+      /* @__PURE__ */ e("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ a(s, { image: r, alt: "XS", size: "xs" }),
+        /* @__PURE__ */ a(s, { image: r, alt: "SM", size: "sm" }),
+        /* @__PURE__ */ a(s, { image: r, alt: "MD", size: "md" }),
+        /* @__PURE__ */ a(s, { image: r, alt: "LG", size: "lg" }),
+        /* @__PURE__ */ a(s, { image: r, alt: "XL", size: "xl" })
+      ] })
+    ] }),
+    /* @__PURE__ */ e("div", { children: [
+      /* @__PURE__ */ a(i, { tag: "h5", className: "mb-3", children: "Shapes" }),
+      /* @__PURE__ */ e("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ a(s, { image: r, alt: "Circle", shape: "circle" }),
+        /* @__PURE__ */ a(s, { image: r, alt: "Rounded", shape: "rounded" })
+      ] })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ a(
+    c,
+    {
+      componentName: "Avatar",
+      defaultValues: {
+        size: "md",
+        shape: "circle",
+        border: !0,
+        image: "https://randomuser.me/api/portraits/men/1.jpg",
+        alt: "Avatar"
+      },
+      children: (m) => /* @__PURE__ */ a(s, { ...m })
+    }
+  ),
+  /* @__PURE__ */ a(n, { componentName: "Avatar" }),
+  /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(l, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+    o,
+    {
+      language: "tsx",
+      code: `import { Avatar } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<Avatar image="/path/to/image.jpg" alt="User name" />
+
+// Different sizes
+<Avatar image={image} alt="User" size="xs" />
+<Avatar image={image} alt="User" size="sm" />
+<Avatar image={image} alt="User" size="md" />
+<Avatar image={image} alt="User" size="lg" />
+<Avatar image={image} alt="User" size="xl" />
+
+// Different shapes
+<Avatar image={image} alt="User" shape="circle" />
+<Avatar image={image} alt="User" shape="rounded" />
+
+// Without border
+<Avatar image={image} alt="User" border={false} />`
+    }
+  ) }) }) })
+] });
+export {
+  N as default
+};

package/documentation/AvatarSection-KUgwOb7k.js

@@ -0,0 +1,18 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-QnI4b7wS.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=require("../1-CArqgiQa.js"),t=()=>a.jsxs(a.Fragment,{children:[a.jsxs("div",{className:"text-center space-y-4",children:[a.jsx(e.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Avatar"}),a.jsx(e.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A versatile avatar component for displaying user profile images with multiple sizes and shapes."})]}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Default Avatar"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"User avatar"})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Without Border"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"User avatar",border:!1})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Sizes"}),a.jsxs("div",{className:"flex items-center gap-4",children:[a.jsx(e.Avatar,{image:s.avatar1Img,alt:"XS",size:"xs"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"SM",size:"sm"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"MD",size:"md"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"LG",size:"lg"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"XL",size:"xl"})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Shapes"}),a.jsxs("div",{className:"flex items-center gap-4",children:[a.jsx(e.Avatar,{image:s.avatar1Img,alt:"Circle",shape:"circle"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"Rounded",shape:"rounded"})]})]})]})})})}),a.jsx(e.PropPlayground,{componentName:"Avatar",defaultValues:{size:"md",shape:"circle",border:!0,image:"https://randomuser.me/api/portraits/men/1.jpg",alt:"Avatar"},children:r=>a.jsx(e.Avatar,{...r})}),a.jsx(e.AutoPropsTable,{componentName:"Avatar"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.CodeBlock,{language:"tsx",code:`import { Avatar } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<Avatar image="/path/to/image.jpg" alt="User name" />
+
+// Different sizes
+<Avatar image={image} alt="User" size="xs" />
+<Avatar image={image} alt="User" size="sm" />
+<Avatar image={image} alt="User" size="md" />
+<Avatar image={image} alt="User" size="lg" />
+<Avatar image={image} alt="User" size="xl" />
+
+// Different shapes
+<Avatar image={image} alt="User" shape="circle" />
+<Avatar image={image} alt="User" shape="rounded" />
+
+// Without border
+<Avatar image={image} alt="User" border={false} />`})})})})]});exports.default=t;

package/documentation/BadgeSection-BDS8NdU8.js

@@ -0,0 +1,48 @@
+"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 i=()=>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:"Badge"}),e.jsx(a.Typography,{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."})]}),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=i;

package/{BadgeSection-CbWNwtHa.mjs → documentation/BadgeSection-Da5iTRZq.js}

@@ -1,14 +1,14 @@
-import { jsxs as i, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { T as r, C as l, a as s, D as a, B as n, c as o } from "./index-HwvOEWI7.mjs";
+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-B6CStnMG.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const x = () => /* @__PURE__ */ i(d, { children: [
+const f = () => /* @__PURE__ */ i(t, { children: [
   /* @__PURE__ */ i("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(r, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Badge" }),
+    /* @__PURE__ */ e(l, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Badge" }),
     /* @__PURE__ */ e(
-      r,
+      l,
       {
         tag: "p",
         className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
@@ -16,9 +16,9 @@ const x = () => /* @__PURE__ */ i(d, { children: [
       }
     )
   ] }),
-  /* @__PURE__ */ e(l, { 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: [
+  /* @__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: [
     /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Status Badges" }),
+      /* @__PURE__ */ e(l, { 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 +27,7 @@ const x = () => /* @__PURE__ */ i(d, { children: [
       ] })
     ] }),
     /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Status Indicators (Dots Only)" }),
+      /* @__PURE__ */ e(l, { 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 +44,7 @@ const x = () => /* @__PURE__ */ i(d, { children: [
       ] })
     ] }),
     /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Dot Indicator" }),
+      /* @__PURE__ */ e(l, { 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 +52,7 @@ const x = () => /* @__PURE__ */ i(d, { children: [
       ] })
     ] })
   ] }) }) }) }),
-  /* @__PURE__ */ e(l, { 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(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(a, { color: "primary", children: "Primary" }),
     /* @__PURE__ */ e(a, { color: "success", children: "Success" }),
     /* @__PURE__ */ e(a, { color: "info", children: "Info" }),
@@ -60,15 +60,15 @@ const x = () => /* @__PURE__ */ i(d, { children: [
     /* @__PURE__ */ e(a, { color: "danger", children: "Danger" }),
     /* @__PURE__ */ e(a, { color: "gray", children: "Gray" })
   ] }) }) }) }),
-  /* @__PURE__ */ e(l, { 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(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(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(l, { 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(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__ */ i("div", { children: [
-      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Solid" }),
+      /* @__PURE__ */ e(l, { 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 +76,7 @@ const x = () => /* @__PURE__ */ i(d, { children: [
       ] })
     ] }),
     /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Soft" }),
+      /* @__PURE__ */ e(l, { 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 +84,7 @@ const x = () => /* @__PURE__ */ i(d, { children: [
       ] })
     ] }),
     /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Outline" }),
+      /* @__PURE__ */ e(l, { 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 +92,7 @@ const x = () => /* @__PURE__ */ i(d, { children: [
       ] })
     ] }),
     /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Ghost" }),
+      /* @__PURE__ */ e(l, { 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,85 +100,28 @@ const x = () => /* @__PURE__ */ i(d, { children: [
       ] })
     ] })
   ] }) }) }) }),
-  /* @__PURE__ */ e(l, { 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(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(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(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(n, { columns: [
+  /* @__PURE__ */ e(
+    d,
     {
-      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: "children",
-      type: "ReactNode",
-      default: "-",
-      description: "Content to display inside the badge"
-    },
-    {
-      prop: "status",
-      type: "'active' | 'inactive' | 'pending' | 'default'",
-      default: "-",
-      description: "Status indicator (overrides color prop)"
-    },
-    {
-      prop: "color",
-      type: "'primary' | 'success' | 'info' | 'warning' | 'danger' | 'gray' | 'white'",
-      default: "'gray'",
-      description: "Color of the badge"
-    },
-    {
-      prop: "size",
-      type: "'tiny' | 'small' | 'medium' | 'large'",
-      default: "'small'",
-      description: "Size of the badge"
-    },
-    {
-      prop: "variant",
-      type: "'solid' | 'ghost' | 'outline' | 'soft'",
-      default: "'solid'",
-      description: "Visual variant of the badge"
-    },
-    {
-      prop: "shape",
-      type: "'rounded' | 'pill' | 'circle'",
-      default: "'pill'",
-      description: "Shape of the badge"
-    },
-    {
-      prop: "withDot",
-      type: "boolean",
-      default: "false",
-      description: "Show a dot indicator (without children shows only dot)"
-    },
-    {
-      prop: "className",
-      type: "string",
-      default: "-",
-      description: "Additional CSS classes"
+      componentName: "Badge",
+      defaultValues: {
+        variant: "solid",
+        size: "small",
+        shape: "pill",
+        color: "primary",
+        withDot: !1
+      },
+      excludeProps: ["status"],
+      children: (c) => /* @__PURE__ */ e(a, { ...c, children: "Badge" })
     }
-  ] }) }) }) }),
-  /* @__PURE__ */ e(l, { 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(
+  ),
+  /* @__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,
     {
       language: "tsx",
@@ -234,5 +177,5 @@ const x = () => /* @__PURE__ */ i(d, { children: [
   ) }) }) })
 ] });
 export {
-  x as default
+  f as default
 };