@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/CardContainerSection-Z7NOSIc4.js

@@ -0,0 +1,61 @@
+import { jsxs as r, Fragment as n, jsx as a } from "react/jsx-runtime";
+import { H as i, C as e, a as o, T as t, A as s, c as d } from "../index-DoxeCFUJ.js";
+import { LayoutGrid as l } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const y = () => /* @__PURE__ */ r(n, { children: [
+  /* @__PURE__ */ a(
+    i,
+    {
+      title: "CardContainer",
+      description: `A container component that provides consistent styling and layout for
+          card-based content.`,
+      icon: /* @__PURE__ */ a("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-purple-500 to-violet-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ a(l, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ r(e, { className: "p-4", children: [
+      /* @__PURE__ */ a(t, { tag: "h5", className: "mb-3", children: "Basic Card" }),
+      /* @__PURE__ */ a(e, { children: /* @__PURE__ */ a(t, { tag: "p", children: "Card content goes here" }) })
+    ] }),
+    /* @__PURE__ */ r(e, { className: "p-4", children: [
+      /* @__PURE__ */ a(t, { tag: "h5", className: "mb-3", children: "With Custom Content" }),
+      /* @__PURE__ */ r(e, { children: [
+        /* @__PURE__ */ a(t, { tag: "h3", className: "font-bold mb-2", children: "Card Title" }),
+        /* @__PURE__ */ a(t, { tag: "p", children: "This is a card with custom content including a title and description." })
+      ] })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ a(s, { componentName: "CardContainer" }),
+  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+    d,
+    {
+      language: "tsx",
+      code: `import { CardContainer, Typography } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<CardContainer>
+  <Typography tag="p">Card content goes here</Typography>
+</CardContainer>
+
+// With custom content
+<CardContainer>
+  <Typography tag="h3" className="font-bold mb-2">
+    Card Title
+  </Typography>
+  <Typography tag="p">
+    Card description and content
+  </Typography>
+</CardContainer>
+
+// With custom className
+<CardContainer className="bg-blue-50">
+  <Typography tag="p">Custom styled card</Typography>
+</CardContainer>`
+    }
+  ) }) }) })
+] });
+export {
+  y as default
+};

