@dreamtree-org/twreact-ui 1.3.10 → 1.3.11

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/utility/Avatar.js

@@ -6,6 +6,15 @@ 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,
@@ -33,14 +42,7 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setImgFailed(false);
   }
   var showImage = Boolean(src) && !imgFailed;
-  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 sizes = AVATAR_SIZES;
   var getInitials = function getInitials(name) {
     if (!name) return '';
     return name.split(' ').map(function (word) {
@@ -49,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'
   };
@@ -65,7 +67,7 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref,
     className: "relative inline-block",
     children: [jsx("div", _objectSpread2(_objectSpread2({
-      className: cn('flex items-center justify-center bg-gray-100 text-primary-600 font-medium', sizes[size], {
+      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'
@@ -93,10 +95,10 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         })
       })
     })), 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 };

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

@@ -1,10 +1,33 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { cn } from '../../utils/cn.js';
 
-var _excluded = ["children", "variant", "size", "rounded", "className"];
+var _excluded = ["children", "variant", "size", "rounded", "dot", "icon", "max", "className"];
+// Light: 100 fill + 800 text (≥4.5:1). Dark: a tinted 900 fill + 200 text.
+var variants = {
+  "default": 'bg-gray-100 text-primary-800 dark:bg-gray-800 dark:text-gray-100',
+  primary: 'bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-200',
+  secondary: 'bg-secondary-100 text-secondary-800 dark:bg-secondary-800 dark:text-secondary-100',
+  success: 'bg-success-100 text-success-800 dark:bg-success-900/40 dark:text-success-200',
+  warning: 'bg-warning-100 text-warning-800 dark:bg-warning-900/40 dark:text-warning-200',
+  error: 'bg-error-100 text-error-800 dark:bg-error-900/40 dark:text-error-200',
+  info: 'bg-info-100 text-info-800 dark:bg-info-900/40 dark:text-info-200',
+  outline: 'border border-gray-300 text-gray-700 dark:border-gray-600 dark:text-gray-200'
+};
+var sizes = {
+  xs: 'px-1.5 py-px text-xs',
+  sm: 'px-2 py-0.5 text-xs',
+  md: 'px-2.5 py-0.5 text-sm',
+  lg: 'px-3 py-1 text-base',
+  xl: 'px-3.5 py-1 text-lg',
+  '2xl': 'px-4 py-1.5 text-xl'
+};
+// A numeric count above `max` reads `${max}+` (e.g. 99+).
+var formatCount = function formatCount(children, max) {
+  return typeof children === 'number' && typeof max === 'number' && children > max ? "".concat(max, "+") : children;
+};
 var Badge = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     _ref$variant = _ref.variant,
@@ -13,34 +36,31 @@ var Badge = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref$size === void 0 ? 'md' : _ref$size,
     _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? true : _ref$rounded,
+    _ref$dot = _ref.dot,
+    dot = _ref$dot === void 0 ? false : _ref$dot,
+    icon = _ref.icon,
+    max = _ref.max,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
-  var variants = {
-    "default": 'bg-gray-100 text-primary-800',
-    primary: 'bg-primary-100 text-primary-800',
-    secondary: 'bg-secondary-100 text-secondary-800',
-    success: 'bg-success-100 text-success-800',
-    warning: 'bg-warning-100 text-warning-800',
-    error: 'bg-error-100 text-error-800',
-    info: 'bg-info-100 text-info-800',
-    outline: 'border border-gray-300'
-  };
-  var sizes = {
-    xs: 'px-1.5 py-px text-xs',
-    sm: 'px-2 py-0.5 text-xs',
-    md: 'px-2.5 py-0.5 text-sm',
-    lg: 'px-3 py-1 text-base',
-    xl: 'px-3.5 py-1 text-lg',
-    '2xl': 'px-4 py-1.5 text-xl'
-  };
-  return jsx("span", _objectSpread2(_objectSpread2({
+  var hasLead = dot || Boolean(icon);
+  return jsxs("span", _objectSpread2(_objectSpread2({
     ref: ref,
     className: cn('inline-flex items-center font-medium', variants[variant], sizes[size] || sizes.md, {
       'rounded-full': rounded,
-      'rounded-md': !rounded
+      'rounded-md': !rounded,
+      'gap-1': hasLead
     }, className)
   }, props), {}, {
-    children: children
+    children: [dot && jsx("span", {
+      className: "h-1.5 w-1.5 shrink-0 rounded-full bg-current",
+      "aria-hidden": "true",
+      "data-slot": "dot"
+    }), icon && jsx("span", {
+      className: "inline-flex h-3.5 w-3.5 shrink-0 items-center",
+      "aria-hidden": "true",
+      "data-slot": "icon",
+      children: icon
+    }), formatCount(children, max)]
   }));
 });
 Badge.displayName = 'Badge';

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

@@ -1,26 +1,50 @@
 'use client';
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { cn } from '../../utils/cn.js';
+import { PRESS_FEEDBACK } from '../../utils/touchTarget.js';
 
-var _excluded = ["children", "className", "hover"],
+var _excluded = ["children", "className", "hover", "interactive", "onClick", "onKeyDown"],
   _excluded2 = ["children", "className"],
   _excluded3 = ["children", "className"],
   _excluded4 = ["children", "className"],
   _excluded5 = ["children", "className"],
   _excluded6 = ["children", "className"];
+// Interactive cards: hover lift, press shrink and a keyboard focus ring. The
+// transition list covers both the shadow and the press transform.
+var INTERACTIVE_CLASSES = cn('cursor-pointer hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900', PRESS_FEEDBACK, 'transition-[box-shadow,transform] duration-fast ease-standard motion-reduce:transition-none');
 var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$hover = _ref.hover,
     hover = _ref$hover === void 0 ? false : _ref$hover,
+    _ref$interactive = _ref.interactive,
+    interactive = _ref$interactive === void 0 ? false : _ref$interactive,
+    onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown,
     props = _objectWithoutProperties(_ref, _excluded);
+  // A clickable interactive card with no role of its own becomes a keyboard
+  // operable button (Tab to it, Enter / Space to activate).
+  var actsAsButton = interactive && typeof onClick === 'function' && props.role === undefined;
+  var handleKeyDown = function handleKeyDown(e) {
+    onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+    if (!actsAsButton || e.defaultPrevented || e.target !== e.currentTarget) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onClick(e);
+    }
+  };
   return jsx("div", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('rounded-lg border border-line bg-surface shadow-sm', {
-      'hover:shadow-md transition-shadow': hover
-    }, className)
+    role: actsAsButton ? 'button' : undefined,
+    tabIndex: actsAsButton ? 0 : undefined,
+    onClick: onClick,
+    onKeyDown: actsAsButton ? handleKeyDown : onKeyDown,
+    "data-interactive": interactive || undefined,
+    className: cn('rounded-card border border-line bg-surface shadow-sm', _defineProperty({
+      'hover:shadow-md transition-shadow': hover && !interactive
+    }, INTERACTIVE_CLASSES, interactive), className)
   }, props), {}, {
     children: children
   }));
@@ -31,7 +55,7 @@ var CardHeader = function CardHeader(_ref2) {
     className = _ref2.className,
     props = _objectWithoutProperties(_ref2, _excluded2);
   return jsx("div", _objectSpread2(_objectSpread2({
-    className: cn('px-6 py-4 border-b border-line', className)
+    className: cn('px-4 sm:px-6 py-4 border-b border-line', className)
   }, props), {}, {
     children: children
   }));
@@ -61,7 +85,7 @@ var CardContent = function CardContent(_ref5) {
     className = _ref5.className,
     props = _objectWithoutProperties(_ref5, _excluded5);
   return jsx("div", _objectSpread2(_objectSpread2({
-    className: cn('px-6 py-4', className)
+    className: cn('px-4 sm:px-6 py-4', className)
   }, props), {}, {
     children: children
   }));
@@ -71,7 +95,7 @@ var CardFooter = function CardFooter(_ref6) {
     className = _ref6.className,
     props = _objectWithoutProperties(_ref6, _excluded6);
   return jsx("div", _objectSpread2(_objectSpread2({
-    className: cn('px-6 py-4 border-t border-line', className)
+    className: cn('px-4 sm:px-6 py-4 border-t border-line', className)
   }, props), {}, {
     children: children
   }));