@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/MacOSSidebarSection-DYZ6onyY.js

@@ -0,0 +1,251 @@
+import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { useState as o } from "react";
+import { H as b, C as s, a as i, bm as l, P as h, A as f, c as x } from "../index-19KsCnyX.js";
+import { PanelLeft as v, Settings as c, Home as g, Search as u, Bell as N, AtSign as w, BellOff as p, Inbox as S, Star as y, Send as I, Briefcase as k, User as A, Archive as C } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const n = [
+  {
+    label: "Favorites",
+    items: [
+      {
+        id: "inbox",
+        label: "Inbox",
+        icon: /* @__PURE__ */ e(S, { className: "w-4 h-4" }),
+        badge: 12
+      },
+      {
+        id: "starred",
+        label: "Starred",
+        icon: /* @__PURE__ */ e(y, { className: "w-4 h-4" })
+      },
+      {
+        id: "sent",
+        label: "Sent",
+        icon: /* @__PURE__ */ e(I, { className: "w-4 h-4" })
+      }
+    ]
+  },
+  {
+    label: "Folders",
+    items: [
+      {
+        id: "work",
+        label: "Work",
+        icon: /* @__PURE__ */ e(k, { className: "w-4 h-4" }),
+        badge: 3
+      },
+      {
+        id: "personal",
+        label: "Personal",
+        icon: /* @__PURE__ */ e(A, { className: "w-4 h-4" })
+      },
+      {
+        id: "archive",
+        label: "Archive",
+        icon: /* @__PURE__ */ e(C, { className: "w-4 h-4" }),
+        disabled: !0
+      }
+    ]
+  }
+];
+function M(t) {
+  const [r, d] = o(t.activeId || "inbox");
+  return /* @__PURE__ */ a("div", { className: "flex h-64 rounded-xl overflow-hidden border border-border", children: [
+    /* @__PURE__ */ e(
+      l,
+      {
+        sections: n,
+        activeId: r,
+        onSelect: d,
+        header: /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-gray-800 dark:text-gray-100", children: "Mail" })
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: "flex flex-1 items-center justify-center bg-gray-50 dark:bg-gray-900 text-sm text-gray-500", children: [
+      "Active:",
+      " ",
+      /* @__PURE__ */ e("span", { className: "ml-1 font-medium text-gray-800 dark:text-gray-200", children: r })
+    ] })
+  ] });
+}
+const W = () => {
+  const [t, r] = o("inbox");
+  return /* @__PURE__ */ a(m, { children: [
+    /* @__PURE__ */ e(
+      b,
+      {
+        title: "MacSidebarCard",
+        description: "A macOS-style navigation sidebar with backdrop blur, section group labels, badge counts, active-item tinting, header/footer slots, and disabled state for items.",
+        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-slate-500 via-gray-600 to-zinc-700 rounded-full flex items-center justify-center shadow-lg border border-slate-500/50", children: /* @__PURE__ */ e(v, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Interactive Sidebar", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "flex h-72 rounded-xl overflow-hidden border border-border shadow-sm", children: [
+      /* @__PURE__ */ e(
+        l,
+        {
+          sections: n,
+          activeId: t,
+          onSelect: r,
+          header: /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-gray-800 dark:text-gray-100", children: "Mail" }),
+          footer: /* @__PURE__ */ a("button", { className: "flex items-center gap-2 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300", children: [
+            /* @__PURE__ */ e(c, { className: "w-3.5 h-3.5" }),
+            "Preferences"
+          ] })
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: "flex flex-1 items-center justify-center bg-gray-50 dark:bg-gray-900 text-sm text-gray-500", children: [
+        "Active:",
+        " ",
+        /* @__PURE__ */ e("span", { className: "ml-1 font-medium text-gray-800 dark:text-gray-200", children: t })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Without Section Labels", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "flex h-56 rounded-xl overflow-hidden border border-border shadow-sm", children: [
+      /* @__PURE__ */ e(
+        l,
+        {
+          sections: [
+            {
+              items: [
+                {
+                  id: "home",
+                  label: "Home",
+                  icon: /* @__PURE__ */ e(g, { className: "w-4 h-4" })
+                },
+                {
+                  id: "search",
+                  label: "Search",
+                  icon: /* @__PURE__ */ e(u, { className: "w-4 h-4" })
+                },
+                {
+                  id: "settings",
+                  label: "Settings",
+                  icon: /* @__PURE__ */ e(c, { className: "w-4 h-4" })
+                }
+              ]
+            }
+          ],
+          activeId: "home",
+          onSelect: () => {
+          }
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center bg-gray-50 dark:bg-gray-900 text-sm text-gray-400", children: "Main content area" })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(
+      i,
+      {
+        title: "With Badge Counts & Disabled Items",
+        className: "mt-2 mb-2",
+        children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "flex h-64 rounded-xl overflow-hidden border border-border shadow-sm", children: [
+          /* @__PURE__ */ e(
+            l,
+            {
+              sections: [
+                {
+                  label: "Notifications",
+                  items: [
+                    {
+                      id: "all",
+                      label: "All",
+                      icon: /* @__PURE__ */ e(N, { className: "w-4 h-4" }),
+                      badge: 42
+                    },
+                    {
+                      id: "mentions",
+                      label: "Mentions",
+                      icon: /* @__PURE__ */ e(w, { className: "w-4 h-4" }),
+                      badge: 7
+                    },
+                    {
+                      id: "muted",
+                      label: "Muted",
+                      icon: /* @__PURE__ */ e(p, { className: "w-4 h-4" }),
+                      disabled: !0
+                    }
+                  ]
+                }
+              ],
+              activeId: "all",
+              onSelect: () => {
+              }
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center bg-gray-50 dark:bg-gray-900 text-sm text-gray-400", children: "Badges show count; disabled items appear muted" })
+        ] }) })
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      h,
+      {
+        componentName: "MacOSSidebar",
+        defaultValues: {
+          activeId: "inbox"
+        },
+        controlOverrides: [
+          {
+            name: "activeId",
+            type: "select",
+            options: [
+              "inbox",
+              "starred",
+              "sent",
+              "work",
+              "personal",
+              "archive"
+            ],
+            description: "Currently active item ID"
+          }
+        ],
+        includeProps: ["activeId"],
+        excludeProps: ["className", "sections", "onSelect", "header", "footer"],
+        children: (d) => /* @__PURE__ */ e(M, { ...d })
+      }
+    ),
+    /* @__PURE__ */ e(f, { componentName: "MacOSSidebar" }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      x,
+      {
+        language: "tsx",
+        code: `import { MacSidebarCard } from '@e-burgos/tucu-ui';
+
+const sections = [
+  {
+    label: 'Favorites',
+    items: [
+      { id: 'inbox', label: 'Inbox', icon: <InboxIcon />, badge: 12 },
+      { id: 'starred', label: 'Starred', icon: <StarIcon /> },
+    ],
+  },
+  {
+    label: 'Folders',
+    items: [
+      { id: 'work', label: 'Work', icon: <BriefcaseIcon /> },
+      { id: 'archive', label: 'Archive', icon: <ArchiveIcon />, disabled: true },
+    ],
+  },
+];
+
+function App() {
+  const [activeId, setActiveId] = useState('inbox');
+
+  return (
+    <div className="flex h-screen">
+      <MacSidebarCard
+        sections={sections}
+        activeId={activeId}
+        onSelect={setActiveId}
+        header={<h2>Mail</h2>}
+        footer={<PreferencesButton />}
+      />
+      <main className="flex-1">Content</main>
+    </div>
+  );
+}`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  W as MacOSSidebarSection,
+  W as default
+};

package/documentation/MacOSTahoeSection-DCwsZnWz.js

@@ -0,0 +1,98 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useState as r } from "react";
+import { H as i, x as l, bz as o, u as d, p as c, q as n, aj as m } from "../index-19KsCnyX.js";
+import { Sparkles as h, Home as u, Settings as f } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const b = () => /* @__PURE__ */ e("div", { className: "flex flex-col gap-6 w-full max-w-4xl mx-auto h-[400px]", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 h-full", children: [
+  /* @__PURE__ */ a(
+    "div",
+    {
+      "data-tucu": "drawer-content",
+      className: "p-6 flex flex-col gap-5 bg-[var(--macos-glass-regular-bg)] backdrop-blur-xl border border-[var(--macos-glass-regular-border)] rounded-2xl shadow-xl",
+      children: [
+        /* @__PURE__ */ a("div", { className: "flex flex-col gap-1 mb-2", children: [
+          /* @__PURE__ */ e("h3", { className: "text-[var(--macos-label)] font-semibold mb-0", children: "System Preferences" }),
+          /* @__PURE__ */ e("p", { className: "text-[var(--macos-secondary-label)] text-xs mb-0", children: "Manage liquid glass settings in Tahoe" })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[var(--macos-label)]", children: "Enable Notifications" }),
+          /* @__PURE__ */ e(d, { checked: !0, onChange: () => {
+          } })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[var(--macos-label)]", children: "Auto-play content" }),
+          /* @__PURE__ */ e(c, { defaultChecked: !0 })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(
+          n,
+          {
+            variant: "ghost",
+            options: [
+              { name: "Wi-Fi", value: "wifi" },
+              { name: "Bluetooth", value: "bt" }
+            ],
+            placeholder: "Search settings...",
+            className: "w-full"
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { className: "mt-auto", children: /* @__PURE__ */ e(l, { variant: "solid", fullWidth: !0, children: "Apply Changes" }) })
+      ]
+    }
+  ),
+  /* @__PURE__ */ a("div", { className: "flex flex-col gap-5 justify-between", children: [
+    /* @__PURE__ */ a("div", { "data-tucu": "panel-card", className: "p-5 flex flex-col gap-3", children: [
+      /* @__PURE__ */ e("h4", { className: "text-[var(--macos-label)] font-medium mb-1", children: "Standard Material" }),
+      /* @__PURE__ */ e("p", { className: "text-xs text-[var(--macos-secondary-label)] leading-relaxed", children: "Reading contents and tables use standard opaque material to keep contrast levels High regardless of the background imagery." })
+    ] }),
+    /* @__PURE__ */ e(m, { variant: "info", children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ e("strong", { children: "New Update Available" }),
+      /* @__PURE__ */ e("span", { children: "macOS 26 Tahoe is ready to be installed. Restart to apply changes." })
+    ] }) }),
+    /* @__PURE__ */ a("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ e(l, { variant: "ghost", fullWidth: !0, children: "Cancel" }),
+      /* @__PURE__ */ e(l, { variant: "solid", fullWidth: !0, children: "Restart Now" })
+    ] })
+  ] })
+] }) });
+function y() {
+  const [t, s] = r(!1);
+  return /* @__PURE__ */ a("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ e(
+      i,
+      {
+        title: "Liquid Glass",
+        description: "The variant='tahoe' setting forces the Layout to use Liquid Glass materials and Spatial backgrounds.",
+        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-blue-400/80 via-cyan-300/60 to-white/40 dark:from-blue-600/80 dark:via-cyan-500/60 dark:to-gray-800/40 rounded-full flex items-center justify-center shadow-lg border border-white/50 dark:border-cyan-400/50 backdrop-blur-md", children: /* @__PURE__ */ e(h, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-blue-700 dark:text-cyan-200 filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "relative w-full h-[600px] border border-border rounded-2xl overflow-hidden bg-[var(--macos-spatial-bg)] group",
+        style: {
+          background: "var(--macos-tahoe-root-bg, var(--macos-spatial-bg))"
+        },
+        children: t ? /* @__PURE__ */ e("div", { className: "w-full h-full relative p-0 m-0", children: /* @__PURE__ */ a(
+          o,
+          {
+            variant: "tahoe",
+            menuItems: [
+              { name: "Dashboard", path: "#", icon: /* @__PURE__ */ e(u, {}) },
+              { name: "Settings", path: "#", icon: /* @__PURE__ */ e(f, {}) }
+            ],
+            className: "absolute inset-0 rounded-2xl",
+            children: [
+              /* @__PURE__ */ e("div", { className: "macos-bg-spatial-aurora absolute inset-0 -z-10 rounded-2xl" }),
+              /* @__PURE__ */ e(b, {})
+            ]
+          }
+        ) }) : /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e(l, { onClick: () => s(!0), variant: "solid", children: "Launch Tahoe Demo" }) })
+      }
+    )
+  ] });
+}
+export {
+  b as TahoeDemoContent,
+  y as default
+};

package/documentation/MacOSTahoeSection-dZq5MXs6.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),a=require("../index-DMs_SmPq.js"),s=require("lucide-react");require("react-router-dom");require("react-dom");const l=()=>e.jsx("div",{className:"flex flex-col gap-6 w-full max-w-4xl mx-auto h-[400px]",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-8 h-full",children:[e.jsxs("div",{"data-tucu":"drawer-content",className:"p-6 flex flex-col gap-5 bg-[var(--macos-glass-regular-bg)] backdrop-blur-xl border border-[var(--macos-glass-regular-border)] rounded-2xl shadow-xl",children:[e.jsxs("div",{className:"flex flex-col gap-1 mb-2",children:[e.jsx("h3",{className:"text-[var(--macos-label)] font-semibold mb-0",children:"System Preferences"}),e.jsx("p",{className:"text-[var(--macos-secondary-label)] text-xs mb-0",children:"Manage liquid glass settings in Tahoe"})]}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-sm font-medium text-[var(--macos-label)]",children:"Enable Notifications"}),e.jsx(a.Switch,{checked:!0,onChange:()=>{}})]}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-sm font-medium text-[var(--macos-label)]",children:"Auto-play content"}),e.jsx(a.Checkbox,{defaultChecked:!0})]}),e.jsx("div",{className:"w-full",children:e.jsx(a.InputSearcher,{variant:"ghost",options:[{name:"Wi-Fi",value:"wifi"},{name:"Bluetooth",value:"bt"}],placeholder:"Search settings...",className:"w-full"})}),e.jsx("div",{className:"mt-auto",children:e.jsx(a.Button,{variant:"solid",fullWidth:!0,children:"Apply Changes"})})]}),e.jsxs("div",{className:"flex flex-col gap-5 justify-between",children:[e.jsxs("div",{"data-tucu":"panel-card",className:"p-5 flex flex-col gap-3",children:[e.jsx("h4",{className:"text-[var(--macos-label)] font-medium mb-1",children:"Standard Material"}),e.jsx("p",{className:"text-xs text-[var(--macos-secondary-label)] leading-relaxed",children:"Reading contents and tables use standard opaque material to keep contrast levels High regardless of the background imagery."})]}),e.jsx(a.Alert,{variant:"info",children:e.jsxs("div",{className:"flex flex-col gap-1",children:[e.jsx("strong",{children:"New Update Available"}),e.jsx("span",{children:"macOS 26 Tahoe is ready to be installed. Restart to apply changes."})]})}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(a.Button,{variant:"ghost",fullWidth:!0,children:"Cancel"}),e.jsx(a.Button,{variant:"solid",fullWidth:!0,children:"Restart Now"})]})]})]})});function n(){const[t,r]=i.useState(!1);return e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsx(a.HeroCard,{title:"Liquid Glass",description:"The variant='tahoe' setting forces the Layout to use Liquid Glass materials and Spatial backgrounds.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-400/80 via-cyan-300/60 to-white/40 dark:from-blue-600/80 dark:via-cyan-500/60 dark:to-gray-800/40 rounded-full flex items-center justify-center shadow-lg border border-white/50 dark:border-cyan-400/50 backdrop-blur-md",children:e.jsx(s.Sparkles,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-blue-700 dark:text-cyan-200 filter drop-shadow-lg"})})}),e.jsx("div",{className:"relative w-full h-[600px] border border-border rounded-2xl overflow-hidden bg-[var(--macos-spatial-bg)] group",style:{background:"var(--macos-tahoe-root-bg, var(--macos-spatial-bg))"},children:t?e.jsx("div",{className:"w-full h-full relative p-0 m-0",children:e.jsxs(a.MacOSLayout,{variant:"tahoe",menuItems:[{name:"Dashboard",path:"#",icon:e.jsx(s.Home,{})},{name:"Settings",path:"#",icon:e.jsx(s.Settings,{})}],className:"absolute inset-0 rounded-2xl",children:[e.jsx("div",{className:"macos-bg-spatial-aurora absolute inset-0 -z-10 rounded-2xl"}),e.jsx(l,{})]})}):e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:e.jsx(a.Button,{onClick:()=>r(!0),variant:"solid",children:"Launch Tahoe Demo"})})})]})}exports.TahoeDemoContent=l;exports.default=n;

