sveltacular 1.0.5 → 1.0.7

package/dist/forms/number-range-box/number-range-box.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+	import { roundToDecimals } from '../../helpers/round-to-decimals.js';
+	import { uniqueId } from '../../helpers/unique-id.js';
+	import FormField from '../form-field/form-field.svelte';
+	import type { FormFieldSizeOptions } from '../../types/form.js';
+
+	const minId = uniqueId();
+	const maxId = uniqueId();
+
+	let {
+		minValue = $bindable(null as number | null),
+		maxValue = $bindable(null as number | null),
+		minAllowed = 0,
+		maxAllowed = 99999,
+		step = 1,
+		allowDecimals = false,
+		minPlaceholder = '0',
+		maxPlaceholder = 'No limit',
+		prefix = null as string | null,
+		suffix = null as string | null,
+		stickyEnd = false,
+		required = false,
+		size = 'full' as FormFieldSizeOptions,
+		label = undefined as string | undefined,
+		onChange = undefined as ((minValue: number | null, maxValue: number | null) => void) | undefined
+	}: {
+		minValue?: number | null;
+		maxValue?: number | null;
+		minAllowed?: number;
+		maxAllowed?: number;
+		step?: number;
+		allowDecimals?: boolean;
+		minPlaceholder?: string;
+		maxPlaceholder?: string;
+		prefix?: string | null;
+		suffix?: string | null;
+		stickyEnd?: boolean;
+		required?: boolean;
+		size?: FormFieldSizeOptions;
+		label?: string;
+		onChange?: ((minValue: number | null, maxValue: number | null) => void) | undefined;
+	} = $props();
+
+	const handleChange = () => {
+		// Calculate decimal places from step (e.g., step 0.1 = 1 decimal, step 0.01 = 2 decimals)
+		const decimalPlaces = step < 1 ? Math.abs(Math.log10(step)) : 0;
+
+		// If no decimals, must round to integer
+		if (!allowDecimals) {
+			if (minValue !== null) minValue = Math.round(minValue);
+			if (maxValue !== null) maxValue = Math.round(maxValue);
+		}
+		// If decimals, must round to step precision
+		else {
+			if (minValue !== null) minValue = roundToDecimals(minValue, decimalPlaces);
+			if (maxValue !== null) maxValue = roundToDecimals(maxValue, decimalPlaces);
+		}
+
+		// Ensure min value is not less than minAllowed
+		if (minValue !== null && minValue < minAllowed) {
+			minValue = minAllowed;
+		}
+
+		// Ensure max value is not greater than maxAllowed
+		if (maxValue !== null && maxValue > maxAllowed) {
+			maxValue = maxAllowed;
+		}
+
+		// Ensure max value is greater than or equal to min value
+		if (minValue !== null && maxValue !== null && minValue > maxValue) {
+			maxValue = minValue;
+		}
+
+		onChange?.(minValue, maxValue);
+	};
+
+	const handleMinChange = () => {
+		if (stickyEnd) {
+			maxValue = minValue;
+		}
+		handleChange();
+	};
+
+	const onInput = (e: Event, isMin: boolean) => {
+		const input = e.target as HTMLInputElement;
+		const newValue = parseFloat(input.value);
+		if (isNaN(newValue)) {
+			if (isMin) minValue = null;
+			else maxValue = null;
+			return;
+		}
+		if (isMin) minValue = newValue;
+		else maxValue = newValue;
+	};
+
+	// Don't allow certain characters to be typed into the input
+	const onKeyPress = (e: KeyboardEvent, isMin: boolean) => {
+		const isNumber = !isNaN(Number(e.key));
+		const isDecimal = e.key === '.';
+		const isAllowed =
+			isNumber ||
+			isDecimal ||
+			['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', '-'].includes(e.key);
+		if (!isAllowed) return e.preventDefault();
+		if (isDecimal && !allowDecimals) return e.preventDefault();
+	};
+</script>
+
+<FormField {size} {label} id={minId} {required}>
+	<div class="number-range-inputs">
+		<div class="input-group">
+			<div class="input">
+				{#if prefix}
+					<span class="prefix">{prefix}</span>
+				{/if}
+				<input
+					id={minId}
+					type="number"
+					placeholder={minPlaceholder}
+					min={minAllowed}
+					max={maxAllowed}
+					{step}
+					bind:value={minValue}
+					onchange={handleMinChange}
+					oninput={(e) => onInput(e, true)}
+					onkeypress={(e) => onKeyPress(e, true)}
+					{required}
+				/>
+				{#if suffix}
+					<span class="suffix">{suffix}</span>
+				{/if}
+			</div>
+		</div>
+		<div class="input-group">
+			<div class="input">
+				{#if prefix}
+					<span class="prefix">{prefix}</span>
+				{/if}
+				<input
+					id={maxId}
+					type="number"
+					placeholder={maxPlaceholder}
+					min={minAllowed}
+					max={maxAllowed}
+					{step}
+					bind:value={maxValue}
+					onchange={handleChange}
+					oninput={(e) => onInput(e, false)}
+					onkeypress={(e) => onKeyPress(e, false)}
+					{required}
+				/>
+				{#if suffix}
+					<span class="suffix">{suffix}</span>
+				{/if}
+			</div>
+		</div>
+	</div>
+</FormField>
+
+<style>.number-range-inputs {
+  display: flex;
+  gap: var(--spacing-md);
+  width: 100%;
+}
+
+.input-group {
+  flex: 1;
+}
+
+.input {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--radius-md);
+  border: var(--border-thin) solid var(--form-input-border);
+  background-color: var(--form-input-bg);
+  color: var(--form-input-fg);
+  font-size: var(--font-md);
+  font-weight: 500;
+  line-height: 2rem;
+  transition: background-color var(--transition-base) var(--ease-in-out), border-color var(--transition-base) var(--ease-in-out), color var(--transition-base) var(--ease-in-out), fill var(--transition-base) var(--ease-in-out), stroke var(--transition-base) var(--ease-in-out);
+  user-select: none;
+  white-space: nowrap;
+}
+.input input {
+  background-color: transparent;
+  border: none;
+  line-height: 2rem;
+  font-size: var(--font-md);
+  width: 100%;
+  flex-grow: 1;
+  padding-left: var(--spacing-base);
+  padding-right: var(--spacing-base);
+}
+.input input:focus {
+  outline: none;
+}
+.input input::placeholder {
+  color: var(--form-input-placeholder);
+}
+.input .prefix,
+.input .suffix {
+  font-size: var(--font-md);
+  line-height: 2rem;
+  padding-left: var(--spacing-base);
+  padding-right: var(--spacing-base);
+  background-color: var(--form-input-accent-bg);
+  color: var(--form-input-accent-fg);
+}
+.input .prefix {
+  border-right: var(--border-thin) solid var(--form-input-border);
+}
+.input .suffix {
+  border-left: var(--border-thin) solid var(--form-input-border);
+}</style>

package/dist/forms/number-range-box/number-range-box.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { FormFieldSizeOptions } from '../../types/form.js';
+type $$ComponentProps = {
+    minValue?: number | null;
+    maxValue?: number | null;
+    minAllowed?: number;
+    maxAllowed?: number;
+    step?: number;
+    allowDecimals?: boolean;
+    minPlaceholder?: string;
+    maxPlaceholder?: string;
+    prefix?: string | null;
+    suffix?: string | null;
+    stickyEnd?: boolean;
+    required?: boolean;
+    size?: FormFieldSizeOptions;
+    label?: string;
+    onChange?: ((minValue: number | null, maxValue: number | null) => void) | undefined;
+};
+declare const NumberRangeBox: import("svelte").Component<$$ComponentProps, {}, "minValue" | "maxValue">;
+type NumberRangeBox = ReturnType<typeof NumberRangeBox>;
+export default NumberRangeBox;

package/dist/forms/phone-box/phone-box.svelte

@@ -1,18 +1,26 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
 	import { uniqueId, type FormFieldSizeOptions } from '../../index.js';
-	import FormField from '../form-field/form-field.svelte';
+	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 
 	let {
 		value = $bindable('' as string | null),
 		size = 'md' as FormFieldSizeOptions,
 		onChange = undefined,
-		label = undefined
+		label = undefined,
+		helperText = undefined,
+		feedback = undefined,
+		disabled = false,
+		required = false
 	}: {
 		value?: string | null;
 		size?: FormFieldSizeOptions;
 		onChange?: ((value: string) => void) | undefined;
 		label?: string;
+		helperText?: string;
+		feedback?: FormFieldFeedback;
+		disabled?: boolean;
+		required?: boolean;
 	} = $props();
 
 	const id = uniqueId();
@@ -146,7 +154,7 @@
 	});
 </script>
 
-<FormField {size} {label} id="{id}-areaCode">
+<FormField {size} {label} id="{id}-areaCode" {required} {disabled} {helperText} {feedback}>
 	<div class="input">
 		<span class="areaCode segment">
 			<span>(</span>
@@ -159,6 +167,8 @@
 				bind:value={areaCode}
 				name="areaCode"
 				data-maxlength="3"
+				{disabled}
+				{required}
 			/>
 			<span>)</span>
 		</span>
@@ -172,6 +182,8 @@
 				bind:value={localExt}
 				name="localExt"
 				data-maxlength="3"
+				{disabled}
+				{required}
 			/>
 		</span>
 		<span class="lastFour segment">
@@ -185,6 +197,8 @@
 				bind:value={lastFour}
 				name="lastFour"
 				data-maxlength="4"
+				{disabled}
+				{required}
 			/></span
 		>
 	</div>

package/dist/forms/phone-box/phone-box.svelte.d.ts

@@ -1,9 +1,14 @@
 import { type FormFieldSizeOptions } from '../../index.js';
+import { type FormFieldFeedback } from '../form-field/form-field.svelte';
 type $$ComponentProps = {
     value?: string | null;
     size?: FormFieldSizeOptions;
     onChange?: ((value: string) => void) | undefined;
     label?: string;
+    helperText?: string;
+    feedback?: FormFieldFeedback;
+    disabled?: boolean;
+    required?: boolean;
 };
 declare const PhoneBox: import("svelte").Component<$$ComponentProps, {}, "value">;
 type PhoneBox = ReturnType<typeof PhoneBox>;

package/dist/forms/radio-group/radio-box.svelte

@@ -9,19 +9,28 @@
 		value = undefined as RadioValue,
 		group = $bindable(undefined as string | undefined),
 		disabled = false,
-		children = undefined
+		children = undefined,
+		onChange = undefined
 	}: {
 		value?: RadioValue;
 		group?: string | undefined;
 		disabled?: boolean;
 		children?: Snippet;
+		onChange?: ((value: string) => void) | undefined;
 	} = $props();
 
 	const id = uniqueId();
 </script>
 
 <label>
