@rokkit/forms 1.1.18 → 1.2.0

package/src/input/InputSelect.svelte

@@ -1,18 +1,18 @@
-<script>
+<script lang="ts">
 	import { Select } from '@rokkit/ui'
 
-	/**
-	 * @typedef {Object} InputSelectProps
-	 * @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 }} */
+	type Option = string | Record<string, unknown>
+
+	type Props = {
+		value?: unknown
+		fields?: Record<string, string>
+		options?: Option[]
+		placeholder?: string
+		disabled?: boolean
+		size?: 'sm' | 'md' | 'lg'
+		onchange?: (value: unknown, item: unknown) => void
+	}
+
 	let {
 		value = $bindable(),
 		fields,
@@ -22,18 +22,18 @@
 		size,
 		onchange,
 		..._rest
-	} = $props()
+	}: Props = $props()
+
+	function isEmptyOption(opt: Option): boolean {
+		return opt === '' || (typeof opt === 'object' && opt?.value === '')
+	}
 
 	// Check if options include an empty string (used as "none" option)
-	const hasEmptyOption = $derived(
-		options.some((opt) => opt === '' || (typeof opt === 'object' && opt?.value === ''))
-	)
+	const hasEmptyOption = $derived(options.some(isEmptyOption))
 
 	// Filter out empty strings — Select + ProxyItem handles string options natively
 	const filteredOptions = $derived(
-		hasEmptyOption
-			? options.filter((opt) => opt !== '' && !(typeof opt === 'object' && opt?.value === ''))
-			: options
+		hasEmptyOption ? options.filter((opt) => !isEmptyOption(opt)) : options
 	)
 
 	// Use placeholder for empty option, or provide a default clear label

package/src/input/InputSwatch.svelte

@@ -1,19 +1,17 @@
-<script>
+<script lang="ts">
 	import { Swatch } from '@rokkit/ui'
 
-	/**
-	 * @typedef {Object} InputSwatchProps
-	 * @property {any} value - Selected value (bindable); array when multiple=true
-	 * @property {Array<Object|string>} [options] - Options array
-	 * @property {Object} [fields] - Field mapping (label, value, disabled)
-	 * @property {boolean} [multiple] - Multi-select mode
-	 * @property {'square'|'circle'} [shape] - Default cell shape
-	 * @property {'sm'|'md'|'lg'} [size] - Size variant
-	 * @property {boolean} [disabled] - Disabled state
-	 * @property {Function} [onchange] - Change callback
-	 */
+	type Props = {
+		value?: unknown
+		options?: Array<string | number | Record<string, unknown>>
+		fields?: Record<string, string>
+		multiple?: boolean
+		shape?: 'square' | 'circle'
+		size?: 'sm' | 'md' | 'lg'
+		disabled?: boolean
+		onchange?: (value: unknown, item: unknown) => void
+	}
 
-	/** @type {InputSwatchProps & { [key: string]: any }} */
 	let {
 		value = $bindable(),
 		options = [],
@@ -24,7 +22,7 @@
 		disabled = false,
 		onchange,
 		..._rest
-	} = $props()
+	}: Props = $props()
 </script>
 
 <Swatch {options} {fields} bind:value {multiple} {shape} {size} {disabled} {onchange} />

package/src/input/InputSwitch.svelte

@@ -1,17 +1,11 @@
-<script>
-	import { Switch } from '@rokkit/ui'
+<script lang="ts">
+	import { Switch, type SwitchProps } from '@rokkit/ui'
 
-	/**
-	 * @typedef {Object} InputSwitchProps
-	 * @property {string} name
-	 * @property {any} value
-	 * @property {[any, any]} options
-	 * @property {Object} fields
-	 * @property {Function} onchange
-	 */
+	type Props = SwitchProps & {
+		name?: string
+	}
 
-	/** @type {InputSwitchProps & { [key: string]: any }} */
-	let { name, value = $bindable(), options, fields, onchange, ...restProps } = $props()
+	let { name, value = $bindable(), options, fields, onchange, ...restProps }: Props = $props()
 </script>
 
 <input {name} type="hidden" bind:value />

package/src/input/InputTel.svelte

