sveltacular 1.0.18 → 1.0.21

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

@@ -11,16 +11,21 @@ type $$ComponentProps = {
     size?: FormFieldSizeOptions;
     placeholder?: string;
     nullable?: boolean;
-    enabled?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
     type?: 'date' | 'datetime-local';
     required?: boolean;
     steps?: DateIncrementStep[];
     onChange?: ((value: string | null) => void) | undefined;
-    onCheckChanged?: ((enabled: boolean) => 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 DateBox: import("svelte").Component<$$ComponentProps, {}, "value" | "enabled">;
+declare const DateBox: import("svelte").Component<$$ComponentProps, {}, "value">;
 type DateBox = ReturnType<typeof DateBox>;
 export default DateBox;

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

@@ -2,6 +2,7 @@
 	import { roundToDecimals } from '../../helpers/round-to-decimals.js';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
+	import FormInputWrapper from '../form-input-wrapper';
 	import type { FormFieldSizeOptions } from '../../types/form.js';
 
 	const baseId = uniqueId();
@@ -111,10 +112,12 @@
 	<div class="dimension-inputs">
 		{#each dimensions as dimension, index}
 			<div class="input-group">
-				<div class="input {disabled ? 'disabled' : ''}" class:error={hasError}>
-					{#if prefix}
-						<span class="prefix">{prefix}</span>
-					{/if}
+				<FormInputWrapper
+					{disabled}
+					error={hasError}
+					prefix={prefix || undefined}
+					suffix={suffix || undefined}
+				>
 					<input
 						id={getDimensionId(index)}
 						type="number"
@@ -129,10 +132,7 @@
 						{required}
 						{disabled}
 					/>
-					{#if suffix}
-						<span class="suffix">{suffix}</span>
-					{/if}
-				</div>
+				</FormInputWrapper>
 			</div>
 			{#if index < dimensions.length - 1}
 				<span class="separator">×</span>
@@ -160,31 +160,7 @@
   flex-shrink: 0;
 }
 
-.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(--color-error, #dc3545);
-}
-.input input {
+input {
   background-color: transparent;
   border: none;
   line-height: 2rem;
@@ -193,24 +169,13 @@
   flex-grow: 1;
   padding-left: var(--spacing-base);
 }
-.input input:focus {
+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:focus-visible {
+  outline: 2px solid var(--focus-ring, #007bff);
+  outline-offset: 2px;
 }
-.input .suffix {
-  border-left: var(--border-thin) solid var(--form-input-border);
+input:disabled {
+  cursor: not-allowed;
 }</style>

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

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import FormField from '../form-field/form-field.svelte';
+	import FormInputWrapper from '../form-input-wrapper';
 	import type { FormFieldSizeOptions } from '../../types/form.js';
 
 	const id = uniqueId();
@@ -32,7 +33,7 @@
 </script>
 
 <FormField {size} {label} {id} {required} {disabled}>
-	<div class="input">
+	<FormInputWrapper {disabled}>
 		<input
 			{id}
 			{placeholder}
@@ -45,29 +46,10 @@
 			accept={mimeTypes.join(',')}
 			{capture}
 		/>
-	</div>
+	</FormInputWrapper>
 </FormField>
 
-<style>.input {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  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 {
+<style>input {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
@@ -81,14 +63,14 @@
   font-size: var(--font-md);
   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 input::placeholder {
+input::placeholder {
   color: var(--form-input-placeholder, #888);
   font-style: italic;
 }</style>

package/dist/forms/form-input-wrapper/form-input-wrapper.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { untrack } from 'svelte';
+	import { animateShake, animateScaleIn } from '../../helpers/animations.js';
+	import Icon from '../../icons/icon.svelte';
+
+	let {
+		disabled = false,
+		error = false,
+		success = false,
+		prefix = undefined,
+		suffix = undefined,
+		nullable = false,
+		nullText = '--',
+		isLoading = false,
+		onCheckChanged = undefined,
+		children
+	}: {
+		disabled?: boolean;
+		error?: boolean;
+		success?: boolean;
+		prefix?: string | undefined;
+		suffix?: string | undefined;
+		nullable?: boolean;
+		nullText?: string;
+		isLoading?: boolean;
+		onCheckChanged?: ((isChecked: boolean) => void) | undefined;
+		children: Snippet;
+	} = $props();
+
+	// Track whether the nullable checkbox is checked (i.e., whether field has a value)
+	let isChecked = $state(true);
+	
+	// Show input when not nullable, or when nullable and checked
+	let showInput = $derived(!nullable || isChecked);
+
+	let inputElement_ref: HTMLDivElement | null = $state(null);
+	let successIconElement: HTMLDivElement | null = $state(null);
+
+	// Trigger shake animation when error appears (track previous error state)
+	let prevHasError = $state(false);
+	$effect(() => {
+		if (error && !prevHasError && inputElement_ref) {
+			// Use untrack to prevent animation from triggering effect again
+			untrack(() => {
+				animateShake(inputElement_ref!);
+			});
+		}
+		prevHasError = error;
+	});
+
+	// Trigger scale-in animation when success appears (track previous success state)
+	let prevHasSuccess = $state(false);
+	$effect(() => {
+		if (success && !prevHasSuccess && successIconElement) {
+			// Use untrack to prevent animation from triggering effect again
+			untrack(() => {
+				animateScaleIn(successIconElement!);
+			});
+		}
+		prevHasSuccess = success;
+	});
+
+	const checkChanged = () => {
+		onCheckChanged?.(isChecked);
+	};
+</script>
+
+<div
+	class="input"
+	class:disabled
+	class:error
+	class:success
+	class:nullable
+	bind:this={inputElement_ref}
+>
+	{#if prefix}
+		<div class="prefix">{prefix}</div>
+	{/if}
+	{#if showInput}
+		{@render children()}
+	{:else}
+		<div class="input-null-text">
+			{nullText}
+		</div>
+	{/if}
+	{#if isLoading}
+		<div class="loading-indicator" aria-label="Loading">
+			<div class="spinner"></div>
+		</div>
+	{:else if success}
+		<div class="success-indicator" bind:this={successIconElement}>
+			<Icon type="check" size="sm" />
+		</div>
+	{/if}
+	{#if suffix}
+		<div class="suffix">{suffix}</div>
+	{/if}
+	{#if nullable}
+		<span class="toggle">
+			<input type="checkbox" bind:checked={isChecked} onchange={checkChanged} />
+		</span>
+	{/if}
+</div>
+
+<style>.input {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  width: 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);
+  color: var(--form-input-fg);
+  font-size: var(--font-md);
+  font-weight: 500;
+  line-height: 2rem;
+  padding: 0;
+  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), 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.nullable .toggle {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0.4rem;
+  z-index: 1;
+}
+.input.nullable .prefix {
+  padding-left: 2.5rem;
+}
+.input.nullable:not(:has(.prefix)) :global(input),
+.input.nullable:not(:has(.prefix)) .input-null-text {
+  padding-left: 2.5rem;
+}
+.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-null-text {
+  font-size: var(--font-md);
+  line-height: 2rem;
+  text-align: left;
+  padding-left: var(--spacing-base);
+  margin: 0;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+.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/form-input-wrapper/form-input-wrapper.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    disabled?: boolean;
+    error?: boolean;
+    success?: boolean;
+    prefix?: string | undefined;
+    suffix?: string | undefined;
+    nullable?: boolean;
+    nullText?: string;
+    isLoading?: boolean;
+    onCheckChanged?: ((isChecked: boolean) => void) | undefined;
+    children: Snippet;
+};
+declare const FormInputWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormInputWrapper = ReturnType<typeof FormInputWrapper>;
+export default FormInputWrapper;

package/dist/forms/form-input-wrapper/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FormInputWrapper } from './form-input-wrapper.svelte';
+export { default } from './form-input-wrapper.svelte';

package/dist/forms/form-input-wrapper/index.js

@@ -0,0 +1,2 @@
+export { default as FormInputWrapper } from './form-input-wrapper.svelte';
+export { default } from './form-input-wrapper.svelte';

package/dist/forms/index.d.ts

@@ -11,7 +11,6 @@ export { default as NumberBox } from './number-box/number-box.svelte';
 export { default as NumberRangeBox } from './number-range-box/number-range-box.svelte';
 export { default as PhoneBox } from './phone-box/phone-box.svelte';
 export { default as Slider } from './slider/slider.svelte';
-export { default as SwitchBox } from './switch-box/switch-box.svelte';
 export { default as TagBox } from './tag-box/tag-box.svelte';
 export { default as TextArea } from './text-area/text-area.svelte';
 export { default as TextBox } from './text-box/text-box.svelte';

package/dist/forms/index.js

@@ -12,7 +12,6 @@ export { default as NumberBox } from './number-box/number-box.svelte';
 export { default as NumberRangeBox } from './number-range-box/number-range-box.svelte';
 export { default as PhoneBox } from './phone-box/phone-box.svelte';
 export { default as Slider } from './slider/slider.svelte';
-export { default as SwitchBox } from './switch-box/switch-box.svelte';
 export { default as TagBox } from './tag-box/tag-box.svelte';
 export { default as TextArea } from './text-area/text-area.svelte';
 export { default as TextBox } from './text-box/text-box.svelte';

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

@@ -15,10 +15,13 @@
 		size = 'full' as FormFieldSizeOptions,
 		disabled = false,
 		required = false,
+		readonly = false,
 		searchable = false,
 		search = undefined as SearchFunction | undefined,
 		placeholder = '',
 		onChange = undefined,
+		onFocus = undefined,
+		onBlur = undefined,
 		label = undefined,
 		helperText = undefined,
 		feedback = undefined,
@@ -30,10 +33,13 @@
 		size?: FormFieldSizeOptions;
 		disabled?: boolean;
 		required?: boolean;
+		readonly?: boolean;
 		searchable?: boolean;
 		search?: SearchFunction | undefined;
 		placeholder?: string;
 		onChange?: ((value: string | null) => void) | undefined;
+		onFocus?: ((e: FocusEvent) => void) | undefined;
+		onBlur?: ((e: FocusEvent) => void) | undefined;
 		label?: string;
 		helperText?: string;
 		feedback?: FormFieldFeedback;
@@ -128,7 +134,7 @@
 
 	// Open/close dropdown
 	const openDropdown = () => {
-		if (!disabled) {
+		if (!disabled && !readonly) {
 			isMenuOpen = true;
 			if (browser && inputElement) {
 				inputElement.focus();
@@ -144,6 +150,14 @@
 		text = getText();
 	};
 
+	const handleFocus = (e: FocusEvent) => {
+		onFocus?.(e);
+	};
+
+	const handleBlur = (e: FocusEvent) => {
+		onBlur?.(e);
+	};
+
 	const toggleDropdown = () => {
 		if (isMenuOpen) {
 			closeDropdown();
@@ -162,7 +176,7 @@
 
 	// Handle clicks on the input (for non-searchable mode)
 	const handleInputClick = (e: MouseEvent) => {
-		if (disabled) return;
+		if (disabled || readonly) return;
 		// For non-searchable mode, clicking the input should open the dropdown
 		if (!isSearchable && !isMenuOpen) {
 			e.preventDefault();
@@ -172,7 +186,7 @@
 
 	// Handle key presses in the input
 	const onInputKeyDown = (e: KeyboardEvent) => {
-		if (disabled) return;
+		if (disabled || readonly) return;
 
 		if (e.key === 'Escape') {
 			e.preventDefault();
@@ -257,7 +271,7 @@
 	const clear = (e: MouseEvent | KeyboardEvent) => {
 		e.preventDefault();
 		e.stopPropagation();
-		if (disabled) return;
+		if (disabled || readonly) return;
 		isUserTyping = false;
 		text = '';
 		value = null;
@@ -283,7 +297,7 @@
 		}
 	});
 
-	let open = $derived(isMenuOpen && !disabled);
+	let open = $derived(isMenuOpen && !disabled && !readonly);
 </script>
 
 <FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
@@ -307,7 +321,7 @@
 			{required}
 			{disabled}
 			{placeholder}
-			readonly={!isSearchable}
+			readonly={readonly || !isSearchable}
 			role="combobox"
 			aria-expanded={open}
 			aria-controls={listboxId}
@@ -323,6 +337,8 @@
 					triggerSearch();
 				}
 			}}
+			onfocus={handleFocus}
+			onblur={handleBlur}
 			data-value={value}
 			data-text={text}
 		/>
@@ -331,7 +347,7 @@
 			class="icon"
 			onclick={clickArrow}
 			onkeydown={clickArrow}
-			{disabled}
+			disabled={disabled || readonly}
 			aria-label={open ? 'Close options' : 'Open options'}
 			tabindex="-1"
 		>
@@ -348,7 +364,7 @@
 				class="clear"
 				onclick={clear}
 				onkeydown={clear}
-				{disabled}
+				disabled={disabled || readonly}
 				aria-label="Clear selection"
 				tabindex="-1"
 			>
@@ -383,7 +399,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);
@@ -391,6 +407,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);
 }
 .listbox-container.disabled {

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

@@ -7,10 +7,13 @@ type $$ComponentProps = {
     size?: FormFieldSizeOptions;
     disabled?: boolean;
     required?: boolean;
+    readonly?: boolean;
     searchable?: boolean;
     search?: SearchFunction | undefined;
     placeholder?: string;
     onChange?: ((value: string | null) => void) | undefined;
+    onFocus?: ((e: FocusEvent) => void) | undefined;
+    onBlur?: ((e: FocusEvent) => void) | undefined;
     label?: string;
     helperText?: string;
     feedback?: FormFieldFeedback;