@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/ImageSection-B0T3q65-.js

@@ -1,508 +0,0 @@
-import { jsxs as l, Fragment as d, jsx as a } from "react/jsx-runtime";
-import { H as o, C as s, a as i, T as e, aw as t, P as m, A as n, c as h } from "../index-BOVWnu1L.js";
-import { ImageIcon as g } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const y = () => /* @__PURE__ */ l(d, { children: [
-  /* @__PURE__ */ a(
-    o,
-    {
-      title: "Image",
-      description: `A powerful image component inspired by Next.js Image, featuring lazy
-          loading, blur placeholders, error handling, and automatic
-          optimization.`,
-      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-sky-600 to-blue-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ a(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__ */ a(s, { className: "overflow-hidden", children: /* @__PURE__ */ a(i, { title: "Basic Usage", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-    /* @__PURE__ */ l("div", { children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Standard Image" }),
-      /* @__PURE__ */ a(
-        e,
-        {
-          tag: "p",
-          className: "text-sm text-gray-600 dark:text-gray-400 mb-3",
-          children: "Basic usage with width and height."
-        }
-      ),
-      /* @__PURE__ */ a(
-        t,
-        {
-          src: "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=400&h=300&fit=crop",
-          alt: "Mountain landscape",
-          width: 400,
-          height: 300,
-          className: "rounded-lg"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ l("div", { children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "With Lazy Loading" }),
-      /* @__PURE__ */ a(
-        e,
-        {
-          tag: "p",
-          className: "text-sm text-gray-600 dark:text-gray-400 mb-3",
-          children: "Automatic lazy loading with smooth fade-in."
-        }
-      ),
-      /* @__PURE__ */ a(
-        t,
-        {
-          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"
-        }
-      )
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ a(s, { className: "overflow-hidden", children: /* @__PURE__ */ a(i, { title: "Object Fit Modes", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [
-    /* @__PURE__ */ l("div", { children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Cover (Default)" }),
-      /* @__PURE__ */ a(
-        e,
-        {
-          tag: "p",
-          className: "text-sm text-gray-600 dark:text-gray-400 mb-3",
-          children: "Fills container, may crop image."
-        }
-      ),
-      /* @__PURE__ */ a(
-        t,
-        {
-          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-border"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ l("div", { children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Contain" }),
-      /* @__PURE__ */ a(
-        e,
-        {
-          tag: "p",
-          className: "text-sm text-gray-600 dark:text-gray-400 mb-3",
-          children: "Fits entirely, may have empty space."
-        }
-      ),
-      /* @__PURE__ */ a(
-        t,
-        {
-          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"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ l("div", { children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Fill" }),
-      /* @__PURE__ */ a(
-        e,
-        {
-          tag: "p",
-          className: "text-sm text-gray-600 dark:text-gray-400 mb-3",
-          children: "Stretches to fill container."
-        }
-      ),
-      /* @__PURE__ */ a(
-        t,
-        {
-          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-border"
-        }
-      )
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ a(s, { className: "overflow-hidden", children: /* @__PURE__ */ a(i, { title: "Aspect Ratios", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [
-    /* @__PURE__ */ l("div", { children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "16:9 (Video)" }),
-      /* @__PURE__ */ a(
-        t,
-        {
-          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"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ l("div", { children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "4:3 (Classic)" }),
-      /* @__PURE__ */ a(
-        t,
-        {
-          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"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ l("div", { children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "1:1 (Square)" }),
-      /* @__PURE__ */ a(
-        t,
-        {
-          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"
-        }
-      )
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ a(s, { className: "overflow-hidden", children: /* @__PURE__ */ a(i, { title: "Placeholder Types", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-    /* @__PURE__ */ l("div", { children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Blur Placeholder" }),
-      /* @__PURE__ */ a(
-        e,
-        {
-          tag: "p",
-          className: "text-sm text-gray-600 dark:text-gray-400 mb-3",
-          children: "Shows animated blur effect while loading."
-        }
-      ),
-      /* @__PURE__ */ a(
-        t,
-        {
-          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"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ l("div", { children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Empty Placeholder" }),
-      /* @__PURE__ */ a(
-        e,
-        {
-          tag: "p",
-          className: "text-sm text-gray-600 dark:text-gray-400 mb-3",
-          children: "Shows spinner while loading."
-        }
-      ),
-      /* @__PURE__ */ a(
-        t,
-        {
-          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"
-        }
-      )
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ a(s, { className: "overflow-hidden", children: /* @__PURE__ */ a(i, { title: "Error Handling", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-    /* @__PURE__ */ l("div", { children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Invalid Image (Fallback)" }),
-      /* @__PURE__ */ a(
-        e,
-        {
-          tag: "p",
-          className: "text-sm text-gray-600 dark:text-gray-400 mb-3",
-          children: "Automatically shows fallback on error."
-        }
-      ),
-      /* @__PURE__ */ a(
-        t,
-        {
-          src: "https://invalid-url-that-will-fail.com/image.jpg",
-          alt: "Image with fallback",
-          width: 400,
-          height: 300,
-          className: "rounded-lg"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ l("div", { children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Custom Fallback" }),
-      /* @__PURE__ */ a(
-        e,
-        {
-          tag: "p",
-          className: "text-sm text-gray-600 dark:text-gray-400 mb-3",
-          children: "Provide your own fallback image."
-        }
-      ),
-      /* @__PURE__ */ a(
-        t,
-        {
-          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"
-        }
-      )
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ a(s, { className: "overflow-hidden", children: /* @__PURE__ */ a(i, { title: "Responsive Images", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ l("div", { children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Full Width Responsive" }),
-      /* @__PURE__ */ a(
-        e,
-        {
-          tag: "p",
-          className: "text-sm text-gray-600 dark:text-gray-400 mb-3",
-          children: "Image fills container width with maintained aspect ratio."
-        }
-      ),
-      /* @__PURE__ */ a(
-        t,
-        {
-          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"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ l("div", { children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Grid Responsive Images" }),
-      /* @__PURE__ */ a("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((r, c) => /* @__PURE__ */ a(
-        t,
-        {
-          src: `https://images.unsplash.com/${r}?w=300&h=300&fit=crop`,
-          alt: `Gallery image ${c + 1}`,
-          aspectRatio: "1/1",
-          fill: !0,
-          containerClassName: "w-full rounded-lg"
-        },
-        r
-      )) })
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ a(s, { className: "overflow-hidden", children: /* @__PURE__ */ a(i, { title: "Key Features", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-    /* @__PURE__ */ l(s, { className: "p-4", children: [
-      /* @__PURE__ */ l(e, { tag: "h5", className: "mb-2", children: [
-        /* @__PURE__ */ a("span", { role: "img", "aria-label": "rocket", children: "🚀" }),
-        " ",
-        "Lazy Loading"
-      ] }),
-      /* @__PURE__ */ a(
-        e,
-        {
-          tag: "p",
-          className: "text-sm text-gray-600 dark:text-gray-400",
-          children: "Native browser lazy loading for better performance and faster page loads."
-        }
-      )
-    ] }),
-    /* @__PURE__ */ l(s, { className: "p-4", children: [
-      /* @__PURE__ */ l(e, { tag: "h5", className: "mb-2", children: [
-        /* @__PURE__ */ a("span", { role: "img", "aria-label": "sparkles", children: "✨" }),
-        " ",
-        "Smooth Transitions"
-      ] }),
-      /* @__PURE__ */ a(
-        e,
-        {
-          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."
-        }
-      )
-    ] }),
-    /* @__PURE__ */ l(s, { className: "p-4", children: [
-      /* @__PURE__ */ l(e, { tag: "h5", className: "mb-2", children: [
-        /* @__PURE__ */ a("span", { role: "img", "aria-label": "shield", children: "🛡️" }),
-        " ",
-        "Error Handling"
-      ] }),
-      /* @__PURE__ */ a(
-        e,
-        {
-          tag: "p",
-          className: "text-sm text-gray-600 dark:text-gray-400",
-          children: "Automatic fallback images and error states with user-friendly messaging."
-        }
-      )
-    ] }),
-    /* @__PURE__ */ l(s, { className: "p-4", children: [
-      /* @__PURE__ */ l(e, { tag: "h5", className: "mb-2", children: [
-        /* @__PURE__ */ a("span", { role: "img", "aria-label": "art", children: "🎨" }),
-        " ",
-        "Aspect Ratios"
-      ] }),
-      /* @__PURE__ */ a(
-        e,
-        {
-          tag: "p",
-          className: "text-sm text-gray-600 dark:text-gray-400",
-          children: "CSS aspect-ratio support for consistent layouts without layout shift."
-        }
-      )
-    ] }),
-    /* @__PURE__ */ l(s, { className: "p-4", children: [
-      /* @__PURE__ */ l(e, { tag: "h5", className: "mb-2", children: [
-        /* @__PURE__ */ a("span", { role: "img", "aria-label": "mobile", children: "📱" }),
-        " ",
-        "Responsive"
-      ] }),
-      /* @__PURE__ */ a(
-        e,
-        {
-          tag: "p",
-          className: "text-sm text-gray-600 dark:text-gray-400",
-          children: "Fully responsive with flexible sizing options and fill mode support."
-        }
-      )
-    ] }),
-    /* @__PURE__ */ l(s, { className: "p-4", children: [
-      /* @__PURE__ */ l(e, { tag: "h5", className: "mb-2", children: [
-        /* @__PURE__ */ a("span", { role: "img", "aria-label": "accessibility", children: "♿" }),
-        " ",
-        "Accessible"
-      ] }),
-      /* @__PURE__ */ a(
-        e,
-        {
-          tag: "p",
-          className: "text-sm text-gray-600 dark:text-gray-400",
-          children: "Required alt text and proper ARIA labels for screen readers."
-        }
-      )
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ a(
-    m,
-    {
-      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: (r) => /* @__PURE__ */ a(t, { ...r })
-    }
-  ),
-  /* @__PURE__ */ a(n, { componentName: "Image" }),
-  /* @__PURE__ */ a(s, { className: "overflow-hidden", children: /* @__PURE__ */ a(i, { title: "Code Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
-    h,
-    {
-      language: "tsx",
-      code: `import { 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>`
-    }
-  ) }) }) })
-] });
-export {
-  y as default
-};

package/documentation/ImageSection-CuWgPtlO.js

@@ -1,82 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-CQ1tqJiQ.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>a.jsxs(a.Fragment,{children:[a.jsx(e.HeroCard,{title:"Image",description:`A powerful image component inspired by Next.js Image, featuring lazy
-          loading, blur placeholders, error handling, and automatic
-          optimization.`,icon:a.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-sky-600 to-blue-500 rounded-full flex items-center justify-center shadow-lg",children:a.jsx(r.ImageIcon,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),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-border"})]}),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-border"})]})]})})})}),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=t;