@multiplatform.one/forms 7.23.1 → 7.24.0

package/dist/cjs/fields/TimeRangeScrubber/index.cjs

@@ -481,185 +481,187 @@ function TimeRangeScrubberControl({
       position: "relative",
       width: "100%",
       minHeight: import_geometry.AXIS_BAND,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-        height: import_geometry.CAP_HEIGHT,
-        position: "relative",
-        marginBottom: 4,
-        width: "100%",
-        onLayout: event => setCapTrackWidth(event.nativeEvent.layout.width),
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-          position: "absolute",
-          left: capLeft ?? `${scrubFraction * 100}%`,
-          x: capLeft == null ? "-50%" : 0,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: 4,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
           height: import_geometry.CAP_HEIGHT,
-          paddingHorizontal: 10,
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "center",
-          overflow: "hidden",
-          maxHeight: import_geometry.CAP_HEIGHT,
-          borderRadius: import_geometry.CAP_RADIUS,
-          borderWidth: 1,
-          borderColor: "$borderColor",
-          backgroundColor: "$color2",
-          onLayout: event => setCapWidth(event.nativeEvent.layout.width),
-          "data-part": "cap",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontFamily: "$mono",
-            fontSize: 12,
-            lineHeight: 16,
-            color: "$color12",
-            numberOfLines: 1,
-            ellipsizeMode: "clip",
-            whiteSpace: "nowrap",
-            children: formatClock(scrubTime)
+          position: "relative",
+          width: "100%",
+          onLayout: event => setCapTrackWidth(event.nativeEvent.layout.width),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            position: "absolute",
+            left: capLeft ?? `${scrubFraction * 100}%`,
+            x: capLeft == null ? "-50%" : 0,
+            height: import_geometry.CAP_HEIGHT,
+            paddingHorizontal: 10,
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            overflow: "hidden",
+            maxHeight: import_geometry.CAP_HEIGHT,
+            borderRadius: import_geometry.CAP_RADIUS,
+            borderWidth: 1,
+            borderColor: "$borderColor",
+            backgroundColor: "$color2",
+            onLayout: event => setCapWidth(event.nativeEvent.layout.width),
+            "data-part": "cap",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontFamily: "$mono",
+              fontSize: 12,
+              lineHeight: 16,
+              color: "$color12",
+              numberOfLines: 1,
+              ellipsizeMode: "clip",
+              whiteSpace: "nowrap",
+              children: formatClock(scrubTime)
+            })
           })
-        })
-      }), /* @__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(frame => /* @__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 ?? windowValue.start),
-          width: `${Math.max(0, (0, import_geometry.timeToFraction)(brush.end ?? windowValue.end, windowValue) - (0, import_geometry.timeToFraction)(brush.start ?? 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.start ?? windowValue.start, startFocus], ["brush-end", brush.end ?? windowValue.end, endFocus]].map(([part, time, ring]) => /* @__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: () => {
-            if (import_tamagui.isWeb && (0, import_theme.wasKeyboardFocus)()) setKbFocus(part);
-          },
-          onBlur: () => setKbFocus(prev => prev === part ? null : prev),
-          onKeyDown: event => onHandleKey(part, event),
-          onPointerDown: event => {
-            if (import_tamagui.isWeb) setKbFocus(null);
-            startPointer(part, event.clientX, event.pointerType);
-          },
-          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: () => {
-            if (import_tamagui.isWeb && (0, import_theme.wasKeyboardFocus)()) setKbFocus("grip");
-          },
-          onBlur: () => setKbFocus(prev => prev === "grip" ? null : prev),
-          onKeyDown: event => onHandleKey("grip", event),
-          onPointerDown: event => {
-            if (import_tamagui.isWeb) setKbFocus(null);
-            startPointer("grip", event.clientX, event.pointerType);
-          },
-          onPointerMove: event => {
-            if (dragRoleRef.current === "grip") applyDrag(event.clientX);
-          },
-          onPointerUp: clearHold,
-          onPointerCancel: clearHold
+        }), /* @__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(frame => /* @__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%",
+            y: -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 ?? windowValue.start),
+            width: `${Math.max(0, (0, import_geometry.timeToFraction)(brush.end ?? windowValue.end, windowValue) - (0, import_geometry.timeToFraction)(brush.start ?? windowValue.start, windowValue)) * 100}%`,
+            top: "50%",
+            y: -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.start ?? windowValue.start, startFocus], ["brush-end", brush.end ?? windowValue.end, endFocus]].map(([part, time, ring]) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            position: "absolute",
+            left: leftPct(time),
+            x: "-50%",
+            top: "50%",
+            y: -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: () => {
+              if (import_tamagui.isWeb && (0, import_theme.wasKeyboardFocus)()) setKbFocus(part);
+            },
+            onBlur: () => setKbFocus(prev => prev === part ? null : prev),
+            onKeyDown: event => onHandleKey(part, event),
+            onPointerDown: event => {
+              if (import_tamagui.isWeb) setKbFocus(null);
+              startPointer(part, event.clientX, event.pointerType);
+            },
+            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%",
+            y: -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: () => {
+              if (import_tamagui.isWeb && (0, import_theme.wasKeyboardFocus)()) setKbFocus("grip");
+            },
+            onBlur: () => setKbFocus(prev => prev === "grip" ? null : prev),
+            onKeyDown: event => onHandleKey("grip", event),
+            onPointerDown: event => {
+              if (import_tamagui.isWeb) setKbFocus(null);
+              startPointer("grip", event.clientX, event.pointerType);
+            },
+            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",
@@ -671,7 +673,7 @@ function TimeRangeScrubberControl({
           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,
+          y: -ACTIVITY_BAR_HEIGHT / 2,
           height: ACTIVITY_BAR_HEIGHT,
           backgroundColor: "$color6",
           borderRadius: 0,