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

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}

package/src/input/InputTime.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/InputToggle.svelte

@@ -0,0 +1,28 @@
+<script>
+	import { Toggle } 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 {InputToggleProps & { [key: string]: any }} */
+	let {
+		value = $bindable(),
+		options = [],
+		fields,
+		disabled = false,
+		size,
+		showLabels,
+		onchange,
+		..._rest
+	} = $props()
+</script>
+
+<Toggle {options} {fields} bind:value {onchange} {disabled} {size} {showLabels} />

package/src/input/InputUrl.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/InputWeek.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/index.js

@@ -1,4 +1,5 @@
 // Native Input Components
+export { default as ArrayEditor } from './ArrayEditor.svelte'
 export { default as InputCheckbox } from './InputCheckbox.svelte'
 export { default as InputColor } from './InputColor.svelte'
 export { default as InputDate } from './InputDate.svelte'
@@ -13,11 +14,12 @@ export { default as InputRadio } from './InputRadio.svelte'
 
 export { default as InputRange } from './InputRange.svelte'
 export { default as InputSelect } from './InputSelect.svelte'
-// export { default as InputSwitch } from './InputSwitch.svelte'
+export { default as InputSwitch } from './InputSwitch.svelte'
 export { default as InputTel } from './InputTel.svelte'
 export { default as InputText } from './InputText.svelte'
 export { default as InputTextArea } from './InputTextArea.svelte'
 export { default as InputTime } from './InputTime.svelte'
+export { default as InputToggle } from './InputToggle.svelte'
 
 export { default as InputUrl } from './InputUrl.svelte'
 export { default as InputWeek } from './InputWeek.svelte'

package/src/lib/Input.svelte

@@ -70,11 +70,11 @@
 
 	// Generate unique ID for accessibility
 	let fieldId = `field-${Math.random().toString(36).substr(2, 9)}`
-	let descriptionId = description ? `${fieldId}-description` : undefined
-	let messageId = message ? `${fieldId}-message` : undefined
+	let descriptionId = $derived(description ? `${fieldId}-description` : undefined)
+	let messageId = $derived(message ? `${fieldId}-message` : undefined)
 
 	// Build aria-describedby
-	let ariaDescribedBy = [descriptionId, messageId].filter(Boolean).join(' ') || undefined
+	let ariaDescribedBy = $derived([descriptionId, messageId].filter(Boolean).join(' ') || undefined)
 </script>
 
 <div