package/documentation/CardContainerSection-j-BU0Fsq.js

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDUS-PU.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"CardContainer",description:`A container component that provides consistent styling and layout for
+          card-based content.`,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-purple-500 to-violet-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(r.LayoutGrid,{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:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Card"}),e.jsx(a.CardContainer,{children:e.jsx(a.Typography,{tag:"p",children:"Card content goes here"})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Custom Content"}),e.jsxs(a.CardContainer,{children:[e.jsx(a.Typography,{tag:"h3",className:"font-bold mb-2",children:"Card Title"}),e.jsx(a.Typography,{tag:"p",children:"This is a card with custom content including a title and description."})]})]})]})})})}),e.jsx(a.AutoPropsTable,{componentName:"CardContainer"}),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 { CardContainer, Typography } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<CardContainer>
+  <Typography tag="p">Card content goes here</Typography>
+</CardContainer>
+
+// With custom content
+<CardContainer>
+  <Typography tag="h3" className="font-bold mb-2">
+    Card Title
+  </Typography>
+  <Typography tag="p">
+    Card description and content
+  </Typography>
+</CardContainer>
+
+// With custom className
+<CardContainer className="bg-blue-50">
+  <Typography tag="p">Custom styled card</Typography>
+</CardContainer>`})})})})]});exports.default=t;

package/documentation/CardSection-nulnD1Rl.js

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DWDUS-PU.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Card",description:`A flexible card component with optional header, icon, footer, actions,
+          and clickable behavior.`,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-violet-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.CreditCard,{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(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsx(t.Card,{title:"Basic Card",description:"A simple card with title and description",icon:e.jsx(a.Users,{className:"h-5 w-5"}),children:e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"This is the card body content. You can place any content here."})}),e.jsx(t.Card,{title:"With Actions",description:"Card with action buttons in the header",icon:e.jsx(a.Settings,{className:"h-5 w-5"}),actions:e.jsx(t.Badge,{color:"success",size:"small",children:"Active"}),children:e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"The actions slot renders elements on the right side of the header."})}),e.jsx(t.Card,{title:"With Footer",description:"Card with a footer section",icon:e.jsx(a.Bell,{className:"h-5 w-5"}),footer:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx(t.Typography,{tag:"span",className:"text-xs text-gray-500",children:"Last updated 2 hours ago"}),e.jsx(t.Button,{variant:"ghost",size:"mini",children:"View Details"})]}),children:e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Footer content appears at the bottom with a top border separator."})}),e.jsx(t.Card,{title:"Clickable Card",description:"Click anywhere on this card",onClick:()=>alert("Card clicked!"),children:e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Clickable cards show a hover effect on the border."})})]})})})}),e.jsx(t.PropPlayground,{componentName:"Card",title:"Card Playground",defaultValues:{title:"Card Title",description:"This is a card description with relevant content."},excludeProps:["onClick","icon","header","footer","actions","className"],children:r=>e.jsx(t.Card,{...r})}),e.jsx(t.AutoPropsTable,{componentName:"Card"}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { Card, Badge, Button } from '@e-burgos/tucu-ui';
+import { Users } from 'lucide-react';
+
+// Basic
+<Card
+  title="Team Members"
+  description="Manage your team"
+  icon={<Users className="h-5 w-5" />}
+>
+  <p>Card body content</p>
+</Card>
+
+// With actions and footer
+<Card
+  title="Notifications"
+  actions={<Badge color="info">3 new</Badge>}
+  footer={<Button variant="ghost" size="mini">View All</Button>}
+>
+  <p>You have 3 unread notifications</p>
+</Card>
+
+// Clickable
+<Card title="Dashboard" onClick={() => navigate('/dashboard')}>
+  <p>Click to navigate</p>
+</Card>`})})})})]});exports.default=i;

package/documentation/CardSection-xhkzCZXI.js

@@ -0,0 +1,136 @@
+import { jsxs as i, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { H as c, C as r, a as o, J as t, T as a, K as l, x as n, P as h, A as m, c as p } from "../index-DoxeCFUJ.js";
+import { CreditCard as g, Users as C, Settings as u, Bell as f } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const k = () => /* @__PURE__ */ i(d, { children: [
+  /* @__PURE__ */ e(
+    c,
+    {
+      title: "Card",
+      description: `A flexible card component with optional header, icon, footer, actions,
+          and clickable behavior.`,
+      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-violet-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(g, { 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(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ e(
+      t,
+      {
+        title: "Basic Card",
+        description: "A simple card with title and description",
+        icon: /* @__PURE__ */ e(C, { className: "h-5 w-5" }),
+        children: /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "This is the card body content. You can place any content here."
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(
+      t,
+      {
+        title: "With Actions",
+        description: "Card with action buttons in the header",
+        icon: /* @__PURE__ */ e(u, { className: "h-5 w-5" }),
+        actions: /* @__PURE__ */ e(l, { color: "success", size: "small", children: "Active" }),
+        children: /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "The actions slot renders elements on the right side of the header."
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(
+      t,
+      {
+        title: "With Footer",
+        description: "Card with a footer section",
+        icon: /* @__PURE__ */ e(f, { className: "h-5 w-5" }),
+        footer: /* @__PURE__ */ i("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ e(a, { tag: "span", className: "text-xs text-gray-500", children: "Last updated 2 hours ago" }),
+          /* @__PURE__ */ e(n, { variant: "ghost", size: "mini", children: "View Details" })
+        ] }),
+        children: /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "Footer content appears at the bottom with a top border separator."
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(
+      t,
+      {
+        title: "Clickable Card",
+        description: "Click anywhere on this card",
+        onClick: () => alert("Card clicked!"),
+        children: /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "Clickable cards show a hover effect on the border."
+          }
+        )
+      }
+    )
+  ] }) }) }) }),
+  /* @__PURE__ */ e(
+    h,
+    {
+      componentName: "Card",
+      title: "Card Playground",
+      defaultValues: {
+        title: "Card Title",
+        description: "This is a card description with relevant content."
+      },
+      excludeProps: ["onClick", "icon", "header", "footer", "actions", "className"],
+      children: (s) => /* @__PURE__ */ e(t, { ...s })
+    }
+  ),
+  /* @__PURE__ */ e(m, { componentName: "Card" }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    p,
+    {
+      language: "tsx",
+      code: `import { Card, Badge, Button } from '@e-burgos/tucu-ui';
+import { Users } from 'lucide-react';
+
+// Basic
+<Card
+  title="Team Members"
+  description="Manage your team"
+  icon={<Users className="h-5 w-5" />}
+>
+  <p>Card body content</p>
+</Card>
+
+// With actions and footer
+<Card
+  title="Notifications"
+  actions={<Badge color="info">3 new</Badge>}
+  footer={<Button variant="ghost" size="mini">View All</Button>}
+>
+  <p>You have 3 unread notifications</p>
+</Card>
+
+// Clickable
+<Card title="Dashboard" onClick={() => navigate('/dashboard')}>
+  <p>Click to navigate</p>
+</Card>`
+    }
+  ) }) }) })
+] });
+export {
+  k as default
+};

