@dreamtree-org/twreact-ui 1.3.9 → 1.3.11

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

@@ -1,10 +1,32 @@
 '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, 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", "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,
@@ -14,83 +36,188 @@ 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,
+    _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);
-  return jsxs("div", {
+  }, [isAutoPlaying, next, interval]);
+  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);
+    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) {
+      setHovered(true);
+      _onMouseEnter === null || _onMouseEnter === void 0 || _onMouseEnter(e);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      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);
     },
-    onMouseLeave: function onMouseLeave() {
-      return setIsPaused(false);
+    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",
-      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,
-      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",
+      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("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("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": 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);
       })
     })]
-  });
+  }));
 });
 Carousel.displayName = "Carousel";
 

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

@@ -1,11 +1,17 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useState, useRef, useCallback } from 'react';
 import { cn } from '../../utils/cn.js';
-import { Upload, X, Image, FileText, File } from 'lucide-react';
+import { Upload, Camera, X, Image, FileText, File } from 'lucide-react';
+import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+import { PRESS_FEEDBACK, TOUCH_TARGET } from '../../utils/touchTarget.js';
 
-var _excluded = ["accept", "multiple", "maxSize", "onFileSelect", "onFileRemove", "files", "disabled", "className"];
+var _excluded = ["accept", "multiple", "maxSize", "onFileSelect", "onFileRemove", "files", "disabled", "capture", "className"];
+var COARSE_POINTER_QUERY = '(pointer: coarse)';
+// PRESS_FEEDBACK sets transition-transform; this keeps the colour transition as well.
+var TRANSITION_WITH_PRESS = 'transition-[color,background-color,border-color,transform]';
+var PICK_BUTTON_CLASSES = 'inline-flex min-h-11 items-center justify-center gap-2 rounded-control border border-line bg-surface px-4 text-sm font-medium text-foreground shadow-xs transition-colors duration-fast hover:bg-background disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900';
 function formatFileSize(bytes) {
   if (bytes === 0) return '0 Bytes';
   var k = 1024;
@@ -24,6 +30,7 @@ var FileUpload = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     files = _ref$files === void 0 ? [] : _ref$files,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    capture = _ref.capture,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
@@ -35,6 +42,9 @@ var FileUpload = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     error = _useState4[0],
     setError = _useState4[1];
   var fileInputRef = useRef(null);
+  var cameraInputRef = useRef(null);
+  // Touch screens have no drag and drop; show explicit pick buttons instead.
+  var isCoarse = useMediaQuery(COARSE_POINTER_QUERY);
   var validateFile = useCallback(function (file) {
     if (maxSize && file.size > maxSize) {
       setError("File size must be less than ".concat(formatFileSize(maxSize)));
@@ -97,20 +107,42 @@ var FileUpload = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 || _fileInputRef$current.click();
     }
   };
+  var openCamera = function openCamera() {
+    if (!disabled) {
+      var _cameraInputRef$curre;
+      (_cameraInputRef$curre = cameraInputRef.current) === null || _cameraInputRef$curre === void 0 || _cameraInputRef$curre.click();
+    }
+  };
+  var handleZoneKeyDown = function handleZoneKeyDown(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      openFileDialog();
+    }
+  };
+  var hint = jsxs("p", {
+    className: "text-xs text-primary-500 dark:text-primary-300 mt-1",
+    children: [accept && "Accepted formats: ".concat(accept), maxSize && " \u2022 Max size: ".concat(formatFileSize(maxSize))]
+  });
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
     className: cn('w-full', className)
   }, props), {}, {
     children: [jsxs("div", {
-      className: cn('relative border-2 border-dashed rounded-lg p-6 text-center transition-colors cursor-pointer', {
-        'border-primary-500 bg-primary-50': isDragOver && !disabled,
-        'border-gray-300 hover:border-gray-400': !isDragOver && !disabled,
-        'border-gray-200 bg-gray-50 cursor-not-allowed': disabled
+      className: cn('relative border-2 border-dashed rounded-lg p-6 text-center transition-colors duration-base motion-reduce:transition-none', {
+        'cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900': !isCoarse && !disabled,
+        'border-primary-500 bg-primary-50 dark:bg-primary-900/20': isDragOver && !disabled,
+        'border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500': !isDragOver && !disabled,
+        'border-gray-200 bg-gray-50 cursor-not-allowed dark:border-gray-700 dark:bg-gray-800/50': disabled
       }),
       onDrop: handleDrop,
       onDragOver: handleDragOver,
       onDragLeave: handleDragLeave,
-      onClick: openFileDialog,
+      onClick: isCoarse ? undefined : openFileDialog,
+      onKeyDown: isCoarse ? undefined : handleZoneKeyDown,
+      role: isCoarse ? undefined : 'button',
+      tabIndex: isCoarse || disabled ? undefined : 0,
+      "aria-disabled": !isCoarse && disabled ? true : undefined,
+      "data-coarse": isCoarse || undefined,
       children: [jsx("input", {
         ref: fileInputRef,
         type: "file",
@@ -118,53 +150,96 @@ var FileUpload = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         multiple: multiple,
         onChange: handleFileInputChange,
         className: "hidden",
-        disabled: disabled
+        disabled: disabled,
+        tabIndex: -1
+      }), capture && jsx("input", {
+        ref: cameraInputRef,
+        type: "file",
+        accept: accept || 'image/*',
+        capture: capture,
+        onChange: handleFileInputChange,
+        className: "hidden",
+        disabled: disabled,
+        tabIndex: -1,
+        "data-capture-input": ""
       }), jsx(Upload, {
         className: cn('mx-auto h-12 w-12', {
           'text-primary-500': !disabled,
           'text-primary-400': disabled
-        })
-      }), jsxs("div", {
+        }),
+        "aria-hidden": "true"
+      }), jsx("div", {
         className: "mt-4",
-        children: [jsx("p", {
-          className: cn('text-sm font-medium', {
-            'text-primary-900': !disabled,
-            'text-primary-500': disabled
-          }),
-          children: isDragOver ? 'Drop files here' : 'Click to upload or drag and drop'
-        }), jsxs("p", {
-          className: "text-xs text-primary-500 mt-1",
-          children: [accept && "Accepted formats: ".concat(accept), maxSize && " \u2022 Max size: ".concat(formatFileSize(maxSize))]
-        })]
+        children: isCoarse ? jsxs(Fragment, {
+          children: [jsxs("div", {
+            className: "flex flex-col items-stretch gap-2 sm:flex-row sm:justify-center",
+            children: [jsxs("button", {
+              type: "button",
+              className: cn(PICK_BUTTON_CLASSES, PRESS_FEEDBACK, TRANSITION_WITH_PRESS),
+              onClick: openFileDialog,
+              disabled: disabled,
+              children: [jsx(Upload, {
+                className: "h-4 w-4",
+                "aria-hidden": "true"
+              }), multiple ? 'Choose files' : 'Choose file']
+            }), capture && jsxs("button", {
+              type: "button",
+              className: cn(PICK_BUTTON_CLASSES, PRESS_FEEDBACK, TRANSITION_WITH_PRESS),
+              onClick: openCamera,
+              disabled: disabled,
+              children: [jsx(Camera, {
+                className: "h-4 w-4",
+                "aria-hidden": "true"
+              }), "Take photo"]
+            })]
+          }), hint]
+        }) : jsxs(Fragment, {
+          children: [jsx("p", {
+            className: cn('text-sm font-medium', {
+              'text-primary-900 dark:text-primary-100': !disabled,
+              'text-primary-500': disabled
+            }),
+            children: isDragOver ? 'Drop files here' : 'Click to upload or drag and drop'
+          }), hint]
+        })
       })]
     }), error && jsx("p", {
-      className: "mt-2 text-sm text-error-500",
+      role: "alert",
+      className: "mt-2 text-sm text-error-600 dark:text-error-400",
       children: error
-    }), files.length > 0 && jsx("div", {
+    }), files.length > 0 && jsx("ul", {
       className: "mt-4 space-y-2",
+      "aria-label": "Selected files",
       children: files.map(function (file, index) {
-        return jsxs("div", {
-          className: "flex items-center justify-between rounded-md border border-gray-200 bg-white p-3",
+        return jsxs("li", {
+          className: "flex items-center justify-between gap-3 rounded-md border border-line bg-surface p-3",
           children: [jsxs("div", {
-            className: "flex items-center space-x-3",
-            children: [getFileIcon(file), jsxs("div", {
+            className: "flex min-w-0 items-center space-x-3",
+            children: [jsx("span", {
+              className: "shrink-0",
+              "aria-hidden": "true",
+              children: getFileIcon(file)
+            }), jsxs("div", {
+              className: "min-w-0",
               children: [jsx("p", {
-                className: "text-sm font-medium text-primary-900",
+                className: "truncate text-sm font-medium text-foreground",
                 children: file.name
               }), jsx("p", {
-                className: "text-xs text-primary-500",
+                className: "text-xs text-muted",
                 children: formatFileSize(file.size)
               })]
             })]
           }), jsx("button", {
             type: "button",
-            className: "rounded-md p-1 text-primary-400 hover:text-primary-600 hover:bg-gray-100",
+            "aria-label": "Remove ".concat(file.name),
+            className: cn('inline-flex shrink-0 items-center justify-center rounded-md p-1 text-muted transition-colors duration-fast hover:text-foreground hover:bg-background disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500', TOUCH_TARGET, PRESS_FEEDBACK, TRANSITION_WITH_PRESS),
             onClick: function onClick() {
               return handleRemoveFile(index);
             },
             disabled: disabled,
             children: jsx(X, {
-              className: "h-4 w-4"
+              className: "h-4 w-4",
+              "aria-hidden": "true"
             })
           })]
         }, index);