@e-burgos/tucu-ui 2.0.8 → 2.0.9

package/documentation/MacOSToolbarSection-GwXI_HM0.js

@@ -0,0 +1,23 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),a=require("../index-BaGqriuz.js"),r=require("lucide-react");require("react-router-dom");require("react-dom");const s=()=>{const[l,t]=o.useState("");return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"MacOSToolbar",description:"A macOS-style toolbar with leading, center, and trailing slots. Supports vibrancy backdrop blur, a transparent mode, and an optional bottom border.",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-sky-400 via-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-sky-400/50",children:e.jsx(r.PanelTop,{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(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Title + Leading + Trailing",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"rounded-xl overflow-hidden border border-(--color-semantic-line-primary-subtle) shadow-(--shadow-card)",children:[e.jsx(a.MacOSToolbarSonoma,{title:"Documents",leading:e.jsxs("button",{className:"flex items-center gap-1 text-xs text-[#007aff] hover:opacity-80",children:[e.jsx(r.ChevronLeft,{className:"w-3.5 h-3.5"}),"Back"]}),trailing:e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("button",{className:"p-1.5 rounded-md hover:bg-gray-500/10 text-gray-600 dark:text-gray-400",children:e.jsx(r.Share2,{className:"w-4 h-4"})}),e.jsx("button",{className:"p-1.5 rounded-md hover:bg-gray-500/10 text-gray-600 dark:text-gray-400",children:e.jsx(r.MoreHorizontal,{className:"w-4 h-4"})})]})}),e.jsx("div",{className:"h-24 bg-(--color-semantic-bg) flex items-center justify-center text-sm text-gray-400",children:"Content area"})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Search Bar in Center",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"rounded-xl overflow-hidden border border-(--color-semantic-line-primary-subtle) shadow-(--shadow-card)",children:[e.jsx(a.MacOSToolbarSonoma,{leading:e.jsx(r.Mail,{className:"w-4 h-4 text-gray-500"}),center:e.jsx(a.MacOSSearchBar,{value:l,onChange:t,onClear:()=>t(""),className:"w-56",placeholder:"Search messages"}),trailing:e.jsx("button",{className:"p-1.5 rounded-md hover:bg-gray-500/10 text-gray-600 dark:text-gray-400",children:e.jsx(r.SlidersHorizontal,{className:"w-4 h-4"})})}),e.jsx("div",{className:"h-24 bg-(--color-semantic-bg) flex items-center justify-center text-sm text-gray-400",children:"Content area"})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Transparent (no background)",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"rounded-xl overflow-hidden border border-(--color-semantic-line-primary-subtle) shadow-(--shadow-card) bg-linear-to-br from-blue-50 to-indigo-100 dark:from-gray-800 dark:to-gray-900",children:[e.jsx(a.MacOSToolbarSonoma,{title:"Transparent Toolbar",transparent:!0,bordered:!1}),e.jsx("div",{className:"h-24 flex items-center justify-center text-sm text-gray-500",children:"Toolbar blends into background"})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { MacOSToolbar, MacOSSearchBar } from '@e-burgos/tucu-ui';
+
+// Title with leading and trailing slots
+<MacOSToolbar
+  title="Documents"
+  leading={<BackButton />}
+  trailing={<MoreButton />}
+/>
+
+// Search bar in center slot
+<MacOSToolbar
+  center={
+    <MacOSSearchBar
+      value={search}
+      onChange={setSearch}
+      onClear={() => setSearch('')}
+    />
+  }
+  trailing={<FilterButton />}
+/>
+
+// Transparent — blends into parent background
+<MacOSToolbar title="Overlay" transparent bordered={false} />`})})})})]})};exports.MacOSToolbarSection=s;exports.default=s;

package/documentation/MacOSWidgetSection-B2c5Jiqb.js

@@ -0,0 +1,107 @@
+import { jsxs as t, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { H as c, C as s, a as i, bq as l, br as r, P as o, A as n, c as m } from "../index-lfg6LZ1p.js";
+import { LayoutGrid as p, Cloud as g, Sparkles as u, Activity as h } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const y = () => /* @__PURE__ */ t(d, { children: [
+  /* @__PURE__ */ e(
+    c,
+    {
+      title: "Widget",
+      description: "macOS-style widget cards in four sizes with optional glass/vibrancy backdrop, icon header, and subtitle. Perfect for dashboards, quick-glance info, and control center items.",
+      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-emerald-500 via-teal-500 to-cyan-600 rounded-full flex items-center justify-center shadow-lg border border-emerald-500/50", children: /* @__PURE__ */ e(p, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "All Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-6 items-start justify-center", children: ["sm", "md", "lg", "xl"].map((a) => /* @__PURE__ */ t(l, { size: a, children: [
+    /* @__PURE__ */ e(
+      r,
+      {
+        title: `Widget ${a.toUpperCase()}`,
+        subtitle: "Description",
+        icon: /* @__PURE__ */ e(g, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "px-3 pb-3 text-xs text-gray-500 dark:text-gray-400", children: [
+      "Content area for the ",
+      a,
+      " widget."
+    ] })
+  ] }, a)) }) }) }) }),
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Glass Mode", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6 bg-linear-to-br from-purple-600/30 via-blue-500/30 to-cyan-400/30 rounded-lg", children: /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-6 items-start justify-center", children: ["sm", "md", "lg"].map((a) => /* @__PURE__ */ t(l, { size: a, glass: !0, children: [
+    /* @__PURE__ */ e(
+      r,
+      {
+        title: `Glass ${a.toUpperCase()}`,
+        icon: /* @__PURE__ */ e(u, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "px-3 pb-3 text-xs text-gray-300", children: "Glass vibrancy mode — blurred background." })
+  ] }, a)) }) }) }) }),
+  /* @__PURE__ */ e(
+    o,
+    {
+      componentName: "MacOSWidget",
+      defaultValues: {
+        size: "md",
+        glass: !1
+      },
+      controlOverrides: [
+        {
+          name: "size",
+          type: "select",
+          options: ["sm", "md", "lg", "xl"],
+          description: "Widget size preset"
+        },
+        {
+          name: "glass",
+          type: "boolean",
+          description: "Enable glass/vibrancy backdrop"
+        }
+      ],
+      includeProps: ["size", "glass"],
+      excludeProps: ["className"],
+      children: (a) => /* @__PURE__ */ e("div", { className: "flex items-center justify-center p-6 rounded-lg bg-linear-to-br from-purple-600/20 via-blue-500/20 to-cyan-400/20", children: /* @__PURE__ */ t(l, { ...a, children: [
+        /* @__PURE__ */ e(
+          r,
+          {
+            title: "Preview Widget",
+            subtitle: "Subtitle text",
+            icon: /* @__PURE__ */ e(h, { className: "w-4 h-4" })
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "px-3 pb-3 text-xs text-gray-600 dark:text-gray-400", children: "Widget content — adjust props above." })
+      ] }) })
+    }
+  ),
+  /* @__PURE__ */ e(n, { componentName: "MacOSWidget" }),
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    m,
+    {
+      language: "tsx",
+      code: `import { MacOSWidget, MacOSWidgetHeader } from '@e-burgos/tucu-ui';
+
+// Basic widget
+<MacOSWidget size="md">
+  <MacOSWidgetHeader
+    title="Weather"
+    subtitle="San Francisco"
+    icon={<CloudIcon />}
+  />
+  <div className="px-3 pb-3">72°F — Sunny</div>
+</MacOSWidget>
+
+// Glass mode on gradient background
+<MacOSWidget size="lg" glass>
+  <MacOSWidgetHeader title="Music" icon={<MusicIcon />} />
+  <div className="px-3 pb-3">Now Playing — Song Title</div>
+</MacOSWidget>
+
+// Sizes: 'sm' | 'md' | 'lg' | 'xl'`
+    }
+  ) }) }) })
+] });
+export {
+  y as MacOSWidgetSection,
+  y as default
+};

