@dreamtree-org/twreact-ui 1.3.10 → 1.3.11

package/dist/esm/components/core/Tabs.js

@@ -1,10 +1,19 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { forwardRef, useState, useRef, useId, useEffect, createContext, useContext } from 'react';
+import React, { forwardRef, useState, useRef, useId, useEffect, createContext, useContext, useLayoutEffect } from 'react';
 import { cn } from '../../utils/cn.js';
 
-var _excluded = ["children", "defaultIndex", "index", "onChange", "orientation", "size", "variant", "animated", "className"];
+var _excluded = ["children", "defaultIndex", "index", "onChange", "orientation", "size", "variant", "animated", "swipeable", "className"],
+  _excluded2 = ["children", "className"];
+// useLayoutEffect warns during SSR; fall back to useEffect on the server.
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+// Minimum horizontal travel (px) for a swipe to change tabs, and how much more
+// horizontal than vertical it must be, so vertical page scrolls never switch tabs.
+var SWIPE_THRESHOLD = 50;
+var SWIPE_DOMINANCE = 1.5;
+// Variants whose active state is drawn by the sliding indicator (horizontal only).
+var INDICATOR_VARIANTS = ["line", "segmented"];
 /*
   Tabs.jsx
   - Default export: Tabs (provider wrapper)
@@ -14,7 +23,10 @@ var _excluded = ["children", "defaultIndex", "index", "onChange", "orientation",
   - Controlled / uncontrolled usage
   - Keyboard navigation (Arrow keys, Home, End)
   - ARIA attributes for accessibility
-  - Variants: "line" | "pills" | "unstyled"
+  - Variants: "line" | "pills" | "segmented" | "unstyled"
+  - Horizontal lists scroll with snap; the active tab is kept in view
+  - Animated active indicator for "line" / "segmented" (off under reduced motion)
+  - Optional `swipeable` panels (touch / pen pointer swipes)
   - Sizes: "sm" | "md" | "lg"
   - Simple fade animation
   - Tailwind CSS only
@@ -60,6 +72,8 @@ var Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
     variant = _ref$variant === void 0 ? "line" : _ref$variant,
     _ref$animated = _ref.animated,
     animated = _ref$animated === void 0 ? true : _ref$animated,
+    _ref$swipeable = _ref.swipeable,
+    swipeable = _ref$swipeable === void 0 ? false : _ref$swipeable,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -71,6 +85,12 @@ var Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
   var activeIndex = isControlled ? controlledIndex : internalIndex;
   var tabsRef = useRef([]); // DOM refs for keyboard navigation
   var baseId = useId();
+  // Set by TabList once the sliding indicator has been measured; until then
+  // (SSR, first paint) tabs draw their own active styling.
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    indicatorReady = _useState4[0],
+    setIndicatorReady = _useState4[1];
   var changeTab = function changeTab(idx) {
     if (!isControlled) setActiveIndex(idx);
     onChange === null || onChange === void 0 || onChange(idx);
@@ -87,7 +107,10 @@ var Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
     orientation: orientation,
     size: size,
     variant: variant,
-    animated: animated
+    animated: animated,
+    swipeable: swipeable,
+    indicatorReady: indicatorReady,
+    setIndicatorReady: setIndicatorReady
   };
   return jsx(TabsContext.Provider, {
     value: value,
@@ -101,25 +124,96 @@ var Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
 });
 Tabs.displayName = "Tabs";
 /* ------------------------- TabList ------------------------- */
