import { jsxs as a, Fragment as s, jsx as e } from "react/jsx-runtime";
import { H as r, C as o, a as t, bp as n, c as i } from "../index-sdOMz8GW.js";
import { PanelLeftClose as c, LayoutDashboard as m, Play as l, Archive as d, FolderKanban as h, BarChart2 as p, Users as u, Settings as b } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const g = [
  {
    name: "Dashboard",
    icon: /* @__PURE__ */ e(m, { className: "h-4 w-4" }),
    path: "/dashboard",
    isActive: !0
  },
  {
    name: "Projects",
    icon: /* @__PURE__ */ e(h, { className: "h-4 w-4" }),
    path: "/projects",
    dropdownItems: [
      {
        name: "Active",
        icon: /* @__PURE__ */ e(l, { className: "h-4 w-4" }),
        path: "/projects/active"
      },
      {
        name: "Archived",
        icon: /* @__PURE__ */ e(d, { className: "h-4 w-4" }),
        path: "/projects/archived"
      }
    ]
  },
  {
    name: "Analytics",
    icon: /* @__PURE__ */ e(p, { className: "h-4 w-4" }),
    path: "/analytics"
  },
  {
    name: "Team",
    icon: /* @__PURE__ */ e(u, { className: "h-4 w-4" }),
    path: "/team"
  },
  {
    name: "Settings",
    icon: /* @__PURE__ */ e(b, { className: "h-4 w-4" }),
    path: "/settings"
  }
], x = () => /* @__PURE__ */ a(s, { children: [
  /* @__PURE__ */ e(
    r,
    {
      title: "MacOSSonomaLayoutSidebar",
      description: "Full-app navigation sidebar for Sonoma layouts. Supports nested items with expandable groups, logo slot, route-aware active highlighting, and backdrop blur vibrancy.",
      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-400 via-cyan-500 to-blue-600 rounded-full flex items-center justify-center shadow-lg border border-teal-400/50", children: /* @__PURE__ */ e(c, { 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(t, { title: "Interactive Preview", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "flex h-80 rounded-xl overflow-hidden border border-(--color-semantic-line-primary-subtle) shadow-(--shadow-card)", children: [
    /* @__PURE__ */ e(n, { menuItems: g }),
    /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center bg-(--color-semantic-bg) text-sm text-gray-400", children: "Main content area" })
  ] }) }) }) }),
  /* @__PURE__ */ e(o, { 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(
    i,
    {
      language: "tsx",
      code: `import { MacOSSonomaLayoutSidebar } from '@e-burgos/tucu-ui';

const menuItems = [
  { name: 'Dashboard', icon: <DashboardIcon />, path: '/dashboard' },
  {
    name: 'Projects',
    icon: <FolderIcon />,
    path: '/projects',
    dropdownItems: [
      { name: 'Active', icon: <PlayIcon />, path: '/projects/active' },
      { name: 'Archived', icon: <ArchiveIcon />, path: '/projects/archived' },
    ],
  },
  { name: 'Settings', icon: <SettingsIcon />, path: '/settings' },
];

function App() {
  return (
    <div className="flex h-screen">
      <MacOSSonomaLayoutSidebar
        menuItems={menuItems}
        logo={{ logoDark: '/logo.svg', logoLight: '/logo.svg' }}
      />
      <main className="flex-1">Content</main>
    </div>
  );
}`
    }
  ) }) }) })
] });
export {
  x as SonomaLayoutSidebarSection,
  x as default
};
