@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/TahoeWidgetSection-BUaOmNIc.js

@@ -0,0 +1,121 @@
+import { jsxs as t, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { H as d, C as l, a as c, bF as a, bG as i, c as n, P as m, A as h } from "../index-19KsCnyX.js";
+import { LayoutDashboard as r, CloudSun as x, Calendar as p, Activity as u, StickyNote as g } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const T = () => /* @__PURE__ */ t(o, { children: [
+  /* @__PURE__ */ e(
+    d,
+    {
+      title: "Widget",
+      description: "Glass-material widget cards in four fixed sizes, matching Apple HIG widget dimensions. Includes an optional header with icon, title, subtitle, and actions.",
+      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-violet-500 via-purple-500 to-fuchsia-600 rounded-full flex items-center justify-center shadow-lg border border-violet-500/50", children: /* @__PURE__ */ e(r, { 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(l, { children: /* @__PURE__ */ e(c, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-5 items-end", children: [
+    /* @__PURE__ */ t(a, { size: "sm", children: [
+      /* @__PURE__ */ e(
+        i,
+        {
+          title: "Weather",
+          icon: /* @__PURE__ */ e(x, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-3xl font-light text-[var(--macos-tahoe-text)]", children: "24°" }) })
+    ] }),
+    /* @__PURE__ */ t(a, { size: "md", children: [
+      /* @__PURE__ */ e(
+        i,
+        {
+          title: "Calendar",
+          subtitle: "Today",
+          icon: /* @__PURE__ */ e(p, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "flex flex-1 items-center px-4", children: /* @__PURE__ */ t("div", { className: "text-[var(--macos-tahoe-text)]", children: [
+        /* @__PURE__ */ e("p", { className: "text-[20px] font-semibold", children: "December 15" }),
+        /* @__PURE__ */ e("p", { className: "text-[13px] text-[var(--macos-tahoe-text-muted)]", children: "3 upcoming events" })
+      ] }) })
+    ] })
+  ] }) }) }),
+  /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(c, { title: "Large & Extra Large", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-5 items-end", children: [
+    /* @__PURE__ */ t(a, { size: "lg", children: [
+      /* @__PURE__ */ e(
+        i,
+        {
+          title: "Activity",
+          icon: /* @__PURE__ */ e(u, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center p-3", children: /* @__PURE__ */ t("div", { className: "text-center text-[var(--macos-tahoe-text)]", children: [
+        /* @__PURE__ */ e("p", { className: "text-[36px] font-light", children: "520" }),
+        /* @__PURE__ */ e("p", { className: "text-[11px] uppercase tracking-wider text-[var(--macos-tahoe-text-muted)]", children: "calories" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ t(a, { size: "xl", children: [
+      /* @__PURE__ */ e(
+        i,
+        {
+          title: "Notes",
+          subtitle: "3 notes",
+          icon: /* @__PURE__ */ e(g, { className: "h-4 w-4" }),
+          actions: /* @__PURE__ */ e("button", { className: "text-[12px] text-[var(--macos-tahoe-accent)]", children: "View All" })
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "flex-1 space-y-2 overflow-auto p-3.5 pt-2", children: ["Meeting notes", "Shopping list", "Ideas for project"].map(
+        (s) => /* @__PURE__ */ e(
+          "div",
+          {
+            className: "rounded-lg bg-[var(--macos-glass-clear-bg)] p-2.5 text-[13px] text-[var(--macos-tahoe-text)] backdrop-blur-sm border border-[var(--macos-glass-border-subtle)]",
+            children: s
+          },
+          s
+        )
+      ) })
+    ] })
+  ] }) }) }),
+  /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(c, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e(
+    n,
+    {
+      code: `import { MacOSTahoeWidget, MacOSTahoeWidgetHeader } from '@e-burgos/tucu-ui';
+
+<MacOSTahoeWidget size="md">
+  <MacOSTahoeWidgetHeader
+    title="Calendar"
+    subtitle="Today"
+    icon={<CalendarIcon />}
+    actions={<button>View All</button>}
+  />
+  <div className="p-4">Widget content</div>
+</MacOSTahoeWidget>
+
+// Sizes: 'sm' (170×170), 'md' (364×170), 'lg' (170×364), 'xl' (364×364)`,
+      language: "tsx"
+    }
+  ) }) }),
+  /* @__PURE__ */ e(
+    m,
+    {
+      componentName: "MacOSTahoeWidget",
+      defaultValues: { size: "md" },
+      includeProps: ["size"],
+      excludeProps: ["className"],
+      children: (s) => /* @__PURE__ */ e("div", { className: "flex justify-center p-4", children: /* @__PURE__ */ t(a, { ...s, children: [
+        /* @__PURE__ */ e(
+          i,
+          {
+            title: "Preview",
+            icon: /* @__PURE__ */ e(r, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-2xl font-light text-[var(--macos-tahoe-text)]", children: "Content" }) })
+      ] }) })
+    }
+  ),
+  /* @__PURE__ */ e(h, { componentName: "MacOSTahoeWidget" })
+] });
+export {
+  T as TahoeWidgetSection,
+  T as default
+};

package/documentation/TahoeWidgetSection-sxxKh9VM.js

@@ -0,0 +1,13 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DMs_SmPq.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Widget",description:"Glass-material widget cards in four fixed sizes, matching Apple HIG widget dimensions. Includes an optional header with icon, title, subtitle, and actions.",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-violet-500 via-purple-500 to-fuchsia-600 rounded-full flex items-center justify-center shadow-lg border border-violet-500/50",children:e.jsx(a.LayoutDashboard,{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(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:e.jsxs("div",{className:"flex flex-wrap gap-5 items-end",children:[e.jsxs(t.MacOSTahoeWidget,{size:"sm",children:[e.jsx(t.MacOSTahoeWidgetHeader,{title:"Weather",icon:e.jsx(a.CloudSun,{className:"h-4 w-4"})}),e.jsx("div",{className:"flex flex-1 items-center justify-center",children:e.jsx("span",{className:"text-3xl font-light text-[var(--macos-tahoe-text)]",children:"24°"})})]}),e.jsxs(t.MacOSTahoeWidget,{size:"md",children:[e.jsx(t.MacOSTahoeWidgetHeader,{title:"Calendar",subtitle:"Today",icon:e.jsx(a.Calendar,{className:"h-4 w-4"})}),e.jsx("div",{className:"flex flex-1 items-center px-4",children:e.jsxs("div",{className:"text-[var(--macos-tahoe-text)]",children:[e.jsx("p",{className:"text-[20px] font-semibold",children:"December 15"}),e.jsx("p",{className:"text-[13px] text-[var(--macos-tahoe-text-muted)]",children:"3 upcoming events"})]})})]})]})})}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Large & Extra Large",className:"mt-2 mb-2",children:e.jsxs("div",{className:"flex flex-wrap gap-5 items-end",children:[e.jsxs(t.MacOSTahoeWidget,{size:"lg",children:[e.jsx(t.MacOSTahoeWidgetHeader,{title:"Activity",icon:e.jsx(a.Activity,{className:"h-4 w-4"})}),e.jsx("div",{className:"flex flex-1 items-center justify-center p-3",children:e.jsxs("div",{className:"text-center text-[var(--macos-tahoe-text)]",children:[e.jsx("p",{className:"text-[36px] font-light",children:"520"}),e.jsx("p",{className:"text-[11px] uppercase tracking-wider text-[var(--macos-tahoe-text-muted)]",children:"calories"})]})})]}),e.jsxs(t.MacOSTahoeWidget,{size:"xl",children:[e.jsx(t.MacOSTahoeWidgetHeader,{title:"Notes",subtitle:"3 notes",icon:e.jsx(a.StickyNote,{className:"h-4 w-4"}),actions:e.jsx("button",{className:"text-[12px] text-[var(--macos-tahoe-accent)]",children:"View All"})}),e.jsx("div",{className:"flex-1 space-y-2 overflow-auto p-3.5 pt-2",children:["Meeting notes","Shopping list","Ideas for project"].map(s=>e.jsx("div",{className:"rounded-lg bg-[var(--macos-glass-clear-bg)] p-2.5 text-[13px] text-[var(--macos-tahoe-text)] backdrop-blur-sm border border-[var(--macos-glass-border-subtle)]",children:s},s))})]})]})})}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx(t.CodeBlock,{code:`import { MacOSTahoeWidget, MacOSTahoeWidgetHeader } from '@e-burgos/tucu-ui';
+
+<MacOSTahoeWidget size="md">
+  <MacOSTahoeWidgetHeader
+    title="Calendar"
+    subtitle="Today"
+    icon={<CalendarIcon />}
+    actions={<button>View All</button>}
+  />
+  <div className="p-4">Widget content</div>
+</MacOSTahoeWidget>
+
+// Sizes: 'sm' (170×170), 'md' (364×170), 'lg' (170×364), 'xl' (364×364)`,language:"tsx"})})}),e.jsx(t.PropPlayground,{componentName:"MacOSTahoeWidget",defaultValues:{size:"md"},includeProps:["size"],excludeProps:["className"],children:s=>e.jsx("div",{className:"flex justify-center p-4",children:e.jsxs(t.MacOSTahoeWidget,{...s,children:[e.jsx(t.MacOSTahoeWidgetHeader,{title:"Preview",icon:e.jsx(a.LayoutDashboard,{className:"h-4 w-4"})}),e.jsx("div",{className:"flex flex-1 items-center justify-center",children:e.jsx("span",{className:"text-2xl font-light text-[var(--macos-tahoe-text)]",children:"Content"})})]})})}),e.jsx(t.AutoPropsTable,{componentName:"MacOSTahoeWidget"})]});exports.TahoeWidgetSection=i;exports.default=i;

package/documentation/TahoeWindowSection-COl0UCS1.js

@@ -0,0 +1,289 @@
+import { jsxs as t, Fragment as p, jsx as e } from "react/jsx-runtime";
+import { useState as g } from "react";
+import { H as x, C as h, a as f, bE as o, T as u, c as w, P as C, A as N } from "../index-19KsCnyX.js";
+import { AppWindow as v, RotateCcw as y } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+function d({ onClick: i }) {
+  return /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      onClick: i,
+      className: "mt-3 flex items-center gap-2 rounded-lg bg-(--color-brand) px-3 py-1.5 text-[13px] font-medium text-white transition-opacity hover:opacity-80",
+      children: [
+        /* @__PURE__ */ e(y, { className: "h-3.5 w-3.5" }),
+        "Restore Window"
+      ]
+    }
+  );
+}
+function n() {
+  const [i, a] = g(0), [s, l] = g(!1);
+  return { key: i, closed: s, onClose: () => l(!0), restore: () => {
+    l(!1), a((r) => r + 1);
+  } };
+}
+const L = () => {
+  const i = n(), a = n(), s = n(), l = n(), c = n(), m = n(), r = n();
+  return /* @__PURE__ */ t(p, { children: [
+    /* @__PURE__ */ e(
+      x,
+      {
+        title: "Window",
+        description: "Liquid Glass window with translucent title bar, traffic lights, and optional resize handles. Supports close, minimize, fullscreen, and portal rendering.",
+        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-indigo-500 to-purple-600 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(h, { children: /* @__PURE__ */ e(f, { title: "Default Window", className: "mt-2 mb-2", children: /* @__PURE__ */ t(
+      "div",
+      {
+        className: "relative w-full overflow-hidden rounded-xl bg-linear-to-br from-blue-500/20 to-purple-500/20 p-8",
+        style: { minHeight: 320 },
+        children: [
+          /* @__PURE__ */ e(
+            o,
+            {
+              title: "Liquid Glass Window",
+              width: 420,
+              defaultState: i.closed ? "closed" : "normal",
+              onClose: i.onClose,
+              children: /* @__PURE__ */ t("div", { className: "p-6 text-sm text-(--macos-tahoe-text)", children: [
+                /* @__PURE__ */ e("p", { className: "mb-2 font-medium", children: "Glass Material Window" }),
+                /* @__PURE__ */ t("p", { className: "text-[12px] text-(--macos-tahoe-text-muted) leading-relaxed", children: [
+                  "This window uses ",
+                  /* @__PURE__ */ e("code", { children: "--macos-glass-regular-bg" }),
+                  " for its translucent background and ",
+                  /* @__PURE__ */ e("code", { children: "--macos-glass-clear-bg" }),
+                  " ",
+                  "for the title bar, creating the characteristic Tahoe layered glass effect."
+                ] })
+              ] })
+            },
+            i.key
+          ),
+          i.closed && /* @__PURE__ */ e(d, { onClick: i.restore })
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ t(f, { title: "Traffic Lights Behavior", className: "mt-2 mb-2", children: [
+      /* @__PURE__ */ t(
+        u,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: [
+            "🔴 Close hides the window  ·  🟡 Minimize collapses to header only  ·  🟢 Maximize restores or toggles fullscreen (with ",
+            /* @__PURE__ */ e("code", { children: "fullSize" }),
+            "). Use ",
+            /* @__PURE__ */ e("code", { children: "defaultState" }),
+            " to restore programmatically."
+          ]
+        }
+      ),
+      /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+        /* @__PURE__ */ t("div", { className: "rounded-xl bg-linear-to-br from-indigo-500/20 to-blue-500/20 p-6", children: [
+          /* @__PURE__ */ e(
+            o,
+            {
+              title: "Try the buttons",
+              width: "100%",
+              fullSize: !0,
+              defaultState: a.closed ? "closed" : "normal",
+              onClose: a.onClose,
+              children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "Click 🔴 to close, 🟡 to minimize, 🟢 to fullscreen." })
+            },
+            a.key
+          ),
+          a.closed && /* @__PURE__ */ e(d, { onClick: a.restore })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "rounded-xl bg-linear-to-br from-teal-500/20 to-green-500/20 p-6", children: [
+          /* @__PURE__ */ e(
+            o,
+            {
+              title: "Disabled Close",
+              width: "100%",
+              disableClose: !0,
+              defaultState: s.closed ? "closed" : "normal",
+              onClose: s.onClose,
+              children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "The close button is disabled. Minimize and maximize still work." })
+            },
+            s.key
+          ),
+          s.closed && /* @__PURE__ */ e(d, { onClick: s.restore })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(f, { title: "Traffic Lights Positions", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ t("div", { className: "rounded-xl bg-linear-to-br from-indigo-500/20 to-blue-500/20 p-6", children: [
+        /* @__PURE__ */ e(
+          o,
+          {
+            title: "Left (default)",
+            width: "100%",
+            defaultState: l.closed ? "closed" : "normal",
+            onClose: l.onClose,
+            children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "Traffic lights on the left side." })
+          },
+          l.key
+        ),
+        l.closed && /* @__PURE__ */ e(d, { onClick: l.restore })
+      ] }),
+      /* @__PURE__ */ t("div", { className: "rounded-xl bg-linear-to-br from-teal-500/20 to-green-500/20 p-6", children: [
+        /* @__PURE__ */ e(
+          o,
+          {
+            title: "Right",
+            width: "100%",
+            trafficLightsPosition: "right",
+            defaultState: c.closed ? "closed" : "normal",
+            onClose: c.onClose,
+            children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "Traffic lights on the right side." })
+          },
+          c.key
+        ),
+        c.closed && /* @__PURE__ */ e(d, { onClick: c.restore })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(f, { title: "No Traffic Lights", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "rounded-xl bg-linear-to-br from-amber-500/20 to-orange-500/20 p-6", children: [
+      /* @__PURE__ */ e(
+        o,
+        {
+          title: "Clean Window",
+          width: 360,
+          showTrafficLights: !1,
+          defaultState: m.closed ? "closed" : "normal",
+          onClose: m.onClose,
+          children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "Window without traffic light controls — ideal for utility panels or embedded views." })
+        },
+        m.key
+      ),
+      m.closed && /* @__PURE__ */ e(d, { onClick: m.restore })
+    ] }) }) }),
+    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ t(f, { title: "Draggable Window", className: "mt-2 mb-2", children: [
+      /* @__PURE__ */ t(
+        u,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: [
+            "With ",
+            /* @__PURE__ */ e("code", { children: "draggable" }),
+            ", grab the title bar to move the window freely across the viewport. It automatically portals when dragged."
+          ]
+        }
+      ),
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: "relative w-full overflow-hidden rounded-xl bg-linear-to-br from-rose-500/20 to-pink-500/20 p-8",
+          style: { minHeight: 280 },
+          children: [
+            /* @__PURE__ */ e(
+              o,
+              {
+                title: "Drag me!",
+                width: 380,
+                draggable: !0,
+                defaultState: r.closed ? "closed" : "normal",
+                onClose: r.onClose,
+                children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "Grab the title bar and drag this window anywhere on the screen." })
+              },
+              r.key
+            ),
+            r.closed && /* @__PURE__ */ e(d, { onClick: r.restore })
+          ]
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(f, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e(
+      w,
+      {
+        code: `import { MacOSTahoeWindow } from '@e-burgos/tucu-ui';
+
+<MacOSTahoeWindow
+  title="My Window"
+  showTrafficLights
+  trafficLightsPosition="left"   // 'left' | 'right'
+  resizable
+  fullSize                        // 🟢 second click = fullscreen
+  portal                          // renders via portal
+  defaultState="normal"           // 'normal' | 'minimized' | 'fullscreen' | 'closed'
+  width={480}
+  height={320}
+  minWidth={200}
+  minHeight={120}
+  disableClose                    // disable 🔴
+  disableMinimize                 // disable 🟡
+  disableMaximize                 // disable 🟢
+  draggable                        // drag by title bar
+  onClose={() => setClosed(true)}
+  onMinimize={() => console.log('minimize')}
+  onMaximize={() => console.log('maximize')}
+>
+  <div className="p-6">Window content</div>
+</MacOSTahoeWindow>`,
+        language: "tsx"
+      }
+    ) }) }),
+    /* @__PURE__ */ e(
+      C,
+      {
+        componentName: "MacOSTahoeWindow",
+        defaultValues: {
+          title: "My Window",
+          defaultState: "normal",
+          trafficLightsPosition: "left",
+          showTrafficLights: !0,
+          disableClose: !1,
+          disableMinimize: !1,
+          disableMaximize: !1,
+          draggable: !1,
+          fullSize: !1,
+          resizable: !1,
+          portal: !1,
+          width: 380,
+          minWidth: 200,
+          minHeight: 120
+        },
+        includeProps: [
+          "title",
+          "defaultState",
+          "trafficLightsPosition",
+          "showTrafficLights",
+          "disableClose",
+          "disableMinimize",
+          "disableMaximize",
+          "draggable",
+          "fullSize",
+          "resizable",
+          "portal",
+          "width",
+          "minWidth",
+          "minHeight"
+        ],
+        excludeProps: [
+          "className",
+          "height",
+          "titleBarClassName",
+          "onClose",
+          "onMinimize",
+          "onMaximize"
+        ],
+        children: (b) => /* @__PURE__ */ e(
+          "div",
+          {
+            className: "relative rounded-xl bg-linear-to-br from-slate-500/20 to-indigo-500/20 p-8",
+            style: { minHeight: 220 },
+            children: /* @__PURE__ */ e(o, { ...b, children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "Interactive window — adjust props above." }) })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(N, { componentName: "MacOSTahoeWindow" })
+  ] });
+};
+export {
+  L as TahoeWindowSection,
+  L as default
+};

package/documentation/TahoeWindowSection-KL3yHPI3.js

@@ -0,0 +1,24 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),t=require("../index-DMs_SmPq.js"),m=require("lucide-react");require("react-router-dom");require("react-dom");function r({onClick:i}){return e.jsxs("button",{type:"button",onClick:i,className:"mt-3 flex items-center gap-2 rounded-lg bg-(--color-brand) px-3 py-1.5 text-[13px] font-medium text-white transition-opacity hover:opacity-80",children:[e.jsx(m.RotateCcw,{className:"h-3.5 w-3.5"}),"Restore Window"]})}function d(){const[i,l]=h.useState(0),[o,s]=h.useState(!1);return{key:i,closed:o,onClose:()=>s(!0),restore:()=>{s(!1),l(a=>a+1)}}}const x=()=>{const i=d(),l=d(),o=d(),s=d(),n=d(),c=d(),a=d();return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Window",description:"Liquid Glass window with translucent title bar, traffic lights, and optional resize handles. Supports close, minimize, fullscreen, and portal rendering.",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-slate-500 via-indigo-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg border border-slate-500/50",children:e.jsx(m.AppWindow,{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(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Default Window",className:"mt-2 mb-2",children:e.jsxs("div",{className:"relative w-full overflow-hidden rounded-xl bg-linear-to-br from-blue-500/20 to-purple-500/20 p-8",style:{minHeight:320},children:[e.jsx(t.MacOSTahoeWindow,{title:"Liquid Glass Window",width:420,defaultState:i.closed?"closed":"normal",onClose:i.onClose,children:e.jsxs("div",{className:"p-6 text-sm text-(--macos-tahoe-text)",children:[e.jsx("p",{className:"mb-2 font-medium",children:"Glass Material Window"}),e.jsxs("p",{className:"text-[12px] text-(--macos-tahoe-text-muted) leading-relaxed",children:["This window uses ",e.jsx("code",{children:"--macos-glass-regular-bg"})," for its translucent background and ",e.jsx("code",{children:"--macos-glass-clear-bg"})," ","for the title bar, creating the characteristic Tahoe layered glass effect."]})]})},i.key),i.closed&&e.jsx(r,{onClick:i.restore})]})})}),e.jsx(t.CardContainer,{children:e.jsxs(t.CardTitle,{title:"Traffic Lights Behavior",className:"mt-2 mb-2",children:[e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["🔴 Close hides the window  ·  🟡 Minimize collapses to header only  ·  🟢 Maximize restores or toggles fullscreen (with ",e.jsx("code",{children:"fullSize"}),"). Use ",e.jsx("code",{children:"defaultState"})," to restore programmatically."]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsxs("div",{className:"rounded-xl bg-linear-to-br from-indigo-500/20 to-blue-500/20 p-6",children:[e.jsx(t.MacOSTahoeWindow,{title:"Try the buttons",width:"100%",fullSize:!0,defaultState:l.closed?"closed":"normal",onClose:l.onClose,children:e.jsx("div",{className:"p-4 text-[13px] text-(--macos-tahoe-text)",children:"Click 🔴 to close, 🟡 to minimize, 🟢 to fullscreen."})},l.key),l.closed&&e.jsx(r,{onClick:l.restore})]}),e.jsxs("div",{className:"rounded-xl bg-linear-to-br from-teal-500/20 to-green-500/20 p-6",children:[e.jsx(t.MacOSTahoeWindow,{title:"Disabled Close",width:"100%",disableClose:!0,defaultState:o.closed?"closed":"normal",onClose:o.onClose,children:e.jsx("div",{className:"p-4 text-[13px] text-(--macos-tahoe-text)",children:"The close button is disabled. Minimize and maximize still work."})},o.key),o.closed&&e.jsx(r,{onClick:o.restore})]})]})]})}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Traffic Lights Positions",className:"mt-2 mb-2",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsxs("div",{className:"rounded-xl bg-linear-to-br from-indigo-500/20 to-blue-500/20 p-6",children:[e.jsx(t.MacOSTahoeWindow,{title:"Left (default)",width:"100%",defaultState:s.closed?"closed":"normal",onClose:s.onClose,children:e.jsx("div",{className:"p-4 text-[13px] text-(--macos-tahoe-text)",children:"Traffic lights on the left side."})},s.key),s.closed&&e.jsx(r,{onClick:s.restore})]}),e.jsxs("div",{className:"rounded-xl bg-linear-to-br from-teal-500/20 to-green-500/20 p-6",children:[e.jsx(t.MacOSTahoeWindow,{title:"Right",width:"100%",trafficLightsPosition:"right",defaultState:n.closed?"closed":"normal",onClose:n.onClose,children:e.jsx("div",{className:"p-4 text-[13px] text-(--macos-tahoe-text)",children:"Traffic lights on the right side."})},n.key),n.closed&&e.jsx(r,{onClick:n.restore})]})]})})}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"No Traffic Lights",className:"mt-2 mb-2",children:e.jsxs("div",{className:"rounded-xl bg-linear-to-br from-amber-500/20 to-orange-500/20 p-6",children:[e.jsx(t.MacOSTahoeWindow,{title:"Clean Window",width:360,showTrafficLights:!1,defaultState:c.closed?"closed":"normal",onClose:c.onClose,children:e.jsx("div",{className:"p-4 text-[13px] text-(--macos-tahoe-text)",children:"Window without traffic light controls — ideal for utility panels or embedded views."})},c.key),c.closed&&e.jsx(r,{onClick:c.restore})]})})}),e.jsx(t.CardContainer,{children:e.jsxs(t.CardTitle,{title:"Draggable Window",className:"mt-2 mb-2",children:[e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["With ",e.jsx("code",{children:"draggable"}),", grab the title bar to move the window freely across the viewport. It automatically portals when dragged."]}),e.jsxs("div",{className:"relative w-full overflow-hidden rounded-xl bg-linear-to-br from-rose-500/20 to-pink-500/20 p-8",style:{minHeight:280},children:[e.jsx(t.MacOSTahoeWindow,{title:"Drag me!",width:380,draggable:!0,defaultState:a.closed?"closed":"normal",onClose:a.onClose,children:e.jsx("div",{className:"p-4 text-[13px] text-(--macos-tahoe-text)",children:"Grab the title bar and drag this window anywhere on the screen."})},a.key),a.closed&&e.jsx(r,{onClick:a.restore})]})]})}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx(t.CodeBlock,{code:`import { MacOSTahoeWindow } from '@e-burgos/tucu-ui';
+
+<MacOSTahoeWindow
+  title="My Window"
+  showTrafficLights
+  trafficLightsPosition="left"   // 'left' | 'right'
+  resizable
+  fullSize                        // 🟢 second click = fullscreen
+  portal                          // renders via portal
+  defaultState="normal"           // 'normal' | 'minimized' | 'fullscreen' | 'closed'
+  width={480}
+  height={320}
+  minWidth={200}
+  minHeight={120}
+  disableClose                    // disable 🔴
+  disableMinimize                 // disable 🟡
+  disableMaximize                 // disable 🟢
+  draggable                        // drag by title bar
+  onClose={() => setClosed(true)}
+  onMinimize={() => console.log('minimize')}
+  onMaximize={() => console.log('maximize')}
+>
+  <div className="p-6">Window content</div>
+</MacOSTahoeWindow>`,language:"tsx"})})}),e.jsx(t.PropPlayground,{componentName:"MacOSTahoeWindow",defaultValues:{title:"My Window",defaultState:"normal",trafficLightsPosition:"left",showTrafficLights:!0,disableClose:!1,disableMinimize:!1,disableMaximize:!1,draggable:!1,fullSize:!1,resizable:!1,portal:!1,width:380,minWidth:200,minHeight:120},includeProps:["title","defaultState","trafficLightsPosition","showTrafficLights","disableClose","disableMinimize","disableMaximize","draggable","fullSize","resizable","portal","width","minWidth","minHeight"],excludeProps:["className","height","titleBarClassName","onClose","onMinimize","onMaximize"],children:g=>e.jsx("div",{className:"relative rounded-xl bg-linear-to-br from-slate-500/20 to-indigo-500/20 p-8",style:{minHeight:220},children:e.jsx(t.MacOSTahoeWindow,{...g,children:e.jsx("div",{className:"p-4 text-[13px] text-(--macos-tahoe-text)",children:"Interactive window — adjust props above."})})})}),e.jsx(t.AutoPropsTable,{componentName:"MacOSTahoeWindow"})]})};exports.TahoeWindowSection=x;exports.default=x;

