@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/IconSizingGuideSection-CF9itTi0.js

@@ -1,69 +0,0 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { C as l, a as r, T as i, J as n } from "../index-D3gBsvbO.js";
-import { Ruler as c, Star as d } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const N = () => /* @__PURE__ */ e("div", { className: "space-y-8", children: /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Icon Sizing Guide", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
-  /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-    /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-blue-500 via-indigo-500 to-purple-500 shadow-lg", children: /* @__PURE__ */ e(c, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
-    /* @__PURE__ */ e(i, { tag: "h3", className: "text-xl font-semibold", children: "Standard Icon Sizes" })
-  ] }),
-  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-6", children: [
-    {
-      name: "XS",
-      size: "w-3 h-3",
-      pixels: "12px",
-      use: "Inline text"
-    },
-    {
-      name: "SM",
-      size: "w-4 h-4",
-      pixels: "16px",
-      use: "Small buttons"
-    },
-    {
-      name: "MD",
-      size: "w-6 h-6",
-      pixels: "24px",
-      use: "Default size"
-    },
-    {
-      name: "LG",
-      size: "w-8 h-8",
-      pixels: "32px",
-      use: "Large buttons"
-    },
-    {
-      name: "XL",
-      size: "w-12 h-12",
-      pixels: "48px",
-      use: "Feature icons"
-    }
-  ].map((s, t) => /* @__PURE__ */ a("div", { className: "text-center space-y-3", children: [
-    /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(d, { className: `${s.size} text-brand` }) }),
-    /* @__PURE__ */ a("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ e(i, { tag: "h4", className: "font-semibold text-sm", children: s.name }),
-      /* @__PURE__ */ e(
-        i,
-        {
-          tag: "p",
-          className: "text-xs text-gray-500 dark:text-gray-400",
-          children: s.pixels
-        }
-      ),
-      /* @__PURE__ */ e(
-        i,
-        {
-          tag: "p",
-          className: "text-xs text-gray-600 dark:text-gray-400",
-          children: s.use
-        }
-      ),
-      /* @__PURE__ */ e(n, { variant: "outline", className: "text-xs font-mono", children: s.size })
-    ] })
-  ] }, t)) })
-] }) }) }) });
-export {
-  N as default
-};

package/documentation/IconSizingGuideSection-vD6v4fMa.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-VrMogvDN.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>{const t=[{name:"XS",size:"w-3 h-3",pixels:"12px",use:"Inline text"},{name:"SM",size:"w-4 h-4",pixels:"16px",use:"Small buttons"},{name:"MD",size:"w-6 h-6",pixels:"24px",use:"Default size"},{name:"LG",size:"w-8 h-8",pixels:"32px",use:"Large buttons"},{name:"XL",size:"w-12 h-12",pixels:"48px",use:"Feature icons"}];return e.jsx("div",{className:"space-y-8",children:e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Icon Sizing Guide",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-blue-500 via-indigo-500 to-purple-500 shadow-lg",children:e.jsx(i.Ruler,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Standard Icon Sizes"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-6",children:t.map((a,l)=>e.jsxs("div",{className:"text-center space-y-3",children:[e.jsx("div",{className:"flex justify-center",children:e.jsx(i.Star,{className:`${a.size} text-brand`})}),e.jsxs("div",{className:"space-y-1",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold text-sm",children:a.name}),e.jsx(s.Typography,{tag:"p",className:"text-xs text-gray-500 dark:text-gray-400",children:a.pixels}),e.jsx(s.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400",children:a.use}),e.jsx(s.Badge,{variant:"outline",className:"text-xs font-mono",children:a.size})]})]},l))})]})})})})};exports.default=r;

