import { jsxs as t, Fragment as i, jsx as e } from "react/jsx-runtime";
import { H as p, C as o, a as l, T as a, P as h, A as n, c as d } from "../index-sdOMz8GW.js";
import { Type as g } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const N = () => /* @__PURE__ */ t(i, { children: [
  /* @__PURE__ */ e(
    p,
    {
      title: "Typography",
      description: `A comprehensive typography component system with semantic HTML tags
          and predefined text styles.`,
      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-slate-600 to-gray-700 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(g, { 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(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
    /* @__PURE__ */ t(o, { className: "p-4", children: [
      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Headings" }),
      /* @__PURE__ */ t("div", { className: "space-y-2", children: [
        /* @__PURE__ */ e(a, { tag: "h1", children: "Heading 1" }),
        /* @__PURE__ */ e(a, { tag: "h2", children: "Heading 2" }),
        /* @__PURE__ */ e(a, { tag: "h3", children: "Heading 3" }),
        /* @__PURE__ */ e(a, { tag: "h4", children: "Heading 4" }),
        /* @__PURE__ */ e(a, { tag: "h5", children: "Heading 5" }),
        /* @__PURE__ */ e(a, { tag: "h6", children: "Heading 6" })
      ] })
    ] }),
    /* @__PURE__ */ t(o, { className: "p-4", children: [
      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Text Variants" }),
      /* @__PURE__ */ t("div", { className: "space-y-2", children: [
        /* @__PURE__ */ e(a, { tag: "headline", children: "Headline Text" }),
        /* @__PURE__ */ e(a, { tag: "body", children: "Body Text" }),
        /* @__PURE__ */ e(a, { tag: "label-1", children: "Label 1" }),
        /* @__PURE__ */ e(a, { tag: "label-2", children: "Label 2" }),
        /* @__PURE__ */ e(a, { tag: "caption", children: "Caption Text" }),
        /* @__PURE__ */ e(a, { tag: "legal", children: "Legal Text" })
      ] })
    ] }),
    /* @__PURE__ */ t(o, { className: "p-4", children: [
      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Semantic Elements" }),
      /* @__PURE__ */ t("div", { className: "space-y-2", children: [
        /* @__PURE__ */ e(a, { tag: "p", children: "Paragraph text" }),
        /* @__PURE__ */ e(a, { tag: "strong", children: "Strong text" }),
        /* @__PURE__ */ e(a, { tag: "em", children: "Emphasized text" }),
        /* @__PURE__ */ e(a, { tag: "code", children: "Code text" }),
        /* @__PURE__ */ e(a, { tag: "pre", children: "Preformatted text" })
      ] })
    ] }),
    /* @__PURE__ */ t(o, { className: "p-4", children: [
      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "With Tooltip" }),
      /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-4 items-center", children: [
        /* @__PURE__ */ e(
          a,
          {
            tag: "span",
            tooltip: "This is an abbreviation",
            tooltipPlacement: "top",
            className: "underline decoration-dotted cursor-help",
            children: "Hover this text"
          }
        ),
        /* @__PURE__ */ e(
          a,
          {
            tag: "strong",
            tooltip: "Important information",
            tooltipPlacement: "right",
            tooltipColor: "light",
            children: "Bold with tooltip"
          }
        ),
        /* @__PURE__ */ e(
          a,
          {
            tag: "code",
            tooltip: "Copied!",
            tooltipPlacement: "bottom",
            children: "Code with tooltip"
          }
        )
      ] })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(
    h,
    {
      componentName: "Typography",
      defaultValues: { tag: "p", color: "default" },
      excludeProps: [
        "tooltip",
        "tooltipArrow",
        "tooltipColor",
        "tooltipPlacement",
        "title"
      ],
      children: (r) => /* @__PURE__ */ e(a, { ...r, children: "The quick brown fox jumps over the lazy dog." })
    }
  ),
  /* @__PURE__ */ e(n, { componentName: "Typography" }),
  /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
    d,
    {
      language: "tsx",
      code: `import { Typography } from '@e-burgos/tucu-ui';

// Headings
<Typography tag="h1">Heading 1</Typography>
<Typography tag="h2">Heading 2</Typography>
<Typography tag="h3">Heading 3</Typography>

// Text variants
<Typography tag="headline">Headline Text</Typography>
<Typography tag="body">Body Text</Typography>
<Typography tag="label-1">Label 1</Typography>
<Typography tag="label-2">Label 2</Typography>
<Typography tag="caption">Caption Text</Typography>

// Semantic elements
<Typography tag="p">Paragraph text</Typography>
<Typography tag="strong">Strong text</Typography>
<Typography tag="em">Emphasized text</Typography>
<Typography tag="code">Code text</Typography>

// With custom className
<Typography tag="h1" className="text-blue-500">
  Custom Styled Heading
</Typography>

// With tooltip
<Typography tag="span" tooltip="Extra info" tooltipPlacement="top">
  Hover me
</Typography>
<Typography tag="strong" tooltip="Details" tooltipPlacement="right" tooltipColor="light">
  Bold with tooltip
</Typography>`
    }
  ) }) }) })
] });
export {
  N as default
};
