@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/MacOSNotificationBannerSection-CUorA6r9.js

@@ -0,0 +1,25 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),i=require("../index-DWDUS-PU.js"),t=require("lucide-react");require("react-router-dom");require("react-dom");function c(s){const[a,o]=r.useState(!0);return a?e.jsx("div",{className:"w-full max-w-xl mx-auto",children:e.jsx(i.MacOSNotificationBanner,{title:s.title||"Notification",variant:s.variant,message:s.message,dismissible:s.dismissible,onDismiss:s.dismissible!==!1?()=>o(!1):void 0,actions:[{label:"Action",onClick:()=>{}}]})}):e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx("p",{className:"text-sm text-gray-500",children:"Banner dismissed"}),e.jsx(i.Button,{size:"mini",onClick:()=>o(!0),children:"Restore"})]})}const l=()=>{const[s,a]=r.useState({info:!0,success:!0,warning:!0,error:!0}),o=()=>a({info:!0,success:!0,warning:!0,error:!0});return e.jsxs(e.Fragment,{children:[e.jsx(i.HeroCard,{title:"NotificationBanner",description:"macOS-style notification banners with four variants (info, success, warning, error), optional dismiss button, action buttons, custom icons, and smooth enter/exit animations.",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-amber-500 via-orange-500 to-red-500 rounded-full flex items-center justify-center shadow-lg border border-amber-500/50",children:e.jsx(t.Bell,{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:"All Variants",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[s.info&&e.jsx(i.MacOSNotificationBanner,{variant:"info",title:"Update available",message:"macOS 14.5 is now available. Restart to install.",icon:e.jsx(t.Info,{className:"w-5 h-5"}),actions:[{label:"Update Now",onClick:()=>{}}],onDismiss:()=>a(n=>({...n,info:!1}))}),s.success&&e.jsx(i.MacOSNotificationBanner,{variant:"success",title:"Backup complete",message:"Time Machine backup finished successfully.",icon:e.jsx(t.CheckCircle,{className:"w-5 h-5"}),onDismiss:()=>a(n=>({...n,success:!1}))}),s.warning&&e.jsx(i.MacOSNotificationBanner,{variant:"warning",title:"Low storage",message:"Only 5 GB remaining. Free up space to avoid performance issues.",icon:e.jsx(t.AlertTriangle,{className:"w-5 h-5"}),actions:[{label:"Manage",onClick:()=>{}}],onDismiss:()=>a(n=>({...n,warning:!1}))}),s.error&&e.jsx(i.MacOSNotificationBanner,{variant:"error",title:"Network error",message:"Unable to connect. Check your internet connection.",icon:e.jsx(t.WifiOff,{className:"w-5 h-5"}),actions:[{label:"Try Again",onClick:()=>{}}],onDismiss:()=>a(n=>({...n,error:!1}))}),!Object.values(s).some(Boolean)&&e.jsx("p",{className:"text-center text-sm text-gray-400 py-4",children:"All banners dismissed."}),e.jsx("div",{className:"flex justify-center pt-2",children:e.jsx(i.Button,{size:"mini",shape:"rounded",onClick:o,children:"Restore All"})})]})})}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Non-dismissible",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(i.MacOSNotificationBanner,{variant:"warning",title:"Attention required",message:"This notification cannot be dismissed and requires action.",dismissible:!1,actions:[{label:"Take Action",onClick:()=>{}}]})})})}),e.jsx(i.PropPlayground,{componentName:"MacOSNotificationBanner",defaultValues:{variant:"info",title:"Notification Title",message:"This is a notification message with details.",dismissible:!0},controlOverrides:[{name:"variant",type:"select",options:["info","success","warning","error"],description:"Banner severity variant"},{name:"title",type:"text",description:"Banner heading"},{name:"message",type:"text",description:"Banner body message"},{name:"dismissible",type:"boolean",description:"Show dismiss (×) button"}],includeProps:["variant","title","message","dismissible"],excludeProps:["className","icon","actions","onDismiss"],children:n=>e.jsx(c,{...n})}),e.jsx(i.AutoPropsTable,{componentName:"MacOSNotificationBanner"}),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 { MacOSNotificationBanner } from '@e-burgos/tucu-ui';
+
+// Info banner with action buttons
+<MacOSNotificationBanner
+  variant="info"
+  title="Update available"
+  message="macOS 14.5 is ready to install."
+  icon={<InfoIcon />}
+  actions={[
+    { label: 'Update Now', onClick: handleUpdate },
+    { label: 'Later', onClick: handleDismiss },
+  ]}
+  onDismiss={handleDismiss}
+/>
+
+// Non-dismissible warning
+<MacOSNotificationBanner
+  variant="warning"
+  title="Attention"
+  message="Action required."
+  dismissible={false}
+  actions={[{ label: 'Take Action', onClick: handle }]}
+/>
+
+// Variants: 'info' | 'success' | 'warning' | 'error'`})})})})]})};exports.MacOSNotificationBannerSection=l;exports.default=l;

