@rokkit/forms 1.1.18 → 1.1.19

package/src/display/DisplayValue.svelte

@@ -1,17 +1,20 @@
-<script>
+<script lang="ts">
 	/**
 	 * Format-aware value display component.
 	 * Renders a value with formatting based on the `format` hint.
 	 */
 
-	let { value, format = 'text' } = $props()
+	type Props = {
+		value?: unknown
+		format?: string
+	}
+
+	let { value, format = 'text' }: Props = $props()
 
 	/**
 	 * Format a duration value (minutes) into human-readable string.
-	 * @param {number} minutes
-	 * @returns {string}
 	 */
-	function formatDuration(minutes) {
+	function formatDuration(minutes: unknown): string {
 		if (typeof minutes !== 'number') return String(minutes)
 		const h = Math.floor(minutes / 60)
 		const m = minutes % 60
@@ -20,12 +23,18 @@
 		return `${m}m`
 	}
 
-	const valueFormatters = {
+	function toDate(v: unknown): Date {
+		if (v instanceof Date) return v
+		if (typeof v === 'number') return new Date(v)
+		return new Date(String(v))
+	}
+
+	const valueFormatters: Record<string, (v: unknown) => string> = {
 		currency: (v) =>
-			new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(v),
-		datetime: (v) => new Date(v).toLocaleString(),
+			new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(Number(v)),
+		datetime: (v) => toDate(v).toLocaleString(),
 		duration: (v) => formatDuration(v),
-		number: (v) => new Intl.NumberFormat().format(v),
+		number: (v) => new Intl.NumberFormat().format(Number(v)),
 		boolean: (v) => (v ? '✓' : '✗')
 	}
 

package/src/input/ArrayEditor.svelte

@@ -1,17 +1,21 @@
-<script>
+<script lang="ts">
 	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 ItemSchema = {
+		type?: string
+		default?: unknown
+		properties?: Record<string, ItemSchema>
+	}
+
+	type Props = {
+		value?: unknown[]
+		onchange?: (value: unknown[]) => void
+		items?: ItemSchema
+		disabled?: boolean
+		readonly?: boolean
+	}
 
-	/** @type {ArrayEditorProps & { [key: string]: any }} */
 	let {
 		value = $bindable([]),
 		onchange,
@@ -19,28 +23,42 @@
 		disabled = false,
 		readonly = false,
 		..._rest
-	} = $props()
+	}: Props = $props()
 
 	// Normalize: treat undefined/null as empty array
 	const safeValue = $derived(Array.isArray(value) ? value : [])
 
+	// Narrow a dynamic array item into a record for object-schema rendering
+	function toRecord(item: unknown): Record<string, unknown> {
+		return item !== null && typeof item === 'object' && !Array.isArray(item)
+			? (item as Record<string, unknown>)
+			: {}
+	}
+
 	// Item schema — default to string if not provided
-	const itemSchema = $derived(items ?? { type: 'string' })
+	const itemSchema = $derived<ItemSchema>(items ?? { type: 'string' })
 
 	// Resolve the primitive renderer once (reused for all items)
 	const PrimitiveComponent = $derived(
 		itemSchema.type !== 'object'
-			? resolveRenderer({ type: itemSchema.type }, defaultRenderers)
+			? resolveRenderer({ type: itemSchema.type ?? 'string' }, defaultRenderers)
 			: null
 	)
 
-	function typeDefault(type) {
-		return (
-			{ string: '', number: 0, integer: 0, boolean: false, array: [], object: {} }[type] ?? null
-		)
+	const TYPE_DEFAULTS: Record<string, unknown> = {
+		string: '',
+		number: 0,
+		integer: 0,
+		boolean: false,
+		array: [],
+		object: {}
+	}
+
+	function typeDefault(type: string | undefined): unknown {
+		return TYPE_DEFAULTS[type ?? ''] ?? null
 	}
 
-	function createDefaultItem(schema) {
+	function createDefaultItem(schema: ItemSchema): unknown {
 		if (schema.type === 'object') {
 			return Object.fromEntries(
 				Object.entries(schema.properties ?? {}).map(([k, s]) => [
@@ -59,13 +77,13 @@
 		onchange?.(newValue)
 	}
 
-	function removeItem(index) {
+	function removeItem(index: number) {
 		const newValue = safeValue.filter((_, i) => i !== index)
 		value = newValue
 		onchange?.(newValue)
 	}
 
-	function updateItem(index, newItemValue) {
+	function updateItem(index: number, newItemValue: unknown) {
 		const newValue = safeValue.map((item, i) => (i === index ? newItemValue : item))
 		value = newValue
 		onchange?.(newValue)
@@ -83,14 +101,14 @@
 				<div data-array-editor-item-content>
 					{#if itemSchema.type === 'object'}
 						<FormRenderer
-							data={item}
+							data={toRecord(item)}
 							schema={itemSchema}
 							onupdate={(newData) => updateItem(index, newData)}
 						/>
-					{:else}
+					{:else if PrimitiveComponent}
 						<PrimitiveComponent
 							value={item}
-							onchange={(newVal) => updateItem(index, newVal)}
+							onchange={(newVal: unknown) => updateItem(index, newVal)}
 							{disabled}
 							{readonly}
 						/>

package/src/input/InputCheckbox.svelte

@@ -1,29 +1,21 @@
-<script>
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements'
 	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
 	import { isNil } from 'ramda'
 
-	/**
-	 * @typedef {ObjectIcon} StateIcons
-	 * @property {string} checked
-	 * @property {string} unchecked
-	 * @property {string} unknown
-	 */
+	type StateIcons = {
+		checked?: string
+		unchecked?: string
+		unknown?: string
+	}
 
-	/**
-	 * @typedef {Object} InputCheckboxProps
-	 * @property {null|Boolean} value
-	 * @property {'default'|'custom'} variant -
-	 * @property {StateIcons} icons
-	 * @property {Function} onchange
-	 * @property {Function} onfocus
-	 * @property {Function} onblur
-	 * @property {boolean} required
-	 * @property {boolean} disabled
-	 * @property {string} name
-	 * @property {string} id
-	 */
+	type Props = Omit<HTMLInputAttributes, 'value' | 'onchange'> & {
+		value?: boolean | null
+		variant?: 'default' | 'custom'
+		icons?: StateIcons
+		onchange?: (value: boolean) => void
+	}
 
-	/** @type {InputCheckboxProps & { [key: string]: any }} */
 	let {
 		value = $bindable(),
 		variant = 'custom',
@@ -36,15 +28,15 @@
 		name,
 		id,
 		...rest
-	} = $props()
+	}: Props = $props()
 
-	function handleChange(event) {
-		value = Boolean(event.target.checked)
+	function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
+		value = Boolean(event.currentTarget.checked)
 		onchange?.(value)
 	}
 
 	function toggle() {
-		value = !Boolean(value)
+		value = !value
 		onchange?.(value)
 	}
 

package/src/input/InputColor.svelte

@@ -1,18 +1,11 @@
-<script>
-	/**
-	 * @typedef {Object} InputColorProps
-	 * @property {string} value
-	 * @property {Function} onchange
-	 * @property {Function} onfocus
-	 * @property {Function} onblur
-	 * @property {boolean} required
-	 * @property {boolean} disabled
-	 * @property {string} name
-	 * @property {string} id
-	 * @property {string} autocomplete
-	 */
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements'
+
+	type Props = Omit<HTMLInputAttributes, 'value' | 'onchange'> & {
+		value?: string
+		onchange?: (value: string) => void
+	}
 
-	/** @type {InputColorProps & { [key: string]: any }} */
 	let {
 		value = $bindable(),
 		onchange,
@@ -24,10 +17,10 @@
 		id,
 		autocomplete,
 		...rest
-	} = $props()
+	}: Props = $props()
 
-	function handleChange(event) {
-		value = event.target.value
+	function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
+		value = event.currentTarget.value
 		onchange?.(value)
 	}
 </script>

package/src/input/InputDate.svelte

@@ -1,22 +1,11 @@
-<script>
-	/**
-	 * @typedef {Object} InputDateProps
-	 * @property {string} value
-	 * @property {Function} onchange
-	 * @property {Function} onfocus
-	 * @property {Function} onblur
-	 * @property {string} min
-	 * @property {string} max
-	 * @property {number} step
-	 * @property {boolean} required
-	 * @property {boolean} disabled
-	 * @property {boolean} readonly
-	 * @property {string} name
-	 * @property {string} id
-	 * @property {string} autocomplete
-	 */
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements'
+
+	type Props = Omit<HTMLInputAttributes, 'value' | 'onchange'> & {
+		value?: string
+		onchange?: (value: string) => void
+	}
 
-	/** @type {InputDateProps & { [key: string]: any }} */
 	let {
 		value = $bindable(),
 		onchange,
@@ -32,10 +21,10 @@
 		id,
 		autocomplete,
 		...rest
-	} = $props()
+	}: Props = $props()
 
-	function handleChange(event) {
-		value = event.target.value
+	function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
+		value = event.currentTarget.value
 		onchange?.(value)
 	}
 </script>

package/src/input/InputDateTime.svelte

@@ -1,22 +1,11 @@
-<script>
-	/**
-	 * @typedef {Object} InputDateTimeProps
-	 * @property {string} value
-	 * @property {Function} onchange
-	 * @property {Function} onfocus
-	 * @property {Function} onblur
-	 * @property {string} min
-	 * @property {string} max
-	 * @property {number} step
-	 * @property {boolean} required
-	 * @property {boolean} disabled
-	 * @property {boolean} readonly
-	 * @property {string} name
-	 * @property {string} id
-	 * @property {string} autocomplete
-	 */
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements'
+
+	type Props = Omit<HTMLInputAttributes, 'value' | 'onchange'> & {
+		value?: string
+		onchange?: (value: string) => void
+	}
 
-	/** @type {InputDateTimeProps & { [key: string]: any }} */
 	let {
 		value = $bindable(),
 		onchange,
@@ -32,10 +21,10 @@
 		id,
 		autocomplete,
 		...rest
-	} = $props()
+	}: Props = $props()
 
-	function handleChange(event) {
-		value = event.target.value
+	function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
+		value = event.currentTarget.value
 		onchange?.(value)
 	}
 </script>

package/src/input/InputEmail.svelte

@@ -1,25 +1,11 @@
-<script>
-	/**
-	 * @typedef {Object} InputEmailProps
-	 * @property {string} value
-	 * @property {Function} onchange
-	 * @property {Function} onfocus
-	 * @property {Function} onblur
-	 * @property {string} placeholder
-	 * @property {boolean} required
-	 * @property {boolean} disabled
-	 * @property {boolean} readonly
-	 * @property {string} name
-	 * @property {string} id
-	 * @property {string} autocomplete
-	 * @property {number} maxlength
-	 * @property {number} minlength
-	 * @property {string} pattern
-	 * @property {number} size
-	 * @property {boolean} multiple
-	 */
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements'
+
+	type Props = Omit<HTMLInputAttributes, 'value' | 'onchange'> & {
+		value?: string
+		onchange?: (value: string) => void
+	}
 
-	/** @type {InputEmailProps & { [key: string]: any }} */
 	let {
 		value = $bindable(),
 		onchange,
@@ -38,10 +24,10 @@
 		size,
 		multiple,
 		...rest
-	} = $props()
+	}: Props = $props()
 
-	function handleChange(event) {
-		value = event.target.value
+	function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
+		value = event.currentTarget.value
 		onchange?.(value)
 	}
 </script>

package/src/input/InputFile.svelte

@@ -1,19 +1,11 @@
-<script>
-	/**
-	 * @typedef {Object} InputFileProps
-	 * @property {FileList} value
-	 * @property {Function} onchange
-	 * @property {Function} onfocus
-	 * @property {Function} onblur
-	 * @property {string} accept
-	 * @property {boolean} multiple
-	 * @property {boolean} required
-	 * @property {boolean} disabled
-	 * @property {string} name
-	 * @property {string} id
-	 */
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements'
+
+	type Props = Omit<HTMLInputAttributes, 'value' | 'onchange'> & {
+		value?: FileList | null
+		onchange?: (value: FileList | null) => void
+	}
 
-	/** @type {InputFileProps & { [key: string]: any }} */
 	let {
 		value = $bindable(),
 		onchange,
@@ -26,10 +18,10 @@
 		name,
 		id,
 		...rest
-	} = $props()
+	}: Props = $props()
 
-	function handleChange(event) {
-		value = event.target.files
+	function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
+		value = event.currentTarget.files
 		onchange?.(value)
 	}
 </script>

package/src/input/InputMonth.svelte

@@ -1,22 +1,11 @@
-<script>
-	/**
-	 * @typedef {Object} InputMonthProps
-	 * @property {string} value
-	 * @property {Function} onchange
-	 * @property {Function} onfocus
-	 * @property {Function} onblur
-	 * @property {string} min
-	 * @property {string} max
-	 * @property {number} step
-	 * @property {boolean} required
-	 * @property {boolean} disabled
-	 * @property {boolean} readonly
-	 * @property {string} name
-	 * @property {string} id
-	 * @property {string} autocomplete
-	 */
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements'
+
+	type Props = Omit<HTMLInputAttributes, 'value' | 'onchange'> & {
+		value?: string
+		onchange?: (value: string) => void
+	}
 
-	/** @type {InputMonthProps & { [key: string]: any }} */
 	let {
 		value = $bindable(),
 		onchange,
@@ -32,10 +21,10 @@
 		id,
 		autocomplete,
 		...rest
-	} = $props()
+	}: Props = $props()
 
-	function handleChange(event) {
-		value = event.target.value
+	function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
+		value = event.currentTarget.value
 		onchange?.(value)
 	}
 </script>

package/src/input/InputNumber.svelte

@@ -1,23 +1,11 @@
-<script>
-	/**
-	 * @typedef {Object} InputNumberProps
-	 * @property {number} value
-	 * @property {Function} onchange
-	 * @property {Function} onfocus
-	 * @property {Function} onblur
-	 * @property {number} min
-	 * @property {number} max
-	 * @property {number} step
-	 * @property {string} placeholder
-	 * @property {boolean} required
-	 * @property {boolean} disabled
-	 * @property {boolean} readonly
-	 * @property {string} name
-	 * @property {string} id
-	 * @property {string} autocomplete
-	 */
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements'
+
+	type Props = Omit<HTMLInputAttributes, 'value' | 'onchange'> & {
+		value?: number
+		onchange?: (value: number) => void
+	}
 
-	/** @type {InputNumberProps & { [key: string]: any }} */
 	let {
 		value = $bindable(),
 		onchange,
@@ -34,10 +22,10 @@
 		id,
 		autocomplete,
 		...rest
-	} = $props()
+	}: Props = $props()
 
-	function handleChange(event) {
-		value = event.target.valueAsNumber
+	function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
+		value = event.currentTarget.valueAsNumber
 		onchange?.(value)
 	}
 </script>

package/src/input/InputPassword.svelte

@@ -1,24 +1,11 @@
-<script>
-	/**
-	 * @typedef {Object} InputPasswordProps
-	 * @property {string} value
-	 * @property {Function} onchange
-	 * @property {Function} onfocus
-	 * @property {Function} onblur
-	 * @property {string} placeholder
-	 * @property {boolean} required
-	 * @property {boolean} disabled
-	 * @property {boolean} readonly
-	 * @property {string} name
-	 * @property {string} id
-	 * @property {string} autocomplete
-	 * @property {number} maxlength
-	 * @property {number} minlength
-	 * @property {string} pattern
-	 * @property {number} size
-	 */
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements'
+
+	type Props = Omit<HTMLInputAttributes, 'value' | 'onchange'> & {
+		value?: string
+		onchange?: (value: string) => void
+	}
 
-	/** @type {InputPasswordProps & { [key: string]: any }} */
 	let {
 		value = $bindable(),
 		onchange,
@@ -36,10 +23,10 @@
 		pattern,
 		size,
 		...rest
-	} = $props()
+	}: Props = $props()
 
-	function handleChange(event) {
-		value = event.target.value
+	function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
+		value = event.currentTarget.value
 		onchange?.(value)
 	}
 </script>

package/src/input/InputRadio.svelte

@@ -1,21 +1,20 @@
-<script>
-	import { getItemAtIndex, getIndexForItem, noop } from '@rokkit/core'
+<script lang="ts">
+	import { getItemAtIndex, getIndexForItem, noop, type FieldMapping } from '@rokkit/core'
 	import { ProxyItem } from '@rokkit/states'
-	// import { equals } from 'ramda'
-	/**
-	 * @typedef {Object} InputRadioProps
-	 * @property {string} [class]
-	 * @property {any} value
-	 * @property {Object} [fields]
-	 * @property {any} [options]
-	 * @property {boolean} [disabled]
-	 * @property {boolean} [flip]
-	 * @property {Function} onchange
-	 * @property {Function} onfocus
-	 * @property {Function} onblur
-	 */
 
-	/** @type {InputRadioProps & { [key: string]: any }} */
+	type Props = {
+		class?: string
+		value?: unknown
+		fields?: FieldMapping
+		options?: unknown[]
+		disabled?: boolean
+		flip?: boolean
+		onchange?: (value: unknown) => void
+		onfocus?: (event: FocusEvent) => void
+		onblur?: (event: FocusEvent) => void
+		[key: string]: unknown
+	}
+
 	let {
 		class: className = '',
 		value = $bindable(),
@@ -26,7 +25,7 @@
 		onfocus,
 		onblur,
 		...rest
-	} = $props()
+	}: Props = $props()
 
 	let currentIndex = $derived(getIndexForItem(options, value))
 
@@ -34,10 +33,6 @@
 		value = getItemAtIndex(options, currentIndex)
 		onchange?.(value)
 	}
