@multiplatform.one/forms 6.0.0

package/src/fields/PhoneInput/dialCodes.ts

@@ -0,0 +1,250 @@
+// Region code → dial code mapping
+export const dialCodes: Record<string, number> = {
+  AC: 247,
+  AD: 376,
+  AE: 971,
+  AF: 93,
+  AG: 1,
+  AI: 1,
+  AL: 355,
+  AM: 374,
+  AO: 244,
+  AR: 54,
+  AS: 1,
+  AT: 43,
+  AU: 61,
+  AW: 297,
+  AX: 358,
+  AZ: 994,
+  BA: 387,
+  BB: 1,
+  BD: 880,
+  BE: 32,
+  BF: 226,
+  BG: 359,
+  BH: 973,
+  BI: 257,
+  BJ: 229,
+  BL: 590,
+  BM: 1,
+  BN: 673,
+  BO: 591,
+  BQ: 599,
+  BR: 55,
+  BS: 1,
+  BT: 975,
+  BW: 267,
+  BY: 375,
+  BZ: 501,
+  CA: 1,
+  CC: 61,
+  CD: 243,
+  CF: 236,
+  CG: 242,
+  CH: 41,
+  CI: 225,
+  CK: 682,
+  CL: 56,
+  CM: 237,
+  CN: 86,
+  CO: 57,
+  CR: 506,
+  CU: 53,
+  CV: 238,
+  CW: 599,
+  CX: 61,
+  CY: 357,
+  CZ: 420,
+  DE: 49,
+  DJ: 253,
+  DK: 45,
+  DM: 1,
+  DO: 1,
+  DZ: 213,
+  EC: 593,
+  EE: 372,
+  EG: 20,
+  EH: 212,
+  ER: 291,
+  ES: 34,
+  ET: 251,
+  FI: 358,
+  FJ: 679,
+  FK: 500,
+  FM: 691,
+  FO: 298,
+  FR: 33,
+  GA: 241,
+  GB: 44,
+  GD: 1,
+  GE: 995,
+  GF: 594,
+  GG: 44,
+  GH: 233,
+  GI: 350,
+  GL: 299,
+  GM: 220,
+  GN: 224,
+  GP: 590,
+  GQ: 240,
+  GR: 30,
+  GT: 502,
+  GU: 1,
+  GW: 245,
+  GY: 592,
+  HK: 852,
+  HN: 504,
+  HR: 385,
+  HT: 509,
+  HU: 36,
+  ID: 62,
+  IE: 353,
+  IL: 972,
+  IM: 44,
+  IN: 91,
+  IO: 246,
+  IQ: 964,
+  IR: 98,
+  IS: 354,
+  IT: 39,
+  JE: 44,
+  JM: 1,
+  JO: 962,
+  JP: 81,
+  KE: 254,
+  KG: 996,
+  KH: 855,
+  KI: 686,
+  KM: 269,
+  KN: 1,
+  KP: 850,
+  KR: 82,
+  KW: 965,
+  KY: 1,
+  KZ: 7,
+  LA: 856,
+  LB: 961,
+  LC: 1,
+  LI: 423,
+  LK: 94,
+  LR: 231,
+  LS: 266,
+  LT: 370,
+  LU: 352,
+  LV: 371,
+  LY: 218,
+  MA: 212,
+  MC: 377,
+  MD: 373,
+  ME: 382,
+  MF: 590,
+  MG: 261,
+  MH: 692,
+  MK: 389,
+  ML: 223,
+  MM: 95,
+  MN: 976,
+  MO: 853,
+  MP: 1,
+  MQ: 596,
+  MR: 222,
+  MS: 1,
+  MT: 356,
+  MU: 230,
+  MV: 960,
+  MW: 265,
+  MX: 52,
+  MY: 60,
+  MZ: 258,
+  NA: 264,
+  NC: 687,
+  NE: 227,
+  NF: 672,
+  NG: 234,
+  NI: 505,
+  NL: 31,
+  NO: 47,
+  NP: 977,
+  NR: 674,
+  NU: 683,
+  NZ: 64,
+  OM: 968,
+  PA: 507,
+  PE: 51,
+  PF: 689,
+  PG: 675,
+  PH: 63,
+  PK: 92,
+  PL: 48,
+  PM: 508,
+  PR: 1,
+  PS: 970,
+  PT: 351,
+  PW: 680,
+  PY: 595,
+  QA: 974,
+  RE: 262,
+  RO: 40,
+  RS: 381,
+  RU: 7,
+  RW: 250,
+  SA: 966,
+  SB: 677,
+  SC: 248,
+  SD: 249,
+  SE: 46,
+  SG: 65,
+  SH: 290,
+  SI: 386,
+  SJ: 47,
+  SK: 421,
+  SL: 232,
+  SM: 378,
+  SN: 221,
+  SO: 252,
+  SR: 597,
+  SS: 211,
+  ST: 239,
+  SV: 503,
+  SX: 1,
+  SY: 963,
+  SZ: 268,
+  TA: 290,
+  TC: 1,
+  TD: 235,
+  TG: 228,
+  TH: 66,
+  TJ: 992,
+  TK: 690,
+  TL: 670,
+  TM: 993,
+  TN: 216,
+  TO: 676,
+  TR: 90,
+  TT: 1,
+  TV: 688,
+  TW: 886,
+  TZ: 255,
+  UA: 380,
+  UG: 256,
+  US: 1,
+  UY: 598,
+  UZ: 998,
+  VA: 39,
+  VC: 1,
+  VE: 58,
+  VG: 1,
+  VI: 1,
+  VN: 84,
+  VU: 678,
+  WF: 681,
+  WS: 685,
+  XK: 383,
+  YE: 967,
+  YT: 262,
+  ZA: 27,
+  ZM: 260,
+  ZW: 263,
+};
+
+export const regionCodes = Object.keys(dialCodes);

