@multiplatform.one/forms 7.4.1 → 7.6.0

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

@@ -22,8 +22,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,
@@ -33,12 +33,12 @@ __export(parts_exports, {
   toTimeString: () => toTimeString
 });
 module.exports = __toCommonJS(parts_exports);
-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.cjs");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
+var import_TimeColumn = require("../../shared/TimeColumn.cjs");
 var import_t = require("../../shared/t.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const timeStringRegex = /^([01]?\d|2[0-3]):[0-5]\d(:[0-5]\d)?$/;
@@ -90,399 +90,6 @@ function to12Hour(h24) {
     period: h24 >= 12 ? "PM" : "AM"
   };
 }
-function pad2(n) {
-  return String(n).padStart(2, "0");
-}
-function wrap(n, min, max) {
-  const span = max - min + 1;
-  return min + ((n - min) % span + span) % span;
-}
-function snapToStep(raw, step, max = 59) {
-  const size = Math.max(1, step);
-  return wrap(Math.round(raw / size) * size, 0, max);
-}
-function polar(fraction, radius, cell, center) {
-  const 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) {
-  let 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 e => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault?.();
-      onPress();
-    }
-  };
-}
-function ClockFaceButton({
-  label,
-  selected,
-  size,
-  left,
-  top,
-  pointy,
-  onPress
-}) {
-  const {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)({
-    compact: true
-  });
-  const 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: e => {
-      e.stopPropagation?.();
-      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({
-  fraction,
-  length,
-  center
-}) {
-  const 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({
-  mode,
-  hour24,
-  minute,
-  second,
-  timeFormat,
-  minuteStep,
-  onSelectHour,
-  onSelectMinute,
-  onSelectSecond
-}) {
-  const {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)({
-    compact: true
-  });
-  const cell = knobProps.nestedControl.px;
-  const size = cell * 8;
-  const center = size / 2;
-  const outerR = center - cell * 0.7;
-  const innerR = center - cell * 1.85;
-  const {
-    h: hour12
-  } = to12Hour(hour24);
-  const faceRadius = pipRadius(knobProps.pointy);
-  const ticks = (0, import_react.useMemo)(() => {
-    if (mode === "hour" && timeFormat === "24h") {
-      return [...Array.from({
-        length: 12
-      }, (_, i) => ({
-        value: i,
-        label: pad2(i),
-        radius: innerR,
-        selected: hour24 === i
-      })), ...Array.from({
-        length: 12
-      }, (_, i) => ({
-        value: i + 12,
-        label: pad2(i + 12),
-        radius: outerR,
-        selected: hour24 === i + 12
-      }))];
-    }
-    if (mode === "hour") {
-      return Array.from({
-        length: 12
-      }, (_, i) => {
-        const value = i === 0 ? 12 : i;
-        return {
-          value,
-          label: String(value),
-          radius: outerR,
-          selected: hour12 === value
-        };
-      });
-    }
-    const step = mode === "minute" ? Math.max(1, minuteStep) : 1;
-    const labelStep = step >= 5 && 60 % step === 0 ? step : 5;
-    const current = mode === "minute" ? minute : second;
-    return Array.from({
-      length: Math.floor(60 / labelStep)
-    }, (_, i) => {
-      const value = i * labelStep;
-      return {
-        value,
-        label: pad2(value),
-        radius: outerR,
-        selected: current === value
-      };
-    });
-  }, [mode, timeFormat, hour24, hour12, minute, second, minuteStep, innerR, outerR]);
-  const handFraction = mode === "hour" ? timeFormat === "24h" ? hour24 % 12 / 12 : hour12 / 12 : mode === "minute" ? minute / 60 : second / 60;
-  const handLength = mode === "hour" && timeFormat === "24h" && hour24 < 12 ? innerR : outerR;
-  const pickFromPoint = (0, import_react.useCallback)((x, y) => {
-    const dist = Math.hypot(x - center, y - center);
-    if (dist < cell * 0.4 || dist > center) return;
-    const frac = angleFromPoint(x, y, center);
-    if (mode === "hour") {
-      const hour12Pick = Math.round(frac * 12) % 12;
-      if (timeFormat === "24h") {
-        const inner = dist < (innerR + outerR) / 2;
-        onSelectHour(inner ? hour12Pick : hour12Pick + 12);
-        return;
-      }
-      onSelectHour(to24Hour(hour12Pick === 0 ? 12 : hour12Pick, hour24 >= 12 ? "PM" : "AM"));
-      return;
-    }
-    const 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: e => {
-        const 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(tick => {
-      const fraction = mode === "hour" ? tick.value % 12 / 12 : tick.value / 60;
-      const 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: () => {
-          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({
-  value,
-  selected,
-  label,
-  onPress,
-  onStep
-}) {
-  const {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)({
-    compact: true
-  });
-  const onAccent = (0, import_theme.useReadableTextOn)(import_colorRamps.formSelectedColors.mark);
-  const 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: e => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault?.();
-          onPress();
-        } else if (e.key === "ArrowUp") {
-          e.preventDefault?.();
-          onStep(1);
-        } else if (e.key === "ArrowDown") {
-          e.preventDefault?.();
-          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({
-  selected,
-  onChange
-}) {
-  const {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)({
-    compact: true
-  });
-  const 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(period => {
-      const isSelected = period === selected;
-      const onPress = () => 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({
   value,
   onChange,
@@ -495,88 +102,41 @@ function TimePanel({
   } = (0, import_theme.useResolvedKnobs)({
     compact: true
   });
-  const [mode, setMode] = (0, import_react.useState)("hour");
   const {
     h,
     m,
     s
   } = parseTimeString(value);
-  const {
-    h: hour12,
-    period
-  } = to12Hour(h);
-  const emit = (0, import_react.useCallback)((newH, newM, newS) => {
-    onChange(showSeconds ? toTimeString(newH, newM, newS) : toTimeString(newH, newM));
-  }, [onChange, showSeconds]);
-  const handleHour = (0, import_react.useCallback)(hour24 => {
-    emit(hour24, m, s);
-    setMode("minute");
-  }, [emit, m, s]);
-  const handleMinute = (0, import_react.useCallback)(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: () => setMode("hour"),
-        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: () => setMode("minute"),
-        onStep: delta => 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: () => setMode("second"),
-          onStep: delta => emit(h, m, wrap(s + delta, 0, 59))
-        })]
-      }) : null, timeFormat === "12h" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(PeriodToggle, {
-        selected: period,
-        onChange: 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: next => emit(h, m, next)
-    })]
+      showSeconds,
+      onChange: (hour24, minute, second) => onChange(showSeconds ? toTimeString(hour24, minute, second) : toTimeString(hour24, minute))
+    })
+  });
+}
+function TimePickerClearButton({
+  onClear,
+  disabled
+}) {
+  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: 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({
@@ -608,39 +168,38 @@ function TimePickerInputTrigger({
         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 ?? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Clock, {})
+          color: import_colorRamps.formCommonColors.muted,
+          children: 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 : e => {
-          const key = e?.nativeEvent?.key ?? e?.key;
-          if (key === "Enter" || key === " " || key === "Spacebar") {
-            e?.preventDefault?.();
-            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 : e => {
+            const key = e?.nativeEvent?.key ?? e?.key;
+            if (key === "Enter" || key === " " || key === "Spacebar") {
+              e?.preventDefault?.();
+              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: 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]
     })