package/documentation/MacOSTextStylesSection-DGktqEPk.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),i=require("lucide-react");require("react-router-dom");require("react");require("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 o(t){return t.weight.includes("700")?700:t.weight.includes("600")?600:t.weight.includes("500")?500:400}function c(t){return t.font==="SF Pro Display"?"var(--macos-font-display, 'Inter', system-ui)":"var(--macos-font-family, 'Inter', system-ui)"}const l=()=>{const{mode:t}=a.useTheme(),s=t==="dark";return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{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:e.jsx("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:e.jsx(i.Type,{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"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Font Family",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs("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:[e.jsx(i.Info,{className:"w-5 h-5 text-blue-500 shrink-0 mt-0.5"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-blue-800 dark:text-blue-200 font-medium",children:"Alternative Font: Inter Variable"}),e.jsxs(a.Typography,{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"," ",e.jsx("strong",{children:"Inter"})," (SIL Open Font License) as the primary typeface and ",e.jsx("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."]})]})]}),e.jsxs("div",{className:"grid grid-cols-1 sm:grid-cols-3 gap-4 mt-6",children:[e.jsxs("div",{className:"p-4 rounded-lg border border-border",style:{backgroundColor:s?"#1e1e1e":"#ffffff"},children:[e.jsx("p",{className:"text-lg mb-2",style:{fontFamily:"var(--macos-font-display, 'Inter', system-ui)",color:s?"rgba(255, 255, 255, 0.85)":"rgba(0, 0, 0, 0.85)"},children:"Inter (Display)"}),e.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400",children:"Used at ≥20pt. Replaces SF Pro Display for large headlines and titles."})]}),e.jsxs("div",{className:"p-4 rounded-lg border border-border",style:{backgroundColor:s?"#1e1e1e":"#ffffff"},children:[e.jsx("p",{className:"text-lg mb-2",style:{fontFamily:"var(--macos-font-family, 'Inter', system-ui)",color:s?"rgba(255, 255, 255, 0.85)":"rgba(0, 0, 0, 0.85)"},children:"Inter (Text)"}),e.jsx("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."})]}),e.jsxs("div",{className:"p-4 rounded-lg border border-border",style:{backgroundColor:s?"#1e1e1e":"#ffffff"},children:[e.jsx("p",{className:"text-lg mb-2",style:{fontFamily:"var(--macos-font-mono, 'JetBrains Mono', monospace)",color:s?"rgba(255, 255, 255, 0.85)":"rgba(0, 0, 0, 0.85)"},children:"JetBrains Mono"}),e.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400",children:"Monospaced variant. Replaces SF Mono for code, terminal output, and technical data."})]})]})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Type Scale",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"rounded-xl p-6 border border-border",style:{backgroundColor:s?"#1e1e1e":"#ffffff"},children:e.jsx("div",{className:"flex flex-col gap-4",children:n.map(r=>e.jsxs("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:[e.jsx("span",{className:"shrink-0",style:{fontFamily:c(r),fontSize:r.size,lineHeight:r.leading,fontWeight:o(r),letterSpacing:r.tracking,color:s?"rgba(255, 255, 255, 0.85)":"rgba(0, 0, 0, 0.85)"},children:r.name}),e.jsxs("div",{className:"flex flex-wrap gap-3 text-[10px] font-mono text-gray-400",children:[e.jsx("span",{children:r.size}),e.jsxs("span",{children:["/ ",r.leading]}),e.jsx("span",{children:r.weight}),r.tracking!=="0"&&e.jsxs("span",{children:["tracking: ",r.tracking]})]})]},r.name))})})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Label Colors",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(a.Typography,{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 ",s?"dark":"light"," appearance values."]}),e.jsx("div",{className:"rounded-xl p-6 border border-border",style:{backgroundColor:s?"#1e1e1e":"#ffffff"},children:e.jsxs("div",{className:"space-y-3",children:[e.jsxs("p",{style:{fontFamily:"var(--macos-font-family, 'Inter', system-ui)",fontSize:"13px",lineHeight:"16px",color:s?"rgba(255, 255, 255, 0.85)":"rgba(0, 0, 0, 0.85)"},children:[e.jsx("span",{className:"inline-block w-20 text-[10px] font-mono opacity-50",children:"Primary"})," ","The quick brown fox jumps over the lazy dog"]}),e.jsxs("p",{style:{fontFamily:"var(--macos-font-family, 'Inter', system-ui)",fontSize:"13px",lineHeight:"16px",color:s?"rgba(235, 235, 245, 0.6)":"rgba(60, 60, 67, 0.6)"},children:[e.jsx("span",{className:"inline-block w-20 text-[10px] font-mono opacity-70",children:"Secondary"})," ","The quick brown fox jumps over the lazy dog"]}),e.jsxs("p",{style:{fontFamily:"var(--macos-font-family, 'Inter', system-ui)",fontSize:"13px",lineHeight:"16px",color:s?"rgba(235, 235, 245, 0.3)":"rgba(60, 60, 67, 0.3)"},children:[e.jsx("span",{className:"inline-block w-20 text-[10px] font-mono opacity-70",children:"Tertiary"})," ","The quick brown fox jumps over the lazy dog"]})]})})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"CSS Variables",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{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})})})})]})};exports.MacOSTextStylesSection=l;exports.default=l;