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-sdOMz8GW.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
};
