import { jsxs as s, Fragment as o, jsx as e } from "react/jsx-runtime";
import { H as m, C as a, a as n, T as t, P as r, a7 as l, A as d, c } from "../index-sdOMz8GW.js";
import { LayoutList as u } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const N = () => /* @__PURE__ */ s(o, { children: [
  /* @__PURE__ */ e(
    m,
    {
      title: "SidebarMenu",
      description: `A sidebar component with built-in menu navigation, supporting icons,
          paths, and dropdown items.`,
      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-yellow-500 to-amber-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(u, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ s(a, { className: "p-4", children: [
    /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Basic Sidebar Menu" }),
    /* @__PURE__ */ e(t, { tag: "p", className: "mb-4 text-sm text-gray-600", children: "Note: SidebarMenu is typically used within a Drawer component. This example shows the structure." }),
    /* @__PURE__ */ e(t, { tag: "p", className: "text-sm", children: "The SidebarMenu component provides a navigation menu with icons and links, perfect for mobile navigation drawers." })
  ] }) }) }) }) }),
  /* @__PURE__ */ e(
    r,
    {
      componentName: "SidebarMenu",
      title: "SidebarMenu Playground",
      defaultValues: {
        title: "Navigation",
        position: "left"
      },
      excludeProps: [
        "menuItems",
        "onClose",
        "actionContent",
        "logo",
        "className"
      ],
      children: (i) => /* @__PURE__ */ e(
        l,
        {
          ...i,
          menuItems: [
            { name: "Home", href: "#" },
            { name: "Settings", href: "#" },
            { name: "Profile", href: "#" }
          ],
          onClose: () => null
        }
      )
    }
  ),
  /* @__PURE__ */ e(d, { componentName: "SidebarMenu" }),
  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
    c,
    {
      language: "tsx",
      code: `import { SidebarMenu, LucideIcons } from '@e-burgos/tucu-ui';

const menuItems = [
  {
    name: 'Home',
    icon: <LucideIcons.Home className="w-5 h-5" />,
    path: '/home',
  },
  {
    name: 'Settings',
    icon: <LucideIcons.Settings className="w-5 h-5" />,
    path: '/settings',
  },
];

// Basic usage (typically within Drawer)
<SidebarMenu
  menuItems={menuItems}
  onClose={() => setIsOpen(false)}
/>

// With title
<SidebarMenu
  menuItems={menuItems}
  title="Navigation"
  onClose={() => setIsOpen(false)}
/>

// With logo
<SidebarMenu
  menuItems={menuItems}
  logo={{ name: 'MyApp' }}
  onClose={() => setIsOpen(false)}
/>

// With dropdown items
const menuItemsWithDropdown = [
  {
    name: 'Products',
    path: '/products',
    dropdownItems: [
      { name: 'All Products', path: '/products/all' },
      { name: 'Featured', path: '/products/featured' },
    ],
  },
];`
    }
  ) }) }) })
] });
export {
  N as default
};
