sveltacular 1.0.5 → 1.0.6

package/dist/forms/index.d.ts

@@ -7,8 +7,14 @@ export { default as InfoBox } from './info-box/info-box.svelte';
 export { default as MoneyBox } from './money-box/money-box.svelte';
 export { default as NewOrExistingCombo } from './combo/new-or-existing-combo.svelte';
 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 TagInputBox } from './tag-input-box/tag-input-box.svelte';
 export { default as TextArea } from './text-area/text-area.svelte';
 export { default as TextBox } from './text-box/text-box.svelte';
+export { default as TimeBox } from './time-box/time-box.svelte';
 export { default as UrlBox } from './url-box/url-box.svelte';
 export * from './check-box/index.js';
 export * from './list-box/index.js';
@@ -21,6 +27,4 @@ export { default as FormHeader } from './form-header.svelte';
 export { default as FormLabel } from './form-label/form-label.svelte';
 export { default as FormSection } from './form-section/form-section.svelte';
 export { default as FormRow } from './form-row/form-row.svelte';
-export { default as Slider } from './slider/slider.svelte';
-export { default as TimeBox } from './time-box/time-box.svelte';
 export * from './validation.js';

package/dist/forms/index.js

@@ -8,8 +8,14 @@ export { default as InfoBox } from './info-box/info-box.svelte';
 export { default as MoneyBox } from './money-box/money-box.svelte';
 export { default as NewOrExistingCombo } from './combo/new-or-existing-combo.svelte';
 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 TagInputBox } from './tag-input-box/tag-input-box.svelte';
 export { default as TextArea } from './text-area/text-area.svelte';
 export { default as TextBox } from './text-box/text-box.svelte';
+export { default as TimeBox } from './time-box/time-box.svelte';
 export { default as UrlBox } from './url-box/url-box.svelte';
 // Form components with barrel files
 export * from './check-box/index.js';
@@ -24,8 +30,5 @@ export { default as FormHeader } from './form-header.svelte';
 export { default as FormLabel } from './form-label/form-label.svelte';
 export { default as FormSection } from './form-section/form-section.svelte';
 export { default as FormRow } from './form-row/form-row.svelte';
