@multiplatform.one/forms 7.23.1 → 7.24.0

package/dist/jsx/utils/LinkCell.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call"],"sources":["../../../src/utils/LinkCell.tsx"],"sourcesContent":[null],"mappings":"AAQA,YAAS;;AAmBE,IAAAA,SAAA,GAAAC,MAAA,CAAAC,cAAA;AARJ,IAAAC,gBAAoB,GAAAF,MAAO,CAAAG,wBAAyD;AACzF,IAAAC,iBAAwB,GAAAJ,MAAA,CAAAK,mBAAA;AACxB,IAAAC,YAAI,GAAAN,MAAA,CAAAO,SAAA,CAAAC,cAAA;AACF,IAAAC,QAAO,GAAAA,CAAAC,MAAA,EAAaC,GAAA,KAAK;EAC3B,SAAQC,IAAA,IAAAD,GAAA,EACNZ,SAAO,CAAAW,MAAA,EAAAE,IAAA;IAAAC,GAAA,EAAAF,GAAA,CAAAC,IAAA;IAAAE,UAAA;EAAA;AAAA;AAET,IAAAC,WAAY,GAAAA,CAAAC,EAAM,EAAAC,IAAA,EAAAC,MAAA,EAAAC,IAAA;EAChB,IAAAF,IAAA,IAAO,OAAAA,IAAA,aAAC,IAAK,OAAaA,IAAA,KAAS;IACrC,SAAAG,GAAA,IAAAhB,iBAAA,CAAAa,IAAA,GACA,IAAO,CAAAX,YAAA,CAAAe,IAAA,CAAAL,EAAA,EAAAI,GAAA,KAAAA,GAAA,KAAAF,MAAA,EACTnB,SAAA,CAAAiB,EAAA,EAAAI,GAAA;MAAAP,GAAA,EAAAA,CAAA,KAAAI,IAAA,CAAAG,GAAA;MAAAN,UAAA,IAAAK,IAAA,GAAAjB,gBAAA,CAAAe,IAAA,EAAAG,GAAA,MAAAD,IAAA,CAAAL;IAAA","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","LinkCell_exports","LinkCell","module","exports","import_jsx_runtime","require","import_router","param","linkResolver","children","href","unused","jsx","Link"],"sources":["LinkCell.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar LinkCell_exports = {};\n__export(LinkCell_exports, {\n  LinkCell: () => LinkCell\n});\nmodule.exports = __toCommonJS(LinkCell_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_router = require(\"@multiplatform.one/router\");\nfunction LinkCell(param) {\n  var { value, linkResolver, children } = param;\n  var href = null;\n  try {\n    href = linkResolver(value);\n  } catch (unused) {\n    return children;\n  }\n  if (href != null) {\n    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_router.Link, {\n      href,\n      children\n    });\n  }\n  return children;\n}\n//# sourceMappingURL=LinkCell.js.map\n"],"mappings":"AAAA,YAAY;;AACZ,IAAIA,SAAS,GAAGC,MAAM,CAACC,cAAc;AACrC,IAAIC,gBAAgB,GAAGF,MAAM,CAACG,wBAAwB;AACtD,IAAIC,iBAAiB,GAAGJ,MAAM,CAACK,mBAAmB;AAClD,IAAIC,YAAY,GAAGN,MAAM,CAACO,SAAS,CAACC,cAAc;AAClD,IAAIC,QAAQ,GAAGA,CAACC,MAAM,EAAEC,GAAG,KAAK;EAC9B,KAAK,IAAIC,IAAI,IAAID,GAAG,EAClBZ,SAAS,CAACW,MAAM,EAAEE,IAAI,EAAE;IAAEC,GAAG,EAAEF,GAAG,CAACC,IAAI,CAAC;IAAEE,UAAU,EAAE;EAAK,CAAC,CAAC;AACjE,CAAC;AACD,IAAIC,WAAW,GAAGA,CAACC,EAAE,EAAEC,IAAI,EAAEC,MAAM,EAAEC,IAAI,KAAK;EAC5C,IAAIF,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,IAAI,OAAOA,IAAI,KAAK,UAAU,EAAE;IAClE,KAAK,IAAIG,GAAG,IAAIhB,iBAAiB,CAACa,IAAI,CAAC,EACrC,IAAI,CAACX,YAAY,CAACe,IAAI,CAACL,EAAE,EAAEI,GAAG,CAAC,IAAIA,GAAG,KAAKF,MAAM,EAC/CnB,SAAS,CAACiB,EAAE,EAAEI,GAAG,EAAE;MAAEP,GAAG,EAAEA,CAAA,KAAMI,IAAI,CAACG,GAAG,CAAC;MAAEN,UAAU,EAAE,EAAEK,IAAI,GAAGjB,gBAAgB,CAACe,IAAI,EAAEG,GAAG,CAAC,CAAC,IAAID,IAAI,CAACL;IAAW,CAAC,CAAC;EACxH;EACA,OAAOE,EAAE;AACX,CAAC;AACD,IAAIM,YAAY,GAAIC,GAAG,IAAKR,WAAW,CAAChB,SAAS,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE;EAAEyB,KAAK,EAAE;AAAK,CAAC,CAAC,EAAED,GAAG,CAAC;AAC1F,IAAIE,gBAAgB,GAAG,CAAC,CAAC;AACzBhB,QAAQ,CAACgB,gBAAgB,EAAE;EACzBC,QAAQ,EAAEA,CAAA,KAAMA;AAClB,CAAC,CAAC;AACFC,MAAM,CAACC,OAAO,GAAGN,YAAY,CAACG,gBAAgB,CAAC;AAC/C,IAAII,kBAAkB,GAAGC,OAAO,CAAC,mBAAmB,CAAC;AACrD,IAAIC,aAAa,GAAGD,OAAO,CAAC,2BAA2B,CAAC;AACxD,SAASJ,QAAQA,CAACM,KAAK,EAAE;EACvB,IAAI;IAAER,KAAK;IAAES,YAAY;IAAEC;EAAS,CAAC,GAAGF,KAAK;EAC7C,IAAIG,IAAI,GAAG,IAAI;EACf,IAAI;IACFA,IAAI,GAAGF,YAAY,CAACT,KAAK,CAAC;EAC5B,CAAC,CAAC,OAAOY,MAAM,EAAE;IACf,OAAOF,QAAQ;EACjB;EACA,IAAIC,IAAI,IAAI,IAAI,EAAE;IAChB,OAAO,eAAgB,CAAC,CAAC,EAAEN,kBAAkB,CAACQ,GAAG,EAAEN,aAAa,CAACO,IAAI,EAAE;MACrEH,IAAI;MACJD;IACF,CAAC,CAAC;EACJ;EACA,OAAOA,QAAQ;AACjB","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/forms",
-  "version": "7.23.1",
+  "version": "7.24.0",
   "description": "Cross-platform form components with URL state management",
   "keywords": [
     "cross-platform",
@@ -57,10 +57,10 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
-    "@multiplatform.one/platform": "7.23.1",
-    "@multiplatform.one/router": "7.23.1",
-    "@multiplatform.one/table-primitives": "7.23.1",
-    "@multiplatform.one/theme": "7.23.1",
+    "@multiplatform.one/platform": "7.24.0",
+    "@multiplatform.one/router": "7.24.0",
+    "@multiplatform.one/table-primitives": "7.24.0",
+    "@multiplatform.one/theme": "7.24.0",
     "@phosphor-icons/react": "^2.1.10",
     "@tamagui/get-font-sized": "2.7.6",
     "@tamagui/get-token": "2.7.6",
@@ -79,9 +79,9 @@
     "tamagui": "2.7.6"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.23.1",
-    "@multiplatform.one/storybook": "7.23.1",
-    "@multiplatform.one/test-utils": "7.23.1",
+    "@multiplatform.one/config": "7.24.0",
+    "@multiplatform.one/storybook": "7.24.0",
+    "@multiplatform.one/test-utils": "7.24.0",
     "@tamagui/build": "2.7.6",
     "@tamagui/config": "2.7.6",
     "@tamagui/vite-plugin": "2.7.6",

package/src/AdaptivePopup/AdaptivePopup.stories.tsx

@@ -149,9 +149,9 @@ export const Fullscreen: Story = {
           size="fullscreen"
           trigger={<Button>Open Fullscreen</Button>}
         >
-          <YStack flex={1} backgroundColor="$color3" borderRadius="$2" padding="$4">
+          <YStack flex={1} backgroundColor="$color3" borderRadius="$2" padding="$4" gap="$2">
             <Text>This content fills the available space.</Text>
-            <Text color="$color9" marginTop="$2">
+            <Text color="$color9">
               Great for maps, image viewers, or any content that benefits from more space.
             </Text>
           </YStack>

package/src/ContextualSaveBar/index.tsx

@@ -304,7 +304,7 @@ export function ContextualSaveBar({
               data-mp-savebar-actions=""
               alignItems="center"
               {...knobProps.gap}
-              marginLeft="auto"
+              alignSelf={copy.failed ? "flex-end" : undefined}
               flexShrink={0}
             >
               <Button

package/src/DescriptionList/index.tsx

@@ -258,7 +258,7 @@ function DescriptionListRowView({
         <TermText>{row.term}</TermText>
       </View>
       {action ? <View style={actionStyle}>{action}</View> : null}
-      <View style={valueStyle} marginTop={rhythm.stackGap as never}>
+      <View style={valueStyle} paddingTop={rhythm.stackGap as never}>
         <ValueSlot row={row} />
       </View>
     </>

package/src/Form/Form.stories.tsx

@@ -828,7 +828,9 @@ export const AllFields = () => {
           />
         </FormGrid>
 
-        <Separator marginTop="$4" />
+        <YStack paddingTop="$4">
+          <Separator />
+        </YStack>
         <H3>Multi-line Fields</H3>
         <FormGrid columns={2}>
           <TextArea
@@ -888,7 +890,9 @@ export const AllFields = () => {
           />
         </FormGrid>
 
-        <Separator marginTop="$4" />
+        <YStack paddingTop="$4">
+          <Separator />
+        </YStack>
         <H3>Full-width Fields</H3>
         <YStack gap="$4">
           {/* Rich-text form integration is covered by the rich-text package's
@@ -946,7 +950,9 @@ export const AllFields = () => {
           />
         </YStack>
 
-        <Separator marginTop="$4" />
+        <YStack paddingTop="$4">
+          <Separator />
+        </YStack>
         <Button action="submit">Submit All Fields</Button>
       </YStack>
     </Form>

package/src/FormGrid.stories.tsx

@@ -77,10 +77,8 @@ export const ChildCounts: Story = {
 export const NarrowContainer: Story = {
   name: "Narrow container (collapses to 1)",
   render: () => (
-    <YStack maxWidth={280} borderWidth={1} borderColor="$borderColor" padding="$2">
-      <Paragraph size="$2" marginBottom="$2">
-        columns=2 inside 280px → must render as 1 column
-      </Paragraph>
+    <YStack maxWidth={280} borderWidth={1} borderColor="$borderColor" padding="$2" gap="$2">
+      <Paragraph size="$2">columns=2 inside 280px → must render as 1 column</Paragraph>
       <FormGrid columns={2}>
         <GridField id="fgn-a" label="Cramped field one" />
         <GridField id="fgn-b" label="Cramped field two" />

package/src/fields/ColorPicker/index.tsx

@@ -598,16 +598,16 @@ function ColorPickerControl({
     const displayValue = value || selectedColor || placeholder;
     return (
       <InputParts.Box theme={hasError ? "error" : undefined}>
-        <View
-          width={CHIP_PX[knobProps.size] ?? 18}
-          height={CHIP_PX[knobProps.size] ?? 18}
-          borderRadius={binaryRadius(knobProps.pointy, CHIP_PX[knobProps.size] ?? 18)}
-          borderWidth={1}
-          borderColor="$color10"
-          marginInlineStart="$2"
-          alignSelf="center"
-          backgroundColor={displayValue || "transparent"}
-        />
+        <View paddingInlineStart="$2" alignSelf="center">
+          <View
+            width={CHIP_PX[knobProps.size] ?? 18}
+            height={CHIP_PX[knobProps.size] ?? 18}
+            borderRadius={binaryRadius(knobProps.pointy, CHIP_PX[knobProps.size] ?? 18)}
+            borderWidth={1}
+            borderColor="$color10"
+            backgroundColor={displayValue || "transparent"}
+          />
+        </View>
         <InputParts.Area
           value={displayValue}
           readOnly

package/src/fields/PhoneInput/index.tsx

@@ -385,13 +385,14 @@ export function PhoneInput<
             }}
           />
           {inTableCell ? null : (
-            <View
-              data-testid="phone-divider"
-              width={1}
-              alignSelf="stretch"
-              marginVertical="$1.5"
-              backgroundColor={formCommonColors.divider}
-            />
+            <View alignSelf="stretch" paddingVertical="$1.5">
+              <View
+                data-testid="phone-divider"
+                width={1}
+                flexGrow={1}
+                backgroundColor={formCommonColors.divider}
+              />
+            </View>
           )}
         </View>
       </InputParts.Section>

package/src/fields/TimeRangeScrubber/index.tsx

@@ -629,203 +629,204 @@ function TimeRangeScrubberControl({
         width="100%"
         minHeight={AXIS_BAND}
       >
-        <XStack
-          height={CAP_HEIGHT}
-          position="relative"
-          marginBottom={4}
-          width="100%"
-          onLayout={(event) => setCapTrackWidth(event.nativeEvent.layout.width)}
-        >
-          <View
-            position="absolute"
-            left={capLeft ?? `${scrubFraction * 100}%`}
-            x={capLeft == null ? "-50%" : 0}
+        <YStack gap={4}>
+          <XStack
             height={CAP_HEIGHT}
-            paddingHorizontal={10}
-            flexDirection="row"
-            alignItems="center"
-            justifyContent="center"
-            overflow="hidden"
-            maxHeight={CAP_HEIGHT}
-            borderRadius={CAP_RADIUS}
-            borderWidth={1}
-            borderColor="$borderColor"
-            backgroundColor="$color2"
-            onLayout={(event) => setCapWidth(event.nativeEvent.layout.width)}
-            data-part="cap"
+            position="relative"
+            width="100%"
+            onLayout={(event) => setCapTrackWidth(event.nativeEvent.layout.width)}
           >
-            <Text
-              fontFamily="$mono"
-              fontSize={12}
-              lineHeight={16}
-              color="$color12"
-              numberOfLines={1}
-              ellipsizeMode="clip"
-              whiteSpace="nowrap"
+            <View
+              position="absolute"
+              left={capLeft ?? `${scrubFraction * 100}%`}
+              x={capLeft == null ? "-50%" : 0}
+              height={CAP_HEIGHT}
+              paddingHorizontal={10}
+              flexDirection="row"
+              alignItems="center"
+              justifyContent="center"
+              overflow="hidden"
+              maxHeight={CAP_HEIGHT}
+              borderRadius={CAP_RADIUS}
+              borderWidth={1}
+              borderColor="$borderColor"
+              backgroundColor="$color2"
+              onLayout={(event) => setCapWidth(event.nativeEvent.layout.width)}
+              data-part="cap"
             >
-              {formatClock(scrubTime)}
-            </Text>
-          </View>
-        </XStack>
-        <View position="relative" height={AXIS_BAND} data-part="frames-lane">
-          <View
-            position="absolute"
-            left={0}
-            right={0}
-            top="50%"
-            height={1}
-            backgroundColor="$color5"
-            y={-0.5}
-          />
-          {activity.length === 0 && frames.length === 0 ? null : (
+              <Text
+                fontFamily="$mono"
+                fontSize={12}
+                lineHeight={16}
+                color="$color12"
+                numberOfLines={1}
+                ellipsizeMode="clip"
+                whiteSpace="nowrap"
+              >
+                {formatClock(scrubTime)}
+              </Text>
+            </View>
+          </XStack>
+          <View position="relative" height={AXIS_BAND} data-part="frames-lane">
             <View
               position="absolute"
               left={0}
-              width={`${timeToFraction(windowValue.end, windowValue) * 100}%`}
+              right={0}
               top="50%"
               height={1}
-              backgroundColor="$color7"
+              backgroundColor="$color5"
               y={-0.5}
             />
-          )}
-          {frames.map((frame) => (
+            {activity.length === 0 && frames.length === 0 ? null : (
+              <View
+                position="absolute"
+                left={0}
+                width={`${timeToFraction(windowValue.end, windowValue) * 100}%`}
+                top="50%"
+                height={1}
+                backgroundColor="$color7"
+                y={-0.5}
+              />
+            )}
+            {frames.map((frame) => (
+              <View
+                key={frame.toISOString()}
+                position="absolute"
+                left={leftPct(frame)}
+                width={FRAME_TICK.width}
+                height={FRAME_TICK.height}
+                top="50%"
+                y={-FRAME_TICK.height}
+                backgroundColor="$color11"
+                borderRadius={0}
+                data-part="frame-tick"
+              />
+            ))}
             <View
-              key={frame.toISOString()}
               position="absolute"
-              left={leftPct(frame)}
-              width={FRAME_TICK.width}
-              height={FRAME_TICK.height}
+              left={leftPct(brush.start ?? windowValue.start)}
+              width={`${Math.max(0, timeToFraction(brush.end ?? windowValue.end, windowValue) - timeToFraction(brush.start ?? windowValue.start, windowValue)) * 100}%`}
               top="50%"
-              marginTop={-FRAME_TICK.height}
-              backgroundColor="$color11"
-              borderRadius={0}
-              data-part="frame-tick"
+              y={-BRUSH_BAND_HEIGHT / 2}
+              height={BRUSH_BAND_HEIGHT}
+              backgroundColor={formInputColors.background.focus}
+              borderRadius={bandRadius}
+              data-part="brush-band"
+              data-radius-class="binary"
+              data-radius={String(bandRadius)}
             />
-          ))}
-          <View
-            position="absolute"
-            left={leftPct(brush.start ?? windowValue.start)}
-            width={`${Math.max(0, timeToFraction(brush.end ?? windowValue.end, windowValue) - timeToFraction(brush.start ?? windowValue.start, windowValue)) * 100}%`}
-            top="50%"
-            marginTop={-BRUSH_BAND_HEIGHT / 2}
-            height={BRUSH_BAND_HEIGHT}
-            backgroundColor={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],
-            ] as const
-          ).map(([part, time, ring]) => (
+            {(
+              [
+                ["brush-start", brush.start ?? windowValue.start, startFocus],
+                ["brush-end", brush.end ?? windowValue.end, endFocus],
+              ] as const
+            ).map(([part, time, ring]) => (
+              <View
+                key={part}
+                position="absolute"
+                left={leftPct(time)}
+                x="-50%"
+                top="50%"
+                y={-BRUSH_HANDLE.height / 2}
+                width={BRUSH_HANDLE.width}
+                height={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" ? t("Range start") : t("Range end")}
+                aria-valuemin={windowValue.start.getTime()}
+                aria-valuemax={windowValue.end.getTime()}
+                aria-valuenow={time.getTime()}
+                aria-disabled={disabled || undefined}
+                aria-readonly={readOnly || undefined}
+                aria-invalid={hasError || undefined}
+                data-part={part}
+                data-radius-class="binary"
+                data-radius={String(handleRadius)}
+                data-session={session}
+                data-transition={transition}
+                hitSlop={rectHitSlop(BRUSH_HANDLE.width, BRUSH_HANDLE.height)}
+                {...ring}
+                onFocus={() => {
+                  if (isWeb && wasKeyboardFocus()) setKbFocus(part);
+                }}
+                onBlur={() => setKbFocus((prev) => (prev === part ? null : prev))}
+                onKeyDown={(event) => onHandleKey(part, event as unknown as KeyboardEvent)}
+                onPointerDown={(event) => {
+                  if (isWeb) setKbFocus(null);
+                  startPointer(part, event.clientX, event.pointerType);
+                }}
+                onPointerMove={(event) => {
+                  if (dragRoleRef.current === part) applyDrag(event.clientX);
+                }}
+                onPointerUp={clearHold}
+                onPointerCancel={clearHold}
+              />
+            ))}
             <View
-              key={part}
               position="absolute"
-              left={leftPct(time)}
+              left={leftPct(scrubTime)}
+              x="-50%"
+              top={0}
+              bottom={0}
+              width={PLAYHEAD_WIDTH}
+              backgroundColor="$color12"
+              zIndex={3}
+              data-part="playhead"
+            />
+            <View
+              position="absolute"
+              left={leftPct(scrubTime)}
               x="-50%"
               top="50%"
-              marginTop={-BRUSH_HANDLE.height / 2}
-              width={BRUSH_HANDLE.width}
-              height={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}
+              {...(isWeb ? { boxShadow: "none" } : undefined)}
+              cursor={locked ? "not-allowed" : "grab"}
+              zIndex={5}
+              tabIndex={locked ? -1 : 1}
               role="slider"
-              aria-label={part === "brush-start" ? t("Range start") : t("Range end")}
+              aria-label={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 || undefined}
               aria-readonly={readOnly || undefined}
               aria-invalid={hasError || undefined}
-              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={rectHitSlop(BRUSH_HANDLE.width, BRUSH_HANDLE.height)}
-              {...ring}
+              hitSlop={pressTargetHitSlop(gripSize)}
+              transition={transition}
+              {...gripFocus}
               onFocus={() => {
-                if (isWeb && wasKeyboardFocus()) setKbFocus(part);
+                if (isWeb && wasKeyboardFocus()) setKbFocus("grip");
               }}
-              onBlur={() => setKbFocus((prev) => (prev === part ? null : prev))}
-              onKeyDown={(event) => onHandleKey(part, event as unknown as KeyboardEvent)}
+              onBlur={() => setKbFocus((prev) => (prev === "grip" ? null : prev))}
+              onKeyDown={(event) => onHandleKey("grip", event as unknown as KeyboardEvent)}
               onPointerDown={(event) => {
                 if (isWeb) setKbFocus(null);
-                startPointer(part, event.clientX, event.pointerType);
+                startPointer("grip", event.clientX, event.pointerType);
               }}
               onPointerMove={(event) => {
-                if (dragRoleRef.current === part) applyDrag(event.clientX);
+                if (dragRoleRef.current === "grip") applyDrag(event.clientX);
               }}
               onPointerUp={clearHold}
               onPointerCancel={clearHold}
             />
-          ))}
-          <View
-            position="absolute"
-            left={leftPct(scrubTime)}
-            x="-50%"
-            top={0}
-            bottom={0}
-            width={PLAYHEAD_WIDTH}
-            backgroundColor="$color12"
-            zIndex={3}
-            data-part="playhead"
-          />
-          <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}
-            {...(isWeb ? { boxShadow: "none" } : undefined)}
-            cursor={locked ? "not-allowed" : "grab"}
-            zIndex={5}
-            tabIndex={locked ? -1 : 1}
-            role="slider"
-            aria-label={t("{{name}} playhead", { name })}
-            aria-valuemin={windowValue.start.getTime()}
-            aria-valuemax={windowValue.end.getTime()}
-            aria-valuenow={scrubTime.getTime()}
-            aria-disabled={disabled || undefined}
-            aria-readonly={readOnly || undefined}
-            aria-invalid={hasError || undefined}
-            data-part="grip"
-            data-radius-class="binary"
-            data-radius={String(gripRadius)}
-            data-session={session}
-            data-transition={transition}
-            hitSlop={pressTargetHitSlop(gripSize)}
-            transition={transition}
-            {...gripFocus}
-            onFocus={() => {
-              if (isWeb && wasKeyboardFocus()) setKbFocus("grip");
-            }}
-            onBlur={() => setKbFocus((prev) => (prev === "grip" ? null : prev))}
-            onKeyDown={(event) => onHandleKey("grip", event as unknown as KeyboardEvent)}
-            onPointerDown={(event) => {
-              if (isWeb) setKbFocus(null);
-              startPointer("grip", event.clientX, event.pointerType);
-            }}
-            onPointerMove={(event) => {
-              if (dragRoleRef.current === "grip") applyDrag(event.clientX);
-            }}
-            onPointerUp={clearHold}
-            onPointerCancel={clearHold}
-          />
-        </View>
+          </View>
+        </YStack>
         {activity.length > 0 ? (
           <View
             position="relative"
@@ -840,7 +841,7 @@ function TimeRangeScrubberControl({
                 left={leftPct(span.start)}
                 width={`${Math.max(0, timeToFraction(span.end, windowValue) - 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}

package/types/fields/PhoneInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/PhoneInput/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAgC,MAAM,OAAO,CAAC;AAI1E,OAAO,EAAE,KAAK,EAAsB,MAAM,SAAS,CAAC;AAGpD,OAAO,KAAK,EAAkB,SAAS,EAAE,MAAM,aAAa,CAAC;AAQ7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAKxD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AA4CvD,MAAM,MAAM,eAAe,CACzB,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACrC,KAAK,SAAS,QAAQ,CAAC,WAAW,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,EAC3D,eAAe,SAAS,SAAS,CAAC,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,SAAS,EACjG,cAAc,SAAS,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,SAAS,EAC9E,KAAK,SAAS,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,IACzE,IAAI,CACN,cAAc,CAAC,WAAW,EAAE,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,KAAK,CAAC,EAC1E,UAAU,GAAG,OAAO,GAAG,UAAU,CAClC,GACC,OAAO,CACL,IAAI,CACF,mBAAmB,CAAC,WAAW,EAAE,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,KAAK,CAAC,EAC/E,UAAU,CACX,CACF,GAAG;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,KAAK,CAAC,CAAC;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAoFJ,wBAAgB,UAAU,CACxB,WAAW,EACX,KAAK,SAAS,QAAQ,CAAC,WAAW,CAAC,EACnC,eAAe,SAAS,SAAS,CAAC,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,SAAS,EACjG,cAAc,SAAS,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,SAAS,EAC9E,KAAK,SAAS,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,EAC3E,KAAK,EAAE,eAAe,CAAC,WAAW,EAAE,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,KAAK,CAAC,2CA2TnF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/PhoneInput/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAgC,MAAM,OAAO,CAAC;AAI1E,OAAO,EAAE,KAAK,EAAsB,MAAM,SAAS,CAAC;AAGpD,OAAO,KAAK,EAAkB,SAAS,EAAE,MAAM,aAAa,CAAC;AAQ7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAKxD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AA4CvD,MAAM,MAAM,eAAe,CACzB,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACrC,KAAK,SAAS,QAAQ,CAAC,WAAW,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,EAC3D,eAAe,SAAS,SAAS,CAAC,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,SAAS,EACjG,cAAc,SAAS,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,SAAS,EAC9E,KAAK,SAAS,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,IACzE,IAAI,CACN,cAAc,CAAC,WAAW,EAAE,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,KAAK,CAAC,EAC1E,UAAU,GAAG,OAAO,GAAG,UAAU,CAClC,GACC,OAAO,CACL,IAAI,CACF,mBAAmB,CAAC,WAAW,EAAE,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,KAAK,CAAC,EAC/E,UAAU,CACX,CACF,GAAG;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,KAAK,CAAC,CAAC;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAoFJ,wBAAgB,UAAU,CACxB,WAAW,EACX,KAAK,SAAS,QAAQ,CAAC,WAAW,CAAC,EACnC,eAAe,SAAS,SAAS,CAAC,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,SAAS,EACjG,cAAc,SAAS,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,SAAS,EAC9E,KAAK,SAAS,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,EAC3E,KAAK,EAAE,eAAe,CAAC,WAAW,EAAE,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,KAAK,CAAC,2CA4TnF"}

package/types/fields/TimeRangeScrubber/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/TimeRangeScrubber/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/TimeRangeScrubber/index.tsx"],"names":[],"mappings":"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"}