@multiplatform.one/forms 6.7.0 → 7.1.0

package/src/fields/TimePicker/index.tsx

@@ -1,16 +1,11 @@
-import type { KnobProps } from "@multiplatform.one/theme";
-import { ensureFocusVisibleRing } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
-import { Text, View, XStack, YStack } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { FloatingPanel } from "../../FloatingPanel";
-import { FocusContext, Input as InputParts } from "../../InputParts";
-import { formCommonColors, formInputColors } from "../../shared/colorRamps";
+import { Input as InputParts } from "../../InputParts";
 import { t } from "../../shared/t";
-import { TimeColumn, TimeColumnSeparator, generateRange } from "../../shared/TimeColumn";
 import {
   getFieldError,
   mergeFieldHandler,
@@ -18,213 +13,16 @@ import {
   useResolvedValidators,
 } from "../../shared/utils";
 import type { AnyFormApi } from "../../types";
+import {
+  TimePanel,
+  TimePickerInputTrigger,
+  formatTimeDisplay,
+  isValidTimeString,
+  type TimeFormat,
+} from "./parts";
 
-type TimeFormat = "12h" | "24h";
-
-/**
- * The knob focus ring must be CSS-driven on the focused input itself
- * (DG-A11Y-01): Input.Box paints its ring from React `focused` state one
- * frame after focus, which synchronous a11y probes never see. Same
- * OTP/Stepper/Input template — Box ring suppressed, ring lives on the Area.
- */
-const suppressBoxFocusRing = { focused: false, setFocused: (_val: boolean) => {} };
-
-const timeStringRegex = /^([01]?\d|2[0-3]):[0-5]\d(:[0-5]\d)?$/;
-
-function isValidTimeString(value: string): boolean {
-  return timeStringRegex.test(value.trim());
-}
-
-function parseTimeString(value: string): { h: number; m: number; s: number } {
-  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: number, m: number, s?: number): string {
-  const base = `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
-  return s !== undefined ? `${base}:${String(s).padStart(2, "0")}` : base;
-}
-
-function formatTimeDisplay(value: string, format: TimeFormat, showSeconds: boolean): string {
-  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 = generateRange(0, 23);
-const hours12 = generateRange(1, 12);
-const secondValues = generateRange(0, 59);
-
-function AmPmColumn({
-  selected,
-  onChange,
-  knobProps,
-}: {
-  selected: "AM" | "PM";
-  onChange: (period: "AM" | "PM") => void;
-  knobProps: KnobProps;
-}) {
-  return (
-    <YStack alignItems="center" gap="$1">
-      <Text
-        fontSize="$1"
-        {...knobProps.body}
-        color={formCommonColors.muted}
-        textTransform="uppercase"
-        letterSpacing={1}
-      >
-        {" "}
-      </Text>
-      <YStack
-        {...knobProps.borderRadius}
-        backgroundColor={formInputColors.background.base}
-        borderWidth={knobProps.inputSurface.borderWidth}
-        borderColor={formInputColors.border.base}
-        overflow="hidden"
-      >
-        {(["AM", "PM"] as const).map((period) => {
-          const isSelected = period === selected;
-          return (
-            <View
-              key={period}
-              height={36}
-              width={48}
-              alignItems="center"
-              justifyContent="center"
-              cursor="pointer"
-              backgroundColor={isSelected ? formInputColors.background.focus : "transparent"}
-              hoverStyle={{ backgroundColor: formInputColors.background.focus }}
-              onPress={() => onChange(period)}
-              {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
-            >
-              <Text
-                fontSize="$3"
-                {...knobProps.body}
-                fontWeight={isSelected ? "700" : "400"}
-                color={isSelected ? formCommonColors.text : formCommonColors.muted}
-              >
-                {period}
-              </Text>
-            </View>
-          );
-        })}
-      </YStack>
-    </YStack>
-  );
-}
-
-function TimePickerPopoverContent({
-  value,
-  onChange,
-  knobProps,
-  timeFormat,
-  minuteStep,
-  showSeconds,
-}: {
-  value: string;
-  onChange: (time: string) => void;
-  knobProps: KnobProps;
-  timeFormat: TimeFormat;
-  minuteStep: number;
-  showSeconds: boolean;
-}) {
-  const { h, m, s } = parseTimeString(value);
-  const minuteValues = useMemo(() => generateRange(0, 59, minuteStep), [minuteStep]);
-
-  const makeTime = useCallback(
-    (newH: number, newM: number, newS: number) =>
-      showSeconds ? toTimeString(newH, newM, newS) : toTimeString(newH, newM),
-    [showSeconds],
-  );
-
-  const secondsColumn = showSeconds && (
-    <>
-      <TimeColumnSeparator knobProps={knobProps} />
-      <TimeColumn
-        label={t("Sec")}
-        values={secondValues}
-        selected={s}
-        onChange={(newS) => onChange(makeTime(h, m, newS))}
-        knobProps={knobProps}
-      />
-    </>
-  );
-
-  if (timeFormat === "24h") {
-    return (
-      <XStack gap="$2" alignItems="flex-start" justifyContent="center">
-        <TimeColumn
-          label={t("Hour")}
-          values={hours24}
-          selected={h}
-          onChange={(newH) => onChange(makeTime(newH, m, s))}
-          knobProps={knobProps}
-        />
-        <TimeColumnSeparator knobProps={knobProps} />
-        <TimeColumn
-          label={t("Min")}
-          values={minuteValues}
-          selected={m}
-          onChange={(newM) => onChange(makeTime(h, newM, s))}
-          knobProps={knobProps}
-        />
-        {secondsColumn}
-      </XStack>
-    );
-  }
-
-  const period: "AM" | "PM" = h >= 12 ? "PM" : "AM";
-  const display12H = h === 0 ? 12 : h > 12 ? h - 12 : h;
-
-  const handleHourChange = (newDisplayH: number) => {
-    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: "AM" | "PM") => {
-    if (newPeriod === period) return;
-    const newH = newPeriod === "AM" ? (h >= 12 ? h - 12 : h) : h < 12 ? h + 12 : h;
-    onChange(makeTime(newH, m, s));
-  };
-
-  return (
-    <XStack gap="$2" alignItems="flex-start" justifyContent="center">
-      <TimeColumn
-        label={t("Hour")}
-        values={hours12}
-        selected={display12H}
-        onChange={handleHourChange}
-        knobProps={knobProps}
-      />
-      <TimeColumnSeparator knobProps={knobProps} />
-      <TimeColumn
-        label={t("Min")}
-        values={minuteValues}
-        selected={m}
-        onChange={(newM) => onChange(makeTime(h, newM, s))}
-        knobProps={knobProps}
-      />
-      {secondsColumn}
-      <AmPmColumn selected={period} onChange={handlePeriodChange} knobProps={knobProps} />
-    </XStack>
-  );
-}
+export type { TimeFormat } from "./parts";
+export { formatTimeDisplay, isValidTimeString, parseTimeString, toTimeString } from "./parts";
 
 export interface TimePickerProps {
   name?: string;
@@ -254,7 +52,7 @@ export interface TimePickerProps {
   clockIcon?: ReactNode;
   /** When true, renders a skeleton placeholder instead of the time picker */
   skeleton?: boolean;
-  /** When true, uses compact sizing */
+  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
   compact?: boolean;
 }
 
@@ -283,20 +81,14 @@ export function TimePicker({
   skeleton,
   compact,
 }: TimePickerProps) {
-  const { resolvedForm, knobProps, control, id } = useFormField({
+  const { resolvedForm, knobProps, id } = useFormField({
     form: formProp,
     id: idProp,
     compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const [open, setOpen] = useState(false);
-  // Inset (-2) keeps the ring inside the Box chrome (OTP/Stepper template).
-  const areaFocusRing = ensureFocusVisibleRing({
-    ...control.focusVisibleKnobProps,
-    outlineOffset: -2,
-  });
   const [internalValue, setInternalValue] = useState<string>(() => valueProp ?? defaultValue ?? "");
-  // Sync external `value` changes (controlled standalone mode).
   useEffect(() => {
     if (valueProp === undefined) return;
     setInternalValue(valueProp);
@@ -319,53 +111,45 @@ export function TimePicker({
     [onChange],
   );
 
-  const renderTrigger = (triggerValue: string, hasError?: boolean) => (
-    <InputParts size={size || knobProps.sizeToken}>
-      <InputParts.Box
-        theme={hasError ? "red" : undefined}
-        // Elevation is an overlay recipe: it belongs on the open panel, never
-        // on the closed text-field trigger.
-        elevation={undefined}
-        {...(disabled ? { opacity: 0.5, pointerEvents: "none" as const } : undefined)}
-      >
-        {clockIcon && (
-          <InputParts.Section>
-            <InputParts.Icon adornment="leading">{clockIcon}</InputParts.Icon>
-          </InputParts.Section>
-        )}
-        <FocusContext.Provider {...suppressBoxFocusRing}>
-          <InputParts.Area
-            readOnly
-            id={id}
-            value={triggerValue}
-            placeholder={placeholder}
-            disabled={disabled}
-            color={formCommonColors.text}
-            focusStyle={areaFocusRing}
-            focusVisibleStyle={areaFocusRing}
-            aria-labelledby={label ? `${id}-label` : undefined}
-            aria-label={label ? undefined : t("Time")}
-            aria-readonly={readOnly || undefined}
-            aria-required={required || undefined}
-            aria-invalid={hasError || undefined}
-          />
-        </FocusContext.Provider>
-      </InputParts.Box>
-    </InputParts>
+  const handleClear = useCallback(
+    (fieldChange?: (v: any) => void) => {
+      handleChange("", fieldChange);
+    },
+    [handleChange],
+  );
+
+  const renderTrigger = (
+    triggerValue: string,
+    hasError?: boolean,
+    fieldChange?: (v: any) => void,
+    readonly?: boolean,
+  ) => (
+    <TimePickerInputTrigger
+      value={triggerValue}
+      placeholder={placeholder}
+      disabled={disabled}
+      error={hasError}
+      id={id}
+      clockIcon={clockIcon}
+      onOpen={() => setOpen(true)}
+      onClear={() => handleClear(fieldChange)}
+      aria-label={label ? undefined : t("Time")}
+      aria-readonly={readonly || undefined}
+      aria-required={required || undefined}
+      aria-invalid={hasError || undefined}
+    />
   );
 
-  const panelContent = (currentValue: string, onValueChange: (t: string) => void) => (
-    <TimePickerPopoverContent
+  const panelContent = (currentValue: string, onValueChange: (next: string) => void) => (
+    <TimePanel
       value={currentValue || "00:00"}
       onChange={onValueChange}
-      knobProps={knobProps}
       timeFormat={timeFormat}
       minuteStep={minuteStep}
       showSeconds={showSeconds}
     />
   );
 
-  // Render skeleton placeholder
   if (skeleton) {
     return (
       <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
@@ -374,6 +158,39 @@ export function TimePicker({
     );
   }
 
+  const renderField = (
+    triggerValue: string,
+    hasError?: boolean,
+    blurHandler?: (...args: any[]) => void,
+    fieldChange?: (v: any) => void,
+    fieldValue?: string,
+  ) => {
+    if (readOnly) {
+      return renderTrigger(triggerValue, hasError, undefined, true);
+    }
+    return (
+      <FloatingPanel
+        open={open}
+        onOpenChange={(isOpen) => {
+          setOpen(isOpen);
+          if (!isOpen) blurHandler?.();
+        }}
+        disabled={disabled}
+        scrollable
+        sizing="grow"
+        fitContent
+        triggerA11y={{
+          label: (typeof label === "string" && label) || t("Time"),
+          value: triggerValue || placeholder,
+          hint: typeof helperText === "string" ? helperText : undefined,
+        }}
+        trigger={renderTrigger(triggerValue, hasError, fieldChange)}
+      >
+        {panelContent(fieldValue ?? value, (time) => handleChange(time, fieldChange))}
+      </FloatingPanel>
+    );
+  };
+
   if (!resolvedForm || !name) {
     return (
       <FieldLayout
@@ -386,25 +203,11 @@ export function TimePicker({
         size={size}
         knobProps={knobProps}
         onBlur={onBlur}
-        // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
-        // the sibling label/helper readable) — it needs the disabled state.
         disabled={disabled}
       >
-        {readOnly ? (
-          renderTrigger(displayValue, !!error || valueIsInvalid)
-        ) : (
-          <FloatingPanel
-            open={open}
-            onOpenChange={setOpen}
-            disabled={disabled}
-            scrollable
-            sizing="fill"
-            fitContent
-            trigger={renderTrigger(displayValue, !!error || valueIsInvalid)}
-          >
-            {panelContent(value, (time) => handleChange(time))}
-          </FloatingPanel>
-        )}
+        <InputParts size={size || knobProps.sizeToken}>
+          {renderField(displayValue, !!error || valueIsInvalid, onBlur)}
+        </InputParts>
       </FieldLayout>
     );
   }
@@ -435,26 +238,17 @@ export function TimePicker({
             size={size}
             knobProps={knobProps}
             onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
-            // LC-40: see standalone branch — FieldLayout carries dimWhole.
             disabled={disabled}
           >
-            {readOnly ? (
-              renderTrigger(fieldDisplay, !!resolvedError || fieldIsInvalid)
-            ) : (
-              <FloatingPanel
-                open={open}
-                onOpenChange={setOpen}
-                disabled={disabled}
-                scrollable
-                sizing="fill"
-                fitContent
-                trigger={renderTrigger(fieldDisplay, !!resolvedError || fieldIsInvalid)}
-              >
-                {panelContent(fieldValue, (time) =>
-                  handleChange(time, (v) => field.handleChange(v)),
-                )}
-              </FloatingPanel>
-            )}
+            <InputParts size={size || knobProps.sizeToken}>
+              {renderField(
+                fieldDisplay,
+                !!resolvedError || fieldIsInvalid,
+                mergeFieldHandler(field, "handleBlur", onBlur),
+                (v) => field.handleChange(v),
+                fieldValue,
+              )}
+            </InputParts>
           </FieldLayout>
         );
       }}