@dreamtree-org/twreact-ui 1.3.9 → 1.3.11

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

@@ -1,32 +1,60 @@
 'use client';
-import { objectWithoutProperties as _objectWithoutProperties, toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useState, useRef, useEffect } from 'react';
 import { cn } from '../../utils/cn.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 import { ChevronRight, Home } from 'lucide-react';
 
-var _excluded = ["items", "separator", "showHome", "homeIcon", "onHomeClick", "className"];
+var _excluded = ["items", "separator", "showHome", "homeIcon", "onHomeClick", "maxItems", "className"];
 // Items without an `id` still need a stable, unique React key.
 var itemKey = function itemKey(item, index) {
   var _ref, _item$href;
   return item.id != null ? "id:".concat(item.id) : "idx:".concat(index, ":").concat((_ref = (_item$href = item.href) !== null && _item$href !== void 0 ? _item$href : item.label) !== null && _ref !== void 0 ? _ref : '');
 };
-var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var _ref2$items = _ref2.items,
-    items = _ref2$items === void 0 ? [] : _ref2$items,
-    _ref2$separator = _ref2.separator,
-    separator = _ref2$separator === void 0 ? jsx(ChevronRight, {
+// Long labels truncate with an ellipsis; the full text stays available as a tooltip.
+var LABEL_CLASSES = 'min-w-0 max-w-[10rem] truncate sm:max-w-[16rem]';
+var FOCUS_RING = 'rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1 dark:focus-visible:ring-offset-gray-900';
+var labelTitle = function labelTitle(label) {
+  return typeof label === 'string' || typeof label === 'number' ? String(label) : undefined;
+};
+function ItemContent(_ref2) {
+  var item = _ref2.item;
+  return jsxs(Fragment, {
+    children: [item.icon && jsx("span", {
+      className: "mr-1 shrink-0",
+      children: item.icon
+    }), jsx("span", {
+      className: LABEL_CLASSES,
+      title: labelTitle(item.label),
+      children: item.label
+    })]
+  });
+}
+var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var _ref3$items = _ref3.items,
+    items = _ref3$items === void 0 ? [] : _ref3$items,
+    _ref3$separator = _ref3.separator,
+    separator = _ref3$separator === void 0 ? jsx(ChevronRight, {
       className: "h-4 w-4"
-    }) : _ref2$separator,
-    _ref2$showHome = _ref2.showHome,
-    showHome = _ref2$showHome === void 0 ? true : _ref2$showHome,
-    _ref2$homeIcon = _ref2.homeIcon,
-    homeIcon = _ref2$homeIcon === void 0 ? jsx(Home, {
+    }) : _ref3$separator,
+    _ref3$showHome = _ref3.showHome,
+    showHome = _ref3$showHome === void 0 ? true : _ref3$showHome,
+    _ref3$homeIcon = _ref3.homeIcon,
+    homeIcon = _ref3$homeIcon === void 0 ? jsx(Home, {
       className: "h-4 w-4"
-    }) : _ref2$homeIcon,
-    onHomeClick = _ref2.onHomeClick,
-    className = _ref2.className,
-    props = _objectWithoutProperties(_ref2, _excluded);
+    }) : _ref3$homeIcon,
+    onHomeClick = _ref3.onHomeClick,
+    maxItems = _ref3.maxItems,
+    className = _ref3.className,
+    props = _objectWithoutProperties(_ref3, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  // After expanding, focus moves to the first revealed crumb instead of being lost.
+  var focusRevealed = useRef(false);
+  var firstHiddenRef = useRef(null);
   var allItems = showHome ? [{
     id: 'home',
     label: 'Home',
@@ -34,37 +62,71 @@ var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     icon: homeIcon,
     onClick: onHomeClick
   }].concat(_toConsumableArray(items)) : items;
+  // Collapse keeps the first crumb and the last (maxItems - 1); needs at least 2 to make sense.
+  var limit = Number.isFinite(maxItems) ? Math.max(2, Math.floor(maxItems)) : Infinity;
+  var collapsed = !expanded && allItems.length > limit;
+  var hiddenFrom = 1;
+  var hiddenTo = allItems.length - (limit - 1); // exclusive
+  var hiddenCount = collapsed ? hiddenTo - hiddenFrom : 0;
+  useEffect(function () {
+    if (expanded && focusRevealed.current) {
+      var _firstHiddenRef$curre;
+      focusRevealed.current = false;
+      (_firstHiddenRef$curre = firstHiddenRef.current) === null || _firstHiddenRef$curre === void 0 || _firstHiddenRef$curre.focus();
+    }
+  }, [expanded]);
+  var renderSeparator = function renderSeparator() {
+    return jsx("span", {
+      className: "shrink-0 text-primary-400 dark:text-primary-500",
+      "aria-hidden": "true",
+      children: separator
+    });
+  };
   return jsx("nav", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('flex items-center space-x-1 text-sm', className),
+    className: cn('flex min-w-0 items-center space-x-1 text-sm', className),
     "aria-label": "Breadcrumb"
   }, props), {}, {
     children: allItems.map(function (item, index) {
+      if (collapsed && index >= hiddenFrom && index < hiddenTo) {
+        if (index !== hiddenFrom) return null;
+        return jsxs(React.Fragment, {
+          children: [renderSeparator(), jsx("button", {
+            type: "button",
+            className: cn('inline-flex items-center justify-center px-1 text-primary-500 transition-colors duration-fast motion-reduce:transition-none', 'hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300', FOCUS_RING, TOUCH_TARGET),
+            "aria-label": "Show ".concat(hiddenCount, " more breadcrumb").concat(hiddenCount === 1 ? '' : 's'),
+            onClick: function onClick() {
+              focusRevealed.current = true;
+              setExpanded(true);
+            },
+            children: jsx("span", {
+              "aria-hidden": "true",
+              children: "\u2026"
+            })
+          })]
+        }, "breadcrumbs-collapsed");
+      }
+      var isLast = index === allItems.length - 1;
       return jsxs(React.Fragment, {
-        children: [index > 0 && jsx("span", {
-          className: "text-primary-400",
-          "aria-hidden": "true",
-          children: separator
-        }), index === allItems.length - 1 ? jsxs("span", {
-          className: "font-medium text-primary-900",
+        children: [index > 0 && renderSeparator(), isLast ? jsx("span", {
+          className: "flex min-w-0 items-center font-medium text-primary-900 dark:text-primary-100",
           "aria-current": "page",
-          children: [item.icon && jsx("span", {
-            className: "mr-1",
-            children: item.icon
-          }), item.label]
-        }) : jsxs("a", {
+          children: jsx(ItemContent, {
+            item: item
+          })
+        }) : jsx("a", {
+          ref: expanded && index === hiddenFrom ? firstHiddenRef : undefined,
           href: item.href,
-          className: "flex items-center text-primary-500 transition-colors",
+          className: cn('flex min-w-0 items-center text-primary-500 underline-offset-4 transition-colors duration-fast motion-reduce:transition-none', 'hover:text-primary-700 hover:underline dark:text-primary-400 dark:hover:text-primary-300', FOCUS_RING),
           onClick: function onClick(e) {
             if (item.onClick) {
               e.preventDefault();
               item.onClick(item);
             }
           },
-          children: [item.icon && jsx("span", {
-            className: "mr-1",
-            children: item.icon
-          }), item.label]
+          children: jsx(ItemContent, {
+            item: item
+          })
         })]
       }, itemKey(item, index));
     })

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

@@ -1,10 +1,12 @@
 'use client';
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { cn } from '../../utils/cn.js';
+import { PRESS_FEEDBACK } from '../../utils/touchTarget.js';
 
-var _excluded = ["items", "className"];
+var _excluded = ["items", "linkAs", "hideOnScroll", "badgeMax", "className", "onFocus"],
+  _excluded2 = ["className"];
 var hasBadge = function hasBadge(badge) {
   return badge === 0 || Boolean(badge);
 };
@@ -17,34 +19,100 @@ var passthrough = function passthrough(item) {
     return /^(aria|data)-/.test(key);
   }));
 };
+// Numeric counts above `max` read `${max}+` so a big number can't widen the tab.
+var formatBadge = function formatBadge(badge, max) {
+  return typeof badge === 'number' && typeof max === 'number' && badge > max ? "".concat(max, "+") : badge;
+};
 var Badge = function Badge(_ref3) {
-  var badge = _ref3.badge;
+  var badge = _ref3.badge,
+    max = _ref3.max;
   return jsx("span", {
-    className: "absolute -top-1.5 left-full -ml-2 flex h-4 min-w-4 items-center justify-center rounded-full bg-error-600 px-1 text-micro font-semibold text-white",
+    className: "absolute -top-1.5 left-full -ml-2 flex h-4 min-w-4 items-center justify-center whitespace-nowrap rounded-full bg-error-600 px-1 text-micro font-semibold tabular-nums text-white",
     "data-slot": "badge",
-    children: badge
+    children: formatBadge(badge, max)
   });
 };
+// Scroll distance (px) that counts as a direction change, and the offset
+// before the bar may hide (so it never hides at the very top of the page).
+var SCROLL_DELTA = 8;
+var HIDE_AFTER = 64;
+// Hide on scroll down, show on scroll up. Passive listener; SSR-safe (the
+// effect only runs in the browser).
+function useHideOnScroll(enabled) {
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    hidden = _React$useState2[0],
+    setHidden = _React$useState2[1];
+  React.useEffect(function () {
+    if (!enabled || typeof window === 'undefined') {
+      setHidden(false);
+      return undefined;
+    }
+    var lastY = window.scrollY || 0;
+    var onScroll = function onScroll() {
+      var y = window.scrollY || 0;
+      var delta = y - lastY;
+      if (Math.abs(delta) < SCROLL_DELTA) return;
+      setHidden(delta > 0 && y > HIDE_AFTER);
+      lastY = y;
+    };
+    window.addEventListener('scroll', onScroll, {
+      passive: true
+    });
+    return function () {
+      return window.removeEventListener('scroll', onScroll);
+    };
+  }, [enabled]);
+  return [hidden, setHidden];
+}
 var FootNav = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
   var _ref4$items = _ref4.items,
     items = _ref4$items === void 0 ? [] : _ref4$items,
+    linkAs = _ref4.linkAs,
+    _ref4$hideOnScroll = _ref4.hideOnScroll,
+    hideOnScroll = _ref4$hideOnScroll === void 0 ? false : _ref4$hideOnScroll,
+    _ref4$badgeMax = _ref4.badgeMax,
+    badgeMax = _ref4$badgeMax === void 0 ? 99 : _ref4$badgeMax,
     className = _ref4.className,
+    onFocus = _ref4.onFocus,
     props = _objectWithoutProperties(_ref4, _excluded);
+  var _useHideOnScroll = useHideOnScroll(hideOnScroll),
+    _useHideOnScroll2 = _slicedToArray(_useHideOnScroll, 2),
+    hidden = _useHideOnScroll2[0],
+    setHidden = _useHideOnScroll2[1];
+  // Keyboard focus moving into a hidden bar brings it back.
+  var handleFocus = function handleFocus(e) {
+    if (hidden) setHidden(false);
+    onFocus === null || onFocus === void 0 || onFocus(e);
+  };
   return jsx("nav", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('fixed bottom-0 left-0 right-0 bg-surface border-t border-line px-2 py-2 md:hidden', className)
+    "aria-label": "Primary",
+    "data-hidden": hideOnScroll ? String(hidden) : undefined,
+    className: cn('fixed bottom-0 left-0 right-0 z-sticky border-t border-line px-2 pb-safe md:hidden',
+    // Translucent where backdrop blur is supported, solid surface otherwise.
+    'bg-surface supports-[backdrop-filter]:bg-surface/80 supports-[backdrop-filter]:backdrop-blur', hideOnScroll && 'transition-transform duration-base ease-standard motion-reduce:transition-none', hideOnScroll && hidden && 'translate-y-full', className),
+    onFocus: handleFocus
   }, props), {}, {
     children: jsx("div", {
-      className: "flex items-stretch justify-around gap-1",
+      className: "flex items-stretch justify-around gap-1 py-2",
       children: items.map(function (item, index) {
-        var _item$id;
+        var _item$to, _item$id;
         var isAction = item.variant === 'action';
-        return jsxs("button", _objectSpread2(_objectSpread2({
-          type: "button",
+        var isLink = item.href !== undefined || item.to !== undefined;
+        var Item = isLink ? linkAs || 'a' : 'button';
+        var linkProps = isLink ? _objectSpread2({
+          href: item.href
+        }, linkAs ? {
+          to: (_item$to = item.to) !== null && _item$to !== void 0 ? _item$to : item.href
+        } : {}) : {
+          type: 'button'
+        };
+        return jsxs(Item, _objectSpread2(_objectSpread2(_objectSpread2({}, linkProps), {}, {
           "aria-current": item.active ? 'page' : undefined,
           "data-variant": isAction ? 'action' : undefined
         }, passthrough(item)), {}, {
-          className: cn('relative flex min-w-0 flex-1 flex-col items-center gap-1 rounded-md px-1 py-2 text-xs transition-colors', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1 motion-reduce:transition-none', isAction ? 'group justify-start py-0 font-medium text-muted' : item.active ? 'bg-primary-50 font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-300' : 'font-medium text-muted hover:bg-gray-100 hover:text-foreground dark:hover:bg-gray-800'),
+          className: cn('relative flex min-w-0 flex-1 flex-col items-center gap-1 rounded-md px-1 py-2 text-xs no-underline', PRESS_FEEDBACK, 'transition duration-fast ease-standard motion-reduce:transition-none', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1 dark:focus-visible:ring-offset-gray-900', isAction ? 'group justify-start py-0 font-medium text-muted' : item.active ? 'bg-primary-50 font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-300' : 'font-medium text-muted hover:bg-gray-100 hover:text-foreground dark:hover:bg-gray-800'),
           onClick: function onClick() {
             var _item$onClick;
             return (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, item);
@@ -56,13 +124,15 @@ var FootNav = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
             className: "relative -mt-7 inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary-600 text-2xl text-white shadow-lg ring-4 ring-surface transition-colors group-hover:bg-primary-700 motion-reduce:transition-none",
             "data-slot": "icon",
             children: [item.icon, hasBadge(item.badge) && jsx(Badge, {
-              badge: item.badge
+              badge: item.badge,
+              max: badgeMax
             })]
           }) : jsxs("span", {
             className: "relative inline-flex text-lg",
             "data-slot": "icon",
             children: [item.icon, hasBadge(item.badge) && jsx(Badge, {
-              badge: item.badge
+              badge: item.badge,
+              max: badgeMax
             })]
           }), jsx("span", {
             className: "block max-w-full truncate",
@@ -74,5 +144,24 @@ var FootNav = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
   }));
 });
 FootNav.displayName = 'FootNav';
+// Reserves the bar's height plus the bottom safe area at the end of the page
+// content, so nothing scrolls under the fixed bar. Hidden from `md` up, like
+// the bar itself.
+var FootNavSpacer = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
+  var className = _ref5.className,
+    props = _objectWithoutProperties(_ref5, _excluded2);
+  return jsx("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    "aria-hidden": "true",
+    "data-slot": "footnav-spacer",
+    className: cn('pb-safe md:hidden', className)
+  }, props), {}, {
+    children: jsx("div", {
+      className: "h-20"
+    })
+  }));
+});
+FootNavSpacer.displayName = 'FootNav.Spacer';
+FootNav.Spacer = FootNavSpacer;
 
 export { FootNav as default };

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

@@ -6,6 +6,8 @@ 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';
+import { useFocusTrap } from '../../hooks/useFocusTrap.js';
+import { useScrollLock } from '../../hooks/useScrollLock.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.
@@ -15,13 +17,6 @@ var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect
 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;
 };
@@ -171,12 +166,8 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   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]);
+  // Ref-counted, so a Dialog/Drawer stacked on top never unlocks the page early.
+  useScrollLock(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.
@@ -185,54 +176,15 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     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]);
+  // Open drawer = modal dialog: initial focus inside, Tab trapped (skipped
+  // while md:hidden hides it), Escape closes, focus returns to the opener.
+  useFocusTrap(drawerRef, {
+    active: mobileOpen,
+    onEscape: function onEscape() {
+      var _setIsMobileOpenRef$c;
+      return (_setIsMobileOpenRef$c = setIsMobileOpenRef.current) === null || _setIsMobileOpenRef$c === void 0 ? void 0 : _setIsMobileOpenRef$c.call(setIsMobileOpenRef, false);
+    }
+  });
   var closeMobile = function closeMobile() {
     if (mobileOpen && setIsMobileOpen) setIsMobileOpen(false);
   };

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

@@ -1,11 +1,20 @@
 'use client';
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, 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"];
+// Internal (not exported from the package): shared with AvatarGroup's "+N" tile.
+var AVATAR_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 Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var src = _ref.src,
     alt = _ref.alt,
@@ -17,14 +26,23 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     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'
-  };
+  // State-driven fallback: a broken image swaps to initials / icon without
+  // touching the DOM directly. Reset whenever `src` changes
+  // (adjust-during-render pattern).
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    imgFailed = _React$useState2[0],
+    setImgFailed = _React$useState2[1];
+  var _React$useState3 = React.useState(src),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    prevSrc = _React$useState4[0],
+    setPrevSrc = _React$useState4[1];
+  if (src !== prevSrc) {
+    setPrevSrc(src);
+    setImgFailed(false);
+  }
+  var showImage = Boolean(src) && !imgFailed;
+  var sizes = AVATAR_SIZES;
   var getInitials = function getInitials(name) {
     if (!name) return '';
     return name.split(' ').map(function (word) {
@@ -33,7 +51,7 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   var statusColors = {
     online: 'bg-success-500',
-    offline: 'bg-gray-400',
+    offline: 'bg-gray-400 dark:bg-gray-500',
     away: 'bg-warning-500',
     busy: 'bg-error-500'
   };
@@ -48,14 +66,14 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   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], {
+    children: [jsx("div", _objectSpread2(_objectSpread2({
+      className: cn('flex items-center justify-center bg-gray-100 text-primary-600 font-medium dark:bg-gray-800 dark:text-primary-300', sizes[size], {
         'rounded-full': shape === 'circle',
         'rounded-md': shape === 'square',
         'rounded-lg': shape === 'rounded'
       }, className)
     }, props), {}, {
-      children: [src ? jsx("img", {
+      children: showImage ? jsx("img", {
         src: src,
         alt: alt || name,
         className: cn('h-full w-full object-cover', {
@@ -63,27 +81,24 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           'rounded-md': shape === 'square',
           'rounded-lg': shape === 'rounded'
         }),
-        onError: function onError(e) {
-          e.target.style.display = 'none';
-          e.target.nextSibling.style.display = 'flex';
+        onError: function onError() {
+          return setImgFailed(true);
         }
-      }) : null, jsx("div", {
+      }) : 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])
+      className: cn('absolute bottom-0 right-0 rounded-full border-2 border-surface', statusColors[status], statusSizes[size])
     })]
   });
 });
 Avatar.displayName = 'Avatar';
 
-export { Avatar as default };
+export { AVATAR_SIZES, Avatar as default };

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

@@ -0,0 +1,56 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../utils/cn.js';
+import { AVATAR_SIZES } from './Avatar.js';
+
+var _excluded = ["children", "max", "size", "className"];
+// Overlap grows with the avatar so the stack reads the same at every size.
+var OVERLAP = {
+  xs: '-space-x-1.5',
+  sm: '-space-x-2',
+  md: '-space-x-2',
+  lg: '-space-x-3',
+  xl: '-space-x-4',
+  '2xl': '-space-x-5'
+};
+// Each avatar is ringed in the surface colour so it reads as cut out of the
+// one behind it (dark-mode aware).
+var RING = 'ring-2 ring-surface';
+var AvatarGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    max = _ref.max,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var avatars = React.Children.toArray(children).filter(React.isValidElement);
+  var limit = typeof max === 'number' && max >= 0 ? max : avatars.length;
+  var visible = avatars.slice(0, limit);
+  var overflow = avatars.length - visible.length;
+  var sizeKey = AVATAR_SIZES[size] ? size : 'md';
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    role: "group",
+    className: cn('flex items-center', OVERLAP[sizeKey], className)
+  }, props), {}, {
+    children: [visible.map(function (child) {
+      var _child$props$size;
+      return /*#__PURE__*/React.cloneElement(child, {
+        // An avatar's own `size` wins; otherwise the group's size applies.
+        size: (_child$props$size = child.props.size) !== null && _child$props$size !== void 0 ? _child$props$size : size,
+        className: cn(RING, child.props.className)
+      });
+    }), overflow > 0 && jsxs("span", {
+      role: "img",
+      "aria-label": "".concat(overflow, " more"),
+      "data-slot": "overflow",
+      className: cn('relative inline-flex shrink-0 items-center justify-center rounded-full bg-gray-200 font-medium text-gray-700 dark:bg-gray-700 dark:text-gray-100', RING, AVATAR_SIZES[sizeKey]),
+      children: ["+", overflow]
+    })]
+  }));
+});
+AvatarGroup.displayName = 'AvatarGroup';
+
+export { AvatarGroup as default };