@rokkit/forms 1.0.0-next.125 → 1.0.0-next.127

package/src/display/DisplayTable.svelte

@@ -0,0 +1,68 @@
+<script>
+	/**
+	 * Wraps @rokkit/ui Table for display-only rendering from layout schema.
+	 * Maps display columns (key/label/format) to TableColumn format.
+	 */
+	import { Table } from '@rokkit/ui'
+
+	let {
+		data = [],
+		columns = [],
+		select,
+		title,
+		onselect,
+		class: className = ''
+	} = $props()
+
+	// Map display columns → Table columns with formatters
+	const tableColumns = $derived(
+		columns.map((col) => ({
+			name: col.key,
+			label: col.label ?? col.key,
+			sortable: col.sortable ?? true,
+			width: col.width,
+			align: col.align,
+			formatter: col.format ? createFormatter(col.format) : undefined
+		}))
+	)
+
+	/**
+	 * Create a cell formatter function for a given display format.
+	 * @param {string} format
+	 * @returns {(value: unknown) => string}
+	 */
+	function createFormatter(format) {
+		return (value) => {
+			if (value === null || value === undefined) return '—'
+			switch (format) {
+				case 'currency':
+					return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
+						/** @type {number} */ (value)
+					)
+				case 'datetime':
+					return new Date(/** @type {string|number} */ (value)).toLocaleString()
+				case 'duration': {
+					const minutes = /** @type {number} */ (value)
+					const h = Math.floor(minutes / 60)
+					const m = minutes % 60
+					if (h > 0 && m > 0) return `${h}h ${m}m`
+					if (h > 0) return `${h}h`
+					return `${m}m`
+				}
+				case 'number':
+					return new Intl.NumberFormat().format(/** @type {number} */ (value))
+				case 'boolean':
+					return value ? '✓' : '✗'
+				default:
+					return String(value)
+			}
+		}
+	}
+</script>
+
+<div data-display-table data-selectable={select || undefined} class={className}>
+	{#if title}
+		<div data-display-title>{title}</div>
+	{/if}
+	<Table {data} columns={tableColumns} {onselect} caption={title} />
+</div>

package/src/display/DisplayValue.svelte

@@ -0,0 +1,44 @@
+<script>
+	/**
+	 * Format-aware value display component.
+	 * Renders a value with formatting based on the `format` hint.
+	 */
+
+	let { value, format = 'text' } = $props()
+
+	/**
+	 * Format a duration value (minutes) into human-readable string.
+	 * @param {number} minutes
+	 * @returns {string}
+	 */
+	function formatDuration(minutes) {
+		if (typeof minutes !== 'number') return String(minutes)
+		const h = Math.floor(minutes / 60)
+		const m = minutes % 60
+		if (h > 0 && m > 0) return `${h}h ${m}m`
+		if (h > 0) return `${h}h`
+		return `${m}m`
+	}
+
+	const formatted = $derived.by(() => {
+		if (value === null || value === undefined) return '—'
+		switch (format) {
+			case 'currency':
+				return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value)
+			case 'datetime':
+				return new Date(value).toLocaleString()
+			case 'duration':
+				return formatDuration(value)
+			case 'number':
+				return new Intl.NumberFormat().format(value)
+			case 'boolean':
+				return value ? '✓' : '✗'
+			case 'badge':
+				return String(value)
+			default:
+				return String(value)
+		}
+	})
+</script>
+
+<span data-display-value data-format={format}>{formatted}</span>

package/src/display/index.js

@@ -0,0 +1,5 @@
+export { default as DisplayValue } from './DisplayValue.svelte'
+export { default as DisplaySection } from './DisplaySection.svelte'
+export { default as DisplayTable } from './DisplayTable.svelte'
+export { default as DisplayCardGrid } from './DisplayCardGrid.svelte'
+export { default as DisplayList } from './DisplayList.svelte'

package/src/index.js

@@ -1,7 +1,21 @@
 export { FormBuilder } from './lib/builder.svelte.js'
