@dreamtree-org/twreact-ui 1.3.8 → 1.3.10

package/dist/esm/components/feedback/Dialog.js

@@ -1,38 +1,21 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useId, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../utils/cn.js';
 import { X } from 'lucide-react';
 import { useLatestRef } from '../../hooks/useLatestRef.js';
+import { useFocusTrap } from '../../hooks/useFocusTrap.js';
+import { useScrollLock } from '../../hooks/useScrollLock.js';
+import { setRefs } from '../../utils/position.js';
 import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
 var _excluded = ["isOpen", "onClose", "title", "children", "size", "dismissible", "showCloseButton", "footer", "className", "onOpen"],
   _excluded2 = ["children", "className"],
   _excluded3 = ["children", "className"],
   _excluded4 = ["children", "className"];
-// Elements that can receive keyboard focus. Used to drive the focus trap and to
-// pick the first element to focus when the dialog opens (WAI-ARIA APG 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';
-  }) : [];
-};
-// Assign one node to several refs (callback or object). Lets the dialog keep
-// its internal `dialogRef` for the focus trap while still exposing the panel
-// node to a consumer-supplied `ref` (issue #56).
-var setRefs = function setRefs(node) {
-  for (var _len = arguments.length, refs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    refs[_key - 1] = arguments[_key];
-  }
-  refs.forEach(function (ref) {
-    if (!ref) return;
-    if (typeof ref === 'function') ref(node);else ref.current = node;
-  });
-};
-var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, _ref3) {
+var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, _ref2) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     title = _ref.title,
@@ -48,66 +31,27 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, _ref3) {
     onOpen = _ref.onOpen,
     props = _objectWithoutProperties(_ref, _excluded);
   var dialogRef = useRef(null);
-  // The element that had focus when the dialog opened, so we can restore it on close.
-  var lastFocusedRef = useRef(null);
+  // Unique per instance so two open dialogs never share an aria-labelledby target.
+  var titleId = "dialog-title-".concat(useId());
   // Latest onOpen without re-running the open effect when the prop identity changes.
   var onOpenRef = useLatestRef(onOpen);
+  // Ref-counted body lock: closing a Dialog stacked over a Drawer (or another
+  // overlay) leaves the page locked until the last overlay closes.
+  useScrollLock(isOpen);
+  // Shared focus management: initial focus, Tab trap, Escape (top layer only),
+  // and focus restore to the opener on close.
+  useFocusTrap(dialogRef, {
+    active: isOpen,
+    onEscape: function onEscape() {
+      if (dismissible) onClose === null || onClose === void 0 || onClose();
+    }
+  });
   useEffect(function () {
-    var _ref2, _focusables$, _onOpenRef$current;
-    if (!isOpen) return undefined;
-    // Remember the opener so focus can return to it when the dialog closes.
-    lastFocusedRef.current = document.activeElement;
-    document.body.style.overflow = 'hidden';
-    // Move focus into the panel: first focusable descendant, else the panel itself.
-    var panel = dialogRef.current;
-    var focusables = getFocusable(panel);
-    (_ref2 = (_focusables$ = focusables[0]) !== null && _focusables$ !== void 0 ? _focusables$ : panel) === null || _ref2 === void 0 || _ref2.focus();
-    (_onOpenRef$current = onOpenRef.current) === null || _onOpenRef$current === void 0 || _onOpenRef$current.call(onOpenRef, {
-      dialogRef: panel
+    var _onOpenRef$current;
+    if (isOpen) (_onOpenRef$current = onOpenRef.current) === null || _onOpenRef$current === void 0 || _onOpenRef$current.call(onOpenRef, {
+      dialogRef: dialogRef.current
     });
-    return function () {
-      var _lastFocusedRef$curre, _lastFocusedRef$curre2;
-      document.body.style.overflow = 'unset';
-      // Restore focus to whatever opened the dialog (APG focus-restore requirement).
-      (_lastFocusedRef$curre = lastFocusedRef.current) === null || _lastFocusedRef$curre === void 0 || (_lastFocusedRef$curre2 = _lastFocusedRef$curre.focus) === null || _lastFocusedRef$curre2 === void 0 || _lastFocusedRef$curre2.call(_lastFocusedRef$curre);
-    };
   }, [isOpen, onOpenRef]);
-  // Escape-to-close + Tab focus trap. An aria-modal element must keep keyboard
-  // focus inside the panel; without this, Tab walks into the page behind it.
-  useEffect(function () {
-    if (!isOpen) return undefined;
-    var handleKeyDown = function handleKeyDown(e) {
-      if (e.key === 'Escape') {
-        if (dismissible) onClose === null || onClose === void 0 || onClose();
-        return;
-      }
-      if (e.key !== 'Tab') return;
-      var panel = dialogRef.current;
-      if (!panel) return;
-      var focusables = getFocusable(panel);
-      if (focusables.length === 0) {
-        // Nothing focusable inside — pin focus to the panel.
-        e.preventDefault();
-        panel.focus();
-        return;
-      }
-      var first = focusables[0];
-      var last = focusables[focusables.length - 1];
-      var active = document.activeElement;
-      var outside = !panel.contains(active) || active === panel;
-      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 () {
-      return document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [isOpen, dismissible, onClose]);
   if (!isOpen) return null;
   var sizeClasses = {
     sm: 'max-w-md',
@@ -122,27 +66,27 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, _ref3) {
     }
   };
   return /*#__PURE__*/createPortal(jsx("div", {
-    className: "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4",
+    className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
     onClick: handleBackdropClick,
     children: jsxs("div", _objectSpread2(_objectSpread2({
       ref: function ref(node) {
-        return setRefs(node, dialogRef, _ref3);
+        return setRefs(node, dialogRef, _ref2);
       },
-      className: cn('w-full rounded-lg bg-white shadow-xl animate-scale-in motion-reduce:animate-none', sizeClasses[size], className),
+      className: cn('w-full rounded-lg border border-line bg-surface text-foreground shadow-xl focus:outline-none animate-scale-in motion-reduce:animate-none', sizeClasses[size], className),
       tabIndex: -1,
       role: "dialog",
       "aria-modal": "true",
-      "aria-labelledby": title ? 'dialog-title' : undefined
+      "aria-labelledby": title ? titleId : undefined
     }, props), {}, {
       children: [(title || showCloseButton) && jsxs("div", {
-        className: "flex items-center justify-between border-b border-gray-200 px-6 py-4",
+        className: "flex items-center justify-between border-b border-line px-6 py-4",
         children: [title && jsx("h2", {
-          id: "dialog-title",
-          className: "text-lg font-semibold text-primary-900",
+          id: titleId,
+          className: "text-lg font-semibold text-foreground",
           children: title
         }), showCloseButton && jsx("button", {
           type: "button",
-          className: cn('inline-flex items-center justify-center rounded-md p-1 text-primary-400 hover:text-primary-600 hover:bg-gray-100', TOUCH_TARGET),
+          className: cn('inline-flex items-center justify-center rounded-md p-1 text-muted hover:bg-gray-100 hover:text-foreground dark:hover:bg-gray-800', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500', TOUCH_TARGET),
           onClick: onClose,
           "aria-label": "Close dialog",
           children: jsx(X, {
@@ -154,7 +98,7 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, _ref3) {
         className: "px-6 py-4",
         children: children
       }), footer && jsx("div", {
-        className: "flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4",
+        className: "flex items-center justify-end gap-3 border-t border-line px-6 py-4",
         children: footer
       })]
     }))
@@ -162,32 +106,32 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, _ref3) {
 });
 Dialog.displayName = 'Dialog';
 // Dialog components for composition
-var DialogHeader = function DialogHeader(_ref4) {
-  var children = _ref4.children,
-    className = _ref4.className,
-    props = _objectWithoutProperties(_ref4, _excluded2);
+var DialogHeader = function DialogHeader(_ref3) {
+  var children = _ref3.children,
+    className = _ref3.className,
+    props = _objectWithoutProperties(_ref3, _excluded2);
   return jsx("div", _objectSpread2(_objectSpread2({
-    className: cn('border-b border-gray-200 px-6 py-4', className)
+    className: cn('border-b border-line px-6 py-4', className)
   }, props), {}, {
     children: children
   }));
 };
-var DialogBody = function DialogBody(_ref5) {
-  var children = _ref5.children,
-    className = _ref5.className,
-    props = _objectWithoutProperties(_ref5, _excluded3);
+var DialogBody = function DialogBody(_ref4) {
+  var children = _ref4.children,
+    className = _ref4.className,
+    props = _objectWithoutProperties(_ref4, _excluded3);
   return jsx("div", _objectSpread2(_objectSpread2({
     className: cn('px-6 py-4', className)
   }, props), {}, {
     children: children
   }));
 };
-var DialogFooter = function DialogFooter(_ref6) {
-  var children = _ref6.children,
-    className = _ref6.className,
-    props = _objectWithoutProperties(_ref6, _excluded4);
+var DialogFooter = function DialogFooter(_ref5) {
+  var children = _ref5.children,
+    className = _ref5.className,
+    props = _objectWithoutProperties(_ref5, _excluded4);
   return jsx("div", _objectSpread2(_objectSpread2({
-    className: cn('flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4', className)
+    className: cn('flex items-center justify-end gap-3 border-t border-line px-6 py-4', className)
   }, props), {}, {
     children: children
   }));

package/dist/esm/components/feedback/Toast.js

@@ -5,8 +5,23 @@ import { forwardRef, useState, useRef, useCallback, useEffect, useContext, creat
 import { createPortal } from 'react-dom';
 import { cn } from '../../utils/cn.js';
 import { Bell, Info, AlertTriangle, XCircle, CheckCircle2, X } from 'lucide-react';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
 var _excluded = ["id", "title", "message", "description", "type", "duration", "onClose", "position", "statusIcon", "actions", "color", "footerNote", "showFooterNote", "portal", "className"];
+// Errors interrupt (role="alert", assertive); everything else waits for the
+// screen reader to finish (role="status", polite). Consumers can still pass
+// their own role / aria-live, which win because ...props spreads last.
+var liveRegionProps = function liveRegionProps(type) {
+  return type === 'error' ? {
+    role: 'alert',
+    'aria-live': 'assertive',
+    'aria-atomic': 'true'
+  } : {
+    role: 'status',
+    'aria-live': 'polite',
+    'aria-atomic': 'true'
+  };
+};
 var STATUS_CONFIG = {
   success: {
     icon: CheckCircle2,
@@ -147,7 +162,7 @@ var Toast = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var statusStyle = STATUS_CONFIG[type] || STATUS_CONFIG.info || STATUS_CONFIG["default"];
   var StatusIconComponent = statusStyle.icon;
   var bodyText = description || message;
-  var toastContent = jsxs("div", _objectSpread2(_objectSpread2({
+  var toastContent = jsxs("div", _objectSpread2(_objectSpread2(_objectSpread2({
     ref: ref,
     onMouseEnter: function onMouseEnter() {
       return setIsPaused(true);
@@ -155,14 +170,15 @@ var Toast = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onMouseLeave: function onMouseLeave() {
       return setIsPaused(false);
     },
-    className: cn('relative overflow-hidden rounded-xl border border-slate-200/90 bg-white/95 shadow-xl backdrop-blur-md transition-all duration-300', 'dark:border-slate-800/80 dark:bg-[#18181b] dark:text-slate-100 dark:shadow-2xl', 'max-w-md w-full', isLeaving ? 'opacity-0 scale-95 translate-y-1' : 'animate-slide-up opacity-100 scale-100', portal ? ['fixed z-50', STANDALONE_POSITION_CLASSES[position] || STANDALONE_POSITION_CLASSES['top-right']] : '', className)
-  }, props), {}, {
+    className: cn('relative overflow-hidden rounded-xl border border-slate-200/90 bg-white/95 shadow-xl backdrop-blur-md transition-all duration-300', 'dark:border-slate-800/80 dark:bg-[#18181b] dark:text-slate-100 dark:shadow-2xl', 'max-w-md w-full motion-reduce:transition-none', isLeaving ? 'opacity-0 scale-95 translate-y-1' : 'animate-slide-up motion-reduce:animate-none opacity-100 scale-100', portal ? ['fixed z-50', STANDALONE_POSITION_CLASSES[position] || STANDALONE_POSITION_CLASSES['top-right']] : '', className)
+  }, liveRegionProps(type)), props), {}, {
     children: [jsx("div", {
       className: "p-4",
       children: jsxs("div", {
         className: "flex items-start gap-3 justify-between",
         children: [jsx("span", {
           className: "flex-shrink-0 mt-0.5",
+          "aria-hidden": "true",
           children: statusIcon ? statusIcon : jsx(StatusIconComponent, {
             className: cn('h-5 w-5', statusStyle.iconClass)
           })
@@ -194,10 +210,11 @@ var Toast = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }), jsx("button", {
           type: "button",
           "aria-label": "Close notification",
-          className: "flex-shrink-0 rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-zinc-800/70 transition-colors outline-none focus:ring-2 focus:ring-primary-500",
+          className: cn('inline-flex flex-shrink-0 items-center justify-center rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-zinc-800/70 transition-colors motion-reduce:transition-none outline-none focus-visible:ring-2 focus-visible:ring-primary-500', TOUCH_TARGET),
           onClick: handleClose,
           children: jsx(X, {
-            className: "h-4 w-4"
+            className: "h-4 w-4",
+            "aria-hidden": "true"
           })
         })]
       })
@@ -250,6 +267,8 @@ var ToastStack = function ToastStack(_ref2) {
   }
   var posClass = POSITION_CLASSES[position] || POSITION_CLASSES['top-right'];
   return /*#__PURE__*/createPortal(jsx("div", {
+    role: "region",
+    "aria-label": "Notifications",
     className: cn('fixed z-50 flex flex-col gap-3 max-h-[calc(100vh-2rem)] overflow-y-auto overflow-x-hidden p-2 pointer-events-none', '[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden', posClass, className),
     children: toasts.map(function (t) {
       return jsx("div", {

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,5 +1,5 @@
 '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';
@@ -17,6 +17,22 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     status = _ref.status,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
+  // 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 = {
     xs: 'h-6 w-6 text-xs',
     sm: 'h-8 w-8 text-sm',
@@ -48,14 +64,14 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return jsxs("div", {
     ref: ref,
     className: "relative inline-block",
-    children: [jsxs("div", _objectSpread2(_objectSpread2({
+    children: [jsx("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", {
+      children: showImage ? jsx("img", {
         src: src,
         alt: alt || name,
         className: cn('h-full w-full object-cover', {
@@ -63,22 +79,19 @@ 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])
     })]

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

@@ -1,10 +1,15 @@
 'use client';
-import { slicedToArray as _slicedToArray } 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 { ChevronLeft, ChevronRight } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
+var _excluded = ["children", "autoPlay", "interval", "showDots", "className", "itemClassName", "onMouseEnter", "onMouseLeave"];
+// Arrows stay visible at rest (touch devices have no hover) and use the surface /
+// foreground role tokens so they read on light and dark themes alike.
+var ARROW_CLASSES = "absolute top-1/2 -translate-y-1/2 z-10 inline-flex items-center justify-center p-2 rounded-full bg-surface/80 backdrop-blur-md border border-line text-foreground shadow-lg transition-colors motion-reduce:transition-none hover:bg-surface focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500";
 var Carousel = /*#__PURE__*/React.forwardRef(function Carousel(props, ref) {
   var children = props.children,
     _props$autoPlay = props.autoPlay,
@@ -14,7 +19,10 @@ var Carousel = /*#__PURE__*/React.forwardRef(function Carousel(props, ref) {
     _props$showDots = props.showDots,
     showDots = _props$showDots === void 0 ? true : _props$showDots,
     className = props.className,
-    itemClassName = props.itemClassName;
+    itemClassName = props.itemClassName,
+    _onMouseEnter = props.onMouseEnter,
+    _onMouseLeave = props.onMouseLeave,
+    rest = _objectWithoutProperties(props, _excluded);
   var _React$useState = React.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     currentIndex = _React$useState2[0],
@@ -44,17 +52,20 @@ var Carousel = /*#__PURE__*/React.forwardRef(function Carousel(props, ref) {
     };
   }, [autoPlay, isPaused, next, interval]);
   var childrenArray = React.Children.toArray(children);
-  return jsxs("div", {
+  return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn("relative group overflow-hidden rounded-xl bg-card border border-border/50 shadow-sm", className),
-    onMouseEnter: function onMouseEnter() {
-      return setIsPaused(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setIsPaused(false);
+    className: cn("relative overflow-hidden rounded-xl bg-surface border border-line shadow-sm", className),
+    onMouseEnter: function onMouseEnter(e) {
+      setIsPaused(true);
+      _onMouseEnter === null || _onMouseEnter === void 0 || _onMouseEnter(e);
     },
+    onMouseLeave: function onMouseLeave(e) {
+      setIsPaused(false);
+      _onMouseLeave === null || _onMouseLeave === void 0 || _onMouseLeave(e);
+    }
+  }, rest), {}, {
     children: [jsx("div", {
-      className: "flex transition-transform duration-500 ease-out",
+      className: "flex transition-transform duration-500 ease-out motion-reduce:transition-none",
       style: {
         transform: "translateX(-".concat(currentIndex * 100, "%)")
       },
@@ -65,32 +76,38 @@ var Carousel = /*#__PURE__*/React.forwardRef(function Carousel(props, ref) {
         }, index);
       })
     }), jsx("button", {
+      type: "button",
       onClick: prev,
-      className: "absolute left-4 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-background/80 backdrop-blur-md border border-border/50 text-foreground opacity-0 group-hover:opacity-100 transition-all hover:bg-background shadow-lg focus:outline-none focus:ring-2 focus:ring-primary",
+      className: cn(ARROW_CLASSES, TOUCH_TARGET, "left-4"),
       "aria-label": "Previous slide",
       children: jsx(ChevronLeft, {
-        className: "w-5 h-5 text-white"
+        className: "w-5 h-5",
+        "aria-hidden": "true"
       })
     }), jsx("button", {
+      type: "button",
       onClick: next,
-      className: "absolute right-4 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-background/80 backdrop-blur-md border border-border/50 text-foreground opacity-0 group-hover:opacity-100 transition-all hover:bg-background shadow-lg focus:outline-none focus:ring-2 focus:ring-primary",
+      className: cn(ARROW_CLASSES, TOUCH_TARGET, "right-4"),
       "aria-label": "Next slide",
       children: jsx(ChevronRight, {
-        className: "w-5 h-5 text-white"
+        className: "w-5 h-5",
+        "aria-hidden": "true"
       })
     }), showDots && jsx("div", {
       className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10",
       children: childrenArray.map(function (_, index) {
         return jsx("button", {
+          type: "button",
           onClick: function onClick() {
             return setCurrentIndex(index);
           },
-          className: cn("w-2 h-2 rounded-full transition-all duration-300", currentIndex === index ? "bg-primary w-6" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"),
-          "aria-label": "Go to slide ".concat(index + 1)
+          className: cn("h-2 rounded-full transition-all duration-300 motion-reduce:transition-none focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2", currentIndex === index ? "bg-primary-600 w-6" : "w-2 bg-muted/40 hover:bg-muted/70"),
+          "aria-label": "Go to slide ".concat(index + 1),
+          "aria-current": currentIndex === index ? "true" : undefined
         }, index);
       })
     })]
-  });
+  }));
 });
 Carousel.displayName = "Carousel";
 

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

@@ -50,7 +50,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: cn('flex items-center justify-center space-x-1', className),
     "aria-label": "Pagination"
   }, props), {}, {
-    children: [showFirstLast && currentPage > 1 && jsx("button", {
+    children: [showFirstLast && visiblePages[0] > 1 && jsx("button", {
       className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
       onClick: function onClick() {
         return handlePageClick(1);
@@ -96,7 +96,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       children: jsx(ChevronRight, {
         className: "h-4 w-4"
       })
-    }), showFirstLast && currentPage < totalPages && jsx("button", {
+    }), showFirstLast && visiblePages[visiblePages.length - 1] < totalPages && jsx("button", {
       className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
       onClick: function onClick() {
         return handlePageClick(totalPages);

package/dist/esm/hooks/useClickOutside.js

@@ -0,0 +1,51 @@
+'use client';
+import { useEffect } from 'react';
+import { useLatestRef } from './useLatestRef.js';
+
+// Internal (not exported). Calls `onClickOutside` when a press lands outside
+// every element in `refs`.
+/** Events to listen to: `pointerdown` where supported, else mouse + touch. */
+function outsidePressEvents() {
+  if (typeof window !== "undefined" && typeof window.PointerEvent === "function") {
+    return ["pointerdown"];
+  }
+  return ["mousedown", "touchstart"];
+}
+/**
+ * @param {React.RefObject|React.RefObject[]} refs - one ref or an array of
+ *   refs; a press inside any of them is "inside". Refs with no node are ignored.
+ * @param {(event: Event) => void} onClickOutside - called with the event.
+ * @param {{ enabled?: boolean }} [options] - `enabled` (default true) attaches
+ *   or detaches the listeners.
+ */
+function useClickOutside(refs, onClickOutside) {
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled;
+  var refsRef = useLatestRef(refs);
+  var handlerRef = useLatestRef(onClickOutside);
+  useEffect(function () {
+    if (!enabled || typeof document === "undefined") return undefined;
+    var handler = function handler(event) {
+      var _handlerRef$current;
+      var current = refsRef.current;
+      var list = Array.isArray(current) ? current : [current];
+      var inside = list.some(function (ref) {
+        var node = ref === null || ref === void 0 ? void 0 : ref.current;
+        return Boolean(node && typeof node.contains === "function" && node.contains(event.target));
+      });
+      if (!inside) (_handlerRef$current = handlerRef.current) === null || _handlerRef$current === void 0 || _handlerRef$current.call(handlerRef, event);
+    };
+    var events = outsidePressEvents();
+    events.forEach(function (type) {
+      return document.addEventListener(type, handler, true);
+    });
+    return function () {
+      return events.forEach(function (type) {
+        return document.removeEventListener(type, handler, true);
+      });
+    };
+  }, [enabled, refsRef, handlerRef]);
+}
+
+export { outsidePressEvents, useClickOutside };