@dreamtree-org/twreact-ui 1.2.1 → 1.3.1

package/dist/esm/components/navigation/Sidebar.js

@@ -0,0 +1,567 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React, { useMemo, useState, useEffect, useId, useRef, useLayoutEffect } from 'react';
+import { cn } from '../../utils/cn.js';
+import { ChevronRight, ChevronLeft, ChevronDown } from 'lucide-react';
+import Tooltip from '../core/Tooltip.js';
+import { useLatestRef } from '../../hooks/useLatestRef.js';
+
+var _excluded = ["items", "collapsed", "onToggle", "className", "containerClassName", "stickyOffset", "logo", "footer", "user", "onUserClick", "drawerPosition", "isMobileOpen", "setIsMobileOpen", "showCollapsedTooltips", "tooltipOptions", "linkAs", "expandedIds", "defaultExpandedIds", "onExpandedChange"];
+// useLayoutEffect warns during SSR; fall back to useEffect on the server.
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+// Ctrl/Cmd/Shift/Alt-click or a non-primary button: the browser opens the
+// link in a new tab/window, so the sidebar must not react as if navigating.
+var isModifiedClick = function isModifiedClick(e) {
+  return Boolean(e && (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || typeof e.button === "number" && e.button !== 0));
+};
+// Focus trap for the mobile drawer (same selector as feedback/Dialog).
+var FOCUSABLE_SELECTOR = ["a[href]", "button:not([disabled])", "textarea:not([disabled])", "input:not([disabled])", "select:not([disabled])", '[tabindex]:not([tabindex="-1"])'].join(",");
+var getFocusable = function getFocusable(root) {
+  return root ? Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(function (el) {
+    return el.getAttribute("aria-hidden") !== "true";
+  }) : [];
+};
+var hasChildItems = function hasChildItems(item) {
+  return Array.isArray(item.children) && item.children.length > 0;
+};
+// Ids of every parent that must be open for an `active: true` item to be
+// visible (nested included). An active parent is opened too.
+var findActiveAncestors = function findActiveAncestors(list) {
+  var ids = [];
+  var _walk = function walk(nodes) {
+    var containsActive = false;
+    nodes.forEach(function (node) {
+      if (!node) return;
+      var subtreeActive = hasChildItems(node) ? _walk(node.children) : false;
+      if (hasChildItems(node) && (subtreeActive || node.active)) ids.push(node.id);
+      if (subtreeActive || node.active) containsActive = true;
+    });
+    return containsActive;
+  };
+  _walk(Array.isArray(list) ? list : []);
+  return ids;
+};
+var mergeIds = function mergeIds(base, extra) {
+  var out = _toConsumableArray(base);
+  extra.forEach(function (id) {
+    if (!out.includes(id)) out.push(id);
+  });
+  return out;
+};
+// Top-level items grouped by `item.group`, in order of first appearance
+// (same algorithm as AppShell's NavList). Ungrouped items share the "" key.
+var groupItems = function groupItems(list) {
+  var groups = [];
+  list.forEach(function (item) {
+    var key = item.group || "";
+    var g = groups.find(function (x) {
+      return x.key === key;
+    });
+    if (!g) groups.push(g = {
+      key: key,
+      items: []
+    });
+    g.items.push(item);
+  });
+  return groups;
+};
+// `0`, "", null, undefined and false render no badge.
+var hasBadge = function hasBadge(item) {
+  return item.badge !== undefined && item.badge !== null && item.badge !== false && item.badge !== "" && item.badge !== 0;
+};
+/**
+ * Sidebar component with custom tooltip for collapsed mode.
+ *
+ * Every item (parent or child) renders as an anchor, so items with `href`
+ * support Ctrl/Cmd-click, middle-click and "open in new tab".
+ *
+ * Props:
+ * - items: array of { id, label, icon, href?, target?, rel?, children?, onClick?,
+ *   active?, disabled?, badge?, badgeLabel?, group? }
+ * - linkAs: element type used for items with `href` (default "a"; pass Next.js Link etc.)
+ * - collapsed: boolean (desktop collapsed)
+ * - onToggle: function to toggle collapse
+ * - expandedIds / defaultExpandedIds / onExpandedChange: open groups (ids)
+ * - className, containerClassName, stickyOffset, logo, footer, user, onUserClick
+ * - drawerPosition: 'left' | 'right'
+ * - isMobileOpen, setIsMobileOpen
+ * - showCollapsedTooltips: boolean (default true)
+ */
+var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$collapsed = _ref.collapsed,
+    collapsed = _ref$collapsed === void 0 ? false : _ref$collapsed,
+    onToggle = _ref.onToggle,
+    className = _ref.className,
+    containerClassName = _ref.containerClassName,
+    stickyOffset = _ref.stickyOffset,
+    logo = _ref.logo,
+    footer = _ref.footer,
+    user = _ref.user,
+    onUserClick = _ref.onUserClick,
+    _ref$drawerPosition = _ref.drawerPosition,
+    drawerPosition = _ref$drawerPosition === void 0 ? "left" : _ref$drawerPosition,
+    _ref$isMobileOpen = _ref.isMobileOpen,
+    isMobileOpen = _ref$isMobileOpen === void 0 ? false : _ref$isMobileOpen,
+    setIsMobileOpen = _ref.setIsMobileOpen,
+    _ref$showCollapsedToo = _ref.showCollapsedTooltips,
+    showCollapsedTooltips = _ref$showCollapsedToo === void 0 ? true : _ref$showCollapsedToo,
+    tooltipOptions = _ref.tooltipOptions,
+    _ref$linkAs = _ref.linkAs,
+    Link = _ref$linkAs === void 0 ? "a" : _ref$linkAs,
+    expandedIds = _ref.expandedIds,
+    defaultExpandedIds = _ref.defaultExpandedIds,
+    onExpandedChange = _ref.onExpandedChange,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // -- expansion (controlled via `expandedIds`, else internal) ----------------
+  var isExpansionControlled = expandedIds !== undefined;
+  var activeAncestors = useMemo(function () {
+    return findActiveAncestors(items);
+  }, [items]);
+  var activeKey = activeAncestors.join("\0");
+  var _useState = useState(function () {
+      return mergeIds(Array.isArray(defaultExpandedIds) ? defaultExpandedIds : [], activeAncestors);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalExpanded = _useState2[0],
+    setInternalExpanded = _useState2[1];
+  // Open the groups holding a newly-active item (adjust-during-render).
+  var _useState3 = useState(activeKey),
+    _useState4 = _slicedToArray(_useState3, 2),
+    prevActiveKey = _useState4[0],
+    setPrevActiveKey = _useState4[1];
+  if (activeKey !== prevActiveKey) {
+    setPrevActiveKey(activeKey);
+    if (!isExpansionControlled) {
+      setInternalExpanded(function (prev) {
+        return mergeIds(prev, activeAncestors);
+      });
+    }
+  }
+  var expandedList = isExpansionControlled ? Array.isArray(expandedIds) ? expandedIds : [] : internalExpanded;
+  var isExpandedId = function isExpandedId(id) {
+    return expandedList.includes(id);
+  };
+  var onExpandedChangeRef = useLatestRef(onExpandedChange);
+  var expandedIdsRef = useLatestRef(expandedIds);
+  var activeAncestorsRef = useLatestRef(activeAncestors);
+  // Controlled: ask the owner to open the groups holding the active item, on
+  // mount and whenever the active item moves.
+  useEffect(function () {
+    var _onExpandedChangeRef$;
+    if (!isExpansionControlled) return;
+    var current = Array.isArray(expandedIdsRef.current) ? expandedIdsRef.current : [];
+    var next = mergeIds(current, activeAncestorsRef.current);
+    if (next.length !== current.length) (_onExpandedChangeRef$ = onExpandedChangeRef.current) === null || _onExpandedChangeRef$ === void 0 || _onExpandedChangeRef$.call(onExpandedChangeRef, next);
+  }, [activeKey, isExpansionControlled, expandedIdsRef, activeAncestorsRef, onExpandedChangeRef]);
+  var setExpanded = function setExpanded(next) {
+    if (!isExpansionControlled) setInternalExpanded(next);
+    onExpandedChange === null || onExpandedChange === void 0 || onExpandedChange(next);
+  };
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeItemId = _useState6[0],
+    setActiveItemId = _useState6[1];
+  // Content is rendered twice (desktop pane + mobile drawer), so DOM ids are
+  // scoped per instance and per pane.
+  var instanceId = useId();
+  var drawerRef = useRef(null);
+  var setIsMobileOpenRef = useLatestRef(setIsMobileOpen);
+  var mobileOpen = isMobileOpen !== null && isMobileOpen !== void 0 ? isMobileOpen : false;
+  var effectiveCollapsed = mobileOpen ? false : collapsed;
+  useEffect(function () {
+    if (mobileOpen) document.body.style.overflow = "hidden";else document.body.style.overflow = "";
+    return function () {
+      document.body.style.overflow = "";
+    };
+  }, [mobileOpen]);
+  // The drawer stays mounted (it slides in/out), so when it is shut it must
+  // leave the tab order and the a11y tree. `inert` is set imperatively: React
+  // 18 does not know the attribute and React 19 treats `inert=""` as false.
+  useIsomorphicLayoutEffect(function () {
+    var drawer = drawerRef.current;
+    if (!drawer) return;
+    if (mobileOpen) drawer.removeAttribute("inert");else drawer.setAttribute("inert", "");
+  }, [mobileOpen]);
+  // Open drawer = modal dialog: initial focus inside, Tab trapped, Escape
+  // closes, focus returns to the opener on close (WAI-ARIA APG dialog).
+  useEffect(function () {
+    var _ref2, _ref2$focus, _focusables$;
+    if (!mobileOpen) return undefined;
+    var drawer = drawerRef.current;
+    var previouslyFocused = document.activeElement;
+    var focusables = getFocusable(drawer);
+    (_ref2 = (_focusables$ = focusables[0]) !== null && _focusables$ !== void 0 ? _focusables$ : drawer) === null || _ref2 === void 0 || (_ref2$focus = _ref2.focus) === null || _ref2$focus === void 0 || _ref2$focus.call(_ref2);
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key === "Escape") {
+        var _setIsMobileOpenRef$c;
+        (_setIsMobileOpenRef$c = setIsMobileOpenRef.current) === null || _setIsMobileOpenRef$c === void 0 || _setIsMobileOpenRef$c.call(setIsMobileOpenRef, false);
+        return;
+      }
+      if (e.key !== "Tab" || !drawer) return;
+      // md+ viewports hide the drawer (md:hidden): nothing to trap.
+      if (window.getComputedStyle(drawer).display === "none") return;
+      var nodes = getFocusable(drawer);
+      if (nodes.length === 0) {
+        e.preventDefault();
+        drawer.focus();
+        return;
+      }
+      var first = nodes[0];
+      var last = nodes[nodes.length - 1];
+      var active = document.activeElement;
+      var outside = !drawer.contains(active) || active === drawer;
+      if (e.shiftKey && (active === first || outside)) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (active === last || outside)) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return function () {
+      document.removeEventListener("keydown", handleKeyDown);
+      // Restore focus only if it is still in the drawer (or was dropped to
+      // <body> when the drawer went inert) — never steal it from elsewhere.
+      var active = document.activeElement;
+      var focusLost = !active || active === document.body || (drawer === null || drawer === void 0 ? void 0 : drawer.contains(active));
+      if (focusLost && previouslyFocused && previouslyFocused !== document.body && typeof previouslyFocused.focus === "function" && document.contains(previouslyFocused)) {
+        previouslyFocused.focus();
+      }
+    };
+  }, [mobileOpen, setIsMobileOpenRef]);
+  var closeMobile = function closeMobile() {
+    if (mobileOpen && setIsMobileOpen) setIsMobileOpen(false);
+  };
+  var toggleExpanded = function toggleExpanded(itemId) {
+    setExpanded(isExpandedId(itemId) ? expandedList.filter(function (id) {
+      return id !== itemId;
+    }) : [].concat(_toConsumableArray(expandedList), [itemId]));
+  };
+  var expandSingle = function expandSingle(itemId) {
+    setExpanded([itemId]);
+  };
+  var handleItemClick = function handleItemClick(item, e) {
+    if (item.disabled) {
+      e === null || e === void 0 || e.preventDefault();
+      return;
+    }
+    // Let the browser handle new-tab / new-window clicks untouched.
+    if (item.href && isModifiedClick(e)) return;
+    var hasChildren = hasChildItems(item);
+    if (hasChildren && effectiveCollapsed && !mobileOpen) {
+      // ask parent to uncollapse
+      onToggle === null || onToggle === void 0 || onToggle();
+      setActiveItemId(item.id);
+      expandSingle(item.id);
+      return;
+    }
+    if (hasChildren) {
+      // A parent with an href navigates, so keep its group open rather than
+      // collapsing it on the way out; the chevron is the collapse control.
+      if (item.href) {
+        if (!isExpandedId(item.id)) toggleExpanded(item.id);
+        closeMobile();
+      } else {
+        toggleExpanded(item.id);
+      }
+      setActiveItemId(item.id);
+    } else {
+      var _item$onClick;
+      (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, item);
+      setActiveItemId(item.id);
+      closeMobile();
+    }
+  };
+  // Chevron on a parent link: toggle the group without following the link.
+  var handleChevronClick = function handleChevronClick(item, e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (item.disabled) return;
+    toggleExpanded(item.id);
+  };
+  var handleUserClick = function handleUserClick() {
+    onUserClick === null || onUserClick === void 0 || onUserClick(user);
+    closeMobile();
+  };
+  var _renderMenuItem = function renderMenuItem(item, level, pane) {
+    var _item$badgeLabel, _item$rel;
+    var hasChildren = hasChildItems(item);
+    var isExpanded = isExpandedId(item.id);
+    var isActive = Boolean(item.active) || activeItemId === item.id;
+    var showTooltipForThis = effectiveCollapsed && level === 0 && showCollapsedTooltips;
+    var labelHidden = effectiveCollapsed && level === 0;
+    var hasHref = Boolean(item.href) && !item.disabled;
+    var ItemTag = hasHref ? Link : "a";
+    var groupId = hasChildren ? "".concat(instanceId, "-").concat(pane, "-group-").concat(item.id) : undefined;
+    var showBadge = hasBadge(item);
+    var badgeText = showBadge ? String((_item$badgeLabel = item.badgeLabel) !== null && _item$badgeLabel !== void 0 ? _item$badgeLabel : item.badge) : undefined;
+    // Collapsed: the badge shrinks onto the icon.
+    var compactBadge = showBadge && labelHidden && jsx("span", {
+      className: "absolute -right-2 -top-1.5 min-w-4 rounded-full bg-primary-600 px-1 text-center text-micro font-semibold text-white",
+      "aria-hidden": "true",
+      "data-sidebar-badge": "compact",
+      children: item.badge
+    });
+    var iconEl = item.icon ? jsxs("span", {
+      className: cn("relative flex-shrink-0", {
+        "mr-3": !labelHidden,
+        "mr-0": labelHidden
+      }),
+      "aria-hidden": "true",
+      children: [item.icon, compactBadge]
+    }) : compactBadge && jsx("span", {
+      className: "relative h-4 w-0",
+      children: compactBadge
+    });
+    var itemEl = jsxs(ItemTag, _objectSpread2(_objectSpread2({}, hasHref ? {
+      href: item.href,
+      target: item.target,
+      rel: (_item$rel = item.rel) !== null && _item$rel !== void 0 ? _item$rel : item.target === "_blank" ? "noopener noreferrer" : undefined,
+      "aria-current": isActive ? "page" : undefined
+    } : {
+      // No destination: behave as a button, keyboard included.
+      role: "button",
+      tabIndex: item.disabled ? -1 : 0,
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleItemClick(item, e);
+        }
+      }
+    }), {}, {
+      className: cn("flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", {
+        "bg-primary-100 text-primary-700": isActive,
+        "hover:bg-gray-100": !isActive && !item.disabled,
+        "cursor-pointer": !item.disabled,
+        "cursor-not-allowed opacity-50": item.disabled,
+        "justify-center": labelHidden
+      }),
+      onClick: function onClick(e) {
+        return handleItemClick(item, e);
+      },
+      "aria-label": labelHidden ? showBadge ? "".concat(item.label, ", ").concat(badgeText) : item.label : undefined,
+      "aria-expanded": hasChildren ? isExpanded : undefined,
+      "aria-controls": hasChildren && isExpanded ? groupId : undefined,
+      "aria-disabled": item.disabled || undefined,
+      children: [iconEl, !labelHidden && jsxs(Fragment, {
+        children: [jsx("span", {
+          className: "flex-1 truncate",
+          children: item.label
+        }), showBadge && jsx("span", {
+          className: "ml-2 flex-shrink-0 rounded-full bg-primary-600 px-2 py-0.5 text-xs font-semibold leading-none text-white",
+          "data-sidebar-badge": "",
+          children: item.badgeLabel != null ? jsxs(Fragment, {
+            children: [jsx("span", {
+              "aria-hidden": "true",
+              children: item.badge
+            }), jsx("span", {
+              className: "sr-only",
+              children: item.badgeLabel
+            })]
+          }) : item.badge
+        }), hasChildren && jsx("span", {
+          className: "ml-2 flex-shrink-0 rounded p-0.5 hover:bg-gray-200",
+          "aria-hidden": "true",
+          "data-sidebar-chevron": "",
+          onClick: hasHref ? function (e) {
+            return handleChevronClick(item, e);
+          } : undefined,
+          children: isExpanded ? jsx(ChevronDown, {
+            className: "h-4 w-4"
+          }) : jsx(ChevronRight, {
+            className: "h-4 w-4"
+          })
+        })]
+      })]
+    }));
+    return jsxs("div", {
+      className: "relative",
+      children: [showTooltipForThis ? jsx(Tooltip, _objectSpread2(_objectSpread2({}, tooltipOptions), {}, {
+        trigger: "hover",
+        content: item.label,
+        position: "right",
+        customTrigger: itemEl
+      })) : itemEl, hasChildren && isExpanded && (!effectiveCollapsed || level > 0) && jsx("div", {
+        id: groupId,
+        className: "mt-1 space-y-1 ml-2",
+        children: item.children.map(function (child) {
+          return _renderMenuItem(child, level + 1, pane);
+        })
+      })]
+    }, item.id);
+  };
+  // Section headings (items with `group`). Collapsed: the heading becomes a
+  // divider and stays available to screen readers.
+  var renderNavContent = function renderNavContent(pane) {
+    if (!items.some(function (item) {
+      return item && item.group;
+    })) {
+      return items.map(function (item) {
+        return _renderMenuItem(item, 0, pane);
+      });
+    }
+    return groupItems(items).map(function (section, idx) {
+      var headingId = "".concat(instanceId, "-").concat(pane, "-section-").concat(idx);
+      return jsxs("div", {
+        role: section.key ? "group" : undefined,
+        "aria-labelledby": section.key ? headingId : undefined,
+        className: cn("space-y-1", {
+          "pt-3": idx > 0 && !effectiveCollapsed
+        }),
+        "data-sidebar-section": section.key || "",
+        children: [effectiveCollapsed && idx > 0 && jsx("hr", {
+          className: "mx-2 my-2 border-gray-200",
+          "aria-hidden": "true"
+        }), section.key && (effectiveCollapsed ? jsx("span", {
+          id: headingId,
+          className: "sr-only",
+          children: section.key
+        }) : jsx("p", {
+          id: headingId,
+          className: "px-3 pb-1 pt-2 text-micro font-semibold uppercase tracking-wide text-gray-500",
+          children: section.key
+        })), section.items.map(function (item) {
+          return _renderMenuItem(item, 0, pane);
+        })]
+      }, section.key || "__ungrouped");
+    });
+  };
+  var handleToggleClick = function handleToggleClick() {
+    if (mobileOpen && setIsMobileOpen) setIsMobileOpen(false);else onToggle === null || onToggle === void 0 || onToggle();
+  };
+  var renderUserBlock = function renderUserBlock() {
+    var content = jsxs(Fragment, {
+      children: [user.avatar && jsx("img", {
+        src: user.avatar,
+        alt: user.name,
+        className: "h-8 w-8 rounded-full flex-shrink-0"
+      }), !effectiveCollapsed && jsxs("span", {
+        className: "ml-3 block min-w-0 flex-1",
+        children: [jsx("span", {
+          className: "block text-sm font-medium truncate",
+          children: user.name
+        }), jsx("span", {
+          className: "block text-xs text-primary-500 truncate",
+          children: user.email
+        })]
+      })]
+    });
+    var base = cn("flex w-full items-center rounded-md px-3 py-2 text-left", {
+      "justify-center": effectiveCollapsed,
+      "p-2": effectiveCollapsed
+    });
+    if (!onUserClick) return jsx("div", {
+      className: base,
+      children: content
+    });
+    return jsx("button", {
+      type: "button",
+      onClick: handleUserClick,
+      className: cn(base, "cursor-pointer hover:bg-gray-100 transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"),
+      "aria-label": effectiveCollapsed && !user.avatar ? user.name : undefined,
+      children: content
+    });
+  };
+  var renderFooter = function renderFooter(pane) {
+    if (footer === undefined || footer === null || footer === false) return null;
+    var content = typeof footer === "function" ? footer({
+      collapsed: effectiveCollapsed,
+      isMobile: pane === "mobile",
+      closeMobile: closeMobile
+    }) : footer;
+    if (content === undefined || content === null || content === false) return null;
+    return jsx("div", {
+      className: "border-t border-gray-200 p-4",
+      "data-sidebar-footer": "",
+      children: content
+    });
+  };
+  var renderSidebarContent = function renderSidebarContent(pane) {
+    return jsxs("div", {
+      className: cn("flex h-full flex-col bg-white border-r border-gray-200 shadow-sm", "w-64 transition-all duration-200", {
+        "w-16": effectiveCollapsed,
+        "w-64": !effectiveCollapsed
+      }),
+      children: [jsxs("div", {
+        className: "flex h-16 items-center justify-between border-b border-gray-200 px-4",
+        children: [!effectiveCollapsed && logo && jsx("div", {
+          className: "flex items-center",
+          children: logo
+        }), jsx("button", {
+          type: "button",
+          onClick: handleToggleClick,
+          className: "rounded-md p-1 hover:bg-gray-100",
+          "aria-label": effectiveCollapsed ? "Expand sidebar" : "Collapse sidebar",
+          children: effectiveCollapsed ? jsx(ChevronRight, {
+            className: "h-5 w-5"
+          }) : jsx(ChevronLeft, {
+            className: "h-5 w-5"
+          })
+        })]
+      }), jsx("nav", {
+        className: "flex-1 space-y-1 overflow-y-auto p-4 [&::-webkit-scrollbar]:w-2\n  [&::-webkit-scrollbar-track]:bg-gray-100\n  [&::-webkit-scrollbar-thumb]:bg-gray-300\n  hover:[&::-webkit-scrollbar-thumb]:bg-gray-400",
+        children: renderNavContent(pane)
+      }), renderFooter(pane), user && jsx("div", {
+        className: "border-t border-gray-200 p-4",
+        children: jsx("div", {
+          className: "relative",
+          children: renderUserBlock()
+        })
+      })]
+    });
+  };
+  var isRight = drawerPosition === "right";
+  var mobileDrawerClasses = cn("fixed top-0 z-50 h-full transition-transform duration-300 ease-in-out motion-reduce:transition-none md:hidden", {
+    "left-0": !isRight,
+    "right-0": isRight
+  }, {
+    "translate-x-0": mobileOpen,
+    "-translate-x-full": !mobileOpen && !isRight,
+    "translate-x-full": !mobileOpen && isRight
+  });
+  var desktopPlacementClass = isRight ? "md:order-last" : "";
+  // A top bar above the sidebar: stick below it and shrink to fit.
+  var offset = typeof stickyOffset === "number" ? "".concat(stickyOffset, "px") : stickyOffset;
+  var containerStyle = offset ? {
+    top: offset,
+    height: "calc(100dvh - ".concat(offset, ")")
+  } : undefined;
+  return jsxs(Fragment, {
+    children: [jsx("div", {
+      className: cn("hidden md:flex sticky top-0 h-screen", containerClassName),
+      style: containerStyle,
+      "data-sidebar-container": "",
+      children: jsx("div", _objectSpread2(_objectSpread2({
+        ref: ref,
+        className: cn(desktopPlacementClass, className)
+      }, props), {}, {
+        children: renderSidebarContent("desktop")
+      }))
+    }), mobileOpen && jsx("div", {
+      className: "fixed inset-0 bg-black/30 z-40 md:hidden",
+      onClick: function onClick() {
+        return setIsMobileOpen === null || setIsMobileOpen === void 0 ? void 0 : setIsMobileOpen(false);
+      },
+      "aria-hidden": "true"
+    }), jsx("aside", {
+      ref: drawerRef,
+      className: mobileDrawerClasses,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Navigation",
+      "aria-hidden": mobileOpen ? undefined : true,
+      tabIndex: -1,
+      style: {
+        zIndex: 50
+      },
+      children: renderSidebarContent("mobile")
+    })]
+  });
+});
+Sidebar.displayName = "Sidebar";
+
+export { Sidebar as default };

