You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
816 lines
37 KiB
816 lines
37 KiB
<script lang="ts">
|
|
import {
|
|
PinInput,
|
|
type PinInputSize,
|
|
type PinInputType
|
|
} from '$uix/eidos/components/pin-input';
|
|
import { Field } from '$uix/eidos/components/field';
|
|
import { compileMorfo } from '$uix/morfo';
|
|
import { pinInputMorfo } from '@/uix/morfo/components/pin-input';
|
|
|
|
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
|
|
let tab = $state<Tab>('live');
|
|
|
|
const sizes: PinInputSize[] = ['sm', 'md', 'lg', 'xl'];
|
|
const types: PinInputType[] = ['numeric', 'alphanumeric', 'alphabetic', 'custom'];
|
|
|
|
// ── Live state ────────────────────────────────────────────────────────
|
|
// Soma · value + shape
|
|
let value = $state('');
|
|
let length = $state(6);
|
|
let type = $state<PinInputType>('numeric');
|
|
let customPattern = $state('[a-z0-9-]');
|
|
let stripDashes = $state(true);
|
|
// Soma · presentation
|
|
let mask = $state(false);
|
|
let placeholder = $state('•');
|
|
// Soma · flags
|
|
let disabled = $state(false);
|
|
let readonly = $state(false);
|
|
let required = $state(false);
|
|
let invalid = $state(false);
|
|
// Soma · DOM
|
|
let name = $state('otp');
|
|
let autocomplete = $state<'one-time-code' | 'off'>('one-time-code');
|
|
let inputmode = $state<'text' | 'numeric' | 'tel' | 'decimal'>('numeric');
|
|
let ariaLabel = $state('Verification code');
|
|
// Eidos
|
|
let size = $state<PinInputSize>('md');
|
|
// Field integration
|
|
let fieldWrap = $state(false);
|
|
let fieldLabel = $state('One-time password');
|
|
let fieldDescription = $state("We sent a 6-digit code — it expires in 10 minutes.");
|
|
let fieldError = $state('Code does not match. Please try again.');
|
|
// Bound state mirrors
|
|
let lastComplete = $state<string | null>(null);
|
|
|
|
function handleComplete(v: string) {
|
|
lastComplete = v;
|
|
}
|
|
|
|
const pasteTransformer = $derived(stripDashes ? (text: string) => text.replace(/-/g, '') : undefined);
|
|
const effectivePattern = $derived(type === 'custom' ? customPattern : undefined);
|
|
|
|
type TraceEntry = { event: string; family: string; intent?: string; at: number };
|
|
let trace = $state<TraceEntry[]>([]);
|
|
let stageRef = $state<HTMLElement | null>(null);
|
|
|
|
$effect(() => {
|
|
const el = stageRef;
|
|
if (!el) return;
|
|
const obs = new MutationObserver((mutations) => {
|
|
for (const m of mutations) {
|
|
if (m.attributeName !== 'data-event') continue;
|
|
const target = m.target as Element;
|
|
const ev = target.getAttribute('data-event');
|
|
if (!ev) continue;
|
|
trace = [
|
|
{
|
|
event: ev,
|
|
family: target.getAttribute('data-event-family') ?? '—',
|
|
intent: target.getAttribute('data-event-intent') ?? undefined,
|
|
at: Date.now()
|
|
},
|
|
...trace
|
|
].slice(0, 6);
|
|
}
|
|
});
|
|
obs.observe(el, { attributes: true, subtree: true, attributeFilter: ['data-event'] });
|
|
return () => obs.disconnect();
|
|
});
|
|
|
|
const compiled = compileMorfo(pinInputMorfo);
|
|
const partsList = $derived([...compiled.parts.byKebab.values()]);
|
|
// PinInput morfo declares 0 events — passive component per README.
|
|
// xMorfo.events is undefined, so we render the empty-state branch in Sema.
|
|
|
|
function fmtTime(at: number): string {
|
|
const d = new Date(at);
|
|
return `${String(d.getSeconds()).padStart(2, '0')}.${String(d.getMilliseconds()).padStart(3, '0')}`;
|
|
}
|
|
|
|
const somaSnippet = $derived(
|
|
[
|
|
"<script lang='ts'>",
|
|
" import * as PinInput from '$soma/components/pin-input';",
|
|
" let value = $state('');",
|
|
'</' + 'script>',
|
|
'',
|
|
'<PinInput.Provider',
|
|
' bind:value',
|
|
length !== 6 && ` length={${length}}`,
|
|
type !== 'numeric' && ` type="${type}"`,
|
|
type === 'custom' && ` pattern="${customPattern}"`,
|
|
stripDashes && ' pasteTransformer={(t) => t.replace(/-/g, \'\')}',
|
|
mask && ' mask',
|
|
placeholder !== '' && ` placeholder="${placeholder}"`,
|
|
disabled && ' disabled',
|
|
readonly && ' readonly',
|
|
required && ' required',
|
|
invalid && ' invalid',
|
|
name && ` name="${name}"`,
|
|
autocomplete !== 'one-time-code' && ` autocomplete="${autocomplete}"`,
|
|
inputmode !== 'numeric' && ` inputmode="${inputmode}"`,
|
|
ariaLabel && ` aria-label="${ariaLabel}"`,
|
|
' onComplete={(v) => …}',
|
|
'>',
|
|
' {#snippet children({ cells })}',
|
|
' {#each cells as cell, i (i)}',
|
|
' <PinInput.Cell {cell} index={i} />',
|
|
' {/each}',
|
|
' {/snippet}',
|
|
'</PinInput.Provider>'
|
|
]
|
|
.filter(Boolean)
|
|
.join('\n')
|
|
);
|
|
|
|
const eidosSnippet = $derived(
|
|
[
|
|
"<script lang='ts'>",
|
|
" import { PinInput } from '$uix/eidos/components/pin-input';",
|
|
fieldWrap && " import { Field } from '$uix/eidos/components/field';",
|
|
" let value = $state('');",
|
|
'</' + 'script>',
|
|
'',
|
|
fieldWrap && `<Field${invalid ? ' invalid' : ''}${disabled ? ' disabled' : ''}${required ? ' required' : ''}>`,
|
|
fieldWrap && ` <Field.Label>${fieldLabel}</Field.Label>`,
|
|
fieldWrap && ` <Field.HelperText>${fieldDescription}</Field.HelperText>`,
|
|
fieldWrap && ' <Field.Control>',
|
|
fieldWrap ? ' <PinInput' : '<PinInput',
|
|
fieldWrap ? ' bind:value' : ' bind:value',
|
|
length !== 6 && (fieldWrap ? ` length={${length}}` : ` length={${length}}`),
|
|
type !== 'numeric' && (fieldWrap ? ` type="${type}"` : ` type="${type}"`),
|
|
size !== 'md' && (fieldWrap ? ` size="${size}"` : ` size="${size}"`),
|
|
mask && (fieldWrap ? ' mask' : ' mask'),
|
|
!fieldWrap && disabled && ' disabled',
|
|
!fieldWrap && invalid && ' invalid',
|
|
fieldWrap ? ' >' : '>',
|
|
fieldWrap ? ' {#snippet children({ cells })}' : ' {#snippet children({ cells })}',
|
|
fieldWrap ? ' {#each cells as cell, i (i)}' : ' {#each cells as cell, i (i)}',
|
|
fieldWrap ? ' <PinInput.Cell {cell} index={i} />' : ' <PinInput.Cell {cell} index={i} />',
|
|
fieldWrap ? ' {/each}' : ' {/each}',
|
|
fieldWrap ? ' {/snippet}' : ' {/snippet}',
|
|
fieldWrap ? ' </PinInput>' : '</PinInput>',
|
|
fieldWrap && ' </Field.Control>',
|
|
fieldWrap && invalid && ` <Field.ErrorText>${fieldError}</Field.ErrorText>`,
|
|
fieldWrap && '</Field>'
|
|
]
|
|
.filter(Boolean)
|
|
.join('\n')
|
|
);
|
|
</script>
|
|
|
|
<div data-uix-canvas-inner>
|
|
<header>
|
|
<div data-uix-eyebrow>Form · PinInput</div>
|
|
<h1 data-uix-page-title>PinInput</h1>
|
|
<p data-uix-page-lede>
|
|
Multi-cell OTP / verification code input. A single hidden
|
|
<code><input></code> captures every keystroke and paste; visible
|
|
bordered cells follow the caret via <code>data-active</code>. Soma
|
|
handles the capture pipeline (paste distribute, IME, autofill banner
|
|
via <code>autocomplete='one-time-code'</code>); eidos paints the
|
|
bordered cell chrome with active / filled / placeholder / invalid
|
|
states. Field-aware: <code>disabled</code> / <code>readonly</code> /
|
|
<code>required</code> / <code>invalid</code> OR-merge with the
|
|
enclosing <code>Field.Provider</code>.
|
|
</p>
|
|
<div data-uix-page-meta>
|
|
<span data-uix-meta-pill>
|
|
<span data-uix-meta-key>parts</span>{compiled.parts.order.length}
|
|
</span>
|
|
<span data-uix-meta-pill>
|
|
<span data-uix-meta-key>events</span>0
|
|
</span>
|
|
<span data-uix-meta-pill>
|
|
<span data-uix-meta-key>sizes</span>{sizes.length}
|
|
</span>
|
|
<span data-uix-meta-pill>
|
|
<span data-uix-meta-key>apg</span>
|
|
<a href={pinInputMorfo.apg} target="_blank" rel="noreferrer">textbox ↗</a>
|
|
</span>
|
|
<span data-uix-meta-pill>
|
|
<span data-uix-meta-key>value</span>{value || '—'}
|
|
</span>
|
|
{#if lastComplete}
|
|
<span data-uix-meta-pill>
|
|
<span data-uix-meta-key>last</span>{lastComplete}
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Live preview always rendered -->
|
|
<div data-uix-stage>
|
|
<div data-uix-stage-area bind:this={stageRef}>
|
|
{#if fieldWrap}
|
|
<Field {invalid} {disabled} {required}>
|
|
<Field.Label>{fieldLabel}</Field.Label>
|
|
<Field.HelperText>{fieldDescription}</Field.HelperText>
|
|
<Field.Control>
|
|
<PinInput
|
|
bind:value
|
|
{length}
|
|
{type}
|
|
pattern={effectivePattern}
|
|
{pasteTransformer}
|
|
{size}
|
|
{mask}
|
|
{placeholder}
|
|
{readonly}
|
|
{name}
|
|
{autocomplete}
|
|
{inputmode}
|
|
aria-label={ariaLabel}
|
|
onComplete={handleComplete}
|
|
>
|
|
{#snippet children({ cells })}
|
|
{#each cells as cell, i (i)}
|
|
<PinInput.Cell {cell} index={i} />
|
|
{/each}
|
|
{/snippet}
|
|
</PinInput>
|
|
</Field.Control>
|
|
{#if invalid}<Field.ErrorText>{fieldError}</Field.ErrorText>{/if}
|
|
</Field>
|
|
{:else}
|
|
<PinInput
|
|
bind:value
|
|
{length}
|
|
{type}
|
|
pattern={effectivePattern}
|
|
{pasteTransformer}
|
|
{size}
|
|
{mask}
|
|
{placeholder}
|
|
{disabled}
|
|
{readonly}
|
|
{required}
|
|
{invalid}
|
|
{name}
|
|
{autocomplete}
|
|
{inputmode}
|
|
aria-label={ariaLabel}
|
|
onComplete={handleComplete}
|
|
>
|
|
{#snippet children({ cells })}
|
|
{#each cells as cell, i (i)}
|
|
<PinInput.Cell {cell} index={i} />
|
|
{/each}
|
|
{/snippet}
|
|
</PinInput>
|
|
{/if}
|
|
</div>
|
|
<div data-uix-stage-trace>
|
|
<span data-uix-stage-trace-key>trace</span>
|
|
<span>passive · no semantic events</span>
|
|
<span style="margin-inline-start: auto;">
|
|
<span data-uix-stage-trace-key>value</span> "{value}"
|
|
<span data-uix-stage-trace-key style="margin-inline-start: 0.5rem;">complete</span> {value.length === length ? 'yes' : 'no'}
|
|
{#if lastComplete}
|
|
<span data-uix-stage-trace-key style="margin-inline-start: 0.5rem;">onComplete</span> {lastComplete}
|
|
{/if}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div data-uix-tabs role="tablist">
|
|
<button data-uix-tab data-active={tab === 'live'} onclick={() => (tab = 'live')}>Live</button>
|
|
<button data-uix-tab data-active={tab === 'api'} onclick={() => (tab = 'api')}>
|
|
API <span data-uix-tab-count>2</span>
|
|
</button>
|
|
<button data-uix-tab data-active={tab === 'morfo'} onclick={() => (tab = 'morfo')}>
|
|
<span data-uix-layer-badge="morfo">morfo</span>
|
|
<span data-uix-tab-count>{partsList.length}p · 0e</span>
|
|
</button>
|
|
<button data-uix-tab data-active={tab === 'sema'} onclick={() => (tab = 'sema')}>
|
|
<span data-uix-layer-badge="sema">sema</span>
|
|
<span data-uix-tab-count>0</span>
|
|
</button>
|
|
<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}>Recipe</button>
|
|
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
|
|
</div>
|
|
|
|
{#if tab === 'live'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>Controls</h2>
|
|
<p data-uix-section-desc>
|
|
Knobs grouped by the layer that owns them. The component is
|
|
<em>passive</em> at the morfo level (no <code>events</code> array);
|
|
perceptual feedback on completion piggy-backs on the
|
|
<code>commit</code> family base if the consumer hooks
|
|
<code>onComplete</code>. Sema details in the dedicated tab.
|
|
</p>
|
|
|
|
<!-- ── Soma · value + shape ────────────────────────────────────── -->
|
|
<div data-uix-subsection-head>
|
|
<span data-uix-layer-badge="soma">soma</span> Value + shape
|
|
</div>
|
|
<div data-uix-controls>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>value <span data-uix-control-hint>bindable</span></span>
|
|
<input type="text" bind:value placeholder="(type into the input below)" />
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>length <span data-uix-control-hint>{length} cells</span></span>
|
|
<input type="range" min="3" max="10" step="1" bind:value={length} />
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>type</span>
|
|
<span data-uix-chips role="radiogroup">
|
|
{#each types as opt (opt)}
|
|
<button data-uix-chip data-active={type === opt} onclick={() => (type = opt)}>{opt}</button>
|
|
{/each}
|
|
</span>
|
|
</label>
|
|
{#if type === 'custom'}
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>pattern <span data-uix-control-hint>regex char-class</span></span>
|
|
<input type="text" bind:value={customPattern} />
|
|
</label>
|
|
{/if}
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>pasteTransformer <span data-uix-control-hint>strip dashes on paste</span></span>
|
|
<span data-uix-switch>
|
|
<input type="checkbox" bind:checked={stripDashes} />
|
|
<span data-uix-switch-label>{stripDashes ? 'on' : 'off'}</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- ── Soma · presentation ─────────────────────────────────────── -->
|
|
<div data-uix-subsection-head>
|
|
<span data-uix-layer-badge="soma">soma</span> Presentation
|
|
</div>
|
|
<div data-uix-controls>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>mask <span data-uix-control-hint>render • instead of the char</span></span>
|
|
<span data-uix-switch>
|
|
<input type="checkbox" bind:checked={mask} />
|
|
<span data-uix-switch-label>{mask ? 'on' : 'off'}</span>
|
|
</span>
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>placeholder <span data-uix-control-hint>glyph in empty cells</span></span>
|
|
<input type="text" bind:value={placeholder} maxlength="1" style="inline-size: 4rem;" />
|
|
</label>
|
|
</div>
|
|
|
|
<!-- ── Soma · flags ────────────────────────────────────────────── -->
|
|
<div data-uix-subsection-head>
|
|
<span data-uix-layer-badge="soma">soma</span> Flags
|
|
<span style="font-weight: normal; color: var(--uix-text-muted);">
|
|
· OR-merge with the enclosing Field.Provider
|
|
</span>
|
|
</div>
|
|
<div data-uix-controls>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>disabled</span>
|
|
<span data-uix-switch>
|
|
<input type="checkbox" bind:checked={disabled} />
|
|
<span data-uix-switch-label>{disabled ? 'on' : 'off'}</span>
|
|
</span>
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>readonly</span>
|
|
<span data-uix-switch>
|
|
<input type="checkbox" bind:checked={readonly} />
|
|
<span data-uix-switch-label>{readonly ? 'on' : 'off'}</span>
|
|
</span>
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>required</span>
|
|
<span data-uix-switch>
|
|
<input type="checkbox" bind:checked={required} />
|
|
<span data-uix-switch-label>{required ? 'on' : 'off'}</span>
|
|
</span>
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>invalid</span>
|
|
<span data-uix-switch>
|
|
<input type="checkbox" bind:checked={invalid} />
|
|
<span data-uix-switch-label>{invalid ? 'on' : 'off'}</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- ── Soma · DOM/native attrs ─────────────────────────────────── -->
|
|
<div data-uix-subsection-head>
|
|
<span data-uix-layer-badge="soma">soma</span> DOM attrs
|
|
</div>
|
|
<div data-uix-controls>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>name <span data-uix-control-hint>form submission</span></span>
|
|
<input type="text" bind:value={name} />
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>autocomplete</span>
|
|
<span data-uix-chips role="radiogroup">
|
|
{#each ['one-time-code', 'off'] as opt (opt)}
|
|
<button data-uix-chip data-active={autocomplete === opt} onclick={() => (autocomplete = opt as typeof autocomplete)}>{opt}</button>
|
|
{/each}
|
|
</span>
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>inputmode</span>
|
|
<span data-uix-chips role="radiogroup">
|
|
{#each ['text', 'numeric', 'tel', 'decimal'] as opt (opt)}
|
|
<button data-uix-chip data-active={inputmode === opt} onclick={() => (inputmode = opt as typeof inputmode)}>{opt}</button>
|
|
{/each}
|
|
</span>
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>aria-label</span>
|
|
<input type="text" bind:value={ariaLabel} />
|
|
</label>
|
|
</div>
|
|
|
|
<!-- ── Eidos · size ────────────────────────────────────────────── -->
|
|
<div data-uix-subsection-head>
|
|
<span data-uix-layer-badge="eidos">eidos</span> Visual
|
|
</div>
|
|
<div data-uix-controls>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>size</span>
|
|
<span data-uix-chips role="radiogroup">
|
|
{#each sizes as opt (opt)}
|
|
<button data-uix-chip data-active={size === opt} onclick={() => (size = opt)}>{opt}</button>
|
|
{/each}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- ── Field integration ───────────────────────────────────────── -->
|
|
<div data-uix-subsection-head>
|
|
Field integration
|
|
<span style="font-weight: normal; color: var(--uix-text-muted);">
|
|
· wrap in Field.Provider to inherit label / description / error
|
|
</span>
|
|
</div>
|
|
<div data-uix-controls>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>Wrap in Field.Provider</span>
|
|
<span data-uix-switch>
|
|
<input type="checkbox" bind:checked={fieldWrap} />
|
|
<span data-uix-switch-label>{fieldWrap ? 'on' : 'off'}</span>
|
|
</span>
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>Label</span>
|
|
<input type="text" bind:value={fieldLabel} disabled={!fieldWrap} />
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>Description</span>
|
|
<input type="text" bind:value={fieldDescription} disabled={!fieldWrap} />
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>Error text <span data-uix-control-hint>shown when invalid</span></span>
|
|
<input type="text" bind:value={fieldError} disabled={!fieldWrap || !invalid} />
|
|
</label>
|
|
</div>
|
|
|
|
<!-- ── Code snippets per layer ─────────────────────────────────── -->
|
|
<div data-uix-code>
|
|
<div data-uix-code-head>
|
|
<span data-uix-layer-badge="soma">soma</span>
|
|
<span>headless · hidden capture input + cells snippet</span>
|
|
<span data-uix-code-lang>svelte</span>
|
|
</div>
|
|
<pre><code>{somaSnippet}</code></pre>
|
|
</div>
|
|
|
|
<div data-uix-code style="margin-top: var(--uix-space-3);">
|
|
<div data-uix-code-head>
|
|
<span data-uix-layer-badge="eidos">eidos</span>
|
|
<span>visual · adds <code>size</code> + bordered cell chrome{fieldWrap ? ' · Field.Provider wrap' : ''}</span>
|
|
<span data-uix-code-lang>svelte</span>
|
|
</div>
|
|
<pre><code>{eidosSnippet}</code></pre>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'api'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>API reference</h2>
|
|
<p data-uix-section-desc>
|
|
Two parts: <code>PinInput</code> (root provider — renders the
|
|
container + hidden capture input) and <code>PinInput.Cell</code>
|
|
(one per character position). All visual surface inherits from
|
|
the Cell; the Provider is invisible chrome (an inline-flex row).
|
|
</p>
|
|
|
|
<div data-uix-subsection-head>PinInput (Provider)</div>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="name">id / inputId</td><td class="type">string</td><td class="default empty">auto</td><td>DOM ids for the container and hidden input.</td></tr>
|
|
<tr><td class="name">value <span data-uix-tag data-kind="bindable">bindable</span></td><td class="type">string</td><td class="default">''</td><td>Current code value.</td></tr>
|
|
<tr><td class="name">onValueChange</td><td class="type">(value: string) => void</td><td class="default empty">—</td><td>Fired on every value change.</td></tr>
|
|
<tr><td class="name">onComplete</td><td class="type">(value: string) => void</td><td class="default empty">—</td><td>Fires when <code>value.length === length</code> for the first time.</td></tr>
|
|
<tr><td class="name">length</td><td class="type">number</td><td class="default">6</td><td>Number of cells.</td></tr>
|
|
<tr><td class="name">type</td><td class="type">'numeric' | 'alphanumeric' | 'alphabetic' | 'custom'</td><td class="default">'numeric'</td><td>Alphabet preset → sensible defaults for <code>pattern</code>, <code>inputmode</code>, <code>autocomplete</code>.</td></tr>
|
|
<tr><td class="name">pattern</td><td class="type">string | RegExp</td><td class="default empty">—</td><td>Custom accept regex (overrides <code>type</code>).</td></tr>
|
|
<tr><td class="name">pasteTransformer</td><td class="type">(text: string) => string</td><td class="default empty">—</td><td>Transform clipboard contents before distributing (e.g. strip dashes from <code>123-456</code>).</td></tr>
|
|
<tr><td class="name">mask</td><td class="type">boolean</td><td class="default">false</td><td>Render <code>•</code> instead of the real char.</td></tr>
|
|
<tr><td class="name">placeholder</td><td class="type">string</td><td class="default">''</td><td>Glyph in empty cells.</td></tr>
|
|
<tr><td class="name">disabled <span data-uix-tag data-kind="field">field-OR</span></td><td class="type">boolean</td><td class="default">false</td><td>OR-merge with Field.Provider's disabled.</td></tr>
|
|
<tr><td class="name">readonly <span data-uix-tag data-kind="field">field-OR</span></td><td class="type">boolean</td><td class="default">false</td><td>—</td></tr>
|
|
<tr><td class="name">required <span data-uix-tag data-kind="field">field-OR</span></td><td class="type">boolean</td><td class="default">false</td><td>—</td></tr>
|
|
<tr><td class="name">invalid <span data-uix-tag data-kind="field">field-OR</span></td><td class="type">boolean</td><td class="default">false</td><td>—</td></tr>
|
|
<tr><td class="name">name</td><td class="type">string</td><td class="default empty">—</td><td>Hidden input <code>name</code> — needed for native form submission.</td></tr>
|
|
<tr><td class="name">autocomplete</td><td class="type">string</td><td class="default">depends on <code>type</code></td><td>Defaults to <code>'one-time-code'</code> for numeric — surfaces SMS-autofill banner on iOS / Android.</td></tr>
|
|
<tr><td class="name">inputmode</td><td class="type">'text' | 'numeric' | 'tel' | 'decimal'</td><td class="default">depends on <code>type</code></td><td>Native virtual-keyboard hint.</td></tr>
|
|
<tr><td class="name">aria-label</td><td class="type">string</td><td class="default empty">"Verification code"</td><td>Accessible label for the hidden input.</td></tr>
|
|
<tr><td class="name">size <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">ResponsiveProp<'sm' | 'md' | 'lg' | 'xl'></td><td class="default">'md'</td><td>Cell dimensions + glyph size.</td></tr>
|
|
<tr><td class="name">children</td><td class="type">{`Snippet<[{ cells, isFocused, isHovering, value }]>`}</td><td class="default empty">—</td><td>Required snippet — iterate <code>cells</code> and render <code><PinInput.Cell></code>.</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div data-uix-subsection-head>PinInput.Cell</div>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="name">id</td><td class="type">string</td><td class="default empty">auto</td><td>—</td></tr>
|
|
<tr><td class="name">cell <span data-uix-tag data-kind="required">required</span></td><td class="type">{`{ char, isActive, isFilled, hasFakeCaret }`}</td><td class="default empty">—</td><td>Cell descriptor from the Provider's snippet.</td></tr>
|
|
<tr><td class="name">index <span data-uix-tag data-kind="required">required</span></td><td class="type">number</td><td class="default empty">—</td><td>0-based cell position.</td></tr>
|
|
<tr><td class="name">child</td><td class="type">{`Snippet<[{ char, isActive, isFilled, hasFakeCaret, index }]>`}</td><td class="default empty">—</td><td>Override the default cell render.</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div data-uix-subsection-head>Reference parity</div>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Feature</th><th>Radix</th><th>bits-ui</th><th>ark-ui</th><th>Chakra v3</th><th>shadcn (input-otp)</th><th>Eidos (this)</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>Single hidden input</td><td>—</td><td>✓</td><td>—</td><td>—</td><td>✓</td><td>✓</td></tr>
|
|
<tr><td>Paste distribute</td><td>—</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td></tr>
|
|
<tr><td>Mask (•)</td><td>—</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td></tr>
|
|
<tr><td>type presets</td><td>—</td><td>3</td><td>2</td><td>2</td><td>1</td><td>3 + custom</td></tr>
|
|
<tr><td>Custom regex pattern</td><td>—</td><td>✓</td><td>—</td><td>—</td><td>✓</td><td>✓</td></tr>
|
|
<tr><td>Snippet-driven Cell</td><td>—</td><td>✓</td><td>—</td><td>—</td><td>✓</td><td>✓</td></tr>
|
|
<tr><td>Field integration</td><td>—</td><td>—</td><td>—</td><td>partial</td><td>—</td><td>✓</td></tr>
|
|
<tr><td>onComplete callback</td><td>—</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td></tr>
|
|
<tr><td>SMS autofill (one-time-code)</td><td>—</td><td>✓</td><td>—</td><td>—</td><td>✓</td><td>✓</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'morfo'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>
|
|
<span data-uix-layer-badge="morfo">morfo</span>
|
|
· declarative contract
|
|
</h2>
|
|
<p data-uix-section-desc>
|
|
3 parts (Provider + Input + Cell), 0 events. The component is
|
|
<em>passive at the morfo level</em>: user-perceived interactions
|
|
(typing, paste, completion) are mediated by the hidden
|
|
<code><input></code>'s native events. Sema-side perceptual
|
|
feedback piggy-backs on the <code>commit</code> family base when
|
|
the consumer hooks <code>onComplete</code>. See the component
|
|
README's "Passive justification" section for the contract-layer
|
|
classification. Source:
|
|
<code>src/uix/morfo/components/pin-input.ts</code>.
|
|
</p>
|
|
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Field</th><th>Value</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="name">name</td><td class="type">"{pinInputMorfo.name}"</td></tr>
|
|
<tr><td class="name">kebab</td><td class="type">"{pinInputMorfo.kebab}"</td></tr>
|
|
<tr><td class="name">scope</td><td class="type">[{pinInputMorfo.scope.map((s) => `"${s}"`).join(', ')}]</td></tr>
|
|
<tr><td class="name">apg</td><td><a href={pinInputMorfo.apg} target="_blank" rel="noreferrer">{pinInputMorfo.apg}</a></td></tr>
|
|
<tr><td class="name">parts.length</td><td class="default">{pinInputMorfo.parts.length}</td></tr>
|
|
<tr><td class="name">events.length</td><td class="default">0</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div data-uix-subsection-head>Parts</div>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Part</th><th>Marker</th><th>Element</th><th>Role</th><th>Archetype</th><th>Optional</th></tr></thead>
|
|
<tbody>
|
|
{#each partsList as part (part.kebab)}
|
|
<tr>
|
|
<td class="name">{part.kebab}</td>
|
|
<td><code data-uix-part-marker>[{part.marker}]</code></td>
|
|
<td class="type"><{part.defaultElement}></td>
|
|
<td class="type">{part.role ?? '—'}</td>
|
|
<td class="default">{part.archetype ?? '—'}</td>
|
|
<td class="default">{part.optional ? 'yes' : 'no'}</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{#each pinInputMorfo.parts as rawPart (rawPart.kebab)}
|
|
{@const partAny = rawPart as unknown as { kebab: string; aria?: ReadonlyArray<{ attr: string; value: { kind: string }; condition?: { when: string; prop?: string; part?: string }; severity?: string }>; keyboard?: ReadonlyArray<{ key: string; action: string }> }}
|
|
{@const dataAttrs = compiled.contracts.dataAttrsByPart.get(partAny.kebab) ?? []}
|
|
{@const ariaAttrs = partAny.aria ?? []}
|
|
{@const keyboard = partAny.keyboard ?? []}
|
|
{#if dataAttrs.length || ariaAttrs.length || keyboard.length}
|
|
<div data-uix-subsection-head>{partAny.kebab}</div>
|
|
|
|
{#if dataAttrs.length}
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>data-attr</th><th>Values</th><th>Source kind</th></tr></thead>
|
|
<tbody>
|
|
{#each dataAttrs as attr (attr.attr)}
|
|
<tr>
|
|
<td class="name">{attr.attr}</td>
|
|
<td class="type">{attr.values ? attr.values.join(' | ') : '—'}</td>
|
|
<td class="default">{'value' in attr && attr.value ? (attr as { value: { kind: string } }).value.kind : '—'}</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if ariaAttrs.length}
|
|
<div data-uix-table-wrap style="margin-top: var(--uix-space-2);">
|
|
<table data-uix-table>
|
|
<thead><tr><th>aria-attr</th><th>Source kind</th><th>Condition</th><th>Severity</th></tr></thead>
|
|
<tbody>
|
|
{#each ariaAttrs as a (a.attr)}
|
|
<tr>
|
|
<td class="name">{a.attr}</td>
|
|
<td class="type">{a.value.kind}</td>
|
|
<td class="default">{a.condition ? `when ${a.condition.when}${a.condition.prop ? ` (${a.condition.prop})` : ''}${a.condition.part ? ` (${a.condition.part})` : ''}` : 'always'}</td>
|
|
<td class="default">{a.severity ?? 'required'}</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if keyboard.length}
|
|
<div data-uix-table-wrap style="margin-top: var(--uix-space-2);">
|
|
<table data-uix-table>
|
|
<thead><tr><th>key</th><th>action</th></tr></thead>
|
|
<tbody>
|
|
{#each keyboard as kb (kb.key)}
|
|
<tr>
|
|
<td><span data-uix-kbd>{kb.key === ' ' ? 'Space' : kb.key}</span></td>
|
|
<td class="default">{kb.action}</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
{/each}
|
|
|
|
<div data-uix-subsection-head>Events</div>
|
|
<p data-uix-section-desc style="margin-top: 0.25rem;">
|
|
No events declared. PinInput is contract-layer-passive — the
|
|
hidden input emits native <code>input</code> / <code>change</code>
|
|
/ <code>paste</code> events, and the <code>onComplete</code> /
|
|
<code>onValueChange</code> callbacks are propagated synchronously
|
|
during value mutation. See the Sema tab for the perceptual
|
|
signature consumers can attach to <code>onComplete</code>.
|
|
</p>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'sema'}
|
|
<section data-uix-section id="sema">
|
|
<h2 data-uix-section-title>
|
|
<span data-uix-layer-badge="sema">sema</span>
|
|
· events + perceptual signature
|
|
</h2>
|
|
<p data-uix-section-desc>
|
|
<strong>0 events</strong>. The component is passive at the
|
|
morfo level: no <code>events</code> array, no <code>data-event</code>
|
|
stamps, no semantic engine dispatch. This is a deliberate
|
|
classification — see the README's <em>Passive justification</em>
|
|
section — analogous to AlertDialog's delegation pattern.
|
|
</p>
|
|
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Family</th><th>Verb</th><th>Why not declared</th></tr></thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="type">commit</td>
|
|
<td>fill</td>
|
|
<td>
|
|
Code completion is fundamentally a value-equality check
|
|
(<code>value.length === length</code>), not a semantic act
|
|
the user-or-system can cancel. Consumers wanting an
|
|
audible "code accepted" cue can fire it themselves from
|
|
<code>onComplete</code> via
|
|
<code>uix.events.emit({`{ name, family: 'commit', intent: 'affirm', target }`})</code>.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="type">attend</td>
|
|
<td>focus</td>
|
|
<td>
|
|
Hidden input's native focus / blur cover this; no
|
|
perceptual signal beyond the cell ring is needed.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'recipe'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>Eidos recipe</h2>
|
|
<p data-uix-section-desc>
|
|
Source: <code>src/uix/eidos/components/pin-input/pin-input.css</code>.
|
|
The Provider is a flex row of cells; the Cell carries the
|
|
bordered chrome and the active / filled / invalid / placeholder
|
|
visual states. The focus ring follows the caret via
|
|
<code>data-active</code> (synthetic — only the hidden input is
|
|
actually focused).
|
|
</p>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Selector</th><th>Source</th><th>Concern</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="name">[data-pin-input]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Inline-flex row of cells.</td></tr>
|
|
<tr><td class="name">[data-pin-input][data-size='sm' | 'md' | 'lg' | 'xl']</td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Per-size token cascade (cell dimensions, glyph size).</td></tr>
|
|
<tr><td class="name">[data-pin-input-cell]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Square bordered cell — base chrome.</td></tr>
|
|
<tr><td class="name">[data-pin-input-cell][data-active]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Focus ring + primary border — tracks caret.</td></tr>
|
|
<tr><td class="name">[data-pin-input-cell][data-filled]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Subtle bg lift on filled cells.</td></tr>
|
|
<tr><td class="name">[data-pin-input-cell][data-placeholder]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Muted glyph in empty cells.</td></tr>
|
|
<tr><td class="name">[data-pin-input][data-invalid] [data-pin-input-cell]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Threat-toned border.</td></tr>
|
|
<tr><td class="name">[data-pin-input][data-disabled]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Opacity + cursor.</td></tr>
|
|
<tr><td class="name">[data-pin-input][data-complete]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Cell tint shift on full code (subtle affirmation).</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'a11y'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>Accessibility</h2>
|
|
<p data-uix-section-desc>
|
|
No formal ARIA pattern exists for OTP inputs. Soma follows the
|
|
de-facto convention established by Radix-style libs and the iOS /
|
|
Android native code-input controls: a single hidden
|
|
<code><input></code> with
|
|
<code>autocomplete='one-time-code'</code> so iOS / Android
|
|
surface the SMS-autofill banner. The Cell is
|
|
<code>aria-hidden='true'</code> presentation-only — the input is
|
|
the sole interactive target. Baseline pattern:
|
|
<a href={pinInputMorfo.apg} target="_blank" rel="noreferrer">WAI-ARIA Textbox</a>.
|
|
</p>
|
|
|
|
<div data-uix-subsection-head>Keyboard</div>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Key</th><th>Effect</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>Any character matching <code>pattern</code></td><td>Insert at caret; advance to next cell.</td></tr>
|
|
<tr><td>Character NOT matching</td><td>Rejected silently (no console error).</td></tr>
|
|
<tr><td><span data-uix-kbd>Backspace</span></td><td>Clear current cell; if empty, clear + focus previous.</td></tr>
|
|
<tr><td><span data-uix-kbd>Delete</span></td><td>Clear current cell; stay.</td></tr>
|
|
<tr><td><span data-uix-kbd>ArrowLeft</span> / <span data-uix-kbd>ArrowRight</span></td><td>Move caret one cell.</td></tr>
|
|
<tr><td><span data-uix-kbd>Home</span> / <span data-uix-kbd>End</span></td><td>Caret to first / last cell.</td></tr>
|
|
<tr><td><span data-uix-kbd>Tab</span> / <span data-uix-kbd>Shift+Tab</span></td><td>Move focus to previous / next form control.</td></tr>
|
|
<tr><td>Paste</td><td>Distribute clipboard contents across cells; <code>pasteTransformer</code> runs first if supplied.</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div data-uix-subsection-head>ARIA contract</div>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Part</th><th>Attribute</th><th>Value</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="name">provider</td><td>data-disabled / data-readonly / data-invalid / data-required / data-focused / data-complete</td><td class="type">"true" when active</td></tr>
|
|
<tr><td class="name">input</td><td>type</td><td class="type">"text"</td></tr>
|
|
<tr><td class="name">input</td><td>aria-label</td><td class="type">"Verification code" (default) or <code>{`{aria-label}`}</code></td></tr>
|
|
<tr><td class="name">input</td><td>aria-invalid</td><td class="type">"true" when <code>invalid</code></td></tr>
|
|
<tr><td class="name">input</td><td>autocomplete</td><td class="type">"one-time-code" (numeric) or <code>{`{autocomplete}`}</code></td></tr>
|
|
<tr><td class="name">input</td><td>inputmode</td><td class="type">"numeric" (numeric) or <code>{`{inputmode}`}</code></td></tr>
|
|
<tr><td class="name">cell</td><td>aria-hidden</td><td class="type">"true"</td></tr>
|
|
<tr><td class="name">cell</td><td>role</td><td class="type">"presentation"</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
</div>
|