@d4gger/design-system 2.7.0

package/dist/components/sidebar/Sidebar.cjs

@@ -0,0 +1,1082 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Sidebar_exports = {};
+__export(Sidebar_exports, {
+  Sidebar: () => Sidebar,
+  SidebarContent: () => SidebarContent,
+  SidebarFooter: () => SidebarFooter,
+  SidebarGroup: () => SidebarGroup,
+  SidebarGroupAction: () => SidebarGroupAction,
+  SidebarGroupContent: () => SidebarGroupContent,
+  SidebarGroupLabel: () => SidebarGroupLabel,
+  SidebarHeader: () => SidebarHeader,
+  SidebarInset: () => SidebarInset,
+  SidebarMenu: () => SidebarMenu,
+  SidebarMenuAction: () => SidebarMenuAction,
+  SidebarMenuBadge: () => SidebarMenuBadge,
+  SidebarMenuButton: () => SidebarMenuButton,
+  SidebarMenuItem: () => SidebarMenuItem,
+  SidebarMenuSkeleton: () => SidebarMenuSkeleton,
+  SidebarMenuSub: () => SidebarMenuSub,
+  SidebarMenuSubButton: () => SidebarMenuSubButton,
+  SidebarMenuSubItem: () => SidebarMenuSubItem,
+  SidebarProvider: () => SidebarProvider,
+  SidebarRail: () => SidebarRail,
+  SidebarRoot: () => SidebarRoot,
+  SidebarSeparator: () => SidebarSeparator,
+  SidebarSkipLink: () => SidebarSkipLink,
+  SidebarTrigger: () => SidebarTrigger,
+  useSidebar: () => useSidebar
+});
+module.exports = __toCommonJS(Sidebar_exports);
+var React = __toESM(require("react"), 1);
+var import_classnames = __toESM(require("classnames"), 1);
+var import_react_slot = require("@radix-ui/react-slot");
+var import_extractProps = require("../../_internal/helpers/extractProps");
+var import_Icon = require("../icon/Icon");
+var import_ScrollArea = require("../scrollArea/ScrollArea");
+var import_Tooltip = require("../tooltip/Tooltip");
+var import_sidebar = require("./sidebar.props");
+var import_jsx_runtime = require("react/jsx-runtime");
+const Sheet = React.lazy(() => import("../sheet/Sheet").then((mod) => ({ default: mod.Sheet })));
+const SheetTrigger = React.lazy(() => import("../sheet/Sheet").then((mod) => ({ default: mod.SheetTrigger })));
+const SheetContent = React.lazy(() => import("../sheet/Sheet").then((mod) => ({ default: mod.SheetContent })));
+const SidebarContext = React.createContext(null);
+const SidebarNestedContext = React.createContext(null);
+const SidebarLocalContext = React.createContext(void 0);
+function getSidebarState(expanded) {
+  return expanded ? "expanded" : "collapsed";
+}
+function getSidebarDataAttributes(expanded, collapsible) {
+  const effectiveExpanded = collapsible === "none" ? true : expanded;
+  return {
+    "data-state": getSidebarState(effectiveExpanded),
+    "data-collapsed": effectiveExpanded ? "false" : "true",
+    ...collapsible ? { "data-collapsible": collapsible } : {}
+  };
+}
+function useSidebarContext() {
+  return React.useContext(SidebarContext);
+}
+function useSidebarNestedContext() {
+  return React.useContext(SidebarNestedContext);
+}
+function readCookie(key) {
+  if (typeof document === "undefined") return null;
+  const match = document.cookie.match(
+    new RegExp("(?:^|; )" + key.replace(/([.$?*|{}()[\]\\/+^])/g, "\\$1") + "=([^;]*)")
+  );
+  return match ? decodeURIComponent(match[1]) : null;
+}
+function writeCookie(key, value) {
+  if (typeof document === "undefined") return;
+  document.cookie = key + "=" + encodeURIComponent(value) + "; SameSite=Lax; Path=/; Max-Age=31536000";
+}
+function usePersistedState({
+  defaultExpanded,
+  storageKey,
+  storage
+}) {
+  const [expanded, setExpanded] = React.useState(defaultExpanded);
+  React.useLayoutEffect(() => {
+    if (!storageKey || typeof window === "undefined") return;
+    if (storage === "memory") return;
+    try {
+      let stored = null;
+      if (storage === "localStorage") {
+        stored = window.localStorage.getItem(storageKey);
+      } else if (storage === "cookie") {
+        stored = readCookie(storageKey);
+      }
+      if (stored !== null) {
+        setExpanded(JSON.parse(stored));
+      }
+    } catch {
+    }
+  }, [storageKey, storage]);
+  React.useEffect(() => {
+    if (!storageKey || typeof window === "undefined") return;
+    if (storage === "memory") return;
+    const value = JSON.stringify(expanded);
+    try {
+      if (storage === "localStorage") {
+        window.localStorage.setItem(storageKey, value);
+      } else if (storage === "cookie") {
+        writeCookie(storageKey, value);
+      }
+    } catch {
+    }
+  }, [storageKey, storage, expanded]);
+  return React.useMemo(
+    () => ({ expanded, setExpanded }),
+    [expanded]
+  );
+}
+function useSidebar() {
+  return useSidebarContext() ?? {
+    expanded: true,
+    setExpanded: () => {
+    },
+    mobileSheetOpen: false,
+    setMobileSheetOpen: () => {
+    },
+    isMobile: false,
+    sidebarId: void 0,
+    collapsible: "offcanvas",
+    manualToggleRef: { current: false },
+    autoExpandedRef: { current: false },
+    triggerRef: { current: null },
+    recoveryRailRef: { current: null },
+    rootRef: { current: null }
+  };
+}
+function useMergedRef(...refs) {
+  const stableRefs = React.useRef(refs);
+  stableRefs.current = refs;
+  return React.useCallback((node) => {
+    for (const ref of stableRefs.current) {
+      if (!ref) continue;
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ;
+        ref.current = node;
+      }
+    }
+  }, []);
+}
+function handleMenuKeyboardNav(menuEl, buttonSelector, e, onEscape) {
+  const buttons = Array.from(menuEl?.querySelectorAll(buttonSelector) ?? []);
+  if (buttons.length === 0) return;
+  const currentIndex = buttons.indexOf(document.activeElement);
+  let nextIndex = -1;
+  switch (e.key) {
+    case "ArrowDown":
+      e.preventDefault();
+      nextIndex = currentIndex < 0 ? 0 : Math.min(currentIndex + 1, buttons.length - 1);
+      break;
+    case "ArrowUp":
+      e.preventDefault();
+      nextIndex = currentIndex < 0 ? buttons.length - 1 : Math.max(currentIndex - 1, 0);
+      break;
+    case "Home":
+      e.preventDefault();
+      nextIndex = 0;
+      break;
+    case "End":
+      e.preventDefault();
+      nextIndex = buttons.length - 1;
+      break;
+    case "Escape":
+      if (onEscape) {
+        e.preventDefault();
+        e.stopPropagation();
+        onEscape();
+      }
+      return;
+  }
+  if (nextIndex >= 0) {
+    buttons.forEach((btn, i) => {
+      btn.tabIndex = i === nextIndex ? 0 : -1;
+    });
+    buttons[nextIndex].focus();
+  }
+}
+function useAutoScroll(isActive, elementRef) {
+  React.useEffect(() => {
+    if (!isActive || !elementRef.current) return;
+    const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    requestAnimationFrame(() => {
+      const el = elementRef.current;
+      if (!el) return;
+      const parent = el.closest(".dsx-sidebar__content");
+      if (!parent) return;
+      const parentRect = parent.getBoundingClientRect();
+      const elRect = el.getBoundingClientRect();
+      const isInView = elRect.top >= parentRect.top && elRect.bottom <= parentRect.bottom;
+      if (isInView) return;
+      el.scrollIntoView({ block: "nearest", behavior: prefersReducedMotion ? "auto" : "smooth" });
+    });
+  }, [isActive, elementRef]);
+}
+const SidebarProvider = React.forwardRef((props, forwardedRef) => {
+  const {
+    className: propClassName,
+    defaultExpanded = true,
+    storageKey = "dsx-sidebar-state",
+    storage = "localStorage",
+    toggleShortcut = true,
+    mobile = "sheet",
+    mobileBreakpoint = 768,
+    collapsible = "offcanvas",
+    nested = false,
+    children,
+    ...propsWithoutDefaults
+  } = props;
+  const persisted = usePersistedState({ defaultExpanded, storageKey, storage });
+  const manualToggleRef = React.useRef(false);
+  const { className, ...providerProps } = (0, import_extractProps.extractProps)(
+    {
+      ...propsWithoutDefaults,
+      className: propClassName,
+      defaultExpanded
+    },
+    import_sidebar.sidebarProviderPropDefs
+  );
+  React.useEffect(() => {
+    if (!toggleShortcut || collapsible === "none") return;
+    const handleKeyDown = (event) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === "b") {
+        event.preventDefault();
+        manualToggleRef.current = true;
+        persisted.setExpanded((current) => !current);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [toggleShortcut, collapsible, persisted]);
+  const [isMobile, setIsMobile] = React.useState(
+    typeof window !== "undefined" ? window.innerWidth < mobileBreakpoint || window.matchMedia && window.matchMedia("(pointer: coarse)").matches : false
+  );
+  React.useLayoutEffect(() => {
+    if (typeof window === "undefined") return;
+    const mm = window.matchMedia("(pointer: coarse)");
+    const check = () => {
+      setIsMobile(window.innerWidth < mobileBreakpoint || mm.matches);
+    };
+    check();
+    mm.addEventListener?.("change", check);
+    return () => mm.removeEventListener?.("change", check);
+  }, [mobileBreakpoint]);
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    let timer;
+    const handleResize = () => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        const mm = window.matchMedia("(pointer: coarse)");
+        setIsMobile(window.innerWidth < mobileBreakpoint || mm.matches);
+      }, 100);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      clearTimeout(timer);
+    };
+  }, [mobileBreakpoint]);
+  const [mobileSheetOpen, setMobileSheetOpen] = React.useState(false);
+  React.useEffect(() => {
+    if (!isMobile) {
+      setMobileSheetOpen(false);
+    }
+  }, [isMobile]);
+  const isMobileMode = mobile !== "none" && isMobile;
+  const sidebarId = React.useId();
+  const autoExpandedRef = React.useRef(false);
+  const triggerRef = React.useRef(null);
+  const recoveryRailRef = React.useRef(null);
+  const rootRef = React.useRef(null);
+  const contextValue = React.useMemo(
+    () => ({
+      expanded: persisted.expanded,
+      setExpanded: persisted.setExpanded,
+      mobileSheetOpen,
+      setMobileSheetOpen,
+      isMobile: isMobileMode,
+      sidebarId,
+      collapsible,
+      manualToggleRef,
+      autoExpandedRef,
+      triggerRef,
+      recoveryRailRef,
+      rootRef
+    }),
+    [persisted.expanded, persisted.setExpanded, mobileSheetOpen, isMobileMode, sidebarId, collapsible]
+  );
+  const nestedCounterRef = React.useRef(0);
+  const desktopChildren = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarNestedContext.Provider, { value: { counter: nestedCounterRef, isActive: nested }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: forwardedRef,
+      className: (0, import_classnames.default)("dsx-sidebar-provider", className),
+      "data-slot": "sidebar-provider",
+      ...getSidebarDataAttributes(persisted.expanded, collapsible),
+      ...providerProps,
+      suppressHydrationWarning: true,
+      children: [
+        isMobileMode && mobile === "sheet" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(React.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Sheet, { open: mobileSheetOpen, onOpenChange: setMobileSheetOpen, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SheetTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Open sidebar",
+              className: "dsx-sidebar__mobile-trigger",
+              "data-slot": "sidebar-mobile-trigger",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "menu", size: "md" })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SheetContent, { side: "left", showClose: true, children })
+        ] }) }),
+        !isMobileMode && desktopChildren,
+        !isMobileMode && collapsible === "offcanvas" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            ref: recoveryRailRef,
+            type: "button",
+            className: "dsx-sidebar__recovery-rail",
+            "data-slot": "sidebar-recovery-rail",
+            "aria-label": "Expand sidebar",
+            "aria-controls": sidebarId,
+            "aria-expanded": persisted.expanded,
+            "aria-hidden": persisted.expanded ? true : void 0,
+            tabIndex: persisted.expanded ? -1 : 0,
+            onClick: () => {
+              manualToggleRef.current = true;
+              autoExpandedRef.current = false;
+              persisted.setExpanded(true);
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "chevron-right", size: "sm" })
+          }
+        )
+      ]
+    }
+  ) });
+});
+SidebarProvider.displayName = "SidebarProvider";
+const SidebarRoot = React.forwardRef((props, forwardedRef) => {
+  const { className: propClassName, defaultExpanded = true, children, ...propsWithoutDefaults } = props;
+  const context = useSidebarContext();
+  const internal = usePersistedState({ defaultExpanded, storageKey: void 0, storage: "localStorage" });
+  const value = context ?? {
+    ...internal,
+    mobileSheetOpen: false,
+    setMobileSheetOpen: () => {
+    },
+    isMobile: false,
+    sidebarId: void 0,
+    collapsible: "offcanvas",
+    manualToggleRef: { current: false },
+    autoExpandedRef: { current: false },
+    triggerRef: { current: null },
+    recoveryRailRef: { current: null },
+    rootRef: { current: null }
+  };
+  const { className, ...sidebarProps } = (0, import_extractProps.extractProps)(
+    {
+      ...propsWithoutDefaults,
+      className: propClassName,
+      defaultExpanded
+    },
+    import_sidebar.sidebarPropDefs
+  );
+  const nestedCtx = useSidebarNestedContext();
+  const hasRegisteredRef = React.useRef(false);
+  const [isNestedInstance, setIsNestedInstance] = React.useState(false);
+  React.useLayoutEffect(() => {
+    if (nestedCtx && nestedCtx.isActive && !hasRegisteredRef.current) {
+      nestedCtx.counter.current++;
+      hasRegisteredRef.current = true;
+      if (nestedCtx.counter.current > 1) {
+        setIsNestedInstance(true);
+      }
+    }
+    return () => {
+      if (hasRegisteredRef.current && nestedCtx) {
+        nestedCtx.counter.current--;
+        hasRegisteredRef.current = false;
+      }
+    };
+  }, [nestedCtx]);
+  const effectiveCollapsible = isNestedInstance ? "none" : value.collapsible;
+  const effectiveExpanded = effectiveCollapsible === "none" ? true : value.expanded;
+  const hoverTimerRef = React.useRef(null);
+  const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(
+    typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mm = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mm.matches);
+    const handler = (e) => setPrefersReducedMotion(e.matches);
+    mm.addEventListener("change", handler);
+    return () => mm.removeEventListener("change", handler);
+  }, []);
+  const canHoverExpand = effectiveCollapsible === "icon" && !value.isMobile && typeof window !== "undefined" && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
+  const handleMouseEnter = React.useCallback(() => {
+    if (!canHoverExpand || value.expanded) return;
+    value.manualToggleRef.current = false;
+    value.autoExpandedRef.current = true;
+    if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
+    if (prefersReducedMotion) {
+      value.setExpanded(true);
+    } else {
+      hoverTimerRef.current = setTimeout(() => {
+        value.setExpanded(true);
+      }, 100);
+    }
+  }, [canHoverExpand, value.expanded, value.setExpanded, value.manualToggleRef, value.autoExpandedRef, prefersReducedMotion]);
+  const handleMouseLeave = React.useCallback(() => {
+    if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
+    if (value.autoExpandedRef.current && !value.manualToggleRef.current) {
+      if (prefersReducedMotion) {
+        value.setExpanded(false);
+      } else {
+        hoverTimerRef.current = setTimeout(() => {
+          value.setExpanded(false);
+        }, 120);
+      }
+    }
+    value.autoExpandedRef.current = false;
+  }, [value.setExpanded, value.autoExpandedRef, value.manualToggleRef, prefersReducedMotion]);
+  React.useEffect(() => {
+    return () => {
+      if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
+    };
+  }, []);
+  const prevExpandedRef = React.useRef(effectiveExpanded);
+  React.useEffect(() => {
+    const wasExpanded = prevExpandedRef.current;
+    prevExpandedRef.current = effectiveExpanded;
+    if (effectiveCollapsible !== "offcanvas" || wasExpanded === effectiveExpanded) {
+      return;
+    }
+    if (!value.manualToggleRef.current) {
+      return;
+    }
+    const root = value.rootRef.current;
+    const focusTarget = () => {
+      value.manualToggleRef.current = false;
+      if (!effectiveExpanded) {
+        value.recoveryRailRef.current?.focus();
+        return;
+      }
+      const trigger = value.triggerRef.current;
+      if (trigger && document.contains(trigger)) {
+        trigger.focus();
+      } else {
+        value.rootRef.current?.focus();
+      }
+    };
+    if (prefersReducedMotion || !root) {
+      focusTarget();
+      return;
+    }
+    const handleTransitionEnd = (event) => {
+      if (event.target === root && event.propertyName === "width") {
+        focusTarget();
+      }
+    };
+    root.addEventListener("transitionend", handleTransitionEnd);
+    const fallbackTimer = setTimeout(focusTarget, 300);
+    return () => {
+      root.removeEventListener("transitionend", handleTransitionEnd);
+      clearTimeout(fallbackTimer);
+    };
+  }, [
+    effectiveCollapsible,
+    effectiveExpanded,
+    prefersReducedMotion,
+    value.recoveryRailRef,
+    value.rootRef,
+    value.triggerRef,
+    value.manualToggleRef
+  ]);
+  const sidebarDataAttributes = getSidebarDataAttributes(effectiveExpanded, effectiveCollapsible);
+  const isHiddenOffcanvas = effectiveCollapsible === "offcanvas" && !effectiveExpanded;
+  const mergedRootRef = useMergedRef(value.rootRef, forwardedRef);
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarLocalContext.Provider, { value: effectiveCollapsible, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "nav",
+    {
+      ref: mergedRootRef,
+      id: value.sidebarId,
+      ...sidebarDataAttributes,
+      "data-nested": isNestedInstance ? "true" : void 0,
+      "data-slot": "sidebar",
+      "aria-label": "Sidebar",
+      "aria-hidden": isHiddenOffcanvas ? true : void 0,
+      inert: isHiddenOffcanvas ? true : void 0,
+      tabIndex: -1,
+      className: (0, import_classnames.default)("dsx-sidebar", className),
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      ...sidebarProps,
+      children
+    }
+  ) });
+  if (context) {
+    return content;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarContext.Provider, { value, children: content });
+});
+SidebarRoot.displayName = "Sidebar";
+const SidebarInset = React.forwardRef((props, forwardedRef) => {
+  const { asChild, className, ...insetProps } = (0, import_extractProps.extractProps)(props, import_sidebar.sidebarInsetPropDefs);
+  const { expanded, collapsible } = useSidebar();
+  const Comp = asChild ? import_react_slot.Slot : "main";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Comp,
+    {
+      ref: forwardedRef,
+      className: (0, import_classnames.default)("dsx-sidebar__inset", className),
+      "data-slot": "sidebar-inset",
+      ...getSidebarDataAttributes(expanded, collapsible),
+      ...insetProps
+    }
+  );
+});
+SidebarInset.displayName = "SidebarInset";
+const SidebarRail = React.forwardRef(
+  ({ className, type = "button", onClick, ...props }, forwardedRef) => {
+    const { expanded, setExpanded, sidebarId, collapsible: contextCollapsible, manualToggleRef, autoExpandedRef } = useSidebar();
+    const localCollapsible = React.useContext(SidebarLocalContext);
+    const collapsible = localCollapsible ?? contextCollapsible;
+    const sidebarDataAttributes = getSidebarDataAttributes(expanded, collapsible);
+    if (collapsible === "none") {
+      return null;
+    }
+    const localRef = React.useRef(null);
+    const mergedRef = React.useCallback(
+      (node) => {
+        localRef.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          ;
+          forwardedRef.current = node;
+        }
+      },
+      [forwardedRef]
+    );
+    const isIconMode = collapsible === "icon";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        ref: mergedRef,
+        type,
+        "data-slot": "sidebar-rail",
+        ...sidebarDataAttributes,
+        "aria-label": expanded ? "Collapse sidebar" : "Expand sidebar",
+        "aria-expanded": expanded,
+        "aria-controls": sidebarId,
+        tabIndex: isIconMode ? -1 : void 0,
+        className: (0, import_classnames.default)(
+          "dsx-sidebar__rail",
+          isIconMode && "dsx-sidebar__rail--edge",
+          className
+        ),
+        onClick: (event) => {
+          onClick?.(event);
+          if (!event.defaultPrevented) {
+            manualToggleRef.current = true;
+            autoExpandedRef.current = false;
+            setExpanded((current) => !current);
+          }
+        },
+        ...props,
+        children: isIconMode ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: expanded ? "chevron-left" : "chevron-right", size: "sm" })
+      }
+    );
+  }
+);
+SidebarRail.displayName = "SidebarRail";
+const SidebarHeader = React.forwardRef(({ className, ...props }, forwardedRef) => {
+  const { expanded, collapsible } = useSidebar();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: forwardedRef,
+      className: (0, import_classnames.default)("dsx-sidebar__header", className),
+      "data-slot": "sidebar-header",
+      ...getSidebarDataAttributes(expanded, collapsible),
+      ...props
+    }
+  );
+});
+SidebarHeader.displayName = "SidebarHeader";
+const SidebarContent = React.forwardRef(({ className, ...props }, forwardedRef) => {
+  const { expanded, collapsible } = useSidebar();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ScrollArea.ScrollArea,
+    {
+      ref: forwardedRef,
+      className: (0, import_classnames.default)("dsx-sidebar__content", className),
+      viewportClassName: "dsx-sidebar__content-viewport",
+      "data-slot": "sidebar-content",
+      ...getSidebarDataAttributes(expanded, collapsible),
+      ...props
+    }
+  );
+});
+SidebarContent.displayName = "SidebarContent";
+const SidebarFooter = React.forwardRef(({ className, ...props }, forwardedRef) => {
+  const { expanded, collapsible } = useSidebar();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: forwardedRef,
+      className: (0, import_classnames.default)("dsx-sidebar__footer", className),
+      "data-slot": "sidebar-footer",
+      ...getSidebarDataAttributes(expanded, collapsible),
+      ...props
+    }
+  );
+});
+SidebarFooter.displayName = "SidebarFooter";
+const SidebarGroup = React.forwardRef(({ className, ...props }, forwardedRef) => {
+  const { expanded, collapsible } = useSidebar();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: forwardedRef,
+      className: (0, import_classnames.default)("dsx-sidebar__group", className),
+      "data-slot": "sidebar-group",
+      ...getSidebarDataAttributes(expanded, collapsible),
+      ...props
+    }
+  );
+});
+SidebarGroup.displayName = "SidebarGroup";
+const SidebarGroupLabel = React.forwardRef(
+  ({ className, ...props }, forwardedRef) => {
+    const { expanded, collapsible } = useSidebar();
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: forwardedRef,
+        className: (0, import_classnames.default)("dsx-sidebar__group-label", className),
+        "data-slot": "sidebar-group-label",
+        ...getSidebarDataAttributes(expanded, collapsible),
+        ...props
+      }
+    );
+  }
+);
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+const SidebarGroupAction = React.forwardRef(
+  ({ className, type = "button", ...props }, forwardedRef) => {
+    const { expanded, collapsible } = useSidebar();
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        ref: forwardedRef,
+        type,
+        className: (0, import_classnames.default)("dsx-sidebar__group-action dsx-button", className),
+        "data-slot": "sidebar-group-action",
+        ...getSidebarDataAttributes(expanded, collapsible),
+        ...props
+      }
+    );
+  }
+);
+SidebarGroupAction.displayName = "SidebarGroupAction";
+const SidebarGroupContent = React.forwardRef(
+  ({ className, ...props }, forwardedRef) => {
+    const { expanded, collapsible } = useSidebar();
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: forwardedRef,
+        className: (0, import_classnames.default)("dsx-sidebar__group-content", className),
+        "data-slot": "sidebar-group-content",
+        ...getSidebarDataAttributes(expanded, collapsible),
+        ...props
+      }
+    );
+  }
+);
+SidebarGroupContent.displayName = "SidebarGroupContent";
+const SidebarMenu = React.forwardRef(
+  ({ className, onKeyDown, ...props }, forwardedRef) => {
+    const { expanded, collapsible } = useSidebar();
+    const menuRef = React.useRef(null);
+    const mergedRef = useMergedRef(menuRef, forwardedRef);
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented) return;
+        handleMenuKeyboardNav(menuRef.current, ".dsx-sidebar__menu-button, .dsx-sidebar__menu-sub-button", e);
+      },
+      [onKeyDown]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "ul",
+      {
+        ref: mergedRef,
+        className: (0, import_classnames.default)("dsx-sidebar__menu", className),
+        "data-slot": "sidebar-menu",
+        onKeyDown: handleKeyDown,
+        ...getSidebarDataAttributes(expanded, collapsible),
+        ...props
+      }
+    );
+  }
+);
+SidebarMenu.displayName = "SidebarMenu";
+const SidebarMenuItem = React.forwardRef(({ className, ...props }, forwardedRef) => {
+  const { expanded, collapsible } = useSidebar();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "li",
+    {
+      ref: forwardedRef,
+      className: (0, import_classnames.default)("dsx-sidebar__menu-item", className),
+      "data-slot": "sidebar-menu-item",
+      ...getSidebarDataAttributes(expanded, collapsible),
+      ...props
+    }
+  );
+});
+SidebarMenuItem.displayName = "SidebarMenuItem";
+const SidebarMenuBadge = React.forwardRef(({ className, ...props }, forwardedRef) => {
+  const { expanded, collapsible } = useSidebar();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      ref: forwardedRef,
+      className: (0, import_classnames.default)("dsx-sidebar__menu-badge dsx-badge dsx-badge--secondary dsx-badge--sm", className),
+      "data-slot": "sidebar-menu-badge",
+      ...getSidebarDataAttributes(expanded, collapsible),
+      ...props
+    }
+  );
+});
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+const SidebarMenuAction = React.forwardRef((props, forwardedRef) => {
+  const { className, asChild = false, type = "button", ...propsWithoutDefaults } = (0, import_extractProps.extractProps)(props, import_sidebar.sidebarMenuActionPropDefs);
+  const Comp = asChild ? import_react_slot.Slot : "button";
+  const { expanded, collapsible } = useSidebar();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Comp,
+    {
+      ref: forwardedRef,
+      type: asChild ? void 0 : type,
+      className: (0, import_classnames.default)("dsx-sidebar__menu-action dsx-button", className),
+      "data-slot": "sidebar-menu-action",
+      ...getSidebarDataAttributes(expanded, collapsible),
+      ...propsWithoutDefaults
+    }
+  );
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+const SidebarMenuButton = React.forwardRef((props, forwardedRef) => {
+  const { children, className: propClassName, isActive = false, asChild = false, type = "button", ...propsWithoutDefaults } = props;
+  const Comp = asChild ? import_react_slot.Slot : "button";
+  const { expanded, collapsible, isMobile } = useSidebar();
+  const { asChild: _asChild, className, ...menuButtonProps } = (0, import_extractProps.extractProps)(
+    {
+      ...propsWithoutDefaults,
+      className: propClassName,
+      isActive,
+      asChild
+    },
+    import_sidebar.sidebarMenuButtonPropDefs
+  );
+  const content = asChild ? children : React.Children.map(
+    children,
+    (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsx-sidebar__menu-button-text", "data-slot": "sidebar-menu-button-text", children: child }) : child
+  );
+  const label = React.useMemo(() => {
+    if (asChild) return "";
+    return React.Children.toArray(children).filter((c) => typeof c === "string" || typeof c === "number").join("");
+  }, [children, asChild]);
+  const showTooltip = !asChild && collapsible === "icon" && !expanded && !isMobile && label !== "";
+  const buttonRef = React.useRef(null);
+  const mergedRef = useMergedRef(buttonRef, forwardedRef);
+  useAutoScroll(isActive, buttonRef);
+  const button = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Comp,
+    {
+      ref: mergedRef,
+      "data-active": isActive ? "true" : void 0,
+      "aria-current": isActive ? "page" : void 0,
+      "data-slot": "sidebar-menu-button",
+      className: (0, import_classnames.default)("dsx-sidebar__menu-button dsx-button", className),
+      ...getSidebarDataAttributes(expanded, collapsible),
+      ...menuButtonProps,
+      ...!asChild ? { type } : {},
+      children: content
+    }
+  );
+  if (showTooltip) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Tooltip.Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.TooltipContent, { side: "right", children: label })
+    ] });
+  }
+  return button;
+});
+SidebarMenuButton.displayName = "SidebarMenuButton";
+const SidebarMenuSkeleton = React.forwardRef((props, forwardedRef) => {
+  const { className: propClassName, showIcon = true, ...propsWithoutDefaults } = props;
+  const { expanded, collapsible } = useSidebar();
+  const { className, ...skeletonProps } = (0, import_extractProps.extractProps)(
+    {
+      ...propsWithoutDefaults,
+      className: propClassName,
+      showIcon
+    },
+    import_sidebar.sidebarMenuSkeletonPropDefs
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: forwardedRef,
+      className: (0, import_classnames.default)("dsx-sidebar__menu-skeleton", className),
+      "data-show-icon": showIcon ? "true" : "false",
+      "data-slot": "sidebar-menu-skeleton",
+      ...getSidebarDataAttributes(expanded, collapsible),
+      ...skeletonProps,
+      children: [
+        showIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "dsx-sidebar__menu-skeleton-icon dsx-skeleton dsx-skeleton--circle",
+            "data-slot": "sidebar-menu-skeleton-icon"
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "dsx-sidebar__menu-skeleton-label dsx-skeleton dsx-skeleton--text-line",
+            "data-slot": "sidebar-menu-skeleton-label"
+          }
+        )
+      ]
+    }
+  );
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+const SidebarMenuSub = React.forwardRef(
+  ({ className, onKeyDown, ...props }, forwardedRef) => {
+    const { expanded, collapsible } = useSidebar();
+    const subRef = React.useRef(null);
+    const mergedRef = useMergedRef(subRef, forwardedRef);
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented) return;
+        handleMenuKeyboardNav(subRef.current, ".dsx-sidebar__menu-sub-button", e, () => {
+          const parentMenuItem = subRef.current?.closest(".dsx-sidebar__menu-item");
+          const parentButton = parentMenuItem?.querySelector(".dsx-sidebar__menu-button");
+          if (parentButton) {
+            parentButton.focus();
+          }
+        });
+      },
+      [onKeyDown]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "ul",
+      {
+        ref: mergedRef,
+        className: (0, import_classnames.default)("dsx-sidebar__menu-sub", className),
+        "data-slot": "sidebar-menu-sub",
+        onKeyDown: handleKeyDown,
+        ...getSidebarDataAttributes(expanded, collapsible),
+        ...props
+      }
+    );
+  }
+);
+SidebarMenuSub.displayName = "SidebarMenuSub";
+const SidebarMenuSubItem = React.forwardRef(({ className, ...props }, forwardedRef) => {
+  const { expanded, collapsible } = useSidebar();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "li",
+    {
+      ref: forwardedRef,
+      className: (0, import_classnames.default)("dsx-sidebar__menu-sub-item", className),
+      "data-slot": "sidebar-menu-sub-item",
+      ...getSidebarDataAttributes(expanded, collapsible),
+      ...props
+    }
+  );
+});
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+const SidebarMenuSubButton = React.forwardRef((props, forwardedRef) => {
+  const { children, className: propClassName, isActive = false, asChild = false, type = "button", ...propsWithoutDefaults } = props;
+  const Comp = asChild ? import_react_slot.Slot : "button";
+  const { expanded, collapsible, isMobile } = useSidebar();
+  const { asChild: _asChild, className, ...menuButtonProps } = (0, import_extractProps.extractProps)(
+    {
+      ...propsWithoutDefaults,
+      className: propClassName,
+      isActive,
+      asChild
+    },
+    import_sidebar.sidebarMenuButtonPropDefs
+  );
+  const content = asChild ? children : React.Children.map(
+    children,
+    (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsx-sidebar__menu-button-text", "data-slot": "sidebar-menu-button-text", children: child }) : child
+  );
+  const label = React.useMemo(() => {
+    if (asChild) return "";
+    return React.Children.toArray(children).filter((c) => typeof c === "string" || typeof c === "number").join("");
+  }, [children, asChild]);
+  const showTooltip = !asChild && collapsible === "icon" && !expanded && !isMobile && label !== "";
+  const buttonRef = React.useRef(null);
+  const mergedRef = useMergedRef(buttonRef, forwardedRef);
+  useAutoScroll(isActive, buttonRef);
+  const button = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Comp,
+    {
+      ref: mergedRef,
+      "data-active": isActive ? "true" : void 0,
+      "aria-current": isActive ? "page" : void 0,
+      "data-slot": "sidebar-menu-sub-button",
+      className: (0, import_classnames.default)("dsx-sidebar__menu-sub-button dsx-button", className),
+      ...getSidebarDataAttributes(expanded, collapsible),
+      ...menuButtonProps,
+      ...!asChild ? { type } : {},
+      children: content
+    }
+  );
+  if (showTooltip) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Tooltip.Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.TooltipContent, { side: "right", children: label })
+    ] });
+  }
+  return button;
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+const SidebarSeparator = React.forwardRef(({ className, ...props }, forwardedRef) => {
+  const { expanded, collapsible } = useSidebar();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: forwardedRef,
+      role: "separator",
+      "aria-orientation": "horizontal",
+      className: (0, import_classnames.default)("dsx-sidebar__separator dsx-separator dsx-separator--decorative", className),
+      "data-slot": "sidebar-separator",
+      ...getSidebarDataAttributes(expanded, collapsible),
+      ...props
+    }
+  );
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+const SidebarTrigger = React.forwardRef(
+  ({ className, collapsedLabel = "Expand sidebar", expandedLabel = "Collapse sidebar", ...props }, forwardedRef) => {
+    const { expanded, setExpanded, sidebarId, collapsible: contextCollapsible, manualToggleRef, autoExpandedRef, triggerRef } = useSidebar();
+    const localCollapsible = React.useContext(SidebarLocalContext);
+    const collapsible = localCollapsible ?? contextCollapsible;
+    const sidebarDataAttributes = getSidebarDataAttributes(expanded, collapsible);
+    if (collapsible === "none") {
+      return null;
+    }
+    const localRef = React.useRef(null);
+    const mergedRef = React.useCallback(
+      (node) => {
+        localRef.current = node;
+        triggerRef.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          ;
+          forwardedRef.current = node;
+        }
+      },
+      [forwardedRef, triggerRef]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        ...props,
+        ref: mergedRef,
+        type: props.type ?? "button",
+        "aria-label": expanded ? expandedLabel : collapsedLabel,
+        "aria-expanded": expanded,
+        "aria-controls": sidebarId,
+        className: (0, import_classnames.default)("dsx-sidebar__trigger dsx-button", className),
+        "data-slot": "sidebar-trigger",
+        ...sidebarDataAttributes,
+        onClick: (event) => {
+          props.onClick?.(event);
+          if (!event.defaultPrevented) {
+            manualToggleRef.current = true;
+            autoExpandedRef.current = false;
+            triggerRef.current = localRef.current;
+            setExpanded((current) => !current);
+          }
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsx-button__icon", "data-slot": "sidebar-trigger-icon", ...sidebarDataAttributes, children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "chevron-left", size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "chevron-right", size: "sm" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsx-sidebar__trigger-label", "data-slot": "sidebar-trigger-label", ...sidebarDataAttributes, children: expanded ? expandedLabel : collapsedLabel })
+        ]
+      }
+    );
+  }
+);
+SidebarTrigger.displayName = "SidebarTrigger";
+const SidebarSkipLink = React.forwardRef(
+  ({ targetId = "main", children = "Skip to content", className, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "a",
+      {
+        ref: forwardedRef,
+        href: `#${targetId}`,
+        className: (0, import_classnames.default)("dsx-sidebar__skip-link", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+SidebarSkipLink.displayName = "SidebarSkipLink";
+const Sidebar = Object.assign(SidebarRoot, {
+  Provider: SidebarProvider,
+  Inset: SidebarInset,
+  Rail: SidebarRail,
+  Header: SidebarHeader,
+  Content: SidebarContent,
+  Footer: SidebarFooter,
+  Group: SidebarGroup,
+  GroupLabel: SidebarGroupLabel,
+  GroupAction: SidebarGroupAction,
+  GroupContent: SidebarGroupContent,
+  Menu: SidebarMenu,
+  MenuItem: SidebarMenuItem,
+  MenuBadge: SidebarMenuBadge,
+  MenuAction: SidebarMenuAction,
+  MenuButton: SidebarMenuButton,
+  MenuSkeleton: SidebarMenuSkeleton,
+  MenuSub: SidebarMenuSub,
+  MenuSubItem: SidebarMenuSubItem,
+  MenuSubButton: SidebarMenuSubButton,
+  Separator: SidebarSeparator,
+  Trigger: SidebarTrigger,
+  SkipLink: SidebarSkipLink
+});
+Sidebar.displayName = "Sidebar";
+//# sourceMappingURL=Sidebar.cjs.map