package/src/fields/PhoneInput/index.tsx

@@ -0,0 +1,319 @@
+import { GlobeIcon } from "@phosphor-icons/react";
+import type { DeepKeys, DeepValue } from "@tanstack/form-core";
+import type { ComponentProps, FocusEventHandler, ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import { useProps } from "tamagui";
+import { Input, Text, View } from "tamagui";
+import { Skeleton } from "../../Skeleton";
+import { Field, FieldLayout } from "../../fieldLayout";
+import type { SimpleFieldApi, Validator } from "../../types";
+import {
+  getFieldError,
+  mergeFieldHandler,
+  useFormField,
+  useResolvedValidators,
+} from "../../shared/utils";
+import type { FormFieldProps } from "../../fieldLayout";
+import { Input as InputParts } from "../../InputParts";
+import type { FieldComponentProps } from "../../types";
+import { Combobox, type ComboboxOption } from "../Combobox";
+import { dialCodes, regionCodes } from "./dialCodes";
+
+// ── Helpers ───────────────────────────────────────────────────
+
+function countryCodeToFlag(countryCode: string): string {
+  const codePoints = countryCode
+    .toUpperCase()
+    .split("")
+    .map((char) => 127397 + char.charCodeAt(0));
+  return String.fromCodePoint(...codePoints);
+}
+
+function dialPrefix(regionCode: string): string {
+  return `+${dialCodes[regionCode] ?? 1} `;
+}
+
+const countryOptions: ComboboxOption[] = regionCodes.map((code) => ({
+  value: code,
+  label: `${countryCodeToFlag(code)} ${code}  +${dialCodes[code]}`,
+  keywords: `+${dialCodes[code]} ${code}`,
+}));
+
+// ── Types ─────────────────────────────────────────────────────
+
+export type PhoneInputProps<
+  TParentData = Record<string, unknown>,
+  TName extends DeepKeys<TParentData> = DeepKeys<TParentData>,
+  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
+  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+> = Omit<
+  FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+      "children"
+    >
+  > & {
+    readOnly?: boolean;
+    defaultCountry?: string;
+    showFlags?: boolean;
+    placeholder?: string;
+    inputProps?: Omit<ComponentProps<typeof Input>, "value" | "onChangeText" | "ref">;
+    /** When true, renders a skeleton placeholder instead of the phone input */
+    skeleton?: boolean;
+    /** When true, uses compact sizing */
+    compact?: boolean;
+  };
+
+// ── Form Field Renderer ──────────────────────────────────────
+
+interface PhoneInputFieldRendererProps<TData> {
+  field: {
+    state: { value: unknown; meta: { errors: readonly (string | undefined)[] } };
+    handleChange: (value: TData) => void;
+    handleBlur: () => void;
+  };
+  phoneNumber: string;
+  setPhoneNumber: (value: string) => void;
+  errorProp?: string | boolean;
+  size?: string;
+  knobProps: { sizeToken: string };
+  onBlur?: FocusEventHandler<HTMLDivElement>;
+  id?: string;
+  label?: ReactNode;
+  labelProps?: any;
+  helperText?: string;
+  required?: boolean;
+  renderPhoneRow: (hasError?: boolean) => ReactNode;
+}
+
+function PhoneInputFieldRenderer<TData>({
+  field,
+  phoneNumber,
+  setPhoneNumber,
+  errorProp,
+  size,
+  knobProps,
+  onBlur,
+  id,
+  label,
+  labelProps,
+  helperText,
+  required,
+  renderPhoneRow,
+}: PhoneInputFieldRendererProps<TData>) {
+  const lastSyncedRef = useRef<string>("");
+  const didInitRef = useRef(false);
+
+  useEffect(() => {
+    const fieldValue = field.state.value as string;
+    if (fieldValue && fieldValue !== lastSyncedRef.current) {
+      setPhoneNumber(fieldValue);
+      lastSyncedRef.current = fieldValue;
+    }
+  }, [field.state.value, setPhoneNumber]);
+
+  useEffect(() => {
+    if (!didInitRef.current) {
+      didInitRef.current = true;
+      // On mount: never push to field. Just record the current phoneNumber so
+      // subsequent changes are diffed against it. Effect 1 handles syncing any
+      // non-empty defaultValue from field → local state.
+      const fieldValue = field.state.value as string;
+      lastSyncedRef.current = fieldValue || phoneNumber;
+      return;
+    }
+    if (phoneNumber !== lastSyncedRef.current) {
+      lastSyncedRef.current = phoneNumber;
+      field.handleChange(phoneNumber as TData);
+    }
+  }, [field, phoneNumber]);
+
+  const resolvedError = getFieldError(field as SimpleFieldApi<any>, errorProp);
+
+  return (
+    <FieldLayout
+      id={id}
+      label={label}
+      labelProps={labelProps}
+      error={resolvedError}
+      helperText={helperText}
+      required={required}
+      size={size as any}
+      knobProps={knobProps as any}
+      onBlur={mergeFieldHandler(field as SimpleFieldApi<any>, "handleBlur", onBlur)}
+    >
+      <InputParts size={size || knobProps.sizeToken}>{renderPhoneRow(!!resolvedError)}</InputParts>
+    </FieldLayout>
+  );
+}
+
+// ── PhoneInput ───────────────────────────────────────────────
+
+export function PhoneInput<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
+  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+>(props: PhoneInputProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+  const {
+    defaultValue,
+    form,
+    inputProps,
+    defaultCountry = "US",
+    showFlags = true,
+    placeholder = "Phone number",
+    mode,
+    name,
+    preserveValue,
+    validators,
+    disabled,
+    readOnly,
+    label,
+    labelProps,
+    error: errorProp,
+    helperText,
+    required,
+    size,
+    onBlur,
+    skeleton,
+    compact,
+    id: idProp,
+    ..._restProps
+  } = useProps(props);
+
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+
+  const [regionCode, setRegionCode] = useState(defaultCountry);
+  const [phoneNumber, setPhoneNumber] = useState(() => dialPrefix(defaultCountry));
+  const regionCodeMountedRef = useRef(false);
+
+  // Filter phone input to only allow valid phone number characters
+  const handlePhoneChange = (text: string) => {
+    // Allow digits, +, -, (, ), and spaces for phone number formatting
+    const filtered = text.replace(/[^0-9+\-() ]/g, "");
+    setPhoneNumber(filtered);
+  };
+
+  // Only reset phoneNumber when the user explicitly changes the country after mount.
+  // The initial value is already set by useState, so skip the first run to avoid
+  // overwriting a phone number synced from form defaultValues.
+  useEffect(() => {
+    if (!regionCodeMountedRef.current) {
+      regionCodeMountedRef.current = true;
+      return;
+    }
+    if (regionCode && dialCodes[regionCode]) {
+      setPhoneNumber(dialPrefix(regionCode));
+    }
+  }, [regionCode]);
+
+  // Render skeleton placeholder
+  if (skeleton) {
+    return (
+      <InputParts size={size || knobProps.sizeToken}>
+        {label && <Skeleton variant="text" width="30%" height={14} />}
+        <Skeleton variant="rounded" width="100%" height={knobProps.sizeToken} />
+      </InputParts>
+    );
+  }
+
+  const renderPhoneRow = (hasError?: boolean) => (
+    <InputParts.Box>
+      <InputParts.Section>
+        <View data-focus-skip {...(readOnly ? { pointerEvents: "none" as const } : undefined)}>
+          <Combobox
+            options={countryOptions}
+            value={regionCode}
+            onValueChange={(val) => setRegionCode(typeof val === "string" ? val : (val[0] ?? ""))}
+            searchPlaceholder="Search countries..."
+            emptyMessage="No countries found."
+            popoverWidth={280}
+            tabIndex={-1}
+            trigger={(selected) => {
+              const opt = Array.isArray(selected) ? selected[0] : selected;
+              return (
+                <InputParts.Button tabIndex={-1}>
+                  {opt && showFlags ? (
+                    <Text fontSize={20}>{countryCodeToFlag(opt.value)}</Text>
+                  ) : (
+                    <InputParts.Icon color="$placeholderColor">
+                      <GlobeIcon />
+                    </InputParts.Icon>
+                  )}
+                </InputParts.Button>
+              );
+            }}
+          />
+        </View>
+      </InputParts.Section>
+      <InputParts.Section>
+        {/* @ts-expect-error Tamagui Input type widening */}
+        <InputParts.Area
+          keyboardType="numeric"
+          value={phoneNumber}
+          onChangeText={handlePhoneChange}
+          placeholder={placeholder}
+          disabled={disabled}
+          {...(readOnly ? { readOnly: true } : {})}
+          aria-required={required || undefined}
+          aria-invalid={hasError || undefined}
+          aria-readonly={readOnly || undefined}
+          {...inputProps}
+        />
+      </InputParts.Section>
+    </InputParts.Box>
+  );
+
+  if (!resolvedForm || !name) {
+    return (
+      <FieldLayout
+        id={id}
+        label={label}
+        labelProps={labelProps}
+        error={errorProp}
+        helperText={helperText}
+        required={required}
+        size={size}
+        knobProps={knobProps as any}
+        onBlur={onBlur}
+      >
+        <InputParts size={size || knobProps.sizeToken}>{renderPhoneRow(!!errorProp)}</InputParts>
+      </FieldLayout>
+    );
+  }
+
+  return (
+    <Field
+      defaultValue={defaultValue}
+      form={resolvedForm}
+      mode={mode}
+      name={name}
+      preserveValue={preserveValue}
+      validators={resolvedValidators}
+    >
+      {(field) => (
+        <PhoneInputFieldRenderer
+          field={field}
+          phoneNumber={phoneNumber}
+          setPhoneNumber={setPhoneNumber}
+          errorProp={errorProp}
+          size={size as string | undefined}
+          knobProps={knobProps as { sizeToken: string }}
+          onBlur={onBlur}
+          id={id}
+          label={label}
+          labelProps={labelProps}
+          helperText={helperText}
+          required={required}
+          renderPhoneRow={renderPhoneRow}
+        />
+      )}
+    </Field>
+  );
+}

package/src/fields/Progress/Progress.spec.tsx

@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Form } from "../../Form";
+import { Progress } from "./index";
+
+describe("Progress", () => {
+  describe("without form context", () => {
+    it("renders with label", () => {
+      const result = renderWithProviders(<Progress label="Loading" name="p" value={50} />);
+      expect(result.findTextElement("Loading")).toBeDefined();
+    });
+
+    it("renders required label with asterisk", () => {
+      const result = renderWithProviders(
+        <Progress label="Required" name="req" value={0} required />,
+      );
+      const label = result.container.querySelector("label");
+      expect(label?.textContent).toContain("*");
+    });
+
+    it("renders with helper text", () => {
+      const result = renderWithProviders(
+        <Progress label="Progress" name="p" value={75} helperText="75% complete" />,
+      );
+      expect(result.findTextElement("75% complete")).toBeDefined();
+    });
+
+    it("renders skeleton placeholder", () => {
+      const result = renderWithProviders(<Progress label="Loading" name="l" value={0} skeleton />);
+      const progressbar = result.container.querySelector("[role='progressbar']");
+      expect(progressbar).toBeNull();
+    });
+
+    it("renders progress bar element", () => {
+      const result = renderWithProviders(<Progress label="Progress" name="p" value={40} />);
+      const progressbar = result.container.querySelector("[role='progressbar']");
+      expect(progressbar).toBeTruthy();
+    });
+  });
+
+  describe("with form context", () => {
+    it("renders inside form", () => {
+      const result = renderWithProviders(
+        <Form formOptions={{ defaultValues: { progress: 0 } }} submitText="Submit">
+          <Progress name="progress" label="Progress" value={50} />
+        </Form>,
+      );
+      expect(result.findTextElement("Progress")).toBeDefined();
+    });
+  });
+});