@@ -1,24 +1,11 @@
-<script>
-	/**
-	 * @typedef {Object} InputTelProps
-	 * @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 {InputTelProps & { [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/InputText.svelte

@@ -1,24 +1,11 @@
-<script>
-	/**
-	 * @typedef {Object} InputTextProps
-	 * @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 {InputTextProps & { [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/InputTextArea.svelte

@@ -1,24 +1,11 @@
-<script>
-	/**
-	 * @typedef {Object} InputTextAreaProps
-	 * @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 {number} rows
-	 * @property {number} cols
-	 * @property {number} maxlength
-	 * @property {number} minlength
-	 * @property {string} wrap
-	 */
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from 'svelte/elements'
+
+	type Props = Omit<HTMLTextareaAttributes, 'value' | 'onchange'> & {
+		value?: string
+		onchange?: (value: string) => void
+	}
 
-	/** @type {InputTextAreaProps & { [key: string]: any }} */
 	let {
 		value = $bindable(),
 		onchange,
@@ -36,10 +23,10 @@
 		minlength,
 		wrap,
 		...rest
-	} = $props()
+	}: Props = $props()
 
-	function handleChange(event) {
-		value = event.target.value
+	function handleChange(event: Event & { currentTarget: HTMLTextAreaElement }) {
+		value = event.currentTarget.value
 		onchange?.(value)
 	}
 </script>

package/src/input/InputTime.svelte

@@ -1,22 +1,11 @@
-<script>
-	/**
-	 * @typedef {Object} InputTimeProps
-	 * @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 {InputTimeProps & { [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/InputToggle.svelte

@@ -1,18 +1,8 @@
-<script>
-	import { Toggle } from '@rokkit/ui'
+<script lang="ts">
+	import { Toggle, type ToggleProps } from '@rokkit/ui'
 
-	/**
-	 * @typedef {Object} InputToggleProps
-	 * @property {any} value - Selected value (bindable)
-	 * @property {Array<Object|string>} [options] - Options array (strings or objects)
-	 * @property {Object} [fields] - Field mapping for option data
-	 * @property {boolean} [disabled] - Whether the toggle is disabled
-	 * @property {string} [size] - Size variant ('sm' | 'md' | 'lg')
-	 * @property {boolean} [showLabels] - Show text labels
-	 * @property {Function} [onchange] - Change callback
-	 */
+	type Props = Pick<ToggleProps, 'value' | 'options' | 'fields' | 'disabled' | 'size' | 'showLabels' | 'onchange'>
 
-	/** @type {InputToggleProps & { [key: string]: any }} */
 	let {
 		value = $bindable(),
 		options = [],
@@ -22,7 +12,7 @@
 		showLabels,
 		onchange,
 		..._rest
-	} = $props()
+	}: Props = $props()
 </script>
 
 <Toggle {options} {fields} bind:value {onchange} {disabled} {size} {showLabels} />

package/src/input/InputUrl.svelte

@@ -1,24 +1,11 @@
-<script>
-	/**
-	 * @typedef {Object} InputUrlProps
-	 * @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 {InputUrlProps & { [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/InputWeek.svelte

@@ -1,22 +1,11 @@
-<script>
-	/**
-	 * @typedef {Object} InputWeekProps
-	 * @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 {InputWeekProps & { [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/lib/Input.svelte

@@ -1,9 +1,36 @@
-<script>
+<script lang="ts">
 	/**
 	 * Universal Input wrapper component supporting all HTML input types
 	 * Provides consistent interface with label, description, message handling
 	 */
 
+	type Message = { state: 'error' | 'warning' | 'info' | 'success'; text: string }
+
+	type SelectOption = string | { value: unknown; label?: string }
+
+	type Props = {
+		type?: string
+		value?: unknown
+		label?: string
+		description?: string
+		message?: Message | null
+		placeholder?: string
+		required?: boolean
+		disabled?: boolean
+		readonly?: boolean
+		min?: number | string
+		max?: number | string
+		step?: number | string
+		pattern?: string
+		minLength?: number
+		maxLength?: number
+		options?: SelectOption[]
+		className?: string
+		onchange?: (value: unknown) => void
+		onfocus?: (event: FocusEvent) => void
+		onblur?: (event: FocusEvent) => void
+	} & Record<string, unknown>
+
 	let {
 		// Core input properties
 		type = 'text',
@@ -39,10 +66,10 @@
 
 		// Pass through any other props
 		...props
-	} = $props()
+	}: Props = $props()
 
 	// Determine layout class based on input type
