@rokkit/forms 1.0.0-next.147 → 1.0.0-next.150

package/dist/src/input/index.d.ts

@@ -11,6 +11,7 @@ export { default as InputPassword } from "./InputPassword.svelte";
 export { default as InputRadio } from "./InputRadio.svelte";
 export { default as InputRange } from "./InputRange.svelte";
 export { default as InputSelect } from "./InputSelect.svelte";
+export { default as InputSwatch } from "./InputSwatch.svelte";
 export { default as InputSwitch } from "./InputSwitch.svelte";
 export { default as InputTel } from "./InputTel.svelte";
 export { default as InputText } from "./InputText.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/forms",
-  "version": "1.0.0-next.147",
+  "version": "1.0.0-next.150",
   "description": "Form building components for Rokkit applications",
   "repository": {
     "type": "git",

package/src/Input.svelte

@@ -17,8 +17,8 @@
 	const extraProps = $derived(type === 'integer' ? { step: '1' } : {})
 </script>
 
-{#if type === 'checkbox'}
-	{@const Component = resolveRenderer({ type: 'checkbox' }, allRenderers)}
+{#if type === 'checkbox' || type === 'swatch'}
+	{@const Component = resolveRenderer({ type, props: restProps }, allRenderers)}
 	<Component bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
 {:else}
 	{@const Component = resolveRenderer({ type, props: restProps }, allRenderers)}

package/src/input/InputSwatch.svelte

@@ -0,0 +1,30 @@
+<script>
+	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 {InputSwatchProps & { [key: string]: any }} */
+	let {
+		value = $bindable(),
+		options = [],
+		fields,
+		multiple = false,
+		shape = 'square',
+		size = 'md',
+		disabled = false,
+		onchange,
+		..._rest
+	} = $props()
+</script>
+
+<Swatch {options} {fields} bind:value {multiple} {shape} {size} {disabled} {onchange} />

package/src/input/index.js

@@ -14,6 +14,7 @@ export { default as InputRadio } from './InputRadio.svelte'
 
 export { default as InputRange } from './InputRange.svelte'
 export { default as InputSelect } from './InputSelect.svelte'
+export { default as InputSwatch } from './InputSwatch.svelte'
 export { default as InputSwitch } from './InputSwitch.svelte'
 export { default as InputTel } from './InputTel.svelte'
 export { default as InputText } from './InputText.svelte'

package/src/lib/Input.svelte

@@ -53,19 +53,17 @@
 		}
 	}
 
+	// 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
+	}
+
 	// Handle change events
 	function handleChange(event) {
-		if (type === 'checkbox' || type === 'radio') {
-			value = event.target.checked
-		} else if (type === 'number' || type === 'range') {
-			value = event.target.valueAsNumber
-		} else {
-			value = event.target.value
-		}
-
-		if (onchange) {
-			onchange(value)
-		}
+		value = resolveValue(event)
+		if (onchange) onchange(value)
 	}
 
 	// Generate unique ID for accessibility

package/src/lib/builder.svelte.js

@@ -777,6 +777,7 @@ export class FormBuilder {
 	 * @returns {Set<string>}
 	 */
 	get dirtyFields() {
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
 		const dirty = new Set()
 		this.#collectDirtyFields(this.#data, this.#initialData, '', dirty)
 		return dirty

package/src/lib/renderers.js

@@ -20,6 +20,7 @@ import InputRange from '../input/InputRange.svelte'
 import InputSelect from '../input/InputSelect.svelte'
 import InputSwitch from '../input/InputSwitch.svelte'
 import InputToggle from '../input/InputToggle.svelte'
+import InputSwatch from '../input/InputSwatch.svelte'
 import InputTel from '../input/InputTel.svelte'
 import InputText from '../input/InputText.svelte'
 import InputTextArea from '../input/InputTextArea.svelte'
@@ -54,7 +55,8 @@ export const defaultRenderers = {
 	radio: InputRadio,
 	select: InputSelect,
 	switch: InputSwitch,
-	toggle: InputToggle
+	toggle: InputToggle,
+	swatch: InputSwatch
 }
 
 /**