import { jsxs as r, jsx as a } from "react/jsx-runtime";
import { H as i, C as t, a as o, T as l, K as g } from "../index-sdOMz8GW.js";
import { Type as n } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const T = () => {
  const d = [
    { tag: "headline", label: "Headline", category: "Tucu UI Tokens" },
    { tag: "body", label: "Body", category: "Tucu UI Tokens" },
    { tag: "label-1", label: "Label 1", category: "Tucu UI Tokens" },
    { tag: "label-2", label: "Label 2", category: "Tucu UI Tokens" },
    { tag: "caption", label: "Caption", category: "Tucu UI Tokens" },
    { tag: "legal", label: "Legal", category: "Tucu UI Tokens" },
    { tag: "h1", label: "Heading 1 (h1)", category: "HTML Tags" },
    { tag: "h2", label: "Heading 2 (h2)", category: "HTML Tags" },
    { tag: "h3", label: "Heading 3 (h3)", category: "HTML Tags" },
    { tag: "h4", label: "Heading 4 (h4)", category: "HTML Tags" },
    { tag: "h5", label: "Heading 5 (h5)", category: "HTML Tags" },
    { tag: "h6", label: "Heading 6 (h6)", category: "HTML Tags" },
    { tag: "p", label: "Paragraph (p)", category: "HTML Tags" },
    { tag: "i", label: "Italic (i)", category: "HTML Tags" },
    { tag: "b", label: "Bold (b)", category: "HTML Tags" },
    { tag: "strong", label: "Strong", category: "HTML Tags" },
    { tag: "em", label: "Emphasis (em)", category: "HTML Tags" },
    { tag: "small", label: "Small", category: "HTML Tags" },
    { tag: "q", label: "Quote (q)", category: "HTML Tags" },
    { tag: "blockquote", label: "Blockquote", category: "HTML Tags" },
    { tag: "code", label: "Code", category: "HTML Tags" },
    { tag: "pre", label: "Preformatted (pre)", category: "HTML Tags" },
    { tag: "kbd", label: "Keyboard (kbd)", category: "HTML Tags" },
    { tag: "mark", label: "Mark", category: "HTML Tags" },
    { tag: "del", label: "Deleted (del)", category: "HTML Tags" },
    { tag: "sub", label: "Subscript (sub)", category: "HTML Tags" },
    { tag: "sup", label: "Superscript (sup)", category: "HTML Tags" },
    { tag: "abbr", label: "Abbreviation (abbr)", category: "HTML Tags" },
    { tag: "span", label: "Span", category: "HTML Tags" }
  ], s = [
    { value: "default", label: "Default" },
    { value: "primary", label: "Primary" },
    { value: "secondary", label: "Secondary" },
    { value: "dark", label: "Dark" },
    { value: "light", label: "Light" },
    { value: "muted", label: "Muted" },
    { value: "success", label: "Success" },
    { value: "warning", label: "Warning" },
    { value: "error", label: "Error" }
  ], c = [
    { value: "default", label: "Default (Sans)" },
    { value: "mono", label: "Mono" }
  ];
  return /* @__PURE__ */ r("div", { className: "space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12", children: [
    /* @__PURE__ */ a(
      i,
      {
        title: "Typography",
        description: "Typography component with all available tags, colors, and font families.",
        icon: /* @__PURE__ */ a("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-cyan-500 to-sky-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ a(n, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(o, { title: "Tucu UI Tokens - Type Scale", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
      /* @__PURE__ */ a(
        l,
        {
          tag: "p",
          className: "text-gray-600 dark:text-gray-400 mb-6",
          children: "Hierarchical typography tokens designed for consistent text styling across the design system."
        }
      ),
      /* @__PURE__ */ a("div", { className: "border border-border rounded-lg p-6 bg-light-dark", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: d.filter((e) => e.category === "Tucu UI Tokens").map((e) => /* @__PURE__ */ r(
        "div",
        {
          className: "flex flex-col md:flex-row md:items-center md:justify-between gap-4 pb-6 border-b border-border last:border-0 last:pb-0",
          children: [
            /* @__PURE__ */ r("div", { className: "flex-1 space-y-2", children: [
              /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
                /* @__PURE__ */ a(
                  l,
                  {
                    tag: e.tag,
                    children: e.label
                  }
                ),
                /* @__PURE__ */ a(
                  g,
                  {
                    variant: "outline",
                    className: "text-xs font-mono",
                    children: e.tag
                  }
                )
              ] }),
              /* @__PURE__ */ r(l, { tag: "caption", className: "text-muted", children: [
                e.tag === "headline" && "Main headlines and hero text",
                e.tag === "body" && "Primary body text and paragraphs",
                e.tag === "label-1" && "Primary labels and form fields",
                e.tag === "label-2" && "Secondary labels and smaller text",
                e.tag === "caption" && "Image captions and metadata",
                e.tag === "legal" && "Legal text, disclaimers, and fine print"
              ] })
            ] }),
            /* @__PURE__ */ a("div", { className: "md:w-1/2", children: /* @__PURE__ */ r(
              l,
              {
                tag: e.tag,
                children: [
                  e.tag === "headline" && "The quick brown fox jumps over the lazy dog",
                  e.tag === "body" && "The quick brown fox jumps over the lazy dog. This is body text used for paragraphs and main content.",
                  e.tag === "label-1" && "Label Text",
                  e.tag === "label-2" && "Small Label",
                  e.tag === "caption" && "Image caption or supporting text",
                  e.tag === "legal" && "Legal disclaimer text"
                ]
              }
            ) })
          ]
        },
        e.tag
      )) }) })
    ] }) }) }),
    /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(o, { title: "HTML Tags", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
      /* @__PURE__ */ a(
        l,
        {
          tag: "p",
          className: "text-gray-600 dark:text-gray-400 mb-6",
          children: "Standard HTML semantic tags with Tucu UI styling."
        }
      ),
      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: d.filter((e) => e.category === "HTML Tags").map((e) => /* @__PURE__ */ r(
        "div",
        {
          className: "border border-border rounded-lg p-4 space-y-3",
          children: [
            /* @__PURE__ */ r("div", { className: "space-y-1", children: [
              /* @__PURE__ */ a(l, { tag: "h4", children: e.label }),
              /* @__PURE__ */ r(
                l,
                {
                  tag: "h4",
                  className: "text-muted break-all text-xs",
                  children: [
                    'tag="',
                    e.tag,
                    '"'
                  ]
                }
              )
            ] }),
            /* @__PURE__ */ a("div", { className: "min-h-[60px] flex items-start overflow-hidden", children: /* @__PURE__ */ a(
              l,
              {
                className: e.tag === "pre" || e.tag === "code" ? "overflow-wrap-anywhere whitespace-pre-wrap w-full" : "overflow-wrap-anywhere",
                tag: e.tag,
                ...e.tag === "abbr" && {
                  title: "Abbreviation example"
                },
                children: e.tag === "pre" || e.tag === "code" ? 'const example = "The quick brown fox jumps over the lazy dog";' : "The quick brown fox jumps over the lazy dog"
              }
            ) })
          ]
        },
        e.tag
      )) })
    ] }) }) }),
    /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(o, { title: "Typography Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
      /* @__PURE__ */ a(
        l,
        {
          tag: "p",
          className: "text-gray-600 dark:text-gray-400 mb-6",
          children: "Available color props for the Typography component."
        }
      ),
      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: s.map((e) => /* @__PURE__ */ r(
        "div",
        {
          className: "border border-border rounded-lg p-4 space-y-3",
          children: [
            /* @__PURE__ */ r("div", { className: "space-y-1", children: [
              /* @__PURE__ */ a(l, { tag: "h4", children: e.label }),
              /* @__PURE__ */ r(
                l,
                {
                  tag: "h4",
                  className: "text-muted break-all text-xs",
                  children: [
                    'color="',
                    e.value,
                    '"'
                  ]
                }
              )
            ] }),
            /* @__PURE__ */ a("div", { className: "min-h-[40px] flex items-center", children: /* @__PURE__ */ a(l, { tag: "p", color: e.value, children: "The quick brown fox jumps over the lazy dog" }) })
          ]
        },
        e.value
      )) })
    ] }) }) }),
    /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(o, { title: "Typography Font Families", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
      /* @__PURE__ */ a(
        l,
        {
          tag: "p",
          className: "text-gray-600 dark:text-gray-400 mb-6",
          children: "Available fontFamily props for the Typography component."
        }
      ),
      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: c.map((e) => /* @__PURE__ */ r(
        "div",
        {
          className: "border border-border rounded-lg p-4 space-y-3",
          children: [
            /* @__PURE__ */ r("div", { className: "space-y-1", children: [
              /* @__PURE__ */ a(l, { tag: "h4", children: e.label }),
              /* @__PURE__ */ r(
                l,
                {
                  tag: "h4",
                  className: "text-muted break-all text-xs",
                  children: [
                    'fontFamily="',
                    e.value,
                    '"'
                  ]
                }
              )
            ] }),
            /* @__PURE__ */ a("div", { className: "min-h-[40px] flex items-center", children: /* @__PURE__ */ a(l, { tag: "p", fontFamily: e.value, children: "The quick brown fox jumps over the lazy dog" }) })
          ]
        },
        e.value
      )) })
    ] }) }) }),
    /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(o, { title: "Combined Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
      /* @__PURE__ */ a(
        l,
        {
          tag: "p",
          className: "text-gray-600 dark:text-gray-400 mb-6",
          children: "Examples combining tags, colors, and font families."
        }
      ),
      /* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [
        /* @__PURE__ */ r("div", { className: "border border-border rounded-lg p-4 space-y-3", children: [
          /* @__PURE__ */ a(l, { tag: "h4", className: "text-xs text-muted", children: "Headline + Primary + Mono" }),
          /* @__PURE__ */ a(l, { tag: "headline", color: "primary", fontFamily: "mono", children: "The quick brown fox" })
        ] }),
        /* @__PURE__ */ r("div", { className: "border border-border rounded-lg p-4 space-y-3", children: [
          /* @__PURE__ */ a(l, { tag: "h4", className: "text-xs text-muted", children: "Body + Success" }),
          /* @__PURE__ */ a(l, { tag: "body", color: "success", children: "The quick brown fox jumps over the lazy dog" })
        ] }),
        /* @__PURE__ */ r("div", { className: "border border-border rounded-lg p-4 space-y-3", children: [
          /* @__PURE__ */ a(l, { tag: "h4", className: "text-xs text-muted", children: "Label 1 + Warning" }),
          /* @__PURE__ */ a(l, { tag: "label-1", color: "warning", children: "The quick brown fox" })
        ] }),
        /* @__PURE__ */ r("div", { className: "border border-border rounded-lg p-4 space-y-3", children: [
          /* @__PURE__ */ a(l, { tag: "h4", className: "text-xs text-muted", children: "Code + Error + Mono" }),
          /* @__PURE__ */ a(l, { tag: "code", color: "error", fontFamily: "mono", children: 'const example = "Hello World";' })
        ] }),
        /* @__PURE__ */ r("div", { className: "border border-border rounded-lg p-4 space-y-3", children: [
          /* @__PURE__ */ a(l, { tag: "h4", className: "text-xs text-muted", children: "Caption + Muted" }),
          /* @__PURE__ */ a(l, { tag: "caption", color: "muted", children: "The quick brown fox jumps over the lazy dog" })
        ] }),
        /* @__PURE__ */ r("div", { className: "border border-border rounded-lg p-4 space-y-3", children: [
          /* @__PURE__ */ a(l, { tag: "h4", className: "text-xs text-muted", children: "H2 + Secondary" }),
          /* @__PURE__ */ a(l, { tag: "h2", color: "secondary", children: "The quick brown fox" })
        ] })
      ] })
    ] }) }) })
  ] });
};
export {
  T as default
};
