@multiplatform.one/forms 6.6.0 → 7.0.0

package/dist/cjs/fields/TimePicker/index.cjs

@@ -22,202 +22,23 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var TimePicker_exports = {};
 __export(TimePicker_exports, {
-  TimePicker: () => TimePicker
+  TimePicker: () => TimePicker,
+  formatTimeDisplay: () => import_parts2.formatTimeDisplay,
+  isValidTimeString: () => import_parts2.isValidTimeString,
+  parseTimeString: () => import_parts2.parseTimeString,
+  toTimeString: () => import_parts2.toTimeString
 });
 module.exports = __toCommonJS(TimePicker_exports);
-var import_theme = require("@multiplatform.one/theme");
 var import_react = require("react");
-var import_tamagui = require("tamagui");
 var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
 var import_InputParts = require("../../InputParts/index.cjs");
-var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_t = require("../../shared/t.cjs");
-var import_TimeColumn = require("../../shared/TimeColumn.cjs");
 var import_utils = require("../../shared/utils.cjs");
+var import_parts = require("./parts.cjs");
+var import_parts2 = require("./parts.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const suppressBoxFocusRing = {
-  focused: false,
-  setFocused: _val => {}
-};
-const 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
-  };
-  const 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) {
-  const 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 "";
-  const {
-    h,
-    m,
-    s
-  } = parseTimeString(value);
-  const secSuffix = showSeconds ? `:${String(s).padStart(2, "0")}` : "";
-  if (format === "24h") {
-    return `${toTimeString(h, m)}${secSuffix}`;
-  }
-  const period = h >= 12 ? "PM" : "AM";
-  const displayH = h === 0 ? 12 : h > 12 ? h - 12 : h;
-  return `${displayH}:${String(m).padStart(2, "0")}${secSuffix} ${period}`;
-}
-const hours24 = (0, import_TimeColumn.generateRange)(0, 23);
-const hours12 = (0, import_TimeColumn.generateRange)(1, 12);
-const secondValues = (0, import_TimeColumn.generateRange)(0, 59);
-function AmPmColumn({
-  selected,
-  onChange,
-  knobProps
-}) {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    alignItems: "center",
-    gap: "$1",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: "$1",
-      ...knobProps.body,
-      color: import_colorRamps.formCommonColors.muted,
-      textTransform: "uppercase",
-      letterSpacing: 1,
-      children: " "
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-      ...knobProps.borderRadius,
-      backgroundColor: import_colorRamps.formInputColors.background.base,
-      borderWidth: knobProps.inputSurface.borderWidth,
-      borderColor: import_colorRamps.formInputColors.border.base,
-      overflow: "hidden",
-      children: ["AM", "PM"].map(period => {
-        const isSelected = period === selected;
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-          height: 36,
-          width: 48,
-          alignItems: "center",
-          justifyContent: "center",
-          cursor: "pointer",
-          backgroundColor: isSelected ? import_colorRamps.formInputColors.background.focus : "transparent",
-          hoverStyle: {
-            backgroundColor: import_colorRamps.formInputColors.background.focus
-          },
-          onPress: () => onChange(period),
-          ...(knobProps.transition ? {
-            transition: knobProps.transition
-          } : void 0),
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$3",
-            ...knobProps.body,
-            fontWeight: isSelected ? "700" : "400",
-            color: isSelected ? import_colorRamps.formCommonColors.text : import_colorRamps.formCommonColors.muted,
-            children: period
-          })
-        }, period);
-      })
-    })]
-  });
-}
-function TimePickerPopoverContent({
-  value,
-  onChange,
-  knobProps,
-  timeFormat,
-  minuteStep,
-  showSeconds
-}) {
-  const {
-    h,
-    m,
-    s
-  } = parseTimeString(value);
-  const minuteValues = (0, import_react.useMemo)(() => (0, import_TimeColumn.generateRange)(0, 59, minuteStep), [minuteStep]);
-  const makeTime = (0, import_react.useCallback)((newH, newM, newS) => showSeconds ? toTimeString(newH, newM, newS) : toTimeString(newH, newM), [showSeconds]);
-  const secondsColumn = showSeconds && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumnSeparator, {
-      knobProps
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-      label: (0, import_t.t)("Sec"),
-      values: secondValues,
-      selected: s,
-      onChange: newS => onChange(makeTime(h, m, newS)),
-      knobProps
-    })]
-  });
-  if (timeFormat === "24h") {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-      gap: "$2",
-      alignItems: "flex-start",
-      justifyContent: "center",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-        label: (0, import_t.t)("Hour"),
-        values: hours24,
-        selected: h,
-        onChange: newH => onChange(makeTime(newH, m, s)),
-        knobProps
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumnSeparator, {
-        knobProps
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-        label: (0, import_t.t)("Min"),
-        values: minuteValues,
-        selected: m,
-        onChange: newM => onChange(makeTime(h, newM, s)),
-        knobProps
-      }), secondsColumn]
-    });
-  }
-  const period = h >= 12 ? "PM" : "AM";
-  const display12H = h === 0 ? 12 : h > 12 ? h - 12 : h;
-  const handleHourChange = newDisplayH => {
-    let h24 = newDisplayH;
-    if (period === "AM") {
-      h24 = newDisplayH === 12 ? 0 : newDisplayH;
-    } else {
-      h24 = newDisplayH === 12 ? 12 : newDisplayH + 12;
-    }
-    onChange(makeTime(h24, m, s));
-  };
-  const handlePeriodChange = newPeriod => {
-    if (newPeriod === period) return;
-    const newH = newPeriod === "AM" ? h >= 12 ? h - 12 : h : h < 12 ? h + 12 : h;
-    onChange(makeTime(newH, m, s));
-  };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-    gap: "$2",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-      label: (0, import_t.t)("Hour"),
-      values: hours12,
-      selected: display12H,
-      onChange: handleHourChange,
-      knobProps
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumnSeparator, {
-      knobProps
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-      label: (0, import_t.t)("Min"),
-      values: minuteValues,
-      selected: m,
-      onChange: newM => onChange(makeTime(h, newM, s)),
-      knobProps
-    }), secondsColumn, /* @__PURE__ */(0, import_jsx_runtime.jsx)(AmPmColumn, {
-      selected: period,
-      onChange: handlePeriodChange,
-      knobProps
-    })]
-  });
-}
 function TimePicker({
   name,
   form: formProp,
@@ -246,7 +67,6 @@ function TimePicker({
   const {
     resolvedForm,
     knobProps,
-    control,
     id
   } = (0, import_utils.useFormField)({
     form: formProp,
@@ -255,62 +75,40 @@ function TimePicker({
   });
   const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
   const [open, setOpen] = (0, import_react.useState)(false);
-  const areaFocusRing = (0, import_theme.ensureFocusVisibleRing)({
-    ...control.focusVisibleKnobProps,
-    outlineOffset: -2
-  });
   const [internalValue, setInternalValue] = (0, import_react.useState)(() => valueProp ?? defaultValue ?? "");
   (0, import_react.useEffect)(() => {
     if (valueProp === void 0) return;
     setInternalValue(valueProp);
   }, [valueProp]);
   const value = internalValue;
-  const valueIsInvalid = !!value.trim() && !isValidTimeString(value);
+  const valueIsInvalid = !!value.trim() && !(0, import_parts.isValidTimeString)(value);
   const formatError = valueIsInvalid ? (0, import_t.t)("Invalid time value") : void 0;
-  const displayValue = (0, import_react.useMemo)(() => valueIsInvalid ? "" : formatTimeDisplay(value, timeFormat, showSeconds), [value, valueIsInvalid, timeFormat, showSeconds]);
+  const displayValue = (0, import_react.useMemo)(() => valueIsInvalid ? "" : (0, import_parts.formatTimeDisplay)(value, timeFormat, showSeconds), [value, valueIsInvalid, timeFormat, showSeconds]);
   const handleChange = (0, import_react.useCallback)((time, fieldChange) => {
     setInternalValue(time);
     fieldChange?.(time);
     onChange?.(time);
   }, [onChange]);
-  const renderTrigger = (triggerValue, hasError) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
-    size: size || knobProps.sizeToken,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
-      theme: hasError ? "red" : void 0,
-      elevation: void 0,
-      ...(disabled ? {
-        opacity: 0.5,
-        pointerEvents: "none"
-      } : void 0),
-      children: [clockIcon && /* @__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
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.FocusContext.Provider, {
-        ...suppressBoxFocusRing,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-          readOnly: true,
-          id,
-          value: triggerValue,
-          placeholder,
-          disabled,
-          color: import_colorRamps.formCommonColors.text,
-          focusStyle: areaFocusRing,
-          focusVisibleStyle: areaFocusRing,
-          "aria-labelledby": label ? `${id}-label` : void 0,
-          "aria-label": label ? void 0 : (0, import_t.t)("Time"),
-          "aria-readonly": readOnly || void 0,
-          "aria-required": required || void 0,
-          "aria-invalid": hasError || void 0
-        })
-      })]
-    })
+  const handleClear = (0, import_react.useCallback)(fieldChange => {
+    handleChange("", fieldChange);
+  }, [handleChange]);
+  const renderTrigger = (triggerValue, hasError, fieldChange, readonly) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.TimePickerInputTrigger, {
+    value: triggerValue,
+    placeholder,
+    disabled,
+    error: hasError,
+    id,
+    clockIcon,
+    onOpen: () => setOpen(true),
+    onClear: () => handleClear(fieldChange),
+    "aria-label": label ? void 0 : (0, import_t.t)("Time"),
+    "aria-readonly": readonly || void 0,
+    "aria-required": required || void 0,
+    "aria-invalid": hasError || void 0
   });
-  const panelContent = (currentValue, onValueChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(TimePickerPopoverContent, {
+  const panelContent = (currentValue, onValueChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.TimePanel, {
     value: currentValue || "00:00",
     onChange: onValueChange,
-    knobProps,
     timeFormat,
     minuteStep,
     showSeconds
@@ -328,6 +126,29 @@ function TimePicker({
       })
     });
   }
+  const renderField = (triggerValue, hasError, blurHandler, fieldChange, fieldValue) => {
+    if (readOnly) {
+      return renderTrigger(triggerValue, hasError, void 0, true);
+    }
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
+      open,
+      onOpenChange: isOpen => {
+        setOpen(isOpen);
+        if (!isOpen) blurHandler?.();
+      },
+      disabled,
+      scrollable: true,
+      sizing: "grow",
+      fitContent: true,
+      triggerA11y: {
+        label: typeof label === "string" && label || (0, import_t.t)("Time"),
+        value: triggerValue || placeholder,
+        hint: typeof helperText === "string" ? helperText : void 0
+      },
+      trigger: renderTrigger(triggerValue, hasError, fieldChange),
+      children: panelContent(fieldValue ?? value, time => handleChange(time, fieldChange))
+    });
+  };
   if (!resolvedForm || !name) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,
@@ -340,15 +161,9 @@ function TimePicker({
       knobProps,
       onBlur,
       disabled,
-      children: readOnly ? renderTrigger(displayValue, !!error || valueIsInvalid) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
-        open,
-        onOpenChange: setOpen,
-        disabled,
-        scrollable: true,
-        sizing: "fill",
-        fitContent: true,
-        trigger: renderTrigger(displayValue, !!error || valueIsInvalid),
-        children: panelContent(value, time => handleChange(time))
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+        size: size || knobProps.sizeToken,
+        children: renderField(displayValue, !!error || valueIsInvalid, onBlur)
       })
     });
   }
@@ -360,9 +175,9 @@ function TimePicker({
     children: field => {
       const resolvedError = (0, import_utils.getFieldError)(field, error);
       const fieldValue = field.state.value ?? "";
-      const fieldIsInvalid = !!fieldValue.trim() && !isValidTimeString(fieldValue);
+      const fieldIsInvalid = !!fieldValue.trim() && !(0, import_parts.isValidTimeString)(fieldValue);
       const fieldFormatError = fieldIsInvalid ? (0, import_t.t)("Invalid time value") : void 0;
-      const fieldDisplay = fieldIsInvalid ? "" : formatTimeDisplay(fieldValue, timeFormat, showSeconds);
+      const fieldDisplay = fieldIsInvalid ? "" : (0, import_parts.formatTimeDisplay)(fieldValue, timeFormat, showSeconds);
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
         id,
         label,
@@ -374,15 +189,9 @@ function TimePicker({
         knobProps,
         onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
         disabled,
-        children: readOnly ? renderTrigger(fieldDisplay, !!resolvedError || fieldIsInvalid) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
-          open,
-          onOpenChange: setOpen,
-          disabled,
-          scrollable: true,
-          sizing: "fill",
-          fitContent: true,
-          trigger: renderTrigger(fieldDisplay, !!resolvedError || fieldIsInvalid),
-          children: panelContent(fieldValue, time => handleChange(time, v => field.handleChange(v)))
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+          size: size || knobProps.sizeToken,
+          children: renderField(fieldDisplay, !!resolvedError || fieldIsInvalid, (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur), v => field.handleChange(v), fieldValue)
         })
       });
     }