@dreamtree-org/twreact-ui 1.3.10 → 2.0.0

package/dist/esm/components/rich-text/RichTextToolbar.js

@@ -4,6 +4,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React, { useState, useRef, useEffect } from 'react';
 import { Redo, Undo, Link, SquareCode, Quote, ListOrdered, List, Heading3, Heading2, Heading1, Code, Strikethrough, Italic, Bold } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
 var isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || "");
 var shortcutLabel = function shortcutLabel(keys) {
@@ -285,9 +286,23 @@ function LinkForm(_ref) {
   });
 }
 var formButton = "h-8 rounded-md px-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:text-gray-200 dark:hover:bg-gray-800";
+// Keeps the editor selection when a toolbar button is pressed. `pointerdown`
+// covers touch and pen (iOS drops the selection on a plain tap otherwise);
+// `mousedown` stays for desktop browsers that move focus on mousedown even
+// when pointerdown was cancelled.
+var keepSelection = function keepSelection(e) {
+  return e.preventDefault();
+};
+/** `top` offset for a sticky toolbar: `true` → 0, a number → px, a string → any CSS length. */
+function stickyTop(sticky) {
+  if (typeof sticky === "number") return "".concat(sticky, "px");
+  if (typeof sticky === "string" && sticky) return sticky;
+  return "0px";
+}
 /**
  * A WAI-ARIA toolbar: one tab stop, arrow keys / Home / End move between the
- * buttons (roving tabindex), toggles report `aria-pressed`.
+ * buttons (roving tabindex), toggles report `aria-pressed`. With `sticky` it
+ * stays pinned to the top of the scrolling page while the content scrolls.
  */
 function RichTextToolbar(_ref2) {
   var editor = _ref2.editor,
@@ -296,7 +311,9 @@ function RichTextToolbar(_ref2) {
     disabled = _ref2.disabled,
     controlsId = _ref2.controlsId,
     _ref2$label = _ref2.label,
-    label = _ref2$label === void 0 ? "Formatting" : _ref2$label;
+    label = _ref2$label === void 0 ? "Formatting" : _ref2$label,
+    _ref2$sticky = _ref2.sticky,
+    sticky = _ref2$sticky === void 0 ? false : _ref2$sticky;
   var _useState5 = useState(0),
     _useState6 = _slicedToArray(_useState5, 2),
     focusIndex = _useState6[0],
@@ -345,7 +362,11 @@ function RichTextToolbar(_ref2) {
       "aria-controls": controlsId,
       "aria-orientation": "horizontal",
       onKeyDown: onKeyDown,
-      className: "flex flex-wrap items-center gap-0.5 border-b border-gray-200 bg-gray-50 px-1 py-1 dark:border-gray-700 dark:bg-gray-800/60",
+      "data-sticky": sticky ? "" : undefined,
+      style: sticky ? {
+        top: stickyTop(sticky)
+      } : undefined,
+      className: cn("flex flex-wrap items-center gap-0.5 border-b border-line bg-background px-1 py-1", sticky && "sticky z-sticky"),
       children: keys.map(function (key, i) {
         var item = TOOLBAR_ITEMS[key];
         var Icon = item.icon;
@@ -354,7 +375,7 @@ function RichTextToolbar(_ref2) {
         var newGroup = i > 0 && TOOLBAR_ITEMS[keys[i - 1]].group !== item.group;
         return jsxs(React.Fragment, {
           children: [newGroup && jsx("span", {
-            className: "mx-1 h-5 w-px bg-gray-300 dark:bg-gray-600",
+            className: "mx-1 h-5 w-px bg-line",
             "aria-hidden": "true"
           }), jsx("button", {
             ref: function ref(node) {
@@ -371,13 +392,12 @@ function RichTextToolbar(_ref2) {
             onFocus: function onFocus() {
               return setFocusIndex(i);
             },
-            onMouseDown: function onMouseDown(e) {
-              return e.preventDefault();
-            },
+            onPointerDown: keepSelection,
+            onMouseDown: keepSelection,
             onClick: function onClick() {
               return activate(key);
             },
-            className: cn("inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-600 transition-colors", "hover:bg-gray-200 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", "disabled:cursor-not-allowed disabled:opacity-50", pressed && "bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300", unavailable && "opacity-40"),
+            className: cn("inline-flex h-8 w-8 items-center justify-center rounded-md text-muted transition-colors duration-fast motion-reduce:transition-none", TOUCH_TARGET, "hover:bg-muted/10 hover:text-foreground", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", "disabled:cursor-not-allowed disabled:opacity-50", pressed && "bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300", unavailable && "opacity-40"),
             children: jsx(Icon, {
               className: "h-4 w-4",
               "aria-hidden": "true"
@@ -394,4 +414,4 @@ function RichTextToolbar(_ref2) {
   });
 }
 
-export { DEFAULT_TOOLBAR, RichTextToolbar, TOOLBAR_ITEMS, normalizeUrl, selectToolbarState };
+export { DEFAULT_TOOLBAR, RichTextToolbar, TOOLBAR_ITEMS, normalizeUrl, selectToolbarState, stickyTop };

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

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

@@ -4,12 +4,29 @@ 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';
+import { TOUCH_TARGET, PRESS_FEEDBACK } from '../../utils/touchTarget.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { useLatestRef } from '../../hooks/useLatestRef.js';
 
-var _excluded = ["children", "autoPlay", "interval", "showDots", "className", "itemClassName", "onMouseEnter", "onMouseLeave"];
+var _excluded = ["children", "autoPlay", "interval", "showDots", "className", "itemClassName", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchStart", "onTouchEnd"];
 // 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";
+// The track is a native horizontal scroller with mandatory snap points, so
+// touch users get momentum swipe for free. The scrollbar is hidden; the arrows,
+// dots and keyboard (focus the track, then arrow keys) are the visible controls.
+var TRACK_CLASSES = "flex overflow-x-auto snap-x snap-mandatory scroll-smooth motion-reduce:scroll-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500";
+function scrollTrackTo(track, slide, behavior) {
+  if (!track || !slide) return;
+  if (typeof track.scrollTo === "function") {
+    track.scrollTo({
+      left: slide.offsetLeft,
+      behavior: behavior
+    });
+  } else {
+    track.scrollLeft = slide.offsetLeft;
+  }
+}
 var Carousel = /*#__PURE__*/React.forwardRef(function Carousel(props, ref) {
   var children = props.children,
     _props$autoPlay = props.autoPlay,
@@ -22,59 +39,146 @@ var Carousel = /*#__PURE__*/React.forwardRef(function Carousel(props, ref) {
     itemClassName = props.itemClassName,
     _onMouseEnter = props.onMouseEnter,
     _onMouseLeave = props.onMouseLeave,
+    _onFocus = props.onFocus,
+    _onBlur = props.onBlur,
+    _onTouchStart = props.onTouchStart,
+    _onTouchEnd = props.onTouchEnd,
     rest = _objectWithoutProperties(props, _excluded);
+  var reducedMotion = useReducedMotion();
   var _React$useState = React.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     currentIndex = _React$useState2[0],
     setCurrentIndex = _React$useState2[1];
   var _React$useState3 = React.useState(false),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    isPaused = _React$useState4[0],
-    setIsPaused = _React$useState4[1];
-  var timerRef = React.useRef(null);
+    hovered = _React$useState4[0],
+    setHovered = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    focusWithin = _React$useState6[0],
+    setFocusWithin = _React$useState6[1];
+  var _React$useState7 = React.useState(false),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    touching = _React$useState8[0],
+    setTouching = _React$useState8[1];
+  var trackRef = React.useRef(null);
+  var slideRefs = React.useRef([]);
+  var indexRef = useLatestRef(currentIndex);
+  var childrenArray = React.Children.toArray(children);
+  var count = childrenArray.length;
+  var goTo = React.useCallback(function (index) {
+    if (count === 0) return;
+    var target = (index % count + count) % count;
+    indexRef.current = target;
+    setCurrentIndex(target);
+    scrollTrackTo(trackRef.current, slideRefs.current[target], reducedMotion ? "auto" : "smooth");
+  }, [count, reducedMotion, indexRef]);
   var next = React.useCallback(function () {
-    setCurrentIndex(function (prevIndex) {
-      return (prevIndex + 1) % React.Children.count(children);
-    });
-  }, [children]);
+    return goTo(indexRef.current + 1);
+  }, [goTo, indexRef]);
   var prev = React.useCallback(function () {
-    var count = React.Children.count(children);
-    setCurrentIndex(function (prevIndex) {
-      return (prevIndex - 1 + count) % count;
+    return goTo(indexRef.current - 1);
+  }, [goTo, indexRef]);
+  // Swipes / native scrolling move the track without going through goTo(), so the
+  // active slide is whichever one is mostly in view.
+  React.useEffect(function () {
+    var track = trackRef.current;
+    if (!track || typeof IntersectionObserver === "undefined") return undefined;
+    var observer = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        if (entry.isIntersecting && entry.intersectionRatio >= 0.6) {
+          var index = Number(entry.target.getAttribute("data-index"));
+          if (!Number.isNaN(index)) setCurrentIndex(index);
+        }
+      });
+    }, {
+      root: track,
+      threshold: [0.6]
     });
-  }, [children]);
+    slideRefs.current.slice(0, count).forEach(function (slide) {
+      return slide && observer.observe(slide);
+    });
+    return function () {
+      return observer.disconnect();
+    };
+  }, [count]);
+  var isPaused = hovered || focusWithin || touching;
+  var isAutoPlaying = autoPlay && !reducedMotion && !isPaused && count > 1;
   React.useEffect(function () {
-    if (autoPlay && !isPaused) {
-      timerRef.current = setInterval(next, interval);
-    }
+    if (!isAutoPlaying) return undefined;
+    var timer = setInterval(next, interval);
     return function () {
-      if (timerRef.current) clearInterval(timerRef.current);
+      return clearInterval(timer);
     };
-  }, [autoPlay, isPaused, next, interval]);
-  var childrenArray = React.Children.toArray(children);
+  }, [isAutoPlaying, next, interval]);
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
+    role: "region",
+    "aria-roledescription": "carousel",
+    "aria-label": "Carousel",
     className: cn("relative overflow-hidden rounded-xl bg-surface border border-line shadow-sm", className),
     onMouseEnter: function onMouseEnter(e) {
-      setIsPaused(true);
+      setHovered(true);
       _onMouseEnter === null || _onMouseEnter === void 0 || _onMouseEnter(e);
     },
     onMouseLeave: function onMouseLeave(e) {
-      setIsPaused(false);
+      setHovered(false);
       _onMouseLeave === null || _onMouseLeave === void 0 || _onMouseLeave(e);
+    },
+    onFocus: function onFocus(e) {
+      setFocusWithin(true);
+      _onFocus === null || _onFocus === void 0 || _onFocus(e);
+    },
+    onBlur: function onBlur(e) {
+      if (!e.currentTarget.contains(e.relatedTarget)) setFocusWithin(false);
+      _onBlur === null || _onBlur === void 0 || _onBlur(e);
+    },
+    onTouchStart: function onTouchStart(e) {
+      setTouching(true);
+      _onTouchStart === null || _onTouchStart === void 0 || _onTouchStart(e);
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      setTouching(false);
+      _onTouchEnd === null || _onTouchEnd === void 0 || _onTouchEnd(e);
+    },
+    onTouchCancel: function onTouchCancel() {
+      return setTouching(false);
     }
   }, rest), {}, {
     children: [jsx("div", {
-      className: "flex transition-transform duration-500 ease-out motion-reduce:transition-none",
-      style: {
-        transform: "translateX(-".concat(currentIndex * 100, "%)")
+      ref: trackRef,
+      className: TRACK_CLASSES,
+      tabIndex: 0,
+      "aria-label": "Slides",
+      "data-carousel-track": "",
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === "ArrowRight") {
+          e.preventDefault();
+          next();
+        } else if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          prev();
+        }
       },
       children: childrenArray.map(function (child, index) {
         return jsx("div", {
-          className: cn("w-full flex-shrink-0 min-w-full", itemClassName),
+          ref: function ref(node) {
+            slideRefs.current[index] = node;
+          },
+          "data-index": index,
+          role: "group",
+          "aria-roledescription": "slide",
+          "aria-label": "".concat(index + 1, " of ").concat(count),
+          className: cn("w-full flex-shrink-0 min-w-full snap-start snap-always", itemClassName),
           children: child
         }, index);
       })
+    }), jsx("div", {
+      className: "sr-only",
+      "aria-live": isAutoPlaying ? "off" : "polite",
+      "aria-atomic": "true",
+      "data-carousel-status": "",
+      children: count > 0 ? "Slide ".concat(currentIndex + 1, " of ").concat(count) : ""
     }), jsx("button", {
       type: "button",
       onClick: prev,
@@ -94,16 +198,22 @@ var Carousel = /*#__PURE__*/React.forwardRef(function Carousel(props, ref) {
         "aria-hidden": "true"
       })
     }), showDots && jsx("div", {
-      className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10",
+      className: "absolute bottom-1 left-1/2 -translate-x-1/2 flex z-10",
       children: childrenArray.map(function (_, index) {
+        var active = currentIndex === index;
         return jsx("button", {
           type: "button",
           onClick: function onClick() {
-            return setCurrentIndex(index);
+            return goTo(index);
           },
-          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"),
+          className: cn("group inline-flex h-11 min-w-11 items-center justify-center rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-inset", PRESS_FEEDBACK),
           "aria-label": "Go to slide ".concat(index + 1),
-          "aria-current": currentIndex === index ? "true" : undefined
+          "aria-current": active ? "true" : undefined,
+          children: jsx("span", {
+            "aria-hidden": "true",
+            "data-carousel-dot": "",
+            className: cn("block h-2 rounded-full transition-all duration-base ease-standard motion-reduce:transition-none", active ? "bg-primary-600 w-6" : "w-2 bg-muted/40 group-hover:bg-muted/70")
+          })
         }, index);
       })
     })]