+export { createLookup, createLookupManager, clearLookupCache } from './lib/lookup.svelte.js'
+export { validateField, validateAll, createMessage, patterns } from './lib/validation.js'
+export { defaultRenderers, resolveRenderer } from './lib/renderers.js'
+
+// Schema and layout utilities
+export { getSchemaWithLayout, findAttributeByPath } from './lib/fields.js'
+export { deriveSchemaFromValue } from './lib/schema.js'
+export { deriveLayoutFromValue } from './lib/layout.js'
+
 // Enhanced Input Components
 export { default as FormRenderer } from './FormRenderer.svelte'
 export { default as Input } from './Input.svelte'
 export { default as InputField } from './InputField.svelte'
+export { default as InfoField } from './InfoField.svelte'
+export { default as ValidationReport } from './ValidationReport.svelte'
+
+// Display Components
+export * from './display'
 
 export * from './input'

package/src/input/ArrayEditor.svelte

@@ -0,0 +1,108 @@
+<script>
+	import { defaultRenderers, resolveRenderer } from '../lib/renderers.js'
+	import FormRenderer from '../FormRenderer.svelte'
+
+	/**
+	 * @typedef {Object} ArrayEditorProps
+	 * @property {Array} [value] - The array value (bindable)
+	 * @property {Function} [onchange] - Called with new array on any change
+	 * @property {Object} [items] - JSON Schema for each array item (from schema.items)
+	 * @property {boolean} [disabled]
+	 * @property {boolean} [readonly]
+	 */
+
+	/** @type {ArrayEditorProps & { [key: string]: any }} */
+	let {
+		value = $bindable([]),
+		onchange,
+		items,
+		disabled = false,
+		readonly = false,
+		..._rest
+	} = $props()
+
+	// Normalize: treat undefined/null as empty array
+	const safeValue = $derived(Array.isArray(value) ? value : [])
+
+	// Item schema — default to string if not provided
+	const itemSchema = $derived(items ?? { type: 'string' })
+
+	// Resolve the primitive renderer once (reused for all items)
+	const PrimitiveComponent = $derived(
+		itemSchema.type !== 'object'
+			? resolveRenderer({ type: itemSchema.type }, defaultRenderers)
+			: null
+	)
+
+	function typeDefault(type) {
+		return { string: '', number: 0, integer: 0, boolean: false, array: [], object: {} }[type] ?? null
+	}
+
+	function createDefaultItem(schema) {
+		if (schema.type === 'object') {
+			return Object.fromEntries(
+				Object.entries(schema.properties ?? {}).map(([k, s]) => [k, s.default ?? typeDefault(s.type)])
+			)
+		}
+		return schema.default ?? typeDefault(schema.type)
+	}
+
+	function addItem() {
+		const newItem = createDefaultItem(itemSchema)
+		const newValue = [...safeValue, newItem]
+		value = newValue
+		onchange?.(newValue)
+	}
+
+	function removeItem(index) {
+		const newValue = safeValue.filter((_, i) => i !== index)
+		value = newValue
+		onchange?.(newValue)
+	}
+
+	function updateItem(index, newItemValue) {
+		const newValue = safeValue.map((item, i) => (i === index ? newItemValue : item))
+		value = newValue
+		onchange?.(newValue)
+	}
+</script>
+
+<div
+	data-array-editor
+	data-array-editor-empty={safeValue.length === 0 || undefined}
+	data-array-editor-disabled={disabled || undefined}
+>
+	<div data-array-editor-items>
+		{#each safeValue as item, index (index)}
+			<div data-array-editor-item>
+				<div data-array-editor-item-content>
+					{#if itemSchema.type === 'object'}
+						<FormRenderer
+							data={item}
+							schema={itemSchema}
+							onupdate={(newData) => updateItem(index, newData)}
+						/>
+					{:else}
+						<PrimitiveComponent
+							value={item}
+							onchange={(newVal) => updateItem(index, newVal)}
+							{disabled}
+							{readonly}
+						/>
+					{/if}
+				</div>
+				{#if !readonly}
+					<button
+						type="button"
+						data-array-editor-remove
+						{disabled}
+						onclick={() => removeItem(index)}
+					>Remove</button>
+				{/if}
+			</div>
+		{/each}
+	</div>
+	{#if !readonly}
+		<button type="button" data-array-editor-add {disabled} onclick={addItem}>Add</button>
+	{/if}
+</div>

package/src/input/InputCheckbox.svelte

@@ -1,5 +1,4 @@
 <script>
-	import { Icon } from '@rokkit/ui'
 	import { defaultStateIcons } from '@rokkit/core'
 	import { isNil } from 'ramda'
 
@@ -27,7 +26,7 @@
 	/** @type {InputCheckboxProps & { [key: string]: any }} */
 	let {
 		value = $bindable(),
-		variant = 'default',
+		variant = 'custom',
 		icons,
 		onchange,
 		onfocus,
@@ -69,6 +68,6 @@
 		{...rest}
 	/>
 	{#if variant !== 'default'}
-		<Icon name={icon} data-checkbox-icon role="button" onclick={toggle} />
+		<span class={icon} data-checkbox-icon role="button" tabindex="0" onclick={toggle} onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && toggle()} aria-hidden="true"></span>
 	{/if}
 </div>

package/src/input/InputColor.svelte

@@ -25,6 +25,11 @@
 		autocomplete,
 		...rest
 	} = $props()
+
+	function handleChange(event) {
+		value = event.target.value
+		onchange?.(value)
+	}
 </script>
 
 <input
@@ -35,7 +40,7 @@
 	{name}
 	{id}
 	{autocomplete}
-	{onchange}
+	onchange={handleChange}
 	{onfocus}
 	{onblur}
 	{...rest}

package/src/input/InputDate.svelte

@@ -33,6 +33,11 @@
 		autocomplete,
 		...rest
 	} = $props()
+
+	function handleChange(event) {
+		value = event.target.value
+		onchange?.(value)
+	}
 </script>
 
 <input
@@ -47,7 +52,7 @@
 	{name}
 	{id}
 	{autocomplete}
-	{onchange}
+	onchange={handleChange}
 	{onfocus}
 	{onblur}
 	{...rest}

package/src/input/InputDateTime.svelte

@@ -33,6 +33,11 @@
 		autocomplete,
 		...rest
 	} = $props()
+
+	function handleChange(event) {
+		value = event.target.value
+		onchange?.(value)
+	}
 </script>
 
 <input
@@ -47,7 +52,7 @@
 	{name}
 	{id}
 	{autocomplete}
-	{onchange}
+	onchange={handleChange}
 	{onfocus}
 	{onblur}
 	{...rest}

package/src/input/InputEmail.svelte

@@ -39,6 +39,11 @@
 		multiple,
 		...rest
 	} = $props()
+
+	function handleChange(event) {
+		value = event.target.value
+		onchange?.(value)
+	}
 </script>
 
 <input
@@ -56,7 +61,7 @@
 	{pattern}
 	{size}
 	{multiple}
-	{onchange}
+	onchange={handleChange}
 	{onfocus}
 	{onblur}
 	{...rest}

package/src/input/InputFile.svelte

@@ -27,10 +27,14 @@
 		id,
 		...rest
 	} = $props()
