@incodetech/prizma-core-screens 0.1.0

package/dist/FormScreen.d.ts

@@ -0,0 +1,101 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaScreenShellProps } from './ScreenShell';
+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 declare const PrizmaFormScreen: React.ForwardRefExoticComponent<PrizmaFormScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default PrizmaFormScreen;

package/dist/FormScreen.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } 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 } from './ScreenShell';
+import { PrizmaScreenNav } from './ScreenNav';
+import './ScreenLayout.css';
+import './FormScreen.css';
+/**
+ * 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(({ 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) => (_jsxs(PrizmaScreenShell, { ref: ref, ...shell, children: [_jsx(PrizmaScreenNav, { reserved: !showHeader, logo: overrides?.logo, navLabel: navLabel }), _jsxs("div", { className: "prizma-screen-layout__content", children: [progress ? (_jsx("div", { className: "prizma-screen-layout__progress", children: progress })) : null, _jsx(PrizmaTitle, { variant: overrides?.align === 'left' ? 'left' : 'centered', title: title, showSubtitle: Boolean(subtitle), subtitle: subtitle }), _jsx("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),
+                        }
+                        : undefined, children: children }), ctaLabel || linkLabel || linkContent ? (_jsxs("div", { className: "prizma-screen-layout__cta prizma-form-screen__cta", children: [ctaLabel ? (_jsx(PrizmaButton, { variant: "primary", size: "L", disabled: ctaDisabled, loading: ctaLoading, loadingLabel: ctaLoadingLabel, onClick: () => onAction?.({ type: 'cta', screenId }), children: ctaLabel })) : null, linkLabel ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: linkLabel })) : null, linkContent] })) : null, showFooter ? (_jsx("div", { className: "prizma-screen-layout__footer prizma-screen-layout__footer--pinned", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] })] })));
+PrizmaFormScreen.displayName = 'PrizmaFormScreen';
+export default PrizmaFormScreen;

package/dist/FormsChoiceScreen.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import { type PrizmaDropdownOption } from '@incodetech/prizma-core-web/dropdown';
+import { type PrizmaCountry } from '@incodetech/prizma-core-web/combined';
+import { 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 declare const FormsChoiceScreen: React.ForwardRefExoticComponent<FormsChoiceScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default FormsChoiceScreen;

package/dist/FormsChoiceScreen.js

@@ -0,0 +1,63 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaDropdown, } from '@incodetech/prizma-core-web/dropdown';
+import { PrizmaCountryFlag } from '@incodetech/prizma-core-web/combined';
+import { PrizmaFormScreen } from './FormScreen';
+import './ScreenLayout.css';
+/**
+ * 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(({ 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 = isCountries
+        ? countryList.map((c) => ({ value: c.code, label: c.name }))
+        : (options ?? []);
+    return (_jsx(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, children: _jsx(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 ? _jsx(PrizmaCountryFlag, { country: match }) : null;
+                }
+                : undefined }) }));
+});
+FormsChoiceScreen.displayName = 'FormsChoiceScreen';
+export default FormsChoiceScreen;

package/dist/FormsErrorScreen.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { 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 declare const FormsErrorScreen: React.ForwardRefExoticComponent<FormsErrorScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default FormsErrorScreen;

package/dist/FormsErrorScreen.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaResultScreen } from './ResultScreen';
+import './ScreenLayout.css';
+/**
+ * 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(({ strings, screenId = 'forms-error', overrides, onAction, ...shell }, ref) => (_jsx(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/dist/FormsFieldScreen.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import { type PrizmaCountry } from '@incodetech/prizma-core-web/combined';
+import { 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 declare const FormsFieldScreen: React.ForwardRefExoticComponent<FormsFieldScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default FormsFieldScreen;

package/dist/FormsFieldScreen.js

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { 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 } from '@incodetech/prizma-core-web/combined';
+import { PrizmaFormScreen } from './FormScreen';
+import './ScreenLayout.css';
+/**
+ * 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(({ 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) => (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 (_jsx(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 (_jsx(PrizmaCombined, { label: copy.label, placeholder: placeholder, defaultValue: value ?? '', defaultCountry: country, countries: countries, countryListLabel: copy.countryListLabel, error: invalid, errorText: invalid ? errorText : undefined }));
+            case 'text':
+                return (_jsx(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 (_jsx(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 (_jsx(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, children: renderField() }));
+});
+FormsFieldScreen.displayName = 'FormsFieldScreen';
+export default FormsFieldScreen;

package/dist/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;
+}

package/dist/FormsLongFormScreen.d.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+import { type PrizmaDropdownOption } from '@incodetech/prizma-core-web/dropdown';
+import { type PrizmaCountry } from '@incodetech/prizma-core-web/combined';
+import { type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { FormsLongFormPreset, FormsLongFormState, FormsStrings } from './FormsStrings';
+import './ScreenLayout.css';
+import './FormsLayout.css';
+export interface FormsLongFormScreenProps extends Omit<PrizmaFormScreenProps, 'title' | 'subtitle' | 'ctaLabel' | 'verifiedLabel' | 'children' | 'navLabel'> {
+    /** Module copy — this screen reads one `longForm.*` slice. */
+    strings: FormsStrings;
+    /** Which multi-field purple section to render. Default `eKyc`. */
+    preset?: FormsLongFormPreset;
+    /** Which treatment of that section. Default `default`. */
+    state?: FormsLongFormState;
+    /** Value per row key. Text/date rows take the literal value; `country` rows
+     *  take an ISO code; `select` rows take an option value. */
+    values?: Record<string, string>;
+    /** Which row carries the focus ring on the `focused` section. */
+    focusedField?: string;
+    /** Option rows for the `select` kinds. Runtime data, never copy — the host
+     *  supplies its own localized list. */
+    options?: Record<string, PrizmaDropdownOption[]>;
+    /** The selectable countries for `country` rows. */
+    countries?: PrizmaCountry[];
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Forms & Data Entry — the multi-field screen, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for the module's seven multi-field purple sections: `forms.name`,
+ * `longform.customizable` (default + filled) and the whole
+ * `🧩 Long forms - pre-defined cases` group (`longform.default` / `.focused` /
+ * `.filled` / `.loading` plus the "Optional / Required" documentation pair).
+ * They share the identical skeleton — nav → Title (H2 + the "All fields marked
+ * with * are required." H5) → Spacing/32 → a stack of labelled Core inputs →
+ * primary CTA → tag — and differ in which rows the stack carries and what state
+ * each row is in.
+ *
+ * Four things are deliberate:
+ *
+ * 1. Rows are UNCONTROLLED (`defaultValue`). `readOnly` would paint Core's
+ *    DISABLED grey on the six sections Figma draws white (DEVIATIONS #PI-6);
+ *    `disabled` is set ONLY on `loading`, the one section Figma actually greys
+ *    — and it greys every row at once, exactly as drawn.
+ * 2. The focused row gets Core's OWN `--focused` modifier through `className`
+ *    (DEVIATIONS #PI-7). Its clear ✕ needs one module rule to appear, because
+ *    Core reveals the button under a live `:focus-within` a static spec state
+ *    can never satisfy — see `FormsLayout.css`, which only lifts Core's
+ *    `display: none` and re-styles nothing (the #CURP-3 idiom).
+ * 3. The in-flight spinner rides the CTA (`ctaLoading`), never a field
+ *    (DEVIATIONS #PI-5) — without it `loading` would render as `filled`.
+ * 4. The required marker rides Core's `requiredHint` so it stays localizable.
+ *    Core has no OPTIONAL counterpart, so "(Optional)" is composed into the
+ *    label string instead — DEVIATIONS #FDE-4.
+ *
+ * The stack SCROLLS inside the content column through the archetype's own
+ * `scrollFields` prop: the profile preset is five 78px rows plus gaps and does
+ * not fit a 390×844 frame, and screens never reflow (#17). The variant carries
+ * the `overflow-y: auto` AND the Spacing/16 margin below the clipped stack, so
+ * the sliced last row is followed by clear surface instead of running flush
+ * into the CTA band — the half a module stylesheet kept losing. It is a no-op
+ * on the short `name` preset, whose rows never overflow. DEVIATIONS #DSC-2,
+ * restating #CURP-1.
+ */
+export declare const FormsLongFormScreen: React.ForwardRefExoticComponent<FormsLongFormScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default FormsLongFormScreen;