@torch-ui/solid 0.1.3

package/src/components/forms/Autocomplete.tsx

@@ -0,0 +1,268 @@
+/**
+ * Autocomplete: text input with a dropdown of suggested options (combobox).
+ * Built on Kobalte Combobox. For "free solo" or creatable, use custom options or a creatable pattern in the app layer.
+ */
+import { createEffect, createMemo, createSignal, Show, splitProps } from 'solid-js'
+import { type JSX } from 'solid-js'
+import { ChevronDown, X } from 'lucide-solid'
+import { Combobox as KobalteCombobox } from '@kobalte/core/combobox'
+import { cn } from '../../utilities/classNames'
+import { type ComponentSize, inputSizeConfig } from '../../utilities/componentSize'
+
+const autocompleteStyles = `
+.torchui-combobox-content {
+	transform-origin: var(--kb-combobox-content-transform-origin);
+	opacity: 0;
+	animation: torchui-combobox-hide 150ms ease-in forwards;
+}
+.torchui-combobox-content[data-expanded] {
+	opacity: 1;
+	animation: torchui-combobox-show 150ms ease-out;
+}
+@keyframes torchui-combobox-show {
+	from { opacity: 0; transform: translateY(-8px); }
+	to { opacity: 1; transform: translateY(0); }
+}
+@keyframes torchui-combobox-hide {
+	from { opacity: 1; transform: translateY(0); }
+	to { opacity: 0; transform: translateY(-8px); }
+}
+`
+
+let comboboxStylesInjected = false
+/** Injects animation styles once. Note: uses inline <style> which requires 'unsafe-inline' in CSP style-src. */
+function ensureComboboxStyles() {
+	if (comboboxStylesInjected || typeof document === 'undefined') return
+	const style = document.createElement('style')
+	style.textContent = autocompleteStyles
+	document.head.appendChild(style)
+	comboboxStylesInjected = true
+}
+
+export interface AutocompleteOption {
+	value: string
+	label: string
+	/** When true, option is not selectable. */
+	disabled?: boolean
+}
+
+export interface AutocompleteProps {
+	label?: string
+	/** Error message and invalid styling. */
+	error?: string
+	/** Hint text below the control. */
+	helperText?: string
+	/** When true, never render label row or error/helper text (control only). */
+	bare?: boolean
+	/** When true, show required indicator on label. */
+	required?: boolean
+	/** When true, show "optional" on the label row when not required. Default false. */
+	optional?: boolean
+	options: AutocompleteOption[]
+	placeholder?: string
+	value?: string
+	onValueChange?: (value: string) => void
+	class?: string
+	/** Disable the control and input. */
+	disabled?: boolean
+	/** When true, hide the clear (X) button. */
+	disableClearable?: boolean
+	/** Input size. Controls height, text size, and padding. Default: md (36px). */
+	size?: ComponentSize
+	/** Disable specific options. Overrides option.disabled when provided. */
+	getOptionDisabled?: (option: AutocompleteOption) => boolean
+	/** Custom filter. Receives full options and current input value; return filtered options. Use (x) => x for async (you manage options). */
+	filterOptions?: (options: AutocompleteOption[], inputValue: string) => AutocompleteOption[]
+	/** Controlled input value (typed text). When provided with onInputChange, enables controlled input for async/search-as-you-type. */
+	inputValue?: string
+	/** Called when the user types. Use with filterOptions or for controlled input. */
+	onInputChange?: (value: string) => void
+	/** Custom render for each option. Receives the option; return JSX (e.g. label + description). */
+	renderOption?: (option: AutocompleteOption) => JSX.Element
+	/** Ref forwarded to the root wrapper div. */
+	ref?: (el: HTMLDivElement) => void
+}
+
+/** Option shape passed to Combobox when we add disabled from getOptionDisabled. */
+type OptionWithDisabled = AutocompleteOption & { disabled?: boolean }
+
+export const Autocomplete = (props: AutocompleteProps) => {
+	const [local] = splitProps(props, [
+		'label',
+		'error',
+		'helperText',
+		'bare',
+		'required',
+		'optional',
+		'options',
+		'placeholder',
+		'value',
+		'onValueChange',
+		'class',
+		'disabled',
+		'disableClearable',
+		'size',
+		'getOptionDisabled',
+		'filterOptions',
+		'inputValue',
+		'onInputChange',
+		'renderOption',
+		'ref',
+	])
+	const hasError = () => !!local.error
+
+	const [inputValueState, setInputValueState] = createSignal('')
+	const [dirty, setDirty] = createSignal(false)
+
+	const inputValue = () => local.inputValue ?? inputValueState()
+
+	createEffect(() => {
+		if (local.inputValue !== undefined) return
+		if (dirty()) return
+		const opt = local.options.find((o) => o.value === local.value) ?? null
+		setInputValueState(opt?.label ?? '')
+	})
+
+	const optionsWithDisabled = (opts: AutocompleteOption[]): OptionWithDisabled[] =>
+		local.getOptionDisabled ? opts.map((o) => ({ ...o, disabled: local.getOptionDisabled!(o) })) : opts
+
+	const optionsForRoot = createMemo<OptionWithDisabled[]>(() => {
+		let base = local.filterOptions && dirty()
+			? local.filterOptions(local.options, inputValue())
+			: local.options
+		const selected = local.options.find((o) => o.value === local.value)
+		if (selected && !base.some((o) => o.value === selected.value)) {
+			base = [selected, ...base]
+		}
+		return optionsWithDisabled(base)
+	})
+
+	const selectedOption = createMemo<OptionWithDisabled | null>(() => {
+		if (!local.value) return null
+		return optionsForRoot().find((o: OptionWithDisabled) => o.value === local.value) ?? null
+	})
+
+	const handleChange = (option: OptionWithDisabled | null) => {
+		setDirty(false)
+		if (!option) {
+			if (local.inputValue === undefined) setInputValueState('')
+			if (local.value) local.onValueChange?.('')
+			return
+		}
+		local.onValueChange?.(option.value)
+		if (local.inputValue === undefined) setInputValueState(option.label)
+	}
+
+	const handleInputChange = (value: string) => {
+		setDirty(true)
+		if (local.inputValue === undefined) setInputValueState(value)
+		local.onInputChange?.(value)
+		if (value === '') {
+			local.onValueChange?.('')
+		}
+	}
+
+	const handleClear = (e: MouseEvent) => {
+		e.preventDefault()
+		e.stopPropagation()
+		setDirty(false)
+		if (local.inputValue === undefined) setInputValueState('')
+		local.onInputChange?.('')
+		local.onValueChange?.('')
+	}
+
+	ensureComboboxStyles()
+	const sc = () => inputSizeConfig[local.size ?? 'md']
+
+	return (
+		<div ref={local.ref} class={cn('w-full', local.class)}>
+			<KobalteCombobox<OptionWithDisabled>
+				options={optionsForRoot()}
+				optionValue="value"
+				optionTextValue="label"
+				optionLabel="label"
+				optionDisabled="disabled"
+				value={selectedOption()}
+				defaultFilter={local.filterOptions ? undefined : 'contains'}
+				triggerMode="input"
+				disabled={local.disabled}
+				onChange={handleChange}
+				onInputChange={handleInputChange}
+				itemComponent={(itemProps) => (
+					<KobalteCombobox.Item
+						item={itemProps.item}
+						class="relative flex items-center justify-between px-3 py-2 text-sm text-ink-900 cursor-pointer outline-none data-[highlighted]:bg-primary-50 data-[highlighted]:text-primary-900 dark:data-[highlighted]:bg-primary-500/20 dark:data-[highlighted]:text-primary-200 data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed"
+					>
+						{local.renderOption ? (
+							local.renderOption(itemProps.item.rawValue)
+						) : (
+							<span>{itemProps.item.rawValue.label}</span>
+						)}
+					</KobalteCombobox.Item>
+				)}
+			>
+				<KobalteCombobox.HiddenSelect />
+				<Show when={!local.bare && local.label}>
+					<div class="flex items-center justify-between mb-2">
+						<KobalteCombobox.Label class="block text-md font-medium text-ink-700">
+							{local.label}
+							<Show when={local.required}>
+								<span class="text-danger-500 ml-0.5" aria-hidden="true">*</span>
+							</Show>
+						</KobalteCombobox.Label>
+						<Show when={local.label && !local.required && local.optional}>
+							<span class="text-xs text-ink-500">optional</span>
+						</Show>
+					</div>
+				</Show>
+				<KobalteCombobox.Control
+					class={cn(
+						'w-full flex cursor-pointer items-center justify-between gap-2 rounded-lg transition-colors outline-none text-ink-900 bg-surface-raised border',
+						hasError() ? 'border-danger-500 focus-within:ring-2 focus-within:ring-inset focus-within:ring-danger-500' : 'border-ink-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-primary-500 focus-within:border-transparent',
+						sc().h, sc().py, sc().text, sc().pl, sc().pr,
+						local.disabled &&
+							'cursor-not-allowed bg-surface-base text-ink-500 pointer-events-none'
+					)}
+				>
+					<KobalteCombobox.Input
+						class="flex-1 min-w-0 bg-transparent outline-none text-ink-900 placeholder:text-ink-400 dark:placeholder:text-ink-500 disabled:cursor-not-allowed"
+						placeholder={local.placeholder || 'Search...'}
+						disabled={local.disabled}
+					/>
+					<Show when={!local.disableClearable}>
+						<button
+							type="button"
+							aria-label="Clear"
+							class={cn(
+								'shrink-0 rounded p-0.5 text-ink-400 hover:bg-ink-100 dark:hover:bg-ink-900 hover:text-ink-600 dark:hover:text-ink-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-inset',
+								!local.value && inputValue().length === 0 && 'invisible'
+							)}
+							tabIndex={!local.value && inputValue().length === 0 ? -1 : 0}
+							onClick={handleClear}
+						>
+							<X class="h-4 w-4" aria-hidden="true" />
+						</button>
+					</Show>
+					<KobalteCombobox.Trigger
+						class="shrink-0 rounded p-0.5 text-ink-400 hover:bg-ink-100 dark:hover:bg-ink-900 hover:text-ink-600 dark:hover:text-ink-300"
+						aria-label="Open options"
+					>
+						<ChevronDown class="h-4 w-4" aria-hidden="true" />
+					</KobalteCombobox.Trigger>
+				</KobalteCombobox.Control>
+				<Show when={!local.bare && !hasError() && local.helperText}>
+					<p class="mt-2 text-sm text-ink-500">{local.helperText}</p>
+				</Show>
+				<Show when={!local.bare && hasError()}>
+					<p class="mt-2 text-sm text-danger-600">{local.error}</p>
+				</Show>
+
+				<KobalteCombobox.Portal>
+					<KobalteCombobox.Content class="torchui-combobox-content bg-surface-raised rounded-lg border border-surface-border shadow-lg mt-2 py-1 max-h-60 overflow-auto z-50">
+						<KobalteCombobox.Listbox class="outline-none" />
+					</KobalteCombobox.Content>
+				</KobalteCombobox.Portal>
+			</KobalteCombobox>
+		</div>
+	)
+}

