@e-burgos/tucu-ui 1.1.1 → 1.5.0

package/AvatarSection-CxQ9I8LE.mjs

@@ -0,0 +1,137 @@
+import { jsxs as a, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { T as s, C as i, a as d, z as r, B as o, c as n } from "./index-DCf83AyI.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+import { a as t } from "./1-Df9CGZha.mjs";
+const y = () => /* @__PURE__ */ a(c, { children: [
+  /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(s, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Avatar" }),
+    /* @__PURE__ */ e(
+      s,
+      {
+        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__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { 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: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ a(i, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Default Avatar" }),
+      /* @__PURE__ */ e(r, { image: t, alt: "User avatar" })
+    ] }),
+    /* @__PURE__ */ a(i, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Without Border" }),
+      /* @__PURE__ */ e(r, { image: t, alt: "User avatar", border: !1 })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ a("div", { children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Sizes" }),
+      /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ e(r, { image: t, alt: "XS", size: "xs" }),
+        /* @__PURE__ */ e(r, { image: t, alt: "SM", size: "sm" }),
+        /* @__PURE__ */ e(r, { image: t, alt: "MD", size: "md" }),
+        /* @__PURE__ */ e(r, { image: t, alt: "LG", size: "lg" }),
+        /* @__PURE__ */ e(r, { image: t, alt: "XL", size: "xl" })
+      ] })
+    ] }),
+    /* @__PURE__ */ a("div", { children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Shapes" }),
+      /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ e(r, { image: t, alt: "Circle", shape: "circle" }),
+        /* @__PURE__ */ e(r, { image: t, alt: "Rounded", shape: "rounded" })
+      ] })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(o, { columns: [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (l) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(l) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (l) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(l) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (l) => {
+        const m = String(l);
+        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"
+    }
+  ], data: [
+    {
+      prop: "image",
+      type: "string",
+      default: "required",
+      description: "URL or path to the avatar image"
+    },
+    {
+      prop: "alt",
+      type: "string",
+      default: "required",
+      description: "Alt text for the image"
+    },
+    {
+      prop: "size",
+      type: "'xl' | 'lg' | 'md' | 'sm' | 'xs'",
+      default: "'md'",
+      description: "Size of the avatar"
+    },
+    {
+      prop: "shape",
+      type: "'rounded' | 'circle'",
+      default: "'circle'",
+      description: "Shape of the avatar"
+    },
+    {
+      prop: "border",
+      type: "boolean",
+      default: "true",
+      description: "Whether to show border"
+    },
+    {
+      prop: "className",
+      type: "string",
+      default: "-",
+      description: "Additional CSS classes"
+    }
+  ] }) }) }) }),
+  /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    n,
+    {
+      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 {
+  y as default
+};

package/BadgeSection-BYDufusc.mjs

@@ -0,0 +1,238 @@
+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-DCf83AyI.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => /* @__PURE__ */ i(d, { 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(
+      r,
+      {
+        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(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__ */ i("div", { children: [
+      /* @__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" }),
+        /* @__PURE__ */ e(a, { status: "pending", children: "Pending" }),
+        /* @__PURE__ */ e(a, { status: "default", children: "Default" })
+      ] })
+    ] }),
+    /* @__PURE__ */ i("div", { children: [
+      /* @__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 }),
+          /* @__PURE__ */ e("span", { className: "text-sm", children: "Online" })
+        ] }),
+        /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e(a, { status: "inactive", withDot: !0 }),
+          /* @__PURE__ */ e("span", { className: "text-sm", children: "Offline" })
+        ] }),
+        /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e(a, { status: "pending", withDot: !0 }),
+          /* @__PURE__ */ e("span", { className: "text-sm", children: "Away" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ i("div", { children: [
+      /* @__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" }),
+        /* @__PURE__ */ e(a, { status: "pending", withDot: !0, children: "Pending" })
+      ] })
+    ] })
+  ] }) }) }) }),
+  /* @__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(a, { color: "primary", children: "Primary" }),
+    /* @__PURE__ */ e(a, { color: "success", children: "Success" }),
+    /* @__PURE__ */ e(a, { color: "info", children: "Info" }),
+    /* @__PURE__ */ e(a, { color: "warning", children: "Warning" }),
+    /* @__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(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__ */ i("div", { children: [
+      /* @__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" }),
+        /* @__PURE__ */ e(a, { variant: "solid", color: "danger", children: "Danger" })
+      ] })
+    ] }),
+    /* @__PURE__ */ i("div", { children: [
+      /* @__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" }),
+        /* @__PURE__ */ e(a, { variant: "soft", color: "danger", children: "Danger" })
+      ] })
+    ] }),
+    /* @__PURE__ */ i("div", { children: [
+      /* @__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" }),
+        /* @__PURE__ */ e(a, { variant: "outline", color: "danger", children: "Danger" })
+      ] })
+    ] }),
+    /* @__PURE__ */ i("div", { children: [
+      /* @__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" }),
+        /* @__PURE__ */ e(a, { variant: "ghost", color: "danger", children: "Danger" })
+      ] })
+    ] })
+  ] }) }) }) }),
+  /* @__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(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: [
+    {
+      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"
+    }
+  ] }) }) }) }),
+  /* @__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(
+    o,
+    {
+      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>`
+    }
+  ) }) }) })
+] });
+export {
+  x as default
+};

package/BadgeSection-kYu8t7T2.js

@@ -0,0 +1,48 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-BoEJRnmP.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>{const r=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const i=String(s);return i==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:i})}},{key:"description",label:"Description"}],l=[{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"}];return 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.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:r,data:l})})})}),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=t;

package/BasicTableSection-B3eoFQgO.mjs

@@ -0,0 +1,169 @@
+import { jsxs as a, Fragment as p, jsx as e } from "react/jsx-runtime";
+import { T as r, C as t, a as c, B as s, c as h } from "./index-DCf83AyI.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const N = () => {
+  const d = [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (l) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(l) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (l) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(l) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (l) => {
+        const i = String(l);
+        return i === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: i });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ], m = [
+    {
+      prop: "columns",
+      type: "TableColumn<T>[]",
+      default: "required",
+      description: "Array of column definitions"
+    },
+    {
+      prop: "data",
+      type: "T[]",
+      default: "required",
+      description: "Array of data rows"
+    },
+    {
+      prop: "rounded",
+      type: "boolean",
+      default: "true",
+      description: "Whether to round table corners"
+    },
+    {
+      prop: "border",
+      type: "boolean",
+      default: "true",
+      description: "Whether to show borders"
+    },
+    {
+      prop: "hoverable",
+      type: "boolean",
+      default: "true",
+      description: "Whether rows are hoverable"
+    },
+    {
+      prop: "striped",
+      type: "boolean",
+      default: "false",
+      description: "Whether to show striped rows"
+    },
+    {
+      prop: "showHeader",
+      type: "boolean",
+      default: "true",
+      description: "Whether to show table header"
+    }
+  ], o = [
+    { key: "name", label: "Name" },
+    { key: "age", label: "Age" },
+    { key: "city", label: "City" }
+  ], n = [
+    { 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(p, { children: [
+    /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "BasicTable" }),
+      /* @__PURE__ */ e(
+        r,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "A flexible and customizable table component with support for custom rendering, styling, and interactions."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { 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(t, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Basic Table" }),
+        /* @__PURE__ */ e(s, { columns: o, data: n })
+      ] }),
+      /* @__PURE__ */ a(t, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Striped Table" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            columns: o,
+            data: n,
+            striped: !0
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(t, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Without Border" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            columns: o,
+            data: n,
+            border: !1
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(s, { columns: d, data: m }) }) }) }),
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { 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 {
+  N as default
+};

package/BasicTableSection-QXvy76bx.js

@@ -0,0 +1,35 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-BoEJRnmP.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const o=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const l=String(s);return l==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:l})}},{key:"description",label:"Description"}],n=[{prop:"columns",type:"TableColumn<T>[]",default:"required",description:"Array of column definitions"},{prop:"data",type:"T[]",default:"required",description:"Array of data rows"},{prop:"rounded",type:"boolean",default:"true",description:"Whether to round table corners"},{prop:"border",type:"boolean",default:"true",description:"Whether to show borders"},{prop:"hoverable",type:"boolean",default:"true",description:"Whether rows are hoverable"},{prop:"striped",type:"boolean",default:"false",description:"Whether to show striped rows"},{prop:"showHeader",type:"boolean",default:"true",description:"Whether to show table header"}],t=[{key:"name",label:"Name"},{key:"age",label:"Age"},{key:"city",label:"City"}],r=[{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.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"BasicTable"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A flexible and customizable table component with support for custom rendering, styling, and interactions."})]}),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:t,data:r})]}),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:t,data:r,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:t,data:r,border:!1})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:o,data:n})})})}),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=i;