import { jsxs as o, Fragment as n, jsx as t } from "react/jsx-runtime";
import { H as c, C as l, a as i, T as a, x as e, P as s, A as m, c as d } from "../index-sdOMz8GW.js";
import { MousePointerClick as p } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const w = () => /* @__PURE__ */ o(n, { children: [
  /* @__PURE__ */ t(
    c,
    {
      title: "ButtonDrip",
      description: "A button effect component that creates a ripple animation on click.",
      icon: /* @__PURE__ */ t("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-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ t(p, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ t(l, { className: "overflow-hidden", children: /* @__PURE__ */ t(i, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ o("div", { className: "space-y-4", children: [
    /* @__PURE__ */ o(l, { className: "p-4", children: [
      /* @__PURE__ */ t(a, { tag: "h5", className: "mb-3", children: "Button with Drip Effect" }),
      /* @__PURE__ */ t(e, { children: "Click me" })
    ] }),
    /* @__PURE__ */ o(l, { className: "p-4", children: [
      /* @__PURE__ */ t(a, { tag: "h5", className: "mb-3", children: "Button with Tooltip" }),
      /* @__PURE__ */ o("div", { className: "flex flex-wrap gap-4", children: [
        /* @__PURE__ */ t(e, { tooltip: "Save changes", tooltipPlacement: "top", children: "Top" }),
        /* @__PURE__ */ t(
          e,
          {
            tooltip: "Delete item",
            tooltipPlacement: "bottom",
            tooltipColor: "light",
            color: "danger",
            children: "Bottom (light)"
          }
        ),
        /* @__PURE__ */ t(
          e,
          {
            tooltip: "Go back",
            tooltipPlacement: "left",
            variant: "ghost",
            children: "Left"
          }
        ),
        /* @__PURE__ */ t(
          e,
          {
            tooltip: "More info",
            tooltipPlacement: "right",
            variant: "ghost",
            color: "info",
            children: "Right"
          }
        )
      ] })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ t(
    s,
    {
      componentName: "Button",
      defaultValues: {
        variant: "solid",
        color: "primary",
        size: "medium",
        shape: "rounded",
        tooltip: "",
        tooltipPlacement: "top"
      },
      excludeProps: [
        "onClick",
        "loaderSize",
        "loaderVariant",
        "aria-label",
        "aria-describedby"
      ],
      children: (r) => /* @__PURE__ */ t(e, { ...r, children: "Click me" })
    }
  ),
  /* @__PURE__ */ t(m, { componentName: "Button" }),
  /* @__PURE__ */ t(l, { className: "overflow-hidden", children: /* @__PURE__ */ t(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t(
    d,
    {
      language: "tsx",
      code: `import { ButtonDrip } from '@e-burgos/tucu-ui';

// ButtonDrip is typically used internally by Button component
// It creates a ripple effect when a button is clicked

<ButtonDrip
  x={50}
  y={50}
  color="#3b82f6"
  fullWidth={false}
  onCompleted={() => console.log('Animation completed')}
/>

// Button with tooltip (portal-based, renders above all DOM)
<Button tooltip="Save changes" tooltipPlacement="top">
  Save
</Button>

<Button tooltip="Delete" tooltipPlacement="bottom" tooltipColor="light" color="danger">
  Delete
</Button>`
    }
  ) }) }) })
] });
export {
  w as default
};