package/documentation/MacOSPopoverSection-BDDYuhqI.js

@@ -0,0 +1,266 @@
+import { jsxs as n, Fragment as b, jsx as e } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { H as v, C as i, a as c, bx as d, by as o, P as g, A as N, c as f } from "../index-DoxeCFUJ.js";
+import { MessageSquare as y, FilePlus as h, Clock as x, Save as C, Trash2 as m, Check as O, Lock as k, FolderOpen as w } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+function P(r) {
+  const [s, a] = p(!1);
+  return /* @__PURE__ */ e("div", { className: "flex justify-center py-12", children: /* @__PURE__ */ e(
+    d,
+    {
+      isOpen: s,
+      onClose: () => a(!1),
+      placement: r.placement,
+      minWidth: r.minWidth,
+      content: /* @__PURE__ */ n("div", { className: "py-1", children: [
+        /* @__PURE__ */ e(
+          o,
+          {
+            label: "New File",
+            icon: /* @__PURE__ */ e(h, { className: "w-4 h-4" }),
+            shortcut: "⌘N",
+            onClick: () => a(!1)
+          }
+        ),
+        /* @__PURE__ */ e(
+          o,
+          {
+            label: "Open",
+            icon: /* @__PURE__ */ e(w, { className: "w-4 h-4" }),
+            shortcut: "⌘O",
+            onClick: () => a(!1)
+          }
+        ),
+        /* @__PURE__ */ e(
+          o,
+          {
+            label: "Delete",
+            icon: /* @__PURE__ */ e(m, { className: "w-4 h-4" }),
+            destructive: !0,
+            onClick: () => a(!1)
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ n(
+        "button",
+        {
+          onClick: () => a(!0),
+          className: "rounded-lg border border-border px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
+          children: [
+            "Open Popover (",
+            r.placement,
+            ")"
+          ]
+        }
+      )
+    }
+  ) });
+}
+const D = () => {
+  const [r, s] = p(null), a = (l) => s((u) => u === l ? null : l), t = () => s(null);
+  return /* @__PURE__ */ n(b, { children: [
+    /* @__PURE__ */ e(
+      v,
+      {
+        title: "Popover",
+        description: "A macOS-style popover / context menu with backdrop blur, placement options, keyboard shortcuts, destructive styling, disabled items, and animated show/hide.",
+        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(y, { 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(c, { title: "Context Menu", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6 flex justify-center pb-40", children: /* @__PURE__ */ e(
+      d,
+      {
+        isOpen: r === "context",
+        onClose: t,
+        placement: "bottom",
+        content: /* @__PURE__ */ n("div", { className: "py-1", children: [
+          /* @__PURE__ */ e(
+            o,
+            {
+              label: "New File",
+              icon: /* @__PURE__ */ e(h, { className: "w-4 h-4" }),
+              shortcut: "⌘N",
+              onClick: t
+            }
+          ),
+          /* @__PURE__ */ e(
+            o,
+            {
+              label: "Open Recent",
+              icon: /* @__PURE__ */ e(x, { className: "w-4 h-4" }),
+              onClick: t
+            }
+          ),
+          /* @__PURE__ */ e(
+            o,
+            {
+              label: "Save As…",
+              icon: /* @__PURE__ */ e(C, { className: "w-4 h-4" }),
+              shortcut: "⌘⇧S",
+              onClick: t
+            }
+          ),
+          /* @__PURE__ */ e(
+            o,
+            {
+              label: "Delete",
+              icon: /* @__PURE__ */ e(m, { className: "w-4 h-4" }),
+              destructive: !0,
+              onClick: t
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: () => a("context"),
+            className: "rounded-lg border border-border px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
+            children: "Right-click Menu"
+          }
+        )
+      }
+    ) }) }) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Four Placements", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-8 p-8", children: ["bottom", "top", "right", "left"].map(
+      (l) => /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(
+        d,
+        {
+          isOpen: r === l,
+          onClose: t,
+          placement: l,
+          content: /* @__PURE__ */ n("div", { className: "py-1", children: [
+            /* @__PURE__ */ e(o, { label: "Option A", onClick: t }),
+            /* @__PURE__ */ e(o, { label: "Option B", onClick: t })
+          ] }),
+          children: /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: () => a(l),
+              className: "rounded-lg border border-border px-3 py-2 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors capitalize",
+              children: l
+            }
+          )
+        }
+      ) }, l)
+    ) }) }) }) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Disabled & Destructive Items", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6 flex justify-center pb-40", children: /* @__PURE__ */ e(
+      d,
+      {
+        isOpen: r === "disabled",
+        onClose: t,
+        content: /* @__PURE__ */ n("div", { className: "py-1", children: [
+          /* @__PURE__ */ e(
+            o,
+            {
+              label: "Available",
+              icon: /* @__PURE__ */ e(O, { className: "w-4 h-4" }),
+              onClick: t
+            }
+          ),
+          /* @__PURE__ */ e(
+            o,
+            {
+              label: "Unavailable",
+              icon: /* @__PURE__ */ e(k, { className: "w-4 h-4" }),
+              disabled: !0,
+              onClick: t
+            }
+          ),
+          /* @__PURE__ */ e(
+            o,
+            {
+              label: "Delete",
+              destructive: !0,
+              icon: /* @__PURE__ */ e(m, { className: "w-4 h-4" }),
+              onClick: t
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: () => a("disabled"),
+            className: "rounded-lg border border-border px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
+            children: "Show Popover"
+          }
+        )
+      }
+    ) }) }) }),
+    /* @__PURE__ */ e(
+      g,
+      {
+        componentName: "MacOSPopover",
+        defaultValues: {
+          placement: "bottom",
+          minWidth: 200
+        },
+        controlOverrides: [
+          {
+            name: "placement",
+            type: "select",
+            options: ["top", "bottom", "left", "right"],
+            description: "Popover placement relative to trigger"
+          },
+          {
+            name: "minWidth",
+            type: "text",
+            description: "Minimum width in pixels"
+          }
+        ],
+        includeProps: ["placement", "minWidth"],
+        excludeProps: [
+          "className",
+          "contentClassName",
+          "isOpen",
+          "onClose",
+          "content"
+        ],
+        children: (l) => /* @__PURE__ */ e(P, { ...l })
+      }
+    ),
+    /* @__PURE__ */ e(N, { componentName: "MacOSPopover" }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { 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 { MacOSPopover, MacOSPopoverItem } from '@e-burgos/tucu-ui';
+
+function ContextMenu() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <MacOSPopover
+      isOpen={open}
+      onClose={() => setOpen(false)}
+      placement="bottom"   // 'top' | 'bottom' | 'left' | 'right'
+      minWidth={200}
+      content={
+        <div className="py-1">
+          <MacOSPopoverItem
+            label="New File"
+            icon={<FilePlusIcon />}
+            shortcut="⌘N"
+            onClick={() => setOpen(false)}
+          />
+          <MacOSPopoverItem
+            label="Delete"
+            icon={<TrashIcon />}
+            destructive
+            onClick={() => setOpen(false)}
+          />
+          <MacOSPopoverItem label="Admin Only" disabled />
+        </div>
+      }
+    >
+      <button onClick={() => setOpen(true)}>Open Menu</button>
+    </MacOSPopover>
+  );
+}`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  D as MacOSPopoverSection,
+  D as default
+};

package/documentation/MacOSPopoverSection-BkgBnoyB.js

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),o=require("../index-DWDUS-PU.js"),s=require("lucide-react");require("react-router-dom");require("react-dom");function m(a){const[n,r]=c.useState(!1);return e.jsx("div",{className:"flex justify-center py-12",children:e.jsx(o.MacOSPopover,{isOpen:n,onClose:()=>r(!1),placement:a.placement,minWidth:a.minWidth,content:e.jsxs("div",{className:"py-1",children:[e.jsx(o.MacOSPopoverItem,{label:"New File",icon:e.jsx(s.FilePlus,{className:"w-4 h-4"}),shortcut:"⌘N",onClick:()=>r(!1)}),e.jsx(o.MacOSPopoverItem,{label:"Open",icon:e.jsx(s.FolderOpen,{className:"w-4 h-4"}),shortcut:"⌘O",onClick:()=>r(!1)}),e.jsx(o.MacOSPopoverItem,{label:"Delete",icon:e.jsx(s.Trash2,{className:"w-4 h-4"}),destructive:!0,onClick:()=>r(!1)})]}),children:e.jsxs("button",{onClick:()=>r(!0),className:"rounded-lg border border-border px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",children:["Open Popover (",a.placement,")"]})})})}const i=()=>{const[a,n]=c.useState(null),r=l=>n(d=>d===l?null:l),t=()=>n(null);return e.jsxs(e.Fragment,{children:[e.jsx(o.HeroCard,{title:"Popover",description:"A macOS-style popover / context menu with backdrop blur, placement options, keyboard shortcuts, destructive styling, disabled items, and animated show/hide.",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(s.MessageSquare,{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(o.CardContainer,{className:"overflow-hidden",children:e.jsx(o.CardTitle,{title:"Context Menu",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 flex justify-center pb-40",children:e.jsx(o.MacOSPopover,{isOpen:a==="context",onClose:t,placement:"bottom",content:e.jsxs("div",{className:"py-1",children:[e.jsx(o.MacOSPopoverItem,{label:"New File",icon:e.jsx(s.FilePlus,{className:"w-4 h-4"}),shortcut:"⌘N",onClick:t}),e.jsx(o.MacOSPopoverItem,{label:"Open Recent",icon:e.jsx(s.Clock,{className:"w-4 h-4"}),onClick:t}),e.jsx(o.MacOSPopoverItem,{label:"Save As…",icon:e.jsx(s.Save,{className:"w-4 h-4"}),shortcut:"⌘⇧S",onClick:t}),e.jsx(o.MacOSPopoverItem,{label:"Delete",icon:e.jsx(s.Trash2,{className:"w-4 h-4"}),destructive:!0,onClick:t})]}),children:e.jsx("button",{onClick:()=>r("context"),className:"rounded-lg border border-border px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",children:"Right-click Menu"})})})})}),e.jsx(o.CardContainer,{className:"overflow-hidden",children:e.jsx(o.CardTitle,{title:"Four Placements",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-2 gap-8 p-8",children:["bottom","top","right","left"].map(l=>e.jsx("div",{className:"flex justify-center",children:e.jsx(o.MacOSPopover,{isOpen:a===l,onClose:t,placement:l,content:e.jsxs("div",{className:"py-1",children:[e.jsx(o.MacOSPopoverItem,{label:"Option A",onClick:t}),e.jsx(o.MacOSPopoverItem,{label:"Option B",onClick:t})]}),children:e.jsx("button",{onClick:()=>r(l),className:"rounded-lg border border-border px-3 py-2 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors capitalize",children:l})})},l))})})})}),e.jsx(o.CardContainer,{className:"overflow-hidden",children:e.jsx(o.CardTitle,{title:"Disabled & Destructive Items",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 flex justify-center pb-40",children:e.jsx(o.MacOSPopover,{isOpen:a==="disabled",onClose:t,content:e.jsxs("div",{className:"py-1",children:[e.jsx(o.MacOSPopoverItem,{label:"Available",icon:e.jsx(s.Check,{className:"w-4 h-4"}),onClick:t}),e.jsx(o.MacOSPopoverItem,{label:"Unavailable",icon:e.jsx(s.Lock,{className:"w-4 h-4"}),disabled:!0,onClick:t}),e.jsx(o.MacOSPopoverItem,{label:"Delete",destructive:!0,icon:e.jsx(s.Trash2,{className:"w-4 h-4"}),onClick:t})]}),children:e.jsx("button",{onClick:()=>r("disabled"),className:"rounded-lg border border-border px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",children:"Show Popover"})})})})}),e.jsx(o.PropPlayground,{componentName:"MacOSPopover",defaultValues:{placement:"bottom",minWidth:200},controlOverrides:[{name:"placement",type:"select",options:["top","bottom","left","right"],description:"Popover placement relative to trigger"},{name:"minWidth",type:"text",description:"Minimum width in pixels"}],includeProps:["placement","minWidth"],excludeProps:["className","contentClassName","isOpen","onClose","content"],children:l=>e.jsx(m,{...l})}),e.jsx(o.AutoPropsTable,{componentName:"MacOSPopover"}),e.jsx(o.CardContainer,{className:"overflow-hidden",children:e.jsx(o.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(o.CodeBlock,{language:"tsx",code:`import { MacOSPopover, MacOSPopoverItem } from '@e-burgos/tucu-ui';
+
+function ContextMenu() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <MacOSPopover
+      isOpen={open}
+      onClose={() => setOpen(false)}
+      placement="bottom"   // 'top' | 'bottom' | 'left' | 'right'
+      minWidth={200}
+      content={
+        <div className="py-1">
+          <MacOSPopoverItem
+            label="New File"
+            icon={<FilePlusIcon />}
+            shortcut="⌘N"
+            onClick={() => setOpen(false)}
+          />
+          <MacOSPopoverItem
+            label="Delete"
+            icon={<TrashIcon />}
+            destructive
+            onClick={() => setOpen(false)}
+          />
+          <MacOSPopoverItem label="Admin Only" disabled />
+        </div>
+      }
+    >
+      <button onClick={() => setOpen(true)}>Open Menu</button>
+    </MacOSPopover>
+  );
+}`})})})})]})};exports.MacOSPopoverSection=i;exports.default=i;

package/documentation/MacOSSearchBarSection-B4kt_090.js

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),a=require("../index-DWDUS-PU.js"),n=require("lucide-react");require("react-router-dom");require("react-dom");function i(t){const[s,r]=l.useState("");return e.jsx("div",{className:"w-full max-w-lg mx-auto",children:e.jsx(a.MacOSSearchBar,{...t,value:s,onChange:r,onClear:()=>r(""),onSubmit:o=>alert(`Submitted: ${o}`)})})}const c=()=>{const[t,s]=l.useState("");return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"SearchBar",description:"A macOS-style search input with clear button, keyboard submit, auto-focus, and multiple sizes. Includes smooth transitions and icon accent matching the system appearance.",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-cyan-500 via-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-cyan-500/50",children:e.jsx(n.Search,{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:"Interactive",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6 max-w-lg mx-auto",children:[e.jsx(a.MacOSSearchBar,{value:t,onChange:s,onClear:()=>s(""),onSubmit:r=>alert(`Search: ${r}`),placeholder:"Search files, apps, settings…"}),e.jsxs("p",{className:"mt-3 text-xs text-gray-500 dark:text-gray-400 text-center",children:["Current value: ",e.jsx("code",{className:"bg-gray-100 dark:bg-gray-800 px-1 rounded",children:t||"(empty)"})]})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 space-y-4 max-w-lg mx-auto",children:["sm","md","lg"].map(r=>e.jsxs("div",{children:[e.jsx("p",{className:"text-xs font-medium text-gray-500 dark:text-gray-400 mb-1 uppercase",children:r}),e.jsx(a.MacOSSearchBar,{size:r,placeholder:`Size: ${r}`,value:"",onChange:()=>{}})]},r))})})}),e.jsx(a.PropPlayground,{componentName:"MacOSSearchBar",defaultValues:{placeholder:"Search…",size:"md",autoFocus:!1},controlOverrides:[{name:"placeholder",type:"text",description:"Placeholder text"},{name:"size",type:"select",options:["sm","md","lg"],description:"Input size"},{name:"autoFocus",type:"boolean",description:"Auto-focus on mount"}],includeProps:["placeholder","size","autoFocus"],excludeProps:["className","value","onChange","onClear","onSubmit"],children:r=>e.jsx(i,{...r})}),e.jsx(a.AutoPropsTable,{componentName:"MacOSSearchBar"}),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 { MacOSSearchBar } from '@e-burgos/tucu-ui';
+
+function SearchDemo() {
+  const [value, setValue] = useState('');
+
+  return (
+    <MacOSSearchBar
+      value={value}
+      onChange={setValue}
+      onClear={() => setValue('')}
+      onSubmit={(v) => console.log('Search:', v)}
+      placeholder="Search files, apps, settings…"
+      size="md"       // 'sm' | 'md' | 'lg'
+      autoFocus={false}
+    />
+  );
+}`})})})})]})};exports.MacOSSearchBarSection=c;exports.default=c;

