@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/CarouselCardsSection-DJUza5iT.mjs

@@ -0,0 +1,207 @@
+import { jsxs as a, Fragment as n, jsx as e } from "react/jsx-runtime";
+import { T as i, C as s, a as c, x as l, B as o, c as m } from "./index-Hq6IUBmn.mjs";
+import { Zap as p, Palette as h, Users as u, Smartphone as f, Shield as g, BookOpen as N } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const P = () => {
+  const r = [
+    {
+      title: "Performance",
+      description: "Blazing fast performance with optimized rendering and minimal bundle size",
+      icon: /* @__PURE__ */ e(p, { className: "w-8 h-8" })
+    },
+    {
+      title: "Customizable",
+      description: "Highly customizable with extensive theming options and variants",
+      icon: /* @__PURE__ */ e(h, { className: "w-8 h-8" })
+    },
+    {
+      title: "Accessible",
+      description: "Built with accessibility in mind, WCAG 2.1 compliant",
+      icon: /* @__PURE__ */ e(u, { className: "w-8 h-8" })
+    },
+    {
+      title: "Responsive",
+      description: "Mobile-first design that works seamlessly across all devices",
+      icon: /* @__PURE__ */ e(f, { className: "w-8 h-8" })
+    },
+    {
+      title: "Type Safe",
+      description: "Full TypeScript support with comprehensive type definitions",
+      icon: /* @__PURE__ */ e(g, { className: "w-8 h-8" })
+    },
+    {
+      title: "Documentation",
+      description: "Extensive documentation with examples and best practices",
+      icon: /* @__PURE__ */ e(N, { className: "w-8 h-8" })
+    }
+  ];
+  return /* @__PURE__ */ a(n, { children: [
+    /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ e(i, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "CarouselCards" }),
+      /* @__PURE__ */ e(
+        i,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "A carousel component specifically designed for displaying cards with customizable sizes and variants."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(s, { 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(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Basic Carousel Cards" }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(l, { cardClassName: "min-h-[250px]", cards: r }) })
+      ] }),
+      /* @__PURE__ */ a(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "With Navigation and Pagination" }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(l, { cards: r, showNavigation: !0, showPagination: !0 }) })
+      ] }),
+      /* @__PURE__ */ a(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Elevated Variant - Medium Size" }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(
+          l,
+          {
+            cards: r,
+            variant: "elevated",
+            cardSize: "md",
+            showNavigation: !0
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ a(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Outlined Variant - Large Size" }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(
+          l,
+          {
+            cards: r,
+            variant: "outlined",
+            cardSize: "lg",
+            showPagination: !0
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ a(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Filled Variant - Small Size" }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(
+          l,
+          {
+            cards: r,
+            variant: "filled",
+            cardSize: "sm",
+            showNavigation: !0,
+            showPagination: !0
+          }
+        ) })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(s, { 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(o, { 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 d = String(t);
+          return d === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: d });
+        }
+      },
+      {
+        key: "description",
+        label: "Description"
+      }
+    ], data: [
+      {
+        prop: "cards",
+        type: "CarouselCardItem[]",
+        default: "required",
+        description: "Array of card items to display"
+      },
+      {
+        prop: "cardSize",
+        type: "'sm' | 'md' | 'lg' | 'xl'",
+        default: "'md'",
+        description: "Size of the cards"
+      },
+      {
+        prop: "variant",
+        type: "'default' | 'elevated' | 'outlined' | 'filled'",
+        default: "'default'",
+        description: "Visual variant of the cards"
+      },
+      {
+        prop: "showCardTitles",
+        type: "boolean",
+        default: "true",
+        description: "Whether to show card titles"
+      },
+      {
+        prop: "showNavigation",
+        type: "boolean",
+        default: "false",
+        description: "Show navigation arrows"
+      },
+      {
+        prop: "showPagination",
+        type: "boolean",
+        default: "false",
+        description: "Show pagination dots"
+      }
+    ] }) }) }) }),
+    /* @__PURE__ */ e(s, { 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(
+      m,
+      {
+        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 {
+  P as default
+};

package/CarouselImageSection-CoNZlkZS.mjs

@@ -0,0 +1,218 @@
+import { jsxs as a, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { T as t, C as s, a as r, y as l, B as p, c as m } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const y = () => {
+  const i = [
+    {
+      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 /* @__PURE__ */ a(c, { children: [
+    /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "CarouselImage" }),
+      /* @__PURE__ */ e(
+        t,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "A carousel component specifically designed for displaying images with optional titles and descriptions."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { 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(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Basic Image Carousel" }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(l, { images: i }) })
+      ] }),
+      /* @__PURE__ */ a(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Titles and Descriptions" }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(l, { images: i, showTitles: !0 }) })
+      ] }),
+      /* @__PURE__ */ a(s, { 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(
+          l,
+          {
+            images: i,
+            showNavigation: !0,
+            showPagination: !0
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ a(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Contain Fit - Preserve Aspect Ratio" }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(
+          l,
+          {
+            images: i,
+            imageFit: "contain",
+            showTitles: !0,
+            showNavigation: !0
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ a(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Square Aspect Ratio" }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(
+          l,
+          {
+            images: i,
+            aspectRatio: "aspect-square",
+            showNavigation: !0,
+            showPagination: !0
+          }
+        ) })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(p, { columns: [
+      {
+        key: "prop",
+        label: "Prop",
+        render: (o) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(o) })
+      },
+      {
+        key: "type",
+        label: "Type",
+        render: (o) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(o) })
+      },
+      {
+        key: "default",
+        label: "Default",
+        render: (o) => {
+          const n = String(o);
+          return n === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: n });
+        }
+      },
+      {
+        key: "description",
+        label: "Description"
+      }
+    ], data: [
+      {
+        prop: "images",
+        type: "CarouselImageItem[]",
+        default: "required",
+        description: "Array of image items to display"
+      },
+      {
+        prop: "showTitles",
+        type: "boolean",
+        default: "false",
+        description: "Whether to show image titles and descriptions"
+      },
+      {
+        prop: "imageFit",
+        type: "'cover' | 'contain' | 'fill' | 'none' | 'scale-down'",
+        default: "'cover'",
+        description: "How images should fit in their containers"
+      },
+      {
+        prop: "aspectRatio",
+        type: "string",
+        default: "'aspect-video'",
+        description: "Aspect ratio class for images"
+      },
+      {
+        prop: "lazy",
+        type: "boolean",
+        default: "true",
+        description: "Enable lazy loading for images"
+      },
+      {
+        prop: "showNavigation",
+        type: "boolean",
+        default: "false",
+        description: "Show navigation arrows"
+      },
+      {
+        prop: "showPagination",
+        type: "boolean",
+        default: "false",
+        description: "Show pagination dots"
+      }
+    ] }) }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      m,
+      {
+        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} />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  y as default
+};

package/CarouselImageSection-sUP78k0h.js

@@ -0,0 +1,38 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{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"}],r=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>{const i=String(t);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"}],o=[{prop:"images",type:"CarouselImageItem[]",default:"required",description:"Array of image items to display"},{prop:"showTitles",type:"boolean",default:"false",description:"Whether to show image titles and descriptions"},{prop:"imageFit",type:"'cover' | 'contain' | 'fill' | 'none' | 'scale-down'",default:"'cover'",description:"How images should fit in their containers"},{prop:"aspectRatio",type:"string",default:"'aspect-video'",description:"Aspect ratio class for images"},{prop:"lazy",type:"boolean",default:"true",description:"Enable lazy loading for images"},{prop:"showNavigation",type:"boolean",default:"false",description:"Show navigation arrows"},{prop:"showPagination",type:"boolean",default:"false",description:"Show pagination dots"}];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:"CarouselImage"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A carousel component specifically designed for displaying images with optional titles and descriptions."})]}),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.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:o})})})}),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=n;

package/CarouselSection-CLso38c7.mjs

@@ -0,0 +1,159 @@
+import { jsxs as a, Fragment as n, jsx as e } from "react/jsx-runtime";
+import { T as s, C as l, a as o, w as r, B as c, c as p } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const b = () => {
+  const t = [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "h-64 w-full bg-gradient-to-br from-brand to-sky-500 rounded-lg flex items-center justify-center text-white text-2xl",
+        children: "Slide 1"
+      },
+      "1"
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "h-64 w-full bg-gradient-to-br from-brand to-green-500 rounded-lg flex items-center justify-center text-white text-2xl",
+        children: "Slide 2"
+      },
+      "2"
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "h-64 w-full bg-gradient-to-br from-brand to-purple-500 rounded-lg flex items-center justify-center text-white text-2xl",
+        children: "Slide 3"
+      },
+      "3"
+    )
+  ];
+  return /* @__PURE__ */ a(n, { 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: "Carousel" }),
+      /* @__PURE__ */ e(
+        s,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "A powerful carousel component built on Swiper.js with support for navigation, pagination, autoplay, and various effects."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ a(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Basic Carousel" }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(r, { children: t }) })
+      ] }),
+      /* @__PURE__ */ a(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "With Navigation" }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(r, { showNavigation: !0, children: t }) })
+      ] }),
+      /* @__PURE__ */ a(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "With Pagination" }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(r, { showPagination: !0, children: t }) })
+      ] }),
+      /* @__PURE__ */ a(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Multiple Slides" }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(r, { slidesPerView: 2, spaceBetween: 20, children: t }) })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(c, { columns: [
+      {
+        key: "prop",
+        label: "Prop",
+        render: (i) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(i) })
+      },
+      {
+        key: "type",
+        label: "Type",
+        render: (i) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(i) })
+      },
+      {
+        key: "default",
+        label: "Default",
+        render: (i) => {
+          const d = String(i);
+          return d === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: d });
+        }
+      },
+      {
+        key: "description",
+        label: "Description"
+      }
+    ], data: [
+      {
+        prop: "children",
+        type: "React.ReactNode[]",
+        default: "required",
+        description: "Array of slide elements"
+      },
+      {
+        prop: "slidesPerView",
+        type: 'number | "auto"',
+        default: "1",
+        description: "Number of slides visible at once"
+      },
+      {
+        prop: "spaceBetween",
+        type: "number",
+        default: "0",
+        description: "Space between slides in pixels"
+      },
+      {
+        prop: "showNavigation",
+        type: "boolean",
+        default: "false",
+        description: "Show navigation arrows"
+      },
+      {
+        prop: "showPagination",
+        type: "boolean",
+        default: "false",
+        description: "Show pagination dots"
+      },
+      {
+        prop: "autoplay",
+        type: "boolean | { delay: number }",
+        default: "false",
+        description: "Enable autoplay"
+      }
+    ] }) }) }) }),
+    /* @__PURE__ */ e(l, { 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 { Carousel } from '@e-burgos/tucu-ui';
+
+const slides = [
+  <div key="1">Slide 1</div>,
+  <div key="2">Slide 2</div>,
+  <div key="3">Slide 3</div>,
+];
+
+// Basic usage
+<Carousel>{slides}</Carousel>
+
+// With navigation
+<Carousel showNavigation>{slides}</Carousel>
+
+// With pagination
+<Carousel showPagination>{slides}</Carousel>
+
+// Multiple slides per view
+<Carousel slidesPerView={2} spaceBetween={20}>
+  {slides}
+</Carousel>
+
+// With autoplay
+<Carousel autoplay={{ delay: 3000 }}>{slides}</Carousel>`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  b as default
+};

package/CarouselSection-DrLjfsDL.js

@@ -0,0 +1,24 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const l=[e.jsx("div",{className:"h-64 w-full bg-gradient-to-br from-brand to-sky-500 rounded-lg flex items-center justify-center text-white text-2xl",children:"Slide 1"},"1"),e.jsx("div",{className:"h-64 w-full bg-gradient-to-br from-brand to-green-500 rounded-lg flex items-center justify-center text-white text-2xl",children:"Slide 2"},"2"),e.jsx("div",{className:"h-64 w-full bg-gradient-to-br from-brand to-purple-500 rounded-lg flex items-center justify-center text-white text-2xl",children:"Slide 3"},"3")],r=[{key:"prop",label:"Prop",render:a=>e.jsx("code",{className:"text-xs text-brand",children:String(a)})},{key:"type",label:"Type",render:a=>e.jsx("code",{className:"text-xs",children:String(a)})},{key:"default",label:"Default",render:a=>{const i=String(a);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"}],t=[{prop:"children",type:"React.ReactNode[]",default:"required",description:"Array of slide elements"},{prop:"slidesPerView",type:'number | "auto"',default:"1",description:"Number of slides visible at once"},{prop:"spaceBetween",type:"number",default:"0",description:"Space between slides in pixels"},{prop:"showNavigation",type:"boolean",default:"false",description:"Show navigation arrows"},{prop:"showPagination",type:"boolean",default:"false",description:"Show pagination dots"},{prop:"autoplay",type:"boolean | { delay: number }",default:"false",description:"Enable autoplay"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Carousel"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A powerful carousel component built on Swiper.js with support for navigation, pagination, autoplay, and various effects."})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.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(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Basic Carousel"}),e.jsx("div",{className:"w-full",children:e.jsx(s.Carousel,{children:l})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Navigation"}),e.jsx("div",{className:"w-full",children:e.jsx(s.Carousel,{showNavigation:!0,children:l})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Pagination"}),e.jsx("div",{className:"w-full",children:e.jsx(s.Carousel,{showPagination:!0,children:l})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Multiple Slides"}),e.jsx("div",{className:"w-full",children:e.jsx(s.Carousel,{slidesPerView:2,spaceBetween:20,children:l})})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.BasicTable,{columns:r,data:t})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{language:"tsx",code:`import { Carousel } from '@e-burgos/tucu-ui';
+
+const slides = [
+  <div key="1">Slide 1</div>,
+  <div key="2">Slide 2</div>,
+  <div key="3">Slide 3</div>,
+];
+
+// Basic usage
+<Carousel>{slides}</Carousel>
+
+// With navigation
+<Carousel showNavigation>{slides}</Carousel>
+
+// With pagination
+<Carousel showPagination>{slides}</Carousel>
+
+// Multiple slides per view
+<Carousel slidesPerView={2} spaceBetween={20}>
+  {slides}
+</Carousel>
+
+// With autoplay
+<Carousel autoplay={{ delay: 3000 }}>{slides}</Carousel>`})})})})]})};exports.default=n;