+
+	function handleChange(event) {
+		value = event.target.files
+		onchange?.(value)
+	}
 </script>
 
 <input
-	bind:value
 	type="file"
 	{accept}
 	{multiple}
@@ -38,7 +42,7 @@
 	{disabled}
 	{name}
 	{id}
-	{onchange}
+	onchange={handleChange}
 	{onfocus}
 	{onblur}
 	{...rest}

package/src/input/InputMonth.svelte

@@ -33,6 +33,11 @@
 		autocomplete,
 		...rest
 	} = $props()
+
+	function handleChange(event) {
+		value = event.target.value
+		onchange?.(value)
+	}
 </script>
 
 <input
@@ -47,7 +52,7 @@
 	{name}
 	{id}
 	{autocomplete}
-	{onchange}
+	onchange={handleChange}
 	{onfocus}
 	{onblur}
 	{...rest}

package/src/input/InputNumber.svelte

@@ -35,6 +35,11 @@
 		autocomplete,
 		...rest
 	} = $props()
+
+	function handleChange(event) {
+		value = event.target.valueAsNumber
+		onchange?.(value)
+	}
 </script>
 
 <input
@@ -50,7 +55,7 @@
 	{name}
 	{id}
 	{autocomplete}
-	{onchange}
+	onchange={handleChange}
 	{onfocus}
 	{onblur}
 	{...rest}

