import { jsxs as a, Fragment as d, jsx as e } from "react/jsx-runtime";
import { H as m, C as r, a as i, T as l, ad as s, P as c, A as n, c as t } from "../index-sdOMz8GW.js";
import { Loader2 as h } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const L = () => /* @__PURE__ */ a(d, { children: [
  /* @__PURE__ */ e(
    m,
    {
      title: "Loader",
      description: `A versatile loader component with multiple animation variants and
          sizes for indicating loading states.`,
      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-indigo-500 to-violet-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(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__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { 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: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
    /* @__PURE__ */ a(r, { className: "p-4", children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Default Loader" }),
      /* @__PURE__ */ e(s, {})
    ] }),
    /* @__PURE__ */ a(r, { className: "p-4", children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Small Loader" }),
      /* @__PURE__ */ e(s, { size: "small" })
    ] }),
    /* @__PURE__ */ a(r, { className: "p-4", children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Large Loader" }),
      /* @__PURE__ */ e(s, { size: "large" })
    ] }),
    /* @__PURE__ */ a(r, { className: "p-4", children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Three Dots Only" }),
      /* @__PURE__ */ e(s, { showOnlyThreeDots: !0 })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
    /* @__PURE__ */ a(r, { className: "p-4", children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Blink Variant" }),
      /* @__PURE__ */ e(s, { variant: "blink" })
    ] }),
    /* @__PURE__ */ a(r, { className: "p-4", children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Scale Up Variant" }),
      /* @__PURE__ */ e(s, { variant: "scaleUp" })
    ] }),
    /* @__PURE__ */ a(r, { className: "p-4", children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Move Up Variant" }),
      /* @__PURE__ */ e(s, { variant: "moveUp" })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(
    c,
    {
      componentName: "Loader",
      defaultValues: {
        variant: "moveUp",
        size: "medium",
        color: "primary",
        showOnlyThreeDots: !1,
        tag: "div"
      },
      excludeProps: [],
      children: (o) => /* @__PURE__ */ e(s, { ...o })
    }
  ),
  /* @__PURE__ */ e(n, { componentName: "Loader" }),
  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
    t,
    {
      language: "tsx",
      code: `import { Loader } from '@e-burgos/tucu-ui';

// Basic usage
<Loader />

// Different sizes
<Loader size="small" />
<Loader size="medium" />
<Loader size="large" />

// Different variants
<Loader variant="blink" />
<Loader variant="scaleUp" />
<Loader variant="moveUp" />

// Different colors
<Loader color="primary" />
<Loader color="success" />
<Loader color="danger" />

// Three dots only
<Loader showOnlyThreeDots />`
    }
  ) }) }) })
] });
export {
  L as default
};