-	function getLayoutClass(inputType) {
+	function getLayoutClass(inputType: string): string {
 		switch (inputType) {
 			case 'checkbox':
 				return 'input-layout-checkbox'
@@ -54,14 +81,21 @@
 	}
 
 	// Resolve new value from event based on input type
-	function resolveValue(event) {
-		if (type === 'checkbox' || type === 'radio') return event.target.checked
-		if (type === 'number' || type === 'range') return event.target.valueAsNumber
-		return event.target.value
+	function resolveValue(
+		event: Event & { currentTarget: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement }
+	): unknown {
+		const target = event.currentTarget
+		if ((type === 'checkbox' || type === 'radio') && target instanceof HTMLInputElement)
+			return target.checked
+		if ((type === 'number' || type === 'range') && target instanceof HTMLInputElement)
+			return target.valueAsNumber
+		return target.value
 	}
 
 	// Handle change events
-	function handleChange(event) {
+	function handleChange(
+		event: Event & { currentTarget: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement }
+	) {
 		value = resolveValue(event)
 		if (onchange) onchange(value)
 	}
@@ -85,7 +119,7 @@
 			<input
 				id={fieldId}
 				{type}
-				checked={value}
+				checked={Boolean(value)}
 				{required}
 				{disabled}
 				{readonly}
@@ -134,8 +168,8 @@
 					{required}
 					{disabled}
 					{readonly}
-					{minLength}
-					{maxLength}
+					minlength={minLength}
+					maxlength={maxLength}
 					aria-describedby={ariaDescribedBy}
 					onchange={handleChange}
 					{onfocus}
@@ -155,8 +189,8 @@
 					{max}
 					{step}
 					{pattern}
-					{minLength}
-					{maxLength}
+					minlength={minLength}
+					maxlength={maxLength}
 					aria-describedby={ariaDescribedBy}
 					onchange={handleChange}
 					{onfocus}

package/src/lib/builder.svelte.js

@@ -106,10 +106,10 @@ function setNestedValue(data, keys, value) {
  * FormBuilder class for dynamically generating forms from data structures
  */
 export class FormBuilder {
-	/** @type {Object} */
+	/** @type {Record<string, unknown>} */
 	#data = $state({})
 
-	/** @type {Object} - Snapshot of data at construction (or last snapshot()) */
+	/** @type {Record<string, unknown>} - Snapshot of data at construction (or last snapshot()) */
 	#initialData = {}
 
 	/** @type {Object} */
@@ -144,7 +144,7 @@ export class FormBuilder {
 	}
 	/**
 	 * Get the current data
-	 * @returns {Object} Current data object
+	 * @returns {Record<string, unknown>} Current data object
 	 */
 	get data() {
 		return this.#data
@@ -152,7 +152,7 @@ export class FormBuilder {
 
 	/**
 	 * Set the data
-	 * @param {Object} value - New data object
+	 * @param {Record<string, unknown>} value - New data object
 	 */
 	set data(value) {
 		this.#data = value
@@ -219,7 +219,7 @@ export class FormBuilder {
 
 	/**
 	 * Create a new FormBuilder instance
-	 * @param {Object} [data={}] - Initial data object
+	 * @param {Record<string, unknown>} [data={}] - Initial data object
 	 * @param {Object|null} [schema=null] - Optional schema override
 	 * @param {Object|null} [layout=null] - Optional layout override
 	 * @param {Object<string, import('./lookup.svelte.js').LookupConfig>} [lookups={}] - Lookup configurations
@@ -740,7 +740,7 @@ export class FormBuilder {
 	 * Get form data with hidden field values stripped out
 	 * Hidden fields are those absent from this.elements (the derived list)
 	 * Does not mutate this.#data
-	 * @returns {Object} Filtered data containing only visible field keys
+	 * @returns {Record<string, unknown>} Filtered data containing only visible field keys
 	 */
 	getVisibleData() {
 		const visiblePaths = new SvelteSet(

package/dist/src/types.d.ts

@@ -1,5 +0,0 @@
-export namespace types {
-    let string: import("svelte/legacy").LegacyComponentType;
-    let integer: import("svelte/legacy").LegacyComponentType;
-    let phone: import("svelte/legacy").LegacyComponentType;
-}