package/src/components/forms/Checkbox.tsx

@@ -0,0 +1,155 @@
+import { type JSX, splitProps, Show } from 'solid-js'
+import { Checkbox as KobalteCheckbox } from '@kobalte/core/checkbox'
+import { cn } from '../../utilities/classNames'
+
+export type CheckboxSize = 'sm' | 'md'
+
+export interface CheckboxProps extends Omit<JSX.HTMLAttributes<HTMLInputElement>, 'onChange'> {
+	/** Label text (or use children). */
+	label?: string
+	/** Error message shown below the checkbox. */
+	error?: string
+	/** Hint text below the checkbox. */
+	helperText?: string
+	/** When true, never render label row or error/helper text (checkbox only). */
+	bare?: boolean
+	/** When true, show as required (e.g. asterisk). */
+	required?: boolean
+	/** When true, show "optional" on the label row when not required. Default false. */
+	optional?: boolean
+	/** When true, use smaller label text and optional tighter spacing. */
+	compact?: boolean
+	/** Controlled checked state. */
+	checked?: boolean
+	/** Controlled change handler. Receives the new checked boolean. */
+	onChange?: (checked: boolean) => void
+	/** Visual size. */
+	size?: CheckboxSize
+	/** Indeterminate state (e.g. parent when some children selected). */
+	indeterminate?: boolean
+	/** Disable the checkbox. */
+	disabled?: boolean
+	class?: string
+	id?: string
+	/** Form field name. */
+	name?: string
+	/** Form field value. */
+	value?: string
+	children?: JSX.Element
+}
+
+const sizeClasses: Record<CheckboxSize, string> = {
+	sm: 'h-3.5 w-3.5',
+	md: 'h-4 w-4',
+}
+
+export function Checkbox(props: CheckboxProps) {
+	const [local, others] = splitProps(props, [
+		'label',
+		'error',
+		'helperText',
+		'bare',
+		'required',
+		'optional',
+		'compact',
+		'checked',
+		'onChange',
+		'size',
+		'indeterminate',
+		'class',
+		'id',
+		'disabled',
+		'children',
+		'name',
+		'value',
+	])
+
+	if (import.meta.env.DEV && local.bare) {
+		if (
+			others['aria-label'] == null &&
+			others['aria-labelledby'] == null &&
+			others['title'] == null
+		) {
+			console.warn('Checkbox: bare mode requires aria-label, aria-labelledby, or title for accessibility.')
+		}
+	}
+
+	const hasError = () => !!local.error
+	const size = () => local.size ?? 'md'
+	const iconSize = () => size() === 'sm' ? 'w-2.5 h-2.5' : 'w-3 h-3'
+
+	return (
+		<KobalteCheckbox
+			checked={local.checked}
+			onChange={(v) => local.onChange?.(v === true)}
+			indeterminate={local.indeterminate}
+			validationState={hasError() ? 'invalid' : undefined}
+			required={local.required}
+			disabled={local.disabled}
+			name={local.name}
+			value={local.value}
+			id={local.id}
+			class={cn('w-full', local.class)}
+		>
+			<div
+				class={cn(
+					'inline-flex items-center select-none',
+					local.compact ? 'gap-1.5' : 'gap-2',
+					local.disabled && 'opacity-50',
+					hasError() && 'text-danger-600',
+				)}
+			>
+				<KobalteCheckbox.Input {...others} />
+				<KobalteCheckbox.Control
+					class={cn(
+						'relative inline-flex shrink-0 items-center justify-center rounded border cursor-pointer',
+						sizeClasses[size()],
+						'bg-surface-raised border-ink-300',
+						'data-[checked]:border-primary-500 data-[checked]:bg-primary-500 dark:data-[checked]:border-primary-400 dark:data-[checked]:bg-primary-500',
+						'data-[indeterminate]:border-primary-500 data-[indeterminate]:bg-primary-500 dark:data-[indeterminate]:border-primary-400 dark:data-[indeterminate]:bg-primary-500',
+						hasError() && 'border-danger-500 dark:border-danger-500',
+						local.disabled && 'cursor-not-allowed',
+					)}
+				>
+					<KobalteCheckbox.Indicator class="absolute inset-0 flex items-center justify-center text-white">
+						<Show
+							when={!local.indeterminate}
+							fallback={
+								<svg class={iconSize()} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+									<line x1="4" y1="12" x2="20" y2="12" />
+								</svg>
+							}
+						>
+							<svg class={iconSize()} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+								<polyline points="20 6 9 17 4 12" />
+							</svg>
+						</Show>
+					</KobalteCheckbox.Indicator>
+				</KobalteCheckbox.Control>
+				<Show when={!local.bare && (local.label ?? local.children)}>
+					<KobalteCheckbox.Label class={cn('text-ink-700 cursor-pointer', local.compact ? 'text-xs' : 'text-sm', local.disabled && 'cursor-not-allowed')}>
+						{local.label ?? local.children}
+						<Show when={local.required}>
+							<span class="text-danger-500 ml-0.5" aria-hidden="true">*</span>
+						</Show>
+						<Show when={!local.required && local.optional}>
+							<span class="text-xs text-ink-500 ml-1">optional</span>
+						</Show>
+					</KobalteCheckbox.Label>
+				</Show>
+			</div>
+
+			<Show when={!local.bare && local.helperText && !hasError()}>
+				<KobalteCheckbox.Description class="mt-1.5 text-sm text-ink-500">
+					{local.helperText}
+				</KobalteCheckbox.Description>
+			</Show>
+
+			<Show when={!local.bare && local.error}>
+				<KobalteCheckbox.ErrorMessage class="mt-1.5 text-sm text-danger-600">
+					{local.error}
+				</KobalteCheckbox.ErrorMessage>
+			</Show>
+		</KobalteCheckbox>
+	)
+}

