@bensdev/react-sidebar 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1323 @@
+"use client";
+'use strict';
+
+var React21 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React21__namespace = /*#__PURE__*/_interopNamespace(React21);
+
+// src/Sidebar.tsx
+
+// src/lib/cx.ts
+function cx(...values) {
+  let out = "";
+  for (const v of values) {
+    if (!v && v !== 0) continue;
+    out += (out ? " " : "") + v;
+  }
+  return out;
+}
+
+// src/lib/themeToStyle.ts
+var kebab = (s) => s.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
+var NUMERIC_PX = /* @__PURE__ */ new Set([
+  "width",
+  "widthCollapsed",
+  "drawerWidth",
+  "headerHeight",
+  "itemHeight",
+  "iconSize",
+  "accentWidth",
+  "toggleSize",
+  "toggleOffsetY",
+  "logoSize",
+  "avatarSize"
+]);
+function themeToStyle(theme, scheme) {
+  if (!theme) return {};
+  const { light, dark, ...base } = theme;
+  const merged = {
+    ...base,
+    ...scheme === "dark" ? dark : light
+  };
+  const out = {};
+  for (const [key, value] of Object.entries(merged)) {
+    if (value == null) continue;
+    out[`--bsb-${kebab(key)}`] = typeof value === "number" && NUMERIC_PX.has(key) ? `${value}px` : String(value);
+  }
+  return out;
+}
+function useMediaQuery(query) {
+  const subscribe = React21__namespace.useCallback(
+    (cb) => {
+      if (typeof window === "undefined" || !window.matchMedia) return () => {
+      };
+      const mql = window.matchMedia(query);
+      mql.addEventListener("change", cb);
+      return () => mql.removeEventListener("change", cb);
+    },
+    [query]
+  );
+  const getSnapshot = React21__namespace.useCallback(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return false;
+    return window.matchMedia(query).matches;
+  }, [query]);
+  const getServerSnapshot = React21__namespace.useCallback(() => false, []);
+  return React21__namespace.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+function toBreakpointQuery(breakpoint) {
+  return typeof breakpoint === "number" ? `(max-width: ${breakpoint - 1}px)` : breakpoint;
+}
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React21__namespace.useLayoutEffect : React21__namespace.useEffect;
+
+// src/hooks/useColorScheme.ts
+function useColorScheme(pref, ref) {
+  const [resolved, setResolved] = React21__namespace.useState(pref === "dark" ? "dark" : "light");
+  useIsomorphicLayoutEffect(() => {
+    if (pref !== "auto") {
+      setResolved(pref);
+      return;
+    }
+    const el = ref.current;
+    if (!el || typeof window === "undefined") return;
+    const read = () => {
+      const darkAncestor = el.closest('.dark, [data-theme="dark"], [data-color-scheme="dark"]');
+      const lightAncestor = el.closest('[data-theme="light"], [data-color-scheme="light"]');
+      if (darkAncestor && (!lightAncestor || darkAncestor.contains(lightAncestor))) {
+        setResolved("dark");
+        return;
+      }
+      if (lightAncestor) {
+        setResolved("light");
+        return;
+      }
+      setResolved(window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+    };
+    read();
+    const mo = new MutationObserver(read);
+    mo.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme", "data-color-scheme"],
+      subtree: true
+    });
+    const mql = window.matchMedia?.("(prefers-color-scheme: dark)");
+    mql?.addEventListener("change", read);
+    return () => {
+      mo.disconnect();
+      mql?.removeEventListener("change", read);
+    };
+  }, [pref, ref]);
+  return resolved;
+}
+function useControllableState({
+  value,
+  defaultValue,
+  onChange
+}) {
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React21__namespace.useState(defaultValue);
+  const current = isControlled ? value : internal;
+  const setState = React21__namespace.useCallback(
+    (next) => {
+      const resolved = typeof next === "function" ? next(current) : next;
+      if (!isControlled) setInternal(resolved);
+      onChange?.(resolved);
+    },
+    [isControlled, current, onChange]
+  );
+  return [current, setState];
+}
+
+// src/lib/storage.ts
+function safeLocalStorage() {
+  if (typeof window === "undefined") return null;
+  try {
+    const testKey = "__bsb_storage_test__";
+    window.localStorage.setItem(testKey, "1");
+    window.localStorage.removeItem(testKey);
+  } catch {
+    return null;
+  }
+  return {
+    getItem: (key) => {
+      try {
+        return window.localStorage.getItem(key);
+      } catch {
+        return null;
+      }
+    },
+    setItem: (key, value) => {
+      try {
+        window.localStorage.setItem(key, value);
+      } catch {
+      }
+    }
+  };
+}
+function isStorageAdapter(value) {
+  return typeof value === "object" && value !== null && typeof value.getItem === "function" && typeof value.setItem === "function";
+}
+
+// src/hooks/usePersistedCollapse.ts
+var DEFAULT_KEY = "sidebar-collapsed";
+function usePersistedCollapse(persist) {
+  const key = typeof persist === "string" ? persist : DEFAULT_KEY;
+  const store = React21__namespace.useMemo(() => {
+    if (!persist) return null;
+    if (isStorageAdapter(persist)) return persist;
+    return safeLocalStorage();
+  }, [persist]);
+  const subscribe = React21__namespace.useCallback(
+    (cb) => {
+      if (!store) return () => {
+      };
+      if (store.subscribe) return store.subscribe(cb);
+      if (typeof window === "undefined") return () => {
+      };
+      const handler = (e) => {
+        if (e.key === key) cb();
+      };
+      window.addEventListener("storage", handler);
+      return () => window.removeEventListener("storage", handler);
+    },
+    [store, key]
+  );
+  const getSnapshot = React21__namespace.useCallback(() => {
+    if (!store) return null;
+    const raw = store.getItem(key);
+    return raw === null ? null : raw === "true";
+  }, [store, key]);
+  const getServerSnapshot = React21__namespace.useCallback(() => null, []);
+  const persisted = React21__namespace.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const setPersisted = React21__namespace.useCallback(
+    (value) => {
+      store?.setItem(key, String(value));
+    },
+    [store, key]
+  );
+  return [persist ? persisted : null, setPersisted];
+}
+function useCurrentPath(explicit) {
+  const subscribe = React21__namespace.useCallback((cb) => {
+    if (typeof window === "undefined") return () => {
+    };
+    window.addEventListener("popstate", cb);
+    window.addEventListener("hashchange", cb);
+    return () => {
+      window.removeEventListener("popstate", cb);
+      window.removeEventListener("hashchange", cb);
+    };
+  }, []);
+  const getSnapshot = React21__namespace.useCallback(() => {
+    if (typeof window === "undefined") return "/";
+    return window.location.pathname;
+  }, []);
+  const getServerSnapshot = React21__namespace.useCallback(() => "/", []);
+  const tracked = React21__namespace.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return explicit ?? tracked;
+}
+var NavContext = React21__namespace.createContext(null);
+function useNavContext() {
+  const ctx = React21__namespace.useContext(NavContext);
+  if (!ctx) {
+    throw new Error("@bensdev/react-sidebar: nav components must be rendered inside <Sidebar>.");
+  }
+  return ctx;
+}
+function isShapedBadge(value) {
+  return typeof value === "object" && value !== null && "content" in value;
+}
+function Badge({
+  value,
+  className
+}) {
+  if (value == null) return null;
+  const shaped = isShapedBadge(value);
+  const content = shaped ? value.content : value;
+  const tone = shaped ? value.tone ?? "default" : "default";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cx("bsb-badge", `bsb-badge--${tone}`, shaped ? value.className : void 0, className),
+      children: content
+    }
+  );
+}
+function isBrandConfig(value) {
+  return typeof value === "object" && value !== null && !React21__namespace.isValidElement(value) && ("logo" in value || "title" in value || "subtitle" in value || "badge" in value || "logoNode" in value);
+}
+function SidebarHeader({ brand, header, collapsed, classNames, renderCtx, toggle }) {
+  if (header !== void 0) {
+    const content = typeof header === "function" ? header(renderCtx) : header;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("bsb-header", classNames.header), children: [
+      content,
+      toggle
+    ] });
+  }
+  if (brand === void 0) return null;
+  const resolved = typeof brand === "function" ? brand(renderCtx) : brand;
+  if (!isBrandConfig(resolved)) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("bsb-header", classNames.header), children: [
+      resolved,
+      toggle
+    ] });
+  }
+  const config = resolved;
+  const TitleTag = config.href ? "a" : config.onClick ? "button" : "div";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("bsb-header", collapsed && "bsb-header--collapsed", classNames.header), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      TitleTag,
+      {
+        className: cx("bsb-brand", classNames.brand),
+        href: config.href,
+        type: TitleTag === "button" ? "button" : void 0,
+        onClick: config.onClick,
+        children: [
+          config.logoNode ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("bsb-logo", classNames.logo), "aria-hidden": !!config.title, children: config.logo }),
+          !collapsed && (config.title || config.subtitle || config.badge != null) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "bsb-brand__text", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "bsb-brand__title-row", children: [
+              config.title != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("bsb-title", classNames.title), children: config.title }),
+              config.badge != null && /* @__PURE__ */ jsxRuntime.jsx(Badge, { value: config.badge, className: classNames.headerBadge })
+            ] }),
+            config.subtitle != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("bsb-subtitle", classNames.subtitle), children: config.subtitle })
+          ] })
+        ]
+      }
+    ),
+    toggle
+  ] });
+}
+
+// src/lib/isActive.ts
+function normalizePath(path) {
+  const stripped = (path || "/").split("?")[0].split("#")[0];
+  return stripped.length > 1 && stripped.endsWith("/") ? stripped.slice(0, -1) : stripped;
+}
+function defaultIsActive(href, currentPath, end = false) {
+  const target = normalizePath(href);
+  const current = normalizePath(currentPath);
+  if (end || target === "/") return target === current;
+  return current === target || current.startsWith(target + "/");
+}
+function resolveIsActive(item, currentPath, exact, isItemActive) {
+  const href = item.href;
+  const fallback = href ? defaultIsActive(href, currentPath, item.end ?? exact) : false;
+  if (typeof item.isActive === "function") {
+    return item.isActive({ currentPath, item, defaultIsActive: fallback });
+  }
+  if (typeof item.isActive === "boolean") return item.isActive;
+  if (item.type !== "group" && isItemActive) {
+    const custom = isItemActive(item, { currentPath, item, defaultIsActive: fallback });
+    if (custom !== void 0) return custom;
+  }
+  return fallback;
+}
+function groupHasActiveDescendant(item, currentPath, exact, isItemActive) {
+  if (item.href && resolveIsActive(item, currentPath, exact, isItemActive)) return true;
+  return item.items.some((child) => itemHasActiveDescendant(child, currentPath, exact, isItemActive));
+}
+function itemHasActiveDescendant(item, currentPath, exact, isItemActive) {
+  if (item.type === "group") return groupHasActiveDescendant(item, currentPath, exact, isItemActive);
+  if (item.type === "link" || item.type === void 0) {
+    return resolveIsActive(item, currentPath, exact, isItemActive);
+  }
+  return false;
+}
+function Tooltip({ id, children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id, role: "tooltip", className: cx("bsb-tooltip", className), "aria-hidden": "true", children });
+}
+var uid = 0;
+function useStableId(prefix) {
+  const ref = React21__namespace.useRef(null);
+  if (!ref.current) ref.current = `${prefix}-${++uid}`;
+  return ref.current;
+}
+function SidebarLinkRow({ item, depth, active: activeOverride }) {
+  const ctx = useNavContext();
+  const tooltipId = useStableId("bsb-tooltip");
+  const isLink = item.type !== "action";
+  const linkItem = isLink ? item : null;
+  const actionItem = !isLink ? item : null;
+  const isActive = activeOverride ?? (linkItem ? resolveIsActive(linkItem, ctx.currentPath, ctx.exact, ctx.isItemActive) : !!actionItem?.selected);
+  const showTooltip = ctx.collapsed && ctx.tooltips && item.tooltip !== false && !ctx.isMobile;
+  const tooltipContent = item.tooltip ?? item.label;
+  const handleClick = (e) => {
+    if (item.disabled) {
+      e.preventDefault();
+      return;
+    }
+    if (linkItem?.onClick) linkItem.onClick(e);
+    if (actionItem) actionItem.onSelect(e);
+    ctx.handleNavigate(item, e);
+  };
+  const className = cx(
+    "bsb-item",
+    ctx.classNames.item,
+    isActive && "bsb-item--active",
+    isActive && ctx.classNames.itemActive,
+    item.disabled && "bsb-item--disabled",
+    item.disabled && ctx.classNames.itemDisabled,
+    item.className
+  );
+  const style = depth > 0 ? { paddingInlineStart: `calc(var(--bsb-item-padding-x) + ${depth} * var(--bsb-indent-step))` } : void 0;
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    item.icon != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("bsb-item__icon", ctx.classNames.itemIcon), "aria-hidden": "true", children: item.icon }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("bsb-item__label", ctx.classNames.itemLabel), children: item.label }),
+    item.badge != null && /* @__PURE__ */ jsxRuntime.jsx(Badge, { value: item.badge, className: ctx.classNames.badge }),
+    showTooltip && /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { id: tooltipId, className: ctx.classNames.tooltip, children: tooltipContent })
+  ] });
+  const commonProps = {
+    className,
+    style,
+    onClick: handleClick,
+    "aria-disabled": item.disabled || void 0,
+    "aria-describedby": showTooltip ? tooltipId : void 0
+  };
+  let node;
+  if (actionItem) {
+    node = /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        ...commonProps,
+        disabled: item.disabled,
+        "aria-pressed": actionItem.selected,
+        children: inner
+      }
+    );
+  } else if (linkItem && !item.disabled) {
+    const href = linkItem.href;
+    const rowProps = {
+      ...commonProps,
+      ...linkItem.linkProps,
+      target: linkItem.target,
+      rel: linkItem.rel,
+      "aria-current": isActive ? "page" : void 0
+    };
+    if (ctx.renderLink) {
+      node = ctx.renderLink({
+        item: linkItem,
+        href,
+        isActive,
+        className,
+        children: inner,
+        props: rowProps,
+        ctx: ctx.renderCtx
+      });
+    } else {
+      const Comp = ctx.linkComponent ?? "a";
+      const hrefKey = ctx.hrefProp || "href";
+      node = /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...rowProps, ...{ [hrefKey]: href }, children: inner });
+    }
+  } else {
+    node = /* @__PURE__ */ jsxRuntime.jsx("span", { role: "link", tabIndex: -1, ...commonProps, children: inner });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "bsb-list-item", children: node });
+}
+function baseProps(size, rest) {
+  return {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size ?? 18,
+    height: size ?? 18,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    ...rest
+  };
+}
+function ChevronLeftIcon({ size, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseProps(size, rest), children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 18-6-6 6-6" }) });
+}
+function ChevronRightIcon({ size, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseProps(size, rest), children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" }) });
+}
+function ChevronDownIcon({ size, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseProps(size, rest), children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) });
+}
+function CloseIcon({ size, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseProps(size, rest), children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
+}
+function MenuIcon({ size, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseProps(size, rest), children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 12h16M4 6h16M4 18h16" }) });
+}
+var uid2 = 0;
+function useStableId2(prefix) {
+  const ref = React21__namespace.useRef(null);
+  if (!ref.current) ref.current = `${prefix}-${++uid2}`;
+  return ref.current;
+}
+function SidebarGroupRow({ item, depth }) {
+  const ctx = useNavContext();
+  const fallbackGroupId = useStableId2("bsb-group");
+  const groupId = item.id ?? fallbackGroupId;
+  const panelId = `${groupId}-panel`;
+  const tooltipId = `${groupId}-tooltip`;
+  const collapsible = item.collapsible ?? true;
+  const hasActiveChild = groupHasActiveDescendant(item, ctx.currentPath, ctx.exact, ctx.isItemActive);
+  const selfActive = item.href ? resolveIsActive(item, ctx.currentPath, ctx.exact) : false;
+  const controlledOpen = item.open;
+  const isOpen = controlledOpen ?? (!collapsible || ctx.openGroups.has(groupId) || ctx.autoOpenActiveGroup && hasActiveChild);
+  const toggle = () => {
+    if (item.onOpenChange) {
+      item.onOpenChange(!isOpen);
+      return;
+    }
+    ctx.toggleGroup(groupId);
+  };
+  const showTooltip = ctx.collapsed && ctx.tooltips && item.tooltip !== false && !ctx.isMobile;
+  const isRail = ctx.collapsed && !ctx.isMobile;
+  const behavior = ctx.collapsedGroupBehavior;
+  const triggerClassName = cx(
+    "bsb-item",
+    "bsb-group__trigger",
+    ctx.classNames.item,
+    ctx.classNames.groupTrigger,
+    (hasActiveChild || selfActive) && "bsb-item--active",
+    (hasActiveChild || selfActive) && ctx.classNames.itemActive,
+    item.className
+  );
+  const style = depth > 0 ? { paddingInlineStart: `calc(var(--bsb-item-padding-x) + ${depth} * var(--bsb-indent-step))` } : void 0;
+  const trigger = /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: triggerClassName,
+      style,
+      onClick: collapsible ? toggle : void 0,
+      "aria-expanded": collapsible ? isOpen : void 0,
+      "aria-controls": collapsible ? panelId : void 0,
+      "aria-describedby": showTooltip ? tooltipId : void 0,
+      children: [
+        item.icon != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("bsb-item__icon", ctx.classNames.itemIcon), "aria-hidden": "true", children: item.icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("bsb-item__label", ctx.classNames.itemLabel), children: item.label }),
+        item.badge != null && /* @__PURE__ */ jsxRuntime.jsx(Badge, { value: item.badge, className: ctx.classNames.badge }),
+        collapsible && !isRail && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cx("bsb-group__chevron", isOpen && "bsb-group__chevron--open", ctx.classNames.groupChevron),
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: 14 })
+          }
+        ),
+        showTooltip && behavior !== "flyout" && /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { id: tooltipId, className: ctx.classNames.tooltip, children: item.tooltip ?? item.label })
+      ]
+    }
+  );
+  if (isRail && behavior === "flyout") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cx("bsb-list-item", "bsb-group", "bsb-group--flyout"), children: [
+      trigger,
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cx("bsb-group__flyout", ctx.classNames.groupPanel),
+          role: "group",
+          "aria-label": typeof item.label === "string" ? item.label : void 0,
+          children: [
+            item.label != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bsb-group__flyout-label", children: item.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(NavContext.Provider, { value: { ...ctx, collapsed: false, tooltips: false }, children: /* @__PURE__ */ jsxRuntime.jsx(SidebarNodeList, { items: item.items, depth: 0 }) })
+          ]
+        }
+      )
+    ] });
+  }
+  if (isRail && behavior === "ignore") {
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "bsb-list-item", children: trigger });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cx("bsb-list-item", "bsb-group"), children: [
+    trigger,
+    (isOpen || !collapsible) && /* @__PURE__ */ jsxRuntime.jsx("ul", { id: panelId, className: cx("bsb-group__panel", ctx.classNames.groupPanel), children: /* @__PURE__ */ jsxRuntime.jsx(SidebarNodeList, { items: item.items, depth: depth + 1 }) })
+  ] });
+}
+function SidebarNode({ item, depth }) {
+  const ctx = useNavContext();
+  if ("hidden" in item && item.hidden) return null;
+  const defaultNode = (() => {
+    switch (item.type) {
+      case "divider":
+        return /* @__PURE__ */ jsxRuntime.jsx("li", { className: cx("bsb-list-item", "bsb-divider-item"), role: "separator", children: /* @__PURE__ */ jsxRuntime.jsx("hr", { className: cx("bsb-divider", ctx.classNames.divider, item.className) }) });
+      case "heading":
+        return /* @__PURE__ */ jsxRuntime.jsx("li", { className: cx("bsb-list-item", "bsb-heading-item"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("bsb-heading", ctx.classNames.heading, item.className), children: item.label }) });
+      case "custom":
+        return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "bsb-list-item bsb-custom-item", children: item.render(ctx.renderCtx) });
+      case "group":
+        return /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupRow, { item, depth });
+      case "action":
+      case "link":
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(SidebarLinkRow, { item, depth });
+    }
+  })();
+  if (ctx.renderItem) {
+    const custom = ctx.renderItem(item, ctx.renderCtx, defaultNode);
+    if (custom !== void 0) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: custom });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: defaultNode });
+}
+function SidebarNodeList({ items, depth }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(SidebarNode, { item, depth }, item.id ?? ("href" in item ? item.href : void 0) ?? `${item.type ?? "link"}-${i}`)) });
+}
+function SidebarNav({ items, ariaLabel }) {
+  const ctx = useNavContext();
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cx("bsb-nav", ctx.classNames.nav), "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx("bsb-list", ctx.classNames.list), children: /* @__PURE__ */ jsxRuntime.jsx(SidebarNodeList, { items, depth: 0 }) }) });
+}
+
+// src/lib/initials.ts
+function initialsFromName(name, fallback = "") {
+  if (typeof name !== "string" || !name.trim()) return fallback;
+  return name.trim().split(/\s+/).map((part) => part[0]).join("").slice(0, 2).toUpperCase();
+}
+function SidebarFooter({
+  user,
+  footerAction,
+  footer,
+  collapsed,
+  collapsedFooter,
+  classNames,
+  renderCtx
+}) {
+  if (footer !== void 0) {
+    const content = typeof footer === "function" ? footer(renderCtx) : footer;
+    if (!content) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("bsb-footer", classNames.footer), children: content });
+  }
+  if (!user && !footerAction) return null;
+  const actions = footerAction ? Array.isArray(footerAction) ? footerAction : [footerAction] : [];
+  const initials = user ? initialsFromName(user.name, user.fallbackInitials ?? "") || user.fallbackInitials || "" : "";
+  if (collapsed && collapsedFooter === "hidden") return null;
+  const avatar = user && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("bsb-avatar", classNames.avatar), children: user.avatarUrl ? (
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ jsxRuntime.jsx("img", { src: user.avatarUrl, alt: "", className: "bsb-avatar__img" })
+  ) : user.avatar ? user.avatar : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bsb-avatar__initials", children: initials }) });
+  if (collapsed && collapsedFooter === "avatar") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("bsb-footer", "bsb-footer--collapsed", classNames.footer), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("bsb-user", "bsb-user--centered", classNames.user), children: avatar }) });
+  }
+  if (collapsed && collapsedFooter === "stack") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("bsb-footer", "bsb-footer--collapsed", "bsb-footer--stacked", classNames.footer), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("bsb-user", "bsb-user--centered", classNames.user), children: avatar }),
+      actions.map((action, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: cx("bsb-footer-action", classNames.footerAction),
+          title: action.label,
+          "aria-label": action.label,
+          onClick: action.onClick,
+          children: action.icon
+        },
+        i
+      ))
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("bsb-footer", classNames.footer), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("bsb-user", classNames.user), children: [
+    avatar,
+    (user?.name != null || user?.email != null) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "bsb-user__text", children: [
+      user?.name != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("bsb-user__name", classNames.userName), children: user.name }),
+      user?.email != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("bsb-user__meta", classNames.userMeta), children: user.email })
+    ] }),
+    actions.map((action, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: cx("bsb-footer-action", classNames.footerAction),
+        title: action.label,
+        "aria-label": action.label,
+        onClick: action.onClick,
+        children: action.icon
+      },
+      i
+    ))
+  ] }) });
+}
+function CollapseToggle({
+  collapsed,
+  onToggle,
+  className,
+  position,
+  strategy,
+  labels,
+  icon
+}) {
+  const label = collapsed ? labels.expand : labels.collapse;
+  const showRightChevron = position === "left" ? collapsed : !collapsed;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      title: label,
+      "aria-label": label,
+      "data-toggle-strategy": strategy,
+      className: cx("bsb-toggle", className),
+      children: icon ? icon(collapsed) : showRightChevron ? /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { size: 13 }) : /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: 13 })
+    }
+  );
+}
+function SidebarShell({
+  items,
+  ariaLabel,
+  brand,
+  header,
+  footer,
+  user,
+  footerAction,
+  collapsed,
+  collapsedFooter,
+  showToggle,
+  onToggle,
+  togglePosition,
+  toggleStrategy,
+  toggleLabels,
+  classNames,
+  slots,
+  renderCtx,
+  extraHeader
+}) {
+  const navTop = typeof slots.navTop === "function" ? slots.navTop(renderCtx) : slots.navTop;
+  const navBottom = typeof slots.navBottom === "function" ? slots.navBottom(renderCtx) : slots.navBottom;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bsb-shell", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SidebarHeader, { brand, header, collapsed, classNames, renderCtx }),
+    extraHeader,
+    navTop,
+    /* @__PURE__ */ jsxRuntime.jsx(SidebarNav, { items, ariaLabel }),
+    navBottom,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SidebarFooter,
+      {
+        user,
+        footerAction,
+        footer,
+        collapsed,
+        collapsedFooter,
+        classNames,
+        renderCtx
+      }
+    ),
+    showToggle && /* @__PURE__ */ jsxRuntime.jsx(
+      CollapseToggle,
+      {
+        collapsed,
+        onToggle,
+        className: classNames.toggle,
+        position: togglePosition,
+        strategy: toggleStrategy,
+        labels: toggleLabels,
+        icon: slots.collapseIcon
+      }
+    )
+  ] });
+}
+function useMountTransition(open, durationMs) {
+  const [mounted, setMounted] = React21__namespace.useState(open);
+  const [state, setState] = React21__namespace.useState(open ? "open" : "closed");
+  React21__namespace.useEffect(() => {
+    if (open) {
+      setMounted(true);
+      const raf1 = requestAnimationFrame(() => {
+        requestAnimationFrame(() => setState("open"));
+      });
+      return () => cancelAnimationFrame(raf1);
+    }
+    setState("closed");
+    const timer = setTimeout(() => setMounted(false), durationMs + 60);
+    return () => clearTimeout(timer);
+  }, [open, durationMs]);
+  const onPanelTransitionEnd = React21__namespace.useCallback(
+    (e) => {
+      if (e.propertyName === "transform" && !open) setMounted(false);
+    },
+    [open]
+  );
+  return { mounted, state, onPanelTransitionEnd };
+}
+var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function useFocusTrap(containerRef, { active, onEscape, restoreFocus = true }) {
+  const previouslyFocused = React21__namespace.useRef(null);
+  React21__namespace.useEffect(() => {
+    if (!active || typeof document === "undefined") return;
+    previouslyFocused.current = document.activeElement;
+    const container = containerRef.current;
+    const focusFirst = () => {
+      if (!container) return;
+      const focusable = container.querySelectorAll(FOCUSABLE_SELECTOR);
+      (focusable[0] ?? container).focus();
+    };
+    const id = requestAnimationFrame(focusFirst);
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onEscape?.();
+        return;
+      }
+      if (e.key !== "Tab" || !container) return;
+      const focusable = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+      if (focusable.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const activeEl = document.activeElement;
+      if (e.shiftKey && activeEl === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && activeEl === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      cancelAnimationFrame(id);
+      document.removeEventListener("keydown", onKeyDown);
+      if (restoreFocus) previouslyFocused.current?.focus?.();
+    };
+  }, [active, containerRef, onEscape, restoreFocus]);
+}
+var lockCount = 0;
+var savedOverflow = "";
+var savedPaddingRight = "";
+function lock() {
+  if (typeof document === "undefined") return;
+  if (lockCount === 0) {
+    const body = document.body;
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    savedOverflow = body.style.overflow;
+    savedPaddingRight = body.style.paddingRight;
+    body.style.overflow = "hidden";
+    if (scrollbarWidth > 0) {
+      const current = parseFloat(getComputedStyle(body).paddingRight) || 0;
+      body.style.paddingRight = `${current + scrollbarWidth}px`;
+    }
+  }
+  lockCount++;
+}
+function unlock() {
+  if (typeof document === "undefined") return;
+  lockCount = Math.max(0, lockCount - 1);
+  if (lockCount === 0) {
+    document.body.style.overflow = savedOverflow;
+    document.body.style.paddingRight = savedPaddingRight;
+  }
+}
+function useBodyScrollLock(active) {
+  React21__namespace.useEffect(() => {
+    if (!active) return;
+    lock();
+    return unlock;
+  }, [active]);
+}
+function Portal({ target, disabled, children }) {
+  const [mounted, setMounted] = React21__namespace.useState(false);
+  React21__namespace.useEffect(() => setMounted(true), []);
+  if (disabled) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  if (!mounted || typeof document === "undefined") return null;
+  const node = typeof target === "function" ? target() : target;
+  return reactDom.createPortal(children, node ?? document.body);
+}
+function MobileDrawer({
+  open,
+  onClose,
+  ariaLabel,
+  width,
+  position,
+  closeOnEscape,
+  closeOnBackdropClick,
+  trapFocus,
+  lockScroll,
+  restoreFocus,
+  portalTarget,
+  disablePortal,
+  closeLabel,
+  classNames,
+  durationMs = 400,
+  children
+}) {
+  const { mounted, state, onPanelTransitionEnd } = useMountTransition(open, durationMs);
+  const panelRef = React21__namespace.useRef(null);
+  useFocusTrap(panelRef, {
+    active: trapFocus && open,
+    onEscape: closeOnEscape ? onClose : void 0,
+    restoreFocus
+  });
+  useBodyScrollLock(lockScroll && open);
+  if (!mounted) return null;
+  const widthValue = typeof width === "number" ? `${width}px` : width;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Portal, { target: portalTarget, disabled: disablePortal, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cx("bsb-backdrop", classNames.backdrop),
+        "data-state": state,
+        "aria-hidden": "true",
+        onClick: closeOnBackdropClick ? onClose : void 0
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: panelRef,
+        className: cx("bsb-drawer", classNames.drawer),
+        "data-state": state,
+        "data-position": position,
+        style: { "--bsb-drawer-current-width": widthValue },
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": ariaLabel,
+        tabIndex: -1,
+        onTransitionEnd: onPanelTransitionEnd,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: cx("bsb-drawer__close", classNames.drawerClose),
+              onClick: onClose,
+              "aria-label": closeLabel,
+              title: closeLabel,
+              children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: 18 })
+            }
+          ),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function widthToCss(value) {
+  if (value == null) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+var Sidebar = React21__namespace.forwardRef(function Sidebar2(props, ref) {
+  const {
+    items,
+    renderItem,
+    slots = {},
+    classNames = {},
+    currentPath: currentPathProp,
+    linkComponent,
+    hrefProp = "href",
+    renderLink,
+    isItemActive,
+    exact = false,
+    onItemClick,
+    closeOnNavigate = true,
+    collapsible = true,
+    collapsed: collapsedProp,
+    defaultCollapsed = false,
+    onCollapsedChange,
+    persistCollapse,
+    showCollapseToggle,
+    collapsedFooter = "avatar",
+    openGroups: openGroupsProp,
+    defaultOpenGroups = [],
+    onOpenGroupsChange,
+    accordion = false,
+    autoOpenActiveGroup = true,
+    collapsedGroupBehavior = "flyout",
+    mobileOpen: mobileOpenProp,
+    onMobileClose,
+    onMobileOpenChange,
+    breakpoint = 1024,
+    responsive = true,
+    drawerWidth = 280,
+    closeOnEscape = true,
+    closeOnBackdropClick = true,
+    trapFocus = true,
+    lockScroll = true,
+    restoreFocus = true,
+    portalTarget,
+    disablePortal,
+    brand,
+    user,
+    footerAction,
+    header,
+    footer,
+    theme,
+    colorScheme: colorSchemeProp = "auto",
+    width,
+    collapsedWidth,
+    position = "left",
+    bordered = true,
+    tooltips = true,
+    reduceMotion = "auto",
+    toggleStrategy = "absolute",
+    as: RootTag = "aside",
+    id,
+    className,
+    style,
+    "aria-label": ariaLabel = "Main navigation"
+  } = props;
+  const rootRef = React21__namespace.useRef(null);
+  const [internalCollapsed, setInternalCollapsed] = useControllableState({
+    value: collapsedProp,
+    defaultValue: defaultCollapsed,
+    onChange: onCollapsedChange
+  });
+  const isCollapseControlled = collapsedProp !== void 0;
+  const [persistedCollapsed, setPersistedCollapsed] = usePersistedCollapse(
+    isCollapseControlled ? void 0 : persistCollapse
+  );
+  const collapsed = !collapsible ? false : isCollapseControlled ? collapsedProp : persistedCollapsed ?? internalCollapsed;
+  const setCollapsed = React21__namespace.useCallback(
+    (next) => {
+      setInternalCollapsed(next);
+      if (persistCollapse) setPersistedCollapsed(next);
+    },
+    [setInternalCollapsed, setPersistedCollapsed, persistCollapse]
+  );
+  const toggleCollapsed = React21__namespace.useCallback(() => setCollapsed(!collapsed), [setCollapsed, collapsed]);
+  const mediaIsMobile = useMediaQuery(toBreakpointQuery(breakpoint));
+  const isMobile = responsive === false ? false : mediaIsMobile;
+  const [mobileOpen, setMobileOpenInternal] = useControllableState({
+    value: mobileOpenProp,
+    defaultValue: false,
+    onChange: (open) => {
+      onMobileOpenChange?.(open);
+      if (!open) onMobileClose?.();
+    }
+  });
+  const closeMobile = React21__namespace.useCallback(() => setMobileOpenInternal(false), [setMobileOpenInternal]);
+  const openMobile = React21__namespace.useCallback(() => setMobileOpenInternal(true), [setMobileOpenInternal]);
+  const [openGroupsArr, setOpenGroupsArr] = useControllableState({
+    value: openGroupsProp,
+    defaultValue: defaultOpenGroups,
+    onChange: onOpenGroupsChange
+  });
+  const openGroups = React21__namespace.useMemo(() => new Set(openGroupsArr), [openGroupsArr]);
+  const toggleGroup = React21__namespace.useCallback(
+    (id2) => {
+      setOpenGroupsArr((prev) => {
+        const has = prev.includes(id2);
+        if (accordion) return has ? [] : [id2];
+        return has ? prev.filter((x) => x !== id2) : [...prev, id2];
+      });
+    },
+    [setOpenGroupsArr, accordion]
+  );
+  const currentPath = useCurrentPath(currentPathProp);
+  const handleNavigate = React21__namespace.useCallback(
+    (item, e) => {
+      onItemClick?.(item, e);
+      const type = item.type ?? "link";
+      if (isMobile && closeOnNavigate && type !== "group") closeMobile();
+    },
+    [onItemClick, isMobile, closeOnNavigate, closeMobile]
+  );
+  const colorScheme = useColorScheme(colorSchemeProp, rootRef);
+  const themeStyle = themeToStyle(theme, colorScheme);
+  const widthStyle = {};
+  if (width != null) widthStyle["--bsb-width"] = widthToCss(width);
+  if (collapsedWidth != null)
+    widthStyle["--bsb-width-collapsed"] = widthToCss(collapsedWidth);
+  if (drawerWidth != null)
+    widthStyle["--bsb-drawer-width"] = widthToCss(drawerWidth);
+  const mergedStyle = { ...themeStyle, ...widthStyle, ...style };
+  React21__namespace.useImperativeHandle(
+    ref,
+    () => ({
+      collapse: () => setCollapsed(true),
+      expand: () => setCollapsed(false),
+      toggleCollapsed,
+      openMobile,
+      closeMobile,
+      get element() {
+        return rootRef.current;
+      }
+    }),
+    [setCollapsed, toggleCollapsed, openMobile, closeMobile]
+  );
+  const renderCtx = React21__namespace.useMemo(
+    () => ({ collapsed, isMobile, colorScheme, currentPath, toggleCollapsed, closeMobile }),
+    [collapsed, isMobile, colorScheme, currentPath, toggleCollapsed, closeMobile]
+  );
+  const navContextValue = React21__namespace.useMemo(
+    () => ({
+      currentPath,
+      linkComponent,
+      hrefProp,
+      renderLink,
+      isItemActive,
+      exact,
+      handleNavigate,
+      collapsed,
+      isMobile,
+      colorScheme,
+      openGroups,
+      toggleGroup,
+      accordion,
+      autoOpenActiveGroup,
+      collapsedGroupBehavior,
+      tooltips,
+      classNames,
+      slots,
+      renderItem,
+      renderCtx
+    }),
+    [
+      currentPath,
+      linkComponent,
+      hrefProp,
+      renderLink,
+      isItemActive,
+      exact,
+      handleNavigate,
+      collapsed,
+      isMobile,
+      colorScheme,
+      openGroups,
+      toggleGroup,
+      accordion,
+      autoOpenActiveGroup,
+      collapsedGroupBehavior,
+      tooltips,
+      classNames,
+      slots,
+      renderItem,
+      renderCtx
+    ]
+  );
+  const rootClassName = cx(
+    "bsb-root",
+    bordered && "bsb-root--bordered",
+    classNames.root,
+    className
+  );
+  const rootDataAttrs = {
+    "data-collapsed": collapsed,
+    "data-position": position,
+    ...colorSchemeProp !== "auto" ? { "data-color-scheme": colorScheme } : {},
+    ...reduceMotion === true ? { "data-reduce-motion": "true" } : {}
+  };
+  const shellProps = {
+    items,
+    ariaLabel,
+    brand,
+    header,
+    footer,
+    user,
+    footerAction,
+    collapsedFooter,
+    classNames,
+    slots,
+    renderCtx
+  };
+  const desktopToggle = collapsible && (showCollapseToggle ?? true);
+  return /* @__PURE__ */ jsxRuntime.jsxs(NavContext.Provider, { value: navContextValue, children: [
+    !isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+      RootTag,
+      {
+        ref: rootRef,
+        id,
+        className: rootClassName,
+        style: mergedStyle,
+        ...rootDataAttrs,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          SidebarShell,
+          {
+            ...shellProps,
+            collapsed,
+            showToggle: desktopToggle,
+            onToggle: toggleCollapsed,
+            togglePosition: position,
+            toggleStrategy,
+            toggleLabels: { expand: "Expand sidebar", collapse: "Collapse sidebar" }
+          }
+        )
+      }
+    ),
+    isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: rootRef,
+        className: rootClassName,
+        style: mergedStyle,
+        ...rootDataAttrs,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          MobileDrawer,
+          {
+            open: mobileOpen,
+            onClose: closeMobile,
+            ariaLabel,
+            width: drawerWidth,
+            position,
+            closeOnEscape,
+            closeOnBackdropClick,
+            trapFocus,
+            lockScroll,
+            restoreFocus,
+            portalTarget,
+            disablePortal,
+            closeLabel: "Close navigation",
+            classNames,
+            children: /* @__PURE__ */ jsxRuntime.jsx(SidebarShell, { ...shellProps, collapsed: false, showToggle: false, onToggle: toggleCollapsed, togglePosition: position, toggleStrategy, toggleLabels: { expand: "Expand sidebar", collapse: "Collapse sidebar" } })
+          }
+        )
+      }
+    )
+  ] });
+});
+Sidebar.displayName = "Sidebar";
+
+// src/lib/themes.ts
+var slate = {};
+var greenMist = {
+  fontDisplay: `'Plus Jakarta Sans', system-ui, sans-serif`,
+  radiusItem: "16px",
+  radiusLogo: "10px",
+  radiusTooltip: "10px",
+  radiusAction: "4px",
+  ease: "cubic-bezier(0.16, 1, 0.3, 1)",
+  shadowLogo: "0 1px 2px rgba(10,37,16,0.05)",
+  shadowToggle: "0 4px 12px rgba(10,37,16,0.08)",
+  shadowTooltip: "0 12px 32px rgba(10,37,16,0.12)",
+  shadowDrawer: "0 24px 48px rgba(10,37,16,0.16)",
+  badgeFontSize: "9px",
+  light: {
+    bg: "#0f3a18",
+    border: "rgba(23,84,35,0.6)",
+    divider: "rgba(23,84,35,0.4)",
+    itemFg: "#b3ddb6",
+    itemHoverBg: "rgba(23,84,35,0.7)",
+    itemHoverFg: "#ffffff",
+    itemActiveBg: "rgba(31,110,46,0.6)",
+    itemActiveFg: "#ffffff",
+    itemAccent: "#7cc485",
+    headingFg: "#4faa5a",
+    logoBg: "#4faa5a",
+    logoFg: "#ffffff",
+    titleFg: "#ffffff",
+    subtitleFg: "#4faa5a",
+    tooltipBg: "#0a2510",
+    tooltipFg: "#d9eed9",
+    tooltipBorder: "#175423",
+    toggleBg: "#2d8a3e",
+    toggleHoverBg: "#4faa5a",
+    toggleFg: "#ffffff",
+    toggleBorder: "#175423",
+    avatarBg: "#2d8a3e",
+    avatarFg: "#ffffff",
+    avatarRing: "rgba(79,170,90,0.4)",
+    userNameFg: "#d9eed9",
+    userMetaFg: "#4faa5a",
+    actionFg: "#4faa5a",
+    actionHoverFg: "#ffffff",
+    actionHoverBg: "rgba(23,84,35,0.5)",
+    badgeBg: "rgba(251,191,36,0.2)",
+    badgeFg: "#fcd34d",
+    badgeBorder: "rgba(251,191,36,0.3)",
+    scrollbarThumb: "#b3ddb6",
+    scrollbarThumbHover: "#7cc485"
+  },
+  dark: {
+    bg: "#18181b",
+    border: "#2d2d2d",
+    divider: "#2d2d2d",
+    itemFg: "#8a8a8a",
+    itemHoverBg: "rgba(255,255,255,0.1)",
+    itemHoverFg: "#f5f5f5",
+    itemActiveBg: "rgba(255,255,255,0.1)",
+    itemActiveFg: "#e2e2e2",
+    itemAccent: "#8a8a8a",
+    headingFg: "#8a8a8a",
+    logoBg: "#27272a",
+    logoFg: "#e2e2e2",
+    titleFg: "#e2e2e2",
+    subtitleFg: "#8a8a8a",
+    tooltipBg: "#0f0f0f",
+    tooltipFg: "#c8c8c8",
+    tooltipBorder: "#2d2d2d",
+    toggleBg: "#27272a",
+    toggleHoverBg: "#333333",
+    toggleFg: "#e2e2e2",
+    toggleBorder: "#3d3d3d",
+    avatarBg: "#27272a",
+    avatarFg: "#e2e2e2",
+    avatarRing: "rgba(255,255,255,0.1)",
+    userNameFg: "#e5e5e5",
+    userMetaFg: "#8a8a8a",
+    actionFg: "#8a8a8a",
+    actionHoverFg: "#ffffff",
+    actionHoverBg: "rgba(255,255,255,0.1)",
+    scrollbarThumb: "#3a3a3a",
+    scrollbarThumbHover: "#4d4d4d"
+  }
+};
+var midnight = {
+  light: {
+    bg: "#18181b",
+    border: "rgba(255,255,255,0.08)",
+    divider: "rgba(255,255,255,0.06)",
+    itemFg: "#a1a1aa",
+    itemHoverBg: "rgba(255,255,255,0.08)",
+    itemHoverFg: "#ffffff",
+    itemActiveBg: "rgba(255,255,255,0.12)",
+    itemActiveFg: "#ffffff",
+    itemAccent: "#a78bfa",
+    headingFg: "#71717a",
+    logoBg: "#3f3f46",
+    logoFg: "#ffffff",
+    titleFg: "#ffffff",
+    subtitleFg: "#a1a1aa",
+    tooltipBg: "#09090b",
+    tooltipFg: "#e4e4e7",
+    tooltipBorder: "#3f3f46",
+    toggleBg: "#3f3f46",
+    toggleHoverBg: "#52525b",
+    toggleFg: "#ffffff",
+    toggleBorder: "#18181b",
+    avatarBg: "#3f3f46",
+    avatarFg: "#ffffff",
+    avatarRing: "rgba(255,255,255,0.15)",
+    userNameFg: "#e4e4e7",
+    userMetaFg: "#a1a1aa",
+    actionFg: "#a1a1aa",
+    actionHoverFg: "#ffffff",
+    actionHoverBg: "rgba(255,255,255,0.08)",
+    scrollbarThumb: "rgba(255,255,255,0.15)",
+    scrollbarThumbHover: "rgba(255,255,255,0.25)"
+  }
+};
+var themes = { slate, greenMist, midnight };
+function defineTheme(theme) {
+  return theme;
+}
+
+exports.ChevronDownIcon = ChevronDownIcon;
+exports.ChevronLeftIcon = ChevronLeftIcon;
+exports.ChevronRightIcon = ChevronRightIcon;
+exports.CloseIcon = CloseIcon;
+exports.MenuIcon = MenuIcon;
+exports.Sidebar = Sidebar;
+exports.defaultIsActive = defaultIsActive;
+exports.defineTheme = defineTheme;
+exports.greenMist = greenMist;
+exports.midnight = midnight;
+exports.normalizePath = normalizePath;
+exports.resolveIsActive = resolveIsActive;
+exports.slate = slate;
+exports.themeToStyle = themeToStyle;
+exports.themes = themes;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map