-	<input type="radio" bind:group {value} {disabled} {id} />
+	<input
+		type="radio"
+		bind:group
+		{value}
+		{disabled}
+		{id}
+		onchange={() => onChange?.(String(value || ''))}
+	/>
 	<span class="checkbox">
 		<span class="checkmark"><CheckIcon /></span>
 	</span>

package/dist/forms/radio-group/radio-box.svelte.d.ts

@@ -5,6 +5,7 @@ type $$ComponentProps = {
     group?: string | undefined;
     disabled?: boolean;
     children?: Snippet;
+    onChange?: ((value: string) => void) | undefined;
 };
 declare const RadioBox: import("svelte").Component<$$ComponentProps, {}, "group">;
 type RadioBox = ReturnType<typeof RadioBox>;

package/dist/forms/radio-group/radio-group.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { DropdownOption, FormFieldSizeOptions } from '../../types/form.js';
-	import FormField from '../form-field/form-field.svelte';
+	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import RadioBox from './radio-box.svelte';
 
@@ -12,7 +12,10 @@
 		size = 'full' as FormFieldSizeOptions,
 		disabled = false,
 		required = false,
-		label = undefined
+		label = undefined,
+		helperText = undefined,
+		feedback = undefined,
+		onChange = undefined
 	}: {
 		group?: string;
 		items?: DropdownOption[];
@@ -20,13 +23,16 @@
 		disabled?: boolean;
 		required?: boolean;
 		label?: string;
+		helperText?: string;
+		feedback?: FormFieldFeedback;
+		onChange?: ((value: string) => void) | undefined;
 	} = $props();
 </script>
 
