sveltacular 1.0.18 → 1.0.21

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

@@ -1,9 +1,8 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
-	import { animateShake, animateScaleIn } from '../../helpers/animations.js';
 	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
-	import Icon from '../../icons/icon.svelte';
+	import FormInputWrapper from '../form-input-wrapper';
 	import type { AllowedTextInputTypes, FormFieldSizeOptions } from '../../types/form.js';
 
 	const id = uniqueId();
@@ -20,6 +19,7 @@
 		disabled = false,
 		required = false,
 		readonly = false,
+		nullable = false,
 		maxlength = undefined,
 		minlength = undefined,
 		pattern = undefined,
@@ -30,8 +30,12 @@
 		allowLetters = true,
 		textCase = undefined,
 		onChange = undefined,
+		onCheckChanged = undefined,
 		onInput = undefined,
-		label = undefined
+		onFocus = undefined,
+		onBlur = undefined,
+		label = undefined,
+		nullText = ''
 	}: {
 		value?: string | null;
 		placeholder?: string;
@@ -44,6 +48,7 @@
 		disabled?: boolean;
 		required?: boolean;
 		readonly?: boolean;
+		nullable?: boolean;
 		maxlength?: number | undefined;
 		minlength?: number | undefined;
 		pattern?: string | undefined;
@@ -53,16 +58,27 @@
 		allowNumbers?: boolean;
 		allowLetters?: boolean;
 		textCase?: 'lower' | 'upper' | undefined;
-		onChange?: ((value: string) => void) | undefined;
-		onInput?: ((value: string) => void) | undefined;
+		onChange?: ((value: string | null) => void) | undefined;
+		onCheckChanged?: ((isChecked: boolean) => void) | undefined;
+		onInput?: ((value: string | null) => void) | undefined;
+		onFocus?: ((value: string | null) => void) | undefined;
+		onBlur?: ((value: string | null) => void) | undefined;
 		label?: string;
+		nullText?: string;
 	} = $props();
 
+	// 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 hasError = $derived(!!feedback?.isError);
 	let hasSuccess = $derived(!!feedback && !feedback.isError);
 	let describedByIds = $state<string[]>([]);
-	let inputElement: HTMLDivElement | null = $state(null);
-	let successIconElement: HTMLDivElement | null = $state(null);
 	let characterCount = $derived((value || '').length);
 	let characterLimitClass = $derived(
 		maxlength && characterCount > maxlength * 0.9
@@ -93,32 +109,8 @@
 		});
 	});
 
-	// Trigger shake animation when error appears (track previous error state)
-	let prevHasError = $state(false);
-	$effect(() => {
-		if (hasError && !prevHasError && inputElement) {
-			// Use untrack to prevent animation from triggering effect again
-			untrack(() => {
-				animateShake(inputElement!); // Already checked above
-			});
-		}
-		prevHasError = hasError;
-	});
-
-	// Trigger scale-in animation when success appears (track previous success state)
-	let prevHasSuccess = $state(false);
-	$effect(() => {
-		if (hasSuccess && !prevHasSuccess && successIconElement) {
-			// Use untrack to prevent animation from triggering effect again
-			untrack(() => {
-				animateScaleIn(successIconElement!); // Already checked above
-			});
-		}
-		prevHasSuccess = hasSuccess;
-	});
-
 	// Don't allow certain characters to be typed into the input
-	const onKeyPress = (e: KeyboardEvent) => {
+	const handleKeyPress = (e: KeyboardEvent) => {
 		if (!allowSpaces && e.key === ' ') {
 			e.preventDefault();
 		}
@@ -130,6 +122,33 @@
 		}
 	};
 
+	const checkChanged = () => {
+		if (nullable) {
+			if (isChecked) {
+				// Restore last value if available, otherwise use empty string
+				value = lastValue || '';
+			} else {
+				// Store current value before clearing
+				if (value) {
+					lastValue = value;
+				}
+				value = '';
+			}
+		}
+		onCheckChanged?.(isChecked);
+		handleInputChange();
+	};
+
+	const handleInputChange = () => {
+		const currentValue = !nullable || isChecked ? value : null;
+		// Remember the value if it's not empty
+		if (isChecked && value) {
+			lastValue = value;
+		}
+		onChange?.(currentValue);
+		onInput?.(currentValue);
+	};
+
 	// When the value changes, make sure it is in the correct case
 	const handleInput = (e: Event) => {
 		const cleanValue = String(value);
@@ -147,27 +166,52 @@
 		if (type === 'url') {
 			value = cleanValue.replace(/\s/g, '');
 		}
-		onInput?.(cleanValue);
-		onChange?.(cleanValue);
+		handleInputChange();
+	};
+
+	const handleFocus = (e: FocusEvent) => {
+		onFocus?.(value);
+	};
+
+	const handleBlur = (e: FocusEvent) => {
+		onBlur?.(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;
+			}
+		}
+	});
+
+	let effectiveNullText = $derived(nullText || placeholder || '--');
 </script>
 
 <FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
