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-sdOMz8GW.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
};