-<FormField {size} {label} {id} {required} {disabled}>
+<FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
 	<div>
 		{#each items as item}
-			<RadioBox bind:group {disabled} value={item.value}>{item.name}</RadioBox>
+			<RadioBox bind:group {disabled} value={item.value} onChange={onChange}>{item.name}</RadioBox>
 		{/each}
 	</div>
 </FormField>

package/dist/forms/radio-group/radio-group.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { DropdownOption, FormFieldSizeOptions } from '../../types/form.js';
+import { type FormFieldFeedback } from '../form-field/form-field.svelte';
 type $$ComponentProps = {
     group?: string;
     items?: DropdownOption[];
@@ -6,6 +7,9 @@ type $$ComponentProps = {
     disabled?: boolean;
     required?: boolean;
     label?: string;
+    helperText?: string;
+    feedback?: FormFieldFeedback;
+    onChange?: ((value: string) => void) | undefined;
 };
 declare const RadioGroup: import("svelte").Component<$$ComponentProps, {}, "">;
 type RadioGroup = ReturnType<typeof RadioGroup>;

package/dist/forms/switch-box/switch-box.svelte

@@ -2,34 +2,54 @@
 	import type { Snippet } from 'svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import type { FormFieldSizeOptions } from '../../index.js';
+	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 
 	let {
 		checked = $bindable(false),
 		size = 'full' as FormFieldSizeOptions,
 		onChange = undefined,
-		children
+		children,
+		label = undefined,
+		helperText = undefined,
+		feedback = undefined,
+		disabled = false,
+		required = false
 	}: {
 		checked?: boolean;
 		size?: FormFieldSizeOptions;
 		onChange?: ((checked: boolean) => void) | undefined;
 		children?: Snippet;
+		label?: string;
+		helperText?: string;
+		feedback?: FormFieldFeedback;
+		disabled?: boolean;
+		required?: boolean;
 	} = $props();
 
 	const id = uniqueId();
 </script>
 
-<label class="switch-box {checked ? 'checked' : ''} {size}">
-	<input type="checkbox" bind:checked onchange={() => onChange?.(checked)} {id} />
-	<!-- svelte-ignore a11y_interactive_supports_focus -->
-	<span class="switch">
-		<span class="slider"></span>
-	</span>
-	{#if children}
-		<div class="text">
-			{@render children?.()}
-		</div>
-	{/if}
-</label>
+<FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
+	<label class="switch-box {checked ? 'checked' : ''} {size}">
+		<input
+			type="checkbox"
+			bind:checked
+			onchange={() => onChange?.(checked)}
+			{id}
+			{disabled}
+			{required}
+		/>
+		<!-- svelte-ignore a11y_interactive_supports_focus -->
+		<span class="switch">
+			<span class="slider"></span>
+		</span>
+		{#if children}
+			<div class="text">
+				{@render children?.()}
+			</div>
+		{/if}
+	</label>
+</FormField>
 
 <style>label {
   display: flex;

package/dist/forms/switch-box/switch-box.svelte.d.ts

@@ -1,10 +1,16 @@
 import type { Snippet } from 'svelte';
 import type { FormFieldSizeOptions } from '../../index.js';
+import { type FormFieldFeedback } from '../form-field/form-field.svelte';
 type $$ComponentProps = {
     checked?: boolean;
     size?: FormFieldSizeOptions;
     onChange?: ((checked: boolean) => void) | undefined;
     children?: Snippet;
+    label?: string;
+    helperText?: string;
+    feedback?: FormFieldFeedback;
+    disabled?: boolean;
+    required?: boolean;
 };
 declare const SwitchBox: import("svelte").Component<$$ComponentProps, {}, "checked">;
 type SwitchBox = ReturnType<typeof SwitchBox>;