@multiplatform.one/forms 7.6.3 → 7.7.0

package/src/fields/TextArea/TextArea.spec.tsx

@@ -426,4 +426,72 @@ describe("TextArea", () => {
       expect(result.container.querySelector("label")?.textContent).toContain("Description");
     });
   });
+
+  describe("RM-TXT-6 fontWeight and T-VALUE textAccent", () => {
+    function inkWeight(el: Element | null): string {
+      if (!el) return "";
+      const html = el as HTMLElement;
+      const fromStyle = html.style.fontWeight || getComputedStyle(html).fontWeight;
+      if (fromStyle && fromStyle !== "normal" && fromStyle !== "") return String(fromStyle);
+      for (const cls of String(html.className ?? "").split(/\s+/)) {
+        const match = cls.match(/(?:^|_)(?:fw|fow|fontWeight)-?(\d+)/i);
+        if (match) return match[1];
+      }
+      return String(fromStyle || "");
+    }
+
+    function isBold(weight: string): boolean {
+      const n = Number.parseInt(weight, 10);
+      if (!Number.isNaN(n)) return n >= 700;
+      return weight === "bold";
+    }
+
+    function colorToken(el: Element | null): string {
+      if (!el) return "";
+      const html = el as HTMLElement;
+      const cls = String(html.className ?? "");
+      // Tamagui atomics (`_col-color11`, `_col-color`) — happy-dom often
+      // leaves getComputedStyle().color empty for theme tokens.
+      const match = cls.match(/_col-(color\d*)\b/);
+      if (match) return match[1];
+      const fromStyle = html.style.color || getComputedStyle(html).color || "";
+      return fromStyle;
+    }
+
+    it("bold: multiline value rides 700 with its helper (RM-TXT-6)", () => {
+      const result = renderWithProviders(
+        <Preset overrides={{ fontWeight: "bold" }}>
+          <TextArea label="Notes" helperText="Be specific" defaultValue="hello" />
+        </Preset>,
+      );
+      const textarea = result.getTextArea() as HTMLTextAreaElement;
+      const helper = result.findTextElement("Be specific") as HTMLElement | undefined;
+      expect(textarea).toBeTruthy();
+      expect(helper).toBeTruthy();
+      expect(isBold(inkWeight(textarea))).toBe(true);
+      expect(isBold(inkWeight(helper ?? null))).toBe(true);
+    });
+
+    it("T-VALUE ignores textAccent: value color at low equals high (no inversion)", () => {
+      const low = renderWithProviders(
+        <Preset overrides={{ textAccent: "low" }}>
+          <TextArea label="Notes" helperText="Be specific" defaultValue="hello" />
+        </Preset>,
+      );
+      const high = renderWithProviders(
+        <Preset overrides={{ textAccent: "high" }}>
+          <TextArea label="Notes" helperText="Be specific" defaultValue="hello" />
+        </Preset>,
+      );
+      const lowValue = colorToken(low.getTextArea());
+      const highValue = colorToken(high.getTextArea());
+      expect(lowValue).toBeTruthy();
+      expect(lowValue).toBe(highValue);
+      // Full ramp, not the accent floor (`$color11`).
+      expect(lowValue).toMatch(/^color$|^rgb|^#/i);
+      expect(lowValue).not.toMatch(/color11/);
+      low.unmount();
+      high.unmount();
+    });
+  });
 });

package/src/fields/TextArea/index.tsx

