@arbidocs/blocks 0.5.63 → 0.5.65

package/dist/chunk-6QZ35CTZ.js

@@ -0,0 +1,594 @@
+"use client";
+import { ActionLink } from './chunk-ELT2V4NB.js';
+import { useDrawerBehavior, BlocksTooltipProvider } from './chunk-YQEXBJVO.js';
+import { testIdOr } from './chunk-7F6CBP3Z.js';
+import { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { cn, Tooltip, TooltipTrigger, TooltipContent } from '@arbidocs/react/ui';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { PanelLeftClose, PanelLeftOpen, X } from 'lucide-react';
+
+var DEFAULT_SIDEBAR_LABELS = {
+  mainNavigation: "Main navigation",
+  hideSidebar: "Hide sidebar",
+  showSidebar: "Show sidebar",
+  closeNavigationMenu: "Close navigation menu"
+};
+var SidebarContext = createContext({
+  expanded: true,
+  labels: DEFAULT_SIDEBAR_LABELS
+});
+var useSidebarContext = () => useContext(SidebarContext);
+var SidebarRowHoverContext = createContext(false);
+var SidebarBadgeRow = forwardRef(
+  function SidebarBadgeRow2({ icon, label, count, ariaLabel, variant, badgeTestId, className, type = "button", ...rest }, ref) {
+    const { expanded } = useSidebarContext();
+    const resolved = variant ?? (expanded ? "row" : "icon");
+    const hasCount = count !== void 0 && count > 0;
+    const badgeText = hasCount ? count > 9 ? "9+" : String(count) : null;
+    const name = ariaLabel ?? (hasCount ? `${label}, ${count}` : label);
+    if (resolved === "row") {
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref,
+          type,
+          "aria-label": name,
+          "data-slot": "sidebar-badge-row",
+          "data-variant": "row",
+          className: cn(
+            "group flex h-9 w-full cursor-pointer items-center rounded-md px-3 text-left text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:h-11",
+            className
+          ),
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "flex size-5 flex-shrink-0 items-center justify-center", "aria-hidden": true, children: icon }),
+            /* @__PURE__ */ jsx("span", { className: "ml-3 min-w-0 truncate", "aria-hidden": true, children: label }),
+            badgeText && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                "data-testid": badgeTestId,
+                className: "ml-auto inline-flex min-w-5 flex-shrink-0 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold leading-5 tabular-nums text-primary-foreground",
+                children: badgeText
+              }
+            )
+          ]
+        }
+      );
+    }
+    const iconButton = /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type,
+        "aria-label": name,
+        "data-slot": "sidebar-badge-row",
+        "data-variant": "icon",
+        title: variant === "icon" ? label : void 0,
+        className: cn(
+          "relative m-0 flex h-9 w-12 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:h-11",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex size-5 items-center justify-center", "aria-hidden": true, children: icon }),
+          badgeText && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              "data-testid": badgeTestId,
+              className: "absolute right-1 top-0.5 flex min-w-4 items-center justify-center rounded-full bg-primary px-1 text-xs font-semibold leading-4 tabular-nums text-primary-foreground",
+              children: badgeText
+            }
+          )
+        ]
+      }
+    );
+    if (variant === "icon") return iconButton;
+    return /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 50, children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: iconButton }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "right", sideOffset: 8, children: label })
+    ] });
+  }
+);
+var SHELL_START_INSET_VAR = "--shell-start-inset";
+var widths = /* @__PURE__ */ new Map();
+function apply() {
+  if (typeof document === "undefined") return;
+  const inset = Math.max(0, ...widths.values());
+  const style = document.documentElement.style;
+  if (inset > 0) style.setProperty(SHELL_START_INSET_VAR, `${inset}px`);
+  else style.removeProperty(SHELL_START_INSET_VAR);
+}
+function useShellStartInset(width) {
+  useEffect(() => {
+    const key = /* @__PURE__ */ Symbol("shell-start-inset");
+    widths.set(key, width);
+    apply();
+    return () => {
+      widths.delete(key);
+      apply();
+    };
+  }, [width]);
+}
+var noop = () => {
+};
+var COLLAPSED_PX = 64;
+var EXPANDED_PX = 256;
+var COLLAPSED_WIDTH = `${COLLAPSED_PX}px`;
+var EXPANDED_WIDTH = `${EXPANDED_PX}px`;
+function SidebarRoot({
+  mode,
+  expanded,
+  isHovering = false,
+  onBackdropClick,
+  hasRailBackdrop = false,
+  onMouseEnter,
+  onMouseLeave,
+  children,
+  className,
+  "aria-label": ariaLabelProp,
+  labels,
+  "data-testid": testId,
+  backdropTestId
+}) {
+  const mergedLabels = useMemo(() => ({ ...DEFAULT_SIDEBAR_LABELS, ...labels }), [labels]);
+  const drawerRef = useRef(null);
+  const isDrawer = mode === "drawer";
+  useDrawerBehavior(isDrawer, onBackdropClick ?? noop, drawerRef);
+  useShellStartInset(mode === "pinned" ? EXPANDED_PX : mode === "rail" ? COLLAPSED_PX : 0);
+  const ariaLabel = ariaLabelProp ?? mergedLabels.mainNavigation;
+  const contextValue = useMemo(() => ({ expanded, labels: mergedLabels }), [expanded, mergedLabels]);
+  const navBase = "group/sidebar bg-sidebar border-r border-border text-foreground scrollbar-themed flex flex-col h-full overflow-y-auto overflow-x-hidden pb-safe pt-3 transition-all duration-300 ease-in-out";
+  const common = {
+    "aria-label": ariaLabel,
+    "data-testid": testIdOr(testId, { testId: "sidebar" }),
+    "data-slot": "sidebar",
+    "data-mode": mode
+  };
+  const fixedWidth = { width: EXPANDED_WIDTH, minWidth: EXPANDED_WIDTH };
+  let body;
+  if (mode === "drawer") {
+    body = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: drawerRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": ariaLabel,
+        "data-slot": "sidebar-drawer",
+        className: "fixed inset-0 z-50",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 bg-black/50",
+              onClick: onBackdropClick,
+              "aria-hidden": "true",
+              "data-testid": testIdOr(backdropTestId, { testId: "sidebar-backdrop" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "nav",
+            {
+              ...common,
+              className: cn(navBase, "!px-3 absolute left-0 top-0 pt-safe shadow-xl", className),
+              style: fixedWidth,
+              children
+            }
+          )
+        ]
+      }
+    );
+  } else if (mode === "collapsed") {
+    body = /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ...common,
+        className: cn(navBase, "absolute left-0 top-0 z-[45]", className),
+        style: {
+          width: "0px",
+          minWidth: 0,
+          paddingLeft: 0,
+          paddingRight: 0,
+          borderRightWidth: 0,
+          pointerEvents: "none"
+        },
+        inert: true,
+        children
+      }
+    );
+  } else if (mode === "pinned") {
+    body = /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ...common,
+        className: cn(navBase, "!px-3 relative flex-shrink-0", className),
+        style: fixedWidth,
+        onMouseEnter,
+        onMouseLeave,
+        children
+      }
+    );
+  } else {
+    body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "bg-sidebar border-r border-border flex flex-col h-full relative px-0 pb-safe flex-shrink-0",
+          style: { width: COLLAPSED_WIDTH, minWidth: COLLAPSED_WIDTH },
+          "aria-hidden": "true"
+        }
+      ),
+      isHovering && hasRailBackdrop && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-[44] bg-black/40",
+          onClick: onBackdropClick,
+          "aria-hidden": "true",
+          "data-testid": testIdOr(backdropTestId, { testId: "sidebar-backdrop" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "nav",
+        {
+          ...common,
+          className: cn(
+            navBase,
+            isHovering ? "!px-3 shadow-xl" : "!px-2",
+            "absolute left-0 top-0 z-[45]",
+            className
+          ),
+          style: {
+            width: isHovering ? EXPANDED_WIDTH : COLLAPSED_WIDTH,
+            minWidth: isHovering ? EXPANDED_WIDTH : COLLAPSED_WIDTH
+          },
+          onMouseEnter,
+          onMouseLeave,
+          children
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(BlocksTooltipProvider, { children: body }) });
+}
+function SidebarHeader({ children, className, "data-testid": testId }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-header",
+      "data-testid": testId,
+      className: cn("flex flex-shrink-0 flex-col gap-3 pb-3", className),
+      children
+    }
+  );
+}
+function SidebarNav({
+  items,
+  sections,
+  children,
+  className,
+  "data-testid": testId
+}) {
+  const { expanded } = useSidebarContext();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "sidebar-nav",
+      "data-testid": testId,
+      className: cn("flex flex-shrink-0 flex-col gap-0.5", !expanded && "items-center", className),
+      children: [
+        items?.map((item) => /* @__PURE__ */ jsx(SidebarNavItem, { ...item }, item.id)),
+        sections?.map((section) => /* @__PURE__ */ jsx(
+          SidebarGroup,
+          {
+            label: section.label,
+            ariaLabel: section.ariaLabel,
+            "data-testid": section.testId,
+            children: section.items.map((item) => /* @__PURE__ */ jsx(SidebarNavItem, { ...item }, item.id))
+          },
+          section.id
+        )),
+        children
+      ]
+    }
+  );
+}
+function SidebarGroup({
+  label,
+  ariaLabel,
+  children,
+  className,
+  "data-testid": testId
+}) {
+  const { expanded } = useSidebarContext();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": ariaLabel ?? (typeof label === "string" ? label : void 0),
+      "data-slot": "sidebar-group",
+      "data-testid": testId,
+      className: cn("flex flex-shrink-0 flex-col gap-0.5", !expanded && "items-center", className),
+      children: [
+        label && (expanded ? /* @__PURE__ */ jsx(SidebarGroupLabel, { children: label }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "separator",
+            "data-slot": "sidebar-group-divider",
+            className: "my-1 h-px w-6 bg-border"
+          }
+        )),
+        children
+      ]
+    }
+  );
+}
+function SidebarGroupLabel({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-group-label",
+      className: cn(
+        "px-2 pb-0.5 pt-2 text-xs font-medium uppercase tracking-wide text-muted-foreground",
+        className
+      ),
+      children
+    }
+  );
+}
+function SidebarFooter({ children, className, "data-testid": testId }) {
+  const { expanded } = useSidebarContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-footer",
+      "data-testid": testId,
+      className: cn(
+        "mt-auto flex flex-shrink-0 flex-col gap-2 pt-3 pb-3",
+        !expanded && "items-center",
+        className
+      ),
+      children
+    }
+  );
+}
+var INDICATOR_TONES = {
+  progress: "bg-primary",
+  error: "bg-red-solid",
+  attention: "bg-yellow-solid"
+};
+function SidebarNavItem({
+  label,
+  icon,
+  active = false,
+  onSelect,
+  href,
+  count,
+  countIcon,
+  testId,
+  disabled = false,
+  trailing,
+  indicator,
+  className,
+  tooltip
+}) {
+  const { expanded } = useSidebarContext();
+  const [isRowActive, setIsRowActive] = useState(false);
+  const tip = expanded ? void 0 : tooltip ?? label;
+  if (!expanded) {
+    const railButton = /* @__PURE__ */ jsx(
+      ActionLink,
+      {
+        href,
+        onSelect,
+        disabled,
+        "aria-label": label,
+        "aria-current": active ? "page" : void 0,
+        "data-slot": "sidebar-nav-item",
+        "data-testid": testId,
+        className: cn(
+          "m-0 flex h-9 w-12 items-center justify-center rounded-md transition-colors pointer-coarse:h-11",
+          active ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
+          disabled && "pointer-events-none cursor-not-allowed opacity-30",
+          className
+        ),
+        children: /* @__PURE__ */ jsx("div", { className: "flex size-5 items-center justify-center", children: indicator ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          icon,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "sidebar-nav-indicator",
+              "data-tone": indicator,
+              className: cn(
+                "absolute -right-1 -top-1 size-2.5 rounded-full border border-sidebar",
+                INDICATOR_TONES[indicator]
+              )
+            }
+          )
+        ] }) : icon })
+      }
+    );
+    if (!tip) return railButton;
+    return /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 50, children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: railButton }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "right", sideOffset: 8, children: tip })
+    ] });
+  }
+  const rowClass = cn(
+    "group flex h-9 w-full cursor-pointer items-center rounded-md px-3 text-sm transition-colors pointer-coarse:h-11",
+    active ? "bg-accent font-semibold text-accent-foreground" : "font-medium text-muted-foreground hover:bg-muted hover:text-foreground",
+    disabled && "pointer-events-none cursor-not-allowed opacity-30",
+    className
+  );
+  const countNode = count !== void 0 && /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "ml-auto inline-flex flex-shrink-0 items-center gap-0.5 pl-2 text-xs font-normal tabular-nums",
+        active ? "text-accent-foreground" : "text-muted-foreground"
+      ),
+      children: [
+        countIcon,
+        count
+      ]
+    }
+  );
+  if (href && !disabled && !trailing) {
+    return /* @__PURE__ */ jsxs(
+      ActionLink,
+      {
+        href,
+        onSelect,
+        "aria-current": active ? "page" : void 0,
+        "data-slot": "sidebar-nav-item",
+        "data-testid": testId,
+        className: rowClass,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex size-5 flex-shrink-0 items-center justify-center", children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "ml-3 min-w-0 truncate text-left", children: label }),
+          countNode
+        ]
+      }
+    );
+  }
+  if (href && !disabled) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onMouseEnter: () => setIsRowActive(true),
+        onMouseLeave: () => setIsRowActive(false),
+        onFocusCapture: () => setIsRowActive(true),
+        onBlurCapture: (e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) setIsRowActive(false);
+        },
+        "data-slot": "sidebar-nav-item",
+        "data-testid": testId,
+        className: cn(rowClass, "relative"),
+        children: [
+          /* @__PURE__ */ jsx(
+            ActionLink,
+            {
+              href,
+              onSelect,
+              "aria-label": label,
+              "aria-current": active ? "page" : void 0,
+              className: "absolute inset-0 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "pointer-events-none flex min-w-0 flex-1 items-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex size-5 flex-shrink-0 items-center justify-center", children: icon }),
+            /* @__PURE__ */ jsx("span", { className: "ml-3 min-w-0 truncate text-left", children: label }),
+            countNode
+          ] }),
+          /* @__PURE__ */ jsx(SidebarRowHoverContext.Provider, { value: isRowActive, children: /* @__PURE__ */ jsx("span", { className: "relative ml-2 flex flex-shrink-0 items-center", children: trailing }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "aria-current": active ? "page" : void 0,
+      onClick: disabled ? void 0 : onSelect,
+      onMouseEnter: () => setIsRowActive(true),
+      onMouseLeave: () => setIsRowActive(false),
+      onFocusCapture: () => setIsRowActive(true),
+      onBlurCapture: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) setIsRowActive(false);
+      },
+      onKeyDown: disabled ? void 0 : (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect();
+        }
+      },
+      "data-slot": "sidebar-nav-item",
+      "data-testid": testId,
+      className: rowClass,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-5 flex-shrink-0 items-center justify-center", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "ml-3 min-w-0 truncate text-left", children: label }),
+        countNode,
+        trailing && /* @__PURE__ */ jsx(SidebarRowHoverContext.Provider, { value: isRowActive, children: /* @__PURE__ */ jsx("span", { className: "ml-auto flex flex-shrink-0 items-center pl-2", children: trailing }) })
+      ]
+    }
+  );
+}
+function SidebarPinToggle({
+  isPinned,
+  onToggle,
+  className,
+  "data-testid": testId
+}) {
+  const { expanded, labels } = useSidebarContext();
+  const label = isPinned ? labels.hideSidebar : labels.showSidebar;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      title: label,
+      "aria-label": label,
+      "aria-pressed": isPinned,
+      "data-testid": testIdOr(testId, { testId: "sidebar-pin-button" }),
+      className: cn(
+        "flex flex-shrink-0 items-center justify-center rounded-md text-muted-foreground transition-[opacity,colors] hover:bg-muted hover:text-foreground pointer-coarse:size-11",
+        "pointer-events-none opacity-0 group-hover/sidebar:pointer-events-auto group-hover/sidebar:opacity-100",
+        "group-focus-within/sidebar:pointer-events-auto group-focus-within/sidebar:opacity-100",
+        "pointer-coarse:pointer-events-auto pointer-coarse:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100",
+        expanded ? "size-9" : "h-9 w-12",
+        className
+      ),
+      children: isPinned ? /* @__PURE__ */ jsx(PanelLeftClose, { className: "size-5" }) : /* @__PURE__ */ jsx(PanelLeftOpen, { className: "size-5" })
+    }
+  );
+}
+function SidebarDrawerHeader({
+  logo,
+  onClose,
+  closeLabel: closeLabelProp,
+  "data-testid": testId
+}) {
+  const { labels } = useSidebarContext();
+  const closeLabel = closeLabelProp ?? labels.closeNavigationMenu;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "sidebar-drawer-header",
+      className: "flex flex-shrink-0 items-center justify-between pb-2",
+      children: [
+        logo,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            "aria-label": closeLabel,
+            "data-testid": testIdOr(testId, { testId: "mobile-nav-close" }),
+            className: "flex size-11 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+            children: /* @__PURE__ */ jsx(X, { className: "size-5" })
+          }
+        )
+      ]
+    }
+  );
+}
+var Sidebar = {
+  Root: SidebarRoot,
+  Header: SidebarHeader,
+  Nav: SidebarNav,
+  Group: SidebarGroup,
+  GroupLabel: SidebarGroupLabel,
+  NavItem: SidebarNavItem,
+  Footer: SidebarFooter,
+  PinToggle: SidebarPinToggle,
+  BadgeRow: SidebarBadgeRow,
+  DrawerHeader: SidebarDrawerHeader
+};
+
+export { DEFAULT_SIDEBAR_LABELS, SHELL_START_INSET_VAR, Sidebar, SidebarBadgeRow, SidebarRowHoverContext, useShellStartInset, useSidebarContext };
+//# sourceMappingURL=chunk-6QZ35CTZ.js.map
+//# sourceMappingURL=chunk-6QZ35CTZ.js.map