@usefragments/ui 1.0.0

package/dist/components/Sidebar/index.js

@@ -0,0 +1,746 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./Sidebar.module.scss.js";
+import { Badge } from "../Badge/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { Skeleton } from "../Skeleton/index.js";
+import { Collapsible } from "../Collapsible/index.js";
+import { ScrollArea } from "../ScrollArea/index.js";
+import { useFocusTrap } from "../../utils/a11y.js";
+import { useKeyboardShortcut } from "../../utils/keyboard-shortcuts.js";
+function composeEventHandlers(userHandler, internalHandler) {
+  return (event) => {
+    userHandler == null ? void 0 : userHandler(event);
+    if (event.defaultPrevented) return;
+    internalHandler(event);
+  };
+}
+function hasBadgeContent(badge) {
+  return badge !== null && badge !== void 0 && badge !== false;
+}
+function renderSidebarBadge(badge) {
+  if (!hasBadgeContent(badge)) {
+    return null;
+  }
+  if (React.isValidElement(badge) && (badge.type === Badge || badge.type === Badge.Root)) {
+    return badge;
+  }
+  return /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: badge });
+}
+function MenuIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z" })
+    }
+  );
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z" })
+    }
+  );
+}
+function CollapsePanelIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM40,56H80V200H40ZM216,200H96V56H216V200Z" })
+    }
+  );
+}
+function ChevronRightIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z" })
+    }
+  );
+}
+const SidebarContext = React.createContext(null);
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    return {
+      collapsed: false,
+      setCollapsed: () => {
+      },
+      open: false,
+      setOpen: () => {
+      },
+      isMobile: false,
+      position: "left",
+      width: "240px",
+      collapsedWidth: "56px",
+      collapsible: "icon",
+      hasIcons: true,
+      toggleSidebar: () => {
+      },
+      sidebarId: "sidebar",
+      state: "expanded"
+    };
+  }
+  return {
+    ...context,
+    state: context.isMobile ? context.open ? "open" : "closed" : context.collapsed ? "collapsed" : "expanded"
+  };
+}
+function useSidebarContext() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("Sidebar compound components must be used within a Sidebar");
+  }
+  return context;
+}
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(false);
+  React.useEffect(() => {
+    const mq = window.matchMedia("(max-width: 767px)");
+    setIsMobile(mq.matches);
+    const handler = (e) => setIsMobile(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return isMobile;
+}
+function useControllableState(controlledValue, defaultValue, onChange) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const setValue = React.useCallback(
+    (newValue) => {
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onChange == null ? void 0 : onChange(newValue);
+    },
+    [isControlled, onChange]
+  );
+  return [value, setValue];
+}
+function hasSidebarItemIcons(children) {
+  let found = false;
+  const visit = (nodes) => {
+    React.Children.forEach(nodes, (child) => {
+      if (found || !React.isValidElement(child)) return;
+      if (child.type === SidebarItem) {
+        const props = child.props;
+        if (props.icon) {
+          found = true;
+          return;
+        }
+      }
+      const childProps = child.props;
+      if (childProps == null ? void 0 : childProps.children) {
+        visit(childProps.children);
+      }
+    });
+  };
+  visit(children);
+  return found;
+}
+function SidebarProvider({
+  children,
+  collapsed: controlledCollapsed,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  width = "240px",
+  collapsedWidth = "56px",
+  position = "left",
+  collapsible = "icon",
+  enableKeyboardShortcut = true
+}) {
+  const isMobile = useIsMobile();
+  const sidebarId = React.useId();
+  const [collapsed, setCollapsed] = useControllableState(
+    controlledCollapsed,
+    defaultCollapsed,
+    onCollapsedChange
+  );
+  const [open, setOpen] = useControllableState(
+    controlledOpen,
+    defaultOpen,
+    onOpenChange
+  );
+  const toggleSidebar = React.useCallback(() => {
+    if (collapsible === "none") return;
+    if (isMobile) {
+      setOpen(!open);
+    } else {
+      setCollapsed(!collapsed);
+    }
+  }, [isMobile, open, collapsed, setOpen, setCollapsed, collapsible]);
+  useKeyboardShortcut({
+    name: "SIDEBAR_TOGGLE",
+    handler: toggleSidebar,
+    enabled: enableKeyboardShortcut && collapsible !== "none"
+  });
+  React.useEffect(() => {
+    if (!isMobile || !open) return;
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isMobile, open, setOpen]);
+  React.useEffect(() => {
+    if (!isMobile) return;
+    if (open) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isMobile, open]);
+  const contextValue = {
+    collapsed,
+    setCollapsed,
+    open,
+    setOpen,
+    isMobile,
+    position,
+    width,
+    collapsedWidth,
+    collapsible,
+    hasIcons: true,
+    toggleSidebar,
+    sidebarId
+  };
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children });
+}
+function SidebarRoot({
+  children,
+  collapsed: controlledCollapsed,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  width = "240px",
+  collapsedWidth = "56px",
+  position = "left",
+  collapsible = "icon",
+  className,
+  style: styleProp,
+  "aria-label": ariaLabel,
+  ...htmlProps
+}) {
+  const existingContext = React.useContext(SidebarContext);
+  const isMobile = useIsMobile();
+  const [internalCollapsed, setInternalCollapsed] = useControllableState(
+    controlledCollapsed,
+    defaultCollapsed,
+    onCollapsedChange
+  );
+  const [internalOpen, setInternalOpen] = useControllableState(
+    controlledOpen,
+    defaultOpen,
+    onOpenChange
+  );
+  const collapsed = existingContext ? existingContext.collapsed : internalCollapsed;
+  const setCollapsed = existingContext ? existingContext.setCollapsed : setInternalCollapsed;
+  const open = existingContext ? existingContext.open : internalOpen;
+  const setOpen = existingContext ? existingContext.setOpen : setInternalOpen;
+  const resolvedPosition = existingContext ? existingContext.position : position;
+  const resolvedWidth = existingContext ? existingContext.width : width;
+  const resolvedCollapsedWidth = existingContext ? existingContext.collapsedWidth : collapsedWidth;
+  const resolvedCollapsible = existingContext ? existingContext.collapsible : collapsible;
+  const hasIcons = React.useMemo(() => hasSidebarItemIcons(children), [children]);
+  const shouldCollapseToZero = !isMobile && resolvedCollapsible === "icon" && collapsed && !hasIcons;
+  const isOffcanvasCollapsed = !isMobile && resolvedCollapsible === "offcanvas" && collapsed;
+  const effectiveCollapsedWidth = shouldCollapseToZero || isOffcanvasCollapsed ? "0px" : resolvedCollapsedWidth;
+  const sidebarId = React.useId();
+  const resolvedSidebarId = existingContext ? existingContext.sidebarId : sidebarId;
+  const sidebarRef = React.useRef(null);
+  useFocusTrap(sidebarRef, isMobile && open);
+  const toggleSidebar = React.useCallback(() => {
+    if (resolvedCollapsible === "none") return;
+    if (isMobile) {
+      setOpen(!open);
+    } else {
+      setCollapsed(!collapsed);
+    }
+  }, [isMobile, open, collapsed, setOpen, setCollapsed, resolvedCollapsible]);
+  React.useEffect(() => {
+    if (existingContext) return;
+    if (!isMobile || !open) return;
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [existingContext, isMobile, open, setOpen]);
+  React.useEffect(() => {
+    if (existingContext) return;
+    if (!isMobile) return;
+    if (open) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [existingContext, isMobile, open]);
+  const contextValue = {
+    ...existingContext || {
+      collapsed,
+      setCollapsed,
+      open,
+      setOpen,
+      isMobile,
+      position: resolvedPosition,
+      width: resolvedWidth,
+      collapsedWidth: resolvedCollapsedWidth,
+      collapsible: resolvedCollapsible,
+      hasIcons,
+      toggleSidebar,
+      sidebarId: resolvedSidebarId
+    },
+    hasIcons
+  };
+  const isCollapsedForStyle = resolvedCollapsible === "icon" && collapsed;
+  const classes = [
+    styles.root,
+    isMobile && styles.mobile,
+    !isMobile && isCollapsedForStyle && styles.collapsed,
+    !isMobile && isCollapsedForStyle && shouldCollapseToZero && styles.collapsedNoIcons,
+    isOffcanvasCollapsed && styles.offcanvasCollapsed,
+    resolvedPosition === "right" && styles.positionRight,
+    className
+  ].filter(Boolean).join(" ");
+  const style = {
+    "--sidebar-width": resolvedWidth,
+    "--sidebar-collapsed-width": resolvedCollapsedWidth,
+    "--sidebar-effective-collapsed-width": effectiveCollapsedWidth,
+    ...styleProp
+  };
+  const content = /* @__PURE__ */ jsx(
+    "aside",
+    {
+      ref: sidebarRef,
+      id: resolvedSidebarId,
+      ...htmlProps,
+      className: classes,
+      style,
+      role: isMobile ? "dialog" : void 0,
+      "aria-modal": isMobile && open ? true : void 0,
+      "aria-hidden": isMobile && !open ? true : void 0,
+      "aria-label": isMobile ? ariaLabel || "Sidebar navigation" : ariaLabel,
+      "data-state": isMobile ? open ? "open" : "closed" : collapsed ? "collapsed" : "expanded",
+      "data-position": resolvedPosition,
+      "data-collapsible": resolvedCollapsible,
+      "data-icon-collapse": resolvedCollapsible === "icon" ? hasIcons ? "icons" : "none" : void 0,
+      children
+    }
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: content });
+}
+function SidebarHeader({
+  children,
+  collapsedContent,
+  className,
+  ...htmlProps
+}) {
+  const { collapsed, isMobile } = useSidebarContext();
+  const isCollapsed = collapsed && !isMobile;
+  const classes = [styles.header, className].filter(Boolean).join(" ");
+  const content = isCollapsed && collapsedContent ? collapsedContent : children;
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children: content });
+}
+function SidebarNav({
+  children,
+  "aria-label": ariaLabel = "Main navigation",
+  className,
+  ...htmlProps
+}) {
+  const classes = [styles.nav, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("nav", { ...htmlProps, className: classes, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ScrollArea, { orientation: "vertical", showFades: true, className: styles.navScrollArea, children }) });
+}
+function SidebarSection({
+  children,
+  label,
+  action,
+  collapsible: isCollapsibleProp = false,
+  defaultOpen = true,
+  className,
+  ...htmlProps
+}) {
+  const { collapsed, isMobile } = useSidebarContext();
+  const classes = [
+    styles.section,
+    className
+  ].filter(Boolean).join(" ");
+  const showLabel = label && (!collapsed || isMobile);
+  const showAction = action && (!collapsed || isMobile);
+  const isCollapsible = isCollapsibleProp && showLabel;
+  if (!isCollapsible) {
+    return /* @__PURE__ */ jsxs("div", { ...htmlProps, className: classes, role: "group", "aria-label": label, children: [
+      (showLabel || showAction) && /* @__PURE__ */ jsxs("div", { className: styles.sectionHeader, children: [
+        showLabel && /* @__PURE__ */ jsx("div", { className: styles.sectionLabel, children: label }),
+        showAction && /* @__PURE__ */ jsx("div", { className: styles.sectionActionWrapper, children: action })
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: styles.sectionList, children })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, role: "group", "aria-label": label, children: /* @__PURE__ */ jsxs(Collapsible, { defaultOpen, className: styles.sectionCollapsible, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.sectionHeader, children: [
+      /* @__PURE__ */ jsx(
+        Collapsible.Trigger,
+        {
+          className: styles.sectionTrigger,
+          chevronPosition: "end",
+          children: /* @__PURE__ */ jsx("span", { className: styles.sectionLabel, children: label })
+        }
+      ),
+      showAction && /* @__PURE__ */ jsx("div", { className: styles.sectionActionWrapper, children: action })
+    ] }),
+    /* @__PURE__ */ jsx(Collapsible.Content, { className: styles.sectionContent, children: /* @__PURE__ */ jsx("ul", { className: styles.sectionList, children }) })
+  ] }) });
+}
+function SidebarSectionAction({
+  children,
+  onClick,
+  "aria-label": ariaLabel,
+  className,
+  ...htmlProps
+}) {
+  const classes = [styles.sectionAction, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ...htmlProps,
+      className: classes,
+      onClick: (event) => onClick == null ? void 0 : onClick(event),
+      "aria-label": ariaLabel,
+      children
+    }
+  );
+}
+function SidebarItem({
+  children,
+  icon,
+  active = false,
+  disabled = false,
+  badge,
+  href,
+  onClick,
+  hasSubmenu = false,
+  expanded: controlledExpanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  asChild = false,
+  className,
+  ...rest
+}) {
+  const { collapsed, isMobile } = useSidebarContext();
+  const [expanded, setExpanded] = useControllableState(
+    controlledExpanded,
+    defaultExpanded,
+    onExpandedChange
+  );
+  const isCollapsed = collapsed && !isMobile;
+  const showLabel = !isCollapsed;
+  const classes = [
+    styles.item,
+    active && styles.itemActive,
+    disabled && styles.itemDisabled,
+    hasSubmenu && styles.itemHasSubmenu,
+    expanded && styles.itemExpanded,
+    className
+  ].filter(Boolean).join(" ");
+  const handleClick = (e) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    if (hasSubmenu) {
+      e.preventDefault();
+      setExpanded(!expanded);
+    }
+    onClick == null ? void 0 : onClick(e);
+  };
+  let labelText;
+  if (asChild && React.isValidElement(children)) {
+    const childProps = children.props;
+    labelText = typeof childProps.children === "string" ? childProps.children : void 0;
+  } else {
+    labelText = typeof children === "string" ? children : void 0;
+  }
+  const itemContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx("span", { className: styles.itemIcon, children: icon }),
+    showLabel && /* @__PURE__ */ jsx("span", { className: styles.itemLabel, children: asChild && React.isValidElement(children) ? children.props.children : children }),
+    showLabel && hasBadgeContent(badge) && /* @__PURE__ */ jsx("span", { className: styles.itemBadge, children: renderSidebarBadge(badge) }),
+    showLabel && hasSubmenu && /* @__PURE__ */ jsx("span", { className: styles.itemChevron, children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
+  ] });
+  const itemProps = {
+    className: classes,
+    onClick: handleClick,
+    "aria-current": active ? "page" : void 0,
+    "aria-disabled": disabled || void 0,
+    "aria-expanded": hasSubmenu ? expanded : void 0,
+    "aria-label": isCollapsed ? labelText : void 0,
+    tabIndex: disabled ? -1 : 0
+  };
+  let itemElement;
+  if (asChild && React.isValidElement(children)) {
+    const childProps = children.props;
+    itemElement = React.cloneElement(children, {
+      ...itemProps,
+      ...rest,
+      onClick: composeEventHandlers(
+        childProps.onClick,
+        (event) => handleClick(event)
+      ),
+      // Merge classNames
+      className: [classes, childProps.className].filter(Boolean).join(" "),
+      children: itemContent
+    });
+  } else if (href) {
+    itemElement = /* @__PURE__ */ jsx("a", { ...itemProps, ...rest, href, children: itemContent });
+  } else {
+    itemElement = /* @__PURE__ */ jsx("button", { ...itemProps, ...rest, type: "button", children: itemContent });
+  }
+  const wrappedItem = isCollapsed ? /* @__PURE__ */ jsx(Tooltip, { content: labelText || children, side: "right", delay: 100, children: itemElement }) : itemElement;
+  const wrapperClasses = [
+    styles.itemWrapper,
+    expanded && styles.itemExpanded
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("li", { className: wrapperClasses, children: wrappedItem });
+}
+function SidebarSubItem({
+  children,
+  active = false,
+  disabled = false,
+  href,
+  onClick,
+  className,
+  ...rest
+}) {
+  const { collapsed, isMobile } = useSidebarContext();
+  if (collapsed && !isMobile) {
+    return null;
+  }
+  const classes = [
+    styles.subItem,
+    active && styles.subItemActive,
+    disabled && styles.subItemDisabled,
+    className
+  ].filter(Boolean).join(" ");
+  const handleClick = (e) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    onClick == null ? void 0 : onClick(e);
+  };
+  const itemProps = {
+    className: classes,
+    onClick: handleClick,
+    "aria-current": active ? "page" : void 0,
+    "aria-disabled": disabled,
+    tabIndex: disabled ? -1 : 0
+  };
+  const itemElement = href ? /* @__PURE__ */ jsx("a", { ...itemProps, ...rest, href, children }) : /* @__PURE__ */ jsx("button", { ...itemProps, ...rest, type: "button", children });
+  return /* @__PURE__ */ jsx("li", { className: styles.subItemWrapper, children: itemElement });
+}
+function SidebarSubmenu({ children }) {
+  return /* @__PURE__ */ jsx("li", { className: styles.submenuWrapper, children: /* @__PURE__ */ jsx("ul", { className: styles.submenu, children }) });
+}
+function SidebarFooter({ children, className, ...htmlProps }) {
+  const classes = [styles.footer, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children });
+}
+function SidebarTrigger({
+  children,
+  "aria-label": ariaLabel = "Toggle navigation",
+  className,
+  onClick,
+  ...htmlProps
+}) {
+  const { open, setOpen, isMobile, sidebarId } = useSidebarContext();
+  if (!isMobile) {
+    return null;
+  }
+  const classes = [styles.trigger, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...htmlProps,
+      type: "button",
+      className: classes,
+      onClick: composeEventHandlers(onClick, () => setOpen(!open)),
+      "aria-label": ariaLabel,
+      "aria-expanded": open,
+      "aria-controls": sidebarId,
+      children: children || (open ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(MenuIcon, {}))
+    }
+  );
+}
+function SidebarOverlay({ className, onClick, ...htmlProps }) {
+  const { open, setOpen, isMobile } = useSidebarContext();
+  if (!isMobile || !open) {
+    return null;
+  }
+  const classes = [styles.overlay, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlProps,
+      className: classes,
+      onClick: composeEventHandlers(onClick, () => setOpen(false)),
+      "aria-hidden": "true",
+      "data-state": open ? "open" : "closed"
+    }
+  );
+}
+function SidebarCollapseToggle({
+  "aria-label": ariaLabel,
+  className,
+  onClick,
+  ...htmlProps
+}) {
+  const { collapsed, setCollapsed, isMobile, collapsible, hasIcons } = useSidebarContext();
+  if (isMobile || collapsible === "none") {
+    return null;
+  }
+  const shouldFloat = collapsed && (collapsible === "icon" && !hasIcons || collapsible === "offcanvas");
+  const classes = [
+    styles.collapseToggle,
+    shouldFloat && styles.collapseToggleFloating,
+    className
+  ].filter(Boolean).join(" ");
+  const label = ariaLabel || (collapsed ? "Expand sidebar" : "Collapse sidebar");
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...htmlProps,
+      type: "button",
+      className: classes,
+      onClick: composeEventHandlers(onClick, () => setCollapsed(!collapsed)),
+      "aria-label": label,
+      children: /* @__PURE__ */ jsx(CollapsePanelIcon, {})
+    }
+  );
+}
+function SidebarRail({
+  className,
+  onClick,
+  title,
+  "aria-label": ariaLabel,
+  ...htmlProps
+}) {
+  const { collapsed, setCollapsed, isMobile, collapsible } = useSidebarContext();
+  if (isMobile || collapsible === "none") {
+    return null;
+  }
+  const classes = [
+    styles.rail,
+    collapsed && styles.railCollapsed,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...htmlProps,
+      type: "button",
+      className: classes,
+      onClick: composeEventHandlers(onClick, () => setCollapsed(!collapsed)),
+      "aria-label": ariaLabel ?? (collapsed ? "Expand sidebar" : "Collapse sidebar"),
+      title: title ?? (collapsed ? "Expand sidebar" : "Collapse sidebar")
+    }
+  );
+}
+function SidebarMenuSkeleton({
+  count = 5,
+  showIcon = true,
+  className,
+  ...htmlProps
+}) {
+  const { collapsed, isMobile } = useSidebarContext();
+  const isCollapsed = collapsed && !isMobile;
+  const classes = [styles.menuSkeleton, className].filter(Boolean).join(" ");
+  const labelWidths = ["64%", "72%", "68%", "79%", "74%", "66%", "83%", "70%"];
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, "aria-hidden": "true", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: styles.skeletonItem, children: [
+    showIcon && /* @__PURE__ */ jsx(Skeleton, { variant: "avatar", size: "sm" }),
+    !isCollapsed && /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "text",
+        className: styles.skeletonLabel,
+        width: labelWidths[i % labelWidths.length]
+      }
+    )
+  ] }, i)) });
+}
+const Sidebar = Object.assign(SidebarRoot, {
+  Header: SidebarHeader,
+  Nav: SidebarNav,
+  Section: SidebarSection,
+  SectionAction: SidebarSectionAction,
+  Item: SidebarItem,
+  SubItem: SidebarSubItem,
+  Submenu: SidebarSubmenu,
+  Footer: SidebarFooter,
+  Trigger: SidebarTrigger,
+  Overlay: SidebarOverlay,
+  CollapseToggle: SidebarCollapseToggle,
+  Rail: SidebarRail,
+  MenuSkeleton: SidebarMenuSkeleton
+});
+export {
+  Sidebar,
+  SidebarCollapseToggle,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarItem,
+  SidebarMenuSkeleton,
+  SidebarNav,
+  SidebarOverlay,
+  SidebarProvider,
+  SidebarRail,
+  SidebarRoot,
+  SidebarSection,
+  SidebarSectionAction,
+  SidebarSubItem,
+  SidebarSubmenu,
+  SidebarTrigger,
+  useSidebar,
+  useSidebarContext
+};