package/documentation/MacOSWidgetSection-BEuuPDcI.js

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Widget",description:"macOS-style widget cards in four sizes with optional glass/vibrancy backdrop, icon header, and subtitle. Perfect for dashboards, quick-glance info, and control center items.",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-emerald-500 via-teal-500 to-cyan-600 rounded-full flex items-center justify-center shadow-lg border border-emerald-500/50",children:e.jsx(t.LayoutGrid,{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(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"All Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"flex flex-wrap gap-6 items-start justify-center",children:["sm","md","lg","xl"].map(a=>e.jsxs(s.MacOSWidget,{size:a,children:[e.jsx(s.MacOSWidgetHeader,{title:`Widget ${a.toUpperCase()}`,subtitle:"Description",icon:e.jsx(t.Cloud,{className:"w-4 h-4"})}),e.jsxs("div",{className:"px-3 pb-3 text-xs text-gray-500 dark:text-gray-400",children:["Content area for the ",a," widget."]})]},a))})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Glass Mode",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 bg-linear-to-br from-purple-600/30 via-blue-500/30 to-cyan-400/30 rounded-lg",children:e.jsx("div",{className:"flex flex-wrap gap-6 items-start justify-center",children:["sm","md","lg"].map(a=>e.jsxs(s.MacOSWidget,{size:a,glass:!0,children:[e.jsx(s.MacOSWidgetHeader,{title:`Glass ${a.toUpperCase()}`,icon:e.jsx(t.Sparkles,{className:"w-4 h-4"})}),e.jsx("div",{className:"px-3 pb-3 text-xs text-gray-300",children:"Glass vibrancy mode — blurred background."})]},a))})})})}),e.jsx(s.PropPlayground,{componentName:"MacOSWidget",defaultValues:{size:"md",glass:!1},controlOverrides:[{name:"size",type:"select",options:["sm","md","lg","xl"],description:"Widget size preset"},{name:"glass",type:"boolean",description:"Enable glass/vibrancy backdrop"}],includeProps:["size","glass"],excludeProps:["className"],children:a=>e.jsx("div",{className:"flex items-center justify-center p-6 rounded-lg bg-linear-to-br from-purple-600/20 via-blue-500/20 to-cyan-400/20",children:e.jsxs(s.MacOSWidget,{...a,children:[e.jsx(s.MacOSWidgetHeader,{title:"Preview Widget",subtitle:"Subtitle text",icon:e.jsx(t.Activity,{className:"w-4 h-4"})}),e.jsx("div",{className:"px-3 pb-3 text-xs text-gray-600 dark:text-gray-400",children:"Widget content — adjust props above."})]})})}),e.jsx(s.AutoPropsTable,{componentName:"MacOSWidget"}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{language:"tsx",code:`import { MacOSWidget, MacOSWidgetHeader } from '@e-burgos/tucu-ui';
+
+// Basic widget
+<MacOSWidget size="md">
+  <MacOSWidgetHeader
+    title="Weather"
+    subtitle="San Francisco"
+    icon={<CloudIcon />}
+  />
+  <div className="px-3 pb-3">72°F — Sunny</div>
+</MacOSWidget>
+
+// Glass mode on gradient background
+<MacOSWidget size="lg" glass>
+  <MacOSWidgetHeader title="Music" icon={<MusicIcon />} />
+  <div className="px-3 pb-3">Now Playing — Song Title</div>
+</MacOSWidget>
+
+// Sizes: 'sm' | 'md' | 'lg' | 'xl'`})})})})]});exports.MacOSWidgetSection=i;exports.default=i;

package/documentation/MacOSWindowSection-CJSekAJj.js

@@ -0,0 +1,237 @@
+import { jsxs as r, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { H as h, C as i, a as t, bp as a, x as o, P as m, A as g, c as f } from "../index-lfg6LZ1p.js";
+import { AppWindow as p } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+function u(l) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: "relative rounded-xl bg-gray-100 dark:bg-gray-800/50 p-8",
+      style: { minHeight: 220 },
+      children: /* @__PURE__ */ e(a, { ...l, defaultWidth: l.defaultWidth ?? 380, children: /* @__PURE__ */ e("div", { className: "p-4 text-sm text-gray-700 dark:text-gray-300", children: "Interactive window — adjust props above." }) })
+    }
+  );
+}
+const W = () => {
+  const [l, n] = c(!0);
+  return /* @__PURE__ */ r(d, { children: [
+    /* @__PURE__ */ e(
+      h,
+      {
+        title: "Window",
+        description: "A macOS-style window container with vibrancy title bar, traffic-light buttons, drag & resize support, maximize/minimize states, and optional action slots.",
+        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-indigo-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg border border-blue-500/50", children: /* @__PURE__ */ e(p, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(
+      t,
+      {
+        title: "Interactive — Drag, Resize, Maximize",
+        className: "mt-2 mb-2",
+        children: /* @__PURE__ */ e(
+          "div",
+          {
+            className: "relative w-full overflow-hidden",
+            style: { height: 400 },
+            children: /* @__PURE__ */ e(
+              a,
+              {
+                title: "Drag & Resize Me",
+                defaultWidth: 420,
+                defaultHeight: 220,
+                children: /* @__PURE__ */ r("div", { className: "p-6 text-sm text-gray-700 dark:text-gray-300", children: [
+                  /* @__PURE__ */ e("p", { className: "mb-2 font-medium", children: "Try these interactions:" }),
+                  /* @__PURE__ */ r("ul", { className: "list-disc pl-5 space-y-1 text-[12px]", children: [
+                    /* @__PURE__ */ e("li", { children: "Drag the title bar to move the window" }),
+                    /* @__PURE__ */ e("li", { children: "Drag any edge or corner to resize" }),
+                    /* @__PURE__ */ e("li", { children: "Double-click the title bar to maximize" }),
+                    /* @__PURE__ */ e("li", { children: "Click the green traffic light to maximize/restore" }),
+                    /* @__PURE__ */ e("li", { children: "Click the yellow traffic light to restore default size" })
+                  ] })
+                ] })
+              }
+            )
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(
+      t,
+      {
+        title: "Traffic Lights — Left (default)",
+        className: "mt-2 mb-2",
+        children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+          a,
+          {
+            title: "My Application",
+            draggable: !1,
+            resizable: !1,
+            onClose: () => alert("close"),
+            children: /* @__PURE__ */ e("div", { className: "p-6 text-sm text-gray-700 dark:text-gray-300", children: "Window content goes here. The title bar uses vibrancy material and the traffic lights appear on hover." })
+          }
+        ) })
+      }
+    ) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Traffic Lights — Right", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      a,
+      {
+        title: "Settings",
+        trafficLightsPosition: "right",
+        draggable: !1,
+        resizable: !1,
+        children: /* @__PURE__ */ e("div", { className: "p-6 text-sm text-gray-700 dark:text-gray-300", children: "Traffic lights positioned on the right side of the title bar." })
+      }
+    ) }) }) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(
+      t,
+      {
+        title: "Without Traffic Lights + Custom Actions",
+        className: "mt-2 mb-2",
+        children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+          a,
+          {
+            title: "Document",
+            showTrafficLights: !1,
+            draggable: !1,
+            resizable: !1,
+            actions: /* @__PURE__ */ e(o, { size: "mini", shape: "rounded", color: "info", children: "Save" }),
+            children: /* @__PURE__ */ e("div", { className: "p-6 text-sm text-gray-700 dark:text-gray-300", children: "Traffic lights hidden. A custom action button appears in the trailing slot." })
+          }
+        ) })
+      }
+    ) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Toggle Visibility", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full p-4 sm:p-6 space-y-4", children: [
+      /* @__PURE__ */ e(o, { onClick: () => n((s) => !s), children: l ? "Hide Window" : "Show Window" }),
+      l && /* @__PURE__ */ e(
+        a,
+        {
+          title: "Toggled Window",
+          draggable: !1,
+          resizable: !1,
+          onClose: () => n(!1),
+          children: /* @__PURE__ */ e("div", { className: "p-6 text-sm text-gray-700 dark:text-gray-300", children: "Click the red traffic light or the button above to close." })
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ e(
+      m,
+      {
+        componentName: "MacOSWindow",
+        defaultValues: {
+          title: "My Window",
+          draggable: !0,
+          resizable: !0,
+          showTrafficLights: !0,
+          trafficLightsPosition: "left",
+          defaultWidth: 380,
+          defaultHeight: 200,
+          minWidth: 200,
+          minHeight: 120
+        },
+        controlOverrides: [
+          {
+            name: "title",
+            type: "text",
+            description: "Window title displayed in the title bar"
+          },
+          {
+            name: "draggable",
+            type: "boolean",
+            description: "Allow drag-moving by the title bar"
+          },
+          {
+            name: "resizable",
+            type: "boolean",
+            description: "Allow resizing from edges/corners"
+          },
+          {
+            name: "showTrafficLights",
+            type: "boolean",
+            description: "Show close/minimize/maximize buttons"
+          },
+          {
+            name: "trafficLightsPosition",
+            type: "select",
+            options: ["left", "right"],
+            description: "Position of traffic light buttons"
+          },
+          {
+            name: "defaultWidth",
+            type: "text",
+            description: "Initial width (px or CSS value)"
+          },
+          {
+            name: "defaultHeight",
+            type: "text",
+            description: "Initial height (px or CSS value)"
+          },
+          {
+            name: "minWidth",
+            type: "text",
+            description: "Minimum width in pixels"
+          },
+          {
+            name: "minHeight",
+            type: "text",
+            description: "Minimum height in pixels"
+          }
+        ],
+        includeProps: [
+          "title",
+          "draggable",
+          "resizable",
+          "showTrafficLights",
+          "trafficLightsPosition",
+          "defaultWidth",
+          "defaultHeight",
+          "minWidth",
+          "minHeight"
+        ],
+        excludeProps: [
+          "className",
+          "titleBarClassName",
+          "actions",
+          "onClose",
+          "onMinimize",
+          "onMaximize"
+        ],
+        children: (s) => /* @__PURE__ */ e(u, { ...s })
+      }
+    ),
+    /* @__PURE__ */ e(g, { componentName: "MacOSWindow" }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      f,
+      {
+        language: "tsx",
+        code: `import { MacOSWindow } from '@e-burgos/tucu-ui';
+
+// Interactive window — drag, resize, maximize
+<MacOSWindow
+  title="My Application"
+  defaultWidth={500}
+  defaultHeight={300}
+  minWidth={200}
+  minHeight={120}
+>
+  <div className="p-6">Drag, resize, or double-click title bar</div>
+</MacOSWindow>
+
+// Static window (no drag/resize)
+<MacOSWindow title="Static" draggable={false} resizable={false}>
+  <div className="p-6">Content</div>
+</MacOSWindow>
+
+// Traffic lights on the right
+<MacOSWindow title="Settings" trafficLightsPosition="right">
+  <div className="p-6">Content</div>
+</MacOSWindow>`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  W as MacOSWindowSection,
+  W as default
+};

package/documentation/MacOSWindowSection-ChLGxWkJ.js

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),i=require("../index-BaGqriuz.js"),n=require("lucide-react");require("react-router-dom");require("react-dom");function d(t){return e.jsx("div",{className:"relative rounded-xl bg-gray-100 dark:bg-gray-800/50 p-8",style:{minHeight:220},children:e.jsx(i.MacOSWindow,{...t,defaultWidth:t.defaultWidth??380,children:e.jsx("div",{className:"p-4 text-sm text-gray-700 dark:text-gray-300",children:"Interactive window — adjust props above."})})})}const l=()=>{const[t,s]=r.useState(!0);return e.jsxs(e.Fragment,{children:[e.jsx(i.HeroCard,{title:"Window",description:"A macOS-style window container with vibrancy title bar, traffic-light buttons, drag & resize support, maximize/minimize states, and optional action slots.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-indigo-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg border border-blue-500/50",children:e.jsx(n.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(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Interactive — Drag, Resize, Maximize",className:"mt-2 mb-2",children:e.jsx("div",{className:"relative w-full overflow-hidden",style:{height:400},children:e.jsx(i.MacOSWindow,{title:"Drag & Resize Me",defaultWidth:420,defaultHeight:220,children:e.jsxs("div",{className:"p-6 text-sm text-gray-700 dark:text-gray-300",children:[e.jsx("p",{className:"mb-2 font-medium",children:"Try these interactions:"}),e.jsxs("ul",{className:"list-disc pl-5 space-y-1 text-[12px]",children:[e.jsx("li",{children:"Drag the title bar to move the window"}),e.jsx("li",{children:"Drag any edge or corner to resize"}),e.jsx("li",{children:"Double-click the title bar to maximize"}),e.jsx("li",{children:"Click the green traffic light to maximize/restore"}),e.jsx("li",{children:"Click the yellow traffic light to restore default size"})]})]})})})})}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Traffic Lights — Left (default)",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(i.MacOSWindow,{title:"My Application",draggable:!1,resizable:!1,onClose:()=>alert("close"),children:e.jsx("div",{className:"p-6 text-sm text-gray-700 dark:text-gray-300",children:"Window content goes here. The title bar uses vibrancy material and the traffic lights appear on hover."})})})})}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Traffic Lights — Right",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(i.MacOSWindow,{title:"Settings",trafficLightsPosition:"right",draggable:!1,resizable:!1,children:e.jsx("div",{className:"p-6 text-sm text-gray-700 dark:text-gray-300",children:"Traffic lights positioned on the right side of the title bar."})})})})}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Without Traffic Lights + Custom Actions",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(i.MacOSWindow,{title:"Document",showTrafficLights:!1,draggable:!1,resizable:!1,actions:e.jsx(i.Button,{size:"mini",shape:"rounded",color:"info",children:"Save"}),children:e.jsx("div",{className:"p-6 text-sm text-gray-700 dark:text-gray-300",children:"Traffic lights hidden. A custom action button appears in the trailing slot."})})})})}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Toggle Visibility",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-4",children:[e.jsx(i.Button,{onClick:()=>s(a=>!a),children:t?"Hide Window":"Show Window"}),t&&e.jsx(i.MacOSWindow,{title:"Toggled Window",draggable:!1,resizable:!1,onClose:()=>s(!1),children:e.jsx("div",{className:"p-6 text-sm text-gray-700 dark:text-gray-300",children:"Click the red traffic light or the button above to close."})})]})})}),e.jsx(i.PropPlayground,{componentName:"MacOSWindow",defaultValues:{title:"My Window",draggable:!0,resizable:!0,showTrafficLights:!0,trafficLightsPosition:"left",defaultWidth:380,defaultHeight:200,minWidth:200,minHeight:120},controlOverrides:[{name:"title",type:"text",description:"Window title displayed in the title bar"},{name:"draggable",type:"boolean",description:"Allow drag-moving by the title bar"},{name:"resizable",type:"boolean",description:"Allow resizing from edges/corners"},{name:"showTrafficLights",type:"boolean",description:"Show close/minimize/maximize buttons"},{name:"trafficLightsPosition",type:"select",options:["left","right"],description:"Position of traffic light buttons"},{name:"defaultWidth",type:"text",description:"Initial width (px or CSS value)"},{name:"defaultHeight",type:"text",description:"Initial height (px or CSS value)"},{name:"minWidth",type:"text",description:"Minimum width in pixels"},{name:"minHeight",type:"text",description:"Minimum height in pixels"}],includeProps:["title","draggable","resizable","showTrafficLights","trafficLightsPosition","defaultWidth","defaultHeight","minWidth","minHeight"],excludeProps:["className","titleBarClassName","actions","onClose","onMinimize","onMaximize"],children:a=>e.jsx(d,{...a})}),e.jsx(i.AutoPropsTable,{componentName:"MacOSWindow"}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(i.CodeBlock,{language:"tsx",code:`import { MacOSWindow } from '@e-burgos/tucu-ui';
+
+// Interactive window — drag, resize, maximize
+<MacOSWindow
+  title="My Application"
+  defaultWidth={500}
+  defaultHeight={300}
+  minWidth={200}
+  minHeight={120}
+>
+  <div className="p-6">Drag, resize, or double-click title bar</div>
+</MacOSWindow>
+
+// Static window (no drag/resize)
+<MacOSWindow title="Static" draggable={false} resizable={false}>
+  <div className="p-6">Content</div>
+</MacOSWindow>
+
+// Traffic lights on the right
+<MacOSWindow title="Settings" trafficLightsPosition="right">
+  <div className="p-6">Content</div>
+</MacOSWindow>`})})})})]})};exports.MacOSWindowSection=l;exports.default=l;

