@incodetech/prizma-core-screens 0.1.0

package/src/FormScreen.tsx

@@ -0,0 +1,213 @@
+import React, { forwardRef, type CSSProperties, type ReactNode } from 'react';
+import { PrizmaTitle } from '@incodetech/prizma-core-web/title';
+import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
+import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
+import { PrizmaScreenNav } from './ScreenNav';
+import type {
+  PrizmaScreenActionHandler,
+  PrizmaScreenChromeProps,
+  PrizmaScreenOverrides,
+} from './types';
+import './ScreenLayout.css';
+import './FormScreen.css';
+
+/**
+ * A step of the Prizma spacing scale, named rather than valued. The archetype's
+ * two field-stack offsets are SELECTED from this scale by the module — it can
+ * never introduce a number of its own, so "no module re-declares spacing" still
+ * holds while a section that genuinely draws a different rhythm can be matched.
+ */
+export type PrizmaFormFieldsSpacing = '4' | '8' | '12' | '16' | '20' | '24' | '32' | '40';
+
+export interface PrizmaFormScreenProps
+  extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> ,
+    PrizmaScreenChromeProps {
+  /**
+   * An optional block between the logo nav and the title block — the archetype
+   * had no slot there at all. eKYC's Figma draws a two-segment Core
+   * `PrizmaStepper` across the full content width on all SIX of its form frames
+   * (page 1 blue + grey, page 2 pale + blue, page 2 loading both green), and it
+   * is the only chrome that tells the two pages apart. The slot takes a
+   * `ReactNode` so the module supplies Core's own component: the archetype
+   * invents no primitive and declares no spacing of its own — both offsets live
+   * once in `ScreenLayout.css` (`.prizma-screen-layout__progress`). Omit it and
+   * nothing renders, so every existing consumer is byte-identical.
+   * DEVIATIONS #EK-1.
+   */
+  progress?: ReactNode;
+  /** Screen title (H2). */
+  title: string;
+  /** Description below the title (H5). */
+  subtitle?: string;
+  /** CTA label. Omit for keyboard-driven states with no visible CTA. */
+  ctaLabel?: string;
+  /** Disable the CTA (empty/invalid form states). */
+  ctaDisabled?: boolean;
+  /**
+   * Request in flight: Core's `PrizmaButton` swaps the label for its designed
+   * spinner. Every form module draws this — Phone Input's `verify.loading` and
+   * `OTP.processing` both put the spinner IN THE CTA, not in the field — so the
+   * slot belongs to the archetype rather than to each module (#F-32 precedent,
+   * DEVIATIONS #PI-5).
+   */
+  ctaLoading?: boolean;
+  /** Accessible / visible loading copy. No hardcoded English default. */
+  ctaLoadingLabel?: string;
+  /**
+   * A single standalone link below the primary, rendered as Core's
+   * `tertiary-link` button (full width, the same idiom as archetype A).
+   * For a SENTENCE carrying links inline, use `linkContent` instead — an L
+   * button is `width: 100%; min-height: 56px` and cannot sit inside a line of
+   * body text.
+   */
+  linkLabel?: string;
+  /**
+   * A composed line below the primary: body copy with inline links, e.g. Phone
+   * Input's "Didn't receive the code? **Resend code** or **Change phone
+   * number**" — plain text plus TWO separately-actionable links. Core ships no
+   * inline-link primitive, so the foundation provides the recipe
+   * (`__inline-prompt` / `__inline-link` in ScreenLayout.css) and the module
+   * supplies the sentence. DEVIATIONS #PI-10.
+   */
+  linkContent?: ReactNode;
+  /** "verified by" attribution copy for the footer tag. */
+  verifiedLabel: string;
+  /** The field stack — Core inputs (PrizmaTextField, PrizmaOtp, PrizmaDropdown…). */
+  children?: ReactNode;
+  /**
+   * Title block → field stack offset. Defaults to Spacing/32, the value Phone
+   * Input's sections draw (DEVIATIONS #PI-2), so every existing consumer is
+   * untouched. Data Sharing Consent's `User Consent` sections draw Spacing/24
+   * (27151:321: title ends 28, the disclosure starts at 52) — DEVIATIONS #DSC-1.
+   */
+  fieldsOffset?: PrizmaFormFieldsSpacing;
+  /**
+   * Gap BETWEEN rows of the field stack. Defaults to Spacing/16. Data Sharing
+   * Consent draws Spacing/24 between the disclosure and the first consent card
+   * (304 → 328) and between every card (459 → 557 → 655, each 74 tall,
+   * 29645:5306) — DEVIATIONS #DSC-1.
+   */
+  fieldsGap?: PrizmaFormFieldsSpacing;
+  /**
+   * Let the field stack PAN inside the column when the section draws a middle
+   * taller than the 844 frame: the title, the CTA and the anchored tag hold
+   * still while the fields scroll, and the clipped content stops Spacing/16
+   * above the CTA rather than running under it. Five Wave-3 modules hand-rolled
+   * this in their own stylesheets (CURP #CURP-1, Forms, Qualified Signature,
+   * eKYB, Data Sharing Consent); it is the archetype's now. DEVIATIONS #DSC-2.
+   */
+  scrollFields?: boolean;
+  navLabel?: string;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Archetype E — Form / Input (GUIDELINES.md §6-E).
+ * Nav → title block → field stack → CTA → verified tag. Module states
+ * (typing / filled / loading) are separate screens sharing this identical
+ * layout, changing only field content.
+ */
+export const PrizmaFormScreen = forwardRef<HTMLDivElement, PrizmaFormScreenProps>(
+  (
+    {
+      progress,
+      title,
+      subtitle,
+      ctaLabel,
+      ctaDisabled,
+      ctaLoading = false,
+      ctaLoadingLabel,
+      linkLabel,
+      linkContent,
+      verifiedLabel,
+      children,
+      fieldsOffset,
+      fieldsGap,
+      scrollFields = false,
+      navLabel,
+      screenId,
+      showHeader = true,
+      showFooter = true,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaScreenShell ref={ref} {...shell}>
+      <PrizmaScreenNav reserved={!showHeader} logo={overrides?.logo} navLabel={navLabel} />
+      <div className="prizma-screen-layout__content">
+        {progress ? (
+          <div className="prizma-screen-layout__progress">{progress}</div>
+        ) : null}
+        <PrizmaTitle
+          variant={overrides?.align === 'left' ? 'left' : 'centered'}
+          title={title}
+          showSubtitle={Boolean(subtitle)}
+          subtitle={subtitle}
+        />
+        <div
+          className={[
+            'prizma-form-screen__fields',
+            scrollFields ? 'prizma-form-screen__fields--scroll' : null,
+          ]
+            .filter(Boolean)
+            .join(' ')}
+          /* Custom properties only — the VALUES stay in FormScreen.css, keyed
+             off the Prizma spacing scale. Nothing here is a literal. */
+          style={
+            fieldsOffset || fieldsGap
+              ? ({
+                  ...(fieldsOffset
+                    ? { '--pfs-fields-offset': `var(--prizma-spacing-${fieldsOffset})` }
+                    : null),
+                  ...(fieldsGap
+                    ? { '--pfs-fields-gap': `var(--prizma-spacing-${fieldsGap})` }
+                    : null),
+                } as CSSProperties)
+              : undefined
+          }
+        >
+          {children}
+        </div>
+        {ctaLabel || linkLabel || linkContent ? (
+          <div className="prizma-screen-layout__cta prizma-form-screen__cta">
+            {ctaLabel ? (
+              <PrizmaButton
+                variant="primary"
+                size="L"
+                disabled={ctaDisabled}
+                loading={ctaLoading}
+                loadingLabel={ctaLoadingLabel}
+                onClick={() => onAction?.({ type: 'cta', screenId })}
+              >
+                {ctaLabel}
+              </PrizmaButton>
+            ) : null}
+            {linkLabel ? (
+              <PrizmaButton
+                variant="tertiary-link"
+                size="L"
+                onClick={() => onAction?.({ type: 'secondary', screenId })}
+              >
+                {linkLabel}
+              </PrizmaButton>
+            ) : null}
+            {linkContent}
+          </div>
+        ) : null}
+        {showFooter ? (
+          <div className="prizma-screen-layout__footer prizma-screen-layout__footer--pinned">
+            <PrizmaTag label={verifiedLabel} />
+          </div>
+        ) : null}
+      </div>
+    </PrizmaScreenShell>
+  ),
+);
+PrizmaFormScreen.displayName = 'PrizmaFormScreen';
+
+export default PrizmaFormScreen;

package/src/FormsChoiceScreen.tsx

@@ -0,0 +1,150 @@
+import React, { forwardRef } from 'react';
+import {
+  PrizmaDropdown,
+  type PrizmaDropdownOption,
+} from '@incodetech/prizma-core-web/dropdown';
+import { PrizmaCountryFlag, type PrizmaCountry } from '@incodetech/prizma-core-web/combined';
+import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  FormsChoiceKey,
+  FormsChoiceOptionSet,
+  FormsChoiceState,
+  FormsStrings,
+} from './FormsStrings';
+import './ScreenLayout.css';
+
+export interface FormsChoiceScreenProps
+  extends Omit<
+    PrizmaFormScreenProps,
+    'title' | 'subtitle' | 'ctaLabel' | 'verifiedLabel' | 'children' | 'navLabel'
+  > {
+  /** Module copy — this screen reads one `choice.*` slice. */
+  strings: FormsStrings;
+  /** Which choice purple section to render. Default `residence`. */
+  field?: FormsChoiceKey;
+  /** Which option list the menu carries. Default `countries`. */
+  optionSet?: FormsChoiceOptionSet;
+  /** Which treatment of that section. Default `closed`. */
+  state?: FormsChoiceState;
+  /**
+   * The option rows. Runtime data, never copy — the host supplies its own
+   * localized list, the same contract Phone Input's `countries` prop carries.
+   * Ignored when `optionSet` is `countries`, which is driven by `countries`.
+   */
+  options?: PrizmaDropdownOption[];
+  /**
+   * The selectable countries for the `countries` option set. Each row draws
+   * Core's canonical flag raster through `PrizmaDropdown.renderLeading` — the
+   * very use case that component's docstring names.
+   */
+  countries?: PrizmaCountry[];
+  /** The selected option value, where the section draws one. */
+  value?: string;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Forms & Data Entry — the choice screen, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for eight purple sections across four parent groups —
+ * `forms.country` (Residence: `default` / `open`; the third frame,
+ * `forms.residencetyping`, needs a search query Core cannot seed — DEVIATIONS
+ * #FDE-6), `Forms.nationality`, `forms.select` (×2), `forms.yesNo` (×2) and the
+ * `forms.country` question variant (×2). Measured against the 390 frames the
+ * three groups draw a BYTE-IDENTICAL closed field: same title block, same
+ * labelled `PrizmaDropdown`, same "Select an option" trigger, same CTA. What
+ * separates them is (a) the label above the field and (b) what the OPEN menu
+ * lists — so the module carries a `field` axis and an `optionSet` axis instead
+ * of eight screens, and the demo enumerates the closed state ONCE per distinct
+ * label rather than three times identically.
+ *
+ * Three notes:
+ *
+ * 1. The section draws a VISIBLE label row, so the copy uses Core's `label`
+ *    slot. Phone Input and Email Input ride `aria-label` because their Figma
+ *    draws no label (DEVIATIONS #PI-4, #EI-2) — this module's does.
+ * 2. The open sections draw the trigger with the bold blue border. Core paints
+ *    that on `:focus-visible` only, which a static spec state never reaches, so
+ *    the screen uses the documentation-only `forceState="focused"` the
+ *    component already exposes for exactly this. Nothing is re-styled.
+ * 3. `forceOpen` IS the open-menu spec state — a screen is one static frame,
+ *    never a live interaction. Its missing sibling is a `searchValue`: without
+ *    one the TYPING frame renders as `open` with an empty search bar, so that
+ *    section is not enumerated rather than shipped as a duplicate (#FDE-6).
+ */
+export const FormsChoiceScreen = forwardRef<HTMLDivElement, FormsChoiceScreenProps>(
+  (
+    {
+      strings,
+      field = 'residence',
+      optionSet = 'countries',
+      state = 'closed',
+      options,
+      countries,
+      value,
+      screenId = `forms-choice-${field}-${optionSet}-${state}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const copy = strings.choice[field];
+    const open = state === 'open';
+
+    // The `countries` set is the one Figma draws with a search bar and a flag
+    // per row; `generic` and `yesNo` draw a bare list.
+    const isCountries = optionSet === 'countries';
+    const countryList = countries ?? [];
+    const rows: PrizmaDropdownOption[] = isCountries
+      ? countryList.map((c) => ({ value: c.code, label: c.name }))
+      : (options ?? []);
+
+    return (
+      <PrizmaFormScreen
+        ref={ref}
+        title={copy.title}
+        subtitle={copy.subtitle}
+        ctaLabel={copy.ctaLabel}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      >
+        <PrizmaDropdown
+          label={copy.label}
+          placeholder={copy.placeholder}
+          options={rows}
+          value={value ?? null}
+          /* The open sections draw the focused border; Core's own
+             documentation-only modifier supplies it (see note 2). */
+          forceState={open ? 'focused' : undefined}
+          forceOpen={open}
+          searchable={isCountries}
+          searchPlaceholder={copy.searchPlaceholder}
+          clearSearchLabel={copy.clearSearchLabel}
+          /* Core's canonical flag raster in the option's leading slot — the
+             primitive Phone Input had to do without (DEVIATIONS #PI-3) and
+             `PrizmaDropdown.renderLeading`'s own docstring asks for. */
+          renderLeading={
+            isCountries
+              ? (option) => {
+                  const match = countryList.find((c) => c.code === option.value);
+                  return match ? <PrizmaCountryFlag country={match} /> : null;
+                }
+              : undefined
+          }
+        />
+      </PrizmaFormScreen>
+    );
+  },
+);
+FormsChoiceScreen.displayName = 'FormsChoiceScreen';
+
+export default FormsChoiceScreen;

package/src/FormsErrorScreen.tsx

@@ -0,0 +1,61 @@
+import React, { forwardRef } from 'react';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { FormsStrings } from './FormsStrings';
+import './ScreenLayout.css';
+
+export interface FormsErrorScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'subtitle' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `error` slice. */
+  strings: FormsStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Forms & Data Entry — the error verdict, built on the Result archetype
+ * (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ *
+ * Figma: the purple `forms.error` section (2014:21506) — the negative status
+ * mark over "Something went wrong" with a single "Try again" CTA and the
+ * anchored tag. One button, so archetype F rather than C (its sibling
+ * `forms.success` draws none and stays on C — see `FormsSuccessScreen`).
+ *
+ * The module has no connectivity family: unlike Phone Input, the Forms sections
+ * carry ONE generic error screen and no `noConnection` variant, so there is no
+ * `variant` axis and no Wi-Fi glyph here. Logged so the asymmetry is not read
+ * as an omission (the #EI-5 precedent).
+ */
+export const FormsErrorScreen = forwardRef<HTMLDivElement, FormsErrorScreenProps>(
+  (
+    {
+      strings,
+      screenId = 'forms-error',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaResultScreen
+      ref={ref}
+      status="error"
+      title={strings.error.title}
+      subtitle={strings.error.subtitle}
+      ctaLabel={strings.error.ctaLabel}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+FormsErrorScreen.displayName = 'FormsErrorScreen';
+
+export default FormsErrorScreen;

package/src/FormsFieldScreen.tsx

@@ -0,0 +1,198 @@
+import React, { forwardRef } from 'react';
+import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
+import { PrizmaDateField } from '@incodetech/prizma-core-web/date-field';
+import { PrizmaMultiline } from '@incodetech/prizma-core-web/multiline';
+import { PrizmaCombined, type PrizmaCountry } from '@incodetech/prizma-core-web/combined';
+import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { FormsFieldKey, FormsFieldState, FormsStrings } from './FormsStrings';
+import './ScreenLayout.css';
+
+export interface FormsFieldScreenProps
+  extends Omit<
+    PrizmaFormScreenProps,
+    'title' | 'subtitle' | 'ctaLabel' | 'verifiedLabel' | 'children' | 'navLabel'
+  > {
+  /** Module copy — this screen reads one `fields.*` slice. */
+  strings: FormsStrings;
+  /** Which single-field purple section to render. */
+  field: FormsFieldKey;
+  /** Which treatment of that section. Default `default`. */
+  state?: FormsFieldState;
+  /** The value as typed. Empty renders the placeholder. */
+  value?: string;
+  /**
+   * `phone` only — the dial code the combined field opens on. Runtime data,
+   * not copy; Core's `PrizmaCombined` ships its own list and defaults to
+   * Serbia, which is exactly what `forms.phoneNumber` draws.
+   */
+  country?: PrizmaCountry;
+  /** `phone` only — the selectable dial codes. */
+  countries?: PrizmaCountry[];
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Forms & Data Entry — the single-field screen, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for eight purple sections — `forms.idnumber`, `forms.cpf`,
+ * `forms.email`, `forms.phone`, `forms.text`, two of the three `forms.dob`
+ * sections (`forms.DOB.iconButton` draws an open month grid Core does not ship
+ * — DEVIATIONS #FDE-5) and the two `forms.inputerror` sections. Measured
+ * against the 390 frames they
+ * share an identical skeleton: nav → Title → Spacing/32 → ONE labelled field →
+ * primary CTA → tag. What changes is which Core input sits in the stack and
+ * what state it is in, which is exactly what GUIDELINES §6-E means by "states
+ * are separate screens sharing the identical layout".
+ *
+ * Four rules carried over from the Wave-3 modules that paid for them:
+ *
+ * 1. Every field is UNCONTROLLED (`defaultValue`). A screen is one static spec
+ *    state, so no `onChange` is needed — and Core's `readOnly`, the other way
+ *    to make a field inert, paints the DISABLED grey surface on states Figma
+ *    draws white (DEVIATIONS #PI-6). Nothing here greys, so nothing is
+ *    disabled either.
+ * 2. `focused` gets Core's OWN `--focused` modifier through
+ *    `className` — the class its CSS already implements beside `:focus-within`.
+ *    The input family has no `forceState` prop yet, unlike `PrizmaDropdown`
+ *    (DEVIATIONS #PI-7); nothing is re-styled here.
+ * 3. `clearable` is left OFF on every state. Figma draws no clear ✕ on any of
+ *    these sections, and on the two error sections Core could not reveal one
+ *    anyway — its `:focus-within:not(--error)` guard makes the prop a silent
+ *    no-op there (DEVIATIONS #CURP-3). Setting a prop that cannot paint is the
+ *    defect that shipped on CURP.
+ * 4. The in-flight spinner, when a host wires one, rides the CTA
+ *    (`ctaLoading`), never the field (DEVIATIONS #PI-5).
+ *
+ * Unlike Phone Input and Email Input, EVERY section here draws a visible label
+ * row above the field, so the copy uses Core's `label` slot rather than
+ * `aria-label` (#PI-4 / #EI-2 do not apply — see DEVIATIONS #FDE-1).
+ */
+export const FormsFieldScreen = forwardRef<HTMLDivElement, FormsFieldScreenProps>(
+  (
+    {
+      strings,
+      field,
+      state = 'default',
+      value,
+      country,
+      countries,
+      screenId = `forms-field-${field}-${state}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const copy = strings.fields[field];
+
+    // The two `forms.inputerror` sections are the only ones that paint the
+    // negative surface, and they are also the only ones that grey the CTA —
+    // the canvas sticky's "optimistic rule" (the button starts enabled and
+    // greys only after a submit that failed validation).
+    const emptyError = state === 'emptyError';
+    const invalidError = state === 'invalidError';
+    const invalid = emptyError || invalidError;
+    const errorText = emptyError ? copy.emptyErrorText : copy.invalidErrorText;
+
+    // `forms.DOB.typing` draws the blue focus ring. Its neighbour
+    // `forms.DOB.iconButton` draws the same ring UNDER an open month grid, and
+    // Core owns no picker to open — so that section has no state here rather
+    // than a second focus ring wearing its name. See FormsStrings.
+    const focused = state === 'focused';
+    const focusClass = (modifier: string) => (focused ? modifier : undefined);
+
+    // The `emptyError` section draws the field with NOTHING in it — not even
+    // the grey placeholder every resting section shows. Passing no placeholder
+    // is the screen choosing content, not overriding a Core treatment.
+    const placeholder = emptyError ? undefined : copy.placeholder;
+
+    const renderField = () => {
+      switch (field) {
+        case 'dob':
+          return (
+            <PrizmaDateField
+              className={focusClass('prizma-input-datefield--focused')}
+              label={copy.label}
+              placeholder={placeholder}
+              defaultValue={value ?? ''}
+              error={invalid}
+              errorText={invalid ? errorText : undefined}
+              calendarLabel={copy.calendarLabel}
+            />
+          );
+        case 'phone':
+          return (
+            <PrizmaCombined
+              label={copy.label}
+              placeholder={placeholder}
+              defaultValue={value ?? ''}
+              defaultCountry={country}
+              countries={countries}
+              countryListLabel={copy.countryListLabel}
+              error={invalid}
+              errorText={invalid ? errorText : undefined}
+            />
+          );
+        case 'text':
+          return (
+            <PrizmaMultiline
+              className={focusClass('prizma-input-multiline--focused')}
+              label={copy.label}
+              placeholder={placeholder}
+              defaultValue={value ?? ''}
+              error={invalid}
+              errorText={invalid ? errorText : undefined}
+              clearable={false}
+              clearLabel={copy.clearLabel}
+            />
+          );
+        default:
+          return (
+            <PrizmaTextField
+              className={focusClass('prizma-input-textfield--focused')}
+              label={copy.label}
+              placeholder={placeholder}
+              defaultValue={value ?? ''}
+              /* `forms.email` is the one section with e-mail semantics; the
+                 rest are plain text keys. */
+              type={field === 'email' ? 'email' : 'text'}
+              inputMode={field === 'email' ? 'email' : undefined}
+              autoComplete={field === 'email' ? 'email' : 'off'}
+              autoCapitalize={field === 'email' ? 'none' : undefined}
+              spellCheck={false}
+              error={invalid}
+              errorText={invalid ? errorText : undefined}
+              clearable={false}
+              clearLabel={copy.clearLabel}
+            />
+          );
+      }
+    };
+
+    return (
+      <PrizmaFormScreen
+        ref={ref}
+        title={copy.title}
+        subtitle={copy.subtitle}
+        ctaLabel={copy.ctaLabel}
+        ctaDisabled={invalid}
+        ctaLoadingLabel={copy.ctaLoadingLabel}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      >
+        {renderField()}
+      </PrizmaFormScreen>
+    );
+  },
+);
+FormsFieldScreen.displayName = 'FormsFieldScreen';
+
+export default FormsFieldScreen;

package/src/FormsLayout.css

@@ -0,0 +1,45 @@
+/* Forms & Data Entry — module layout additions.
+ *
+ * ONE rule, and it declares no spacing. The content column, the 24px gutters,
+ * the title → fields Spacing/32, the field gaps, the CTA column and the
+ * anchored footer all stay the foundation's (`ScreenLayout.css`,
+ * `FormScreen.css`). The rule RELEASES a constraint that a purple section
+ * contradicts — the same idiom as Phone Input's `width: auto` on Core's
+ * fill-width Dropdown (#PI-1). No primitive is invented, no Core value
+ * repainted, no `!important`.
+ *
+ * The module's other layout need — the multi-field stacks that are taller than
+ * the 844 frame — is NOT here: it is the archetype's `scrollFields` prop
+ * (`PrizmaFormScreen`, `.prizma-form-screen__fields--scroll`), which carries
+ * both the `overflow-y: auto` and the Spacing/16 margin that makes the cut read
+ * as a cut. `FormsLongFormScreen` passes it. DEVIATIONS #DSC-2 / #CURP-1.
+ */
+
+/* ── The focused row keeps its clear ✕ ───────────────────────────────────────
+ * `longform.focused` (9:24653) draws the e-mail row with the blue focus ring,
+ * the partial value AND the grey clear ✕ at the field's right edge.
+ *
+ * Core renders that button (`PrizmaTextField clearable`) but reveals it only
+ * under `:focus-within` (TextField.css:121) — a LIVE focus a static spec state
+ * can never hold. Its sibling `--focused` modifier, the documentation hook the
+ * screen already uses for the border, is not part of that selector, so the
+ * prop was a silent no-op: exactly the defect QA caught on CURP (#CURP-3).
+ *
+ * This mirrors Core's own reveal verbatim — same element, same `--show` state
+ * (which Core still owns: the button appears only when the field has a value),
+ * same disabled/error guards — swapping only the live `:focus-within` for the
+ * static modifier. Nothing is hand-rolled: no ✕ glyph, no box, no colour is
+ * declared here; only Core's `display: none` is lifted, and only on the one
+ * section that draws the affordance.
+ *
+ * CORE REQUEST (extends #PI-7): give the input family the `forceState` prop
+ * `PrizmaDropdown` already has, and let it drive the clear affordance as well
+ * as the border — then this rule disappears.
+ */
+.forms-long-form--focused
+  .prizma-input-textfield--focused:not(.prizma-input-textfield--disabled):not(
+    .prizma-input-textfield--error
+  )
+  .prizma-input-textfield__clear.prizma-input-textfield__clear--show {
+  display: inline-flex;
+}