-function TabList(_ref2) {
+var TabList = /*#__PURE__*/forwardRef(function TabList(_ref2, ref) {
   var children = _ref2.children,
     _ref2$className = _ref2.className,
-    className = _ref2$className === void 0 ? "" : _ref2$className;
+    className = _ref2$className === void 0 ? "" : _ref2$className,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
   var _useTabsContext = useTabsContext("Tabs.List"),
-    orientation = _useTabsContext.orientation;
-  return jsx("div", {
+    orientation = _useTabsContext.orientation,
+    variant = _useTabsContext.variant,
+    activeIndex = _useTabsContext.activeIndex,
+    tabsRef = _useTabsContext.tabsRef,
+    indicatorReady = _useTabsContext.indicatorReady,
+    setIndicatorReady = _useTabsContext.setIndicatorReady;
+  var listRef = useRef(null);
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    indicator = _useState6[0],
+    setIndicator = _useState6[1];
+  var horizontal = orientation !== "vertical";
+  var hasIndicator = horizontal && INDICATOR_VARIANTS.includes(variant);
+  var childCount = React.Children.count(children);
+  var setRefs = function setRefs(node) {
+    listRef.current = node;
+    if (typeof ref === "function") ref(node);else if (ref) ref.current = node;
+  };
+  // Measure the active tab: position the indicator and scroll the tab into view.
+  useIsomorphicLayoutEffect(function () {
+    var list = listRef.current;
+    var tab = tabsRef.current[activeIndex];
+    if (!list || !tab) return undefined;
+    var measure = function measure() {
+      if (horizontal) {
+        var left = tab.offsetLeft;
+        var right = left + tab.offsetWidth;
+        if (left < list.scrollLeft) list.scrollLeft = left;else if (right > list.scrollLeft + list.clientWidth) list.scrollLeft = right - list.clientWidth;
+      }
+      // jsdom / display:none report 0; keep the tabs' own active styling then.
+      if (!hasIndicator || !tab.offsetWidth) return;
+      setIndicator({
+        left: tab.offsetLeft,
+        top: tab.offsetTop,
+        width: tab.offsetWidth,
+        height: tab.offsetHeight
+      });
+      setIndicatorReady(true);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return undefined;
+    var ro = new ResizeObserver(measure);
+    ro.observe(list);
+    ro.observe(tab);
+    return function () {
+      return ro.disconnect();
+    };
+  }, [activeIndex, hasIndicator, horizontal, childCount]); // eslint-disable-line react-hooks/exhaustive-deps
+  // Leaving an indicator variant hands the active styling back to the tabs.
+  useEffect(function () {
+    if (!hasIndicator && indicatorReady) setIndicatorReady(false);
+  }, [hasIndicator, indicatorReady, setIndicatorReady]);
+  var showIndicator = hasIndicator && indicatorReady && indicator;
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: setRefs,
     role: "tablist",
     "aria-orientation": orientation,
-    className: "flex ".concat(orientation === "vertical" ? "flex-col" : "flex-row", " gap-1 ").concat(className),
-    children: React.Children.map(children, function (child, i) {
+    className: cn("relative flex gap-1", horizontal ?
+    // Scroll with snap, scrollbar hidden; native smooth scrolling unless reduced motion.
+    "flex-row overflow-x-auto snap-x snap-mandatory scroll-smooth motion-reduce:scroll-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" : "flex-col", variant === "segmented" && "rounded-lg bg-gray-100 p-1 dark:bg-gray-800", className)
+  }, rest), {}, {
+    children: [showIndicator && jsx("span", {
+      "aria-hidden": "true",
+      "data-tabs-indicator": "",
+      className: cn("pointer-events-none absolute left-0 top-0", "transition-[transform,width,height] duration-base ease-standard motion-reduce:transition-none", variant === "line" ? "bg-primary-500" : "rounded-md bg-surface shadow-sm"),
+      style: variant === "line" ? {
+        width: indicator.width,
+        height: 2,
+        transform: "translate(".concat(indicator.left, "px, ").concat(indicator.top + indicator.height - 2, "px)")
+      } : {
+        width: indicator.width,
+        height: indicator.height,
+        transform: "translate(".concat(indicator.left, "px, ").concat(indicator.top, "px)")
+      }
+    }), React.Children.map(children, function (child, i) {
       var _child$props$index;
       if (! /*#__PURE__*/React.isValidElement(child)) return child;
       return /*#__PURE__*/React.cloneElement(child, {
         index: (_child$props$index = child.props.index) !== null && _child$props$index !== void 0 ? _child$props$index : i
       });
-    })
-  });
-}
+    })]
+  }));
+});
+TabList.displayName = "Tabs.List";
 /* ------------------------- Tab ------------------------- */
 function Tab(_ref3) {
   var children = _ref3.children,
@@ -139,32 +233,45 @@ function Tab(_ref3) {
     tabsRef = _useTabsContext2.tabsRef,
     baseId = _useTabsContext2.baseId,
     size = _useTabsContext2.size,
-    variant = _useTabsContext2.variant;
+    variant = _useTabsContext2.variant,
+    orientation = _useTabsContext2.orientation,
+    indicatorReady = _useTabsContext2.indicatorReady;
   var internalRef = useRef(null);
   // If the user didn't provide `index` we derive from DOM position by registering nulls until mount.
   // However it's recommended to always keep Tabs.Tab order consistent with Panels.
-  useEffect(function () {
+  // Registered from a ref callback (runs at commit, before any layout effect) so
+  // Tabs.List can measure the active tab on mount without a flash.
+  var setTabRef = function setTabRef(el) {
+    internalRef.current = el;
+    if (!el) return;
     // find index in tabsRef if index not provided
-    var idx = typeof index === "number" ? index : tabsRef.current.findIndex(function (el) {
-      return el === internalRef.current;
+    var slot = typeof index === "number" ? index : tabsRef.current.findIndex(function (node) {
+      return node === el;
     });
-    if (idx === -1) idx = tabsRef.current.length; // fallback
-    registerTab(internalRef.current, idx);
-    // ensure the tab has the correct array slot
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    if (slot === -1) slot = tabsRef.current.length; // fallback
+    registerTab(el, slot);
+  };
   // TabList always injects `index`; a Tab rendered outside it is never selected.
   var idx = typeof index === "number" ? index : -1;
   var selected = idx === activeIndex;
   var id = tabId(baseId, idx);
-  var base = "inline-flex items-center gap-2 outline-none select-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1";
+  var horizontal = orientation !== "vertical";
+  // Once the sliding indicator is measured it draws the active state; until then
+  // (SSR / first paint) the tab draws it itself so nothing flashes.
+  var indicatorDraws = indicatorReady && horizontal && INDICATOR_VARIANTS.includes(variant);
+  var base = cn("relative inline-flex items-center gap-2 whitespace-nowrap outline-none select-none", "focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1", "transition-colors duration-fast motion-reduce:transition-none", "disabled:cursor-not-allowed disabled:opacity-50",
+  // The scrolling list clips outside rings, so horizontal tabs draw theirs inset.
+  horizontal && "shrink-0 snap-start focus-visible:ring-inset focus-visible:ring-offset-0");
   var sizeClasses = {
     sm: "px-2 py-1 text-sm",
     md: "px-3 py-2 text-sm",
     lg: "px-4 py-3 text-base"
   };
   var variantClasses = {
-    line: selected ? "border-b-2 border-primary-500" : "border-b-2 border-transparent hover:border-gray-200",
-    pills: selected ? "bg-primary-600 text-white rounded-full shadow-sm" : "bg-transparent rounded-full hover:bg-gray-100",
+    line: selected ? cn("border-b-2", indicatorDraws ? "border-transparent" : "border-primary-500") : "border-b-2 border-transparent hover:border-gray-200 dark:hover:border-gray-700",
+    pills: selected ? "bg-primary-600 text-white rounded-full shadow-sm" : "bg-transparent rounded-full hover:bg-gray-100 dark:hover:bg-gray-800",
+    // iOS-style segmented control: equal-width segments on a tinted track.
+    segmented: cn("z-10 flex-1 justify-center rounded-md font-medium", selected ? cn("text-foreground", !indicatorDraws && "bg-surface shadow-sm") : "text-muted hover:text-foreground"),
     unstyled: ""
   };
   var computedClass = cn(base, sizeClasses[size] || sizeClasses.md, variantClasses[variant], tabClassName, className);
@@ -208,7 +315,7 @@ function Tab(_ref3) {
     }
   };
   return jsxs("button", {
-    ref: internalRef,
+    ref: setTabRef,
     id: id,
     role: "tab",
     "aria-selected": selected,
@@ -237,9 +344,49 @@ function Panels(_ref4) {
     _ref4$className = _ref4.className,
     className = _ref4$className === void 0 ? "" : _ref4$className;
   var _useTabsContext3 = useTabsContext("Tabs.Panels"),
-    animated = _useTabsContext3.animated;
-  return jsx("div", {
-    className: "relative w-full ".concat(className),
+    animated = _useTabsContext3.animated,
+    swipeable = _useTabsContext3.swipeable,
+    activeIndex = _useTabsContext3.activeIndex,
+    changeTab = _useTabsContext3.changeTab,
+    tabsRef = _useTabsContext3.tabsRef;
+  var start = useRef(null);
+  // Next enabled tab in `dir`, or -1 at either end (no wrap-around on swipe).
+  var neighbour = function neighbour(dir) {
+    var tabs = tabsRef.current;
+    for (var i = activeIndex + dir; i >= 0 && i < tabs.length; i += dir) {
+      if (tabs[i] && !tabs[i].disabled) return i;
+    }
+    return -1;
+  };
+  var swipeHandlers = swipeable ? {
+    onPointerDown: function onPointerDown(e) {
+      // Touch and pen only: a mouse drag selects text instead.
+      if (e.pointerType === "mouse" || e.isPrimary === false) return;
+      start.current = {
+        x: e.clientX,
+        y: e.clientY
+      };
+    },
+    onPointerUp: function onPointerUp(e) {
+      var from = start.current;
+      start.current = null;
+      if (!from) return;
+      var dx = e.clientX - from.x;
+      var dy = e.clientY - from.y;
+      if (!Number.isFinite(dx) || !Number.isFinite(dy)) return;
+      if (Math.abs(dx) < SWIPE_THRESHOLD || Math.abs(dx) < Math.abs(dy) * SWIPE_DOMINANCE) return;
+      // Swipe left -> next tab, swipe right -> previous tab.
+      var next = neighbour(dx < 0 ? 1 : -1);
+      if (next !== -1) changeTab(next);
+    },
+    onPointerCancel: function onPointerCancel() {
+      start.current = null;
+    }
+  } : {};
+  return jsx("div", _objectSpread2(_objectSpread2({
+    // touch-pan-y: the browser keeps vertical scrolling; horizontal moves reach us.
+    className: cn("relative w-full", swipeable && "touch-pan-y", className)
+  }, swipeHandlers), {}, {
     children: React.Children.map(children, function (child, i) {
       var _child$props$index2;
       // inject index if missing
@@ -249,7 +396,7 @@ function Panels(_ref4) {
         animated: animated
       });
     })
-  });
+  }));
 }
 function Panel(_ref5) {
   var children = _ref5.children,
@@ -262,10 +409,10 @@ function Panel(_ref5) {
     activeIndex = _useTabsContext4.activeIndex,
     baseId = _useTabsContext4.baseId;
   var isActive = index === activeIndex;
-  var _useState3 = useState(isActive),
-    _useState4 = _slicedToArray(_useState3, 2),
-    wasActive = _useState4[0],
-    setWasActive = _useState4[1];
+  var _useState7 = useState(isActive),
+    _useState8 = _slicedToArray(_useState7, 2),
+    wasActive = _useState8[0],
+    setWasActive = _useState8[1];
   // Remember that the panel has been shown once (adjust-during-render pattern).
   if (isActive && !wasActive) setWasActive(true);
   if (!wasActive && !isActive) return null;

package/dist/esm/components/core/Textarea.js

@@ -6,7 +6,7 @@ import { AlertCircle } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
 import { setRefs } from '../../utils/position.js';
 
-var _excluded = ["id", "className", "label", "error", "helperText", "required", "disabled", "showCount", "maxLength", "autoResize", "rows", "maxRows", "value", "defaultValue", "onChange"];
+var _excluded = ["id", "className", "label", "error", "helperText", "required", "disabled", "showCount", "maxLength", "autoResize", "rows", "maxRows", "value", "defaultValue", "onChange", "size"];
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function fitToContent(el, maxRows) {
   if (!el) return;
@@ -24,6 +24,12 @@ function fitToContent(el, maxRows) {
   }
   el.style.height = "".concat(height, "px");
 }
+// Padding / text per size; `md` is the original look. Rows set the height.
+var SIZE_CLASSES = {
+  sm: "px-2.5 py-1.5 text-xs",
+  md: "px-3 py-2 text-sm",
+  lg: "px-4 py-2.5 text-base"
+};
 var Textarea = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var id = _ref.id,
     className = _ref.className,
@@ -45,6 +51,8 @@ var Textarea = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
     value = _ref.value,
     defaultValue = _ref.defaultValue,
     onChange = _ref.onChange,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "md" : _ref$size,
     rest = _objectWithoutProperties(_ref, _excluded);
   var reactId = useId();
   var textareaId = id || "textarea-".concat(reactId);
@@ -93,7 +101,7 @@ var Textarea = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       onChange: handleChange,
       "aria-invalid": error ? true : undefined,
       "aria-describedby": describedBy,
-      className: cn("block w-full rounded-md border bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400", "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500", "disabled:cursor-not-allowed disabled:opacity-50", "dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500 dark:focus:ring-offset-gray-900", error ? "border-error-500 focus:ring-error-500" : "border-gray-300 dark:border-gray-600", autoResize ? "resize-none" : "resize-y", className)
+      className: cn("block w-full rounded-md border bg-surface text-foreground placeholder-gray-400", SIZE_CLASSES[size] || SIZE_CLASSES.md, "transition-colors duration-fast ease-standard motion-reduce:transition-none", "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", "dark:placeholder-gray-500 dark:focus-visible:ring-offset-gray-900", error ? "border-error-500 focus-visible:ring-error-500 dark:border-error-400" : "border-gray-300 focus-visible:ring-primary-500 dark:border-gray-600", autoResize ? "resize-none" : "resize-y", className)
     })), (error || helperText || showCount && maxLength) && jsxs("div", {
       className: "mt-1 flex items-start justify-between gap-3 text-sm",
       children: [jsxs("div", {

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));
     })