@dreamtree-org/twreact-ui 1.3.9 → 1.3.11

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";