import { jsxs as a, Fragment as c, jsx as e } from "react/jsx-runtime";
import { ay as d, H as m, C as o, a as i, T as l, y as g } from "../index-sdOMz8GW.js";
import { Type as p, Info as f } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const n = [
  {
    name: "Large Title",
    size: "26px",
    leading: "32px",
    weight: "400 (Regular)",
    tracking: "0",
    font: "SF Pro Display",
    cssVar: "--macos-font-size-large-title"
  },
  {
    name: "Title 1",
    size: "22px",
    leading: "26px",
    weight: "400 (Regular)",
    tracking: "0",
    font: "SF Pro Display",
    cssVar: "--macos-font-size-title1"
  },
  {
    name: "Title 2",
    size: "17px",
    leading: "22px",
    weight: "400 (Regular)",
    tracking: "0",
    font: "SF Pro Text",
    cssVar: "--macos-font-size-title2"
  },
  {
    name: "Title 3",
    size: "15px",
    leading: "20px",
    weight: "600 (Semibold)",
    tracking: "0",
    font: "SF Pro Text",
    cssVar: "--macos-font-size-title3"
  },
  {
    name: "Headline",
    size: "13px",
    leading: "16px",
    weight: "700 (Bold)",
    tracking: "0",
    font: "SF Pro Text",
    cssVar: "--macos-font-size-body"
  },
  {
    name: "Body",
    size: "13px",
    leading: "16px",
    weight: "400 (Regular)",
    tracking: "0",
    font: "SF Pro Text",
    cssVar: "--macos-font-size-body"
  },
  {
    name: "Callout",
    size: "12px",
    leading: "15px",
    weight: "400 (Regular)",
    tracking: "0",
    font: "SF Pro Text",
    cssVar: "--macos-font-size-callout"
  },
  {
    name: "Subheadline",
    size: "11px",
    leading: "14px",
    weight: "400 (Regular)",
    tracking: "0.006em",
    font: "SF Pro Text",
    cssVar: "--macos-font-size-subheadline"
  },
  {
    name: "Footnote",
    size: "10px",
    leading: "13px",
    weight: "400 (Regular)",
    tracking: "0.012em",
    font: "SF Pro Text",
    cssVar: "--macos-font-size-footnote"
  },
  {
    name: "Caption 1",
    size: "10px",
    leading: "13px",
    weight: "500 (Medium)",
    tracking: "0.012em",
    font: "SF Pro Text",
    cssVar: "--macos-font-size-caption"
  },
  {
    name: "Caption 2",
    size: "10px",
    leading: "13px",
    weight: "400 (Regular)",
    tracking: "0.012em",
    font: "SF Pro Text",
    cssVar: "--macos-font-size-caption"
  }
];
function h(s) {
  return s.weight.includes("700") ? 700 : s.weight.includes("600") ? 600 : s.weight.includes("500") ? 500 : 400;
}
function x(s) {
  return s.font === "SF Pro Display" ? "var(--macos-font-display, 'Inter', system-ui)" : "var(--macos-font-family, 'Inter', system-ui)";
}
const v = () => {
  const { mode: s } = d(), t = s === "dark";
  return /* @__PURE__ */ a(c, { children: [
    /* @__PURE__ */ e(
      m,
      {
        title: "Text Styles",
        description: "The macOS type scale defines size, weight, leading, and tracking for each text style. Each style adapts to the current appearance mode.",
        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-gray-800 via-gray-600 to-gray-400 dark:from-gray-200 dark:via-gray-400 dark:to-gray-600 rounded-full flex items-center justify-center shadow-lg border border-gray-500/50", children: /* @__PURE__ */ e(p, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white dark:text-gray-900 filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Font Family", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
      /* @__PURE__ */ a("div", { className: "flex items-start gap-3 p-4 rounded-lg bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800", children: [
        /* @__PURE__ */ e(f, { className: "w-5 h-5 text-blue-500 shrink-0 mt-0.5" }),
        /* @__PURE__ */ a("div", { className: "space-y-2", children: [
          /* @__PURE__ */ e(
            l,
            {
              tag: "p",
              className: "text-sm text-blue-800 dark:text-blue-200 font-medium",
              children: "Alternative Font: Inter Variable"
            }
          ),
          /* @__PURE__ */ a(
            l,
            {
              tag: "p",
              className: "text-xs text-blue-700 dark:text-blue-300",
              children: [
                "Apple's SF Pro is restricted by its license to Apple platforms only. To comply with this restriction, this design system uses",
                " ",
                /* @__PURE__ */ e("strong", { children: "Inter" }),
                " (SIL Open Font License) as the primary typeface and ",
                /* @__PURE__ */ e("strong", { children: "JetBrains Mono" }),
                " for monospaced content. Inter closely matches SF Pro's metrics, proportions, and optical sizing, making it an excellent open-source alternative that renders consistently across all platforms."
              ]
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4 mt-6", children: [
        /* @__PURE__ */ a(
          "div",
          {
            className: "p-4 rounded-lg border border-border",
            style: { backgroundColor: t ? "#1e1e1e" : "#ffffff" },
            children: [
              /* @__PURE__ */ e(
                "p",
                {
                  className: "text-lg mb-2",
                  style: {
                    fontFamily: "var(--macos-font-display, 'Inter', system-ui)",
                    color: t ? "rgba(255, 255, 255, 0.85)" : "rgba(0, 0, 0, 0.85)"
                  },
                  children: "Inter (Display)"
                }
              ),
              /* @__PURE__ */ e("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Used at ≥20pt. Replaces SF Pro Display for large headlines and titles." })
            ]
          }
        ),
        /* @__PURE__ */ a(
          "div",
          {
            className: "p-4 rounded-lg border border-border",
            style: { backgroundColor: t ? "#1e1e1e" : "#ffffff" },
            children: [
              /* @__PURE__ */ e(
                "p",
                {
                  className: "text-lg mb-2",
                  style: {
                    fontFamily: "var(--macos-font-family, 'Inter', system-ui)",
                    color: t ? "rgba(255, 255, 255, 0.85)" : "rgba(0, 0, 0, 0.85)"
                  },
                  children: "Inter (Text)"
                }
              ),
              /* @__PURE__ */ e("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Used at <20pt. Replaces SF Pro Text for body text and UI labels." })
            ]
          }
        ),
        /* @__PURE__ */ a(
          "div",
          {
            className: "p-4 rounded-lg border border-border",
            style: { backgroundColor: t ? "#1e1e1e" : "#ffffff" },
            children: [
              /* @__PURE__ */ e(
                "p",
                {
                  className: "text-lg mb-2",
                  style: {
                    fontFamily: "var(--macos-font-mono, 'JetBrains Mono', monospace)",
                    color: t ? "rgba(255, 255, 255, 0.85)" : "rgba(0, 0, 0, 0.85)"
                  },
                  children: "JetBrains Mono"
                }
              ),
              /* @__PURE__ */ e("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Monospaced variant. Replaces SF Mono for code, terminal output, and technical data." })
            ]
          }
        )
      ] })
    ] }) }) }),
    /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Type Scale", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      "div",
      {
        className: "rounded-xl p-6 border border-border",
        style: { backgroundColor: t ? "#1e1e1e" : "#ffffff" },
        children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-4", children: n.map((r) => /* @__PURE__ */ a(
          "div",
          {
            className: "flex flex-col sm:flex-row sm:items-baseline gap-2 sm:gap-6 pb-3 border-b border-[var(--color-border)] last:border-0",
            children: [
              /* @__PURE__ */ e(
                "span",
                {
                  className: "shrink-0",
                  style: {
                    fontFamily: x(r),
                    fontSize: r.size,
                    lineHeight: r.leading,
                    fontWeight: h(r),
                    letterSpacing: r.tracking,
                    color: t ? "rgba(255, 255, 255, 0.85)" : "rgba(0, 0, 0, 0.85)"
                  },
                  children: r.name
                }
              ),
              /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-3 text-[10px] font-mono text-gray-400", children: [
                /* @__PURE__ */ e("span", { children: r.size }),
                /* @__PURE__ */ a("span", { children: [
                  "/ ",
                  r.leading
                ] }),
                /* @__PURE__ */ e("span", { children: r.weight }),
                r.tracking !== "0" && /* @__PURE__ */ a("span", { children: [
                  "tracking: ",
                  r.tracking
                ] })
              ] })
            ]
          },
          r.name
        )) })
      }
    ) }) }) }),
    /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Label Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
      /* @__PURE__ */ a(
        l,
        {
          tag: "p",
          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
          children: [
            "Text styles combine with label colors to create visual hierarchy. Showing ",
            t ? "dark" : "light",
            " appearance values."
          ]
        }
      ),
      /* @__PURE__ */ e(
        "div",
        {
          className: "rounded-xl p-6 border border-border",
          style: { backgroundColor: t ? "#1e1e1e" : "#ffffff" },
          children: /* @__PURE__ */ a("div", { className: "space-y-3", children: [
            /* @__PURE__ */ a(
              "p",
              {
                style: {
                  fontFamily: "var(--macos-font-family, 'Inter', system-ui)",
                  fontSize: "13px",
                  lineHeight: "16px",
                  color: t ? "rgba(255, 255, 255, 0.85)" : "rgba(0, 0, 0, 0.85)"
                },
                children: [
                  /* @__PURE__ */ e("span", { className: "inline-block w-20 text-[10px] font-mono opacity-50", children: "Primary" }),
                  " ",
                  "The quick brown fox jumps over the lazy dog"
                ]
              }
            ),
            /* @__PURE__ */ a(
              "p",
              {
                style: {
                  fontFamily: "var(--macos-font-family, 'Inter', system-ui)",
                  fontSize: "13px",
                  lineHeight: "16px",
                  color: t ? "rgba(235, 235, 245, 0.6)" : "rgba(60, 60, 67, 0.6)"
                },
                children: [
                  /* @__PURE__ */ e("span", { className: "inline-block w-20 text-[10px] font-mono opacity-70", children: "Secondary" }),
                  " ",
                  "The quick brown fox jumps over the lazy dog"
                ]
              }
            ),
            /* @__PURE__ */ a(
              "p",
              {
                style: {
                  fontFamily: "var(--macos-font-family, 'Inter', system-ui)",
                  fontSize: "13px",
                  lineHeight: "16px",
                  color: t ? "rgba(235, 235, 245, 0.3)" : "rgba(60, 60, 67, 0.3)"
                },
                children: [
                  /* @__PURE__ */ e("span", { className: "inline-block w-20 text-[10px] font-mono opacity-70", children: "Tertiary" }),
                  " ",
                  "The quick brown fox jumps over the lazy dog"
                ]
              }
            )
          ] })
        }
      )
    ] }) }) }),
    /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "CSS Variables", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      g,
      {
        columns: [
          { key: "name", label: "Style" },
          {
            key: "cssVar",
            label: "CSS Variable",
            className: "font-mono text-gray-500"
          },
          {
            key: "size",
            label: "Size",
            className: "font-mono text-gray-500"
          },
          {
            key: "leading",
            label: "Leading",
            className: "font-mono text-gray-500"
          },
          { key: "font", label: "Font", className: "text-gray-500" }
        ],
        data: n,
        maxRows: 15,
        resizable: !1
      }
    ) }) }) })
  ] });
};
export {
  v as MacOSTextStylesSection,
  v as default
};
