@multiplatform.one/forms 6.7.0 → 7.1.0

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

@@ -0,0 +1,685 @@
+"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 parts_exports = {};
+__export(parts_exports, {
+  ClockDial: () => ClockDial,
+  TimePanel: () => TimePanel,
+  TimePickerInputTrigger: () => TimePickerInputTrigger,
+  formatTimeDisplay: () => formatTimeDisplay,
+  isValidTimeString: () => isValidTimeString,
+  parseTimeString: () => parseTimeString,
+  to12Hour: () => to12Hour,
+  to24Hour: () => to24Hour,
+  toTimeString: () => toTimeString
+});
+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_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_colorRamps = require("../../shared/colorRamps.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) {
+  return timeStringRegex.test(value.trim());
+}
+function parseTimeString(value) {
+  if (!value) return {
+    h: 0,
+    m: 0,
+    s: 0
+  };
+  var parts = value.split(":");
+  return {
+    h: Math.max(0, Math.min(23, Number.parseInt(parts[0] || "0", 10) || 0)),
+    m: Math.max(0, Math.min(59, Number.parseInt(parts[1] || "0", 10) || 0)),
+    s: Math.max(0, Math.min(59, Number.parseInt(parts[2] || "0", 10) || 0))
+  };
+}
+function toTimeString(h, m, s) {
+  var base = `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+  return s !== void 0 ? `${base}:${String(s).padStart(2, "0")}` : base;
+}
+function formatTimeDisplay(value, format, showSeconds) {
+  if (!value) return "";
+  var {
+    h,
+    m,
+    s
+  } = parseTimeString(value);
+  var secSuffix = showSeconds ? `:${String(s).padStart(2, "0")}` : "";
+  if (format === "24h") {
+    return `${toTimeString(h, m)}${secSuffix}`;
+  }
+  var {
+    h: displayH,
+    period
+  } = to12Hour(h);
+  return `${displayH}:${String(m).padStart(2, "0")}${secSuffix} ${period}`;
+}
+function to24Hour(displayH, period) {
+  var wrapped = (displayH - 1) % 12 + 1;
+  if (period === "AM") return wrapped === 12 ? 0 : wrapped;
+  return wrapped === 12 ? 12 : wrapped + 12;
+}
+function to12Hour(h24) {
+  return {
+    h: h24 % 12 === 0 ? 12 : h24 % 12,
+    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,
+    onChange,
+    timeFormat,
+    minuteStep,
+    showSeconds
+  } = param;
+  var {
+    knobProps
+  } = (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",
+    ...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",
+      hour24: h,
+      minute: m,
+      second: s,
+      timeFormat,
+      minuteStep,
+      onSelectHour: handleHour,
+      onSelectMinute: handleMinute,
+      onSelectSecond: function onSelectSecond(next) {
+        return emit(h, m, next);
+      }
+    })]
+  });
+}
+function TimePickerInputTrigger(param) {
+  var {
+    value,
+    placeholder,
+    disabled,
+    error,
+    id,
+    clockIcon,
+    onOpen,
+    onClear,
+    "aria-label": ariaLabel,
+    "aria-required": ariaRequired,
+    "aria-invalid": ariaInvalid,
+    "aria-readonly": ariaReadonly
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%",
+    cursor: disabled ? "not-allowed" : "pointer",
+    "data-testid": "time-picker-trigger",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+      theme: error ? "red" : void 0,
+      elevation: void 0,
+      onPress: import_tamagui.isWeb && !disabled ? onOpen : void 0,
+      ...(disabled ? {
+        opacity: 0.5,
+        pointerEvents: "none"
+      } : void 0),
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+        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, {})
+        })
+      }), /* @__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();
+          }
+        }
+      }), 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, {})
+          })
+        })
+      }) : null]
+    })
+  });
+}
+//# sourceMappingURL=parts.native.js.map