sveltacular 1.0.18 → 1.0.21

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

@@ -2,25 +2,36 @@
 	import { untrack } from 'svelte';
 	import { uniqueId, type FormFieldSizeOptions } from '../../index.js';
 	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
+	import FormInputWrapper from '../form-input-wrapper';
 
 	let {
 		value = $bindable('' as string | null),
 		size = 'md' as FormFieldSizeOptions,
+		placeholder = '',
 		onChange = undefined,
+		onCheckChanged = undefined,
 		label = undefined,
 		helperText = undefined,
 		feedback = undefined,
 		disabled = false,
-		required = false
+		required = false,
+		readonly = false,
+		nullable = false,
+		nullText = ''
 	}: {
 		value?: string | null;
 		size?: FormFieldSizeOptions;
-		onChange?: ((value: string) => void) | undefined;
+		placeholder?: string;
+		onChange?: ((value: string | null) => void) | undefined;
+		onCheckChanged?: ((isChecked: boolean) => void) | undefined;
 		label?: string;
 		helperText?: string;
 		feedback?: FormFieldFeedback;
 		disabled?: boolean;
 		required?: boolean;
+		readonly?: boolean;
+		nullable?: boolean;
+		nullText?: string;
 	} = $props();
 
 	const id = uniqueId();
@@ -65,8 +76,9 @@
 	};
 
 	const publishChange = () => {
-		value = getCombinedValue();
-		onChange?.(value);
+		const currentValue = !nullable || isChecked ? getCombinedValue() : null;
+		value = currentValue;
+		onChange?.(currentValue);
 		return value;
 	};
 
@@ -139,9 +151,57 @@
 		}
 	};
 
+	// Track whether the nullable checkbox is checked (i.e., whether field has a value)
+	let isChecked = $state(untrack(() => !!value));
+
+	// Remember the last non-null value so we can restore it when re-checking
+	let lastValue = $state<string | undefined>(undefined);
+
+	// Derive the actual disabled state: disabled prop OR (nullable and unchecked)
+	let inputDisabled = $derived(disabled || (nullable && !isChecked));
+
+	let showInput = $derived(!nullable || isChecked);
+
+	let effectiveNullText = $derived(nullText || '(___) ___-____');
+
+	const checkChanged = () => {
+		if (nullable) {
+			if (isChecked) {
+				// Restore last value if available, otherwise use empty string
+				const restoreValue = lastValue || '';
+				setValue(restoreValue);
+			} else {
+				// Store current value before clearing
+				const currentValue = getCombinedValue();
+				if (currentValue) {
+					lastValue = currentValue;
+				}
+				areaCode = '';
+				localExt = '';
+				lastFour = '';
+				value = null;
+			}
+		}
+		onCheckChanged?.(isChecked);
+	};
+
 	// Set the initial value
 	setValue(value ?? '');
 