package/documentation/IconSystemAPISection-BSOV3etR.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-VrMogvDN.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const s=[{prop:"LucideIcons",type:"Namespace",default:"-",description:"Access to 5000+ Lucide React icons through dot notation (e.g., LucideIcons.Home)"},{prop:"Custom Icons",type:"Named Exports",default:"-",description:'98+ custom icons available as named exports (e.g., import { Bitcoin, HomeIcon } from "@e-burgos/tucu-ui")'},{prop:"className",type:"string",default:"-",description:"Tailwind CSS classes for styling (size, color, etc.). Use w-* h-* for sizing."},{prop:"fill",type:"string",default:"currentColor",description:"SVG fill color. Defaults to currentColor for theme integration."},{prop:"stroke",type:"string",default:"currentColor",description:"SVG stroke color for Lucide icons. Defaults to currentColor."}],o=[{key:"prop",label:"Prop",render:r=>e.jsx("code",{className:"text-xs text-brand",children:String(r)})},{key:"type",label:"Type",render:r=>e.jsx("code",{className:"text-xs",children:String(r)})},{key:"default",label:"Default",render:r=>r==="-"?e.jsx("span",{className:"text-gray-400",children:"-"}):e.jsx("code",{className:"text-xs",children:String(r)})},{key:"description",label:"Description"}];return e.jsx("div",{className:"space-y-8",children:e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Icon System API",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:o,data:s})})})})})};exports.default=i;

package/documentation/IconSystemAPISection-D6eLCOaG.js

@@ -1,61 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { C as t, a as r, q as s } from "../index-D3gBsvbO.js";
-import "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const u = () => /* @__PURE__ */ e("div", { className: "space-y-8", children: /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Icon System API", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(s, { 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) => o === "-" ? /* @__PURE__ */ e("span", { className: "text-gray-400", children: "-" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: String(o) })
-  },
-  {
-    key: "description",
-    label: "Description"
-  }
-], data: [
-  {
-    prop: "LucideIcons",
-    type: "Namespace",
-    default: "-",
-    description: "Access to 5000+ Lucide React icons through dot notation (e.g., LucideIcons.Home)"
-  },
-  {
-    prop: "Custom Icons",
-    type: "Named Exports",
-    default: "-",
-    description: '98+ custom icons available as named exports (e.g., import { Bitcoin, HomeIcon } from "@e-burgos/tucu-ui")'
-  },
-  {
-    prop: "className",
-    type: "string",
-    default: "-",
-    description: "Tailwind CSS classes for styling (size, color, etc.). Use w-* h-* for sizing."
-  },
-  {
-    prop: "fill",
-    type: "string",
-    default: "currentColor",
-    description: "SVG fill color. Defaults to currentColor for theme integration."
-  },
-  {
-    prop: "stroke",
-    type: "string",
-    default: "currentColor",
-    description: "SVG stroke color for Lucide icons. Defaults to currentColor."
-  }
-] }) }) }) }) });
-export {
-  u as default
-};

package/documentation/IconSystemBenefitsSection-CLjshxlO.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-VrMogvDN.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(t.Alert,{children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Lightbulb,{className:"w-5 h-5 text-yellow-500"}),e.jsx(t.Typography,{tag:"h6",className:"font-semibold",children:"Icon System Benefits"})]}),e.jsxs("ul",{className:"space-y-2 text-sm",children:[e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 mt-0.5"}),e.jsx("span",{children:"Single namespace import for all Lucide icons (5000+ icons)"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 mt-0.5"}),e.jsx("span",{children:"Automatic tree-shaking for optimal bundle size"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 mt-0.5"}),e.jsx("span",{children:"TypeScript support with full icon name completion for both systems"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 mt-0.5"}),e.jsx("span",{children:"Seamless integration with Tailwind CSS utilities"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 mt-0.5"}),e.jsx("span",{children:"98+ theme-aware custom icons with brand consistency"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 mt-0.5"}),e.jsx("span",{children:"Unified API for both custom and Lucide icons for easy migration"})]})]})]})})});exports.default=i;

package/documentation/IconSystemBenefitsSection-Cv_9L1Kq.js