-	<div
-		class="input {disabled ? 'disabled' : 'enabled'}"
-		class:error={hasError}
-		class:success={hasSuccess}
-		bind:this={inputElement}
+	<FormInputWrapper
+		{disabled}
+		error={hasError}
+		success={hasSuccess}
+		{prefix}
+		{suffix}
+		{nullable}
+		nullText={effectiveNullText}
+		{isLoading}
+		onCheckChanged={checkChanged}
 	>
-		{#if prefix}
-			<div class="prefix">{prefix}</div>
-		{/if}
 		<input
 			{id}
 			{placeholder}
 			bind:value
 			{...{ type }}
-			{disabled}
+			disabled={inputDisabled}
 			{readonly}
 			{required}
 			{maxlength}
@@ -177,22 +221,12 @@
 			aria-required={required}
 			aria-invalid={hasError}
 			aria-busy={isLoading}
-			onkeypress={onKeyPress}
+			onkeypress={handleKeyPress}
 			oninput={handleInput}
+			onfocus={handleFocus}
+			onblur={handleBlur}
 		/>
-		{#if isLoading}
-			<div class="loading-indicator" aria-label="Loading">
-				<div class="spinner"></div>
-			</div>
-		{:else if hasSuccess}
-			<div class="success-indicator" bind:this={successIconElement}>
-				<Icon type="check" size="sm" />
-			</div>
-		{/if}
-		{#if suffix}
-			<div class="suffix">{suffix}</div>
-		{/if}
-	</div>
+	</FormInputWrapper>
 	{#if showCharacterCount && maxlength}
 		<div class="character-count {characterLimitClass}">
 			{characterCount} / {maxlength}
@@ -200,92 +234,24 @@
 	{/if}
 </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;
-  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.disabled {
-  opacity: 0.5;
-}
-.input.error {
-  border-color: var(--danger, #dc3545);
-}
-.input.success {
-  border-color: var(--success, #28a745);
-}
-.input .loading-indicator,
-.input .success-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 var(--spacing-base);
-}
-.input .loading-indicator .spinner {
-  width: 1rem;
-  height: 1rem;
-  border: 2px solid var(--form-input-border);
-  border-top-color: var(--primary-500, #3b82f6);
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.input .success-indicator {
-  color: var(--success, #28a745);
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.input .success-indicator :global(svg) {
-  width: 100%;
-  height: 100%;
-}
-.input input {
+<style>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: 0 0 0 var(--spacing-base);
 }
-.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 .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);
+input:disabled {
+  cursor: not-allowed;
 }
 
 .character-count {

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

@@ -12,6 +12,7 @@ type $$ComponentProps = {
     disabled?: boolean;
     required?: boolean;
     readonly?: boolean;
+    nullable?: boolean;
     maxlength?: number | undefined;
     minlength?: number | undefined;
     pattern?: string | undefined;
@@ -21,9 +22,13 @@ type $$ComponentProps = {
     allowNumbers?: boolean;
     allowLetters?: boolean;
     textCase?: 'lower' | 'upper' | undefined;
-    onChange?: ((value: string) => void) | undefined;
-    onInput?: ((value: string) => void) | undefined;
+    onChange?: ((value: string | null) => void) | undefined;
+    onCheckChanged?: ((isChecked: boolean) => void) | undefined;
+    onInput?: ((value: string | null) => void) | undefined;
+    onFocus?: ((value: string | null) => void) | undefined;
+    onBlur?: ((value: string | null) => void) | undefined;
     label?: string;
+    nullText?: string;
 };
 declare const TextBox: import("svelte").Component<$$ComponentProps, {}, "value">;
 type TextBox = ReturnType<typeof TextBox>;

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

@@ -1,92 +1,161 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
-	import type { ComponentSize } from '../../types/size.js';
+	import FormInputWrapper from '../form-input-wrapper';
+	import type { FormFieldSizeOptions } from '../../types/form.js';
 
 	const id = uniqueId();
 
 	let {
 		value = $bindable('' as string | null),
-		size = 'full' as ComponentSize,
+		size = 'full' as FormFieldSizeOptions,
+		nullable = false,
 		disabled = false,
 		required = false,
+		readonly = false,
 		onChange = undefined,
+		onCheckChanged = undefined,
+		onInput = undefined,
+		onFocus = undefined,
+		onBlur = undefined,
 		label = undefined,
 		helperText = undefined,
+		nullText = '-- : -- : --',
 		feedback = undefined
 	}: {
 		value?: string | null;
-		size?: ComponentSize;
+		size?: FormFieldSizeOptions;
+		nullable?: boolean;
 		disabled?: boolean;
 		required?: boolean;
-		onChange?: ((value: string) => void) | undefined;
+		readonly?: boolean;
+		onChange?: ((value: string | null) => void) | undefined;
+		onCheckChanged?: ((isChecked: boolean) => void) | undefined;
+		onInput?: ((value: string | null) => void) | undefined;
+		onFocus?: ((e: FocusEvent) => void) | undefined;
+		onBlur?: ((e: FocusEvent) => void) | undefined;
 		label?: string;
 		helperText?: string;
+		nullText?: string;
 		feedback?: FormFieldFeedback;
 	} = $props();
 
+	// 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));
+
+	const getCurrentTime = () => {
+		const now = new Date();
+		return `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
+	};
+
+	const checkChanged = () => {
+		if (nullable) {
+			if (isChecked) {
+				// Restore last value if available, otherwise use current time
+				value = lastValue || getCurrentTime();
+			} else {
+				// Store current value before clearing
+				if (value) {
+					lastValue = value;
+				}
+				value = '';
+			}
+		}
+		onCheckChanged?.(isChecked);
+		handleInputChange();
+	};
+
+	const handleInputChange = () => {
+		const currentValue = !nullable || isChecked ? value : null;
+		// Remember the value if it's not empty
+		if (isChecked && value) {
+			lastValue = value;
+		}
+		onChange?.(currentValue);
+		onInput?.(currentValue);
+	};
+
 	const handleInput = (e: Event) => {
 		const target = e.target as HTMLInputElement;
 		value = target.value;
-		onChange?.(target.value);
+		handleInputChange();
+	};
+
+	const handleChange = (e: Event) => {
+		const target = e.target as HTMLInputElement;
+		value = target.value;
+		handleInputChange();
 	};
+
+	$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;
+			}
+		}
+	});
+
+	let showInput = $derived(!nullable || isChecked);
 </script>
 
 <FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
-	<div class="input" class:disabled>
+	<FormInputWrapper
+		{disabled}
+		{nullable}
+		nullText={nullText || '-- : -- : --'}
+		onCheckChanged={checkChanged}
+	>
 		<input
 			{id}
 			type="time"
 			bind:value
-			{disabled}
+			disabled={inputDisabled}
 			{required}
+			{readonly}
 			oninput={handleInput}
+			onchange={handleChange}
+			onfocus={onFocus}
+			onblur={onBlur}
 			aria-required={required}
 		/>
-	</div>
+	</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;
-  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.disabled {
-  opacity: 0.5;
-}
-.input input {
+<style>input[type=time] {
   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;
+  box-sizing: border-box;
 }
-.input input:focus {
+input[type=time]:focus {
   outline: none;
 }
-.input input:focus-visible {
+input[type=time]:focus-visible {
   outline: 2px solid var(--focus-ring, #007bff);
   outline-offset: 2px;
 }
-.input input:disabled {
+input[type=time]:disabled {
   cursor: not-allowed;
 }
-.input:focus-within {
-  border-color: var(--form-input-border-focus, #3182ce);
+input[type=time]:read-only {
+  cursor: default;
 }</style>

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

@@ -1,13 +1,20 @@
 import { type FormFieldFeedback } from '../form-field/form-field.svelte';
-import type { ComponentSize } from '../../types/size.js';
+import type { FormFieldSizeOptions } from '../../types/form.js';
 type $$ComponentProps = {
     value?: string | null;
-    size?: ComponentSize;
+    size?: FormFieldSizeOptions;
+    nullable?: boolean;
     disabled?: boolean;
     required?: boolean;
-    onChange?: ((value: string) => void) | undefined;
+    readonly?: boolean;
+    onChange?: ((value: string | null) => void) | undefined;
+    onCheckChanged?: ((isChecked: boolean) => void) | undefined;
+    onInput?: ((value: string | null) => void) | undefined;
+    onFocus?: ((e: FocusEvent) => void) | undefined;
+    onBlur?: ((e: FocusEvent) => void) | undefined;
     label?: string;
     helperText?: string;
+    nullText?: string;
     feedback?: FormFieldFeedback;
 };
 declare const TimeBox: import("svelte").Component<$$ComponentProps, {}, "value">;

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

@@ -14,11 +14,17 @@
 		disabled = false,
 		required = false,
 		readonly = false,
+		nullable = false,
 		maxlength = undefined,
 		minlength = undefined,
 		pattern = undefined,
 		isLoading = false,
-		onChange = undefined
+		onChange = undefined,
+		onCheckChanged = undefined,
+		onInput = undefined,
+		onFocus = undefined,
+		onBlur = undefined,
+		nullText = ''
 	}: {
 		protocol?: HttpProtocol;
 		value?: string | null;
@@ -30,22 +36,32 @@
 		disabled?: boolean;
 		required?: boolean;
 		readonly?: boolean;
+		nullable?: boolean;
 		maxlength?: number | undefined;
 		minlength?: number | undefined;
 		pattern?: string | undefined;
 		isLoading?: boolean;
-		onChange?: ((value: string) => void) | undefined;
+		onChange?: ((value: string | null) => void) | undefined;
+		onCheckChanged?: ((isChecked: boolean) => void) | undefined;
+		onInput?: ((value: string | null) => void) | undefined;
+		onFocus?: ((e: FocusEvent) => void) | undefined;
+		onBlur?: ((e: FocusEvent) => void) | undefined;
+		nullText?: string;
 	} = $props();
 
 	// On input, parse the value and set the protocol
-	const handleInput = (inputValue: string) => {
+	const handleInput = (inputValue: string | null) => {
 		const cleanValue = inputValue ?? '';
 		const urlParts = cleanValue.split('://');
 		if (['http', 'https'].includes(urlParts[0])) {
 			protocol = urlParts[0] as HttpProtocol;
 			value = urlParts[1];
 		}
-		onChange?.(cleanValue);
+		onInput?.(inputValue);
+	};
+
+	const handleChange = (inputValue: string | null) => {
+		onChange?.(inputValue);
 	};
 </script>
 
@@ -56,7 +72,10 @@
 	prefix={protocol + '://'}
 	{size}
 	onInput={handleInput}
-	onChange={handleInput}
+	onChange={handleChange}
+	{onCheckChanged}
+	{onFocus}
+	{onBlur}
 	allowSpaces={false}
 	{label}
 	{helperText}
@@ -64,8 +83,10 @@
 	{disabled}
 	{required}
 	{readonly}
+	{nullable}
 	{maxlength}
 	{minlength}
 	{pattern}
 	{isLoading}
+	{nullText}
 />

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

@@ -11,11 +11,17 @@ type $$ComponentProps = {
     disabled?: boolean;
     required?: boolean;
     readonly?: boolean;
+    nullable?: boolean;
     maxlength?: number | undefined;
     minlength?: number | undefined;
     pattern?: string | undefined;
     isLoading?: boolean;
-    onChange?: ((value: string) => void) | undefined;
+    onChange?: ((value: string | null) => void) | undefined;
+    onCheckChanged?: ((isChecked: boolean) => void) | undefined;
+    onInput?: ((value: string | null) => void) | undefined;
+    onFocus?: ((e: FocusEvent) => void) | undefined;
+    onBlur?: ((e: FocusEvent) => void) | undefined;
+    nullText?: string;
 };
 declare const UrlBox: import("svelte").Component<$$ComponentProps, {}, "value" | "protocol">;
 type UrlBox = ReturnType<typeof UrlBox>;

package/dist/generic/theme-provider/theme-provider-demo.svelte

@@ -13,7 +13,7 @@
 	import TextBox from '../../forms/text-box/text-box.svelte';
 	import TextArea from '../../forms/text-area/text-area.svelte';
 	import CheckBox from '../../forms/check-box/check-box.svelte';
-	import SwitchBox from '../../forms/switch-box/switch-box.svelte';
+	import BoolBox from '../../forms/bool-box/bool-box.svelte';
 
 	const theme = useTheme();
 
@@ -125,7 +125,12 @@
 
 						<CheckBox bind:isChecked={checked} label="Check Box Option" />
 
-						<SwitchBox bind:checked={switchOn}>Switch Option</SwitchBox>
+						<BoolBox
+							variant="switch"
+							bind:value={switchOn}
+							options={['On', 'Off']}
+							label="Switch Option"
+						/>
 					</div>
 				</div>
 			</Card>