sveltacular 1.0.13 → 1.0.15

package/README.md

@@ -181,9 +181,8 @@ npm i sveltacular
 ### Images & Icons
 
 - **Image** - Image component with lazy loading
-- **Icon** - Icon component
-- **SvgIcon** - SVG icon wrapper
-- Built-in icons: AngleRightIcon, AngleUpIcon, CheckIcon, CopyIcon, EnvelopeIcon, FolderOpenIcon, HamburgerIcon, HomeIcon, LinkIcon, MobilePhoneIcon, PhoneIcon, UploadIcon
+- **Icon** - Unified icon component with type-safe icon types, CSS mask support, and external image support
+  - Built-in icon types: `angle-right`, `angle-up`, `check`, `copy`, `envelope`, `folder-open`, `hamburger`, `home`, `link`, `mobile-phone`, `phone`, `upload`
 
 ### Data
 

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
-	import CheckIcon from '../../icons/check-icon.svelte';
+	import Icon from '../../icons/icon.svelte';
 	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import type { FormFieldSizeOptions } from '../../types/form.js';
 
@@ -58,7 +58,7 @@
 			{required}
 		/>
 		<span class="checkbox">
-			<span class="checkmark"><CheckIcon /></span>
+			<span class="checkmark"><Icon type="check" size="sm" fill="#fff" mask /></span>
 		</span>
 		{#if children}
 			<div class="text">
@@ -84,7 +84,7 @@
 				{required}
 			/>
 			<span class="checkbox">
-				<span class="checkmark"><CheckIcon /></span>
+				<span class="checkmark"> <Icon type="check" size="sm" fill="#fff" mask /></span>
 			</span>
 			{#if children}
 				<div class="text">

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

@@ -1,7 +1,7 @@
 <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 FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import type { FormFieldSizeOptions } from '../../types/form.js';
 
 	const baseId = uniqueId();
@@ -23,6 +23,9 @@
 		required = false,
 		size = 'full' as FormFieldSizeOptions,
 		label = undefined as string | undefined,
+		helperText = undefined as string | undefined,
+		feedback = undefined as FormFieldFeedback | undefined,
+		disabled = false,
 		onChange = undefined as ((value: (number | null)[]) => void) | undefined
 	}: {
 		dimensions?: string[];
@@ -36,6 +39,9 @@
 		required?: boolean;
 		size?: FormFieldSizeOptions;
 		label?: string;
+		helperText?: string;
+		feedback?: FormFieldFeedback;
+		disabled?: boolean;
 		onChange?: ((value: (number | null)[]) => void) | undefined;
 	} = $props();
 
@@ -97,13 +103,15 @@
 	const getPlaceholder = (dimension: string) => {
 		return dimension;
 	};
+
+	let hasError = $derived(!!feedback?.isError);
 </script>
 
-<FormField {size} {label} id={getDimensionId(0)} {required}>
+<FormField {size} {label} id={getDimensionId(0)} {required} {disabled} {helperText} {feedback}>
 	<div class="dimension-inputs">
 		{#each dimensions as dimension, index}
 			<div class="input-group">
-				<div class="input">
+				<div class="input {disabled ? 'disabled' : ''}" class:error={hasError}>
 					{#if prefix}
 						<span class="prefix">{prefix}</span>
 					{/if}
@@ -119,6 +127,7 @@
 						oninput={(e) => onInput(e, index)}
 						onkeypress={onKeyPress}
 						{required}
+						{disabled}
 					/>
 					{#if suffix}
 						<span class="suffix">{suffix}</span>
@@ -169,6 +178,12 @@
   user-select: none;
   white-space: nowrap;
 }
+.input.disabled {
+  opacity: 0.5;
+}
+.input.error {
+  border-color: var(--color-error, #dc3545);
+}
 .input input {
   background-color: transparent;
   border: none;

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

@@ -1,3 +1,4 @@
+import { type FormFieldFeedback } from '../form-field/form-field.svelte';
 import type { FormFieldSizeOptions } from '../../types/form.js';
 type $$ComponentProps = {
     dimensions?: string[];
@@ -11,6 +12,9 @@ type $$ComponentProps = {
     required?: boolean;
     size?: FormFieldSizeOptions;
     label?: string;
+    helperText?: string;
+    feedback?: FormFieldFeedback;
+    disabled?: boolean;
     onChange?: ((value: (number | null)[]) => void) | undefined;
 };
 declare const DimensionBox: import("svelte").Component<$$ComponentProps, {}, "value">;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import UploadIcon from '../../icons/upload-icon.svelte';
+	import Icon from '../../icons/icon.svelte';
 
 	type SelectFilesTarget = null | { files: FileList | null | undefined };
 	type DroppedFiles = FileList | File[];
@@ -93,7 +93,7 @@
 		ondragexit={dragStop}
 	>
 		<input type="file" id="upload-button" accept="image/*" onchange={selectFiles} {disabled} />
-		<div class="icon"><UploadIcon /></div>
+		<div class="icon"><Icon type="upload" size="lg" /></div>
 		<div class="text">
 			{#if children}
 				{@render children?.()}

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import LinkIcon from '../../icons/link-icon.svelte';
+	import Icon from '../../icons/icon.svelte';
 	import type { FormFieldSizeOptions } from '../../index.js';
 	import FormField from '../form-field/form-field.svelte';
 
@@ -20,7 +20,7 @@
 	<div class="input">
 		{#if href}
 			<span class="icon">
-				<LinkIcon />
+				<Icon type="link" size="sm" />
 			</span>
 			<a {href} class="text">{value}</a>
 		{:else}

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

@@ -3,7 +3,7 @@
 	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import Menu from '../../generic/menu/menu.svelte';
-	import AngleUpIcon from '../../icons/angle-up-icon.svelte';
+	import Icon from '../../icons/icon.svelte';
 	import debounce from '../../helpers/debounce.js';
 	import { browser } from '$app/environment';
 	import { onMount, untrack } from 'svelte';
@@ -311,7 +311,7 @@
 			aria-label={open ? 'Close options' : 'Open options'}
 			tabindex="-1"
 		>
-			<AngleUpIcon />
+			<Icon type="angle-up" size="sm" />
 		</button>
 		{#if text && isSearchable}
 			<button

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	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';
 	import { untrack } from 'svelte';
 
 	const id = uniqueId();
@@ -16,6 +16,10 @@
 		units = 'ones' as 'ones' | 'cents',
 		min = 0,
 		max = null as number | null,
+		required = false,
+		helperText = undefined as string | undefined,
+		feedback = undefined as FormFieldFeedback | undefined,
+		disabled = false,
 		onChange = undefined,
 		label = undefined
 	}: {
@@ -29,6 +33,10 @@
 		units?: 'ones' | 'cents';
 		min?: number;
 		max?: number | null;
+		required?: boolean;
+		helperText?: string;
+		feedback?: FormFieldFeedback;
+		disabled?: boolean;
 		onChange?: ((value: number | null) => void) | undefined;
 		label?: string;
 	} = $props();
@@ -217,10 +225,12 @@
 		cents = String(centValue).padStart(2, '0');
 		onChange?.(value);
 	};
+
+	let hasError = $derived(!!feedback?.isError);
 </script>
 
-<FormField {size} {label} {id}>
-	<div class="input {currency}" class:allowCents {id}>
+<FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
+	<div class="input {currency}" class:allowCents class:disabled class:error={hasError} {id}>
 		{#if prefix}
 			<span class="prefix">{prefix}</span>
 		{/if}
@@ -240,6 +250,8 @@
 			name="dollars"
 			id="{id}-dollars"
 			inputmode="numeric"
+			{required}
+			{disabled}
 		/>
 		{#if allowCents}
 			<span class="separator">.</span>
@@ -258,6 +270,8 @@
 				name="cents"
 				id="{id}-cents"
 				inputmode="numeric"
+				{required}
+				{disabled}
 			/>
 		{/if}
 
@@ -286,6 +300,12 @@
   user-select: none;
   white-space: nowrap;
 }
+.input.disabled {
+  opacity: 0.5;
+}
+.input.error {
+  border-color: var(--color-error, #dc3545);
+}
 .input input {
   background-color: transparent;
   border: none;

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

@@ -1,4 +1,5 @@
 import { type FormFieldSizeOptions } from '../../index.js';
+import { type FormFieldFeedback } from '../form-field/form-field.svelte';
 type $$ComponentProps = {
     value?: number | null;
     prefix?: string;
@@ -10,6 +11,10 @@ type $$ComponentProps = {
     units?: 'ones' | 'cents';
     min?: number;
     max?: number | null;
+    required?: boolean;
+    helperText?: string;
+    feedback?: FormFieldFeedback;
+    disabled?: boolean;
     onChange?: ((value: number | null) => void) | undefined;
     label?: string;
 };

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

@@ -1,7 +1,7 @@
 <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 FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import type { FormFieldSizeOptions } from '../../types/form.js';
 
 	const minId = uniqueId();
@@ -22,6 +22,9 @@
 		required = false,
 		size = 'full' as FormFieldSizeOptions,
 		label = undefined as string | undefined,
+		helperText = undefined as string | undefined,
+		feedback = undefined as FormFieldFeedback | undefined,
+		disabled = false,
 		onChange = undefined as ((minValue: number | null, maxValue: number | null) => void) | undefined
 	}: {
 		minValue?: number | null;
@@ -38,6 +41,9 @@
 		required?: boolean;
 		size?: FormFieldSizeOptions;
 		label?: string;
+		helperText?: string;
+		feedback?: FormFieldFeedback;
+		disabled?: boolean;
 		onChange?: ((minValue: number | null, maxValue: number | null) => void) | undefined;
 	} = $props();
 
@@ -104,12 +110,14 @@
 		if (!isAllowed) return e.preventDefault();
 		if (isDecimal && !allowDecimals) return e.preventDefault();
 	};
+
+	let hasError = $derived(!!feedback?.isError);
 </script>
 
-<FormField {size} {label} id={minId} {required}>
+<FormField {size} {label} id={minId} {required} {disabled} {helperText} {feedback}>
 	<div class="number-range-inputs">
 		<div class="input-group">
-			<div class="input">
+			<div class="input {disabled ? 'disabled' : ''}" class:error={hasError}>
 				{#if prefix}
 					<span class="prefix">{prefix}</span>
 				{/if}
@@ -125,6 +133,7 @@
 					oninput={(e) => onInput(e, true)}
 					onkeypress={(e) => onKeyPress(e, true)}
 					{required}
+					{disabled}
 				/>
 				{#if suffix}
 					<span class="suffix">{suffix}</span>
@@ -132,7 +141,7 @@
 			</div>
 		</div>
 		<div class="input-group">
-			<div class="input">
+			<div class="input {disabled ? 'disabled' : ''}" class:error={hasError}>
 				{#if prefix}
 					<span class="prefix">{prefix}</span>
 				{/if}
@@ -148,6 +157,7 @@
 					oninput={(e) => onInput(e, false)}
 					onkeypress={(e) => onKeyPress(e, false)}
 					{required}
+					{disabled}
 				/>
 				{#if suffix}
 					<span class="suffix">{suffix}</span>
@@ -185,6 +195,12 @@
   user-select: none;
   white-space: nowrap;
 }
+.input.disabled {
+  opacity: 0.5;
+}
+.input.error {
+  border-color: var(--color-error, #dc3545);
+}
 .input input {
   background-color: transparent;
   border: none;

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

@@ -1,3 +1,4 @@
+import { type FormFieldFeedback } from '../form-field/form-field.svelte';
 import type { FormFieldSizeOptions } from '../../types/form.js';
 type $$ComponentProps = {
     minValue?: number | null;
@@ -14,6 +15,9 @@ type $$ComponentProps = {
     required?: boolean;
     size?: FormFieldSizeOptions;
     label?: string;
+    helperText?: string;
+    feedback?: FormFieldFeedback;
+    disabled?: boolean;
     onChange?: ((minValue: number | null, maxValue: number | null) => void) | undefined;
 };
 declare const NumberRangeBox: import("svelte").Component<$$ComponentProps, {}, "minValue" | "maxValue">;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
-	import CheckIcon from '../../icons/check-icon.svelte';
+	import Icon from '../../icons/icon.svelte';
 
 	type RadioValue = string | number | boolean | undefined | null;
 
@@ -32,7 +32,7 @@
 		onchange={() => onChange?.(String(value || ''))}
 	/>
 	<span class="checkbox">
-		<span class="checkmark"><CheckIcon /></span>
+		<span class="checkmark"><Icon type="check" size="sm" /></span>
 	</span>
 	{#if children}
 		<div class="text">

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

@@ -3,7 +3,7 @@
 	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 CheckIcon from '../../icons/check-icon.svelte';
+	import Icon from '../../icons/icon.svelte';
 	import type { AllowedTextInputTypes, FormFieldSizeOptions } from '../../types/form.js';
 
 	const id = uniqueId();
@@ -186,7 +186,7 @@
 			</div>
 		{:else if hasSuccess}
 			<div class="success-indicator" bind:this={successIconElement}>
-				<CheckIcon />
+				<Icon type="check" size="sm" />
 			</div>
 		{/if}
 		{#if suffix}

package/dist/generic/email/email.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import EnvelopeIcon from '../../icons/envelope-icon.svelte';
+	import Icon from '../../icons/icon.svelte';
 
 	let { value }: { value: string } = $props();
 </script>
 
 <a href="mailto:{value}" title="Email Address">
 	<span class="icon">
-		<EnvelopeIcon />
+		<Icon type="envelope" size="sm" />
 	</span>
 	<span class="address">
 		{value}

package/dist/generic/menu/menu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import CheckIcon from '../../icons/check-icon.svelte';
+	import Icon from '../../icons/icon.svelte';
 	import type { FormFieldSizeOptions, MenuOption } from '../../index.js';
 	import FlexItem from '../../layout/flex-item.svelte';
 	import FlexRow from '../../layout/flex-row.svelte';
@@ -123,7 +123,7 @@
 							</FlexItem>
 							<FlexItem>
 								{#if item.value === value}
-									<span class="check" aria-hidden="true"><CheckIcon /></span>
+									<span class="check" aria-hidden="true"><Icon type="check" size="sm" /></span>
 								{/if}
 							</FlexItem>
 						</FlexRow>
@@ -156,7 +156,7 @@
 						</FlexItem>
 						<FlexItem>
 							{#if item.value === value}
-								<span class="check" aria-hidden="true"><CheckIcon /></span>
+								<span class="check" aria-hidden="true"><Icon type="check" size="sm" /></span>
 							{/if}
 						</FlexItem>
 					</FlexRow>

package/dist/generic/phone/phone.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { capitalize } from '../../helpers/capitalize.js';
-	import MobilePhoneIcon from '../../icons/mobile-phone-icon.svelte';
-	import PhoneIcon from '../../icons/phone-icon.svelte';
+	import Icon from '../../icons/icon.svelte';
 
 	let {
 		value,
@@ -33,9 +32,9 @@
 <a href="{protocol}:{phoneNumberDigits}" title={capitalize(type)}>
 	<span class="icon">
 		{#if isCellPhone}
-			<MobilePhoneIcon />
+			<Icon type="mobile-phone" size="sm" />
 		{:else}
-			<PhoneIcon />
+			<Icon type="phone" size="sm" />
 		{/if}
 	</span>
 	<span class="number">

package/dist/icons/icon-data.d.ts

@@ -0,0 +1,28 @@
+import type { IconType } from './types.js';
+/**
+ * SVG path element data structure
+ */
+export interface IconPathData {
+    d?: string;
+    stroke?: string;
+    'stroke-linecap'?: string;
+    'stroke-linejoin'?: string;
+    'stroke-width'?: string | number;
+    fill?: string;
+}
+/**
+ * Icon data structure
+ */
+export interface IconData {
+    viewBox: string;
+    paths: IconPathData[];
+    fill: 'none' | 'currentColor';
+}
+/**
+ * Registry of all icon data
+ */
+export declare const iconRegistry: Record<IconType, IconData>;
+/**
+ * Get icon data for a given icon type
+ */
+export declare function getIconData(type: IconType): IconData;