package/documentation/CardTitleSection-DKFkHUhY.js

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-DWDUS-PU.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>e.jsxs(e.Fragment,{children:[e.jsx(r.HeroCard,{title:"CardTitle",description:`A card component with an integrated title that appears above the card
+          border.`,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-purple-600 to-violet-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.Heading,{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(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.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:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"With Title"}),e.jsx(r.CardTitle,{title:"Card Title",children:e.jsx(r.Typography,{tag:"p",children:"Card content goes here"})})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Without Border"}),e.jsx(r.CardTitle,{title:"No Border",border:!1,children:e.jsx(r.Typography,{tag:"p",children:"Card without border"})})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"With Rich Content"}),e.jsx(r.CardTitle,{title:"Rich Content",children:e.jsxs("div",{className:"space-y-2",children:[e.jsx(r.Typography,{tag:"p",children:"First paragraph"}),e.jsx(r.Typography,{tag:"p",children:"Second paragraph"})]})})]})]})})})}),e.jsx(r.PropPlayground,{componentName:"CardTitle",defaultValues:{title:"Card Title",border:!0},excludeProps:[],children:a=>e.jsx(r.CardTitle,{...a,children:e.jsx("div",{className:"p-4",children:"Card Content"})})}),e.jsx(r.AutoPropsTable,{componentName:"CardTitle"}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.CodeBlock,{language:"tsx",code:`import { CardTitle, Typography } from '@e-burgos/tucu-ui';
+
+// With title
+<CardTitle title="Card Title">
+  <Typography tag="p">Card content goes here</Typography>
+</CardTitle>
+
+// Without border
+<CardTitle title="No Border" border={false}>
+  <Typography tag="p">Card without border</Typography>
+</CardTitle>
+
+// With rich content
+<CardTitle title="Rich Content">
+  <div className="space-y-2">
+    <Typography tag="p">First paragraph</Typography>
+    <Typography tag="p">Second paragraph</Typography>
+  </div>
+</CardTitle>`})})})})]});exports.default=i;

package/documentation/CardTitleSection-kRleax_l.js

@@ -0,0 +1,72 @@
+import { jsxs as a, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { H as o, C as i, a as t, T as r, P as s, A as c, c as h } from "../index-DoxeCFUJ.js";
+import { Heading as p } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const u = () => /* @__PURE__ */ a(d, { children: [
+  /* @__PURE__ */ e(
+    o,
+    {
+      title: "CardTitle",
+      description: `A card component with an integrated title that appears above the card
+          border.`,
+      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-purple-600 to-violet-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(p, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { 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(r, { tag: "h5", className: "mb-3", children: "With Title" }),
+      /* @__PURE__ */ e(t, { title: "Card Title", children: /* @__PURE__ */ e(r, { tag: "p", children: "Card content goes here" }) })
+    ] }),
+    /* @__PURE__ */ a(i, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Without Border" }),
+      /* @__PURE__ */ e(t, { title: "No Border", border: !1, children: /* @__PURE__ */ e(r, { tag: "p", children: "Card without border" }) })
+    ] }),
+    /* @__PURE__ */ a(i, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Rich Content" }),
+      /* @__PURE__ */ e(t, { title: "Rich Content", children: /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(r, { tag: "p", children: "First paragraph" }),
+        /* @__PURE__ */ e(r, { tag: "p", children: "Second paragraph" })
+      ] }) })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(
+    s,
+    {
+      componentName: "CardTitle",
+      defaultValues: { title: "Card Title", border: !0 },
+      excludeProps: [],
+      children: (l) => /* @__PURE__ */ e(t, { ...l, children: /* @__PURE__ */ e("div", { className: "p-4", children: "Card Content" }) })
+    }
+  ),
+  /* @__PURE__ */ e(c, { componentName: "CardTitle" }),
+  /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { 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 { CardTitle, Typography } from '@e-burgos/tucu-ui';
+
+// With title
+<CardTitle title="Card Title">
+  <Typography tag="p">Card content goes here</Typography>
+</CardTitle>
+
+// Without border
+<CardTitle title="No Border" border={false}>
+  <Typography tag="p">Card without border</Typography>
+</CardTitle>
+
+// With rich content
+<CardTitle title="Rich Content">
+  <div className="space-y-2">
+    <Typography tag="p">First paragraph</Typography>
+    <Typography tag="p">Second paragraph</Typography>
+  </div>
+</CardTitle>`
+    }
+  ) }) }) })
+] });
+export {
+  u as default
+};