@@ -250,12 +250,17 @@ export function TextArea({
         >
           <InputParts.TextArea
             innerRef={textAreaRef}
+            size={knobProps.sizeToken}
             {...knobProps.body}
-            color={knobProps.textAccentColor}
+            // fontWeight after size, and baked into ThemedTextArea's size
+            // variant: Tamagui's size atomic otherwise pins 400 (RM-TXT-6).
+            fontWeight={knobProps.body.fontWeight}
+            // T-VALUE: entered text stays the full ramp. textAccent honours
+            // on the FieldLayout helper, not here.
+            color="$color"
             backgroundColor="transparent"
             borderWidth={0}
             borderColor="transparent"
-            size={knobProps.sizeToken}
             {...resizeStyle}
             multiline
             {...textAreaProps}
@@ -265,18 +270,31 @@ export function TextArea({
                   // vertical resize is the autoResize=false fallback only when
                   // the host does not clip — we keep none so LC-71 inset ring
                   // and overflow:hidden stay intact.
+                  // fontWeight is inline so it beats the size atomic in the
+                  // stylesheet (RM-TXT-6); consumer style still ejects after.
                   style: {
                     resize: "none",
                     overflowWrap: "anywhere",
+                    ...(knobProps.body.fontWeight != null
+                      ? { fontWeight: knobProps.body.fontWeight }
+                      : undefined),
                     ...(typeof (textAreaProps as { style?: object } | undefined)?.style === "object"
                       ? (textAreaProps as { style?: object }).style
                       : undefined),
                   },
                   ...(countInside ? { paddingBottom: "$5" } : undefined),
                 }
-              : countInside
-                ? { paddingBottom: "$5" }
-                : undefined)}
+              : {
+                  style: {
+                    ...(knobProps.body.fontWeight != null
+                      ? { fontWeight: knobProps.body.fontWeight }
+                      : undefined),
+                    ...(typeof (textAreaProps as { style?: object } | undefined)?.style === "object"
+                      ? (textAreaProps as { style?: object }).style
+                      : undefined),
+                  },
+                  ...(countInside ? { paddingBottom: "$5" } : undefined),
+                })}
             placeholderTextColor={theme.placeholderColor?.val ?? formCommonColors.muted}
             {...(maxLength != null ? { maxLength } : undefined)}
             {...(placeholder !== undefined ? { placeholder } : undefined)}

package/src/fields/TimePicker/TimePicker.stories.tsx

@@ -35,6 +35,11 @@ const meta: Meta<typeof TimePicker> = {
     minuteStep: { control: "number", description: "Minute increment step" },
     showSeconds: { control: "boolean" },
     placeholder: { control: "text" },
+    native: {
+      control: "boolean",
+      description:
+        "On device, omit (default) for the OS time wheel. Set false for the catalog panel.",
+    },
   },
 };
 
@@ -224,3 +229,11 @@ export const InTable: Story = {
     );
   },
 };
+
+export const NativeOsWheel: Story = {
+  name: "Native OS wheel",
+  args: {
+    label: "Start Time",
+    helperText: "Device default: iOS spinner / Android dialog. native={false} keeps the catalog.",
+  },
+};

package/src/fields/TimePicker/catalog.tsx

