@multiplatform.one/forms 7.4.1 → 7.6.0

package/dist/jsx/fields/TimePicker/parts.native.js

@@ -24,8 +24,8 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var parts_exports = {};
 __export(parts_exports, {
-  ClockDial: () => ClockDial,
   TimePanel: () => TimePanel,
+  TimePickerClearButton: () => TimePickerClearButton,
   TimePickerInputTrigger: () => TimePickerInputTrigger,
   formatTimeDisplay: () => formatTimeDisplay,
   isValidTimeString: () => isValidTimeString,
@@ -36,12 +36,12 @@ __export(parts_exports, {
 });
 module.exports = __toCommonJS(parts_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_lucide_icons_2 = require("@tamagui/lucide-icons-2");
+var import_react = require("@phosphor-icons/react");
 var import_theme = require("@multiplatform.one/theme");
-var import_react = require("react");
 var import_tamagui = require("tamagui");
-var import_InputParts = require("../../InputParts/index.native.js");
+var import_InputParts = require("../../InputParts");
 var import_colorRamps = require("../../shared/colorRamps.native.js");
+var import_TimeColumn = require("../../shared/TimeColumn.native.js");
 var import_t = require("../../shared/t.native.js");
 var timeStringRegex = /^([01]?\d|2[0-3]):[0-5]\d(:[0-5]\d)?$/;
 function isValidTimeString(value) {
@@ -92,416 +92,6 @@ function to12Hour(h24) {
     period: h24 >= 12 ? "PM" : "AM"
   };
 }
-function pad2(n) {
-  return String(n).padStart(2, "0");
-}
-function wrap(n, min, max) {
-  var span = max - min + 1;
-  return min + ((n - min) % span + span) % span;
-}
-function snapToStep(raw, step) {
-  var max = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 59;
-  var size = Math.max(1, step);
-  return wrap(Math.round(raw / size) * size, 0, max);
-}
-function polar(fraction, radius, cell, center) {
-  var angle = fraction * 2 * Math.PI - Math.PI / 2;
-  return {
-    left: center + radius * Math.cos(angle) - cell / 2,
-    top: center + radius * Math.sin(angle) - cell / 2
-  };
-}
-function angleFromPoint(x, y, center) {
-  var angle = Math.atan2(y - center, x - center) + Math.PI / 2;
-  if (angle < 0) angle += Math.PI * 2;
-  return angle / (Math.PI * 2);
-}
-function pipRadius(pointy) {
-  return pointy ? 0 : 9999;
-}
-function activateKeys(onPress) {
-  return function (e) {
-    if (e.key === "Enter" || e.key === " ") {
-      var _e_preventDefault;
-      (_e_preventDefault = e.preventDefault) === null || _e_preventDefault === void 0 ? void 0 : _e_preventDefault.call(e);
-      onPress();
-    }
-  };
-}
-function ClockFaceButton(param) {
-  var {
-    label,
-    selected,
-    size,
-    left,
-    top,
-    pointy,
-    onPress
-  } = param;
-  var {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)({
-    compact: true
-  });
-  var onAccent = (0, import_theme.useReadableTextOn)(import_colorRamps.formSelectedColors.mark);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-    position: "absolute",
-    left,
-    top,
-    width: size,
-    height: size,
-    borderRadius: pipRadius(pointy),
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 2,
-    role: "button",
-    "aria-label": label,
-    "aria-pressed": selected || void 0,
-    cursor: "pointer",
-    backgroundColor: selected ? import_colorRamps.formSelectedColors.mark : "transparent",
-    outlineWidth: 0,
-    focusStyle: {
-      outlineWidth: 0
-    },
-    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
-      outlineOffset: -2
-    }),
-    onPress: function onPress1(e) {
-      var _e_stopPropagation;
-      (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
-      onPress();
-    },
-    ...(import_tamagui.isWeb ? {
-      tabIndex: 0,
-      onKeyDown: activateKeys(onPress)
-    } : {
-      accessible: true
-    }),
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      ...knobProps.label,
-      fontWeight: selected ? "700" : "500",
-      color: selected ? onAccent : import_colorRamps.formCommonColors.text,
-      userSelect: "none",
-      children: label
-    })
-  });
-}
-function ClockHand(param) {
-  var {
-    fraction,
-    length,
-    center
-  } = param;
-  var deg = fraction * 360 - 90;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-    position: "absolute",
-    left: center,
-    top: center - 1.5,
-    width: length,
-    height: 3,
-    borderRadius: 2,
-    backgroundColor: import_colorRamps.formSelectedColors.mark,
-    zIndex: 1,
-    pointerEvents: "none",
-    style: import_tamagui.isWeb ? {
-      transformOrigin: "left center",
-      transform: `rotate(${deg}deg)`
-    } : {
-      transform: [{
-        rotate: `${deg}deg`
-      }]
-    }
-  });
-}
-function ClockDial(param) {
-  var {
-    mode,
-    hour24,
-    minute,
-    second,
-    timeFormat,
-    minuteStep,
-    onSelectHour,
-    onSelectMinute,
-    onSelectSecond
-  } = param;
-  var {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)({
-    compact: true
-  });
-  var cell = knobProps.nestedControl.px;
-  var size = cell * 8;
-  var center = size / 2;
-  var outerR = center - cell * 0.7;
-  var innerR = center - cell * 1.85;
-  var {
-    h: hour12
-  } = to12Hour(hour24);
-  var faceRadius = pipRadius(knobProps.pointy);
-  var ticks = (0, import_react.useMemo)(function () {
-    if (mode === "hour" && timeFormat === "24h") {
-      return [...Array.from({
-        length: 12
-      }, function (_, i) {
-        return {
-          value: i,
-          label: pad2(i),
-          radius: innerR,
-          selected: hour24 === i
-        };
-      }), ...Array.from({
-        length: 12
-      }, function (_, i) {
-        return {
-          value: i + 12,
-          label: pad2(i + 12),
-          radius: outerR,
-          selected: hour24 === i + 12
-        };
-      })];
-    }
-    if (mode === "hour") {
-      return Array.from({
-        length: 12
-      }, function (_, i) {
-        var value = i === 0 ? 12 : i;
-        return {
-          value,
-          label: String(value),
-          radius: outerR,
-          selected: hour12 === value
-        };
-      });
-    }
-    var step = mode === "minute" ? Math.max(1, minuteStep) : 1;
-    var labelStep = step >= 5 && 60 % step === 0 ? step : 5;
-    var current = mode === "minute" ? minute : second;
-    return Array.from({
-      length: Math.floor(60 / labelStep)
-    }, function (_, i) {
-      var value = i * labelStep;
-      return {
-        value,
-        label: pad2(value),
-        radius: outerR,
-        selected: current === value
-      };
-    });
-  }, [mode, timeFormat, hour24, hour12, minute, second, minuteStep, innerR, outerR]);
-  var handFraction = mode === "hour" ? timeFormat === "24h" ? hour24 % 12 / 12 : hour12 / 12 : mode === "minute" ? minute / 60 : second / 60;
-  var handLength = mode === "hour" && timeFormat === "24h" && hour24 < 12 ? innerR : outerR;
-  var pickFromPoint = (0, import_react.useCallback)(function (x, y) {
-    var dist = Math.hypot(x - center, y - center);
-    if (dist < cell * 0.4 || dist > center) return;
-    var frac = angleFromPoint(x, y, center);
-    if (mode === "hour") {
-      var hour12Pick = Math.round(frac * 12) % 12;
-      if (timeFormat === "24h") {
-        var inner = dist < (innerR + outerR) / 2;
-        onSelectHour(inner ? hour12Pick : hour12Pick + 12);
-        return;
-      }
-      onSelectHour(to24Hour(hour12Pick === 0 ? 12 : hour12Pick, hour24 >= 12 ? "PM" : "AM"));
-      return;
-    }
-    var raw = Math.round(frac * 60) % 60;
-    if (mode === "minute") onSelectMinute(snapToStep(raw, minuteStep));else onSelectSecond(snapToStep(raw, 1));
-  }, [center, cell, innerR, outerR, mode, timeFormat, hour24, minuteStep, onSelectHour, onSelectMinute, onSelectSecond]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-    width: size,
-    height: size,
-    alignSelf: "center",
-    position: "relative",
-    "data-testid": "time-picker-dial",
-    role: "group",
-    "aria-label": mode === "hour" ? (0, import_t.t)("Hour") : mode === "minute" ? (0, import_t.t)("Min") : (0, import_t.t)("Sec"),
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      width: size,
-      height: size,
-      borderRadius: faceRadius === 9999 ? size / 2 : 0,
-      backgroundColor: import_colorRamps.formInputColors.background.focus,
-      cursor: "pointer",
-      onPress: function onPress(e) {
-        var ne = e.nativeEvent;
-        if (typeof ne.locationX === "number" && typeof ne.locationY === "number") {
-          pickFromPoint(ne.locationX, ne.locationY);
-        }
-      }
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ClockHand, {
-      fraction: handFraction,
-      length: handLength,
-      center
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      position: "absolute",
-      left: center + handLength * Math.cos(handFraction * 2 * Math.PI - Math.PI / 2) - cell / 2,
-      top: center + handLength * Math.sin(handFraction * 2 * Math.PI - Math.PI / 2) - cell / 2,
-      width: cell,
-      height: cell,
-      borderRadius: pipRadius(knobProps.pointy),
-      backgroundColor: import_colorRamps.formSelectedColors.mark,
-      zIndex: 1,
-      pointerEvents: "none"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      position: "absolute",
-      left: center - 5,
-      top: center - 5,
-      width: 10,
-      height: 10,
-      borderRadius: pipRadius(knobProps.pointy),
-      backgroundColor: import_colorRamps.formSelectedColors.mark,
-      zIndex: 3,
-      pointerEvents: "none"
-    }), ticks.map(function (tick) {
-      var fraction = mode === "hour" ? tick.value % 12 / 12 : tick.value / 60;
-      var pos = polar(fraction, tick.radius, cell, center);
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ClockFaceButton, {
-        label: tick.label,
-        selected: tick.selected,
-        size: cell,
-        left: pos.left,
-        top: pos.top,
-        pointy: knobProps.pointy,
-        onPress: function onPress() {
-          if (mode === "hour") {
-            onSelectHour(timeFormat === "24h" ? tick.value : to24Hour(tick.value, hour24 >= 12 ? "PM" : "AM"));
-          } else if (mode === "minute") {
-            onSelectMinute(tick.value);
-          } else {
-            onSelectSecond(tick.value);
-          }
-        }
-      }, `${tick.radius}-${tick.value}`);
-    })]
-  });
-}
-function TimeSegment(param) {
-  var {
-    value,
-    selected,
-    label,
-    onPress,
-    onStep
-  } = param;
-  var {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)({
-    compact: true
-  });
-  var onAccent = (0, import_theme.useReadableTextOn)(import_colorRamps.formSelectedColors.mark);
-  var minWidth = knobProps.nestedControl.px * 2;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-    role: "button",
-    "aria-label": label,
-    "aria-pressed": selected || void 0,
-    cursor: "pointer",
-    minWidth,
-    minHeight: knobProps.nestedControl.px * 1.5,
-    paddingHorizontal: "$3",
-    paddingVertical: "$2",
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: selected ? import_colorRamps.formSelectedColors.mark : import_colorRamps.formInputColors.background.focus,
-    borderRadius: knobProps.pointy ? 0 : knobProps.borderRadius.borderRadius,
-    outlineWidth: 0,
-    focusStyle: {
-      outlineWidth: 0
-    },
-    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
-      outlineOffset: -2
-    }),
-    onPress,
-    ...(knobProps.transition ? {
-      transition: knobProps.transition
-    } : void 0),
-    ...(import_tamagui.isWeb ? {
-      tabIndex: 0,
-      onKeyDown: function onKeyDown(e) {
-        if (e.key === "Enter" || e.key === " ") {
-          var _e_preventDefault;
-          (_e_preventDefault = e.preventDefault) === null || _e_preventDefault === void 0 ? void 0 : _e_preventDefault.call(e);
-          onPress();
-        } else if (e.key === "ArrowUp") {
-          var _e_preventDefault1;
-          (_e_preventDefault1 = e.preventDefault) === null || _e_preventDefault1 === void 0 ? void 0 : _e_preventDefault1.call(e);
-          onStep(1);
-        } else if (e.key === "ArrowDown") {
-          var _e_preventDefault2;
-          (_e_preventDefault2 = e.preventDefault) === null || _e_preventDefault2 === void 0 ? void 0 : _e_preventDefault2.call(e);
-          onStep(-1);
-        }
-      }
-    } : {
-      accessible: true
-    }),
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$8",
-      ...knobProps.heading,
-      fontWeight: "700",
-      color: selected ? onAccent : import_colorRamps.formCommonColors.text,
-      userSelect: "none",
-      children: value
-    })
-  });
-}
-function PeriodToggle(param) {
-  var {
-    selected,
-    onChange
-  } = param;
-  var {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)({
-    compact: true
-  });
-  var onAccent = (0, import_theme.useReadableTextOn)(import_colorRamps.formSelectedColors.mark);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-    overflow: "hidden",
-    borderRadius: knobProps.pointy ? 0 : knobProps.borderRadius.borderRadius,
-    role: "radiogroup",
-    "aria-label": (0, import_t.t)("AM/PM"),
-    children: ["AM", "PM"].map(function (period) {
-      var isSelected = period === selected;
-      var onPress = function onPress2() {
-        return onChange(period);
-      };
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        role: "radio",
-        "aria-checked": isSelected,
-        cursor: "pointer",
-        width: knobProps.nestedControl.px * 1.75,
-        height: knobProps.nestedControl.px * 1.15,
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: isSelected ? import_colorRamps.formSelectedColors.mark : import_colorRamps.formInputColors.background.focus,
-        outlineWidth: 0,
-        focusStyle: {
-          outlineWidth: 0
-        },
-        focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
-          outlineOffset: -2
-        }),
-        onPress,
-        ...(knobProps.transition ? {
-          transition: knobProps.transition
-        } : void 0),
-        ...(import_tamagui.isWeb ? {
-          tabIndex: 0,
-          onKeyDown: activateKeys(onPress)
-        } : {
-          accessible: true
-        }),
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          ...knobProps.label,
-          fontWeight: isSelected ? "700" : "500",
-          color: isSelected ? onAccent : import_colorRamps.formCommonColors.text,
-          userSelect: "none",
-          children: period
-        })
-      }, period);
-    })
-  });
-}
 function TimePanel(param) {
   var {
     value,
@@ -515,100 +105,44 @@ function TimePanel(param) {
   } = (0, import_theme.useResolvedKnobs)({
     compact: true
   });
-  var [mode, setMode] = (0, import_react.useState)("hour");
   var {
     h,
     m,
     s
   } = parseTimeString(value);
-  var {
-    h: hour12,
-    period
-  } = to12Hour(h);
-  var emit = (0, import_react.useCallback)(function (newH, newM, newS) {
-    onChange(showSeconds ? toTimeString(newH, newM, newS) : toTimeString(newH, newM));
-  }, [onChange, showSeconds]);
-  var handleHour = (0, import_react.useCallback)(function (hour24) {
-    emit(hour24, m, s);
-    setMode("minute");
-  }, [emit, m, s]);
-  var handleMinute = (0, import_react.useCallback)(function (next) {
-    emit(h, next, s);
-    if (showSeconds) setMode("second");
-  }, [emit, h, s, showSeconds]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-    alignItems: "center",
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    width: "100%",
     ...knobProps.panelPadding,
-    ...knobProps.gapLg,
     "data-testid": "time-picker-panel",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-      flexDirection: "row",
-      alignItems: "center",
-      ...knobProps.gap,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(TimeSegment, {
-        value: timeFormat === "24h" ? pad2(h) : pad2(hour12),
-        selected: mode === "hour",
-        label: (0, import_t.t)("Hour"),
-        onPress: function onPress() {
-          return setMode("hour");
-        },
-        onStep: function onStep(delta) {
-          if (timeFormat === "24h") emit(wrap(h + delta, 0, 23), m, s);else emit(to24Hour(wrap(hour12 + delta, 1, 12), period), m, s);
-        }
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        fontSize: "$8",
-        ...knobProps.heading,
-        color: import_colorRamps.formCommonColors.text,
-        userSelect: "none",
-        children: ":"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TimeSegment, {
-        value: pad2(m),
-        selected: mode === "minute",
-        label: (0, import_t.t)("Min"),
-        onPress: function onPress() {
-          return setMode("minute");
-        },
-        onStep: function onStep(delta) {
-          return emit(h, snapToStep(m + delta * Math.max(1, minuteStep), minuteStep), s);
-        }
-      }), showSeconds ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: "$8",
-          ...knobProps.heading,
-          color: import_colorRamps.formCommonColors.text,
-          userSelect: "none",
-          children: ":"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TimeSegment, {
-          value: pad2(s),
-          selected: mode === "second",
-          label: (0, import_t.t)("Sec"),
-          onPress: function onPress() {
-            return setMode("second");
-          },
-          onStep: function onStep(delta) {
-            return emit(h, m, wrap(s + delta, 0, 59));
-          }
-        })]
-      }) : null, timeFormat === "12h" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(PeriodToggle, {
-        selected: period,
-        onChange: function onChange2(next) {
-          if (next === period) return;
-          emit(to24Hour(hour12, next), m, s);
-        }
-      }) : null]
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ClockDial, {
-      mode: showSeconds && mode === "second" ? "second" : mode === "minute" ? "minute" : "hour",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeWheels, {
       hour24: h,
       minute: m,
       second: s,
       timeFormat,
       minuteStep,
-      onSelectHour: handleHour,
-      onSelectMinute: handleMinute,
-      onSelectSecond: function onSelectSecond(next) {
-        return emit(h, m, next);
+      showSeconds,
+      onChange: function onChange1(hour24, minute, second) {
+        return onChange(showSeconds ? toTimeString(hour24, minute, second) : toTimeString(hour24, minute));
       }
-    })]
+    })
+  });
+}
+function TimePickerClearButton(param) {
+  var {
+    onClear,
+    disabled
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
+    "data-testid": "time-picker-clear",
+    "aria-label": (0, import_t.t)("Clear time"),
+    disabled,
+    onPress: function onPress(e) {
+      e.stopPropagation();
+      onClear();
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {})
+    })
   });
 }
 function TimePickerInputTrigger(param) {
@@ -641,42 +175,41 @@ function TimePickerInputTrigger(param) {
         pointerEvents: "none"
       } : void 0),
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+        "data-testid": "time-picker-glyph",
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
           adornment: "leading",