package/documentation/{MenuItemsGuideSection-ChPa1HVx.js → MenuItemsGuideSection-3rCQXRbI.js}

@@ -1,11 +1,11 @@
-import { jsxs as t, Fragment as r, jsx as e } from "react/jsx-runtime";
-import { T as n, C as s, a as c, q as l, J as p, ag as h, c as a } from "../index-D3gBsvbO.js";
-import { Info as u } from "lucide-react";
+import { jsxs as t, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { H as l, T as n, C as s, a as d, y as p, K as h, aj as u, c as r } from "../index-lfg6LZ1p.js";
+import { Menu as g, Info as y } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const v = () => {
-  const d = [
+const k = () => {
+  const c = [
     { key: "property", label: "Property" },
     { key: "type", label: "Type" },
     { key: "required", label: "Required" },
@@ -21,7 +21,7 @@ const v = () => {
       property: "path",
       type: "string",
       required: "Yes",
-      description: /* @__PURE__ */ t(r, { children: [
+      description: /* @__PURE__ */ t(o, { children: [
         /* @__PURE__ */ e("strong", { children: "Internal route path" }),
         " for React Router navigation (e.g., ",
         /* @__PURE__ */ e("code", { children: "/dashboard" }),
@@ -32,7 +32,7 @@ const v = () => {
       property: "href",
       type: "string?",
       required: "No",
-      description: /* @__PURE__ */ t(r, { children: [
+      description: /* @__PURE__ */ t(o, { children: [
         /* @__PURE__ */ e("strong", { children: "External URL" }),
         " for redirection (e.g.,",
         " ",
@@ -47,7 +47,7 @@ const v = () => {
       property: "component",
       type: "JSX.Element?",
       required: "No",
-      description: /* @__PURE__ */ t(r, { children: [
+      description: /* @__PURE__ */ t(o, { children: [
         "React component to render when this route is active. Required for automatic routing. Not needed if using ",
         /* @__PURE__ */ e("code", { children: "customRoutes" }),
         "."
@@ -82,43 +82,69 @@ const v = () => {
       type: "() => void?",
       required: "No",
       description: "Callback function executed when the menu item is clicked"
+    },
+    {
+      property: "isPublic",
+      type: "boolean?",
+      required: "No",
+      description: /* @__PURE__ */ e(o, { children: "Marks the route as publicly accessible (no authentication required). Only used in standalone routing mode." })
+    },
+    {
+      property: "enableNestedRoutes",
+      type: "boolean?",
+      required: "No",
+      description: /* @__PURE__ */ t(o, { children: [
+        "When ",
+        /* @__PURE__ */ e("code", { children: "true" }),
+        ", appends ",
+        /* @__PURE__ */ e("code", { children: "/*" }),
+        " to the route path so the page can handle internal sub-routes. Only used in standalone routing mode."
+      ] })
     }
   ];
-  return /* @__PURE__ */ t(r, { children: [
-    /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
-      /* @__PURE__ */ e(n, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "MenuItems Guide" }),
+  return /* @__PURE__ */ t(o, { children: [
+    /* @__PURE__ */ e(
+      l,
+      {
+        title: "MenuItems Guide",
+        description: "Complete guide to configuring menu items for navigation and routing in your application.",
+        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-indigo-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(g, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(n, { tag: "h2", className: "mb-2", children: "MenuItems Guide" }),
       /* @__PURE__ */ e(
         n,
         {
           tag: "p",
-          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
           children: "Complete guide to configuring menu items for navigation and routing"
         }
       )
     ] }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "MenuItem Properties", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "MenuItem Properties", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
       /* @__PURE__ */ e(n, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: "Each menu item is an object with the following properties:" }),
       /* @__PURE__ */ e(
-        l,
+        p,
         {
-          columns: d.map((o) => ({
-            ...o,
-            render: (i, g) => o.key === "property" ? /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(i ?? "") }) : o.key === "type" ? /* @__PURE__ */ e("code", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(i ?? "") }) : o.key === "required" ? /* @__PURE__ */ e(
-              p,
+          columns: c.map((a) => ({
+            ...a,
+            render: (i, f) => a.key === "property" ? /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(i ?? "") }) : a.key === "type" ? /* @__PURE__ */ e("code", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(i ?? "") }) : a.key === "required" ? /* @__PURE__ */ e(
+              h,
               {
                 variant: "outline",
                 className: `text-xs ${i === "Yes" ? "" : "bg-gray-200"}`,
                 children: String(i ?? "")
               }
-            ) : o.key === "description" ? /* @__PURE__ */ e("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: i }) : String(i ?? "")
+            ) : a.key === "description" ? /* @__PURE__ */ e("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: i }) : String(i ?? "")
           })),
           data: m,
           containerClassName: "mb-4"
         }
       ),
-      /* @__PURE__ */ e(h, { variant: "info", children: /* @__PURE__ */ t("div", { children: [
+      /* @__PURE__ */ e(u, { variant: "info", children: /* @__PURE__ */ t("div", { children: [
         /* @__PURE__ */ t("div", { className: "flex items-center gap-2 font-semibold", children: [
-          /* @__PURE__ */ e(u, { className: "h-4 w-4" }),
+          /* @__PURE__ */ e(y, { className: "h-4 w-4" }),
           "Important: path vs href"
         ] }),
         /* @__PURE__ */ t("div", { className: "text-sm mt-1", children: [
@@ -141,11 +167,11 @@ const v = () => {
         ] })
       ] }) })
     ] }) }) }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "MenuItems Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-6 p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "MenuItems Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-6 p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-6", children: [
       /* @__PURE__ */ t("div", { className: "space-y-3", children: [
         /* @__PURE__ */ e(n, { tag: "h4", className: "font-semibold", children: "1. Simple Menu Item" }),
         /* @__PURE__ */ e(
-          a,
+          r,
           {
             language: "tsx",
             code: `const menuItems = [
@@ -162,7 +188,7 @@ const v = () => {
       /* @__PURE__ */ t("div", { className: "space-y-3", children: [
         /* @__PURE__ */ e(n, { tag: "h4", className: "font-semibold", children: "2. Menu Item with External Link" }),
         /* @__PURE__ */ e(
-          a,
+          r,
           {
             language: "tsx",
             code: `const menuItems = [
@@ -180,7 +206,7 @@ const v = () => {
       /* @__PURE__ */ t("div", { className: "space-y-3", children: [
         /* @__PURE__ */ e(n, { tag: "h4", className: "font-semibold", children: "3. Menu Item with Dropdown" }),
         /* @__PURE__ */ e(
-          a,
+          r,
           {
             language: "tsx",
             code: `const menuItems = [
@@ -211,7 +237,7 @@ const v = () => {
       /* @__PURE__ */ t("div", { className: "space-y-3", children: [
         /* @__PURE__ */ e(n, { tag: "h4", className: "font-semibold", children: "4. Complete Example with All Features" }),
         /* @__PURE__ */ e(
-          a,
+          r,
           {
             language: "tsx",
             code: `import { LucideIcons } from '@ui/tucu-ui';
@@ -279,7 +305,7 @@ function App() {
       /* @__PURE__ */ t("div", { className: "space-y-3", children: [
         /* @__PURE__ */ e(n, { tag: "h4", className: "font-semibold", children: "5. Conditional Menu Items" }),
         /* @__PURE__ */ e(
-          a,
+          r,
           {
             language: "tsx",
             code: `import { useAuth } from './hooks/useAuth';
@@ -321,5 +347,5 @@ function App() {
   ] });
 };
 export {
-  v as default
+  k as default
 };