package/dist/esm/components/utility/Avatar.js

@@ -0,0 +1,89 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../utils/cn.js';
+import { User } from 'lucide-react';
+
+var _excluded = ["src", "alt", "name", "size", "shape", "status", "className"];
+var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var src = _ref.src,
+    alt = _ref.alt,
+    name = _ref.name,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
+    status = _ref.status,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var sizes = {
+    xs: 'h-6 w-6 text-xs',
+    sm: 'h-8 w-8 text-sm',
+    md: 'h-10 w-10 text-base',
+    lg: 'h-12 w-12 text-lg',
+    xl: 'h-16 w-16 text-xl',
+    '2xl': 'h-20 w-20 text-2xl'
+  };
+  var getInitials = function getInitials(name) {
+    if (!name) return '';
+    return name.split(' ').map(function (word) {
+      return word.charAt(0);
+    }).join('').toUpperCase().slice(0, 2);
+  };
+  var statusColors = {
+    online: 'bg-success-500',
+    offline: 'bg-gray-400',
+    away: 'bg-warning-500',
+    busy: 'bg-error-500'
+  };
+  var statusSizes = {
+    xs: 'h-1.5 w-1.5',
+    sm: 'h-2 w-2',
+    md: 'h-2.5 w-2.5',
+    lg: 'h-3 w-3',
+    xl: 'h-4 w-4',
+    '2xl': 'h-5 w-5'
+  };
+  return jsxs("div", {
+    ref: ref,
+    className: "relative inline-block",
+    children: [jsxs("div", _objectSpread2(_objectSpread2({
+      className: cn('flex items-center justify-center bg-gray-100 text-primary-600 font-medium', sizes[size], {
+        'rounded-full': shape === 'circle',
+        'rounded-md': shape === 'square',
+        'rounded-lg': shape === 'rounded'
+      }, className)
+    }, props), {}, {
+      children: [src ? jsx("img", {
+        src: src,
+        alt: alt || name,
+        className: cn('h-full w-full object-cover', {
+          'rounded-full': shape === 'circle',
+          'rounded-md': shape === 'square',
+          'rounded-lg': shape === 'rounded'
+        }),
+        onError: function onError(e) {
+          e.target.style.display = 'none';
+          e.target.nextSibling.style.display = 'flex';
+        }
+      }) : null, jsx("div", {
+        className: cn('flex items-center justify-center h-full w-full', {
+          'rounded-full': shape === 'circle',
+          'rounded-md': shape === 'square',
+          'rounded-lg': shape === 'rounded'
+        }, {
+          'hidden': src
+        }),
+        children: name ? getInitials(name) : jsx(User, {
+          className: "h-1/2 w-1/2"
+        })
+      })]
+    })), status && jsx("span", {
+      className: cn('absolute bottom-0 right-0 rounded-full border-2 border-white', statusColors[status], statusSizes[size])
+    })]
+  });
+});
+Avatar.displayName = 'Avatar';
+
+export { Avatar as default };