import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
import { H as c, C as s, a as n, T as l, _ as i, P as d, A as h, c as r } from "../index-sdOMz8GW.js";
import { Square as o } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const w = () => /* @__PURE__ */ a(m, { children: [
  /* @__PURE__ */ e(
    c,
    {
      title: "Skeleton",
      description: `A skeleton loader component for displaying placeholder content while
          data is loading.`,
      icon: /* @__PURE__ */ e("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-green-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(o, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { 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-6", children: [
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Default Skeleton" }),
      /* @__PURE__ */ e(i, {})
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Text Lines" }),
      /* @__PURE__ */ e(i, { shape: "text", count: 3 })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Circle Shape" }),
      /* @__PURE__ */ a("div", { className: "flex gap-3", children: [
        /* @__PURE__ */ e(i, { shape: "circle", size: "small", width: "2rem" }),
        /* @__PURE__ */ e(i, { shape: "circle", size: "medium", width: "4rem" }),
        /* @__PURE__ */ e(i, { shape: "circle", size: "large", width: "6rem" })
      ] })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Different Sizes" }),
      /* @__PURE__ */ a("div", { className: "space-y-2", children: [
        /* @__PURE__ */ e(i, { size: "tiny" }),
        /* @__PURE__ */ e(i, { size: "small" }),
        /* @__PURE__ */ e(i, { size: "medium" }),
        /* @__PURE__ */ e(i, { size: "large" })
      ] })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Animations", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Shimmer Animation (Default)" }),
      /* @__PURE__ */ e(i, { animation: "shimmer" })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Wave Animation" }),
      /* @__PURE__ */ e(i, { animation: "wave" })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Pulse Animation" }),
      /* @__PURE__ */ e(i, { animation: "pulse" })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "No Animation" }),
      /* @__PURE__ */ e(i, { animation: "none" })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Shapes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Rounded (Default)" }),
      /* @__PURE__ */ e(i, { shape: "rounded" })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Rectangle" }),
      /* @__PURE__ */ e(i, { shape: "rectangle" })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Circle" }),
      /* @__PURE__ */ e(i, { shape: "circle", width: "8rem", height: "8rem" })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Text Lines" }),
      /* @__PURE__ */ e(i, { shape: "text", count: 4 })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Common Patterns", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Card Skeleton" }),
      /* @__PURE__ */ a(s, { className: "p-4", children: [
        /* @__PURE__ */ e(i, { size: "large", className: "mb-3" }),
        /* @__PURE__ */ e(i, { shape: "text", count: 3 })
      ] })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Profile Skeleton" }),
      /* @__PURE__ */ e(s, { className: "p-4", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
        /* @__PURE__ */ e(i, { shape: "circle", width: "4rem", height: "4rem" }),
        /* @__PURE__ */ a("div", { className: "flex-1 space-y-2", children: [
          /* @__PURE__ */ e(i, { width: "60%", height: "1rem" }),
          /* @__PURE__ */ e(i, { width: "40%", height: "0.875rem" })
        ] })
      ] }) })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "List Skeleton" }),
      /* @__PURE__ */ e(s, { className: "p-4 space-y-3", children: [1, 2, 3].map((t) => /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
        /* @__PURE__ */ e(i, { shape: "circle", width: "2.5rem", height: "2.5rem" }),
        /* @__PURE__ */ a("div", { className: "flex-1 space-y-2", children: [
          /* @__PURE__ */ e(i, { width: "70%", height: "0.875rem" }),
          /* @__PURE__ */ e(i, { width: "50%", height: "0.75rem" })
        ] })
      ] }, t)) })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Article Skeleton" }),
      /* @__PURE__ */ a(s, { className: "p-4", children: [
        /* @__PURE__ */ e(i, { size: "large", className: "mb-4" }),
        /* @__PURE__ */ e(i, { width: "80%", className: "mb-2 h-6" }),
        /* @__PURE__ */ e(i, { width: "60%", className: "mb-4 h-6" }),
        /* @__PURE__ */ e(i, { shape: "text", count: 5 })
      ] })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Grid Skeleton" }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [1, 2, 3].map((t) => /* @__PURE__ */ a(s, { className: "p-4", children: [
        /* @__PURE__ */ e(i, { height: "10rem", className: "mb-3" }),
        /* @__PURE__ */ e(i, { width: "80%", className: "mb-2 h-5" }),
        /* @__PURE__ */ e(i, { shape: "text", count: 2 })
      ] }, t)) })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(
    d,
    {
      componentName: "Skeleton",
      defaultValues: {
        shape: "rounded",
        animation: "shimmer",
        size: "medium",
        count: 1
      },
      excludeProps: ["width", "height"],
      children: (t) => /* @__PURE__ */ e(i, { ...t })
    }
  ),
  /* @__PURE__ */ e(h, { componentName: "Skeleton" }),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
    r,
    {
      language: "tsx",
      code: `import { Skeleton } from '@e-burgos/tucu-ui';

// Basic usage
<Skeleton />

// Different animations
<Skeleton animation="shimmer" />
<Skeleton animation="wave" />
<Skeleton animation="pulse" />
<Skeleton animation="none" />

// Different shapes
<Skeleton shape="rounded" />
<Skeleton shape="rectangle" />
<Skeleton shape="circle" width="4rem" height="4rem" />
<Skeleton shape="text" count={3} />

// Different sizes
<Skeleton size="tiny" />
<Skeleton size="small" />
<Skeleton size="medium" />
<Skeleton size="large" />

// Custom dimensions
<Skeleton width="80%" height="2rem" />

// Multiple lines
<Skeleton count={5} />

// Card skeleton pattern
<div>
  <Skeleton size="large" className="mb-3" />
  <Skeleton shape="text" count={3} />
</div>

// Profile skeleton pattern
<div className="flex items-center gap-4">
  <Skeleton shape="circle" width="4rem" height="4rem" />
  <div className="flex-1 space-y-2">
    <Skeleton width="60%" height="1rem" />
    <Skeleton width="40%" height="0.875rem" />
  </div>
</div>

// List item skeleton pattern
<div className="flex items-center gap-3">
  <Skeleton shape="circle" width="2.5rem" height="2.5rem" />
  <div className="flex-1 space-y-2">
    <Skeleton width="70%" height="0.875rem" />
    <Skeleton width="50%" height="0.75rem" />
  </div>
</div>`
    }
  ) }) }) })
] });
export {
  w as default
};
