@e-burgos/tucu-ui 2.5.0 → 2.6.0

package/documentation/MacOSBackgroundsSection-CFzGRTIi.js

@@ -0,0 +1,293 @@
+import { jsxs as a, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { ay as m, H as p, C as s, a as d, T as l, az as o, aA as i, y as g } from "../index-DoxeCFUJ.js";
+import { Image as b } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const h = [
+  {
+    id: "base",
+    name: "Base",
+    desc: "CSS-only spatial gradient generated with tokens. Used as the default body/window background. No image assets needed — adapts automatically between light and dark modes via CSS custom properties.",
+    dimensions: "Fluid (CSS gradient)",
+    usage: "Body, root window, app shell background"
+  },
+  {
+    id: "wave",
+    name: "Wave",
+    desc: "Full-width decorative background with flowing organic shapes. Designed for desktop/tablet viewports as hero sections or immersive landing pages.",
+    dimensions: "1512 × 982",
+    usage: "Hero sections, landing pages, desktop full-screen"
+  },
+  {
+    id: "wallpaper",
+    name: "Wallpaper",
+    desc: "Compact landscape format optimized for card-like areas, banners, or contained sections where a spatial background adds depth without covering the full viewport.",
+    dimensions: "1080 × 560",
+    usage: "Banners, feature sections, contained backgrounds"
+  },
+  {
+    id: "mobile",
+    name: "Mobile",
+    desc: "Portrait-oriented background asset optimized for mobile viewports and tall narrow containers.",
+    dimensions: "402 × 874",
+    usage: "Mobile screens, narrow containers, portrait layouts"
+  }
+], N = () => {
+  const { mode: n } = m(), r = n === "dark";
+  return /* @__PURE__ */ a(c, { children: [
+    /* @__PURE__ */ e(
+      p,
+      {
+        title: "Backgrounds",
+        description: "macOS Tahoe provides 4 background types optimized for different viewport sizes and use cases. All adapt between light and dark automatically.",
+        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-cyan-400 via-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-cyan-400/50", children: /* @__PURE__ */ e(b, { 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(d, { title: "Background Types", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ e(
+        l,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-6",
+          children: "Each background type is designed for a specific screen context. Choose the appropriate format based on your layout's viewport and orientation requirements."
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4", children: h.map((t) => /* @__PURE__ */ a(
+        "div",
+        {
+          className: "p-4 rounded-xl border border-border space-y-2",
+          children: [
+            /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "w-3 h-3 rounded-full",
+                  style: {
+                    backgroundColor: t.id === "base" ? r ? "#0a84ff" : "#007aff" : t.id === "wave" ? r ? "#30d158" : "#34c759" : t.id === "wallpaper" ? r ? "#ff9f0a" : "#ff9500" : r ? "#bf5af2" : "#af52de"
+                  }
+                }
+              ),
+              /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: t.name })
+            ] }),
+            /* @__PURE__ */ e("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t.desc }),
+            /* @__PURE__ */ a("div", { className: "pt-2 border-t border-[var(--color-border)] space-y-1", children: [
+              /* @__PURE__ */ e("p", { className: "text-[10px] font-mono text-gray-400", children: t.dimensions }),
+              /* @__PURE__ */ e("p", { className: "text-[10px] text-gray-400", children: t.usage })
+            ] })
+          ]
+        },
+        t.id
+      )) })
+    ] }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Base (CSS Spatial Gradient)", 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: [
+            "Generated entirely with CSS custom properties. Currently used as the body background in the demo. Available classes:",
+            " ",
+            /* @__PURE__ */ e("code", { className: "text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono", children: "macos-bg-spatial-aurora" }),
+            ",",
+            " ",
+            /* @__PURE__ */ e("code", { className: "text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono", children: "macos-bg-spatial-depth" }),
+            ",",
+            " ",
+            /* @__PURE__ */ e("code", { className: "text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono", children: "macos-bg-spatial-demo" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+        /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "relative w-full h-40 rounded-xl overflow-hidden border border-border",
+              style: {
+                backgroundColor: r ? "#131318" : "#f0f2f7"
+              },
+              children: /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "absolute inset-0 rounded-xl",
+                  style: {
+                    background: r ? "radial-gradient(circle at 28% 32%, rgba(18, 60, 100, 0.8) 0%, transparent 42%), radial-gradient(circle at 72% 68%, rgba(55, 30, 100, 0.6) 0%, transparent 42%)" : "radial-gradient(circle at 28% 32%, rgba(142, 200, 255, 0.45) 0%, transparent 42%), radial-gradient(circle at 72% 68%, rgba(170, 150, 255, 0.28) 0%, transparent 42%)",
+                    filter: "blur(30px)"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e("p", { className: "text-xs font-medium text-center text-gray-700 dark:text-gray-300", children: "Aurora" }),
+          /* @__PURE__ */ e("p", { className: "text-[10px] text-center text-gray-400", children: "Animated spatial aurora" })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "w-full h-40 rounded-xl border border-border",
+              style: {
+                background: r ? "linear-gradient(160deg, #141418 0%, #18181e 40%, #191520 70%, #141418 100%)" : "linear-gradient(160deg, #f0f2f6 0%, #eaedf4 40%, #f2f0f8 70%, #eef2f6 100%)"
+              }
+            }
+          ),
+          /* @__PURE__ */ e("p", { className: "text-xs font-medium text-center text-gray-700 dark:text-gray-300", children: "Depth" }),
+          /* @__PURE__ */ e("p", { className: "text-[10px] text-center text-gray-400", children: "Sober, data-focused" })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "w-full h-40 rounded-xl border border-border",
+              style: {
+                background: r ? "radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0, 60, 160, 0.55) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(80, 0, 160, 0.4) 0%, transparent 55%), #101014" : "radial-gradient(ellipse 80% 60% at 20% 10%, rgba(100, 180, 255, 0.4) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(160, 120, 255, 0.3) 0%, transparent 55%), #f0f2f7"
+              }
+            }
+          ),
+          /* @__PURE__ */ e("p", { className: "text-xs font-medium text-center text-gray-700 dark:text-gray-300", children: "Demo" }),
+          /* @__PURE__ */ e("p", { className: "text-[10px] text-center text-gray-400", children: "Expressive, showcases" })
+        ] })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Wave", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ e(
+        l,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-2",
+          children: "Full-width decorative background for desktop/tablet hero sections."
+        }
+      ),
+      /* @__PURE__ */ e("p", { className: "text-[10px] font-mono text-gray-400 mb-4", children: "1512 × 982 — Landscape (desktop full-screen)" }),
+      /* @__PURE__ */ e("div", { className: "rounded-xl overflow-hidden border border-border", children: /* @__PURE__ */ e(
+        o,
+        {
+          mode: "absolute",
+          variant: "wave",
+          className: "rounded-xl !relative !inset-auto !z-auto",
+          style: { height: "320px" }
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: "mt-3 p-3 rounded-lg bg-gray-100 dark:bg-gray-800/50", children: /* @__PURE__ */ a("p", { className: "text-[11px] font-mono text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ e("span", { className: "text-gray-700 dark:text-gray-300", children: "url:" }),
+        " ",
+        i("wave", r)
+      ] }) })
+    ] }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Wallpaper", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ e(
+        l,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-2",
+          children: "Compact landscape format for banners, feature sections, and contained areas."
+        }
+      ),
+      /* @__PURE__ */ e("p", { className: "text-[10px] font-mono text-gray-400 mb-4", children: "1080 × 560 — Landscape (contained sections)" }),
+      /* @__PURE__ */ e("div", { className: "rounded-xl overflow-hidden border border-border", children: /* @__PURE__ */ e(
+        o,
+        {
+          mode: "absolute",
+          variant: "wallpaper",
+          className: "rounded-xl !relative !inset-auto !z-auto",
+          style: { height: "280px" }
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: "mt-3 p-3 rounded-lg bg-gray-100 dark:bg-gray-800/50", children: /* @__PURE__ */ a("p", { className: "text-[11px] font-mono text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ e("span", { className: "text-gray-700 dark:text-gray-300", children: "url:" }),
+        " ",
+        i("wallpaper", r)
+      ] }) })
+    ] }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Mobile", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ e(
+        l,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-2",
+          children: "Portrait-oriented asset for mobile viewports and narrow containers."
+        }
+      ),
+      /* @__PURE__ */ e("p", { className: "text-[10px] font-mono text-gray-400 mb-4", children: "402 × 874 — Portrait (mobile screens)" }),
+      /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: "rounded-xl overflow-hidden border border-border",
+          style: { width: "220px", height: "478px" },
+          children: /* @__PURE__ */ e(
+            o,
+            {
+              mode: "absolute",
+              variant: "mobile",
+              className: "rounded-xl w-full h-full !relative !inset-auto !z-auto"
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: "mt-3 p-3 rounded-lg bg-gray-100 dark:bg-gray-800/50", children: /* @__PURE__ */ a("p", { className: "text-[11px] font-mono text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ e("span", { className: "text-gray-700 dark:text-gray-300", children: "url:" }),
+        " ",
+        i("mobile", r)
+      ] }) })
+    ] }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Screen Size Mapping", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ e(
+        l,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: "Recommended background type per viewport breakpoint."
+        }
+      ),
+      /* @__PURE__ */ e(
+        g,
+        {
+          columns: [
+            { key: "viewport", label: "Viewport" },
+            {
+              key: "breakpoint",
+              label: "Breakpoint",
+              className: "font-mono"
+            },
+            { key: "background", label: "Background" },
+            { key: "asset", label: "Asset", className: "font-mono" }
+          ],
+          data: [
+            {
+              viewport: "Mobile",
+              breakpoint: "< 640px",
+              background: "Mobile",
+              asset: `${r ? "dark" : "light"}-mobile.svg`
+            },
+            {
+              viewport: "Tablet",
+              breakpoint: "640–1024px",
+              background: "Wallpaper",
+              asset: `${r ? "dark" : "light"}-wallpaper.svg`
+            },
+            {
+              viewport: "Desktop",
+              breakpoint: "> 1024px",
+              background: "Wave",
+              asset: `${r ? "dark" : "light"}-wave.svg`
+            },
+            {
+              viewport: "Any",
+              breakpoint: "All",
+              background: "Base (CSS)",
+              asset: "No asset needed"
+            }
+          ],
+          hoverable: !0,
+          striped: !1
+        }
+      )
+    ] }) }) })
+  ] });
+};
+export {
+  N as MacOSBackgroundsSection,
+  N as default
+};