package/src/input/InputPassword.svelte

@@ -37,6 +37,11 @@
 		size,
 		...rest
 	} = $props()
+
+	function handleChange(event) {
+		value = event.target.value
+		onchange?.(value)
+	}
 </script>
 
 <input
@@ -53,7 +58,7 @@
 	{minlength}
 	{pattern}
 	{size}
-	{onchange}
+	onchange={handleChange}
 	{onfocus}
 	{onblur}
 	{...rest}

package/src/input/InputRange.svelte

@@ -31,6 +31,11 @@
 		onblur,
 		...rest
 	} = $props()
+
+	function handleChange(event) {
+		value = event.target.valueAsNumber
+		onchange?.(value)
+	}
 </script>
 
 <input
@@ -44,7 +49,7 @@
 	{disabled}
 	{name}
 	{id}
-	{onchange}
+	onchange={handleChange}
 	{onfocus}
 	{onblur}
 	{...rest}

package/src/input/InputSelect.svelte

@@ -1,71 +1,49 @@
 <script>
-	import { defaultStateIcons } from '@rokkit/core'
-	import { Proxy } from '@rokkit/states'
-	import { equals } from 'ramda'
+	import { Select } from '@rokkit/ui'
 
 	/**
 	 * @typedef {Object} InputSelectProps
-	 * @property {any}           value
-	 * @property {Object}        fields
-	 * @property {Array<Object>} options
-	 * @property {Function}      onchange
-	 * @property {Function}      onfocus
-	 * @property {Function}      onblur
+	 * @property {any} value - Selected value (bindable)
+	 * @property {Object} [fields] - Field mapping for options
+	 * @property {Array<Object|string>} [options] - Static options array (strings or objects)
+	 * @property {string} [placeholder] - Placeholder text
+	 * @property {boolean} [disabled] - Whether the select is disabled
+	 * @property {string} [size] - Size variant
+	 * @property {Function} [onchange] - Change callback
 	 */
 
 	/** @type {InputSelectProps & { [key: string]: any }} */
 	let {
-		class: classes = '',
 		value = $bindable(),
 		fields,
 		options = [],
-		icons = defaultStateIcons['selector'],
-		placeholder = null,
+		placeholder,
+		disabled = false,
+		size,
 		onchange,
-		onfocus,
-		onblur,
-		...rest
+		..._rest
 	} = $props()
 
-	let focused = $state(false)
-	let icon = $derived(focused ? icons['opened'] : icons['closed'])
-	let indexValue = $state(options.findIndex((item) => equals(item, value)))
-	let proxiedOptions = $derived(options.map((option) => new Proxy(option, fields)))
+	// Check if options include an empty string (used as "none" option)
+	const hasEmptyOption = $derived(options.some((opt) => opt === '' || (typeof opt === 'object' && opt?.value === '')))
 
-	function handleChange(event) {
-		value = options[indexValue]
-		onchange?.(options[indexValue])
-	}
+	// Filter out empty strings — Select + ItemProxy handles string options natively
+	const filteredOptions = $derived(
+		hasEmptyOption
+			? options.filter((opt) => opt !== '' && !(typeof opt === 'object' && opt?.value === ''))
+			: options
+	)
 
