@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/MacOSWindowSection-uQs-6APa.js

@@ -1,237 +0,0 @@
-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, br as a, x as o, P as m, A as g, c as f } from "../index-BOVWnu1L.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/MenuItemsGuideSection-C5sAxs0l.js

@@ -1,351 +0,0 @@
-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-BOVWnu1L.js";
-import { Menu as g, Info as y } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const k = () => {
-  const c = [
-    { key: "property", label: "Property" },
-    { key: "type", label: "Type" },
-    { key: "required", label: "Required" },
-    { key: "description", label: "Description" }
-  ], m = [
-    {
-      property: "name",
-      type: "string",
-      required: "Yes",
-      description: "Display name of the menu item"
-    },
-    {
-      property: "path",
-      type: "string",
-      required: "Yes",
-      description: /* @__PURE__ */ t(o, { children: [
-        /* @__PURE__ */ e("strong", { children: "Internal route path" }),
-        " for React Router navigation (e.g., ",
-        /* @__PURE__ */ e("code", { children: "/dashboard" }),
-        "). Used for routing and active state detection."
-      ] })
-    },
-    {
-      property: "href",
-      type: "string?",
-      required: "No",
-      description: /* @__PURE__ */ t(o, { children: [
-        /* @__PURE__ */ e("strong", { children: "External URL" }),
-        " for redirection (e.g.,",
-        " ",
-        /* @__PURE__ */ e("code", { children: "https://example.com" }),
-        "). If provided, clicking will redirect to this URL instead of using React Router. Falls back to",
-        " ",
-        /* @__PURE__ */ e("code", { children: "path" }),
-        " if not provided."
-      ] })
-    },
-    {
-      property: "component",
-      type: "JSX.Element?",
-      required: "No",
-      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" }),
-        "."
-      ] })
-    },
-    {
-      property: "icon",
-      type: "React.ReactNode?",
-      required: "No",
-      description: "Icon element to display next to the menu item name (typically a Lucide icon)"
-    },
-    {
-      property: "dropdownItems",
-      type: "DropdownItemProps[]?",
-      required: "No",
-      description: "Array of sub-menu items for nested navigation. Creates a dropdown menu when provided."
-    },
-    {
-      property: "isActive",
-      type: "boolean?",
-      required: "No",
-      description: "Manually set active state. Usually handled automatically by matching the current pathname."
-    },
-    {
-      property: "hide",
-      type: "boolean?",
-      required: "No",
-      description: "Hide this menu item from navigation (useful for conditional rendering)"
-    },
-    {
-      property: "onClick",
-      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(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-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(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(
-        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 ?? "")
-              }
-            ) : 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(u, { variant: "info", children: /* @__PURE__ */ t("div", { children: [
-        /* @__PURE__ */ t("div", { className: "flex items-center gap-2 font-semibold", children: [
-          /* @__PURE__ */ e(y, { className: "h-4 w-4" }),
-          "Important: path vs href"
-        ] }),
-        /* @__PURE__ */ t("div", { className: "text-sm mt-1", children: [
-          /* @__PURE__ */ e("strong", { children: "path" }),
-          " is used for internal React Router navigation and active state detection. ",
-          /* @__PURE__ */ e("strong", { children: "href" }),
-          " ",
-          "is for external URLs (starts with ",
-          /* @__PURE__ */ e("code", { children: "http://" }),
-          " or",
-          " ",
-          /* @__PURE__ */ e("code", { children: "https://" }),
-          "). If both are provided,",
-          " ",
-          /* @__PURE__ */ e("code", { children: "href" }),
-          " takes precedence for navigation, but",
-          " ",
-          /* @__PURE__ */ e("code", { children: "path" }),
-          " is still used for active state matching."
-        ] })
-      ] }) })
-    ] }) }) }),
-    /* @__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(
-          r,
-          {
-            language: "tsx",
-            code: `const menuItems = [
-  {
-    name: 'Dashboard',
-    path: '/dashboard',
-    icon: <LucideIcons.Home />,
-    component: <Dashboard />,
-  },
-];`
-          }
-        )
-      ] }),
-      /* @__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(
-          r,
-          {
-            language: "tsx",
-            code: `const menuItems = [
-  {
-    name: 'Documentation',
-    path: '/docs', // Used for active state
-    href: 'https://docs.example.com', // External URL for navigation
-    icon: <LucideIcons.Book />,
-    // No component needed for external links
-  },
-];`
-          }
-        )
-      ] }),
-      /* @__PURE__ */ t("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ e(n, { tag: "h4", className: "font-semibold", children: "3. Menu Item with Dropdown" }),
-        /* @__PURE__ */ e(
-          r,
-          {
-            language: "tsx",
-            code: `const menuItems = [
-  {
-    name: 'Design System',
-    path: '/design-system',
-    icon: <LucideIcons.Palette />,
-    component: <DesignSystem />,
-    dropdownItems: [
-      {
-        name: 'Layout',
-        path: '/design-system/layout',
-        icon: <LucideIcons.Layout />,
-        component: <LayoutSystem />,
-      },
-      {
-        name: 'Theming',
-        path: '/design-system/theming',
-        icon: <LucideIcons.Paintbrush />,
-        component: <ThemingGuide />,
-      },
-    ],
-  },
-];`
-          }
-        )
-      ] }),
-      /* @__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(
-          r,
-          {
-            language: "tsx",
-            code: `import { LucideIcons } from '@ui/tucu-ui';
-import { Dashboard } from './pages/Dashboard';
-import { Settings } from './pages/Settings';
-import { Profile } from './pages/Profile';
-
-const menuItems = [
-  {
-    name: 'Dashboard',
-    path: '/',
-    icon: <LucideIcons.Home />,
-    component: <Dashboard />,
-  },
-  {
-    name: 'Settings',
-    path: '/settings',
-    icon: <LucideIcons.Settings />,
-    component: <Settings />,
-    dropdownItems: [
-      {
-        name: 'General',
-        path: '/settings/general',
-        component: <GeneralSettings />,
-      },
-      {
-        name: 'Profile',
-        path: '/settings/profile',
-        component: <Profile />,
-      },
-    ],
-  },
-  {
-    name: 'Documentation',
-    path: '/docs',
-    href: 'https://docs.example.com', // External link
-    icon: <LucideIcons.Book />,
-  },
-  {
-    name: 'Help',
-    path: '/help',
-    icon: <LucideIcons.HelpCircle />,
-    component: <Help />,
-    onClick: () => {
-      console.log('Help clicked');
-      // Custom click handler
-    },
-  },
-  {
-    name: 'Hidden Item',
-    path: '/hidden',
-    component: <HiddenPage />,
-    hide: true, // Hidden from menu but route still works
-  },
-];
-
-function App() {
-  return (
-    <ThemeProvider menuItems={menuItems} layout={LAYOUT_OPTIONS.ADMIN} />
-  );
-}`
-          }
-        )
-      ] }),
-      /* @__PURE__ */ t("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ e(n, { tag: "h4", className: "font-semibold", children: "5. Conditional Menu Items" }),
-        /* @__PURE__ */ e(
-          r,
-          {
-            language: "tsx",
-            code: `import { useAuth } from './hooks/useAuth';
-
-function App() {
-  const { isAdmin, isAuthenticated } = useAuth();
-
-  const menuItems = [
-    {
-      name: 'Home',
-      path: '/',
-      icon: <LucideIcons.Home />,
-      component: <Home />,
-    },
-    {
-      name: 'Dashboard',
-      path: '/dashboard',
-      icon: <LucideIcons.LayoutDashboard />,
-      component: <Dashboard />,
-      hide: !isAuthenticated, // Hide if not authenticated
-    },
-    {
-      name: 'Admin Panel',
-      path: '/admin',
-      icon: <LucideIcons.Shield />,
-      component: <AdminPanel />,
-      hide: !isAdmin, // Hide if not admin
-    },
-  ].filter((item) => !item.hide); // Filter out hidden items
-
-  return (
-    <ThemeProvider menuItems={menuItems} layout={LAYOUT_OPTIONS.ADMIN} />
-  );
-}`
-          }
-        )
-      ] })
-    ] }) }) }) })
-  ] });
-};
-export {
-  k as default
-};