package/documentation/TailwindConfigSection-DPCR4e0X.js

@@ -0,0 +1,23 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=()=>{const i=[{icon:e.jsx(s.Circle,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Color Spectrums",description:"Blue, Green, Orange, Gray, Indigo, Pink, Purple, Red, Teal, Yellow, Chartreuse — 11 spectrums total.",iconBgClassName:"from-indigo-500 to-purple-500"},{icon:e.jsx(s.Layers,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Scale 0-100",description:"Each spectrum has values from 0 to 100 in steps of 5/10 (e.g., blue-0, blue-5, blue-10 ... blue-100).",iconBgClassName:"from-cyan-500 to-blue-500"},{icon:e.jsx(s.Moon,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Light & Dark Variants",description:"Separate color sets for light and dark modes (e.g., --color-tucu-ui-blue-60 vs --color-tucu-ui-dark-blue-70).",iconBgClassName:"from-violet-500 to-purple-500"}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Tailwind CSS Configuration",description:"Built on Tailwind CSS v4 with Tucu UI Design Tokens for a CSS-first configuration system.",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-indigo-500 via-blue-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Code,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Design Tokens"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Primitive color tokens organized into spectrums"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:i.map(r=>e.jsx(a.FeatureCard,{layout:"horizontal",...r},r.title))})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Semantic Colors"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Design tokens mapped to functional purposes"})]}),e.jsx(a.CardContainer,{children:e.jsx(a.CardTitle,{title:"Semantic Color Variables",children:e.jsx("div",{className:"space-y-4",children:e.jsx(a.CodeBlock,{language:"css",code:`/* Semantic Background Colors */
+--color-semantic-bg-primary: var(--color-tucu-ui-blue-60);
+--color-semantic-bg-secondary: var(--color-tucu-ui-gray-10);
+--color-semantic-bg-positive: var(--color-tucu-ui-green-60);
+--color-semantic-bg-negative: var(--color-tucu-ui-red-60);
+
+/* Semantic Foreground Colors */
+--color-semantic-fg: var(--color-tucu-ui-gray-100);
+--color-semantic-fg-muted: var(--color-tucu-ui-gray-60);
+--color-semantic-fg-primary: var(--color-tucu-ui-blue-60);
+
+/* Dark mode variants */
+--color-semantic-dark-bg-primary: var(--color-tucu-ui-dark-blue-70);
+--color-semantic-dark-bg-secondary: var(--color-tucu-ui-dark-gray-20);`})})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Spacing Scale"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Pixel-based spacing mapped to Tucu UI Design Tokens"})]}),e.jsx(a.CardContainer,{children:e.jsx(a.CardTitle,{title:"Spacing Tokens",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(a.CodeBlock,{language:"css",code:`/* Spacing Scale - Mapped to Tucu UI Design Tokens */
+--spacing-0: 0px;
+--spacing-1: 8px;    /* --spacing-tucu-ui-1 */
+--spacing-2: 16px;   /* --spacing-tucu-ui-2 */
+--spacing-3: 24px;   /* --spacing-tucu-ui-3 */
+--spacing-4: 32px;   /* --spacing-tucu-ui-4 */
+--spacing-5: 40px;   /* --spacing-tucu-ui-5 */
+--spacing-6: 48px;   /* --spacing-tucu-ui-6 */
+--spacing-8: 64px;   /* --spacing-tucu-ui-8 */
+--spacing-10: 80px;  /* --spacing-tucu-ui-10 */`}),e.jsx(a.Alert,{variant:"info",children:e.jsxs(a.Typography,{tag:"p",className:"text-sm",children:[e.jsx("strong",{children:"Note:"})," Components use arbitrary values like"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"p-[16px]"})," ","instead of"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"p-4"})," ","to maintain original spacing values consistently."]})})]})})})]})]})};exports.default=c;

