@kopexa/sidebar 17.1.74 → 17.2.1

package/dist/v2/from-config.js

@@ -0,0 +1,568 @@
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/v2/from-config.tsx
+var from_config_exports = {};
+__export(from_config_exports, {
+  SidebarV2FromConfig: () => SidebarV2FromConfig
+});
+module.exports = __toCommonJS(from_config_exports);
+var import_drawer = require("@kopexa/drawer");
+var import_shared_utils2 = require("@kopexa/shared-utils");
+var import_react3 = require("motion/react");
+var import_react4 = require("react");
+
+// src/v2/components.tsx
+var import_button = require("@kopexa/button");
+var import_icons = require("@kopexa/icons");
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_theme2 = require("@kopexa/theme");
+var import_tooltip2 = require("@kopexa/tooltip");
+var import_react2 = require("react");
+
+// src/v2/context.tsx
+var import_react_utils = require("@kopexa/react-utils");
+var import_theme = require("@kopexa/theme");
+var import_tooltip = require("@kopexa/tooltip");
+var import_use_is_mobile = require("@kopexa/use-is-mobile");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var PIN_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var [Provider, useSidebarV2] = (0, import_react_utils.createContext)({
+  name: "SidebarV2Context",
+  errorMessage: "useSidebarV2 must be used within <SidebarV2> (the provider component)."
+});
+
+// src/v2/types.ts
+function panelItemHasChildren(item) {
+  return "children" in item && Array.isArray(item.children);
+}
+function panelItemIsSection(item) {
+  return "section" in item;
+}
+
+// src/v2/components.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function SidebarV2Rail({ className, ...props }) {
+  const { styles } = useSidebarV2();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "nav",
+    {
+      "data-slot": "sidebar-v2-rail",
+      className: styles.rail({ className }),
+      ...props
+    }
+  );
+}
+var SidebarV2Workspace = (0, import_react2.forwardRef)(({ name, role, logo, className, appearance = "rail", ...props }, ref) => {
+  const { styles } = useSidebarV2();
+  if (appearance === "bar") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        ref,
+        type: "button",
+        "data-slot": "sidebar-v2-workspace",
+        "aria-label": role ? `${name} \u2013 ${role}` : name,
+        className: styles.workspaceBar({ className }),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.workspaceBarLogo(), children: logo != null ? logo : name.charAt(0).toUpperCase() }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: styles.workspaceBarText(), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.workspaceBarName(), children: name }),
+            role && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.workspaceBarRole(), children: role })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.ChevronDownIcon, { className: styles.workspaceBarChevron() })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      ref,
+      type: "button",
+      "data-slot": "sidebar-v2-workspace",
+      "aria-label": role ? `${name} \u2013 ${role}` : name,
+      className: styles.workspaceRail({ className }),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: styles.workspaceRailLogo(), children: [
+        logo != null ? logo : name.charAt(0).toUpperCase(),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.ChevronDownIcon, { className: styles.workspaceRailChevron() })
+      ] })
+    }
+  );
+});
+SidebarV2Workspace.displayName = "SidebarV2Workspace";
+function RailInner({
+  icon: Icon,
+  badge
+}) {
+  const { styles } = useSidebarV2();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": true, className: styles.railIndicator() }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: styles.railIcon() }),
+    badge != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.railBadge(), children: badge })
+  ] });
+}
+function SidebarV2RailLink({
+  icon,
+  label,
+  href,
+  badge
+}) {
+  const { renderLink, isActive, resetPanelSelection, styles } = useSidebarV2();
+  const active = isActive(href);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tooltip2.Tooltip, { content: label, side: "right", children: renderLink({
+    href,
+    className: styles.railButton(),
+    "data-active": active,
+    "aria-current": active ? "page" : void 0,
+    "aria-label": label,
+    // Navigating to a destination link clears any open panel preview,
+    // even when the route doesn't change (e.g. already on it).
+    onClick: resetPanelSelection,
+    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RailInner, { icon, badge })
+  }) });
+}
+function SidebarV2RailItem({
+  icon,
+  label,
+  active,
+  hasPanel,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  badge
+}) {
+  const { styles } = useSidebarV2();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tooltip2.Tooltip, { content: label, side: "right", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      type: "button",
+      "data-active": active,
+      "aria-label": label,
+      "aria-expanded": hasPanel ? active : void 0,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      className: styles.railButton(),
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RailInner, { icon, badge })
+    }
+  ) });
+}
+function SidebarV2Panel({
+  title,
+  subtitle,
+  floating,
+  hidePin,
+  action,
+  children,
+  className
+}) {
+  const { togglePin, pinned, styles } = useSidebarV2();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      "data-slot": "sidebar-v2-panel",
+      "data-floating": floating ? "true" : "false",
+      className: styles.panel({ className }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: styles.panelHeader(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: styles.panelTitle(), children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: styles.panelSubtitle(), children: subtitle })
+          ] }),
+          action != null ? action : !hidePin && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_tooltip2.Tooltip,
+            {
+              content: pinned ? "Panel l\xF6sen" : "Panel anheften",
+              side: "bottom",
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_button.IconButton,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  "aria-label": pinned ? "Panel l\xF6sen" : "Panel anheften",
+                  onClick: togglePin,
+                  className: styles.panelPin(),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.PanelLeftIcon, { className: "size-4" })
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: styles.panelBody(), children })
+      ]
+    }
+  );
+}
+function SidebarV2PanelLabel({
+  className,
+  ...props
+}) {
+  const { styles } = useSidebarV2();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "sidebar-v2-panel-label",
+      className: styles.panelLabel({ className }),
+      ...props
+    }
+  );
+}
+function SidebarV2PanelLeaf({
+  item,
+  active: activeProp
+}) {
+  const { renderLink, isActive, tone, styles } = useSidebarV2();
+  const light = tone === "light";
+  const Icon = item.icon;
+  const active = activeProp != null ? activeProp : isActive(item.href);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: renderLink({
+    href: item.href,
+    "data-active": active,
+    "aria-current": active ? "page" : void 0,
+    // Light tone uses the recipe's leaf slot (group/leaf + data-active);
+    // dark tone reuses the existing sidebarMenuButton recipe.
+    className: light ? styles.panelLeaf() : (0, import_theme2.sidebarMenuButton)({ size: "md" }),
+    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      Icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: styles.panelLeafIcon() }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.panelLeafLabel(), children: item.label }),
+      item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.panelLeafBadge(), children: item.badge })
+    ] })
+  }) });
+}
+function SidebarV2PanelGroup({
+  item
+}) {
+  var _a;
+  const { openGroup, toggleGroup, activeHref, renderLink, tone, styles } = useSidebarV2();
+  const light = tone === "light";
+  const Icon = item.icon;
+  const key = (_a = item.value) != null ? _a : item.label;
+  let bestChildHref = null;
+  let bestLen = -1;
+  for (const c of item.children) {
+    if (activeHref === c.href) {
+      bestChildHref = c.href;
+      break;
+    }
+    if (activeHref.startsWith(`${c.href}/`) && c.href.length > bestLen) {
+      bestChildHref = c.href;
+      bestLen = c.href.length;
+    }
+  }
+  const containsActive = bestChildHref !== null;
+  const open = openGroup === key || openGroup === null && containsActive;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        type: "button",
+        "data-state": open ? "open" : "closed",
+        "data-contains-active": containsActive,
+        "aria-expanded": open,
+        onClick: () => toggleGroup(key),
+        className: (0, import_shared_utils.cn)(
+          light ? styles.panelLeaf() : (0, import_theme2.sidebarMenuButton)({ size: "md" }),
+          styles.panelGroupButton()
+        ),
+        children: [
+          Icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: styles.panelGroupIcon() }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.panelGroupLabel(), children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.ChevronRightIcon, { className: styles.panelGroupChevron() })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: styles.panelTree(), children: item.children.map((child) => {
+      const active = child.href === bestChildHref;
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: renderLink({
+        href: child.href,
+        "data-active": active,
+        "aria-current": active ? "page" : void 0,
+        className: styles.subItem(),
+        children: child.label
+      }) }, child.href);
+    }) })
+  ] });
+}
+function SidebarV2PanelItems({
+  items
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: items.map((item, idx) => {
+    var _a;
+    if (panelItemIsSection(item)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SidebarV2PanelLabel, { children: item.section }, `section-${item.section}-${idx}`);
+    }
+    if (panelItemHasChildren(item)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SidebarV2PanelGroup, { item }, (_a = item.value) != null ? _a : item.label);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SidebarV2PanelLeaf, { item }, item.href);
+  }) });
+}
+
+// src/v2/from-config.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var RAIL_WIDTH = "4rem";
+var PANEL_WIDTH = "15rem";
+var railVars = {
+  "--kpx-rail-width": RAIL_WIDTH,
+  "--kpx-panel-width": PANEL_WIDTH
+};
+function entryValue(entry) {
+  var _a;
+  if (entry.type === "divider") return "divider";
+  return entry.type === "panel" ? (_a = entry.value) != null ? _a : entry.label : entry.label;
+}
+function SidebarV2FromConfig({
+  items,
+  header
+}) {
+  var _a, _b, _c;
+  const {
+    pinned,
+    flyoutTrigger,
+    flyoutValue,
+    openFlyout,
+    setFlyout,
+    closeFlyout,
+    selectedRail,
+    setSelectedRail,
+    isActive,
+    isMobile,
+    drawerOpen,
+    setDrawerOpen,
+    setPanelHost,
+    panelOverrideActive,
+    navPreviewActive,
+    styles
+  } = useSidebarV2();
+  const hoverMode = flyoutTrigger === "hover" && !pinned && !isMobile;
+  const closeTimer = (0, import_react4.useRef)(null);
+  const cancelClose = (0, import_react4.useCallback)(() => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    closeTimer.current = null;
+  }, []);
+  const scheduleClose = (0, import_react4.useCallback)(() => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => closeFlyout(), 160);
+  }, [cancelClose, closeFlyout]);
+  (0, import_react4.useEffect)(() => cancelClose, [cancelClose]);
+  (0, import_react4.useEffect)(() => {
+    if (pinned || isMobile || !flyoutValue) return;
+    const onPointerDown = (event) => {
+      const t = event.target;
+      if (!t) return;
+      if (t.closest('[data-slot="sidebar-v2-rail"]')) return;
+      if (t.closest('[data-floating="true"]')) return;
+      closeFlyout();
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") closeFlyout();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [pinned, isMobile, flyoutValue, closeFlyout]);
+  const panels = (0, import_react4.useMemo)(
+    () => items.filter(
+      (e) => e.type === "panel"
+    ),
+    [items]
+  );
+  const activeRailValue = (0, import_react4.useMemo)(() => {
+    const match = panels.find(
+      (p) => p.items.some((item) => {
+        if (panelItemIsSection(item)) return false;
+        return panelItemHasChildren(item) ? item.children.some((c) => isActive(c.href)) : isActive(item.href);
+      })
+    );
+    return match ? entryValue(match) : null;
+  }, [panels, isActive]);
+  const shownValue = pinned ? selectedRail != null ? selectedRail : activeRailValue : flyoutValue;
+  const shownPanel = (_a = panels.find((p) => entryValue(p) === shownValue)) != null ? _a : null;
+  const topEntries = items.filter((e) => e.slot !== "bottom");
+  const bottomEntries = items.filter((e) => e.slot === "bottom");
+  function renderRailEntry(entry, index) {
+    if (entry.type === "divider") {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          "aria-hidden": true,
+          className: styles.railDivider()
+        },
+        `rail-divider-${index}`
+      );
+    }
+    const value = entryValue(entry);
+    if (entry.type === "link") {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        SidebarV2RailLink,
+        {
+          icon: entry.icon,
+          label: entry.label,
+          href: entry.href,
+          badge: entry.badge
+        },
+        value
+      );
+    }
+    if (entry.type === "action") {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        SidebarV2RailItem,
+        {
+          icon: entry.icon,
+          label: entry.label,
+          active: false,
+          onClick: entry.onSelect
+        },
+        value
+      );
+    }
+    const active = flyoutValue ? value === flyoutValue : value === (selectedRail != null ? selectedRail : activeRailValue);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      SidebarV2RailItem,
+      {
+        icon: entry.icon,
+        label: entry.label,
+        active,
+        hasPanel: true,
+        onClick: () => {
+          if (pinned) setSelectedRail(value);
+          else openFlyout(value);
+        },
+        onMouseEnter: hoverMode ? () => {
+          cancelClose();
+          setFlyout(value);
+        } : void 0,
+        onMouseLeave: hoverMode ? scheduleClose : void 0
+      },
+      value
+    );
+  }
+  const railContent = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles.railScroll(), children: [
+      header && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        header,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: styles.railHeaderDivider() })
+      ] }),
+      topEntries.map(renderRailEntry)
+    ] }),
+    bottomEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: styles.railBottom(), children: bottomEntries.map(renderRailEntry) })
+  ] });
+  const navData = pinned && shownPanel && (navPreviewActive || !panelOverrideActive) ? shownPanel : null;
+  const [bufferedPanel, setBufferedPanel] = (0, import_react4.useState)(navData);
+  (0, import_react4.useEffect)(() => {
+    if (navData) {
+      setBufferedPanel(navData);
+      return;
+    }
+    const t = setTimeout(() => setBufferedPanel(null), 220);
+    return () => clearTimeout(t);
+  }, [navData]);
+  const navToRender = navData != null ? navData : bufferedPanel;
+  const renderNav = (!panelOverrideActive || navPreviewActive) && navToRender;
+  const panelContent = navToRender && renderNav ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    SidebarV2Panel,
+    {
+      title: (_b = navToRender.title) != null ? _b : navToRender.label,
+      subtitle: navToRender.subtitle,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SidebarV2PanelItems, { items: navToRender.items })
+    },
+    entryValue(navToRender)
+  ) : null;
+  const docked = Boolean(navData) || panelOverrideActive;
+  const showFlyout = !pinned && Boolean(shownPanel);
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_drawer.Drawer.Root,
+      {
+        open: drawerOpen,
+        onOpenChange: setDrawerOpen,
+        placement: "left",
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_drawer.Drawer.Content, { className: styles.mobileDrawer(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_drawer.Drawer.Header, { className: "sr-only", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_drawer.Drawer.Title, { children: "Navigation" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_drawer.Drawer.Description, { children: "Hauptnavigation" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex h-full", style: railVars, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SidebarV2Rail, { children: railContent }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                ref: setPanelHost,
+                "data-slot": "sidebar-v2-panel-zone",
+                className: "flex min-h-0",
+                children: panelContent
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SidebarV2Rail, { style: { gridArea: "rail" }, children: railContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        ref: setPanelHost,
+        "data-slot": "sidebar-v2-panel-zone",
+        className: (0, import_shared_utils2.cn)(styles.panelZone(), pinned && "overflow-hidden"),
+        style: { gridArea: "panel", width: docked ? PANEL_WIDTH : "0px" },
+        children: [
+          panelContent,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react3.AnimatePresence, { children: showFlyout && shownPanel && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_react3.motion.div,
+            {
+              "data-floating": "true",
+              className: styles.flyout(),
+              initial: { x: -14, opacity: 0 },
+              animate: { x: 0, opacity: 1 },
+              exit: { x: -14, opacity: 0 },
+              transition: { duration: 0.16, ease: "easeOut" },
+              onMouseEnter: hoverMode ? cancelClose : void 0,
+              onMouseLeave: hoverMode ? scheduleClose : void 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                SidebarV2Panel,
+                {
+                  floating: true,
+                  title: (_c = shownPanel.title) != null ? _c : shownPanel.label,
+                  subtitle: shownPanel.subtitle,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SidebarV2PanelItems, { items: shownPanel.items })
+                }
+              )
+            },
+            "sidebar-v2-flyout"
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SidebarV2FromConfig
+});

package/dist/v2/from-config.mjs

@@ -0,0 +1,11 @@
+"use client";
+"use client";
+import {
+  SidebarV2FromConfig
+} from "../chunk-KLYPP6QE.mjs";
+import "../chunk-YW3JMPRU.mjs";
+import "../chunk-SDMGFB6V.mjs";
+import "../chunk-AIRHHM7Z.mjs";
+export {
+  SidebarV2FromConfig
+};

package/dist/v2/index.d.mts

@@ -0,0 +1,48 @@
+export { AppShell, AppShellAside, AppShellHeader, AppShellMain, AppShellPanelContent, AppShellPanelContentProps, AppShellRoot } from './app-shell.mjs';
+import { SidebarV2Inset, SidebarV2Trigger, SidebarV2Rail, SidebarV2RailItem, SidebarV2RailLink, SidebarV2RailSpacer, SidebarV2Workspace, SidebarV2Panel, SidebarV2PanelItems, SidebarV2PanelLeaf, SidebarV2PanelGroup, SidebarV2PanelLabel } from './components.mjs';
+export { SidebarV2WorkspaceProps } from './components.mjs';
+import { SidebarV2Provider } from './context.mjs';
+export { SidebarV2ContextValue, SidebarV2ProviderProps, SidebarV2Tone, useSidebarV2 } from './context.mjs';
+import { SidebarV2FromConfig } from './from-config.mjs';
+export { SidebarV2FromConfigProps } from './from-config.mjs';
+export { SidebarV2Icon, SidebarV2LinkProps, SidebarV2Nav, SidebarV2PanelItem, SidebarV2RailEntry, SidebarV2SubItem } from './types.mjs';
+import 'react';
+import 'react/jsx-runtime';
+import '@kopexa/button';
+import '@kopexa/theme';
+
+/**
+ * SidebarV2 — icon rail + expandable panel navigation context + primitives.
+ *
+ * The callable is the provider; sub-components hang off it as a namespace
+ * (assembled via direct assignment — never Object.assign, which breaks RSC
+ * client-reference proxies under "use client"/"use server").
+ *
+ * Layout is owned by <AppShell> (grid + zones).
+ *
+ * @example
+ * <SidebarV2 tone="light" activeHref={pathname} renderLink={(p) => <Link {...p} />}>
+ *   <AppShell>
+ *     <AppShell.Header>…</AppShell.Header>
+ *     <SidebarV2.FromConfig items={nav} header={<SidebarV2.Workspace … />} />
+ *     <AppShell.Main>{children}</AppShell.Main>
+ *   </AppShell>
+ * </SidebarV2>
+ */
+declare const SidebarV2: typeof SidebarV2Provider & {
+    FromConfig: typeof SidebarV2FromConfig;
+    Inset: typeof SidebarV2Inset;
+    Trigger: typeof SidebarV2Trigger;
+    Rail: typeof SidebarV2Rail;
+    RailItem: typeof SidebarV2RailItem;
+    RailLink: typeof SidebarV2RailLink;
+    RailSpacer: typeof SidebarV2RailSpacer;
+    Workspace: typeof SidebarV2Workspace;
+    Panel: typeof SidebarV2Panel;
+    PanelItems: typeof SidebarV2PanelItems;
+    PanelLeaf: typeof SidebarV2PanelLeaf;
+    PanelGroup: typeof SidebarV2PanelGroup;
+    PanelLabel: typeof SidebarV2PanelLabel;
+};
+
+export { SidebarV2, SidebarV2FromConfig, SidebarV2Inset, SidebarV2Panel, SidebarV2PanelGroup, SidebarV2PanelItems, SidebarV2PanelLabel, SidebarV2PanelLeaf, SidebarV2Provider, SidebarV2Rail, SidebarV2RailItem, SidebarV2RailLink, SidebarV2RailSpacer, SidebarV2Trigger, SidebarV2Workspace };

package/dist/v2/index.d.ts

@@ -0,0 +1,48 @@
+export { AppShell, AppShellAside, AppShellHeader, AppShellMain, AppShellPanelContent, AppShellPanelContentProps, AppShellRoot } from './app-shell.js';
+import { SidebarV2Inset, SidebarV2Trigger, SidebarV2Rail, SidebarV2RailItem, SidebarV2RailLink, SidebarV2RailSpacer, SidebarV2Workspace, SidebarV2Panel, SidebarV2PanelItems, SidebarV2PanelLeaf, SidebarV2PanelGroup, SidebarV2PanelLabel } from './components.js';
+export { SidebarV2WorkspaceProps } from './components.js';
+import { SidebarV2Provider } from './context.js';
+export { SidebarV2ContextValue, SidebarV2ProviderProps, SidebarV2Tone, useSidebarV2 } from './context.js';
+import { SidebarV2FromConfig } from './from-config.js';
+export { SidebarV2FromConfigProps } from './from-config.js';
+export { SidebarV2Icon, SidebarV2LinkProps, SidebarV2Nav, SidebarV2PanelItem, SidebarV2RailEntry, SidebarV2SubItem } from './types.js';
+import 'react';
+import 'react/jsx-runtime';
+import '@kopexa/button';
+import '@kopexa/theme';
+
+/**
+ * SidebarV2 — icon rail + expandable panel navigation context + primitives.
+ *
+ * The callable is the provider; sub-components hang off it as a namespace
+ * (assembled via direct assignment — never Object.assign, which breaks RSC
+ * client-reference proxies under "use client"/"use server").
+ *
+ * Layout is owned by <AppShell> (grid + zones).
+ *
+ * @example
+ * <SidebarV2 tone="light" activeHref={pathname} renderLink={(p) => <Link {...p} />}>
+ *   <AppShell>
+ *     <AppShell.Header>…</AppShell.Header>
+ *     <SidebarV2.FromConfig items={nav} header={<SidebarV2.Workspace … />} />
+ *     <AppShell.Main>{children}</AppShell.Main>
+ *   </AppShell>
+ * </SidebarV2>
+ */
+declare const SidebarV2: typeof SidebarV2Provider & {
+    FromConfig: typeof SidebarV2FromConfig;
+    Inset: typeof SidebarV2Inset;
+    Trigger: typeof SidebarV2Trigger;
+    Rail: typeof SidebarV2Rail;
+    RailItem: typeof SidebarV2RailItem;
+    RailLink: typeof SidebarV2RailLink;
+    RailSpacer: typeof SidebarV2RailSpacer;
+    Workspace: typeof SidebarV2Workspace;
+    Panel: typeof SidebarV2Panel;
+    PanelItems: typeof SidebarV2PanelItems;
+    PanelLeaf: typeof SidebarV2PanelLeaf;
+    PanelGroup: typeof SidebarV2PanelGroup;
+    PanelLabel: typeof SidebarV2PanelLabel;
+};
+
+export { SidebarV2, SidebarV2FromConfig, SidebarV2Inset, SidebarV2Panel, SidebarV2PanelGroup, SidebarV2PanelItems, SidebarV2PanelLabel, SidebarV2PanelLeaf, SidebarV2Provider, SidebarV2Rail, SidebarV2RailItem, SidebarV2RailLink, SidebarV2RailSpacer, SidebarV2Trigger, SidebarV2Workspace };