package/documentation/CarouselCardsSection-BZ49UPm1.js

@@ -0,0 +1,174 @@
+import { jsxs as a, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { H as n, C as i, a as l, T as t, V as s, P as o, A as m, c as h } from "../index-DoxeCFUJ.js";
+import { Layers as p, Zap as u, Palette as C, Users as w, Smartphone as g, Shield as N, BookOpen as f } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => {
+  const r = [
+    {
+      title: "Performance",
+      description: "Blazing fast performance with optimized rendering and minimal bundle size",
+      icon: /* @__PURE__ */ e(u, { className: "w-8 h-8" })
+    },
+    {
+      title: "Customizable",
+      description: "Highly customizable with extensive theming options and variants",
+      icon: /* @__PURE__ */ e(C, { className: "w-8 h-8" })
+    },
+    {
+      title: "Accessible",
+      description: "Built with accessibility in mind, WCAG 2.1 compliant",
+      icon: /* @__PURE__ */ e(w, { className: "w-8 h-8" })
+    },
+    {
+      title: "Responsive",
+      description: "Mobile-first design that works seamlessly across all devices",
+      icon: /* @__PURE__ */ e(g, { className: "w-8 h-8" })
+    },
+    {
+      title: "Type Safe",
+      description: "Full TypeScript support with comprehensive type definitions",
+      icon: /* @__PURE__ */ e(N, { className: "w-8 h-8" })
+    },
+    {
+      title: "Documentation",
+      description: "Extensive documentation with examples and best practices",
+      icon: /* @__PURE__ */ e(f, { className: "w-8 h-8" })
+    }
+  ];
+  return /* @__PURE__ */ a(d, { children: [
+    /* @__PURE__ */ e(
+      n,
+      {
+        title: "CarouselCards",
+        description: `A carousel component specifically designed for displaying cards with
+          customizable sizes and variants.`,
+        icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-rose-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(p, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(i, { 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__ */ a("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Basic Carousel Cards" }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(s, { cardClassName: "min-h-[250px]", cards: r }) })
+      ] }),
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Navigation and Pagination" }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(s, { cards: r, showNavigation: !0, showPagination: !0 }) })
+      ] }),
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Elevated Variant - Medium Size" }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(
+          s,
+          {
+            cards: r,
+            variant: "elevated",
+            cardSize: "md",
+            showNavigation: !0
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Outlined Variant - Large Size" }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(
+          s,
+          {
+            cards: r,
+            variant: "outlined",
+            cardSize: "lg",
+            showPagination: !0
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Filled Variant - Small Size" }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(
+          s,
+          {
+            cards: r,
+            variant: "filled",
+            cardSize: "sm",
+            showNavigation: !0,
+            showPagination: !0
+          }
+        ) })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(
+      o,
+      {
+        componentName: "CarouselCards",
+        title: "CarouselCards Playground",
+        defaultValues: {
+          variant: "default",
+          cardSize: "md",
+          showCardTitles: !0,
+          showNavigation: !0,
+          showPagination: !0,
+          loop: !0,
+          grabCursor: !0,
+          direction: "horizontal"
+        },
+        excludeProps: ["cards", "onSlideChange", "onSwiper", "breakpoints", "autoplay", "className", "slideClassName", "cardClassName", "aria-label", "effect", "paginationType", "centeredSlides", "freeMode", "mousewheel", "slidesPerView", "spaceBetween"],
+        children: (c) => /* @__PURE__ */ e(
+          s,
+          {
+            ...c,
+            cards: [
+              { title: "Card 1", description: "Description 1", image: "" },
+              { title: "Card 2", description: "Description 2", image: "" },
+              { title: "Card 3", description: "Description 3", image: "" }
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(m, { componentName: "CarouselCards" }),
+    /* @__PURE__ */ e(i, { 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(
+      h,
+      {
+        language: "tsx",
+        code: `import { CarouselCards, LucideIcons } from '@e-burgos/tucu-ui';
+
+const cards = [
+  {
+    title: 'Performance',
+    description: 'Blazing fast performance with optimized rendering',
+    icon: <LucideIcons.Zap className="w-8 h-8" />,
+  },
+  {
+    title: 'Customizable',
+    description: 'Highly customizable with extensive theming options',
+    icon: <LucideIcons.Palette className="w-8 h-8" />,
+  },
+  {
+    title: 'Accessible',
+    description: 'Built with accessibility in mind, WCAG 2.1 compliant',
+    icon: <LucideIcons.Users className="w-8 h-8" />,
+  },
+  // ... more cards
+];
+
+// Basic usage
+<CarouselCards cards={cards} />
+
+// With navigation and pagination
+<CarouselCards cards={cards} showNavigation showPagination />
+
+// Different variants
+<CarouselCards cards={cards} variant="elevated" cardSize="md" />
+<CarouselCards cards={cards} variant="outlined" cardSize="lg" />
+<CarouselCards cards={cards} variant="filled" cardSize="sm" />
+
+// Different sizes
+<CarouselCards cards={cards} cardSize="sm" />
+<CarouselCards cards={cards} cardSize="md" />
+<CarouselCards cards={cards} cardSize="lg" />
+<CarouselCards cards={cards} cardSize="xl" />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  x as default
+};

package/documentation/CarouselCardsSection-DuLDA6jR.js

@@ -0,0 +1,38 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDUS-PU.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>{const i=[{title:"Performance",description:"Blazing fast performance with optimized rendering and minimal bundle size",icon:e.jsx(s.Zap,{className:"w-8 h-8"})},{title:"Customizable",description:"Highly customizable with extensive theming options and variants",icon:e.jsx(s.Palette,{className:"w-8 h-8"})},{title:"Accessible",description:"Built with accessibility in mind, WCAG 2.1 compliant",icon:e.jsx(s.Users,{className:"w-8 h-8"})},{title:"Responsive",description:"Mobile-first design that works seamlessly across all devices",icon:e.jsx(s.Smartphone,{className:"w-8 h-8"})},{title:"Type Safe",description:"Full TypeScript support with comprehensive type definitions",icon:e.jsx(s.Shield,{className:"w-8 h-8"})},{title:"Documentation",description:"Extensive documentation with examples and best practices",icon:e.jsx(s.BookOpen,{className:"w-8 h-8"})}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"CarouselCards",description:`A carousel component specifically designed for displaying cards with
+          customizable sizes and variants.`,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-rose-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Layers,{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 Carousel Cards"}),e.jsx("div",{className:"w-full",children:e.jsx(a.CarouselCards,{cardClassName:"min-h-[250px]",cards:i})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Navigation and Pagination"}),e.jsx("div",{className:"w-full",children:e.jsx(a.CarouselCards,{cards:i,showNavigation:!0,showPagination:!0})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Elevated Variant - Medium Size"}),e.jsx("div",{className:"w-full",children:e.jsx(a.CarouselCards,{cards:i,variant:"elevated",cardSize:"md",showNavigation:!0})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Outlined Variant - Large Size"}),e.jsx("div",{className:"w-full",children:e.jsx(a.CarouselCards,{cards:i,variant:"outlined",cardSize:"lg",showPagination:!0})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Filled Variant - Small Size"}),e.jsx("div",{className:"w-full",children:e.jsx(a.CarouselCards,{cards:i,variant:"filled",cardSize:"sm",showNavigation:!0,showPagination:!0})})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"CarouselCards",title:"CarouselCards Playground",defaultValues:{variant:"default",cardSize:"md",showCardTitles:!0,showNavigation:!0,showPagination:!0,loop:!0,grabCursor:!0,direction:"horizontal"},excludeProps:["cards","onSlideChange","onSwiper","breakpoints","autoplay","className","slideClassName","cardClassName","aria-label","effect","paginationType","centeredSlides","freeMode","mousewheel","slidesPerView","spaceBetween"],children:r=>e.jsx(a.CarouselCards,{...r,cards:[{title:"Card 1",description:"Description 1",image:""},{title:"Card 2",description:"Description 2",image:""},{title:"Card 3",description:"Description 3",image:""}]})}),e.jsx(a.AutoPropsTable,{componentName:"CarouselCards"}),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 { CarouselCards, LucideIcons } from '@e-burgos/tucu-ui';
+
+const cards = [
+  {
+    title: 'Performance',
+    description: 'Blazing fast performance with optimized rendering',
+    icon: <LucideIcons.Zap className="w-8 h-8" />,
+  },
+  {
+    title: 'Customizable',
+    description: 'Highly customizable with extensive theming options',
+    icon: <LucideIcons.Palette className="w-8 h-8" />,
+  },
+  {
+    title: 'Accessible',
+    description: 'Built with accessibility in mind, WCAG 2.1 compliant',
+    icon: <LucideIcons.Users className="w-8 h-8" />,
+  },
+  // ... more cards
+];
+
+// Basic usage
+<CarouselCards cards={cards} />
+
+// With navigation and pagination
+<CarouselCards cards={cards} showNavigation showPagination />
+
+// Different variants
+<CarouselCards cards={cards} variant="elevated" cardSize="md" />
+<CarouselCards cards={cards} variant="outlined" cardSize="lg" />
+<CarouselCards cards={cards} variant="filled" cardSize="sm" />
+
+// Different sizes
+<CarouselCards cards={cards} cardSize="sm" />
+<CarouselCards cards={cards} cardSize="md" />
+<CarouselCards cards={cards} cardSize="lg" />
+<CarouselCards cards={cards} cardSize="xl" />`})})})})]})};exports.default=t;

