import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
import { useState as o } from "react";
import { H as b, C as s, a as i, bm as l, P as h, A as f, c as x } from "../index-sdOMz8GW.js";
import { PanelLeft as v, Settings as c, Home as g, Search as u, Bell as N, AtSign as w, BellOff as p, Inbox as S, Star as y, Send as I, Briefcase as k, User as A, Archive as C } from "lucide-react";
import "react-router-dom";
import "react-dom";
const n = [
  {
    label: "Favorites",
    items: [
      {
        id: "inbox",
        label: "Inbox",
        icon: /* @__PURE__ */ e(S, { className: "w-4 h-4" }),
        badge: 12
      },
      {
        id: "starred",
        label: "Starred",
        icon: /* @__PURE__ */ e(y, { className: "w-4 h-4" })
      },
      {
        id: "sent",
        label: "Sent",
        icon: /* @__PURE__ */ e(I, { className: "w-4 h-4" })
      }
    ]
  },
  {
    label: "Folders",
    items: [
      {
        id: "work",
        label: "Work",
        icon: /* @__PURE__ */ e(k, { className: "w-4 h-4" }),
        badge: 3
      },
      {
        id: "personal",
        label: "Personal",
        icon: /* @__PURE__ */ e(A, { className: "w-4 h-4" })
      },
      {
        id: "archive",
        label: "Archive",
        icon: /* @__PURE__ */ e(C, { className: "w-4 h-4" }),
        disabled: !0
      }
    ]
  }
];
function M(t) {
  const [r, d] = o(t.activeId || "inbox");
  return /* @__PURE__ */ a("div", { className: "flex h-64 rounded-xl overflow-hidden border border-border", children: [
    /* @__PURE__ */ e(
      l,
      {
        sections: n,
        activeId: r,
        onSelect: d,
        header: /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-gray-800 dark:text-gray-100", children: "Mail" })
      }
    ),
    /* @__PURE__ */ a("div", { className: "flex flex-1 items-center justify-center bg-gray-50 dark:bg-gray-900 text-sm text-gray-500", children: [
      "Active:",
      " ",
      /* @__PURE__ */ e("span", { className: "ml-1 font-medium text-gray-800 dark:text-gray-200", children: r })
    ] })
  ] });
}
const W = () => {
  const [t, r] = o("inbox");
  return /* @__PURE__ */ a(m, { children: [
    /* @__PURE__ */ e(
      b,
      {
        title: "MacSidebarCard",
        description: "A macOS-style navigation sidebar with backdrop blur, section group labels, badge counts, active-item tinting, header/footer slots, and disabled state for items.",
        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-slate-500 via-gray-600 to-zinc-700 rounded-full flex items-center justify-center shadow-lg border border-slate-500/50", children: /* @__PURE__ */ e(v, { 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(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Interactive Sidebar", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "flex h-72 rounded-xl overflow-hidden border border-border shadow-sm", children: [
      /* @__PURE__ */ e(
        l,
        {
          sections: n,
          activeId: t,
          onSelect: r,
          header: /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-gray-800 dark:text-gray-100", children: "Mail" }),
          footer: /* @__PURE__ */ a("button", { className: "flex items-center gap-2 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300", children: [
            /* @__PURE__ */ e(c, { className: "w-3.5 h-3.5" }),
            "Preferences"
          ] })
        }
      ),
      /* @__PURE__ */ a("div", { className: "flex flex-1 items-center justify-center bg-gray-50 dark:bg-gray-900 text-sm text-gray-500", children: [
        "Active:",
        " ",
        /* @__PURE__ */ e("span", { className: "ml-1 font-medium text-gray-800 dark:text-gray-200", children: t })
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Without Section Labels", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "flex h-56 rounded-xl overflow-hidden border border-border shadow-sm", children: [
      /* @__PURE__ */ e(
        l,
        {
          sections: [
            {
              items: [
                {
                  id: "home",
                  label: "Home",
                  icon: /* @__PURE__ */ e(g, { className: "w-4 h-4" })
                },
                {
                  id: "search",
                  label: "Search",
                  icon: /* @__PURE__ */ e(u, { className: "w-4 h-4" })
                },
                {
                  id: "settings",
                  label: "Settings",
                  icon: /* @__PURE__ */ e(c, { className: "w-4 h-4" })
                }
              ]
            }
          ],
          activeId: "home",
          onSelect: () => {
          }
        }
      ),
      /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center bg-gray-50 dark:bg-gray-900 text-sm text-gray-400", children: "Main content area" })
    ] }) }) }) }),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(
      i,
      {
        title: "With Badge Counts & Disabled Items",
        className: "mt-2 mb-2",
        children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "flex h-64 rounded-xl overflow-hidden border border-border shadow-sm", children: [
          /* @__PURE__ */ e(
            l,
            {
              sections: [
                {
                  label: "Notifications",
                  items: [
                    {
                      id: "all",
                      label: "All",
                      icon: /* @__PURE__ */ e(N, { className: "w-4 h-4" }),
                      badge: 42
                    },
                    {
                      id: "mentions",
                      label: "Mentions",
                      icon: /* @__PURE__ */ e(w, { className: "w-4 h-4" }),
                      badge: 7
                    },
                    {
                      id: "muted",
                      label: "Muted",
                      icon: /* @__PURE__ */ e(p, { className: "w-4 h-4" }),
                      disabled: !0
                    }
                  ]
                }
              ],
              activeId: "all",
              onSelect: () => {
              }
            }
          ),
          /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center bg-gray-50 dark:bg-gray-900 text-sm text-gray-400", children: "Badges show count; disabled items appear muted" })
        ] }) })
      }
    ) }),
    /* @__PURE__ */ e(
      h,
      {
        componentName: "MacOSSidebar",
        defaultValues: {
          activeId: "inbox"
        },
        controlOverrides: [
          {
            name: "activeId",
            type: "select",
            options: [
              "inbox",
              "starred",
              "sent",
              "work",
              "personal",
              "archive"
            ],
            description: "Currently active item ID"
          }
        ],
        includeProps: ["activeId"],
        excludeProps: ["className", "sections", "onSelect", "header", "footer"],
        children: (d) => /* @__PURE__ */ e(M, { ...d })
      }
    ),
    /* @__PURE__ */ e(f, { componentName: "MacOSSidebar" }),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      x,
      {
        language: "tsx",
        code: `import { MacSidebarCard } from '@e-burgos/tucu-ui';

const sections = [
  {
    label: 'Favorites',
    items: [
      { id: 'inbox', label: 'Inbox', icon: <InboxIcon />, badge: 12 },
      { id: 'starred', label: 'Starred', icon: <StarIcon /> },
    ],
  },
  {
    label: 'Folders',
    items: [
      { id: 'work', label: 'Work', icon: <BriefcaseIcon /> },
      { id: 'archive', label: 'Archive', icon: <ArchiveIcon />, disabled: true },
    ],
  },
];

function App() {
  const [activeId, setActiveId] = useState('inbox');

  return (
    <div className="flex h-screen">
      <MacSidebarCard
        sections={sections}
        activeId={activeId}
        onSelect={setActiveId}
        header={<h2>Mail</h2>}
        footer={<PreferencesButton />}
      />
      <main className="flex-1">Content</main>
    </div>
  );
}`
      }
    ) }) }) })
  ] });
};
export {
  W as MacOSSidebarSection,
  W as default
};