@@ -0,0 +1,265 @@
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { LabelProps, SizeTokens } from "tamagui";
+import { isWeb } from "tamagui";
+import { Skeleton } from "../../Skeleton";
+import { Field, FieldLayout } from "../../fieldLayout";
+import { FloatingPanel } from "../../FloatingPanel";
+import { Input as InputParts } from "../../InputParts";
+import { t } from "../../shared/t";
+import {
+  getFieldError,
+  mergeFieldHandler,
+  useFormField,
+  useResolvedValidators,
+} from "../../shared/utils";
+import type { AnyFormApi } from "../../types";
+import {
+  TimePanel,
+  TimePickerClearButton,
+  TimePickerInputTrigger,
+  formatTimeDisplay,
+  isValidTimeString,
+  type TimeFormat,
+} from "./parts";
+
+export type { TimeFormat } from "./parts";
+export { formatTimeDisplay, isValidTimeString, parseTimeString, toTimeString } from "./parts";
+
+export interface TimePickerProps {
+  name?: string;
+  form?: AnyFormApi;
+  validators?: Record<string, unknown>;
+  label?: ReactNode;
+  labelProps?: Omit<LabelProps, "htmlFor" | "ref">;
+  helperText?: string;
+  error?: string | boolean;
+  required?: boolean;
+  size?: SizeTokens;
+  id?: string;
+  /** Time string in "HH:MM" or "HH:MM:SS" 24h format */
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  onBlur?: (...args: any[]) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  /** Display format (default "12h") */
+  timeFormat?: TimeFormat;
+  /** Minute step increment (default 5) */
+  minuteStep?: number;
+  /** Show seconds column (default false) */
+  showSeconds?: boolean;
+  placeholder?: string;
+  clockIcon?: ReactNode;
+  /** When true, renders a skeleton placeholder instead of the time picker */
+  skeleton?: boolean;
+  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
+  compact?: boolean;
+  /** Native only. Omit for the OS time wheel; `false` keeps the catalog panel. */
+  native?: boolean;
+}
+
+export function TimePicker({
+  name,
+  form: formProp,
+  validators,
+  label,
+  labelProps,
+  helperText,
+  error,
+  required,
+  size,
+  id: idProp,
+  value: valueProp,
+  defaultValue,
+  onChange,
+  onBlur,
+  disabled,
+  readOnly,
+  timeFormat = "12h",
+  minuteStep = 5,
+  showSeconds = false,
+  placeholder = t("Select time"),
+  clockIcon,
+  skeleton,
+  compact,
+}: TimePickerProps) {
+  const { resolvedForm, knobProps, id } = useFormField({
+    form: formProp,
+    id: idProp,
+    compact,
+  });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const [open, setOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState<string>(() => valueProp ?? defaultValue ?? "");
+  useEffect(() => {
+    if (valueProp === undefined) return;
+    setInternalValue(valueProp);
+  }, [valueProp]);
+  const value = internalValue;
+  const valueIsInvalid = !!value.trim() && !isValidTimeString(value);
+  const formatError = valueIsInvalid ? t("Invalid time value") : undefined;
+
+  const displayValue = useMemo(
+    () => (valueIsInvalid ? "" : formatTimeDisplay(value, timeFormat, showSeconds)),
+    [value, valueIsInvalid, timeFormat, showSeconds],
+  );
+
+  const handleChange = useCallback(
+    (time: string, fieldChange?: (v: any) => void) => {
+      setInternalValue(time);
+      fieldChange?.(time);
+      onChange?.(time);
+    },
+    [onChange],
+  );
+
+  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: (next: string) => void) => (
+    <TimePanel
+      value={currentValue || "00:00"}
+      onChange={onValueChange}
+      timeFormat={timeFormat}
+      minuteStep={minuteStep}
+      showSeconds={showSeconds}
+    />
+  );
+
+  if (skeleton) {
+    return (
+      <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
+        <Skeleton variant="rounded" width="100%" height={knobProps.sizeToken} />
+      </FieldLayout>
+    );
+  }
+
+  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}
+        sizing="grow"
+        widthMode="at-least-trigger"
+        triggerA11y={{
+          label: (typeof label === "string" && label) || t("Time"),
+          value: triggerValue || placeholder,
+          hint: typeof helperText === "string" ? helperText : undefined,
+        }}
+        trigger={renderTrigger(triggerValue, hasError, fieldChange)}
+        triggerEnd={
+          !isWeb && triggerValue ? (
+            <TimePickerClearButton onClear={() => handleClear(fieldChange)} disabled={disabled} />
+          ) : undefined
+        }
+      >
+        {panelContent(fieldValue ?? value, (time) => handleChange(time, fieldChange))}
+      </FloatingPanel>
+    );
+  };
+
+  if (!resolvedForm || !name) {
+    return (
+      <FieldLayout
+        id={id}
+        label={label}
+        labelProps={labelProps}
+        error={error || formatError}
+        helperText={helperText}
+        required={required}
+        size={size}
+        knobProps={knobProps}
+        onBlur={onBlur}
+        disabled={disabled}
+      >
+        <InputParts size={size || knobProps.sizeToken}>
+          {renderField(displayValue, !!error || valueIsInvalid, onBlur)}
+        </InputParts>
+      </FieldLayout>
+    );
+  }
+
+  return (
+    <Field
+      form={resolvedForm}
+      name={name}
+      defaultValue={defaultValue}
+      validators={resolvedValidators}
+    >
+      {(field) => {
+        const resolvedError = getFieldError(field, error);
+        const fieldValue = (field.state.value as string) ?? "";
+        const fieldIsInvalid = !!fieldValue.trim() && !isValidTimeString(fieldValue);
+        const fieldFormatError = fieldIsInvalid ? t("Invalid time value") : undefined;
+        const fieldDisplay = fieldIsInvalid
+          ? ""
+          : formatTimeDisplay(fieldValue, timeFormat, showSeconds);
+        return (
+          <FieldLayout
+            id={id}
+            label={label}
+            labelProps={labelProps}
+            error={resolvedError || fieldFormatError}
+            helperText={helperText}
+            required={required}
+            size={size}
+            knobProps={knobProps}
+            onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
+            disabled={disabled}
+          >
+            <InputParts size={size || knobProps.sizeToken}>
+              {renderField(
+                fieldDisplay,
+                !!resolvedError || fieldIsInvalid,
+                mergeFieldHandler(field, "handleBlur", onBlur),
+                (v) => field.handleChange(v),
+                fieldValue,
+              )}
+            </InputParts>
+          </FieldLayout>
+        );
+      }}
+    </Field>
+  );
+}