package/documentation/CarouselImageSection-Bw6VB4Sy.js

@@ -0,0 +1,39 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDUS-PU.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const s=[{src:"https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800&h=600&fit=crop",alt:"Mountain Landscape",title:"Mountain Peaks",description:"Breathtaking view of snow-capped mountain peaks at sunrise"},{src:"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop",alt:"Ocean View",title:"Ocean Horizon",description:"Serene ocean view with crystal clear blue waters"},{src:"https://images.unsplash.com/photo-1511593358241-7eea1f3c84e5?w=800&h=600&fit=crop",alt:"Forest Path",title:"Forest Trail",description:"Peaceful path through a lush green forest"},{src:"https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=800&h=600&fit=crop",alt:"Desert Sunset",title:"Desert Landscape",description:"Stunning sunset over golden desert dunes"},{src:"https://images.unsplash.com/photo-1542202229-7d93c33f5d07?w=800&h=600&fit=crop",alt:"City Skyline",title:"Urban Cityscape",description:"Modern city skyline illuminated at night"},{src:"https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&h=600&fit=crop",alt:"Northern Lights",title:"Aurora Borealis",description:"Magical northern lights dancing across the night sky"}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"CarouselImage",description:`A carousel component specifically designed for displaying images with
+          optional titles and descriptions.`,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-pink-600 to-rose-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.Image,{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 Image Carousel"}),e.jsx("div",{className:"w-full",children:e.jsx(a.CarouselImage,{images:s})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Titles and Descriptions"}),e.jsx("div",{className:"w-full",children:e.jsx(a.CarouselImage,{images:s,showTitles:!0})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Navigation and Pagination"}),e.jsx("div",{className:"w-full",children:e.jsx(a.CarouselImage,{images:s,showNavigation:!0,showPagination:!0})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Contain Fit - Preserve Aspect Ratio"}),e.jsx("div",{className:"w-full",children:e.jsx(a.CarouselImage,{images:s,imageFit:"contain",showTitles:!0,showNavigation:!0})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Square Aspect Ratio"}),e.jsx("div",{className:"w-full",children:e.jsx(a.CarouselImage,{images:s,aspectRatio:"aspect-square",showNavigation:!0,showPagination:!0})})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"CarouselImage",title:"CarouselImage Playground",defaultValues:{showNavigation:!0,showPagination:!0,showTitles:!0,loop:!0,grabCursor:!0,lazy:!1,imageFit:"cover",direction:"horizontal"},excludeProps:["images","onSlideChange","onSwiper","breakpoints","autoplay","className","slideClassName","imageClassName","aria-label","aspectRatio","effect","paginationType","centeredSlides","freeMode","mousewheel","slidesPerView","spaceBetween"],children:i=>e.jsx(a.CarouselImage,{...i,images:[{src:"https://picsum.photos/seed/1/800/400",alt:"Image 1",title:"Image 1"},{src:"https://picsum.photos/seed/2/800/400",alt:"Image 2",title:"Image 2"},{src:"https://picsum.photos/seed/3/800/400",alt:"Image 3",title:"Image 3"}]})}),e.jsx(a.AutoPropsTable,{componentName:"CarouselImage"}),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 { CarouselImage } from '@e-burgos/tucu-ui';
+
+const images = [
+  {
+    src: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba',
+    alt: 'Mountain Landscape',
+    title: 'Mountain Peaks',
+    description: 'Breathtaking view of snow-capped mountain peaks',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',
+    alt: 'Ocean View',
+    title: 'Ocean Horizon',
+    description: 'Serene ocean view with crystal clear blue waters',
+  },
+  // ... more images
+];
+
+// Basic usage
+<CarouselImage images={images} />
+
+// With titles and descriptions
+<CarouselImage images={images} showTitles />
+
+// With navigation and pagination
+<CarouselImage images={images} showNavigation showPagination />
+
+// Different image fit options
+<CarouselImage images={images} imageFit="contain" />
+<CarouselImage images={images} imageFit="cover" />
+
+// Different aspect ratios
+<CarouselImage images={images} aspectRatio="aspect-video" />
+<CarouselImage images={images} aspectRatio="aspect-square" />
+<CarouselImage images={images} aspectRatio="aspect-[4/3]" />
+
+// Disable lazy loading
+<CarouselImage images={images} lazy={false} />`})})})})]})};exports.default=o;