import { jsxs as i, Fragment as n, jsx as e } from "react/jsx-runtime";
import { H as d, C as a, a as o, T as r, x as l, P as c, y as m, c as p } from "../index-sdOMz8GW.js";
import { Loader2 as u } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const v = () => /* @__PURE__ */ i(n, { children: [
  /* @__PURE__ */ e(
    d,
    {
      title: "ButtonLoader",
      description: `A loader component designed specifically for buttons, providing visual
          feedback during 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-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(u, { 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(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
    /* @__PURE__ */ i(a, { className: "p-4", children: [
      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Button with Loading State" }),
      /* @__PURE__ */ e(l, { isLoading: !0 })
    ] }),
    /* @__PURE__ */ i(a, { className: "p-4", children: [
      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Button with Custom Loader" }),
      /* @__PURE__ */ e(l, { isLoading: !0, loaderSize: "small", loaderVariant: "blink" })
    ] }),
    /* @__PURE__ */ i(a, { className: "p-4", children: [
      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Large Button with Loader" }),
      /* @__PURE__ */ e(l, { isLoading: !0, size: "large", loaderSize: "large" })
    ] }),
    /* @__PURE__ */ i(a, { className: "p-4", children: [
      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Small Button with Loader" }),
      /* @__PURE__ */ e(l, { isLoading: !0, size: "small", loaderSize: "small" })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
    /* @__PURE__ */ i(a, { className: "p-4", children: [
      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Blink Variant" }),
      /* @__PURE__ */ e(l, { isLoading: !0, loaderVariant: "blink" })
    ] }),
    /* @__PURE__ */ i(a, { className: "p-4", children: [
      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Scale Up Variant" }),
      /* @__PURE__ */ e(l, { isLoading: !0, loaderVariant: "scaleUp" })
    ] }),
    /* @__PURE__ */ i(a, { className: "p-4", children: [
      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Move Up Variant" }),
      /* @__PURE__ */ e(l, { isLoading: !0, loaderVariant: "moveUp" })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(
    c,
    {
      componentName: "Button",
      title: "Button Loader Playground",
      defaultValues: {
        variant: "solid",
        color: "primary",
        size: "medium",
        isLoading: !0,
        loaderSize: "small",
        loaderVariant: "scaleUp"
      },
      excludeProps: [
        "onClick",
        "aria-label",
        "aria-describedby",
        "tooltip",
        "tooltipArrow",
        "tooltipColor",
        "tooltipPlacement",
        "shape",
        "fullWidth",
        "disabled"
      ],
      children: (t) => /* @__PURE__ */ e(l, { ...t, children: "Loading..." })
    }
  ),
  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(m, { columns: [
    {
      key: "prop",
      label: "Prop",
      render: (t) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(t) })
    },
    {
      key: "type",
      label: "Type",
      render: (t) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(t) })
    },
    {
      key: "default",
      label: "Default",
      render: (t) => {
        const s = String(t);
        return s === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: s });
      }
    },
    {
      key: "description",
      label: "Description"
    }
  ], data: [
    {
      prop: "size",
      type: "'large' | 'medium' | 'small'",
      default: "required",
      description: "Size of the loader"
    },
    {
      prop: "variant",
      type: "'blink' | 'scaleUp' | 'moveUp'",
      default: "required",
      description: "Animation variant of the loader"
    }
  ] }) }) }) }),
  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
    p,
    {
      language: "tsx",
      code: `import { Button } from '@e-burgos/tucu-ui';

// Basic usage with loading state
<Button isLoading>Loading...</Button>

// With custom loader size
<Button 
  isLoading 
  loaderSize="small"
  loaderVariant="blink"
>
  Processing
</Button>

// Large button with loader
<Button 
  isLoading 
  size="large" 
  loaderSize="large"
>
  Saving...
</Button>

// Different loader variants
<Button isLoading loaderVariant="blink">Blink</Button>
<Button isLoading loaderVariant="scaleUp">Scale Up</Button>
<Button isLoading loaderVariant="moveUp">Move Up</Button>

// ButtonLoader is used internally by Button component
// when isLoading prop is set to true`
    }
  ) }) }) })
] });
export {
  v as default
};
