@multiplatform.one/forms 7.23.1 → 7.24.0

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

@@ -42,8 +42,8 @@ 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_FloatingPanel = require("../../FloatingPanel");
+var import_Skeleton = require("../../Skeleton");
 var import_colorRamps = require("../../shared/colorRamps.native.js");
 var import_t = require("../../shared/t.native.js");
 var import_utils = require("../../shared/utils.native.js");
@@ -522,206 +522,208 @@ function TimeRangeScrubberControl(param) {
       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: function onLayout(event) {
-          return setCapTrackWidth(event.nativeEvent.layout.width);
-        },
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-          position: "absolute",
-          left: capLeft !== null && capLeft !== void 0 ? 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",
+          position: "relative",
+          width: "100%",
           onLayout: function onLayout(event) {
-            return setCapWidth(event.nativeEvent.layout.width);
+            return setCapTrackWidth(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)
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            position: "absolute",
+            left: capLeft !== null && capLeft !== void 0 ? 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: function onLayout(event) {
+              return 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(function (frame) {
-          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        }), /* @__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: leftPct(frame),
-            width: import_geometry.FRAME_TICK.width,
-            height: import_geometry.FRAME_TICK.height,
+            left: 0,
+            right: 0,
             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, {
+            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%",
+              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 = 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%",
+            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_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%",
+              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: 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(time),
+            left: leftPct(scrubTime),
             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,
+            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": part === "brush-start" ? (0, import_t.t)("Range start") : (0, import_t.t)("Range end"),
+            "aria-label": (0, import_t.t)("{{name}} playhead", {
+              name
+            }),
             "aria-valuemin": windowValue.start.getTime(),
             "aria-valuemax": windowValue.end.getTime(),
-            "aria-valuenow": time.getTime(),
+            "aria-valuenow": scrubTime.getTime(),
             "aria-disabled": disabled || void 0,
             "aria-readonly": readOnly || void 0,
             "aria-invalid": hasError || void 0,
-            "data-part": part,
+            "data-part": "grip",
             "data-radius-class": "binary",
-            "data-radius": String(handleRadius),
+            "data-radius": String(gripRadius),
             "data-session": session,
             "data-transition": transition,
-            hitSlop: (0, import_geometry.rectHitSlop)(import_geometry.BRUSH_HANDLE.width, import_geometry.BRUSH_HANDLE.height),
-            ...ring,
+            hitSlop: (0, import_theme.pressTargetHitSlop)(gripSize),
+            transition,
+            ...gripFocus,
             onFocus: function onFocus() {
-              if (import_tamagui.isWeb && (0, import_theme.wasKeyboardFocus)()) setKbFocus(part);
+              if (import_tamagui.isWeb && (0, import_theme.wasKeyboardFocus)()) setKbFocus("grip");
             },
             onBlur: function onBlur() {
               return setKbFocus(function (prev) {
-                return prev === part ? null : prev;
+                return prev === "grip" ? null : prev;
               });
             },
             onKeyDown: function onKeyDown(event) {
-              return onHandleKey(part, event);
+              return onHandleKey("grip", event);
             },
             onPointerDown: function onPointerDown(event) {
               if (import_tamagui.isWeb) setKbFocus(null);
-              startPointer(part, event.clientX, event.pointerType);
+              startPointer("grip", event.clientX, event.pointerType);
             },
             onPointerMove: function onPointerMove(event) {
-              if (dragRoleRef.current === part) applyDrag(event.clientX);
+              if (dragRoleRef.current === "grip") 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",
@@ -734,7 +736,7 @@ function TimeRangeScrubberControl(param) {
             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,