@rokkit/forms 1.0.0-next.146 → 1.0.0-next.148

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.146",
+  "version": "1.0.0-next.148",
   "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/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
 }
 
 /**