-	function handleFocus(event) {
-		focused = true
-		onfocus?.(event)
-	}
-
-	function handleBlur(event) {
-		focused = false
-		onblur?.(event)
-	}
+	// Use placeholder for empty option, or provide a default clear label
+	const effectivePlaceholder = $derived(hasEmptyOption ? (placeholder || 'None') : placeholder)
 </script>
 
-<div data-input-select class={classes}>
-	<select
-		bind:value={indexValue}
-		{...rest}
-		onchange={handleChange}
-		onfocus={handleFocus}
-		onblur={handleBlur}
-	>
-		{#if placeholder}
-			<option value="" disabled selected>{placeholder}</option>
-		{/if}
-		{#each proxiedOptions as option, index (index)}
-			<option value={index} aria-current={equals(option.value, value)}>
-				{option.get('text')}
-			</option>
-		{/each}
-	</select>
-	<span>
-		<i class={icon}></i>
-	</span>
-</div>
+<Select
+	options={filteredOptions}
+	{fields}
+	bind:value
+	placeholder={effectivePlaceholder}
+	{disabled}
+	{size}
+	{onchange}
+/>

package/src/input/InputSwitch.svelte

@@ -1,29 +1,18 @@
 <script>
-	import { getValue, defaultFields } from '@rokkit/core'
-	import Switch from '@rokkit/bits-ui'
+	import { Switch } from '@rokkit/ui'
 
 	/**
 	 * @typedef {Object} InputSwitchProps
 	 * @property {string} name
 	 * @property {any} value
-	 * @property {Array<Object>} options
+	 * @property {[any, any]} options
 	 * @property {Object} fields
 	 * @property {Function} onchange
 	 */
 
 	/** @type {InputSwitchProps & { [key: string]: any }} */
-	let { name, value, options, fields, onchange, ...restProps } = $props()
-	// let selected = $state(null)
-	let configFields = $derived({ ...defaultFields, ...fields })
-	function handle(data) {
-		value = getValue(data.value, configFields)
-		onchange?.(data.value)
-	}
-	let selected = $derived(options.find((option) => getValue(option, configFields) === value))
-	// $effect(() => {
-	// 	selected = options.find((option) => getValue(option, configFields) === value)
-	// })
+	let { name, value = $bindable(), options, fields, onchange, ...restProps } = $props()
 </script>
 
 <input {name} type="hidden" bind:value />
-<Switch bind:value={selected} {options} {fields} {...restProps} onchange={handle} />
+<Switch {options} {fields} bind:value {onchange} {...restProps} />

package/src/input/InputTel.svelte

@@ -37,6 +37,11 @@
 		size,
 		...rest
 	} = $props()
+
+	function handleChange(event) {
+		value = event.target.value
+		onchange?.(value)
+	}
 </script>
 
 <input
@@ -53,7 +58,7 @@
 	{minlength}
 	{pattern}
 	{size}
-	{onchange}
+	onchange={handleChange}
 	{onfocus}
 	{onblur}
 	{...rest}

package/src/input/InputText.svelte

@@ -37,6 +37,11 @@
 		size,
 		...rest
 	} = $props()
+
+	function handleChange(event) {
+		value = event.target.value
+		onchange?.(value)
+	}
 </script>
 
 <input
@@ -53,7 +58,7 @@
 	{minlength}
 	{pattern}
 	{size}
-	{onchange}
+	onchange={handleChange}
 	{onfocus}
 	{onblur}
 	{...rest}

package/src/input/InputTextArea.svelte

@@ -37,6 +37,11 @@
 		wrap,
 		...rest
 	} = $props()
+
+	function handleChange(event) {
+		value = event.target.value
+		onchange?.(value)
+	}
 </script>
 
 <textarea
@@ -52,7 +57,7 @@
 	{maxlength}
 	{minlength}
 	{wrap}
-	{onchange}
+	onchange={handleChange}
 	{onfocus}
 	{onblur}
 	{...rest}