@e-burgos/tucu-ui 2.6.0 → 2.7.1

package/documentation/MacOSBackgroundsSection-CFzGRTIi.js

@@ -1,293 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,305 +0,0 @@
-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
-};