package/src/fields/TimePicker/index.native.tsx

@@ -0,0 +1,229 @@
+/**
+ * Native TimePicker — iOS time wheel / Android time dialog.
+ */
+import { useCallback, useEffect, useState } from "react";
+import { Pressable as RNPressable } from "react-native";
+import { Field, FieldLayout } from "../../fieldLayout";
+import { Input as InputParts } from "../../InputParts";
+import { Skeleton } from "../../Skeleton";
+import { t } from "../../shared/t";
+import {
+  getFieldError,
+  mergeFieldHandler,
+  useFormField,
+  useResolvedValidators,
+} from "../../shared/utils";
+import { OsDateTimeSheet } from "../nativeDateTime/OsDateTimeSheet";
+import { TimePicker as CatalogTimePicker } from "./catalog";
+import {
+  TimePickerInputTrigger,
+  formatTimeDisplay,
+  isValidTimeString,
+  parseTimeString,
+  toTimeString,
+  type TimeFormat,
+} from "./parts";
+
+export type TimePickerProps = {
+  name?: string;
+  form?: import("../../types").AnyFormApi;
+  validators?: Record<string, unknown>;
+  label?: import("react").ReactNode;
+  labelProps?: Omit<import("tamagui").LabelProps, "htmlFor" | "ref">;
+  helperText?: string;
+  error?: string | boolean;
+  required?: boolean;
+  size?: import("tamagui").SizeTokens;
+  id?: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  onBlur?: (...args: any[]) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  timeFormat?: TimeFormat;
+  minuteStep?: number;
+  showSeconds?: boolean;
+  placeholder?: string;
+  clockIcon?: import("react").ReactNode;
+  skeleton?: boolean;
+  compact?: boolean;
+  native?: boolean;
+};
+
+export type { TimeFormat } from "./parts";
+export { formatTimeDisplay, isValidTimeString, parseTimeString, toTimeString } from "./parts";
+
+function timeToDate(value: string): Date {
+  const { h, m, s } = parseTimeString(value);
+  const d = new Date();
+  d.setHours(h, m, s, 0);
+  return d;
+}
+
+function dateToTime(date: Date, showSeconds: boolean): string {
+  return toTimeString(
+    date.getHours(),
+    date.getMinutes(),
+    showSeconds ? date.getSeconds() : undefined,
+  );
+}
+
+export function TimePicker(props: TimePickerProps) {
+  if (props.native === false) {
+    return <CatalogTimePicker {...props} />;
+  }
+  const {
+    name,
+    form: formProp,
+    validators,
+    label,
+    labelProps,
+    helperText,
+    error,
+    required,
+    size,
+    id: idProp,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    onBlur,
+    disabled,
+    readOnly,
+    timeFormat = "12h",
+    showSeconds = false,
+    placeholder = t("Select time"),
+    clockIcon,
+    skeleton,
+    compact,
+  } = props;
+  const { resolvedForm, knobProps, id } = useFormField({
+    form: formProp,
+    id: idProp,
+    compact,
+  });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const [open, setOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState<string>(() => valueProp ?? defaultValue ?? "");
+  useEffect(() => {
+    if (valueProp === undefined) return;
+    setInternalValue(valueProp);
+  }, [valueProp]);
+  const value = internalValue;
+  const valueIsInvalid = !!value.trim() && !isValidTimeString(value);
+  const formatError = valueIsInvalid ? t("Invalid time value") : undefined;
+
+  const commit = useCallback(
+    (time: string, fieldChange?: (v: unknown) => void) => {
+      setInternalValue(time);
+      fieldChange?.(time);
+      onChange?.(time);
+      setOpen(false);
+    },
+    [onChange],
+  );
+
+  const renderControl = (
+    current: string,
+    hasError?: boolean,
+    fieldChange?: (v: unknown) => void,
+    readonly?: boolean,
+  ) => (
+    <>
+      <RNPressable
+        onPress={() => !disabled && setOpen(true)}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityLabel={label ? undefined : t("Time")}
+        style={{ width: "100%" }}
+      >
+        <TimePickerInputTrigger
+          value={valueIsInvalid ? "" : formatTimeDisplay(current, timeFormat, showSeconds)}
+          placeholder={placeholder}
+          disabled={disabled}
+          error={hasError}
+          id={id}
+          clockIcon={clockIcon}
+          onOpen={() => {}}
+          onClear={() => commit("", fieldChange)}
+          aria-label={label ? undefined : t("Time")}
+          aria-readonly={readonly || undefined}
+          aria-required={required || undefined}
+          aria-invalid={hasError || undefined}
+        />
+      </RNPressable>
+      <OsDateTimeSheet
+        open={open}
+        value={timeToDate(current || "00:00")}
+        mode="time"
+        onCancel={() => setOpen(false)}
+        onConfirm={(date) => commit(dateToTime(date, showSeconds), fieldChange)}
+      />
+    </>
+  );
+
+  if (skeleton) {
+    return (
+      <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
+        <Skeleton variant="rounded" width="100%" height={knobProps.sizeToken} />
+      </FieldLayout>
+    );
+  }
+
+  if (!resolvedForm || !name) {
+    return (
+      <FieldLayout
+        id={id}
+        label={label}
+        labelProps={labelProps}
+        error={formatError || error}
+        helperText={helperText}
+        required={required}
+        size={size}
+        knobProps={knobProps}
+        onBlur={onBlur}
+        disabled={disabled}
+      >
+        <InputParts size={size || knobProps.sizeToken}>
+          {renderControl(value, !!(formatError || error), undefined, readOnly)}
+        </InputParts>
+      </FieldLayout>
+    );
+  }
+
+  return (
+    <Field
+      form={resolvedForm}
+      name={name}
+      defaultValue={defaultValue}
+      validators={resolvedValidators}
+    >
+      {(field) => {
+        const resolvedError = getFieldError(field, error) || formatError;
+        const current = (field.state.value as string | undefined) ?? value;
+        return (
+          <FieldLayout
+            id={id}
+            label={label}
+            labelProps={labelProps}
+            error={resolvedError}
+            helperText={helperText}
+            required={required}
+            size={size}
+            knobProps={knobProps}
+            disabled={disabled}
+          >
+            <InputParts size={size || knobProps.sizeToken}>
+              {renderControl(
+                current,
+                !!resolvedError,
+                mergeFieldHandler(field, "handleChange"),
+                readOnly,
+              )}
+            </InputParts>
+          </FieldLayout>
+        );
+      }}
+    </Field>
+  );
+}