import { jsxs as s, Fragment as d, jsx as a } from "react/jsx-runtime";
import { H as c, C as i, a as t, T as l, X as e, P as o, A as n, c as g } from "../index-sdOMz8GW.js";
import { CircleUser as h } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
import { a as r } from "../1-Df9CGZha.js";
const b = () => /* @__PURE__ */ s(d, { children: [
  /* @__PURE__ */ a(
    c,
    {
      title: "Avatar",
      description: `A versatile avatar component for displaying user profile images with
          multiple sizes and shapes.`,
      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-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ a(h, { 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(i, { className: "overflow-hidden", children: /* @__PURE__ */ a(t, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
    /* @__PURE__ */ s(i, { className: "p-4", children: [
      /* @__PURE__ */ a(l, { tag: "h5", className: "mb-3", children: "Default Avatar" }),
      /* @__PURE__ */ a(e, { image: r, alt: "User avatar" })
    ] }),
    /* @__PURE__ */ s(i, { className: "p-4", children: [
      /* @__PURE__ */ a(l, { tag: "h5", className: "mb-3", children: "Without Border" }),
      /* @__PURE__ */ a(e, { image: r, alt: "User avatar", border: !1 })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ a(i, { className: "overflow-hidden", children: /* @__PURE__ */ a(t, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ s("div", { className: "space-y-6", children: [
    /* @__PURE__ */ s("div", { children: [
      /* @__PURE__ */ a(l, { tag: "h5", className: "mb-3", children: "Sizes" }),
      /* @__PURE__ */ s("div", { className: "flex items-center gap-4", children: [
        /* @__PURE__ */ a(e, { image: r, alt: "XS", size: "xs" }),
        /* @__PURE__ */ a(e, { image: r, alt: "SM", size: "sm" }),
        /* @__PURE__ */ a(e, { image: r, alt: "MD", size: "md" }),
        /* @__PURE__ */ a(e, { image: r, alt: "LG", size: "lg" }),
        /* @__PURE__ */ a(e, { image: r, alt: "XL", size: "xl" })
      ] })
    ] }),
    /* @__PURE__ */ s("div", { children: [
      /* @__PURE__ */ a(l, { tag: "h5", className: "mb-3", children: "Shapes" }),
      /* @__PURE__ */ s("div", { className: "flex items-center gap-4", children: [
        /* @__PURE__ */ a(e, { image: r, alt: "Circle", shape: "circle" }),
        /* @__PURE__ */ a(e, { image: r, alt: "Rounded", shape: "rounded" })
      ] })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ a(
    o,
    {
      componentName: "Avatar",
      defaultValues: {
        size: "md",
        shape: "circle",
        border: !0,
        image: "https://randomuser.me/api/portraits/men/1.jpg",
        alt: "Avatar"
      },
      children: (m) => /* @__PURE__ */ a(e, { ...m })
    }
  ),
  /* @__PURE__ */ a(n, { componentName: "Avatar" }),
  /* @__PURE__ */ a(i, { className: "overflow-hidden", children: /* @__PURE__ */ a(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
    g,
    {
      language: "tsx",
      code: `import { Avatar } from '@e-burgos/tucu-ui';

// Basic usage
<Avatar image="/path/to/image.jpg" alt="User name" />

// Different sizes
<Avatar image={image} alt="User" size="xs" />
<Avatar image={image} alt="User" size="sm" />
<Avatar image={image} alt="User" size="md" />
<Avatar image={image} alt="User" size="lg" />
<Avatar image={image} alt="User" size="xl" />

// Different shapes
<Avatar image={image} alt="User" shape="circle" />
<Avatar image={image} alt="User" shape="rounded" />

// Without border
<Avatar image={image} alt="User" border={false} />`
    }
  ) }) }) })
] });
export {
  b as default
};