package/documentation/MacOSColorsSection-BLdQLmVU.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../index-DWDUS-PU.js"),b=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const g=[{label:"Blue",light:"#007aff",dark:"#0a84ff"},{label:"Green",light:"#34c759",dark:"#30d158"},{label:"Orange",light:"#ff9500",dark:"#ff9f0a"},{label:"Red",light:"#ff3b30",dark:"#ff453a"},{label:"Yellow",light:"#ffcc00",dark:"#ffd60a"},{label:"Purple",light:"#af52de",dark:"#bf5af2"},{label:"Pink",light:"#ff2d55",dark:"#ff375f"},{label:"Teal",light:"#5ac8fa",dark:"#64d2ff"},{label:"Indigo",light:"#5856d6",dark:"#5e5ce6"}],m=[{label:"Gray",light:"#8e8e93",dark:"#8e8e93"},{label:"Gray 2",light:"#aeaeb2",dark:"#636366"},{label:"Gray 3",light:"#c7c7cc",dark:"#48484a"},{label:"Gray 4",light:"#d1d1d6",dark:"#3a3a3c"},{label:"Gray 5",light:"#e5e5ea",dark:"#2c2c2e"},{label:"Gray 6",light:"#f2f2f7",dark:"#1c1c1e"}],s={light:[{label:"Primary",color:"rgba(0, 0, 0, 0.85)",opacity:.85,desc:"Main text"},{label:"Secondary",color:"rgba(60, 60, 67, 0.6)",opacity:.6,desc:"Subtitles"},{label:"Tertiary",color:"rgba(60, 60, 67, 0.3)",opacity:.3,desc:"Placeholders"},{label:"Quaternary",color:"rgba(60, 60, 67, 0.18)",opacity:.18,desc:"Disabled"},{label:"Quinary",color:"rgba(60, 60, 67, 0.05)",opacity:.05,desc:"Faint"}],dark:[{label:"Primary",color:"rgba(255, 255, 255, 0.85)",opacity:.85,desc:"Main text"},{label:"Secondary",color:"rgba(235, 235, 245, 0.6)",opacity:.6,desc:"Subtitles"},{label:"Tertiary",color:"rgba(235, 235, 245, 0.3)",opacity:.3,desc:"Placeholders"},{label:"Quaternary",color:"rgba(235, 235, 245, 0.18)",opacity:.18,desc:"Disabled"},{label:"Quinary",color:"rgba(235, 235, 245, 0.05)",opacity:.05,desc:"Faint"}]},t={light:[{label:"Label",value:"rgba(0, 0, 0, 0.85)"},{label:"Secondary Label",value:"rgba(60, 60, 67, 0.6)"},{label:"Tertiary Label",value:"rgba(60, 60, 67, 0.3)"},{label:"Separator",value:"rgba(60, 60, 67, 0.29)"},{label:"Window BG",value:"#ececec"},{label:"Control BG",value:"#ffffff"},{label:"Accent",value:"#007aff"},{label:"Link",value:"#0068da"}],dark:[{label:"Label",value:"rgba(255, 255, 255, 0.85)"},{label:"Secondary Label",value:"rgba(235, 235, 245, 0.6)"},{label:"Tertiary Label",value:"rgba(235, 235, 245, 0.3)"},{label:"Separator",value:"rgba(84, 84, 88, 0.65)"},{label:"Window BG",value:"#1e1e1e"},{label:"Control BG",value:"#1e1e1e"},{label:"Accent",value:"#0a84ff"},{label:"Link",value:"#419cff"}]},d=()=>{const{mode:c}=l.useTheme(),r=c==="dark",i=r?s.dark:s.light,o=r?t.dark:t.light;return e.jsxs(e.Fragment,{children:[e.jsx(l.HeroCard,{title:"Colors",description:"macOS system color palette based on Apple HIG. All colors adapt between light and dark appearances automatically.",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-red-400 via-blue-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg border border-red-400/50",children:e.jsx(b.Palette,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Label Hierarchy",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(l.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"Text labels use varying opacity levels to create visual hierarchy. Colors adapt based on the current appearance mode."}),e.jsx("div",{className:"rounded-xl p-6 border border-border",style:{backgroundColor:r?"#1e1e1e":"#ffffff"},children:e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4",children:i.map(a=>e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx("div",{className:"w-full h-16 rounded-lg border border-border flex items-center justify-center",style:{backgroundColor:a.color}}),e.jsx("span",{className:"text-sm font-medium",style:{color:a.color},children:a.label}),e.jsxs("span",{className:"text-[10px] text-gray-400",children:[Math.round(a.opacity*100),"% — ",a.desc]})]},a.label))})})]})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"System Colors",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(l.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["9 vibrant system colors used for accents, charts, and interactive elements. Showing ",r?"dark":"light"," mode values."]}),e.jsx("div",{className:"grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-9 gap-3",children:g.map(a=>e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx("div",{className:"w-full h-16 rounded-xl shadow-sm",style:{backgroundColor:r?a.dark:a.light}}),e.jsx("span",{className:"text-xs font-medium text-gray-700 dark:text-gray-300",children:a.label}),e.jsx("span",{className:"text-[10px] text-gray-400 font-mono",children:r?a.dark:a.light})]},a.label))})]})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Gray Scale",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(l.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["6 neutral grays for backgrounds, borders, and disabled states. Showing ",r?"dark":"light"," mode values."]}),e.jsx("div",{className:"grid grid-cols-3 sm:grid-cols-6 gap-3",children:m.map(a=>e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx("div",{className:"w-full h-16 rounded-xl border border-border",style:{backgroundColor:r?a.dark:a.light}}),e.jsx("span",{className:"text-xs font-medium text-gray-700 dark:text-gray-300",children:a.label}),e.jsx("span",{className:"text-[10px] text-gray-400 font-mono",children:r?a.dark:a.light})]},a.label))})]})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Semantic Colors",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(l.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["Purpose-driven tokens mapped to CSS variables. Values shown correspond to the current ",r?"dark":"light"," appearance."]}),e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-4 gap-3",children:o.map(a=>e.jsxs("div",{className:"flex flex-col gap-2 p-3 rounded-lg border border-border",children:[e.jsx("div",{className:"w-full h-10 rounded-md border border-border",style:{backgroundColor:a.value}}),e.jsx("span",{className:"text-xs font-medium text-gray-700 dark:text-gray-300",children:a.label}),e.jsx("span",{className:"text-[10px] text-gray-400 font-mono break-all",children:a.value})]},a.label))})]})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Tinted Colors",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(l.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"System blue applied at varying opacities creates tinted backgrounds for selections and active states."}),e.jsx("div",{className:"flex flex-wrap gap-3",children:[.05,.1,.15,.2,.3,.5].map(a=>{const n=r?`rgba(10, 132, 255, ${a})`:`rgba(0, 122, 255, ${a})`;return e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx("div",{className:"w-20 h-14 rounded-lg border border-border",style:{backgroundColor:n}}),e.jsxs("span",{className:"text-[10px] text-gray-400 font-mono",children:[Math.round(a*100),"%"]})]},a)})})]})})})]})};exports.MacOSColorsSection=d;exports.default=d;

