import { jsxs as r, Fragment as c, jsx as t } from "react/jsx-runtime";
import { H as s, C as l, a as n, $ as e, x as o, T as a, P as p, A as m, c as h } from "../index-sdOMz8GW.js";
import { MessageSquare as d } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const y = () => /* @__PURE__ */ r(c, { children: [
  /* @__PURE__ */ t(
    s,
    {
      title: "Tooltip",
      description: `A portal-based tooltip component that renders above all other DOM
          elements. Supports configurable placement, arrow, color themes, and
          delays.`,
      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-teal-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ t(d, { 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(n, { title: "Placement", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center justify-center gap-4", children: [
    /* @__PURE__ */ t(e, { content: "Top tooltip", placement: "top", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", children: "Top" }) }),
    /* @__PURE__ */ t(e, { content: "Bottom tooltip", placement: "bottom", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", children: "Bottom" }) }),
    /* @__PURE__ */ t(e, { content: "Left tooltip", placement: "left", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", children: "Left" }) }),
    /* @__PURE__ */ t(e, { content: "Right tooltip", placement: "right", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", children: "Right" }) })
  ] }) }) }) }),
  /* @__PURE__ */ t(l, { className: "overflow-hidden", children: /* @__PURE__ */ t(n, { title: "Color Themes", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center justify-center gap-4", children: [
    /* @__PURE__ */ t(e, { content: "Auto (uses theme mode)", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", children: "Auto" }) }),
    /* @__PURE__ */ t(e, { content: "Dark theme", color: "dark", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", children: "Dark" }) }),
    /* @__PURE__ */ t(e, { content: "Light theme", color: "light", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", children: "Light" }) }),
    /* @__PURE__ */ t(e, { content: "Primary color", color: "primary", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", color: "primary", children: "Primary" }) }),
    /* @__PURE__ */ t(e, { content: "Success message", color: "success", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", color: "success", children: "Success" }) }),
    /* @__PURE__ */ t(e, { content: "Info message", color: "info", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", color: "info", children: "Info" }) }),
    /* @__PURE__ */ t(e, { content: "Warning message", color: "warning", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", color: "warning", children: "Warning" }) }),
    /* @__PURE__ */ t(e, { content: "Danger message", color: "danger", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", color: "danger", children: "Danger" }) })
  ] }) }) }) }),
  /* @__PURE__ */ t(l, { className: "overflow-hidden", children: /* @__PURE__ */ t(n, { title: "Arrow Options", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center justify-center gap-4", children: [
    /* @__PURE__ */ t(e, { content: "With arrow", arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", color: "info", children: "With Arrow" }) }),
    /* @__PURE__ */ t(e, { content: "Without arrow", arrow: !1, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", color: "info", children: "No Arrow" }) })
  ] }) }) }) }),
  /* @__PURE__ */ t(l, { className: "overflow-hidden", children: /* @__PURE__ */ t(n, { title: "Rich Content", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center justify-center gap-4", children: [
    /* @__PURE__ */ t(
      e,
      {
        content: /* @__PURE__ */ r("div", { className: "space-y-1", children: [
          /* @__PURE__ */ t(a, { tag: "strong", className: "text-xs", children: "Rich Tooltip" }),
          /* @__PURE__ */ t(a, { tag: "p", className: "text-xs opacity-80", children: "Supports any React node as content." })
        ] }),
        placement: "bottom",
        color: "light",
        arrow: !0,
        children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", color: "success", children: "Rich Content" })
      }
    ),
    /* @__PURE__ */ t(e, { content: "Delayed tooltip", enterDelay: 500, arrow: !0, children: /* @__PURE__ */ t(o, { variant: "ghost", size: "small", color: "warning", children: "500ms Delay" }) })
  ] }) }) }) }),
  /* @__PURE__ */ t(l, { className: "overflow-hidden", children: /* @__PURE__ */ t(n, { title: "Component Integration", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
    /* @__PURE__ */ r(l, { className: "p-4", children: [
      /* @__PURE__ */ t(a, { tag: "h5", className: "mb-3", children: "Button with tooltip prop" }),
      /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-4", children: [
        /* @__PURE__ */ t(o, { tooltip: "Save changes", tooltipPlacement: "top", children: "Save" }),
        /* @__PURE__ */ t(
          o,
          {
            tooltip: "Delete item",
            tooltipPlacement: "bottom",
            tooltipColor: "light",
            color: "danger",
            children: "Delete"
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ r(l, { className: "p-4", children: [
      /* @__PURE__ */ t(a, { tag: "h5", className: "mb-3", children: "Typography with tooltip prop" }),
      /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-4 items-center", children: [
        /* @__PURE__ */ t(
          a,
          {
            tag: "span",
            tooltip: "This is an abbreviation",
            tooltipPlacement: "top",
            className: "underline decoration-dotted cursor-help",
            children: "Hover this text"
          }
        ),
        /* @__PURE__ */ t(
          a,
          {
            tag: "strong",
            tooltip: "Important information",
            tooltipPlacement: "right",
            tooltipColor: "light",
            children: "Bold with tooltip"
          }
        )
      ] })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ t(
    p,
    {
      componentName: "Tooltip",
      defaultValues: {
        placement: "top",
        color: "primary",
        arrow: !0,
        disabled: !1,
        enterDelay: 0,
        leaveDelay: 100
      },
      excludeProps: ["children", "content"],
      children: (i) => /* @__PURE__ */ t(e, { ...i, content: "Tooltip preview text", children: /* @__PURE__ */ t(o, { children: "Hover me" }) })
    }
  ),
  /* @__PURE__ */ t(m, { componentName: "Tooltip" }),
  /* @__PURE__ */ t(l, { className: "overflow-hidden", children: /* @__PURE__ */ t(n, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t(
    h,
    {
      language: "tsx",
      code: `import { Tooltip, Button, Typography } from '@e-burgos/tucu-ui';

// Standalone Tooltip wrapping any element
<Tooltip content="Hello!" placement="top" arrow>
  <Button>Hover me</Button>
</Tooltip>

// Auto color — adapts to current theme (dark in light mode, light in dark mode)
<Tooltip content="Auto color">
  <Button>Auto</Button>
</Tooltip>

// Semantic color variants
<Tooltip content="Primary" color="primary" arrow>
  <Button>Primary</Button>
</Tooltip>
<Tooltip content="Success!" color="success" arrow>
  <Button>Success</Button>
</Tooltip>
<Tooltip content="Warning" color="warning" arrow>
  <Button>Warning</Button>
</Tooltip>
<Tooltip content="Danger!" color="danger" arrow>
  <Button>Danger</Button>
</Tooltip>
<Tooltip content="Info" color="info" arrow>
  <Button>Info</Button>
</Tooltip>

// Without arrow
<Tooltip content="No arrow" arrow={false}>
  <Button>No arrow</Button>
</Tooltip>

// Rich content
<Tooltip
  content={
    <div>
      <strong>Title</strong>
      <p>Description</p>
    </div>
  }
  placement="right"
  color="light"
  arrow
>
  <Button>Rich</Button>
</Tooltip>

// Enter delay
<Tooltip content="Delayed" enterDelay={500} arrow>
  <Button>500ms delay</Button>
</Tooltip>

// Built-in tooltip props on Button (with arrow control)
<Button tooltip="Save" tooltipPlacement="top" tooltipArrow={false}>Save</Button>
<Button tooltip="Delete" tooltipColor="danger">Delete</Button>

// Built-in tooltip props on Typography
<Typography tag="span" tooltip="Info" tooltipPlacement="right" tooltipArrow>
  Hover text
</Typography>`
    }
  ) }) }) })
] });
export {
  y as default
};
