@multiplatform.one/forms 7.4.0 → 7.5.0

package/dist/jsx/fields/TimeRangeScrubber/index.native.js

@@ -0,0 +1,936 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var TimeRangeScrubber_exports = {};
+__export(TimeRangeScrubber_exports, {
+  AXIS_BAND: () => import_geometry2.AXIS_BAND,
+  DEFAULT_QUICK_RANGES: () => import_geometry2.DEFAULT_QUICK_RANGES,
+  DEFAULT_TRAILING_WINDOW_MS: () => import_geometry2.DEFAULT_TRAILING_WINDOW_MS,
+  TOUCH_HOLD_MS: () => import_geometry2.TOUCH_HOLD_MS,
+  TimeRangeScrubber: () => TimeRangeScrubber,
+  applyQuickRange: () => import_geometry2.applyQuickRange,
+  assertAbsoluteDateRange: () => import_geometry2.assertAbsoluteDateRange,
+  getScrubberGripRenderSize: () => import_geometry2.getScrubberGripRenderSize,
+  resolveScrubberRadius: () => import_geometry2.resolveScrubberRadius
+});
+module.exports = __toCommonJS(TimeRangeScrubber_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_tamagui = require("tamagui");
+var import_fieldLayout = require("../../fieldLayout.native.js");
+var import_FloatingPanel = require("../../FloatingPanel/index.native.js");
+var import_Skeleton = require("../../Skeleton/index.native.js");
+var import_colorRamps = require("../../shared/colorRamps.native.js");
+var import_t = require("../../shared/t.native.js");
+var import_utils = require("../../shared/utils.native.js");
+var import_geometry = require("./geometry.native.js");
+var import_geometry2 = require("./geometry.native.js");
+function _type_of(obj) {
+  "@swc/helpers - typeof";
+
+  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+var ACTIVITY_BAR_HEIGHT = 7;
+function useRadiusStop() {
+  var _ref;
+  var ctx = (0, import_theme.usePresetContext)();
+  return (_ref = ctx === null || ctx === void 0 ? void 0 : ctx.preset.knobs.borderRadius) !== null && _ref !== void 0 ? _ref : import_theme.defaultKnobs.borderRadius;
+}
+function formatClock(date) {
+  return date.toLocaleTimeString(void 0, {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false
+  });
+}
+function formatRangeReadout(range) {
+  if (!(range === null || range === void 0 ? void 0 : range.start) || !range.end) return "";
+  var startText = (0, import_theme.formatAbsoluteDateTime)(range.start, {
+    year: "always",
+    seconds: true,
+    hour12: false
+  });
+  var sameDay = range.start.toDateString() === range.end.toDateString();
+  var endText = sameDay ? formatClock(range.end) : (0, import_theme.formatAbsoluteDateTime)(range.end, {
+    year: "always",
+    seconds: true,
+    hour12: false
+  });
+  var span = (0, import_geometry.formatDurationMs)(range.end.getTime() - range.start.getTime());
+  return `${startText} \u2013 ${endText} \xB7 ${span}`;
+}
+function TimeRangeChip(param) {
+  var {
+    label,
+    selected,
+    disabled,
+    onPress,
+    part = "quick-range",
+    tabIndex = 0
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    height: import_geometry.CHIP_HEIGHT,
+    paddingHorizontal: 7,
+    borderRadius: import_geometry.CHIP_RADIUS,
+    borderWidth: 1,
+    borderColor: selected ? "$color11" : "$borderColor",
+    backgroundColor: selected ? "$color11" : "transparent",
+    justifyContent: "center",
+    alignItems: "center",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    focusable: !disabled,
+    tabIndex: disabled ? -1 : tabIndex,
+    role: "button",
+    "data-part": part,
+    onPress: disabled ? void 0 : onPress,
+    hoverStyle: disabled ? void 0 : {
+      borderColor: "$borderColorHover"
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: 12,
+      lineHeight: 22,
+      color: selected ? "$color1" : "$color11",
+      fontFamily: "$body",
+      children: label
+    })
+  });
+}
+function TimeRangeScrubberControl(param) {
+  var {
+    id,
+    labelText,
+    ariaLabel,
+    disabled,
+    readOnly,
+    hasError,
+    size,
+    sizeToken,
+    transitionToken,
+    value,
+    onChange,
+    windowValue,
+    onWindowChange,
+    scrubTime,
+    onScrub,
+    frames,
+    activity,
+    keys,
+    trailingWindowMs,
+    snapTo,
+    gridStepMs,
+    quickRanges,
+    maxVisibleQuickRanges,
+    now
+  } = param;
+  var _ref, _ref1, _ref2, _ref3, _brush_start, _brush_end, _brush_start1, _brush_start2, _brush_end1, _ref4;
+  var _theme_outlineColor, _value_start, _value_end;
+  if (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
+  var radiusStop = useRadiusStop();
+  var theme = (0, import_tamagui.useTheme)();
+  var reducedMotion = !transitionToken;
+  var gripSize = (0, import_geometry.getScrubberGripRenderSize)(size != null ? String(size) : sizeToken);
+  var gripRadius = (0, import_geometry.resolveScrubberRadius)(radiusStop, gripSize);
+  var handleRadius = (0, import_geometry.resolveScrubberRadius)(radiusStop, Math.min(import_geometry.BRUSH_HANDLE.width, import_geometry.BRUSH_HANDLE.height));
+  var bandRadius = (0, import_geometry.resolveScrubberRadius)(radiusStop, import_geometry.BRUSH_BAND_HEIGHT);
+  var [session, setSession] = (0, import_react2.useState)("idle");
+  var [kbFocus, setKbFocus] = (0, import_react2.useState)(null);
+  var [moreOpen, setMoreOpen] = (0, import_react2.useState)(false);
+  var [announce, setAnnounce] = (0, import_react2.useState)("");
+  var railRef = (0, import_react2.useRef)(null);
+  var dragRoleRef = (0, import_react2.useRef)(null);
+  var liftOriginRef = (0, import_react2.useRef)(null);
+  var holdTimerRef = (0, import_react2.useRef)(null);
+  var rangeRef = (0, import_react2.useRef)(value);
+  rangeRef.current = value;
+  var scrubRef = (0, import_react2.useRef)(scrubTime);
+  scrubRef.current = scrubTime;
+  var windowRef = (0, import_react2.useRef)(windowValue);
+  windowRef.current = windowValue;
+  var transition = (0, import_geometry.resolveScrubberTransition)(session, transitionToken, reducedMotion);
+  var locked = !!(disabled || readOnly);
+  var brush = (value === null || value === void 0 ? void 0 : value.start) && value.end ? value : {
+    start: windowValue.start,
+    end: windowValue.end
+  };
+  var selectedRange = (0, import_geometry.matchingQuickRange)(value, quickRanges);
+  var visibleRanges = quickRanges.slice(0, maxVisibleQuickRanges);
+  var overflowRanges = quickRanges.slice(maxVisibleQuickRanges);
+  var trailingKeys = (0, import_geometry.keysInTrailingWindow)(keys, scrubTime, trailingWindowMs);
+  var frameAt = (0, import_geometry.latestFrameAtOrBefore)(frames, scrubTime);
+  var activityAt = (0, import_geometry.activityUnder)(activity, scrubTime);
+  var fieldThemeOutline = (_ref = (_theme_outlineColor = theme.outlineColor) === null || _theme_outlineColor === void 0 ? void 0 : _theme_outlineColor.val) !== null && _ref !== void 0 ? _ref : "$outlineColor";
+  var focusRing = (0, import_theme.ensureFocusVisibleRing)({
+    outlineColor: fieldThemeOutline,
+    outlineOffset: 2
+  });
+  var emitScrub = (0, import_react2.useCallback)(function (next, nextSession) {
+    var snapped = (0, import_geometry.snapTime)(next, snapTo, {
+      frames,
+      gridStepMs
+    });
+    var clamped = (0, import_geometry.fractionToTime)((0, import_geometry.timeToFraction)(snapped, windowRef.current), windowRef.current);
+    setSession(nextSession);
+    onScrub === null || onScrub === void 0 ? void 0 : onScrub(clamped);
+    return clamped;
+  }, [frames, gridStepMs, onScrub, snapTo]);
+  var emitRange = (0, import_react2.useCallback)(function (next, nextSession) {
+    var clamped = (0, import_geometry.clampRangeToWindow)((0, import_geometry.assertAbsoluteDateRange)(next), windowRef.current);
+    setSession(nextSession);
+    onChange === null || onChange === void 0 ? void 0 : onChange(clamped);
+    return clamped;
+  }, [onChange]);
+  var speak = (0, import_react2.useCallback)(function (message) {
+    setAnnounce(message);
+  }, []);
+  var pointerTime = (0, import_react2.useCallback)(function (clientX) {
+    var rail = railRef.current;
+    if (!rail) return scrubRef.current;
+    var rect = rail.getBoundingClientRect();
+    if (!rect.width) return scrubRef.current;
+    return (0, import_geometry.fractionToTime)((clientX - rect.left) / rect.width, windowRef.current);
+  }, []);
+  var applyDrag = (0, import_react2.useCallback)(function (clientX) {
+    var _rangeRef_current, _current_end, _current_start;
+    var role = dragRoleRef.current;
+    if (!role) return;
+    var next = pointerTime(clientX);
+    if (role === "grip") {
+      var time = emitScrub(next, "drag");
+      speak((0, import_t.t)("Playhead at {{time}}", {
+        time: formatClock(time)
+      }));
+      return;
+    }
+    var current = (_rangeRef_current = rangeRef.current) !== null && _rangeRef_current !== void 0 ? _rangeRef_current : brush;
+    var updated = role === "brush-start" ? {
+      start: next,
+      end: (_current_end = current.end) !== null && _current_end !== void 0 ? _current_end : windowRef.current.end
+    } : {
+      start: (_current_start = current.start) !== null && _current_start !== void 0 ? _current_start : windowRef.current.start,
+      end: next
+    };
+    var range = emitRange(updated, "drag");
+    speak((0, import_t.t)("Range {{start}} to {{end}}", {
+      start: range.start ? formatClock(range.start) : (0, import_t.t)("none"),
+      end: range.end ? formatClock(range.end) : (0, import_t.t)("none")
+    }));
+  }, [brush, emitRange, emitScrub, pointerTime, speak]);
+  (0, import_react2.useEffect)(function () {
+    if (session !== "drag" || !import_tamagui.isWeb) return;
+    var move = function move2(event) {
+      return applyDrag(event.clientX);
+    };
+    var up = function up2() {
+      dragRoleRef.current = null;
+      setSession("idle");
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    return function () {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+  }, [applyDrag, session]);
+  var clearHold = function clearHold2() {
+    if (holdTimerRef.current !== null) {
+      clearTimeout(holdTimerRef.current);
+      holdTimerRef.current = null;
+    }
+  };
+  (0, import_react2.useEffect)(function () {
+    return function () {
+      return clearHold();
+    };
+  }, []);
+  var startPointer = function startPointer2(role, clientX, pointerType) {
+    if (locked) return;
+    clearHold();
+    var begin = function begin2() {
+      dragRoleRef.current = role;
+      applyDrag(clientX);
+    };
+    if (pointerType === "touch") {
+      holdTimerRef.current = setTimeout(begin, import_geometry.TOUCH_HOLD_MS);
+      return;
+    }
+    begin();
+  };
+  var applyQuick = function applyQuick2(range) {
+    if (locked) return;
+    var next = (0, import_geometry.applyQuickRange)(range, now);
+    emitRange(next, "jump");
+    onWindowChange === null || onWindowChange === void 0 ? void 0 : onWindowChange((0, import_geometry.defaultWindow)(now, next));
+    if (next.end) emitScrub(next.end, "jump");
+    setMoreOpen(false);
+    speak((0, import_t.t)("Range {{label}}", {
+      label: range.label
+    }));
+  };
+  var onHandleKey = function onHandleKey2(role, event) {
+    var _rangeRef_current, _current_start, _current_end;
+    if (locked) return;
+    var key = event.key;
+    if (key === " " || key === "Enter") {
+      event.preventDefault();
+      if (liftOriginRef.current) {
+        liftOriginRef.current = null;
+        speak((0, import_t.t)("Dropped"));
+      } else {
+        var _ref5;
+        var _rangeRef_current1;
+        liftOriginRef.current = role === "grip" ? scrubRef.current : (_ref5 = (_rangeRef_current1 = rangeRef.current) === null || _rangeRef_current1 === void 0 ? void 0 : _rangeRef_current1.start) !== null && _ref5 !== void 0 ? _ref5 : scrubRef.current;
+        speak((0, import_t.t)("Lifted"));
+      }
+      return;
+    }
+    if (key === "Escape") {
+      event.preventDefault();
+      var origin = liftOriginRef.current;
+      liftOriginRef.current = null;
+      if (origin) {
+        var _ref12;
+        var _rangeRef_current2;
+        if (role === "grip") emitScrub(origin, "jump");else emitRange({
+          start: origin,
+          end: (_ref12 = (_rangeRef_current2 = rangeRef.current) === null || _rangeRef_current2 === void 0 ? void 0 : _rangeRef_current2.end) !== null && _ref12 !== void 0 ? _ref12 : origin
+        }, "jump");
+        speak((0, import_t.t)("Cancelled"));
+      }
+      return;
+    }
+    if (key === "Home" || key === "End") {
+      event.preventDefault();
+      var target = key === "Home" ? windowRef.current.start : windowRef.current.end;
+      if (role === "grip") {
+        emitScrub(target, "jump");
+        speak((0, import_t.t)("Playhead at {{time}}", {
+          time: formatClock(target)
+        }));
+      } else {
+        var _rangeRef_current3;
+        var current = (_rangeRef_current3 = rangeRef.current) !== null && _rangeRef_current3 !== void 0 ? _rangeRef_current3 : brush;
+        var next = role === "brush-start" ? {
+          start: target,
+          end: current.end
+        } : {
+          start: current.start,
+          end: target
+        };
+        var range = emitRange(next, "jump");
+        speak((0, import_t.t)("Range {{start}} to {{end}}", {
+          start: range.start ? formatClock(range.start) : (0, import_t.t)("none"),
+          end: range.end ? formatClock(range.end) : (0, import_t.t)("none")
+        }));
+      }
+      return;
+    }
+    if (key === "[" || key === "]") {
+      event.preventDefault();
+      var next1 = (0, import_geometry.nearestFrame)(scrubRef.current, frames, key === "]" ? 1 : -1);
+      if (!next1) return;
+      emitScrub(next1, "jump");
+      speak((0, import_t.t)("Playhead at {{time}}", {
+        time: formatClock(next1)
+      }));
+      return;
+    }
+    if (key !== "ArrowLeft" && key !== "ArrowRight" && key !== "ArrowUp" && key !== "ArrowDown") return;
+    event.preventDefault();
+    var direction = key === "ArrowLeft" || key === "ArrowDown" ? -1 : 1;
+    if (role === "grip") {
+      var next2 = (0, import_geometry.stepTime)(scrubRef.current, direction, gridStepMs, event.shiftKey);
+      var time = emitScrub(next2, liftOriginRef.current ? "drag" : "jump");
+      speak((0, import_t.t)("Playhead at {{time}}", {
+        time: formatClock(time)
+      }));
+      return;
+    }
+    var current1 = (_rangeRef_current = rangeRef.current) !== null && _rangeRef_current !== void 0 ? _rangeRef_current : brush;
+    var edge = role === "brush-start" ? (_current_start = current1.start) !== null && _current_start !== void 0 ? _current_start : windowRef.current.start : (_current_end = current1.end) !== null && _current_end !== void 0 ? _current_end : windowRef.current.end;
+    var moved = (0, import_geometry.stepTime)(edge, direction, gridStepMs, event.shiftKey);
+    var next3 = role === "brush-start" ? {
+      start: moved,
+      end: current1.end
+    } : {
+      start: current1.start,
+      end: moved
+    };
+    var range1 = emitRange(next3, liftOriginRef.current ? "drag" : "jump");
+    speak((0, import_t.t)("Range {{start}} to {{end}}", {
+      start: range1.start ? formatClock(range1.start) : (0, import_t.t)("none"),
+      end: range1.end ? formatClock(range1.end) : (0, import_t.t)("none")
+    }));
+  };
+  var leftPct = function leftPct2(time) {
+    return `${(0, import_geometry.timeToFraction)(time, windowValue) * 100}%`;
+  };
+  var gripFocus = kbFocus === "grip" ? focusRing : void 0;
+  var startFocus = kbFocus === "brush-start" ? focusRing : void 0;
+  var endFocus = kbFocus === "brush-end" ? focusRing : void 0;
+  var name = (_ref1 = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : labelText) !== null && _ref1 !== void 0 ? _ref1 : (0, import_t.t)("Time range");
+  var frameStale = frameAt ? (0, import_geometry.formatDurationMs)(scrubTime.getTime() - frameAt.getTime()) : (0, import_t.t)("none");
+  var chips = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    alignItems: "center",
+    gap: 2,
+    flexWrap: "wrap",
+    "data-part": "quick-range-row",
+    children: [visibleRanges.map(function (range, index) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TimeRangeChip, {
+        label: range.label,
+        selected: (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) === range.label,
+        disabled: locked,
+        tabIndex: 4 + index,
+        onPress: function onPress() {
+          return applyQuick(range);
+        }
+      }, range.label);
+    }), overflowRanges.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
+      open: moreOpen,
+      onOpenChange: setMoreOpen,
+      disabled: locked,
+      widthMode: "at-least-trigger",
+      contentPadding: "default",
+      trigger: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TimeRangeChip, {
+        part: "quick-range-more",
+        label: (0, import_t.t)("More"),
+        selected: moreOpen,
+        disabled: locked,
+        onPress: function onPress() {
+          return setMoreOpen(true);
+        }
+      }),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        gap: "$2",
+        "data-part": "quick-range-menu",
+        padding: "$2",
+        children: overflowRanges.map(function (range) {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TimeRangeChip, {
+            label: range.label,
+            selected: (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) === range.label,
+            disabled: locked,
+            onPress: function onPress() {
+              return applyQuick(range);
+            }
+          }, range.label);
+        })
+      })
+    }) : null]
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: 7,
+    width: "100%",
+    id,
+    "data-testid": "time-range-scrubber",
+    opacity: disabled ? 0.5 : 1,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      alignItems: "baseline",
+      gap: "$3",
+      justifyContent: "flex-end",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontFamily: "$mono",
+        fontSize: 12,
+        lineHeight: 22,
+        color: "$color12",
+        "data-part": "readout",
+        "data-start": (_ref2 = value === null || value === void 0 ? void 0 : (_value_start = value.start) === null || _value_start === void 0 ? void 0 : _value_start.toISOString()) !== null && _ref2 !== void 0 ? _ref2 : "",
+        "data-end": (_ref3 = value === null || value === void 0 ? void 0 : (_value_end = value.end) === null || _value_end === void 0 ? void 0 : _value_end.toISOString()) !== null && _ref3 !== void 0 ? _ref3 : "",
+        children: formatRangeReadout(value)
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      alignItems: "center",
+      gap: 7,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        height: import_geometry.CHIP_HEIGHT,
+        width: 28,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: import_geometry.CHIP_RADIUS,
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        cursor: locked ? "not-allowed" : "pointer",
+        tabIndex: -1,
+        role: "button",
+        "aria-label": (0, import_t.t)("Earlier window"),
+        onPress: locked ? void 0 : function () {
+          return onWindowChange === null || onWindowChange === void 0 ? void 0 : onWindowChange((0, import_geometry.nudgeWindow)(windowValue, -1));
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretLeftIcon, {
+          size: 16,
+          color: "currentColor"
+        })
+      }), chips, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        height: import_geometry.CHIP_HEIGHT,
+        width: 28,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: import_geometry.CHIP_RADIUS,
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        cursor: locked ? "not-allowed" : "pointer",
+        tabIndex: -1,
+        role: "button",
+        "aria-label": (0, import_t.t)("Later window"),
+        onPress: locked ? void 0 : function () {
+          return onWindowChange === null || onWindowChange === void 0 ? void 0 : onWindowChange((0, import_geometry.nudgeWindow)(windowValue, 1));
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretRightIcon, {
+          size: 16,
+          color: "currentColor"
+        })
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+      ref: railRef,
+      "data-testid": "trs-rail",
+      position: "relative",
+      width: "100%",
+      minHeight: import_geometry.AXIS_BAND,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        height: 32,
+        position: "relative",
+        marginBottom: 4,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          position: "absolute",
+          left: leftPct(scrubTime),
+          x: "-50%",
+          height: import_geometry.CAP_HEIGHT,
+          paddingHorizontal: 10,
+          borderRadius: import_geometry.CAP_RADIUS,
+          borderWidth: 1,
+          borderColor: "$borderColor",
+          backgroundColor: "$color2",
+          justifyContent: "center",
+          "data-part": "cap",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+            fontFamily: "$mono",
+            fontSize: 12,
+            lineHeight: 22,
+            color: "$color12",
+            children: [formatClock(scrubTime), frameAt ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              color: "$color11",
+              children: `  ${(0, import_t.t)("frame")} \u2212${frameStale}`
+            }) : null]
+          })
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+        position: "relative",
+        height: import_geometry.AXIS_BAND,
+        "data-part": "frames-lane",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: "50%",
+          height: 1,
+          backgroundColor: "$color5",
+          y: -0.5
+        }), activity.length === 0 && frames.length === 0 ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          position: "absolute",
+          left: 0,
+          width: `${(0, import_geometry.timeToFraction)(windowValue.end, windowValue) * 100}%`,
+          top: "50%",
+          height: 1,
+          backgroundColor: "$color7",
+          y: -0.5
+        }), frames.map(function (frame) {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            position: "absolute",
+            left: leftPct(frame),
+            width: import_geometry.FRAME_TICK.width,
+            height: import_geometry.FRAME_TICK.height,
+            top: "50%",
+            marginTop: -import_geometry.FRAME_TICK.height,
+            backgroundColor: "$color11",
+            borderRadius: 0,
+            "data-part": "frame-tick"
+          }, frame.toISOString());
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          position: "absolute",
+          left: leftPct((_brush_start = brush.start) !== null && _brush_start !== void 0 ? _brush_start : windowValue.start),
+          width: `${Math.max(0, (0, import_geometry.timeToFraction)((_brush_end = brush.end) !== null && _brush_end !== void 0 ? _brush_end : windowValue.end, windowValue) - (0, import_geometry.timeToFraction)((_brush_start1 = brush.start) !== null && _brush_start1 !== void 0 ? _brush_start1 : windowValue.start, windowValue)) * 100}%`,
+          top: "50%",
+          marginTop: -import_geometry.BRUSH_BAND_HEIGHT / 2,
+          height: import_geometry.BRUSH_BAND_HEIGHT,
+          backgroundColor: import_colorRamps.formInputColors.background.focus,
+          borderRadius: bandRadius,
+          "data-part": "brush-band",
+          "data-radius-class": "binary",
+          "data-radius": String(bandRadius)
+        }), [["brush-start", (_brush_start2 = brush.start) !== null && _brush_start2 !== void 0 ? _brush_start2 : windowValue.start, startFocus], ["brush-end", (_brush_end1 = brush.end) !== null && _brush_end1 !== void 0 ? _brush_end1 : windowValue.end, endFocus]].map(function (param2) {
+          var [part, time, ring] = param2;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            position: "absolute",
+            left: leftPct(time),
+            x: "-50%",
+            top: "50%",
+            marginTop: -import_geometry.BRUSH_HANDLE.height / 2,
+            width: import_geometry.BRUSH_HANDLE.width,
+            height: import_geometry.BRUSH_HANDLE.height,
+            backgroundColor: "$color11",
+            borderRadius: handleRadius,
+            cursor: locked ? "not-allowed" : "ew-resize",
+            zIndex: 4,
+            tabIndex: locked ? -1 : part === "brush-start" ? 2 : 3,
+            role: "slider",
+            "aria-label": part === "brush-start" ? (0, import_t.t)("Range start") : (0, import_t.t)("Range end"),
+            "aria-valuemin": windowValue.start.getTime(),
+            "aria-valuemax": windowValue.end.getTime(),
+            "aria-valuenow": time.getTime(),
+            "aria-disabled": disabled || void 0,
+            "aria-readonly": readOnly || void 0,
+            "aria-invalid": hasError || void 0,
+            "data-part": part,
+            "data-radius-class": "binary",
+            "data-radius": String(handleRadius),
+            "data-session": session,
+            "data-transition": transition,
+            hitSlop: (0, import_geometry.rectHitSlop)(import_geometry.BRUSH_HANDLE.width, import_geometry.BRUSH_HANDLE.height),
+            ...ring,
+            onFocus: function onFocus() {
+              if (import_tamagui.isWeb && (0, import_theme.wasKeyboardFocus)()) setKbFocus(part);
+            },
+            onBlur: function onBlur() {
+              return setKbFocus(function (prev) {
+                return prev === part ? null : prev;
+              });
+            },
+            onKeyDown: function onKeyDown(event) {
+              return onHandleKey(part, event);
+            },
+            onPointerDown: function onPointerDown(event) {
+              if (import_tamagui.isWeb) setKbFocus(null);
+              startPointer(part, event.clientX, event.pointerType);
+            },
+            onPointerMove: function onPointerMove(event) {
+              if (dragRoleRef.current === part) applyDrag(event.clientX);
+            },
+            onPointerUp: clearHold,
+            onPointerCancel: clearHold
+          }, part);
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          position: "absolute",
+          left: leftPct(scrubTime),
+          x: "-50%",
+          top: 0,
+          bottom: 0,
+          width: import_geometry.PLAYHEAD_WIDTH,
+          backgroundColor: "$color12",
+          zIndex: 3,
+          "data-part": "playhead"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          position: "absolute",
+          left: leftPct(scrubTime),
+          x: "-50%",
+          top: "50%",
+          marginTop: -gripSize / 2,
+          width: gripSize,
+          height: gripSize,
+          borderRadius: gripRadius,
+          borderWidth: 2,
+          borderColor: "$color11",
+          backgroundColor: "$color12",
+          shadowOpacity: 0,
+          ...(import_tamagui.isWeb ? {
+            boxShadow: "none"
+          } : void 0),
+          cursor: locked ? "not-allowed" : "grab",
+          zIndex: 5,
+          tabIndex: locked ? -1 : 1,
+          role: "slider",
+          "aria-label": (0, import_t.t)("{{name}} playhead", {
+            name
+          }),
+          "aria-valuemin": windowValue.start.getTime(),
+          "aria-valuemax": windowValue.end.getTime(),
+          "aria-valuenow": scrubTime.getTime(),
+          "aria-disabled": disabled || void 0,
+          "aria-readonly": readOnly || void 0,
+          "aria-invalid": hasError || void 0,
+          "data-part": "grip",
+          "data-radius-class": "binary",
+          "data-radius": String(gripRadius),
+          "data-session": session,
+          "data-transition": transition,
+          hitSlop: (0, import_theme.pressTargetHitSlop)(gripSize),
+          transition,
+          ...gripFocus,
+          onFocus: function onFocus() {
+            if (import_tamagui.isWeb && (0, import_theme.wasKeyboardFocus)()) setKbFocus("grip");
+          },
+          onBlur: function onBlur() {
+            return setKbFocus(function (prev) {
+              return prev === "grip" ? null : prev;
+            });
+          },
+          onKeyDown: function onKeyDown(event) {
+            return onHandleKey("grip", event);
+          },
+          onPointerDown: function onPointerDown(event) {
+            if (import_tamagui.isWeb) setKbFocus(null);
+            startPointer("grip", event.clientX, event.pointerType);
+          },
+          onPointerMove: function onPointerMove(event) {
+            if (dragRoleRef.current === "grip") applyDrag(event.clientX);
+          },
+          onPointerUp: clearHold,
+          onPointerCancel: clearHold
+        })]
+      }), activity.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        position: "relative",
+        height: 21,
+        "data-part": "activity-lane",
+        "data-activity": (_ref4 = activityAt === null || activityAt === void 0 ? void 0 : activityAt.label) !== null && _ref4 !== void 0 ? _ref4 : activityAt ? "active" : "",
+        children: activity.map(function (span) {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            position: "absolute",
+            left: leftPct(span.start),
+            width: `${Math.max(0, (0, import_geometry.timeToFraction)(span.end, windowValue) - (0, import_geometry.timeToFraction)(span.start, windowValue)) * 100}%`,
+            top: "50%",
+            marginTop: -ACTIVITY_BAR_HEIGHT / 2,
+            height: ACTIVITY_BAR_HEIGHT,
+            backgroundColor: "$color6",
+            borderRadius: 0,
+            "data-part": "activity"
+          }, `${span.start.toISOString()}-${span.end.toISOString()}`);
+        })
+      }) : null, keys.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        position: "relative",
+        height: 28,
+        "data-part": "keys-lane",
+        children: keys.map(function (key) {
+          var inside = trailingKeys.some(function (item) {
+            return item.getTime() === key.getTime();
+          });
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            position: "absolute",
+            left: leftPct(key),
+            width: import_geometry.KEY_TICK.width,
+            height: import_geometry.KEY_TICK.height,
+            top: 7,
+            backgroundColor: "$color11",
+            opacity: inside ? 1 : 0.45,
+            borderRadius: 0,
+            "data-part": "key-tick"
+          }, key.toISOString());
+        })
+      }) : null]
+    }), import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      style: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        overflow: "hidden",
+        clip: "rect(0 0 0 0)"
+      },
+      children: announce
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      accessibilityLiveRegion: "polite",
+      children: announce
+    })]
+  });
+}
+function TimeRangeScrubber(param) {
+  var {
+    name,
+    form: formProp,
+    validators,
+    label,
+    labelProps,
+    helperText,
+    error,
+    required,
+    disabled,
+    readOnly,
+    size,
+    id: idProp,
+    skeleton,
+    compact,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    onBlur,
+    window: windowProp,
+    onWindowChange,
+    scrubTime: scrubProp,
+    defaultScrubTime,
+    onScrub,
+    frames = [],
+    activity = [],
+    keys = [],
+    trailingWindow = import_geometry.DEFAULT_TRAILING_WINDOW_MS,
+    snapTo = "none",
+    gridStepMs = 1e3,
+    quickRanges = import_geometry.DEFAULT_QUICK_RANGES,
+    maxVisibleQuickRanges = Number.POSITIVE_INFINITY,
+    now: nowProp,
+    "aria-label": ariaLabel
+  } = param;
+  var {
+    resolvedForm,
+    knobProps,
+    id
+  } = (0, import_utils.useFormField)({
+    form: formProp,
+    id: idProp,
+    compact
+  });
+  var resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name, function (value2) {
+    if (value2 == null) return true;
+    if ((typeof value2 === "undefined" ? "undefined" : _type_of(value2)) !== "object") return true;
+    var range = value2;
+    return range.start == null && range.end == null;
+  });
+  var now = nowProp !== null && nowProp !== void 0 ? nowProp : /* @__PURE__ */new Date();
+  var [internalValue, setInternalValue] = (0, import_react2.useState)(function () {
+    var _ref;
+    return (_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : null;
+  });
+  var [internalWindow, setInternalWindow] = (0, import_react2.useState)(function () {
+    var _ref;
+    return windowProp !== null && windowProp !== void 0 ? windowProp : (0, import_geometry.defaultWindow)(now, (_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : null);
+  });
+  var [internalScrub, setInternalScrub] = (0, import_react2.useState)(function () {
+    var _ref, _ref1, _ref2;
+    var _this;
+    return (_ref = (_ref1 = scrubProp !== null && scrubProp !== void 0 ? scrubProp : defaultScrubTime) !== null && _ref1 !== void 0 ? _ref1 : (_this = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) === null || _this === void 0 ? void 0 : _this.end) !== null && _ref !== void 0 ? _ref : (windowProp !== null && windowProp !== void 0 ? windowProp : (0, import_geometry.defaultWindow)(now, (_ref2 = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : null)).end;
+  });
+  (0, import_react2.useEffect)(function () {
+    if (valueProp === void 0) return;
+    setInternalValue(valueProp);
+  }, [valueProp]);
+  (0, import_react2.useEffect)(function () {
+    if (windowProp === void 0) return;
+    setInternalWindow(windowProp);
+  }, [windowProp]);
+  (0, import_react2.useEffect)(function () {
+    if (scrubProp == null) return;
+    setInternalScrub(scrubProp);
+  }, [scrubProp]);
+  var value = valueProp !== void 0 ? valueProp : internalValue;
+  var windowValue = windowProp !== null && windowProp !== void 0 ? windowProp : internalWindow;
+  var scrubTime = scrubProp !== null && scrubProp !== void 0 ? scrubProp : internalScrub;
+  var liveTransition = knobProps.transition ? String(knobProps.transition) : void 0;
+  var handleChange = function handleChange2(next, fieldChange) {
+    if (valueProp === void 0) setInternalValue(next);
+    fieldChange === null || fieldChange === void 0 ? void 0 : fieldChange(next);
+    onChange === null || onChange === void 0 ? void 0 : onChange(next);
+  };
+  var handleWindow = function handleWindow2(next) {
+    if (windowProp === void 0) setInternalWindow(next);
+    onWindowChange === null || onWindowChange === void 0 ? void 0 : onWindowChange(next);
+  };
+  var handleScrub = function handleScrub2(next) {
+    if (scrubProp === void 0) setInternalScrub(next);
+    onScrub === null || onScrub === void 0 ? void 0 : onScrub(next);
+  };
+  if (skeleton) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      size,
+      knobProps,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: import_geometry.AXIS_BAND
+      })
+    });
+  }
+  var control = function control2(current, fieldChange, fieldBlur, hasError) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TimeRangeScrubberControl, {
+      id,
+      labelText: typeof label === "string" ? label : void 0,
+      ariaLabel,
+      disabled,
+      readOnly,
+      hasError,
+      size,
+      sizeToken: String(knobProps.sizeToken),
+      transitionToken: liveTransition,
+      value: current,
+      onChange: function onChange2(next) {
+        return handleChange(next, fieldChange);
+      },
+      windowValue,
+      onWindowChange: handleWindow,
+      scrubTime,
+      onScrub: handleScrub,
+      frames,
+      activity,
+      keys,
+      trailingWindowMs: trailingWindow,
+      snapTo,
+      gridStepMs,
+      quickRanges,
+      maxVisibleQuickRanges,
+      now
+    });
+  };
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error,
+      required,
+      helperText,
+      size,
+      knobProps,
+      disabled,
+      onBlur,
+      children: control(value, void 0, onBlur, !!error)
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
+    form: resolvedForm,
+    name,
+    defaultValue,
+    validators: resolvedValidators,
+    children: function children(field) {
+      var _ref;
+      var resolvedError = (0, import_utils.getFieldError)(field, error);
+      var fieldValue = (_ref = valueProp !== void 0 ? valueProp : field.state.value) !== null && _ref !== void 0 ? _ref : null;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError,
+        required,
+        helperText,
+        size,
+        knobProps,
+        disabled,
+        children: control(fieldValue, function (next) {
+          return field.handleChange(next);
+        }, (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur), !!resolvedError)
+      });
+    }
+  });
+}
+//# sourceMappingURL=index.native.js.map