-
-	// $effect.pre(() => {
-	// 	currentIndex = getIndexForItem(options, value)
-	// })
 </script>
 
 <radio-group class={className} class:disabled>

package/src/input/InputRange.svelte

@@ -1,21 +1,11 @@
-<script>
-	/**
-	 * @typedef {Object} InputRangeProps
-	 * @property {number} value
-	 * @property {Function} onchange
-	 * @property {Function} onfocus
-	 * @property {Function} onblur
-	 * @property {number} min
-	 * @property {number} max
-	 * @property {number} step
-	 * @property {string} list
-	 * @property {boolean} required
-	 * @property {boolean} disabled
-	 * @property {string} name
-	 * @property {string} id
-	 */
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements'
+
+	type Props = Omit<HTMLInputAttributes, 'value' | 'onchange'> & {
+		value?: number
+		onchange?: (value: number) => void
+	}
 
-	/** @type {InputRangeProps & { [key: string]: any }} */
 	let {
 		value = $bindable(),
 		min = undefined,
@@ -30,10 +20,10 @@
 		onfocus,
 		onblur,
 		...rest
-	} = $props()
+	}: Props = $props()
 
-	function handleChange(event) {
-		value = event.target.valueAsNumber
+	function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
+		value = event.currentTarget.valueAsNumber
 		onchange?.(value)
 	}
 </script>