@@ -1,41 +0,0 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { ag as a, T as i } from "../index-D3gBsvbO.js";
-import { Lightbulb as l, Check as t } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const p = () => /* @__PURE__ */ e("div", { className: "space-y-8", children: /* @__PURE__ */ e(a, { children: /* @__PURE__ */ s("div", { className: "space-y-4", children: [
-  /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ e(l, { className: "w-5 h-5 text-yellow-500" }),
-    /* @__PURE__ */ e(i, { tag: "h6", className: "font-semibold", children: "Icon System Benefits" })
-  ] }),
-  /* @__PURE__ */ s("ul", { className: "space-y-2 text-sm", children: [
-    /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ e(t, { className: "w-4 h-4 text-green-500 mt-0.5" }),
-      /* @__PURE__ */ e("span", { children: "Single namespace import for all Lucide icons (5000+ icons)" })
-    ] }),
-    /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ e(t, { className: "w-4 h-4 text-green-500 mt-0.5" }),
-      /* @__PURE__ */ e("span", { children: "Automatic tree-shaking for optimal bundle size" })
-    ] }),
-    /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ e(t, { className: "w-4 h-4 text-green-500 mt-0.5" }),
-      /* @__PURE__ */ e("span", { children: "TypeScript support with full icon name completion for both systems" })
-    ] }),
-    /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ e(t, { className: "w-4 h-4 text-green-500 mt-0.5" }),
-      /* @__PURE__ */ e("span", { children: "Seamless integration with Tailwind CSS utilities" })
-    ] }),
-    /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ e(t, { className: "w-4 h-4 text-green-500 mt-0.5" }),
-      /* @__PURE__ */ e("span", { children: "98+ theme-aware custom icons with brand consistency" })
-    ] }),
-    /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ e(t, { className: "w-4 h-4 text-green-500 mt-0.5" }),
-      /* @__PURE__ */ e("span", { children: "Unified API for both custom and Lucide icons for easy migration" })
-    ] })
-  ] })
-] }) }) });
-export {
-  p as default
-};

package/documentation/ImageSection-CKKC4aJN.js

