@kopexa/sidebar 17.2.0 → 17.2.1

package/dist/chunk-EIXUCY5M.mjs

@@ -1,458 +0,0 @@
-"use client";
-import {
-  panelItemHasChildren,
-  panelItemIsSection
-} from "./chunk-SDMGFB6V.mjs";
-import {
-  useSidebarV2
-} from "./chunk-3L2F566G.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 { tone } = useSidebarV2();
-  return /* @__PURE__ */ jsx(
-    "main",
-    {
-      "data-slot": "sidebar-v2-inset",
-      className: cn(
-        "relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-background",
-        "md:m-2 md:rounded-xl md:shadow-sm",
-        // On a light surround the white card needs a hairline to define its
-        // edge; on the dark surround a border would read as a seam.
-        tone === "light" && "md:border md:border-border/70",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function SidebarV2Rail({ className, ...props }) {
-  const { tone } = useSidebarV2();
-  const light = tone === "light";
-  return /* @__PURE__ */ jsx(
-    "nav",
-    {
-      "data-slot": "sidebar-v2-rail",
-      className: cn(
-        "flex w-(--kpx-rail-width) shrink-0 flex-col overflow-hidden bg-sidebar py-2 text-sidebar-foreground",
-        // Light tone: the dark rail floats as a rounded card on the light
-        // surround. Dark tone: full-height, flush to the edge.
-        light ? "m-2 rounded-2xl shadow-sm" : "h-full",
-        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) => {
-  if (appearance === "bar") {
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        ref,
-        type: "button",
-        "data-slot": "sidebar-v2-workspace",
-        "aria-label": role ? `${name} \u2013 ${role}` : name,
-        className: cn(
-          "group/ws flex cursor-pointer items-center gap-2 rounded-lg py-1 pr-2 pl-1",
-          "outline-hidden ring-ring transition-colors hover:bg-foreground/5 focus-visible:ring-2",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-xs font-semibold text-primary-foreground", children: logo != null ? logo : name.charAt(0).toUpperCase() }),
-          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col text-left leading-tight", children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: name }),
-            role && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: role })
-          ] }),
-          /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 shrink-0 text-muted-foreground" })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref,
-      type: "button",
-      "data-slot": "sidebar-v2-workspace",
-      "aria-label": role ? `${name} \u2013 ${role}` : name,
-      className: cn(
-        "group/ws relative mx-auto mt-1 flex cursor-pointer items-center justify-center rounded-lg p-1",
-        "outline-hidden ring-sidebar-ring transition-colors",
-        "hover:bg-sidebar-accent focus-visible:ring-2",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxs("span", { className: "relative flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary text-sm font-semibold text-primary-foreground", children: [
-        logo != null ? logo : name.charAt(0).toUpperCase(),
-        /* @__PURE__ */ jsx(ChevronDownIcon, { className: "absolute -right-1 -bottom-1 size-3.5 rounded-full bg-sidebar p-px text-sidebar-foreground/60" })
-      ] })
-    }
-  );
-});
-SidebarV2Workspace.displayName = "SidebarV2Workspace";
-function railButtonClasses(active) {
-  return cn(
-    "group/rail relative mx-auto flex size-11 shrink-0 cursor-pointer items-center justify-center rounded-xl",
-    "outline-hidden ring-sidebar-ring transition-colors",
-    "text-sidebar-foreground/85 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-    "focus-visible:ring-2",
-    active && "bg-sidebar-accent text-sidebar-accent-foreground"
-  );
-}
-function RailInner({
-  icon: Icon,
-  active,
-  badge
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        "aria-hidden": true,
-        className: cn(
-          "absolute top-1/2 left-0 h-5 w-0.5 -translate-x-[0.6rem] -translate-y-1/2 rounded-r bg-primary transition-opacity",
-          active ? "opacity-100" : "opacity-0"
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(Icon, { className: "size-5 shrink-0" }),
-    badge != null && /* @__PURE__ */ jsx("span", { className: "absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[0.5625rem] font-semibold text-primary-foreground", children: badge })
-  ] });
-}
-function SidebarV2RailLink({
-  icon,
-  label,
-  href,
-  badge
-}) {
-  const { renderLink, isActive, resetPanelSelection } = useSidebarV2();
-  const active = isActive(href);
-  return /* @__PURE__ */ jsx(Tooltip, { content: label, side: "right", children: renderLink({
-    href,
-    className: railButtonClasses(active),
-    "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, label, active, badge })
-  }) });
-}
-function SidebarV2RailItem({
-  icon,
-  label,
-  active,
-  hasPanel,
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
-  badge
-}) {
-  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: railButtonClasses(active),
-      children: /* @__PURE__ */ jsx(RailInner, { icon, label, active, badge })
-    }
-  ) });
-}
-function SidebarV2Panel({
-  title,
-  subtitle,
-  floating,
-  hidePin,
-  action,
-  children,
-  className
-}) {
-  const { togglePin, pinned, tone } = useSidebarV2();
-  const light = tone === "light";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "sidebar-v2-panel",
-      "data-floating": floating,
-      className: cn(
-        "flex h-full w-(--kpx-panel-width) shrink-0 flex-col",
-        // Surface. The flyout is a distinct floating card (white on light),
-        // so it reads as an overlay rather than a flat full-height slab.
-        floating ? light ? "bg-background text-foreground" : "bg-sidebar text-sidebar-foreground" : light ? "bg-muted text-foreground" : "bg-sidebar text-sidebar-foreground",
-        floating ? (
-          // Floating card: rounded, soft layered shadow, hairline ring.
-          cn(
-            "overflow-hidden rounded-2xl shadow-2xl shadow-black/20 ring-1",
-            light ? "ring-black/5" : "ring-white/10"
-          )
-        ) : (
-          // Pinned: light blends into the surround (no border); dark keeps a
-          // hairline against the rail.
-          light ? "" : "border-l border-sidebar-border/40"
-        ),
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 px-3 pt-3 pb-1.5", children: [
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            title && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "truncate text-sm font-semibold",
-                  light ? "text-foreground" : "text-sidebar-foreground"
-                ),
-                children: title
-              }
-            ),
-            subtitle && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "truncate text-xs",
-                  light ? "text-muted-foreground" : "text-sidebar-foreground/70"
-                ),
-                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: cn(
-                    "-mr-1 shrink-0",
-                    light ? "text-muted-foreground hover:bg-foreground/5 hover:text-foreground" : "text-sidebar-foreground/60 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
-                  ),
-                  children: /* @__PURE__ */ jsx(PanelLeftIcon, { className: "size-4" })
-                }
-              )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-auto p-2", children })
-      ]
-    }
-  );
-}
-function panelRowLight(active) {
-  return cn(
-    "flex h-8 w-full items-center gap-2.5 rounded-md px-2 text-sm outline-hidden ring-ring transition-colors focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-    active ? "bg-primary/10 font-medium text-primary" : "text-foreground/80 hover:bg-foreground/5"
-  );
-}
-function SidebarV2PanelLabel({
-  className,
-  ...props
-}) {
-  const { tone } = useSidebarV2();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "sidebar-v2-panel-label",
-      className: cn(
-        "px-2 pt-3 pb-1 text-[0.6875rem] font-medium uppercase tracking-wide",
-        tone === "light" ? "text-muted-foreground" : "text-sidebar-foreground/50",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function SidebarV2PanelLeaf({
-  item,
-  active: activeProp
-}) {
-  const { renderLink, isActive, tone } = 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,
-    className: light ? panelRowLight(active) : sidebarMenuButton({ size: "md" }),
-    children: /* @__PURE__ */ jsxs(Fragment, { children: [
-      Icon && /* @__PURE__ */ jsx(
-        Icon,
-        {
-          className: cn(
-            light ? active ? void 0 : "text-muted-foreground" : "text-sidebar-foreground/75"
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
-      item.badge != null && /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn(
-            "ml-auto rounded-full px-1.5 text-[0.625rem] font-medium",
-            light ? "bg-foreground/10 text-foreground/70" : "bg-sidebar-accent text-sidebar-accent-foreground"
-          ),
-          children: item.badge
-        }
-      )
-    ] })
-  }) });
-}
-function SidebarV2PanelGroup({
-  item
-}) {
-  var _a;
-  const { openGroup, toggleGroup, activeHref, renderLink, tone } = 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",
-        "aria-expanded": open,
-        onClick: () => toggleGroup(key),
-        className: cn(
-          light ? panelRowLight(false) : sidebarMenuButton({ size: "md" }),
-          "cursor-pointer",
-          containsActive && (light ? "font-medium text-foreground" : "font-medium")
-        ),
-        children: [
-          Icon && /* @__PURE__ */ jsx(
-            Icon,
-            {
-              className: light ? "text-muted-foreground" : "text-sidebar-foreground/75"
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: item.label }),
-          /* @__PURE__ */ jsx(
-            ChevronRightIcon,
-            {
-              className: cn(
-                "size-3.5! shrink-0 transition-transform",
-                light ? "text-muted-foreground" : "text-sidebar-foreground/60",
-                open && "rotate-90"
-              )
-            }
-          )
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "my-0.5 ml-[1.05rem] flex flex-col border-l pl-3",
-          light ? "border-border" : "border-sidebar-border"
-        ),
-        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: cn(
-              "relative block rounded-md px-2 py-1.5 text-[0.8125rem] outline-hidden transition-colors focus-visible:ring-2",
-              "before:absolute before:top-1/2 before:-left-3 before:h-px before:w-2.5",
-              light ? active ? "bg-primary/10 font-medium text-primary ring-ring before:bg-primary" : "text-muted-foreground ring-ring hover:bg-foreground/5 hover:text-foreground before:bg-border" : active ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground ring-sidebar-ring before:bg-primary" : "text-sidebar-foreground/80 ring-sidebar-ring hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground before:bg-sidebar-foreground/30"
-            ),
-            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
-};