@dreamtree-org/twreact-ui 1.3.10 → 2.0.0

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

@@ -142,13 +142,22 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
               onChange = _ref3$field.onChange,
               value = _ref3$field.value,
               ref = _ref3$field.ref;
-            return jsx(Input, _objectSpread2({
+            return jsx(Input, _objectSpread2(_objectSpread2({
               type: type,
               value: value || "",
               onChange: onChange,
               ref: ref,
               helperText: helperText
-            }, commonProps));
+            }, commonProps), {}, {
+              // Input's clear no longer fires a synthetic onChange (2.0), so a
+              // clearable field resets the form value here, then calls the
+              // field's own onClear.
+              onClear: function onClear() {
+                var _commonProps$onClear;
+                onChange("");
+                (_commonProps$onClear = commonProps.onClear) === null || _commonProps$onClear === void 0 || _commonProps$onClear.call(commonProps);
+              }
+            }));
           }
         }, name);
       case "select":

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

@@ -1,11 +1,52 @@
 '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, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId, useRef, useCallback, useState } from 'react';
 import { Search, EyeOff, Eye, X } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
-var _excluded = ["id", "className", "type", "label", "placeholder", "error", "success", "helperText", "disabled", "required", "clearable", "icon", "iconPosition", "onClear", "showCount", "maxLength", "readOnly", "onChange", "value", "defaultValue"];
+var _excluded = ["id", "className", "type", "label", "placeholder", "error", "success", "helperText", "disabled", "required", "clearable", "leftIcon", "rightIcon", "onClear", "showCount", "maxLength", "readOnly", "onChange", "value", "defaultValue", "size", "floatingLabel", "otp"];
+// Field heights. `md` keeps its 40px desktop look and grows to the 44px touch
+// target on coarse pointers (same rule as Select); `lg` is 44px everywhere.
+var SIZE_CLASSES = {
+  sm: "h-8 text-xs",
+  md: "h-10 text-sm leading-10 [@media(pointer:coarse)]:h-11",
+  lg: "h-11 text-base"
+};
+// Taller fields for `floatingLabel`, with top padding so the value sits below
+// the floated label.
+var FLOATING_SIZE_CLASSES = {
+  sm: "h-10 pt-3 text-sm",
+  md: "h-12 pt-4 text-sm",
+  lg: "h-14 pt-5 text-base"
+};
+// Mobile keyboard / autofill hints for native types. Applied only when the
+// caller did not pass the attribute themselves.
+var TYPE_HINTS = {
+  tel: {
+    inputMode: "tel",
+    autoComplete: "tel"
+  },
+  email: {
+    inputMode: "email",
+    autoComplete: "email"
+  },
+  url: {
+    inputMode: "url",
+    autoComplete: "url"
+  },
+  search: {
+    inputMode: "search",
+    enterKeyHint: "search"
+  }
+};
+var OTP_HINTS = {
+  inputMode: "numeric",
+  autoComplete: "one-time-code"
+};
+// Password toggle / clear: real buttons that reach 44×44 on coarse pointers.
+var ADORNMENT_BUTTON = cn("absolute right-1 top-1/2 -translate-y-1/2 inline-flex h-8 w-8 items-center justify-center rounded-md", "text-primary-500 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300", "transition-colors duration-fast ease-standard motion-reduce:transition-none", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", "disabled:cursor-not-allowed disabled:opacity-50", TOUCH_TARGET);
 var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
   var id = props.id,
     className = props.className,
@@ -22,9 +63,8 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     required = _props$required === void 0 ? false : _props$required,
     _props$clearable = props.clearable,
     clearable = _props$clearable === void 0 ? false : _props$clearable,
-    icon = props.icon,
-    _props$iconPosition = props.iconPosition,
-    iconPosition = _props$iconPosition === void 0 ? "left" : _props$iconPosition,
+    leftIcon = props.leftIcon,
+    rightIcon = props.rightIcon,
     onClear = props.onClear,
     _props$showCount = props.showCount,
     showCount = _props$showCount === void 0 ? false : _props$showCount,
@@ -34,7 +74,25 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     onChange = props.onChange,
     value = props.value,
     defaultValue = props.defaultValue,
+    _props$size = props.size,
+    sizeProp = _props$size === void 0 ? "md" : _props$size,
+    _props$floatingLabel = props.floatingLabel,
+    floatingLabel = _props$floatingLabel === void 0 ? false : _props$floatingLabel,
+    _props$otp = props.otp,
+    otp = _props$otp === void 0 ? false : _props$otp,
     rest = _objectWithoutProperties(props, _excluded);
+  // `size` is the field size (sm|md|lg). A numeric value is the native
+  // `<input size>` attribute and is passed through unchanged.
+  var size = SIZE_CLASSES[sizeProp] ? sizeProp : "md";
+  var nativeSize = SIZE_CLASSES[sizeProp] ? undefined : sizeProp;
+  var hints = otp ? OTP_HINTS : TYPE_HINTS[type];
+  var hintProps = {};
+  if (hints) {
+    Object.keys(hints).forEach(function (key) {
+      if (!(key in rest)) hintProps[key] = hints[key];
+    });
+  }
+  var isFloating = Boolean(floatingLabel && label);
   var internalId = useId();
   var inputId = id || "input-".concat(internalId);
   var isSearch = type === "search";
@@ -66,43 +124,40 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     if (!isControlled) setUncontrolledLength(val.length);
     onChange === null || onChange === void 0 || onChange(e);
   };