@@ -1,80 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-VrMogvDN.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>a.jsxs(a.Fragment,{children:[a.jsxs("div",{className:"text-center space-y-4",children:[a.jsx(e.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Image"}),a.jsx(e.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A powerful image component inspired by Next.js Image, featuring lazy loading, blur placeholders, error handling, and automatic optimization."})]}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Basic Usage",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Standard Image"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Basic usage with width and height."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=400&h=300&fit=crop",alt:"Mountain landscape",width:400,height:300,className:"rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"With Lazy Loading"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Automatic lazy loading with smooth fade-in."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop",alt:"Mountain peaks",width:400,height:300,loading:"lazy",className:"rounded-lg"})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Object Fit Modes",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Cover (Default)"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Fills container, may crop image."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=300&h=200&fit=crop",alt:"Nature landscape cover",width:300,height:200,objectFit:"cover",className:"rounded-lg border-2 border-gray-200 dark:border-gray-700"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Contain"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Fits entirely, may have empty space."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=300&h=200&fit=crop",alt:"Nature landscape contain",width:300,height:200,objectFit:"contain",containerClassName:"bg-gray-100 dark:bg-gray-800",className:"rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Fill"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Stretches to fill container."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=300&h=200&fit=crop",alt:"Nature landscape fill",width:300,height:200,objectFit:"fill",className:"rounded-lg border-2 border-gray-200 dark:border-gray-700"})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Aspect Ratios",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"16:9 (Video)"}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=400&h=300&fit=crop",alt:"Beach sunset 16:9",aspectRatio:"16/9",fill:!0,containerClassName:"w-full rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"4:3 (Classic)"}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=400&h=300&fit=crop",alt:"Forest path 4:3",aspectRatio:"4/3",fill:!0,containerClassName:"w-full rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"1:1 (Square)"}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1511884642898-4c92249e20b6?w=300&h=300&fit=crop",alt:"City skyline 1:1",aspectRatio:"1/1",fill:!0,containerClassName:"w-full rounded-lg"})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Placeholder Types",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Blur Placeholder"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Shows animated blur effect while loading."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=400&h=300&fit=crop",alt:"Mountain with blur placeholder",width:400,height:300,placeholder:"blur",className:"rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Empty Placeholder"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Shows spinner while loading."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop",alt:"Mountains with empty placeholder",width:400,height:300,placeholder:"empty",className:"rounded-lg"})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Error Handling",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Invalid Image (Fallback)"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Automatically shows fallback on error."}),a.jsx(e.Image,{src:"https://invalid-url-that-will-fail.com/image.jpg",alt:"Image with fallback",width:400,height:300,className:"rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Custom Fallback"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Provide your own fallback image."}),a.jsx(e.Image,{src:"https://invalid-url.com/image.jpg",alt:"Custom fallback",width:400,height:300,fallbackSrc:"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop",className:"rounded-lg"})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Responsive Images",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Full Width Responsive"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Image fills container width with maintained aspect ratio."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=400&fit=crop",alt:"Responsive landscape",aspectRatio:"21/9",fill:!0,containerClassName:"w-full rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Grid Responsive Images"}),a.jsx("div",{className:"grid grid-cols-2 md:grid-cols-4 gap-4",children:["photo-1682687220742-aba13b6e50ba","photo-1506905925346-21bda4d32df4","photo-1501594907352-04cda38ebc29","photo-1472214103451-9374bd1c798e"].map((s,l)=>a.jsx(e.Image,{src:`https://images.unsplash.com/${s}?w=300&h=300&fit=crop`,alt:`Gallery image ${l+1}`,aspectRatio:"1/1",fill:!0,containerClassName:"w-full rounded-lg"},s))})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Key Features",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsxs(e.Typography,{tag:"h5",className:"mb-2",children:[a.jsx("span",{role:"img","aria-label":"rocket",children:"🚀"})," ","Lazy Loading"]}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Native browser lazy loading for better performance and faster page loads."})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsxs(e.Typography,{tag:"h5",className:"mb-2",children:[a.jsx("span",{role:"img","aria-label":"sparkles",children:"✨"})," ","Smooth Transitions"]}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Beautiful fade-in animations and blur effects for a polished loading experience."})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsxs(e.Typography,{tag:"h5",className:"mb-2",children:[a.jsx("span",{role:"img","aria-label":"shield",children:"🛡️"})," ","Error Handling"]}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Automatic fallback images and error states with user-friendly messaging."})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsxs(e.Typography,{tag:"h5",className:"mb-2",children:[a.jsx("span",{role:"img","aria-label":"art",children:"🎨"})," ","Aspect Ratios"]}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"CSS aspect-ratio support for consistent layouts without layout shift."})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsxs(e.Typography,{tag:"h5",className:"mb-2",children:[a.jsx("span",{role:"img","aria-label":"mobile",children:"📱"})," ","Responsive"]}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Fully responsive with flexible sizing options and fill mode support."})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsxs(e.Typography,{tag:"h5",className:"mb-2",children:[a.jsx("span",{role:"img","aria-label":"accessibility",children:"♿"})," ","Accessible"]}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Required alt text and proper ARIA labels for screen readers."})]})]})})})}),a.jsx(e.PropPlayground,{componentName:"Image",defaultValues:{src:"https://picsum.photos/400/300",alt:"Sample image",objectFit:"cover",loading:"lazy",placeholder:"empty",fill:!1,priority:"auto",width:"400",height:"300",aspectRatio:"16/9"},excludeProps:[],children:s=>a.jsx(e.Image,{...s})}),a.jsx(e.AutoPropsTable,{componentName:"Image"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.CodeBlock,{language:"tsx",code:`import { Image } from '@e-burgos/tucu-ui';
-
-// Basic usage
-<Image
-  src="/path/to/image.jpg"
-  alt="Description"
-  width={400}
-  height={300}
-/>
-
-// With lazy loading and blur placeholder
-<Image
-  src="/landscape.jpg"
-  alt="Mountain landscape"
-  width={800}
-  height={600}
-  loading="lazy"
-  placeholder="blur"
-  className="rounded-lg"
-/>
-
-// Responsive with aspect ratio
-<Image
-  src="/hero.jpg"
-  alt="Hero image"
-  aspectRatio="16/9"
-  fill
-  containerClassName="w-full rounded-xl"
-/>
-
-// Different object-fit modes
-<Image src={src} alt="Cover" objectFit="cover" />
-<Image src={src} alt="Contain" objectFit="contain" />
-<Image src={src} alt="Fill" objectFit="fill" />
-
-// With error handling
-<Image
-  src="/image.jpg"
-  alt="Image with fallback"
-  width={400}
-  height={300}
-  fallbackSrc="/fallback.jpg"
-  onError={() => console.log('Failed to load')}
-  onLoad={() => console.log('Loaded successfully')}
-/>
-
-// Fill parent container (like Next.js)
-<div className="relative w-full h-64">
-  <Image
-    src="/banner.jpg"
-    alt="Banner"
-    fill
-    objectFit="cover"
-  />
-</div>
-
-// With priority loading (above the fold)
-<Image
-  src="/hero.jpg"
-  alt="Hero"
-  width={1200}
-  height={600}
-  loading="eager"
-  priority="high"
-  placeholder="blur"
-/>
-
-// Grid of images
-<div className="grid grid-cols-3 gap-4">
-  {images.map((img) => (
-    <Image
-      key={img.id}
-      src={img.url}
-      alt={img.alt}
-      aspectRatio="1/1"
-      fill
-      containerClassName="w-full rounded-lg"
-    />
-  ))}
-</div>`})})})})]});exports.default=r;

package/documentation/ImplementationExamplesSection-BKfCgO3N.js

@@ -1,178 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../index-VrMogvDN.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=()=>e.jsx(e.Fragment,{children:e.jsx(o.CardContainer,{className:"overflow-hidden",children:e.jsx(o.CardTitle,{title:"Implementation Examples",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-gradient-to-br from-indigo-500 via-purple-500 to-violet-500 shadow-md",children:e.jsx(t.Code,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(o.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Basic Usage"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-3",children:[e.jsx(o.Typography,{tag:"h4",className:"font-semibold",children:"1. Automatic Routing with menuItems"}),e.jsxs(o.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["ThemeProvider automatically generates routes from menuItems. Each menu item with a ",e.jsx("code",{children:"component"})," prop becomes a route."]}),e.jsx(o.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS, LucideIcons } from '@ui/tucu-ui';
-import { Dashboard } from './pages/Dashboard';
-import { Settings } from './pages/Settings';
-import { Profile } from './pages/Profile';
-
-// Menu items with components - routes are generated automatically
-// Note: Use 'path' for internal routing, 'href' for external links
-const menuItems = [
-  {
-    name: 'Dashboard',
-    path: '/', // Internal route path
-    icon: <LucideIcons.Home />,
-    component: <Dashboard />, // This becomes a route
-  },
-  {
-    name: 'Settings',
-    path: '/settings', // Internal route path
-    icon: <LucideIcons.Settings />,
-    component: <Settings />, // This becomes a route
-  },
-  {
-    name: 'Profile',
-    path: '/profile', // Internal route path
-    icon: <LucideIcons.User />,
-    component: <Profile />, // This becomes a route
-  },
-];
-
-function App() {
-  return (
-    <ThemeProvider
-      menuItems={menuItems}
-      layout={LAYOUT_OPTIONS.ADMIN}
-      logo={{ path: '/', name: 'My App' }}
-    />
-    {/* No children needed - routing is handled automatically */}
-  );
-}
-
-// Routes are automatically created:
-// / -> Dashboard component
-// /settings -> Settings component
-// /profile -> Profile component`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(o.Typography,{tag:"h4",className:"font-semibold",children:"2. Landing Page (No Routing)"}),e.jsxs(o.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["For landing pages or single-page applications without routing, use ",e.jsx("code",{children:"customRoutes"})," with a single route."]}),e.jsx(o.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@ui/tucu-ui';
-import { LandingPage } from './pages/LandingPage';
-
-function App() {
-  return (
-    <ThemeProvider
-      menuItems={[]} // Empty - no navigation needed for landing page
-      layout={LAYOUT_OPTIONS.CLEAN} // Clean layout for landing pages
-      logo={{ path: '/', name: 'My Brand' }}
-      customRoutes={
-        <Routes>
-          <Route path="*" element={<LandingPage />} />
-        </Routes>
-      }
-    />
-  );
-}
-
-// The customRoutes prop overrides automatic routing
-// BrowserRouter is already included in ThemeProvider
-// No need to import or wrap with BrowserRouter`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(o.Typography,{tag:"h4",className:"font-semibold",children:"3. Custom Routing with customRoutes"}),e.jsxs(o.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["For complex routing scenarios, provide your own"," ",e.jsx("code",{children:"<Routes>"})," component via"," ",e.jsx("code",{children:"customRoutes"})," prop."]}),e.jsx(o.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@ui/tucu-ui';
-import { BrowserRouter } from 'react-router-dom'; // Already included in ThemeProvider
-import { Home } from './pages/Home';
-import { About } from './pages/About';
-import { Contact } from './pages/Contact';
-import { NotFound } from './pages/NotFound';
-
-function App() {
-  // Menu items for navigation (optional - can be empty if using customRoutes)
-  // Note: 'path' is used for internal routing, 'href' would be for external links
-  const menuItems = [
-    {
-      name: 'Home',
-      path: '/', // Internal route path
-      icon: <LucideIcons.Home />,
-    },
-    {
-      name: 'About',
-      path: '/about', // Internal route path
-      icon: <LucideIcons.Info />,
-    },
-    {
-      name: 'Contact',
-      path: '/contact', // Internal route path
-      icon: <LucideIcons.Mail />,
-    },
-  ];
-
-  return (
-    <ThemeProvider
-      menuItems={menuItems} // For navigation menu
-      layout={LAYOUT_OPTIONS.HORIZONTAL}
-      logo={{ path: '/', name: 'My App' }}
-      customRoutes={
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/about" element={<About />} />
-          <Route path="/contact" element={<Contact />} />
-          <Route path="*" element={<NotFound />} />
-        </Routes>
-      }
-    />
-  );
-}
-
-// Note: BrowserRouter is already included in ThemeProvider,
-// so you don't need to wrap it again`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(o.Typography,{tag:"h4",className:"font-semibold",children:"4. Using Theme Hooks"}),e.jsx(o.CodeBlock,{language:"tsx",code:`import { useTheme, LAYOUT_OPTIONS } from '@ui/tucu-ui';
-
-function ThemeControls() {
-  const { 
-    mode, 
-    setMode, 
-    layout, 
-    setLayout,
-    primaryPreset,
-    setPrimaryPreset 
-  } = useTheme();
-  
-  return (
-    <div className="space-y-4">
-      <button 
-        onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
-      >
-        Toggle Theme: {mode}
-      </button>
-      
-      <select 
-        value={layout} 
-        onChange={(e) => setLayout(e.target.value as any)}
-      >
-        <option value={LAYOUT_OPTIONS.CLEAN}>Clean</option>
-        <option value={LAYOUT_OPTIONS.ADMIN}>Admin</option>
-        <option value={LAYOUT_OPTIONS.HORIZONTAL}>Horizontal</option>
-      </select>
-      
-      <div>
-        Current Primary Color: {primaryPreset?.label}
-      </div>
-    </div>
-  );
-}
-
-// Usage with ThemeProvider
-function App() {
-  const menuItems = [
-    { 
-      name: 'Theme Controls', 
-      href: '/theme-controls',
-      component: <ThemeControls />
-    }
-  ];
-
-  return <ThemeProvider menuItems={menuItems} />;
-}`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(o.Typography,{tag:"h4",className:"font-semibold",children:"5. Layout-Specific Configuration"}),e.jsx(o.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS } from '@ui/tucu-ui';
-
-function App() {
-  const menuItems = [
-    { name: 'Home', href: '/', icon: <LucideIcons.Home /> },
-    { name: 'About', href: '/about', icon: <LucideIcons.Info /> },
-  ];
-
-  return (
-    <ThemeProvider
-      menuItems={menuItems}
-      layout={LAYOUT_OPTIONS.ADMIN}
-      logo={{ path: '/', name: 'My App' }}
-      rightButton={<SettingsButton />}
-      fullWidth={false} // Set to true for full-width content
-      className="custom-layout-class"
-      headerClassName="custom-header-class"
-      contentClassName="custom-content-class"
-    >
-      <YourAppContent />
-    </ThemeProvider>
-  );
-}`})]})]})]})})})});exports.default=a;