package/documentation/TailwindConfigSection-DdJnfBeo.js

@@ -0,0 +1,128 @@
+import { jsxs as a, Fragment as t, jsx as e } from "react/jsx-runtime";
+import { H as l, T as r, ax as n, C as c, a as s, c as o, aj as u } from "../index-19KsCnyX.js";
+import { Code as d, Circle as m, Layers as p, Moon as g } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const w = () => /* @__PURE__ */ a(t, { children: [
+  /* @__PURE__ */ e(
+    l,
+    {
+      title: "Tailwind CSS Configuration",
+      description: "Built on Tailwind CSS v4 with Tucu UI Design Tokens for a CSS-first configuration system.",
+      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-indigo-500 via-blue-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(d, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ a("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Design Tokens" }),
+      /* @__PURE__ */ e(
+        r,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Primitive color tokens organized into spectrums"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: [
+      {
+        icon: /* @__PURE__ */ e(m, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Color Spectrums",
+        description: "Blue, Green, Orange, Gray, Indigo, Pink, Purple, Red, Teal, Yellow, Chartreuse — 11 spectrums total.",
+        iconBgClassName: "from-indigo-500 to-purple-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Scale 0-100",
+        description: "Each spectrum has values from 0 to 100 in steps of 5/10 (e.g., blue-0, blue-5, blue-10 ... blue-100).",
+        iconBgClassName: "from-cyan-500 to-blue-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(g, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Light & Dark Variants",
+        description: "Separate color sets for light and dark modes (e.g., --color-tucu-ui-blue-60 vs --color-tucu-ui-dark-blue-70).",
+        iconBgClassName: "from-violet-500 to-purple-500"
+      }
+    ].map((i) => /* @__PURE__ */ e(n, { layout: "horizontal", ...i }, i.title)) })
+  ] }),
+  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ a("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Semantic Colors" }),
+      /* @__PURE__ */ e(
+        r,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Design tokens mapped to functional purposes"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(s, { title: "Semantic Color Variables", children: /* @__PURE__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ e(
+      o,
+      {
+        language: "css",
+        code: `/* Semantic Background Colors */
+--color-semantic-bg-primary: var(--color-tucu-ui-blue-60);
+--color-semantic-bg-secondary: var(--color-tucu-ui-gray-10);
+--color-semantic-bg-positive: var(--color-tucu-ui-green-60);
+--color-semantic-bg-negative: var(--color-tucu-ui-red-60);
+
+/* Semantic Foreground Colors */
+--color-semantic-fg: var(--color-tucu-ui-gray-100);
+--color-semantic-fg-muted: var(--color-tucu-ui-gray-60);
+--color-semantic-fg-primary: var(--color-tucu-ui-blue-60);
+
+/* Dark mode variants */
+--color-semantic-dark-bg-primary: var(--color-tucu-ui-dark-blue-70);
+--color-semantic-dark-bg-secondary: var(--color-tucu-ui-dark-gray-20);`
+      }
+    ) }) }) })
+  ] }),
+  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ a("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Spacing Scale" }),
+      /* @__PURE__ */ e(
+        r,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Pixel-based spacing mapped to Tucu UI Design Tokens"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(s, { title: "Spacing Tokens", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ e(
+        o,
+        {
+          language: "css",
+          code: `/* Spacing Scale - Mapped to Tucu UI Design Tokens */
+--spacing-0: 0px;
+--spacing-1: 8px;    /* --spacing-tucu-ui-1 */
+--spacing-2: 16px;   /* --spacing-tucu-ui-2 */
+--spacing-3: 24px;   /* --spacing-tucu-ui-3 */
+--spacing-4: 32px;   /* --spacing-tucu-ui-4 */
+--spacing-5: 40px;   /* --spacing-tucu-ui-5 */
+--spacing-6: 48px;   /* --spacing-tucu-ui-6 */
+--spacing-8: 64px;   /* --spacing-tucu-ui-8 */
+--spacing-10: 80px;  /* --spacing-tucu-ui-10 */`
+        }
+      ),
+      /* @__PURE__ */ e(u, { variant: "info", children: /* @__PURE__ */ a(r, { tag: "p", className: "text-sm", children: [
+        /* @__PURE__ */ e("strong", { children: "Note:" }),
+        " Components use arbitrary values like",
+        " ",
+        /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "p-[16px]" }),
+        " ",
+        "instead of",
+        " ",
+        /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "p-4" }),
+        " ",
+        "to maintain original spacing values consistently."
+      ] }) })
+    ] }) }) })
+  ] })
+] });
+export {
+  w as default
+};