@samuel-charpentier/sform 0.0.11 → 1.0.0

package/README.md

@@ -23,7 +23,6 @@ A type-safe form library for **Svelte 5** with **SvelteKit remote functions**.
     - [Radio](#radio)
     - [Range](#range)
     - [Toggle](#toggle)
-    - [Toggle Options](#toggle-options)
     - [Masked Input](#masked-input)
     - [Hidden Input](#hidden-input)
   - [`<Sbutton>`](#sbutton)
@@ -44,7 +43,6 @@ A type-safe form library for **Svelte 5** with **SvelteKit remote functions**.
 - ✅ **Masked inputs** - Phone, credit card, SSN formatting
 - ✅ **Range slider** - With optional value display
 - ✅ **Toggle switch** - Modern on/off control
-- ✅ **Toggle options** - Segmented control for mutually exclusive options
 - ✅ **Stateful button** - Shows pending state during submission
 
 ## Requirements
@@ -311,38 +309,6 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 | `checkedValue`   | `string` | `'true'`    | Value when checked   |
 | `uncheckedValue` | `string` | `'false'`   | Value when unchecked |
 
-#### Toggle Options
-
-```svelte
-<Sfield
-	field={fields.theme}
-	type="toggle-options"
-	label="Theme"
-	options={[
-		{ value: 'light', label: 'Light' },
-		{ value: 'dark', label: 'Dark' },
-		{ value: 'auto', label: 'Auto' }
-	]}
-/>
-<!-- Multiple selection -->
-<Sfield
-	field={fields.features}
-	type="toggle-options"
-	label="Features"
-	multiple={true}
-	options={[
-		{ value: 'push', label: 'Push Notifications' },
-		{ value: 'email', label: 'Email' },
-		{ value: 'sms', label: 'SMS' }
-	]}
-/>
-```
-
-| Prop       | Type                         | Default  | Description               |
-| ---------- | ---------------------------- | -------- | ------------------------- |
-| `options`  | `ToggleOption[] \| string[]` | required | Toggle options            |
-| `multiple` | `boolean`                    | `false`  | Allow multiple selections |
-
 #### Masked Input
 
 ```svelte

package/dist/Sform/Sfield.svelte

@@ -15,7 +15,6 @@
 	import RadioInput from './inputs/RadioInput.svelte';
 	import RangeInput from './inputs/RangeInput.svelte';
 	import ToggleInput from './inputs/ToggleInput.svelte';
-	import ToggleOptionsInput from './inputs/ToggleOptionsInput.svelte';
 	import MaskedInput from './inputs/MaskedInput.svelte';
 	import PasswordInput from './inputs/PasswordInput.svelte';
 	import HiddenInput from './inputs/HiddenInput.svelte';
@@ -147,8 +146,6 @@
 		<RangeInput {...passthroughProps()} {...internalProps} />
 	{:else if props.type === 'toggle'}
 		<ToggleInput {...passthroughProps()} {...internalProps} />
-	{:else if props.type === 'toggle-options'}
-		<ToggleOptionsInput {...passthroughProps()} {...internalProps} />
 	{:else if props.type === 'masked'}
 		<MaskedInput {...passthroughProps()} {...internalProps} />
 	{:else if props.type === 'hidden'}

package/dist/Sform/Sform.svelte

@@ -53,7 +53,6 @@
 
 	// Trigger validation including untouched fields (for blur mode)
 	const triggerValidation = () => {
-		if (form.pending) return;
 		form.validate({ includeUntouched: true, preflightOnly });
 	};
 

package/dist/Sform/inputs/ButtonInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="T = unknown">
-	import type { Snippet } from 'svelte';
+	import { tick, type Snippet } from 'svelte';
 	import type { ButtonState, RemoteFormIssue } from '../types.js';
 	import { getSformContext } from '../context.svelte.js';
 
@@ -20,15 +20,13 @@
 		/** The remote form - used to infer the result type T */
 		form: FormLike<T>;
 		/** Button text (used if no children snippet provided) */
-		label?: string;
+		label?: string | Snippet<[ButtonState<T>]>;
 		/** Button type */
 		buttonType?: 'submit' | 'reset' | 'button';
 		/** Button class */
 		class?: string;
 		/** Whether button is disabled */
 		disabled?: boolean;
-		/** Children snippet receives ButtonState<T> for custom rendering with typed result */
-		children?: Snippet<[ButtonState<T>]>;
 		/** Callback that runs before validation/submission (can be async) */
 		onsubmit?: () => void | Promise<void>;
 	}
@@ -38,7 +36,6 @@
 		buttonType = 'submit',
 		class: className,
 		disabled = false,
-		children,
 		onsubmit
 	}: Props = $props();
 
@@ -59,6 +56,8 @@
 		// This ensures blur validation runs with valid form data, not stale data
 		buttonElement.focus();
 
+		await tick();
+
 		if (onsubmit) {
 			await onsubmit();
 		}
@@ -80,8 +79,8 @@
 	disabled={isDisabled}
 	onclick={handleClick}
 >
-	{#if children}
-		{@render children(formState)}
+	{#if typeof label === 'function'}
+		{@render label(formState)}
 	{:else}
 		{label}
 	{/if}

package/dist/Sform/inputs/ButtonInput.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 import type { ButtonState, RemoteFormIssue } from '../types.js';
 declare function $$render<T = unknown>(): {
     props: {
@@ -12,15 +12,13 @@ declare function $$render<T = unknown>(): {
             };
         };
         /** Button text (used if no children snippet provided) */
-        label?: string;
+        label?: string | Snippet<[ButtonState<T>]>;
         /** Button type */
         buttonType?: "submit" | "reset" | "button";
         /** Button class */
         class?: string;
         /** Whether button is disabled */
         disabled?: boolean;
-        /** Children snippet receives ButtonState<T> for custom rendering with typed result */
-        children?: Snippet<[ButtonState<T>]>;
         /** Callback that runs before validation/submission (can be async) */
         onsubmit?: () => void | Promise<void>;
     };

package/dist/Sform/inputs/CheckboxGroupInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { CheckboxGroupInputProps, SelectOption } from '../types.js';
 	import Fieldset from '../utils/Fieldset.svelte';
+	import RadioCheckboxLabel from './RadioCheckboxLabel.svelte';
 
 	let {
 		field,
@@ -30,39 +31,10 @@
 	}
 </script>
 
-<Fieldset {label} {labelClass} {className} {disabled}>
+<Fieldset {label} {labelClass} {className} {disabled} type="checkbox">
 	{#each normalizedOptions as option}
 		{@const fieldAttrs = getFieldAttrs(option.value)}
 		{@const uniqueId = `${name}-${option.value}`}
-		<label class="sform-checkbox-option" class:disabled={option.disabled}>
-			<input
-				{...fieldAttrs}
-				type="checkbox"
-				id={uniqueId}
-				disabled={disabled || option.disabled}
-				{onblur}
-				{oninput}
-			/>
-			<span class="sform-checkbox-label">{option.label}</span>
-		</label>
+		<RadioCheckboxLabel {fieldAttrs} {uniqueId} {option} {disabled} {onblur} {oninput} />
 	{/each}
 </Fieldset>
-
-<style>
-	.sform-checkbox-option {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		cursor: pointer;
-		padding: 0.25rem 0;
-	}
-
-	.sform-checkbox-option.disabled {
-		opacity: 0.6;
-		cursor: not-allowed;
-	}
-
-	.sform-checkbox-option input {
-		margin: 0;
-	}
-</style>

package/dist/Sform/inputs/CheckboxInput.svelte

@@ -24,7 +24,11 @@
 <label class="sform-checkbox {className ?? ''}" class:disabled>
 	<input {...fieldAttrs} type="checkbox" id={name} {disabled} {onblur} {oninput} />
 	{#if label}
-		<span class={labelClass}>{label}</span>
+		{#if typeof label === 'function'}
+			{@render label()}
+		{:else}
+			<span class={labelClass}>{label}</span>
+		{/if}
 	{/if}
 </label>
 

package/dist/Sform/inputs/MaskedInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { MaskedInputProps } from '../types.js';
 	import { applyMask, MASK_PATTERNS, type MaskPattern, type MaskToken } from '../utils/mask.js';
+	import TopLabel from './TopLabel.svelte';
 
 	let {
 		field,
@@ -182,9 +183,7 @@
 	}
 </script>
 
-{#if label}
-	<label class={labelClass} for={name}>{label}</label>
-{/if}
+<TopLabel {label} {labelClass} {name} />
 <!-- Hidden input holds the actual value for form submission -->
 <input type="hidden" {name} value={field.value() ?? ''} />
 <!-- Visible input shows masked display value but doesn't submit (no name) -->

package/dist/Sform/inputs/NumberInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { NumberInputComponentProps } from '../types.js';
+	import TopLabel from './TopLabel.svelte';
 
 	let {
 		field,
@@ -73,9 +74,7 @@
 	}
 </script>
 
-{#if label}
-	<label class={labelClass} for={name}>{label}</label>
-{/if}
+<TopLabel {label} {labelClass} {name} />
 <div class="sform-input-wrapper {wrapperClass ?? ''}">
 	{#if prefix}
 		<div class="sform-prefix" onclick={() => inputElement?.focus()} role="presentation">

package/dist/Sform/inputs/PasswordInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { PasswordInputProps } from '../types.js';
+	import TopLabel from './TopLabel.svelte';
 
 	let {
 		field,
@@ -32,9 +33,7 @@
 	}
 </script>
 
-{#if label}
-	<label class={labelClass} for={name}>{label}</label>
-{/if}
+<TopLabel {label} {labelClass} {name} />
 <div class="sform-password-wrapper">
 	<input
 		{...fieldAttrs}

package/dist/Sform/inputs/RadioCheckboxLabel.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" generics="InputType extends HTMLInputTypeAttribute & ('checkbox' | 'radio')">
+	import type { HTMLInputTypeAttribute } from 'svelte/elements';
+	import type { SelectOption } from '../types';
+
+	type FieldAttrs<InputType> = {
+		'aria-invalid'?: boolean | 'false' | 'true';
+		name: string;
+		type: InputType;
+		value?: string;
+		checked: boolean;
+	};
+	type Props = {
+		fieldAttrs: FieldAttrs<InputType>;
+		uniqueId: string;
+		option: SelectOption;
+		disabled?: boolean;
+		onblur?: (event: FocusEvent) => void;
+		oninput?: (event: Event) => void;
+	};
+	let { fieldAttrs, uniqueId, option, disabled, onblur, oninput }: Props = $props();
+</script>
+
+<label class={`sform-${fieldAttrs.type}-option`} class:disabled={option.disabled}>
+	<input {...fieldAttrs} id={uniqueId} disabled={disabled || option.disabled} {onblur} {oninput} />
+	{#if typeof option.label === 'function'}
+		{@render option.label(option)}
+	{:else}
+		<span class={`sform-${fieldAttrs.type}-label`}>{option.label}</span>
+	{/if}
+</label>
+
+<style>
+	.sform-checkbox-option,
+	.sform-radio-option {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		cursor: pointer;
+		padding: 0.25rem 0;
+	}
+
+	:is(.sform-checkbox-option, .sform-radio-option).disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	:is(.sform-checkbox-option, .sform-radio-option) input {
+		margin: 0;
+	}
+</style>

package/dist/Sform/inputs/RadioCheckboxLabel.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { HTMLInputTypeAttribute } from 'svelte/elements';
+import type { SelectOption } from '../types';
+declare function $$render<InputType extends HTMLInputTypeAttribute & ('checkbox' | 'radio')>(): {
+    props: {
+        fieldAttrs: {
+            'aria-invalid'?: boolean | "false" | "true";
+            name: string;
+            type: InputType;
+            value?: string;
+            checked: boolean;
+        };
+        uniqueId: string;
+        option: SelectOption;
+        disabled?: boolean;
+        onblur?: (event: FocusEvent) => void;
+        oninput?: (event: Event) => void;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<InputType extends HTMLInputTypeAttribute & ('checkbox' | 'radio')> {
+    props(): ReturnType<typeof $$render<InputType>>['props'];
+    events(): ReturnType<typeof $$render<InputType>>['events'];
+    slots(): ReturnType<typeof $$render<InputType>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <InputType extends HTMLInputTypeAttribute & ('checkbox' | 'radio')>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<InputType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<InputType>['props']>, ReturnType<__sveltets_Render<InputType>['events']>, ReturnType<__sveltets_Render<InputType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<InputType>['bindings']>;
+    } & ReturnType<__sveltets_Render<InputType>['exports']>;
+    <InputType extends HTMLInputTypeAttribute & ('checkbox' | 'radio')>(internal: unknown, props: ReturnType<__sveltets_Render<InputType>['props']> & {}): ReturnType<__sveltets_Render<InputType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const RadioCheckboxLabel: $$IsomorphicComponent;
+type RadioCheckboxLabel<InputType extends HTMLInputTypeAttribute & ('checkbox' | 'radio')> = InstanceType<typeof RadioCheckboxLabel<InputType>>;
+export default RadioCheckboxLabel;

package/dist/Sform/inputs/RadioInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { RadioInputProps, SelectOption } from '../types.js';
 	import Fieldset from '../utils/Fieldset.svelte';
+	import RadioCheckboxLabel from './RadioCheckboxLabel.svelte';
 
 	let {
 		field,
@@ -30,50 +31,10 @@
 	}
 </script>
 
-<Fieldset {label} {labelClass} {className} {disabled}>
+<Fieldset {label} {labelClass} {className} {disabled} type="radio">
 	{#each normalizedOptions as option}
 		{@const fieldAttrs = getFieldAttrs(option.value)}
 		{@const uniqueId = `${name}-${option.value}`}
-		<label class="sform-radio-option" class:disabled={option.disabled}>
-			<input
-				{...fieldAttrs}
-				type="radio"
-				id={uniqueId}
-				disabled={disabled || option.disabled}
-				{onblur}
-				{oninput}
-			/>
-			<span class="sform-radio-label">{option.label}</span>
-		</label>
+		<RadioCheckboxLabel {fieldAttrs} {uniqueId} {option} {disabled} {onblur} {oninput} />
 	{/each}
 </Fieldset>
-
-<style>
-	.sform-radio-group {
-		border: none;
-		padding: 0;
-		margin: 0;
-	}
-
-	.sform-radio-group legend {
-		padding: 0;
-		margin-bottom: 0.5rem;
-	}
-
-	.sform-radio-option {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		cursor: pointer;
-		padding: 0.25rem 0;
-	}
-
-	.sform-radio-option.disabled {
-		opacity: 0.6;
-		cursor: not-allowed;
-	}
-
-	.sform-radio-option input {
-		margin: 0;
-	}
-</style>

package/dist/Sform/inputs/RangeInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { RangeInputProps } from '../types.js';
+	import TopLabel from './TopLabel.svelte';
 
 	let {
 		field,
@@ -30,9 +31,7 @@
 	});
 </script>
 
-{#if label}
-	<label class={labelClass} for={name}>{label}</label>
-{/if}
+<TopLabel {label} {labelClass} {name} />
 <div class="sform-range-wrapper">
 	<input
 		{...fieldAttrs}

package/dist/Sform/inputs/SelectInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { SelectInputProps, SelectOption } from '../types.js';
+	import TopLabel from './TopLabel.svelte';
 
 	let {
 		field,
@@ -24,9 +25,7 @@
 	);
 </script>
 
-{#if label}
-	<label class={labelClass} for={name}>{label}</label>
-{/if}
+<TopLabel {label} {labelClass} {name} />
 <select {...fieldAttrs} id={name} class={className} {disabled} {onblur} {oninput}>
 	{#each normalizedOptions as option (option.value)}
 		<option value={option.value} disabled={option.disabled}>

package/dist/Sform/inputs/TextInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { TextInputComponentProps } from '../types.js';
+	import TopLabel from './TopLabel.svelte';
 
 	let {
 		field,
@@ -28,9 +29,7 @@
 	let inputElement: HTMLInputElement | undefined = $state();
 </script>
 
-{#if label}
-	<label class={labelClass} for={name}>{label}</label>
-{/if}
+<TopLabel {label} {labelClass} {name} />
 <div class="sform-input-wrapper {wrapperClass ?? ''}">
 	{#if prefix}
 		<div class="sform-prefix" onclick={() => inputElement?.focus()} role="presentation">

package/dist/Sform/inputs/TextareaInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { TextareaInputProps } from '../types.js';
+	import TopLabel from './TopLabel.svelte';
 
 	let {
 		field,
@@ -27,9 +28,7 @@
 	let textareaElement: HTMLTextAreaElement | undefined = $state();
 </script>
 
-{#if label}
-	<label class={labelClass} for={name}>{label}</label>
-{/if}
+<TopLabel {label} {labelClass} {name} />
 <div class="sform-input-wrapper sform-textarea-wrapper {wrapperClass ?? ''}">
 	{#if prefix}
 		<div class="sform-prefix" onclick={() => textareaElement?.focus()} role="presentation">

package/dist/Sform/inputs/ToggleInput.svelte

@@ -25,7 +25,11 @@
 </script>
 
 {#if label}
-	<span id="{name}-label" class={labelClass}>{label}</span>
+	{#if typeof label === 'function'}
+		{@render label()}
+	{:else}
+		<span id="{name}-label" class={labelClass}>{label}</span>
+	{/if}
 {/if}
 <label class="sform-toggle {className ?? ''}" class:disabled>
 	<input

package/dist/Sform/inputs/TopLabel.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { BaseInputComponentProps } from '../types';
+
+	let { label, labelClass, name }: Pick<BaseInputComponentProps, 'label' | 'labelClass' | 'name'> =
+		$props();
+</script>
+
+{#if label}
+	{#if typeof label === 'function'}
+		{@render label()}
+	{:else}
+		<label class={labelClass} for={name}>{label}</label>
+	{/if}
+{/if}

package/dist/Sform/inputs/TopLabel.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BaseInputComponentProps } from '../types';
+declare const TopLabel: import("svelte").Component<Pick<BaseInputComponentProps, "name" | "labelClass" | "label">, {}, "">;
+type TopLabel = ReturnType<typeof TopLabel>;
+export default TopLabel;

package/dist/Sform/types.d.ts

@@ -96,7 +96,7 @@ export type NumericInputType = 'number';
  */
 export interface SelectOption {
     value: string;
-    label: string;
+    label: string | Snippet<[SelectOption]>;
     disabled?: boolean;
 }
 /**
@@ -221,7 +221,7 @@ export interface BaseSfieldProps {
     /** Field name - corresponds to form.fields[name] */
     name: string;
     /** Field label */
-    label?: string;
+    label?: string | Snippet;
     /** Placeholder text */
     placeholder?: string;
     /** Field-level validateOn override */
@@ -319,9 +319,9 @@ export interface RangeSfieldProps extends BaseSfieldProps {
 export interface ToggleSfieldProps extends BaseSfieldProps {
     type: 'toggle';
     /** Label when toggle is on */
-    onLabel?: string;
+    onLabel?: string | Snippet;
     /** Label when toggle is off */
-    offLabel?: string;
+    offLabel?: string | Snippet;
     /** Value when checked */
     checkedValue?: string;
     /** Value when unchecked */
@@ -453,7 +453,7 @@ export interface BaseInputComponentProps {
     /** Field name */
     name: string;
     /** Field label */
-    label?: string;
+    label?: string | Snippet;
     /** Placeholder text */
     placeholder?: string;
     /** Input class */
@@ -609,7 +609,7 @@ export interface ButtonInputProps<T = unknown> {
     /** The remote form - used to infer the result type T */
     form: ButtonFormLike<T>;
     /** Button text (used if no children snippet provided) */
-    label?: string;
+    label?: string | Snippet;
     /** Button type */
     buttonType?: 'submit' | 'reset' | 'button';
     /** Button class */
@@ -658,9 +658,9 @@ export interface PasswordInputProps extends BaseInputComponentProps {
  */
 export interface ToggleInputProps extends BaseInputComponentProps {
     /** Label when toggle is on */
-    onLabel?: string;
+    onLabel?: string | Snippet;
     /** Label when toggle is off */
-    offLabel?: string;
+    offLabel?: string | Snippet;
     /** Value when checked */
     checkedValue?: string;
     /** Value when unchecked */
@@ -671,7 +671,7 @@ export interface ToggleInputProps extends BaseInputComponentProps {
  */
 export interface ToggleOption {
     value: string;
-    label: string;
+    label: string | Snippet;
     disabled?: boolean;
 }
 /**
@@ -704,9 +704,10 @@ export interface MaskedInputProps extends BaseInputComponentProps, InputAffixPro
  * Props for Fieldset utils component
  */
 export type FieldsetProps = {
-    label?: string;
+    label?: string | Snippet;
     labelClass?: string;
     className?: string;
     disabled?: boolean;
     children: Snippet;
+    type: 'radio' | 'checkbox';
 };

package/dist/Sform/utils/Fieldset.svelte

@@ -2,10 +2,10 @@
 	import type { Snippet } from 'svelte';
 	import type { FieldsetProps } from '../types';
 
-	let { label, labelClass, className, disabled, children }: FieldsetProps = $props();
+	let { label, labelClass, className, disabled, children, type }: FieldsetProps = $props();
 </script>
 
-<fieldset class="sform-checkbox-group {className ?? ''}" {disabled}>
+<fieldset class="{`sform-${type}-group`} {className ?? ''}" {disabled}>
 	{#if label}
 		<legend class={labelClass}>{label}</legend>
 	{/if}
@@ -13,7 +13,12 @@
 </fieldset>
 
 <style>
-	.sform-checkbox-group legend {
+	:is(.sform-checkbox-group, .sform-radio-group) {
+		border: none;
+		padding: 0;
+		margin: 0;
+	}
+	:is(.sform-checkbox-group, .sform-radio-group) legend {
 		padding: 0.25rem 0.5rem;
 		margin: 0;
 		border: var(--sform-border-width) solid var(--sform-border);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@samuel-charpentier/sform",
-	"version": "0.0.11",
+	"version": "1.0.0",
 	"description": "A Svelte 5 form library for SvelteKit remote forms",
 	"keywords": [
 		"svelte",

package/dist/Sform/inputs/ToggleOptionsInput.svelte

@@ -1,118 +0,0 @@
-<script lang="ts">
-	import type { ToggleOptionsInputProps, ToggleOption } from '../types.js';
-
-	let {
-		field,
-		name,
-		label,
-		class: className,
-		labelClass,
-		disabled,
-		options,
-		multiple = false,
-		showIssues,
-		onblur,
-		oninput
-	}: ToggleOptionsInputProps = $props();
-
-	// Normalize options to ToggleOption format
-	const normalizedOptions: ToggleOption[] = $derived(
-		options.map((opt) => (typeof opt === 'string' ? { value: opt, label: opt } : opt))
-	);
-
-	// Helper to get field attrs with controlled aria-invalid
-	function getFieldAttrs(optionValue: string) {
-		const inputType = multiple ? 'checkbox' : 'radio';
-		const attrs = field.as(inputType, optionValue);
-		return {
-			...attrs,
-			'aria-invalid': showIssues ? attrs['aria-invalid'] : undefined
-		};
-	}
-</script>
-
-{#if label}
-	<span id="{name}-label" class={labelClass}>{label}</span>
-{/if}
-<div
-	class="sform-toggle-options {className ?? ''}"
-	role={multiple ? 'group' : 'radiogroup'}
-	aria-labelledby={label ? `${name}-label` : undefined}
-	aria-label={!label ? name : undefined}
->
-	{#each normalizedOptions as option (option.value)}
-		{@const optionDisabled = disabled || option.disabled}
-		{@const fieldAttrs = getFieldAttrs(option.value)}
-		{@const inputId = `${name}-${option.value}`}
-		<label class="sform-toggle-option" class:disabled={optionDisabled} for={inputId}>
-			<input
-				{...fieldAttrs}
-				type={multiple ? 'checkbox' : 'radio'}
-				id={inputId}
-				disabled={optionDisabled}
-				{onblur}
-				{oninput}
-			/>
-			<span>{option.label}</span>
-		</label>
-	{/each}
-</div>
-
-<style>
-	.sform-toggle-options {
-		display: inline-flex;
-		border-radius: 0.375rem;
-		overflow: hidden;
-		border: 1px solid #ccc;
-	}
-
-	.sform-toggle-option {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 0.5rem 1rem;
-		background: white;
-		cursor: pointer;
-		transition:
-			background-color 0.15s,
-			color 0.15s;
-	}
-
-	.sform-toggle-option:not(:last-child) {
-		border-right: 1px solid #ccc;
-	}
-
-	.sform-toggle-option:hover:not(.disabled) {
-		background-color: #f5f5f5;
-	}
-
-	/* Hide the actual input but keep it functional */
-	.sform-toggle-option input {
-		position: absolute;
-		opacity: 0;
-		width: 0;
-		height: 0;
-	}
-
-	/* Style when checked */
-	.sform-toggle-option:has(input:checked) {
-		background-color: #2196f3;
-		color: white;
-	}
-
-	.sform-toggle-option:has(input:checked):hover {
-		background-color: #1976d2;
-	}
-
-	.sform-toggle-option.disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	/* Focus styles */
-	.sform-toggle-option:has(input:focus-visible) {
-		outline: 2px solid #2196f3;
-		outline-offset: -2px;
-		z-index: 1;
-	}
-</style>

package/dist/Sform/inputs/ToggleOptionsInput.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { ToggleOptionsInputProps } from '../types.js';
-declare const ToggleOptionsInput: import("svelte").Component<ToggleOptionsInputProps, {}, "">;
-type ToggleOptionsInput = ReturnType<typeof ToggleOptionsInput>;
-export default ToggleOptionsInput;