package/documentation/MacOSSearchBarSection-CAqjk9yl.js

@@ -0,0 +1,108 @@
+import { jsxs as l, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { useState as n } from "react";
+import { H as d, C as o, a as s, bo as c, P as u, A as h, c as p } from "../index-DoxeCFUJ.js";
+import { Search as g } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+function S(t) {
+  const [r, a] = n("");
+  return /* @__PURE__ */ e("div", { className: "w-full max-w-lg mx-auto", children: /* @__PURE__ */ e(
+    c,
+    {
+      ...t,
+      value: r,
+      onChange: a,
+      onClear: () => a(""),
+      onSubmit: (m) => alert(`Submitted: ${m}`)
+    }
+  ) });
+}
+const N = () => {
+  const [t, r] = n("");
+  return /* @__PURE__ */ l(i, { children: [
+    /* @__PURE__ */ e(
+      d,
+      {
+        title: "SearchBar",
+        description: "A macOS-style search input with clear button, keyboard submit, auto-focus, and multiple sizes. Includes smooth transitions and icon accent matching the system appearance.",
+        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-500 via-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-cyan-500/50", 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__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Interactive", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6 max-w-lg mx-auto", children: [
+      /* @__PURE__ */ e(
+        c,
+        {
+          value: t,
+          onChange: r,
+          onClear: () => r(""),
+          onSubmit: (a) => alert(`Search: ${a}`),
+          placeholder: "Search files, apps, settings…"
+        }
+      ),
+      /* @__PURE__ */ l("p", { className: "mt-3 text-xs text-gray-500 dark:text-gray-400 text-center", children: [
+        "Current value: ",
+        /* @__PURE__ */ e("code", { className: "bg-gray-100 dark:bg-gray-800 px-1 rounded", children: t || "(empty)" })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6 space-y-4 max-w-lg mx-auto", children: ["sm", "md", "lg"].map((a) => /* @__PURE__ */ l("div", { children: [
+      /* @__PURE__ */ e("p", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 mb-1 uppercase", children: a }),
+      /* @__PURE__ */ e(
+        c,
+        {
+          size: a,
+          placeholder: `Size: ${a}`,
+          value: "",
+          onChange: () => {
+          }
+        }
+      )
+    ] }, a)) }) }) }),
+    /* @__PURE__ */ e(
+      u,
+      {
+        componentName: "MacOSSearchBar",
+        defaultValues: {
+          placeholder: "Search…",
+          size: "md",
+          autoFocus: !1
+        },
+        controlOverrides: [
+          { name: "placeholder", type: "text", description: "Placeholder text" },
+          { name: "size", type: "select", options: ["sm", "md", "lg"], description: "Input size" },
+          { name: "autoFocus", type: "boolean", description: "Auto-focus on mount" }
+        ],
+        includeProps: ["placeholder", "size", "autoFocus"],
+        excludeProps: ["className", "value", "onChange", "onClear", "onSubmit"],
+        children: (a) => /* @__PURE__ */ e(S, { ...a })
+      }
+    ),
+    /* @__PURE__ */ e(h, { componentName: "MacOSSearchBar" }),
+    /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      p,
+      {
+        language: "tsx",
+        code: `import { MacOSSearchBar } from '@e-burgos/tucu-ui';
+
+function SearchDemo() {
+  const [value, setValue] = useState('');
+
+  return (
+    <MacOSSearchBar
+      value={value}
+      onChange={setValue}
+      onClear={() => setValue('')}
+      onSubmit={(v) => console.log('Search:', v)}
+      placeholder="Search files, apps, settings…"
+      size="md"       // 'sm' | 'md' | 'lg'
+      autoFocus={false}
+    />
+  );
+}`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  N as MacOSSearchBarSection,
+  N as default
+};

package/documentation/MacOSSegmentedControlSection-BmrrShpJ.js

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),l=require("../index-DWDUS-PU.js"),t=require("lucide-react");require("react-router-dom");require("react-dom");function c(n){const[s,i]=o.useState("tab1");return e.jsx("div",{className:"w-full max-w-lg mx-auto",children:e.jsx(l.MacOSSegmentedControl,{...n,value:s,onChange:i,options:[{label:"General",value:"tab1"},{label:"Privacy",value:"tab2"},{label:"Advanced",value:"tab3"}]})})}const r=()=>{const[n,s]=o.useState("general"),[i,d]=o.useState("grid");return e.jsxs(e.Fragment,{children:[e.jsx(l.HeroCard,{title:"SegmentedControl",description:"A macOS-style segmented control (tab bar) with animated sliding indicator, icon+text options, keyboard navigation, size variants, and full-width mode.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-teal-500 via-emerald-500 to-green-600 rounded-full flex items-center justify-center shadow-lg border border-teal-500/50",children:e.jsx(t.ToggleLeft,{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:"With Icons",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 flex justify-center",children:e.jsx(l.MacOSSegmentedControl,{value:i,onChange:d,options:[{label:"Grid",value:"grid",icon:e.jsx(t.LayoutGrid,{className:"w-3.5 h-3.5"})},{label:"List",value:"list",icon:e.jsx(t.List,{className:"w-3.5 h-3.5"})},{label:"Column",value:"column",icon:e.jsx(t.Columns3,{className:"w-3.5 h-3.5"})}]})})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Text Only — Full Width",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(l.MacOSSegmentedControl,{value:n,onChange:s,fullWidth:!0,options:[{label:"General",value:"general"},{label:"Privacy",value:"privacy"},{label:"Security",value:"security"},{label:"Advanced",value:"advanced"}]})})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 space-y-4",children:["sm","md","lg"].map(a=>e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("span",{className:"text-xs font-medium text-gray-500 dark:text-gray-400 uppercase w-8",children:a}),e.jsx(l.MacOSSegmentedControl,{size:a,value:"a",onChange:()=>{},options:[{label:"Alpha",value:"a"},{label:"Beta",value:"b"},{label:"Gamma",value:"c"}]})]},a))})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Disabled Option",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 flex justify-center",children:e.jsx(l.MacOSSegmentedControl,{value:"on",onChange:()=>{},options:[{label:"On",value:"on"},{label:"Off",value:"off"},{label:"Unavailable",value:"na",disabled:!0}]})})})}),e.jsx(l.PropPlayground,{componentName:"MacOSSegmentedControl",defaultValues:{size:"md",fullWidth:!1},controlOverrides:[{name:"size",type:"select",options:["sm","md","lg"],description:"Control size"},{name:"fullWidth",type:"boolean",description:"Stretch to fill container width"}],includeProps:["size","fullWidth"],excludeProps:["className","options","value","onChange"],children:a=>e.jsx(c,{...a})}),e.jsx(l.AutoPropsTable,{componentName:"MacOSSegmentedControl"}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(l.CodeBlock,{language:"tsx",code:`import { MacOSSegmentedControl } from '@e-burgos/tucu-ui';
+
+function TabsDemo() {
+  const [value, setValue] = useState('general');
+
+  return (
+    <MacOSSegmentedControl
+      value={value}
+      onChange={setValue}
+      size="md"        // 'sm' | 'md' | 'lg'
+      fullWidth={false}
+      options={[
+        { label: 'General', value: 'general' },
+        { label: 'Privacy', value: 'privacy', icon: <LockIcon /> },
+        { label: 'Disabled', value: 'x', disabled: true },
+      ]}
+    />
+  );
+}`})})})})]})};exports.MacOSSegmentedControlSection=r;exports.default=r;

package/documentation/MacOSSegmentedControlSection-D_zqGd1h.js

@@ -0,0 +1,138 @@
+import { jsxs as d, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { useState as r } from "react";
+import { H as u, C as a, a as t, bu as n, P as v, A as h, c as p } from "../index-DoxeCFUJ.js";
+import { ToggleLeft as b, LayoutGrid as f, List as g, Columns3 as w } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+function N(i) {
+  const [o, s] = r("tab1");
+  return /* @__PURE__ */ e("div", { className: "w-full max-w-lg mx-auto", children: /* @__PURE__ */ e(
+    n,
+    {
+      ...i,
+      value: o,
+      onChange: s,
+      options: [
+        { label: "General", value: "tab1" },
+        { label: "Privacy", value: "tab2" },
+        { label: "Advanced", value: "tab3" }
+      ]
+    }
+  ) });
+}
+const A = () => {
+  const [i, o] = r("general"), [s, c] = r("grid");
+  return /* @__PURE__ */ d(m, { children: [
+    /* @__PURE__ */ e(
+      u,
+      {
+        title: "SegmentedControl",
+        description: "A macOS-style segmented control (tab bar) with animated sliding indicator, icon+text options, keyboard navigation, size variants, and full-width mode.",
+        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-teal-500 via-emerald-500 to-green-600 rounded-full flex items-center justify-center shadow-lg border border-teal-500/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(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "With Icons", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6 flex justify-center", children: /* @__PURE__ */ e(
+      n,
+      {
+        value: s,
+        onChange: c,
+        options: [
+          { label: "Grid", value: "grid", icon: /* @__PURE__ */ e(f, { className: "w-3.5 h-3.5" }) },
+          { label: "List", value: "list", icon: /* @__PURE__ */ e(g, { className: "w-3.5 h-3.5" }) },
+          { label: "Column", value: "column", icon: /* @__PURE__ */ e(w, { className: "w-3.5 h-3.5" }) }
+        ]
+      }
+    ) }) }) }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Text Only — Full Width", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      n,
+      {
+        value: i,
+        onChange: o,
+        fullWidth: !0,
+        options: [
+          { label: "General", value: "general" },
+          { label: "Privacy", value: "privacy" },
+          { label: "Security", value: "security" },
+          { label: "Advanced", value: "advanced" }
+        ]
+      }
+    ) }) }) }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6 space-y-4", children: ["sm", "md", "lg"].map((l) => /* @__PURE__ */ d("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ e("span", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase w-8", children: l }),
+      /* @__PURE__ */ e(
+        n,
+        {
+          size: l,
+          value: "a",
+          onChange: () => {
+          },
+          options: [
+            { label: "Alpha", value: "a" },
+            { label: "Beta", value: "b" },
+            { label: "Gamma", value: "c" }
+          ]
+        }
+      )
+    ] }, l)) }) }) }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Disabled Option", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6 flex justify-center", children: /* @__PURE__ */ e(
+      n,
+      {
+        value: "on",
+        onChange: () => {
+        },
+        options: [
+          { label: "On", value: "on" },
+          { label: "Off", value: "off" },
+          { label: "Unavailable", value: "na", disabled: !0 }
+        ]
+      }
+    ) }) }) }),
+    /* @__PURE__ */ e(
+      v,
+      {
+        componentName: "MacOSSegmentedControl",
+        defaultValues: {
+          size: "md",
+          fullWidth: !1
+        },
+        controlOverrides: [
+          { name: "size", type: "select", options: ["sm", "md", "lg"], description: "Control size" },
+          { name: "fullWidth", type: "boolean", description: "Stretch to fill container width" }
+        ],
+        includeProps: ["size", "fullWidth"],
+        excludeProps: ["className", "options", "value", "onChange"],
+        children: (l) => /* @__PURE__ */ e(N, { ...l })
+      }
+    ),
+    /* @__PURE__ */ e(h, { componentName: "MacOSSegmentedControl" }),
+    /* @__PURE__ */ e(a, { 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(
+      p,
+      {
+        language: "tsx",
+        code: `import { MacOSSegmentedControl } from '@e-burgos/tucu-ui';
+
+function TabsDemo() {
+  const [value, setValue] = useState('general');
+
+  return (
+    <MacOSSegmentedControl
+      value={value}
+      onChange={setValue}
+      size="md"        // 'sm' | 'md' | 'lg'
+      fullWidth={false}
+      options={[
+        { label: 'General', value: 'general' },
+        { label: 'Privacy', value: 'privacy', icon: <LockIcon /> },
+        { label: 'Disabled', value: 'x', disabled: true },
+      ]}
+    />
+  );
+}`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  A as MacOSSegmentedControlSection,
+  A as default
+};