@kopexa/sidebar 17.2.0 → 17.2.1

package/dist/{chunk-3L2F566G.mjs → chunk-AIRHHM7Z.mjs}

@@ -2,6 +2,7 @@
 
 // src/v2/context.tsx
 import { createContext } from "@kopexa/react-utils";
+import { sidebarV2 } from "@kopexa/theme";
 import { TooltipProvider } from "@kopexa/tooltip";
 import { useIsMobile } from "@kopexa/use-is-mobile";
 import {
@@ -46,6 +47,7 @@ function SidebarV2Provider({
   }, []);
   const panelOverrideActive = overrideCount > 0;
   const navPreviewActive = pinned ? selectedRail !== null : flyoutValue !== null;
+  const styles = useMemo(() => sidebarV2({ tone }), [tone]);
   const setPinned = useCallback(
     (value2) => {
       onPinnedChange == null ? void 0 : onPinnedChange(value2);
@@ -81,6 +83,7 @@ function SidebarV2Provider({
   const value = useMemo(
     () => ({
       tone,
+      styles,
       pinned,
       togglePin,
       setPinned,
@@ -109,6 +112,7 @@ function SidebarV2Provider({
     }),
     [
       tone,
+      styles,
       pinned,
       togglePin,
       setPinned,

package/dist/{chunk-CMYTESJM.mjs → chunk-KLYPP6QE.mjs}

@@ -5,14 +5,14 @@ import {
   SidebarV2Rail,
   SidebarV2RailItem,
   SidebarV2RailLink
-} from "./chunk-EIXUCY5M.mjs";
+} from "./chunk-YW3JMPRU.mjs";
 import {
   panelItemHasChildren,
   panelItemIsSection
 } from "./chunk-SDMGFB6V.mjs";
 import {
   useSidebarV2
-} from "./chunk-3L2F566G.mjs";
+} from "./chunk-AIRHHM7Z.mjs";
 
 // src/v2/from-config.tsx
 import { Drawer } from "@kopexa/drawer";
@@ -57,7 +57,8 @@ function SidebarV2FromConfig({
     setDrawerOpen,
     setPanelHost,
     panelOverrideActive,
-    navPreviewActive
+    navPreviewActive,
+    styles
   } = useSidebarV2();
   const hoverMode = flyoutTrigger === "hover" && !pinned && !isMobile;
   const closeTimer = useRef(null);
@@ -114,7 +115,7 @@ function SidebarV2FromConfig({
         "div",
         {
           "aria-hidden": true,
-          className: "mx-3 my-1.5 h-px shrink-0 bg-sidebar-border/70"
+          className: styles.railDivider()
         },
         `rail-divider-${index}`
       );
@@ -166,14 +167,14 @@ function SidebarV2FromConfig({
     );
   }
   const railContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.railScroll(), children: [
       header && /* @__PURE__ */ jsxs(Fragment, { children: [
         header,
-        /* @__PURE__ */ jsx("div", { className: "mx-3 my-1 h-px shrink-0 bg-sidebar-border/60" })
+        /* @__PURE__ */ jsx("div", { className: styles.railHeaderDivider() })
       ] }),
       topEntries.map(renderRailEntry)
     ] }),
-    bottomEntries.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-col gap-1 pt-1", children: bottomEntries.map(renderRailEntry) })
+    bottomEntries.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.railBottom(), children: bottomEntries.map(renderRailEntry) })
   ] });
   const navData = pinned && shownPanel && (navPreviewActive || !panelOverrideActive) ? shownPanel : null;
   const [bufferedPanel, setBufferedPanel] = useState(navData);
@@ -205,7 +206,7 @@ function SidebarV2FromConfig({
         open: drawerOpen,
         onOpenChange: setDrawerOpen,
         placement: "left",
-        children: /* @__PURE__ */ jsxs(Drawer.Content, { className: "w-auto max-w-[85vw] border-0 bg-sidebar p-0 [&>button]:hidden", children: [
+        children: /* @__PURE__ */ jsxs(Drawer.Content, { className: styles.mobileDrawer(), children: [
           /* @__PURE__ */ jsxs(Drawer.Header, { className: "sr-only", children: [
             /* @__PURE__ */ jsx(Drawer.Title, { children: "Navigation" }),
             /* @__PURE__ */ jsx(Drawer.Description, { children: "Hauptnavigation" })
@@ -233,10 +234,7 @@ function SidebarV2FromConfig({
       {
         ref: setPanelHost,
         "data-slot": "sidebar-v2-panel-zone",
-        className: cn(
-          "relative shrink-0 transition-[width] duration-200 ease-out motion-reduce:transition-none",
-          pinned && "overflow-hidden"
-        ),
+        className: cn(styles.panelZone(), pinned && "overflow-hidden"),
         style: { gridArea: "panel", width: docked ? PANEL_WIDTH : "0px" },
         children: [
           panelContent,
@@ -244,7 +242,7 @@ function SidebarV2FromConfig({
             motion.div,
             {
               "data-floating": "true",
-              className: "absolute inset-y-2 left-1 z-30",
+              className: styles.flyout(),
               initial: { x: -14, opacity: 0 },
               animate: { x: 0, opacity: 1 },
               exit: { x: -14, opacity: 0 },

package/dist/{chunk-WA2NSEYE.mjs → chunk-LCCZNS2E.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   SidebarV2FromConfig
-} from "./chunk-CMYTESJM.mjs";
+} from "./chunk-KLYPP6QE.mjs";
 import {
   SidebarV2Inset,
   SidebarV2Panel,
@@ -15,10 +15,10 @@ import {
   SidebarV2RailSpacer,
   SidebarV2Trigger,
   SidebarV2Workspace
-} from "./chunk-EIXUCY5M.mjs";
+} from "./chunk-YW3JMPRU.mjs";
 import {
   SidebarV2Provider
-} from "./chunk-3L2F566G.mjs";
+} from "./chunk-AIRHHM7Z.mjs";
 
 // src/v2/index.tsx
 var SidebarV2 = SidebarV2Provider;

package/dist/{chunk-PZFEB2PM.mjs → chunk-YVQVW5EP.mjs}

@@ -1,10 +1,9 @@
 "use client";
 import {
   useSidebarV2
-} from "./chunk-3L2F566G.mjs";
+} from "./chunk-AIRHHM7Z.mjs";
 
 // src/v2/app-shell.tsx
-import { cn } from "@kopexa/shared-utils";
 import {
   useEffect
 } from "react";
@@ -18,17 +17,13 @@ function AppShellRoot({
   children,
   ...props
 }) {
-  const { tone } = useSidebarV2();
+  const { tone, styles } = useSidebarV2();
   return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "app-shell",
       "data-tone": tone,
-      className: cn(
-        "relative isolate grid h-svh w-full overflow-hidden antialiased",
-        tone === "light" ? "bg-muted text-foreground" : "bg-sidebar text-sidebar-foreground",
-        className
-      ),
+      className: styles.shell({ className }),
       style: {
         "--kpx-rail-width": RAIL_WIDTH,
         "--kpx-panel-width": PANEL_WIDTH,
@@ -47,26 +42,24 @@ function AppShellHeader({
   style,
   ...props
 }) {
+  const { styles } = useSidebarV2();
   return /* @__PURE__ */ jsx(
     "header",
     {
       "data-slot": "app-shell-header",
-      className: cn("z-20 flex h-14 items-center gap-3 px-2", className),
+      className: styles.header({ className }),
       style: { gridArea: "header", ...style },
       ...props
     }
   );
 }
 function AppShellMain({ className, style, ...props }) {
+  const { styles } = useSidebarV2();
   return /* @__PURE__ */ jsx(
     "main",
     {
       "data-slot": "app-shell-main",
-      className: cn(
-        "relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-background",
-        "m-2 rounded-xl shadow-sm",
-        className
-      ),
+      className: styles.main({ className }),
       style: { gridArea: "main", ...style },
       ...props
     }
@@ -77,11 +70,12 @@ function AppShellAside({
   style,
   ...props
 }) {
+  const { styles } = useSidebarV2();
   return /* @__PURE__ */ jsx(
     "aside",
     {
       "data-slot": "app-shell-aside",
-      className: cn("min-h-0 min-w-0 overflow-hidden", className),
+      className: styles.aside({ className }),
       style: { gridArea: "aside", ...style },
       ...props
     }

package/dist/chunk-YW3JMPRU.mjs

@@ -0,0 +1,329 @@
+"use client";
+import {
+  panelItemHasChildren,
+  panelItemIsSection
+} from "./chunk-SDMGFB6V.mjs";
+import {
+  useSidebarV2
+} from "./chunk-AIRHHM7Z.mjs";
+
+// src/v2/components.tsx
+import { IconButton } from "@kopexa/button";
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  PanelLeftIcon
+} from "@kopexa/icons";
+import { cn } from "@kopexa/shared-utils";
+import { sidebarMenuButton } from "@kopexa/theme";
+import { Tooltip } from "@kopexa/tooltip";
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SidebarV2Inset({
+  className,
+  ...props
+}) {
+  const { styles } = useSidebarV2();
+  return /* @__PURE__ */ jsx(
+    "main",
+    {
+      "data-slot": "sidebar-v2-inset",
+      className: styles.inset({ className }),
+      ...props
+    }
+  );
+}
+function SidebarV2Rail({ className, ...props }) {
+  const { styles } = useSidebarV2();
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "data-slot": "sidebar-v2-rail",
+      className: styles.rail({ className }),
+      ...props
+    }
+  );
+}
+function SidebarV2RailSpacer() {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "flex-1" });
+}
+var SidebarV2Workspace = forwardRef(({ name, role, logo, className, appearance = "rail", ...props }, ref) => {
+  const { styles } = useSidebarV2();
+  if (appearance === "bar") {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        "data-slot": "sidebar-v2-workspace",
+        "aria-label": role ? `${name} \u2013 ${role}` : name,
+        className: styles.workspaceBar({ className }),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: styles.workspaceBarLogo(), children: logo != null ? logo : name.charAt(0).toUpperCase() }),
+          /* @__PURE__ */ jsxs("span", { className: styles.workspaceBarText(), children: [
+            /* @__PURE__ */ jsx("span", { className: styles.workspaceBarName(), children: name }),
+            role && /* @__PURE__ */ jsx("span", { className: styles.workspaceBarRole(), children: role })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronDownIcon, { className: styles.workspaceBarChevron() })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      "data-slot": "sidebar-v2-workspace",
+      "aria-label": role ? `${name} \u2013 ${role}` : name,
+      className: styles.workspaceRail({ className }),
+      ...props,
+      children: /* @__PURE__ */ jsxs("span", { className: styles.workspaceRailLogo(), children: [
+        logo != null ? logo : name.charAt(0).toUpperCase(),
+        /* @__PURE__ */ jsx(ChevronDownIcon, { className: styles.workspaceRailChevron() })
+      ] })
+    }
+  );
+});
+SidebarV2Workspace.displayName = "SidebarV2Workspace";
+function RailInner({
+  icon: Icon,
+  badge
+}) {
+  const { styles } = useSidebarV2();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: styles.railIndicator() }),
+    /* @__PURE__ */ jsx(Icon, { className: styles.railIcon() }),
+    badge != null && /* @__PURE__ */ 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__ */ jsx(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__ */ jsx(RailInner, { icon, badge })
+  }) });
+}
+function SidebarV2RailItem({
+  icon,
+  label,
+  active,
+  hasPanel,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  badge
+}) {
+  const { styles } = useSidebarV2();
+  return /* @__PURE__ */ jsx(Tooltip, { content: label, side: "right", children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-active": active,
+      "aria-label": label,
+      "aria-expanded": hasPanel ? active : void 0,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      className: styles.railButton(),
+      children: /* @__PURE__ */ jsx(RailInner, { icon, badge })
+    }
+  ) });
+}
+function SidebarV2Panel({
+  title,
+  subtitle,
+  floating,
+  hidePin,
+  action,
+  children,
+  className
+}) {
+  const { togglePin, pinned, styles } = useSidebarV2();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "sidebar-v2-panel",
+      "data-floating": floating ? "true" : "false",
+      className: styles.panel({ className }),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.panelHeader(), children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            title && /* @__PURE__ */ jsx("div", { className: styles.panelTitle(), children: title }),
+            subtitle && /* @__PURE__ */ jsx("div", { className: styles.panelSubtitle(), children: subtitle })
+          ] }),
+          action != null ? action : !hidePin && /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: pinned ? "Panel l\xF6sen" : "Panel anheften",
+              side: "bottom",
+              children: /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  "aria-label": pinned ? "Panel l\xF6sen" : "Panel anheften",
+                  onClick: togglePin,
+                  className: styles.panelPin(),
+                  children: /* @__PURE__ */ jsx(PanelLeftIcon, { className: "size-4" })
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: styles.panelBody(), children })
+      ]
+    }
+  );
+}
+function SidebarV2PanelLabel({
+  className,
+  ...props
+}) {
+  const { styles } = useSidebarV2();
+  return /* @__PURE__ */ 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__ */ jsx(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() : sidebarMenuButton({ size: "md" }),
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      Icon && /* @__PURE__ */ jsx(Icon, { className: styles.panelLeafIcon() }),
+      /* @__PURE__ */ jsx("span", { className: styles.panelLeafLabel(), children: item.label }),
+      item.badge != null && /* @__PURE__ */ 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__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-state": open ? "open" : "closed",
+        "data-contains-active": containsActive,
+        "aria-expanded": open,
+        onClick: () => toggleGroup(key),
+        className: cn(
+          light ? styles.panelLeaf() : sidebarMenuButton({ size: "md" }),
+          styles.panelGroupButton()
+        ),
+        children: [
+          Icon && /* @__PURE__ */ jsx(Icon, { className: styles.panelGroupIcon() }),
+          /* @__PURE__ */ jsx("span", { className: styles.panelGroupLabel(), children: item.label }),
+          /* @__PURE__ */ jsx(ChevronRightIcon, { className: styles.panelGroupChevron() })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { className: styles.panelTree(), children: item.children.map((child) => {
+      const active = child.href === bestChildHref;
+      return /* @__PURE__ */ 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__ */ jsx(Fragment, { children: items.map((item, idx) => {
+    var _a;
+    if (panelItemIsSection(item)) {
+      return /* @__PURE__ */ jsx(SidebarV2PanelLabel, { children: item.section }, `section-${item.section}-${idx}`);
+    }
+    if (panelItemHasChildren(item)) {
+      return /* @__PURE__ */ jsx(SidebarV2PanelGroup, { item }, (_a = item.value) != null ? _a : item.label);
+    }
+    return /* @__PURE__ */ jsx(SidebarV2PanelLeaf, { item }, item.href);
+  }) });
+}
+function SidebarV2Trigger({
+  className,
+  ...props
+}) {
+  const { setDrawerOpen, drawerOpen } = useSidebarV2();
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      variant: "ghost",
+      size: "md",
+      "aria-label": "Navigation \xF6ffnen",
+      onClick: () => setDrawerOpen(!drawerOpen),
+      className,
+      ...props,
+      children: /* @__PURE__ */ jsx(PanelLeftIcon, { className: "size-5" })
+    }
+  );
+}
+
+export {
+  SidebarV2Inset,
+  SidebarV2Rail,
+  SidebarV2RailSpacer,
+  SidebarV2Workspace,
+  SidebarV2RailLink,
+  SidebarV2RailItem,
+  SidebarV2Panel,
+  SidebarV2PanelLabel,
+  SidebarV2PanelLeaf,
+  SidebarV2PanelGroup,
+  SidebarV2PanelItems,
+  SidebarV2Trigger
+};