-// New form components
-export { default as Slider } from './slider/slider.svelte';
-export { default as TimeBox } from './time-box/time-box.svelte';
 // Validation utilities
 export * from './validation.js';

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/tag-input-box/tag-input-box.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+	import { uniqueId } from '../../helpers/unique-id.js';
+	import FormField from '../form-field/form-field.svelte';
+	import Chip from '../../generic/chip/chip.svelte';
+	import type { FormFieldSizeOptions } from '../../types/form.js';
+
+	const id = uniqueId();
+	const datalistId = uniqueId();
+
+	let {
+		value = $bindable([] as string[]),
+		placeholder = 'Add a tag...',
+		required = false,
+		disabled = false,
+		autocomplete = [] as string[],
+		separators = [',', ';'] as string[],
+		size = 'full' as FormFieldSizeOptions,
+		label = undefined as string | undefined,
+		helperText = undefined as string | undefined,
+		errorText = undefined as string | undefined,
+		onChange = undefined as ((value: string[]) => void) | undefined
+	}: {
+		value?: string[];
+		placeholder?: string;
+		required?: boolean;
+		disabled?: boolean;
+		autocomplete?: string[];
+		separators?: string[];
+		size?: FormFieldSizeOptions;
+		label?: string;
+		helperText?: string;
+		errorText?: string;
+		onChange?: ((value: string[]) => void) | undefined;
+	} = $props();
+
+	let newTag = $state('');
+
+	function addTag(tagToAdd?: string) {
+		const tag = tagToAdd || newTag.trim();
+		if (tag && !value.includes(tag)) {
+			value = [...value, tag];
+			newTag = '';
+			onChange?.(value);
+		}
+	}
+
+	function removeTag(tagToRemove: string) {
+		value = value.filter((tag) => tag !== tagToRemove);
+		onChange?.(value);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			addTag();
+		} else if (event.key === 'Backspace' && newTag === '' && value.length > 0) {
+			removeTag(value[value.length - 1]);
+		}
+	}
+
+	function handleInput(event: Event) {
+		const input = event.target as HTMLInputElement;
+		const inputValue = input.value;
+
+		// Check if the last character is a separator
+		if (inputValue.length > 0) {
+			const lastChar = inputValue[inputValue.length - 1];
+			if (separators.includes(lastChar)) {
+				// Extract the tag before the separator
+				const tagBeforeSeparator = inputValue.slice(0, -1).trim();
+				if (tagBeforeSeparator) {
+					// Prevent the separator from being added
+					newTag = tagBeforeSeparator;
+					// Add the tag
+					addTag(tagBeforeSeparator);
+				} else {
+					// If there's no text before the separator, just clear it
+					newTag = '';
+				}
+			}
+		}
+	}
+</script>
+
+<FormField {size} {label} {id} {required} {disabled} {helperText} {errorText}>
+	<div class="tag-input">
+		<div class="input-container">
+			<div class="input-wrapper">
+				<input
+					{id}
+					type="text"
+					bind:value={newTag}
+					{placeholder}
+					onkeydown={handleKeydown}
+					oninput={handleInput}
+					{disabled}
+					{required}
+					list={autocomplete.length > 0 ? datalistId : undefined}
+					aria-label="Tag input"
+					class="tag-input-field"
+				/>
+				{#if autocomplete.length > 0}
+					<datalist id={datalistId}>
+						{#each autocomplete as option}
+							<option value={option}></option>
+						{/each}
+					</datalist>
+				{/if}
+			</div>
+			<button
+				type="button"
+				class="add-button"
+				onclick={() => addTag()}
+				disabled={disabled || !newTag.trim()}
+				aria-label="Add tag"
+			>
+				Add
+			</button>
+		</div>
+
+		{#if value.length > 0}
+			<div class="tags">
+				{#each value as tag}
+					<Chip label={tag} removable={true} onRemove={() => removeTag(tag)} />
+				{/each}
+			</div>
+		{/if}
+	</div>
+</FormField>
+
+<style>.tag-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  width: 100%;
+}
+.tag-input .input-container {
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: flex-end;
+}
+.tag-input .input-container .input-wrapper {
+  flex: 1;
+  position: relative;
+}
+.tag-input .input-container .tag-input-field {
+  width: 100%;
+  height: 2.5rem;
+  padding: 0 var(--spacing-base);
+  border: var(--border-thin) solid var(--form-input-border);
+  border-radius: var(--radius-md);
+  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);
+}
+.tag-input .input-container .tag-input-field:focus {
+  outline: none;
+  border-color: var(--form-input-border-focus);
+  background-color: var(--form-input-bg);
+}
+.tag-input .input-container .tag-input-field:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.tag-input .input-container .tag-input-field::placeholder {
+  color: var(--form-input-placeholder);
+}
+.tag-input .input-container .add-button {
+  padding: var(--spacing-sm) var(--spacing-base);
+  background-color: var(--button-primary-bg);
+  color: var(--button-primary-fg);
+  border: var(--border-thin) solid var(--button-primary-border);
+  border-radius: var(--radius-md);
+  font-size: var(--font-sm);
+  font-weight: 500;
+  cursor: pointer;
+  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);
+  white-space: nowrap;
+  height: fit-content;
+  min-height: 2.5rem;
+}
+.tag-input .input-container .add-button:hover:not(:disabled) {
+  background-color: var(--button-primary-hover-bg);
+  color: var(--button-primary-hover-fg);
+}
+.tag-input .input-container .add-button:disabled {
+  background-color: var(--gray-400);
+  border-color: var(--gray-400);
+  color: var(--gray-600);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.tag-input .input-container .add-button:active:not(:disabled) {
+  transform: scale(0.98);
+}
+.tag-input .tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+}</style>

package/dist/forms/tag-input-box/tag-input-box.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { FormFieldSizeOptions } from '../../types/form.js';
+type $$ComponentProps = {
+    value?: string[];
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    autocomplete?: string[];
+    separators?: string[];
+    size?: FormFieldSizeOptions;
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    onChange?: ((value: string[]) => void) | undefined;
+};
+declare const TagInputBox: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TagInputBox = ReturnType<typeof TagInputBox>;
+export default TagInputBox;

package/dist/generic/avatar/avatar.svelte

@@ -88,3 +88,4 @@
 
 
 
+

package/dist/generic/chip/chip.svelte

@@ -92,3 +92,4 @@
 
 
 
+

package/dist/navigation/context-menu/README.md

@@ -148,3 +148,4 @@ Due to limitations in the Storybook Svelte CSF parser with advanced Svelte 5 syn
 
 
 
+

package/dist/navigation/context-menu/context-menu-divider.svelte

@@ -23,3 +23,4 @@
 
 
 
+

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "1.0.5",
+	"version": "1.0.6",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",