+  // Clear (2.0, DTUI-65): no synthetic `onChange` event any more. Controlled
+  // fields clear their own `value` in `onClear`; uncontrolled fields clear the
+  // DOM value themselves.
   var handleClear = function handleClear(e) {
     var _localRef$current, _localRef$current$foc;
     e === null || e === void 0 || e.preventDefault();
-    if (isControlled) {
-      // controlled — notify parent
-      onChange === null || onChange === void 0 || onChange({
-        target: {
-          value: ""
-        }
-      });
-    } else if (localRef.current) {
+    if (!isControlled && localRef.current) {
       localRef.current.value = "";
-      // update local state
       setUncontrolledLength(0);
     }
     (_localRef$current = localRef.current) === null || _localRef$current === void 0 || (_localRef$current$foc = _localRef$current.focus) === null || _localRef$current$foc === void 0 || _localRef$current$foc.call(_localRef$current);
     onClear === null || onClear === void 0 || onClear();
   };
   // padding logic: left and right padding depend on icons/buttons visible
-  var leftHasIcon = Boolean(icon && iconPosition === "left") || isSearch;
-  var rightHasIcon = Boolean(icon && iconPosition === "right") || isPassword || clearable && currentLength > 0;
+  var leftHasIcon = Boolean(leftIcon) || isSearch;
+  var showRightIcon = Boolean(rightIcon) && !isPassword && !(clearable && currentLength > 0);
+  var rightHasIcon = showRightIcon || isPassword || clearable && currentLength > 0;
   var paddingClass = cn(leftHasIcon ? "pl-10" : "pl-3", rightHasIcon ? "pr-12" : "pr-3");
-  var baseClasses = cn("w-full rounded-md border bg-white text-sm placeholder-gray-400 disabled:opacity-50", "h-10 leading-10",
-  // consistent height
-  paddingClass, error ? "border-red-500 focus:ring-red-500" : "border-gray-300", success ? "border-green-500 focus:ring-green-500" : "",
-  // Neutral state needs a visible keyboard focus indicator too.
-  !error && !success && "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", className);
+  var baseClasses = cn("w-full rounded-md border bg-surface text-foreground placeholder-gray-400 dark:placeholder-gray-500", "transition-colors duration-fast ease-standard motion-reduce:transition-none", "disabled:cursor-not-allowed disabled:opacity-50", isFloating ? FLOATING_SIZE_CLASSES[size] : SIZE_CLASSES[size],
+  // The floated label replaces the placeholder until the field is focused.
+  isFloating && "peer placeholder-transparent focus:placeholder-gray-400 dark:focus:placeholder-gray-500", paddingClass, "focus:outline-none focus-visible:ring-2", error ? "border-error-500 focus-visible:ring-error-500 dark:border-error-400" : success ? "border-success-500 focus-visible:ring-success-500 dark:border-success-400" : "border-gray-300 focus-visible:ring-primary-500 dark:border-gray-600", className);
+  var labelContent = jsxs(Fragment, {
+    children: [label, required && jsx("span", {
+      className: "text-error-500 ml-1",
+      children: "*"
+    })]
+  });
   var inputType = isPassword && showPassword ? "text" : type;
   return jsxs("div", {
     className: "w-full",
-    children: [label && jsxs("label", {
+    children: [label && !isFloating && jsx("label", {
       htmlFor: inputId,
-      className: "block text-sm font-medium mb-1",
-      children: [label, required && jsx("span", {
-        className: "text-error-500 ml-1",
-        children: "*"
-      })]
+      className: "block text-sm font-medium mb-1 text-foreground",
+      children: labelContent
     }), jsxs("div", {
       className: "relative",
       children: [leftHasIcon && jsx("div", {
@@ -111,14 +166,15 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
           className: "h-4 w-4 text-primary-400"
         }) : jsx("span", {
           className: "text-primary-400",
-          children: icon
+          children: leftIcon
         })
-      }), jsx("input", _objectSpread2({
+      }), jsx("input", _objectSpread2(_objectSpread2({
         id: inputId,
         ref: setRefs,
         type: inputType,
         className: baseClasses,
-        placeholder: placeholder,
+        // :placeholder-shown drives the floating label, so it needs a placeholder.
+        placeholder: isFloating ? placeholder || " " : placeholder,
         disabled: disabled,
         readOnly: readOnly,
         "aria-invalid": !!error,
@@ -126,13 +182,19 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
         maxLength: maxLength,
         onChange: handleChange,
         value: value,
-        defaultValue: defaultValue
-      }, rest)), icon && iconPosition === "right" && !isPassword && !(clearable && currentLength > 0) && jsx("div", {
+        defaultValue: defaultValue,
+        size: nativeSize
+      }, hintProps), rest)), isFloating && jsx("label", {
+        htmlFor: inputId,
+        "data-floating-label": "",
+        className: cn("pointer-events-none absolute top-1 origin-left text-xs font-medium text-muted", leftHasIcon ? "left-10" : "left-3", "transition-[top,transform,font-size,color] duration-fast ease-standard motion-reduce:transition-none", "peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm", "peer-focus:top-1 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:text-primary-600 dark:peer-focus:text-primary-400"),
+        children: labelContent
+      }), showRightIcon && jsx("div", {
         className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none text-primary-400",
-        children: icon
+        children: rightIcon
       }), isPassword && jsx("button", {
         type: "button",
-        className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-primary-500",
+        className: ADORNMENT_BUTTON,
         onClick: function onClick() {
           return setShowPassword(function (s) {
             return !s;
@@ -147,7 +209,7 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
         })
       }), clearable && currentLength > 0 && !isPassword && jsx("button", {
         type: "button",
-        className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-primary-500",
+        className: ADORNMENT_BUTTON,
         onClick: handleClear,
         "aria-label": "Clear input",
         disabled: disabled,
@@ -157,12 +219,12 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
       })]
     }), error && jsx("p", {
       id: "".concat(inputId, "-error"),
-      className: "mt-1 text-sm text-error-600",
+      className: "mt-1 text-sm text-error-600 dark:text-error-400",
       "aria-live": "polite",
       children: error
     }), !error && success && jsx("p", {
       id: "".concat(inputId, "-success"),
-      className: "mt-1 text-sm text-success-600",
+      className: "mt-1 text-sm text-success-600 dark:text-success-400",
       "aria-live": "polite",
       children: success
     }), !error && !success && helperText && jsx("p", {
@@ -170,7 +232,7 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
       className: "mt-1 text-sm text-muted",
       children: helperText
     }), showCount && maxLength && jsxs("div", {
-      className: "mt-1 text-right text-xs text-primary-500",
+      className: "mt-1 text-right text-xs text-primary-500 dark:text-primary-400",
       "aria-hidden": true,
       children: [currentLength, "/", maxLength]
     })]

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

@@ -19,6 +19,14 @@ var sizeToPx = function sizeToPx(size) {
       return 24;
   }
 };
+// Keyframes live in tailwind.config.js (DTUI-48) — no per-instance <style> tag.
+// `speed` reaches the animation through the --dt-loader-speed custom property.
+// Under prefers-reduced-motion the spinner slows right down (it still signals
+// "busy"); the bouncing dots and sliding bar stop.
+var SPIN = "animate-loader-spin motion-reduce:[animation-duration:3s]";
+// Default track colour, dark-safe. A `secondaryColor` prop overrides it inline.
+var TRACK_STROKE = "stroke-black/[0.08] dark:stroke-white/15";
+var TRACK_BG = "bg-black/[0.08] dark:bg-white/15";
 var Loader = /*#__PURE__*/forwardRef(function Loader(_ref, ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? "md" : _ref$size,
@@ -28,8 +36,7 @@ var Loader = /*#__PURE__*/forwardRef(function Loader(_ref, ref) {
     thickness = _ref$thickness === void 0 ? 2.5 : _ref$thickness,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "currentColor" : _ref$color,
-    _ref$secondaryColor = _ref.secondaryColor,
-    secondaryColor = _ref$secondaryColor === void 0 ? "rgba(0,0,0,0.08)" : _ref$secondaryColor,
+    secondaryColor = _ref.secondaryColor,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? "spinner" : _ref$variant,
     _ref$className = _ref.className,
@@ -45,32 +52,29 @@ var Loader = /*#__PURE__*/forwardRef(function Loader(_ref, ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var px = sizeToPx(size);
   var wrapperClass = cn(inline ? "inline-flex" : "flex", "items-center gap-2", className);
-  // animation attributes for SVG rotate
-  var animDur = "".concat(speed, "s");
-  var rotateFrom = reverse ? "360 12 12" : "0 12 12";
-  var rotateTo = reverse ? "0 12 12" : "360 12 12";
+  var rootStyle = _objectSpread2({
+    "--dt-loader-speed": "".concat(speed, "s")
+  }, style);
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
     role: "progressbar",
     "aria-label": ariaLabel,
     className: wrapperClass,
-    style: style
+    style: rootStyle
   }, rest), {}, {
-    children: [jsx("style", {
-      children: "\n        @keyframes loader-bounce {\n          0%, 80%, 100% { transform: translateY(0); opacity: 0.9 }\n          40% { transform: translateY(-6px); opacity: 1 }\n        }\n        @keyframes loader-bar {\n          0% { transform: translateX(-35%); }\n          100% { transform: translateX(135%); }\n        }\n      "
-    }), variant === "spinner" && jsxs("svg", {
+    children: [variant === "spinner" && jsxs("svg", {
       width: px,
       height: px,
       viewBox: "0 0 24 24",
       fill: "none",
-      style: {
-        display: "block"
-      },
+      "aria-hidden": "true",
+      className: cn("block", SPIN, reverse && "[animation-direction:reverse]"),
       xmlns: "http://www.w3.org/2000/svg",
       children: [jsx("circle", {
         cx: "12",
         cy: "12",
         r: 10 - thickness,
+        className: secondaryColor ? undefined : TRACK_STROKE,
         stroke: secondaryColor,
         strokeWidth: thickness
       }), jsx("path", {
@@ -79,60 +83,42 @@ var Loader = /*#__PURE__*/forwardRef(function Loader(_ref, ref) {
         strokeWidth: thickness,
         strokeLinecap: "round",
         strokeLinejoin: "round",
-        strokeDasharray: "24",
-        children: jsx("animateTransform", {
-          attributeName: "transform",
-          attributeType: "XML",
-          type: "rotate",
-          from: rotateFrom,
-          to: rotateTo,
-          dur: animDur,
-          repeatCount: "indefinite"
-        })
+        strokeDasharray: "24"
       })]
     }), variant === "dots" && jsx("div", {
+      className: "inline-flex items-center",
       style: {
-        display: "inline-flex",
-        alignItems: "center",
         gap: Math.max(2, Math.round(px / 8))
       },
       children: [0, 1, 2].map(function (i) {
         return jsx("span", {
           "aria-hidden": true,
+          className: "inline-block rounded-full animate-loader-bounce motion-reduce:animate-none",
           style: {
             width: px / 4,
             height: px / 4,
-            borderRadius: "9999px",
-            display: "inline-block",
             background: color,
-            animation: "loader-bounce ".concat(speed, "s ").concat(i * (speed / 6), "s infinite ease-in-out")
+            animationDelay: "".concat(Math.round(i * speed * 1000 / 6) / 1000, "s")
           }
         }, i);
       })
     }), variant === "bar" && jsx("div", {
       "aria-hidden": true,
-      style: {
+      className: cn("relative overflow-hidden rounded-full", !secondaryColor && TRACK_BG),
+      style: _objectSpread2({
         width: Math.max(72, px * 2.5),
-        height: Math.max(6, px / 6),
-        background: secondaryColor,
-        overflow: "hidden",
-        borderRadius: 9999,
-        position: "relative"
-      },
+        height: Math.max(6, px / 6)
+      }, secondaryColor ? {
+        background: secondaryColor
+      } : {}),
       children: jsx("div", {
+        className: "absolute inset-y-0 left-0 w-[35%] animate-loader-bar motion-reduce:animate-none",
         style: {
-          position: "absolute",
-          left: 0,
-          top: 0,
-          bottom: 0,
-          width: "35%",
-          background: "linear-gradient(90deg, ".concat(color, ", ").concat(secondaryColor, ")"),
-          transform: "translateX(-35%)",
-          animation: "loader-bar ".concat(speed, "s linear infinite")
+          background: "linear-gradient(90deg, ".concat(color, ", ").concat(secondaryColor || "transparent", ")")
         }
       })
     }), text && jsx("span", {
-      className: "text-sm text-primary-500",
+      className: "text-sm text-primary-500 dark:text-primary-400",
       children: text
     })]
   }));

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

@@ -1,10 +1,19 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { forwardRef, useState, cloneElement } from 'react';
+import React, { forwardRef, useState, useId, cloneElement } from 'react';
 import { cn } from '../../utils/cn.js';
+import { PRESS_FEEDBACK, TOUCH_TARGET } from '../../utils/touchTarget.js';
 
-var _excluded = ["value", "onChange", "inputProps", "icon", "iconProps", "iconPosition", "placeholder", "className"];
+var _excluded = ["value", "onChange", "inputProps", "icon", "iconProps", "iconPosition", "placeholder", "fullWidth", "className"];
+// User-facing copy for GeolocationPositionError codes (and "unsupported").
+var LOCATION_ERROR_MESSAGES = {
+  unsupported: "Location isn't available in this browser.",
+  1: "Location permission was denied. Allow it in your browser settings, or type the coordinates.",
+  2: "Your location couldn't be determined. Try again, or type the coordinates.",
+  3: "Finding your location took too long. Try again.",
+  "default": "Couldn't get your location. Try again, or type the coordinates."
+};
 function formatCoords(coords) {
   if (!coords) return "";
   var lat = Number(coords.lat);
@@ -40,6 +49,8 @@ var LocationPicker = /*#__PURE__*/forwardRef(function LocationPicker(_ref, ref)
     iconPosition = _ref$iconPosition === void 0 ? "right" : _ref$iconPosition,
     _ref$placeholder = _ref.placeholder,
     placeholder = _ref$placeholder === void 0 ? "lat, lng" : _ref$placeholder,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(function () {
@@ -48,12 +59,23 @@ var LocationPicker = /*#__PURE__*/forwardRef(function LocationPicker(_ref, ref)
     _useState2 = _slicedToArray(_useState, 2),
     text = _useState2[0],
     setText = _useState2[1];
+  // Geolocation request state, shown in the UI (DTUI-42).
+  var _useState3 = useState("idle"),
+    _useState4 = _slicedToArray(_useState3, 2),
+    status = _useState4[0],
+    setStatus = _useState4[1]; // "idle" | "loading" | "error"
+  var _useState5 = useState(""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    errorMessage = _useState6[0],
+    setErrorMessage = _useState6[1];
+  var messageId = "location-picker-msg-".concat(useId());
+  var loading = status === "loading";
   // Re-sync the text when the external `value` changes (adjust-during-render
   // pattern, avoids a cascading effect render).
-  var _useState3 = useState(value),
-    _useState4 = _slicedToArray(_useState3, 2),
-    prevValue = _useState4[0],
-    setPrevValue = _useState4[1];
+  var _useState7 = useState(value),
+    _useState8 = _slicedToArray(_useState7, 2),
+    prevValue = _useState8[0],
+    setPrevValue = _useState8[1];
   if (value !== prevValue) {
     setPrevValue(value);
     setText(formatCoords(value));
@@ -77,15 +99,22 @@ var LocationPicker = /*#__PURE__*/forwardRef(function LocationPicker(_ref, ref)
       lng: Number(position.coords.longitude)
     };
     setText(formatCoords(coords));
+    setStatus("idle");
+    setErrorMessage("");
     if (typeof onChange === "function") onChange(coords);
   };
   var handleGeoError = function handleGeoError(err) {
     console.error("LocationPicker geolocation error:", err);
+    setStatus("error");
+    setErrorMessage(LOCATION_ERROR_MESSAGES[err === null || err === void 0 ? void 0 : err.code] || LOCATION_ERROR_MESSAGES["default"]);
   };
   var handleIconClick = function handleIconClick(e) {
     var _navigator;
+    if (loading) return;
     if (!((_navigator = navigator) !== null && _navigator !== void 0 && _navigator.geolocation)) {
       console.error("LocationPicker: geolocation not supported in this browser");
+      setStatus("error");
+      setErrorMessage(LOCATION_ERROR_MESSAGES.unsupported);
       if (typeof iconProps.onClick === "function") {
         try {
           iconProps.onClick(e);
@@ -95,6 +124,8 @@ var LocationPicker = /*#__PURE__*/forwardRef(function LocationPicker(_ref, ref)
       }
       return;
     }
+    setStatus("loading");
+    setErrorMessage("");
     navigator.geolocation.getCurrentPosition(handleGeoSuccess, handleGeoError, {
       enableHighAccuracy: true,
       timeout: 10000
@@ -127,33 +158,68 @@ var LocationPicker = /*#__PURE__*/forwardRef(function LocationPicker(_ref, ref)
       strokeWidth: "1.2"
     })]
   });
+  var Spinner = jsxs("svg", {
+    className: "w-4 h-4 animate-spin motion-reduce:animate-none",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    "data-testid": "location-picker-spinner",
+    children: [jsx("circle", {
+      cx: "12",
+      cy: "12",
+      r: "9",
+      stroke: "currentColor",
+      strokeOpacity: "0.25",
+      strokeWidth: "2.5"
+    }), jsx("path", {
+      d: "M21 12a9 9 0 0 0-9-9",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round"
+    })]
+  });
   var iconButton = jsx("button", _objectSpread2(_objectSpread2({
     type: "button",
     onClick: handleIconClick
   }, iconProps), {}, {
     "aria-label": iconProps["aria-label"] || "Use my location",
-    className: "inline-flex items-center justify-center p-1 focus:outline-none ".concat(iconProps.className || ""),
-    children: icon ? /*#__PURE__*/React.isValidElement(icon) ? /*#__PURE__*/cloneElement(icon) : icon : DefaultIcon
+    "aria-busy": loading || undefined,
+    "aria-describedby": status !== "idle" ? messageId : iconProps["aria-describedby"],
+    className: cn("inline-flex items-center justify-center rounded-md p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", "transition-colors duration-fast motion-reduce:transition-none", loading && "cursor-wait", TOUCH_TARGET, PRESS_FEEDBACK, "transition-[color,background-color,border-color,transform]", iconProps.className),
+    children: loading ? Spinner : icon ? /*#__PURE__*/React.isValidElement(icon) ? /*#__PURE__*/cloneElement(icon) : icon : DefaultIcon
   }));
-  var inputPaddingClass = iconPosition === "right" ? "pr-10" : "pl-10";
-  return jsx("div", _objectSpread2(_objectSpread2({
-    className: cn("inline-flex items-center", className)
+  // The 44px touch target is wider than p-1, so leave room for it on coarse pointers.
+  var inputPaddingClass = iconPosition === "right" ? "pr-10 [@media(pointer:coarse)]:pr-12" : "pl-10 [@media(pointer:coarse)]:pl-12";
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    className: cn(fullWidth ? "flex w-full flex-col" : "inline-flex flex-col", className),
+    "data-status": status
   }, rest), {}, {
-    children: jsxs("div", {
-      className: "relative",
+    children: [jsxs("div", {
+      className: cn("relative", fullWidth && "w-full"),
       children: [jsx("input", _objectSpread2(_objectSpread2({
         ref: ref,
         type: "text",
-        placeholder: placeholder
+        placeholder: placeholder,
+        "aria-describedby": status !== "idle" ? messageId : undefined
       }, inputProps), {}, {
         value: text,
         onChange: handleInputChange,
-        className: cn("min-w-[200px] rounded-md border border-gray-300 bg-white py-2 px-3 text-sm placeholder-gray-400 shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500", inputProps.className, inputPaddingClass)
+        className: cn("rounded-md border border-gray-300 bg-white py-2 px-3 text-sm text-gray-900 placeholder-gray-400 shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500", "dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500", "[@media(pointer:coarse)]:text-base", fullWidth ? "w-full" : "min-w-[200px]", status === "error" && "border-error-500 dark:border-error-400", inputProps.className, inputPaddingClass)
       })), jsx("div", {
         className: cn("absolute inset-y-0 flex items-center", iconPosition === "right" ? "right-2" : "left-2"),
         children: iconButton
       })]
-    })
+    }), status === "loading" && jsx("p", {
+      id: messageId,
+      role: "status",
+      className: "mt-1 text-xs text-gray-500 dark:text-gray-400",
+      children: "Finding your location\u2026"
+    }), status === "error" && jsx("p", {
+      id: messageId,
+      role: "alert",
+      className: "mt-1 text-xs text-error-600 dark:text-error-400",
+      children: errorMessage
+    })]
   }));
 });
 LocationPicker.displayName = "LocationPicker";