package/documentation/MacOSColorsSection-C7Z8okVD.js

@@ -0,0 +1,305 @@
+import { jsxs as l, Fragment as g, jsx as e } from "react/jsx-runtime";
+import { ay as h, H as f, C as t, a as s, T as d } from "../index-DoxeCFUJ.js";
+import { Palette as p } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const u = [
+  { label: "Blue", light: "#007aff", dark: "#0a84ff" },
+  { label: "Green", light: "#34c759", dark: "#30d158" },
+  { label: "Orange", light: "#ff9500", dark: "#ff9f0a" },
+  { label: "Red", light: "#ff3b30", dark: "#ff453a" },
+  { label: "Yellow", light: "#ffcc00", dark: "#ffd60a" },
+  { label: "Purple", light: "#af52de", dark: "#bf5af2" },
+  { label: "Pink", light: "#ff2d55", dark: "#ff375f" },
+  { label: "Teal", light: "#5ac8fa", dark: "#64d2ff" },
+  { label: "Indigo", light: "#5856d6", dark: "#5e5ce6" }
+], y = [
+  { label: "Gray", light: "#8e8e93", dark: "#8e8e93" },
+  { label: "Gray 2", light: "#aeaeb2", dark: "#636366" },
+  { label: "Gray 3", light: "#c7c7cc", dark: "#48484a" },
+  { label: "Gray 4", light: "#d1d1d6", dark: "#3a3a3c" },
+  { label: "Gray 5", light: "#e5e5ea", dark: "#2c2c2e" },
+  { label: "Gray 6", light: "#f2f2f7", dark: "#1c1c1e" }
+], c = {
+  light: [
+    {
+      label: "Primary",
+      color: "rgba(0, 0, 0, 0.85)",
+      opacity: 0.85,
+      desc: "Main text"
+    },
+    {
+      label: "Secondary",
+      color: "rgba(60, 60, 67, 0.6)",
+      opacity: 0.6,
+      desc: "Subtitles"
+    },
+    {
+      label: "Tertiary",
+      color: "rgba(60, 60, 67, 0.3)",
+      opacity: 0.3,
+      desc: "Placeholders"
+    },
+    {
+      label: "Quaternary",
+      color: "rgba(60, 60, 67, 0.18)",
+      opacity: 0.18,
+      desc: "Disabled"
+    },
+    {
+      label: "Quinary",
+      color: "rgba(60, 60, 67, 0.05)",
+      opacity: 0.05,
+      desc: "Faint"
+    }
+  ],
+  dark: [
+    {
+      label: "Primary",
+      color: "rgba(255, 255, 255, 0.85)",
+      opacity: 0.85,
+      desc: "Main text"
+    },
+    {
+      label: "Secondary",
+      color: "rgba(235, 235, 245, 0.6)",
+      opacity: 0.6,
+      desc: "Subtitles"
+    },
+    {
+      label: "Tertiary",
+      color: "rgba(235, 235, 245, 0.3)",
+      opacity: 0.3,
+      desc: "Placeholders"
+    },
+    {
+      label: "Quaternary",
+      color: "rgba(235, 235, 245, 0.18)",
+      opacity: 0.18,
+      desc: "Disabled"
+    },
+    {
+      label: "Quinary",
+      color: "rgba(235, 235, 245, 0.05)",
+      opacity: 0.05,
+      desc: "Faint"
+    }
+  ]
+}, i = {
+  light: [
+    { label: "Label", value: "rgba(0, 0, 0, 0.85)" },
+    { label: "Secondary Label", value: "rgba(60, 60, 67, 0.6)" },
+    { label: "Tertiary Label", value: "rgba(60, 60, 67, 0.3)" },
+    { label: "Separator", value: "rgba(60, 60, 67, 0.29)" },
+    { label: "Window BG", value: "#ececec" },
+    { label: "Control BG", value: "#ffffff" },
+    { label: "Accent", value: "#007aff" },
+    { label: "Link", value: "#0068da" }
+  ],
+  dark: [
+    { label: "Label", value: "rgba(255, 255, 255, 0.85)" },
+    { label: "Secondary Label", value: "rgba(235, 235, 245, 0.6)" },
+    { label: "Tertiary Label", value: "rgba(235, 235, 245, 0.3)" },
+    { label: "Separator", value: "rgba(84, 84, 88, 0.65)" },
+    { label: "Window BG", value: "#1e1e1e" },
+    { label: "Control BG", value: "#1e1e1e" },
+    { label: "Accent", value: "#0a84ff" },
+    { label: "Link", value: "#419cff" }
+  ]
+}, S = () => {
+  const { mode: o } = h(), r = o === "dark", n = r ? c.dark : c.light, b = r ? i.dark : i.light;
+  return /* @__PURE__ */ l(g, { children: [
+    /* @__PURE__ */ e(
+      f,
+      {
+        title: "Colors",
+        description: "macOS system color palette based on Apple HIG. All colors adapt between light and dark appearances automatically.",
+        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-red-400 via-blue-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg border border-red-400/50", children: /* @__PURE__ */ e(p, { 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(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Label Hierarchy", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ e(
+        d,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: "Text labels use varying opacity levels to create visual hierarchy. Colors adapt based on the current appearance mode."
+        }
+      ),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: "rounded-xl p-6 border border-border",
+          style: { backgroundColor: r ? "#1e1e1e" : "#ffffff" },
+          children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4", children: n.map((a) => /* @__PURE__ */ l(
+            "div",
+            {
+              className: "flex flex-col items-center gap-2",
+              children: [
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: "w-full h-16 rounded-lg border border-border flex items-center justify-center",
+                    style: { backgroundColor: a.color }
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: "text-sm font-medium",
+                    style: { color: a.color },
+                    children: a.label
+                  }
+                ),
+                /* @__PURE__ */ l("span", { className: "text-[10px] text-gray-400", children: [
+                  Math.round(a.opacity * 100),
+                  "% — ",
+                  a.desc
+                ] })
+              ]
+            },
+            a.label
+          )) })
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "System Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ l(
+        d,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: [
+            "9 vibrant system colors used for accents, charts, and interactive elements. Showing ",
+            r ? "dark" : "light",
+            " mode values."
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-9 gap-3", children: u.map((a) => /* @__PURE__ */ l(
+        "div",
+        {
+          className: "flex flex-col items-center gap-2",
+          children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "w-full h-16 rounded-xl shadow-sm",
+                style: {
+                  backgroundColor: r ? a.dark : a.light
+                }
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: "text-xs font-medium text-gray-700 dark:text-gray-300", children: a.label }),
+            /* @__PURE__ */ e("span", { className: "text-[10px] text-gray-400 font-mono", children: r ? a.dark : a.light })
+          ]
+        },
+        a.label
+      )) })
+    ] }) }) }),
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Gray Scale", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ l(
+        d,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: [
+            "6 neutral grays for backgrounds, borders, and disabled states. Showing ",
+            r ? "dark" : "light",
+            " mode values."
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-3 sm:grid-cols-6 gap-3", children: y.map((a) => /* @__PURE__ */ l(
+        "div",
+        {
+          className: "flex flex-col items-center gap-2",
+          children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "w-full h-16 rounded-xl border border-border",
+                style: {
+                  backgroundColor: r ? a.dark : a.light
+                }
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: "text-xs font-medium text-gray-700 dark:text-gray-300", children: a.label }),
+            /* @__PURE__ */ e("span", { className: "text-[10px] text-gray-400 font-mono", children: r ? a.dark : a.light })
+          ]
+        },
+        a.label
+      )) })
+    ] }) }) }),
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Semantic Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ l(
+        d,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: [
+            "Purpose-driven tokens mapped to CSS variables. Values shown correspond to the current ",
+            r ? "dark" : "light",
+            " appearance."
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-3", children: b.map((a) => /* @__PURE__ */ l(
+        "div",
+        {
+          className: "flex flex-col gap-2 p-3 rounded-lg border border-border",
+          children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "w-full h-10 rounded-md border border-border",
+                style: { backgroundColor: a.value }
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: "text-xs font-medium text-gray-700 dark:text-gray-300", children: a.label }),
+            /* @__PURE__ */ e("span", { className: "text-[10px] text-gray-400 font-mono break-all", children: a.value })
+          ]
+        },
+        a.label
+      )) })
+    ] }) }) }),
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Tinted Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ e(
+        d,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: "System blue applied at varying opacities creates tinted backgrounds for selections and active states."
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-3", children: [0.05, 0.1, 0.15, 0.2, 0.3, 0.5].map((a) => {
+        const m = r ? `rgba(10, 132, 255, ${a})` : `rgba(0, 122, 255, ${a})`;
+        return /* @__PURE__ */ l(
+          "div",
+          {
+            className: "flex flex-col items-center gap-2",
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "w-20 h-14 rounded-lg border border-border",
+                  style: { backgroundColor: m }
+                }
+              ),
+              /* @__PURE__ */ l("span", { className: "text-[10px] text-gray-400 font-mono", children: [
+                Math.round(a * 100),
+                "%"
+              ] })
+            ]
+          },
+          a
+        );
+      }) })
+    ] }) }) })
+  ] });
+};
+export {
+  S as MacOSColorsSection,
+  S as default
+};