-          children: clockIcon !== null && clockIcon !== void 0 ? clockIcon : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Clock, {})
+          color: import_colorRamps.formCommonColors.muted,
+          children: clockIcon !== null && clockIcon !== void 0 ? clockIcon : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {})
         })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-        readOnly: true,
-        pointerEvents: "none",
-        id,
-        value,
-        placeholder,
-        disabled,
-        color: import_colorRamps.formCommonColors.text,
-        "aria-label": ariaLabel,
-        "aria-required": ariaRequired,
-        "aria-invalid": ariaInvalid,
-        "aria-readonly": ariaReadonly,
-        onKeyPress: disabled ? void 0 : function (e) {
-          var _ref;
-          var _e_nativeEvent;
-          var key = (_ref = e === null || e === void 0 ? void 0 : (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.key) !== null && _ref !== void 0 ? _ref : e === null || e === void 0 ? void 0 : e.key;
-          if (key === "Enter" || key === " " || key === "Spacebar") {
-            var _e_preventDefault;
-            e === null || e === void 0 ? void 0 : (_e_preventDefault = e.preventDefault) === null || _e_preventDefault === void 0 ? void 0 : _e_preventDefault.call(e);
-            onOpen();
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+          readOnly: true,
+          pointerEvents: "none",
+          id,
+          value,
+          placeholder,
+          disabled,
+          color: import_colorRamps.formCommonColors.text,
+          placeholderTextColor: import_colorRamps.formCommonColors.muted,
+          "aria-label": ariaLabel,
+          "aria-required": ariaRequired,
+          "aria-invalid": ariaInvalid,
+          "aria-readonly": ariaReadonly,
+          onKeyPress: disabled ? void 0 : function (e) {
+            var _ref;
+            var _e_nativeEvent;
+            var key = (_ref = e === null || e === void 0 ? void 0 : (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.key) !== null && _ref !== void 0 ? _ref : e === null || e === void 0 ? void 0 : e.key;
+            if (key === "Enter" || key === " " || key === "Spacebar") {
+              var _e_preventDefault;
+              e === null || e === void 0 ? void 0 : (_e_preventDefault = e.preventDefault) === null || _e_preventDefault === void 0 ? void 0 : _e_preventDefault.call(e);
+              onOpen();
+            }
           }
-        }
-      }), value ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
-          "aria-label": (0, import_t.t)("Clear time"),
-          onPress: function onPress(e) {
-            e.stopPropagation();
-            onClear();
-          },
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.X, {})
-          })
+        })
+      }), value && import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TimePickerClearButton, {
+          onClear,
+          disabled
         })
       }) : null]
     })