package/src/components/forms/CodeInput.tsx

@@ -0,0 +1,237 @@
+import { createEffect, type JSX, splitProps, createUniqueId } from 'solid-js'
+import { cn } from '../../utilities/classNames'
+import { mergeRefs } from '../../utilities/mergeRefs'
+
+export interface CodeInputProps
+	extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'maxLength'> {
+	/** 'single' = one input; 'digits' = one input per digit with paste/keyboard nav (e.g. verification code) */
+	variant?: 'single' | 'digits'
+	label?: string
+	error?: string
+	helperText?: string
+	/** Length of code (default 6) */
+	length?: number
+	value?: string
+	onValueChange?: (value: string) => void
+	onErrorClear?: () => void
+}
+
+export function CodeInput(props: CodeInputProps) {
+	const variant = () => props.variant ?? 'single'
+	if (variant() === 'digits') {
+		return <CodeInputDigits {...props} />
+	}
+	return <CodeInputSingle {...props} />
+}
+
+function CodeInputSingle(props: CodeInputProps) {
+	const [local, others] = splitProps(props, [
+		'variant',
+		'label',
+		'error',
+		'helperText',
+		'length',
+		'value',
+		'onValueChange',
+		'onErrorClear',
+		'class',
+		'id',
+		'onInput',
+		'disabled',
+	])
+
+	const length = () => local.length ?? 6
+	const generatedId = createUniqueId()
+	const inputId = () => local.id ?? `code-input-${generatedId}`
+	const hasError = () => !!local.error
+	const msgId = () => (local.error || local.helperText) ? `${inputId()}-msg` : undefined
+	const describedBy = () => {
+		const user = (others as Record<string, unknown>)['aria-describedby'] as string | undefined
+		const own = msgId()
+		return user && own ? `${user} ${own}` : (user ?? own)
+	}
+
+	const handleInput = (e: InputEvent) => {
+		const input = e.target as HTMLInputElement
+		const raw = input.value.replace(/\D/g, '').slice(0, length())
+		input.value = raw
+		if (local.error && local.onErrorClear) local.onErrorClear()
+		local.onValueChange?.(raw)
+		if (local.onInput) (local.onInput as (e: InputEvent) => void)(e)
+	}
+
+	return (
+		<div class="w-full">
+			{local.label && (
+				<label
+					for={inputId()}
+					class={cn(
+						'block text-md font-medium mb-1.5',
+						hasError() ? 'text-danger-600' : 'text-ink-700'
+					)}
+				>
+					{local.label}
+				</label>
+			)}
+			<input
+				id={inputId()}
+				type="text"
+				inputMode="numeric"
+				autocomplete="one-time-code"
+				pattern="[0-9]*"
+				maxLength={length()}
+				value={local.value}
+				onInput={handleInput}
+				disabled={local.disabled}
+				aria-invalid={hasError() ? 'true' : undefined}
+				aria-describedby={describedBy()}
+				class={cn(
+					'w-full px-4 py-3 rounded-lg transition-all outline-none text-center text-xl tracking-[0.25em] font-mono',
+					'text-ink-900 placeholder:text-ink-400 dark:placeholder:text-ink-500 placeholder:tracking-normal',
+					'bg-surface-raised border',
+					hasError()
+						? 'border-danger-500 focus:ring-2 focus:ring-inset focus:ring-danger-500 focus:border-transparent'
+						: 'border-ink-300 focus:ring-2 focus:ring-inset focus:ring-primary-500 focus:border-transparent',
+					'disabled:bg-ink-50 dark:disabled:bg-ink-900 disabled:text-ink-500 dark:disabled:text-ink-500 disabled:cursor-not-allowed',
+					local.class
+				)}
+				{...others}
+			/>
+			{(local.error || local.helperText) && (
+				<p
+					id={msgId()}
+					role={local.error ? 'alert' : undefined}
+					class={cn('mt-2 text-sm', hasError() ? 'text-danger-600' : 'text-ink-500')}
+				>
+					{local.error || local.helperText}
+				</p>
+			)}
+		</div>
+	)
+}
+
+function CodeInputDigits(props: CodeInputProps) {
+	const length = () => props.length ?? 6
+	let inputRefs: (HTMLInputElement | undefined)[] = []
+
+	createEffect(() => {
+		inputRefs = new Array(length())
+	})
+
+	const emit = (next: string) => {
+		if (props.error && props.onErrorClear) props.onErrorClear()
+		props.onValueChange?.(next)
+	}
+
+	createEffect(() => {
+		const val = (props.value ?? '').replace(/\D/g, '').slice(0, length())
+		if (val !== (props.value ?? '')) emit(val)
+	})
+
+	const onInput = (index: number, e: InputEvent) => {
+		const target = e.currentTarget as HTMLInputElement
+		const raw = (target.value ?? '').replace(/\D/g, '')
+		const val = props.value ?? ''
+		if (!raw) {
+			emit((val.slice(0, index) + val.slice(index + 1)).slice(0, length()))
+			return
+		}
+		const rest = raw.slice(0, length() - index)
+		const next = (val.slice(0, index) + rest).slice(0, length())
+		emit(next)
+		requestAnimationFrame(() =>
+			inputRefs[Math.min(index + rest.length, length() - 1)]?.focus()
+		)
+	}
+
+	const onKeyDown = (index: number, e: KeyboardEvent) => {
+		const val = props.value ?? ''
+		if (e.key === 'Backspace' && !val[index] && index > 0) {
+			e.preventDefault()
+			emit(val.slice(0, index - 1) + val.slice(index))
+			requestAnimationFrame(() => inputRefs[index - 1]?.focus())
+		} else if (e.key === 'Backspace' && val[index]) {
+			emit(val.slice(0, index) + val.slice(index + 1))
+		} else if (e.key === 'ArrowLeft' && index > 0) {
+			e.preventDefault()
+			inputRefs[index - 1]?.focus()
+		} else if (e.key === 'ArrowRight' && index < length() - 1) {
+			e.preventDefault()
+			inputRefs[index + 1]?.focus()
+		}
+	}
+
+	const onPaste = (e: ClipboardEvent) => {
+		e.preventDefault()
+		const pasted = (e.clipboardData?.getData('text') ?? '')
+			.replace(/\D/g, '')
+			.slice(0, length())
+		if (!pasted) return
+		emit(pasted)
+		requestAnimationFrame(() =>
+			inputRefs[Math.min(pasted.length, length() - 1)]?.focus()
+		)
+	}
+
+	const generatedId = createUniqueId()
+	const firstId = () => props.id ?? `code-digits-${generatedId}`
+	const hasError = () => !!props.error
+
+	return (
+		<div class={cn('w-full', props.class)}>
+			{props.label && (
+				<label
+					for={firstId()}
+					class={cn(
+						'block text-sm font-medium mb-2',
+						hasError() ? 'text-danger-600' : 'text-ink-700'
+					)}
+				>
+					{props.label}
+				</label>
+			)}
+			<div
+				class="flex gap-2 justify-center"
+				role="group"
+				aria-label="Verification code digits"
+			>
+				{Array.from({ length: length() }, (_, i) => (
+					<input
+						ref={i === 0 ? mergeRefs((el: HTMLInputElement) => (inputRefs[i] = el), props.ref) : (el: HTMLInputElement) => (inputRefs[i] = el)}
+						id={i === 0 ? firstId() : undefined}
+						type="text"
+						inputMode="numeric"
+						autocomplete={i === 0 ? 'one-time-code' : 'off'}
+						maxLength={1}
+						value={(props.value ?? '')[i] ?? ''}
+						onInput={(e) => onInput(i, e)}
+						onKeyDown={(e) => onKeyDown(i, e)}
+						onPaste={onPaste}
+						disabled={props.disabled}
+						class={cn(
+							'w-11 h-12 rounded-lg border text-center text-xl font-semibold font-mono tabular-nums outline-none transition-colors',
+							'text-ink-900 bg-surface-raised',
+							hasError()
+								? 'border-danger-500 focus:ring-2 focus:ring-danger-500/20 focus:border-danger-500'
+								: 'border-ink-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20',
+							'disabled:opacity-50 disabled:cursor-not-allowed'
+						)}
+						aria-label={`Digit ${i + 1}`}
+						aria-invalid={hasError() ? 'true' : undefined}
+					/>
+				))}
+			</div>
+			{(props.error || props.helperText) && (
+				<p
+					class={cn(
+						'mt-1.5 text-sm',
+						hasError() ? 'text-danger-600' : 'text-ink-500'
+					)}
+					role={props.error ? 'alert' : undefined}
+				>
+					{props.error || props.helperText}
+				</p>
+			)}
+		</div>
+	)
+}