+	$effect(() => {
+		if (!value) {
+			// Use untrack to prevent writes to isChecked/value from triggering this effect again
+			untrack(() => {
+				if (nullable) isChecked = false;
+			});
+		} else {
+			// Initialize lastValue if we have an initial value
+			if (!lastValue) {
+				lastValue = value;
+			}
+		}
+	});
+
 	$effect(() => {
 		// Only trigger when the phone number parts change
 		const hasValue = areaCode || localExt || lastFour;
@@ -155,19 +215,26 @@
 </script>
 
 <FormField {size} {label} id="{id}-areaCode" {required} {disabled} {helperText} {feedback}>
-	<div class="input">
+	<FormInputWrapper
+		{disabled}
+		{nullable}
+		nullText={effectiveNullText}
+		onCheckChanged={checkChanged}
+	>
 		<span class="areaCode segment">
 			<span>(</span>
 			<input
 				id="{id}-areaCode"
 				type="text"
+				{placeholder}
 				oninput={valueChanged}
 				onkeyup={keyUp}
 				onchange={valueChanged}
 				bind:value={areaCode}
 				name="areaCode"
 				data-maxlength="3"
-				{disabled}
+				disabled={inputDisabled}
+				{readonly}
 				{required}
 			/>
 			<span>)</span>
@@ -176,13 +243,15 @@
 			<input
 				id="{id}-localExt"
 				type="text"
+				{placeholder}
 				oninput={valueChanged}
 				onchange={valueChanged}
 				onkeyup={keyUp}
 				bind:value={localExt}
 				name="localExt"
 				data-maxlength="3"
-				{disabled}
+				disabled={inputDisabled}
+				{readonly}
 				{required}
 			/>
 		</span>
@@ -191,55 +260,43 @@
 			<input
 				id="{id}-lastFour"
 				type="text"
+				{placeholder}
 				oninput={valueChanged}
 				onchange={valueChanged}
 				onkeyup={keyUp}
 				bind:value={lastFour}
 				name="lastFour"
 				data-maxlength="4"
-				{disabled}
+				disabled={inputDisabled}
+				{readonly}
 				{required}
-			/></span
-		>
-	</div>
+			/>
+		</span>
+	</FormInputWrapper>
 </FormField>
 
-<style>.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;
-  padding-left: var(--spacing-base);
-  gap: var(--spacing-sm);
-  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);
-  user-select: none;
-  white-space: nowrap;
-}
-.input .segment {
+<style>.segment {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: var(--spacing-sm);
 }
-.input .areaCode {
+
+.areaCode {
   flex-basis: 100px;
+  padding-left: var(--spacing-base);
 }
-.input .localExt {
+
+.localExt {
   flex-basis: 80px;
 }
-.input .lastFour {
+
+.lastFour {
   flex-basis: 140px;
 }
-.input input {
+
+input {
   background-color: transparent;
   border: none;
   line-height: 2rem;
@@ -251,10 +308,16 @@
   text-align: center;
   color: inherit;
 }
-.input input:focus {
+input:focus {
   outline: none;
 }
-.input input:focus-visible {
+input:focus-visible {
   outline: 2px solid var(--focus-ring, #007bff);
   outline-offset: 2px;
+}
+input:disabled {
+  cursor: not-allowed;
+}
+input:read-only {
+  cursor: default;
 }</style>

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

@@ -3,12 +3,17 @@ import { type FormFieldFeedback } from '../form-field/form-field.svelte';
 type $$ComponentProps = {
     value?: string | null;
     size?: FormFieldSizeOptions;
-    onChange?: ((value: string) => void) | undefined;
+    placeholder?: string;
+    onChange?: ((value: string | null) => void) | undefined;
+    onCheckChanged?: ((isChecked: boolean) => void) | undefined;
     label?: string;
     helperText?: string;
     feedback?: FormFieldFeedback;
     disabled?: boolean;
     required?: boolean;
+    readonly?: boolean;
+    nullable?: boolean;
+    nullText?: string;
 };
 declare const PhoneBox: import("svelte").Component<$$ComponentProps, {}, "value">;
 type PhoneBox = ReturnType<typeof PhoneBox>;

package/dist/forms/slider/slider.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { uniqueId } from '../../helpers/unique-id.js';
-	import FormField from '../form-field/form-field.svelte';
-	import type { ComponentSize } from '../../types/size.js';
+	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
+	import type { FormFieldSizeOptions } from '../../types/form.js';
 
 	const id = uniqueId();
 
@@ -11,24 +11,30 @@
 		max = 100,
 		step = 1,
 		disabled = false,
-		size = 'full' as ComponentSize,
+		required = false,
+		size = 'full' as FormFieldSizeOptions,
 		showTooltip = true,
 		showValue = true,
 		formatValue = undefined,
 		onChange = undefined,
-		label = undefined
+		label = undefined,
+		helperText = undefined,
+		feedback = undefined
 	}: {
 		value?: number;
 		min?: number;
 		max?: number;
 		step?: number;
 		disabled?: boolean;
-		size?: ComponentSize;
+		required?: boolean;
+		size?: FormFieldSizeOptions;
 		showTooltip?: boolean;
 		showValue?: boolean;
 		formatValue?: ((value: number) => string) | undefined;
 		onChange?: ((value: number) => void) | undefined;
 		label?: string;
+		helperText?: string;
+		feedback?: FormFieldFeedback;
 	} = $props();
 
 	let isDragging = $state(false);
@@ -52,7 +58,7 @@
 	let displayValue = $derived(formatValue ? formatValue(value) : String(value));
 </script>
 
-<FormField {size} {label} {id} {disabled}>
+<FormField {size} {label} {id} {disabled} {required} {helperText} {feedback}>
 	<div class="slider-wrapper">
 		<div class="slider-track-container">
 			<input
@@ -63,6 +69,7 @@
 				{max}
 				{step}
 				{disabled}
+				{required}
 				bind:value
 				oninput={handleInput}
 				onmousedown={handleMouseDown}

package/dist/forms/slider/slider.svelte.d.ts

@@ -1,16 +1,20 @@
-import type { ComponentSize } from '../../types/size.js';
+import { type FormFieldFeedback } from '../form-field/form-field.svelte';
+import type { FormFieldSizeOptions } from '../../types/form.js';
 type $$ComponentProps = {
     value?: number;
     min?: number;
     max?: number;
     step?: number;
     disabled?: boolean;
-    size?: ComponentSize;
+    required?: boolean;
+    size?: FormFieldSizeOptions;
     showTooltip?: boolean;
     showValue?: boolean;
     formatValue?: ((value: number) => string) | undefined;
     onChange?: ((value: number) => void) | undefined;
     label?: string;
+    helperText?: string;
+    feedback?: FormFieldFeedback;
 };
 declare const Slider: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Slider = ReturnType<typeof Slider>;

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

@@ -403,7 +403,7 @@
   justify-content: flex-start;
   position: relative;
   width: 100%;
-  height: 100%;
+  min-height: 2.125rem;
   border-radius: var(--radius-md);
   border: var(--border-thin) solid var(--form-input-border);
   background-color: var(--form-input-bg);
@@ -411,6 +411,7 @@
   font-size: var(--font-md);
   font-weight: 500;
   line-height: 2rem;
+  padding: 0;
   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), box-shadow var(--transition-base) var(--ease-in-out);
   user-select: none;
   white-space: nowrap;
@@ -433,11 +434,12 @@
   background-color: transparent;
   border: none;
   line-height: 2rem;
+  height: 2rem;
   font-size: var(--font-md);
   width: 100%;
   flex-grow: 1;
-  padding-left: var(--spacing-base);
-  padding-right: var(--spacing-base);
+  padding: 0 var(--spacing-base);
+  margin: 0;
 }
 .tag-box .input-container .input input:focus {
   outline: none;

package/dist/forms/text-area/text-area.svelte

@@ -24,7 +24,11 @@
 		showCharacterCount = false,
 		maxlength = undefined,
 		minlength = undefined,
-		pattern = undefined
+		pattern = undefined,
+		onChange = undefined,
+		onInput = undefined,
+		onFocus = undefined,
+		onBlur = undefined
 	}: {
 		size?: FormFieldSizeOptions;
 		value?: string | null;
@@ -44,6 +48,10 @@
 		maxlength?: number | undefined;
 		minlength?: number | undefined;
 		pattern?: string | undefined;
+		onChange?: ((value: string) => void) | undefined;
+		onInput?: ((value: string) => void) | undefined;
+		onFocus?: ((e: FocusEvent) => void) | undefined;
+		onBlur?: ((e: FocusEvent) => void) | undefined;
 	} = $props();
 
 	let textareaElement: HTMLTextAreaElement | null = $state(null);
@@ -76,6 +84,15 @@
 		textareaElement.style.height = `${newHeight}px`;
 	};
 
+	const handleInput = (e: Event) => {
+		handleAutoResize();
+		onInput?.(value || '');
+	};
+
+	const handleChange = (e: Event) => {
+		onChange?.(value || '');
+	};
+
 	// Run auto-resize when value changes
 	$effect(() => {
 		if (value !== null && value !== undefined) {
@@ -113,7 +130,10 @@
 			{minlength}
 			aria-busy={isLoading}
 			data-auto-resize={autoResize}
-			oninput={handleAutoResize}
+			oninput={handleInput}
+			onchange={handleChange}
+			onfocus={onFocus}
+			onblur={onBlur}
 		></textarea>
 		{#if showCharacterCount && maxlength}
 			<div class="character-count {characterLimitClass}">

package/dist/forms/text-area/text-area.svelte.d.ts

@@ -19,6 +19,10 @@ type $$ComponentProps = {
     maxlength?: number | undefined;
     minlength?: number | undefined;
     pattern?: string | undefined;
+    onChange?: ((value: string) => void) | undefined;
+    onInput?: ((value: string) => void) | undefined;
+    onFocus?: ((e: FocusEvent) => void) | undefined;
+    onBlur?: ((e: FocusEvent) => void) | undefined;
 };
 declare const TextArea: import("svelte").Component<$$ComponentProps, {}, "value">;
 type TextArea = ReturnType<typeof TextArea>;