sveltacular 0.0.76 → 1.0.0

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

@@ -1,62 +1,140 @@
-<script>import { uniqueId } from "../../helpers/unique-id.js";
-import FormField from "../form-field.svelte";
-import FormLabel from "../form-label.svelte";
-import { createEventDispatcher } from "svelte";
-const id = uniqueId();
-const dipatch = createEventDispatcher();
-export let value = "";
-export let placeholder = "";
-export let helperText = "";
-export let size = "full";
-export let type = "text";
-export let disabled = false;
-export let required = false;
-export let readonly = false;
-export let maxlength = void 0;
-export let minlength = void 0;
-export let pattern = void 0;
-export let prefix = void 0;
-export let suffix = void 0;
-export let allowSpaces = true;
-export let allowNumbers = true;
-export let allowLetters = true;
-export let textCase = void 0;
-const onKeyPress = (e) => {
-  if (!allowSpaces && e.key === " ") {
-    e.preventDefault();
-  }
-  if (!allowNumbers && !isNaN(Number(e.key))) {
-    e.preventDefault();
-  }
-  if (!allowLetters && /^[a-zA-Z]$/.test(e.key)) {
-    e.preventDefault();
-  }
-};
-const onInput = (e) => {
-  const cleanValue = String(value);
-  if (textCase === "lower") {
-    value = cleanValue.toLowerCase();
-  } else if (textCase === "upper") {
-    value = cleanValue.toUpperCase();
-  }
-  if (type === "email") {
-    value = cleanValue.replace(/\s/g, "");
-  }
-  if (type === "tel") {
-    value = cleanValue.replace(/[^0-9]/g, "");
-  }
-  if (type === "url") {
-    value = cleanValue.replace(/\s/g, "");
-  }
-  dipatch("input", cleanValue);
-};
+<script lang="ts">
+	import { uniqueId } from '../../helpers/unique-id.js';
+	import { animateShake, animateScaleIn } from '../../helpers/animations.js';
+	import FormField from '../form-field.svelte';
+	import FormLabel from '../form-label.svelte';
+	import CheckIcon from '../../icons/check-icon.svelte';
+	import type { AllowedTextInputTypes, FormFieldSizeOptions } from '../../types/form.js';
+
+	const id = uniqueId();
+
+	let {
+		value = $bindable('' as string | null),
+		placeholder = '',
+		helperText = '',
+		errorText = '',
+		successText = '',
+		isLoading = false,
+		showCharacterCount = false,
+		size = 'full',
+		type = 'text',
+		disabled = false,
+		required = false,
+		readonly = false,
+		maxlength = undefined,
+		minlength = undefined,
+		pattern = undefined,
+		prefix = undefined,
+		suffix = undefined,
+		allowSpaces = true,
+		allowNumbers = true,
+		allowLetters = true,
+		textCase = undefined,
+		onChange = undefined,
+		onInput = undefined,
+		label = undefined
+	}: {
+		value?: string | null;
+		placeholder?: string;
+		helperText?: string;
+		errorText?: string;
+		successText?: string;
+		isLoading?: boolean;
+		showCharacterCount?: boolean;
+		size?: FormFieldSizeOptions;
+		type?: AllowedTextInputTypes;
+		disabled?: boolean;
+		required?: boolean;
+		readonly?: boolean;
+		maxlength?: number | undefined;
+		minlength?: number | undefined;
+		pattern?: string | undefined;
+		prefix?: string | undefined;
+		suffix?: string | undefined;
+		allowSpaces?: boolean;
+		allowNumbers?: boolean;
+		allowLetters?: boolean;
+		textCase?: 'lower' | 'upper' | undefined;
+		onChange?: ((value: string) => void) | undefined;
+		onInput?: ((value: string) => void) | undefined;
+		label?: string;
+	} = $props();
+
+	let hasError = $derived(!!errorText);
+	let hasSuccess = $derived(!!successText && !errorText);
+	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
+			? characterCount >= maxlength
+				? 'at-limit'
+				: 'near-limit'
+			: ''
+	);
+	
+	$effect(() => {
+		describedByIds = [];
+		if (helperText) describedByIds.push(`${id}-helper`);
+		if (errorText) describedByIds.push(`${id}-error`);
+		if (successText) describedByIds.push(`${id}-success`);
+	});
+
+	// Trigger shake animation when error appears
+	$effect(() => {
+		if (hasError && inputElement) {
+			animateShake(inputElement);
+		}
+	});
+
+	// Trigger scale-in animation when success appears
+	$effect(() => {
+		if (hasSuccess && successIconElement) {
+			animateScaleIn(successIconElement);
+		}
+	});
+
+	// Don't allow certain characters to be typed into the input
+	const onKeyPress = (e: KeyboardEvent) => {
+		if (!allowSpaces && e.key === ' ') {
+			e.preventDefault();
+		}
+		if (!allowNumbers && !isNaN(Number(e.key))) {
+			e.preventDefault();
+		}
+		if (!allowLetters && /^[a-zA-Z]$/.test(e.key)) {
+			e.preventDefault();
+		}
+	};
+
+	// When the value changes, make sure it is in the correct case
+	const handleInput = (e: Event) => {
+		const cleanValue = String(value);
+		if (textCase === 'lower') {
+			value = cleanValue.toLowerCase();
+		} else if (textCase === 'upper') {
+			value = cleanValue.toUpperCase();
+		}
+		if (type === 'email') {
+			value = cleanValue.replace(/\s/g, '');
+		}
+		if (type === 'tel') {
+			value = cleanValue.replace(/[^0-9]/g, '');
+		}
+		if (type === 'url') {
+			value = cleanValue.replace(/\s/g, '');
+		}
+		onInput?.(cleanValue);
+		onChange?.(cleanValue);
+	};
 </script>
 
 <FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id} {required}><slot /></FormLabel>
+	{#if label}
+		<FormLabel {id} {required} {label} />
 	{/if}
-	<div class="input {disabled ? 'disabled' : 'enabled'}">
+	<div class="input {disabled ? 'disabled' : 'enabled'}" class:error={hasError} class:success={hasSuccess} bind:this={inputElement}>
 		{#if prefix}
 			<div class="prefix">{prefix}</div>
 		{/if}
@@ -71,15 +149,43 @@ const onInput = (e) => {
 			{maxlength}
 			{minlength}
 			{pattern}
-			on:keypress={onKeyPress}
-			on:input={onInput}
+			aria-describedby={describedByIds.length > 0 ? describedByIds.join(' ') : undefined}
+			aria-required={required}
+			aria-invalid={hasError}
+			aria-busy={isLoading}
+			onkeypress={onKeyPress}
+			oninput={handleInput}
 		/>
+		{#if isLoading}
+			<div class="loading-indicator" aria-label="Loading">
+				<div class="spinner"></div>
+			</div>
+		{:else if hasSuccess}
+			<div class="success-indicator" bind:this={successIconElement}>
+				<CheckIcon />
+			</div>
+		{/if}
 		{#if suffix}
 			<div class="suffix">{suffix}</div>
 		{/if}
 	</div>
+	{#if showCharacterCount && maxlength}
+		<div class="character-count {characterLimitClass}">
+			{characterCount} / {maxlength}
+		</div>
+	{/if}
 	{#if helperText}
-		<div class="helper-text">{helperText}</div>
+		<div class="helper-text" id="{id}-helper">{helperText}</div>
+	{/if}
+	{#if successText}
+		<div class="success-text" id="{id}-success" role="status" aria-live="polite">
+			{successText}
+		</div>
+	{/if}
+	{#if errorText}
+		<div class="error-text" id="{id}-error" role="alert" aria-live="assertive">
+			{errorText}
+		</div>
 	{/if}
 </FormField>
 
@@ -90,50 +196,122 @@ const onInput = (e) => {
   position: relative;
   width: 100%;
   height: 100%;
-  border-radius: 0.25rem;
-  border: 1px solid var(--form-input-border, black);
-  background-color: var(--form-input-bg, white);
-  color: var(--form-input-fg, black);
-  font-size: 1rem;
+  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 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
+  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 {
   background-color: transparent;
   border: none;
   line-height: 2rem;
-  font-size: 1rem;
+  font-size: var(--font-md);
   width: 100%;
   flex-grow: 1;
-  padding-left: 1rem;
+  padding-left: var(--spacing-base);
 }
 .input input:focus {
   outline: none;
 }
+.input input:focus-visible {
+  outline: 2px solid var(--focus-ring, #007bff);
+  outline-offset: 2px;
+}
 .input .prefix,
 .input .suffix {
-  font-size: 1rem;
+  font-size: var(--font-md);
   line-height: 2rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  background-color: var(--base-accent-bg, #ccc);
-  color: var(--base-accent-fg, black);
+  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: 1px solid var(--form-input-border, black);
+  border-right: var(--border-thin) solid var(--form-input-border);
 }
 .input .suffix {
-  border-left: 1px solid var(--form-input-border, black);
+  border-left: var(--border-thin) solid var(--form-input-border);
+}
+
+.character-count {
+  font-size: var(--font-sm);
+  line-height: 1.25rem;
+  padding: var(--spacing-xs);
+  text-align: right;
+  color: var(--body-fg);
+}
+.character-count.near-limit {
+  color: var(--warning, #ffc107);
+  font-weight: 500;
+}
+.character-count.at-limit {
+  color: var(--danger, #dc3545);
+  font-weight: 600;
 }
 
 .helper-text {
-  font-size: 0.75rem;
+  font-size: var(--font-sm);
+  line-height: 1.25rem;
+  padding: var(--spacing-xs);
+  color: var(--body-fg);
+}
+
+.success-text {
+  font-size: var(--font-sm);
   line-height: 1.25rem;
-  padding: 0.25rem;
+  padding: var(--spacing-xs);
+  color: var(--success, #28a745);
+  font-weight: 500;
+}
+
+.error-text {
+  font-size: var(--font-sm);
+  line-height: 1.25rem;
+  padding: var(--spacing-xs);
+  color: var(--danger, #dc3545);
+  font-weight: 500;
 }</style>

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

@@ -1,38 +1,30 @@
-import { SvelteComponent } from "svelte";
 import type { AllowedTextInputTypes, FormFieldSizeOptions } from '../../types/form.js';
-declare const __propDef: {
-    props: {
-        value?: string | null | undefined;
-        placeholder?: string | undefined;
-        helperText?: string | undefined;
-        size?: FormFieldSizeOptions | undefined;
-        type?: AllowedTextInputTypes | undefined;
-        disabled?: boolean | undefined;
-        required?: boolean | undefined;
-        readonly?: boolean | undefined;
-        maxlength?: number | undefined;
-        minlength?: number | undefined;
-        pattern?: string | undefined;
-        prefix?: string | undefined;
-        suffix?: string | undefined;
-        allowSpaces?: boolean | undefined;
-        allowNumbers?: boolean | undefined;
-        allowLetters?: boolean | undefined;
-        textCase?: 'lower' | 'upper' | undefined;
-    };
-    events: {
-        change: CustomEvent<string>;
-        input: CustomEvent<string>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+type $$ComponentProps = {
+    value?: string | null;
+    placeholder?: string;
+    helperText?: string;
+    errorText?: string;
+    successText?: string;
+    isLoading?: boolean;
+    showCharacterCount?: boolean;
+    size?: FormFieldSizeOptions;
+    type?: AllowedTextInputTypes;
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    maxlength?: number | undefined;
+    minlength?: number | undefined;
+    pattern?: string | undefined;
+    prefix?: string | undefined;
+    suffix?: string | undefined;
+    allowSpaces?: boolean;
+    allowNumbers?: boolean;
+    allowLetters?: boolean;
+    textCase?: 'lower' | 'upper' | undefined;
+    onChange?: ((value: string) => void) | undefined;
+    onInput?: ((value: string) => void) | undefined;
+    label?: string;
 };
-export type TextBoxProps = typeof __propDef.props;
-export type TextBoxEvents = typeof __propDef.events;
-export type TextBoxSlots = typeof __propDef.slots;
-export default class TextBox extends SvelteComponent<TextBoxProps, TextBoxEvents, TextBoxSlots> {
-}
-export {};
+declare const TextBox: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TextBox = ReturnType<typeof TextBox>;
+export default TextBox;

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

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { uniqueId } from '../../helpers/unique-id.js';
+	import FormField from '../form-field.svelte';
+	import FormLabel from '../form-label.svelte';
+	import type { ComponentSize } from '../../types/size.js';
+
+	const id = uniqueId();
+
+	let {
+		value = $bindable('' as string | null),
+		size = 'full' as ComponentSize,
+		disabled = false,
+		required = false,
+		onChange = undefined,
+		label = undefined
+	}: {
+		value?: string | null;
+		size?: ComponentSize;
+		disabled?: boolean;
+		required?: boolean;
+		onChange?: ((value: string) => void) | undefined;
+		label?: string;
+	} = $props();
+
+	const handleInput = (e: Event) => {
+		const target = e.target as HTMLInputElement;
+		value = target.value;
+		onChange?.(target.value);
+	};
+</script>
+
+<FormField {size}>
+	{#if label}
+		<FormLabel {id} {required} {label} />
+	{/if}
+	<input
+		{id}
+		type="time"
+		bind:value
+		{disabled}
+		{required}
+		oninput={handleInput}
+		aria-required={required}
+	/>
+</FormField>
+
+<style>input[type=time] {
+  width: 100%;
+  padding: var(--spacing-sm) var(--spacing-base);
+  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);
+}
+input[type=time]:focus {
+  outline: none;
+  border-color: var(--form-input-border-focus, #3182ce);
+}
+input[type=time]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}</style>
+

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

@@ -0,0 +1,12 @@
+import type { ComponentSize } from '../../types/size.js';
+type $$ComponentProps = {
+    value?: string | null;
+    size?: ComponentSize;
+    disabled?: boolean;
+    required?: boolean;
+    onChange?: ((value: string) => void) | undefined;
+    label?: string;
+};
+declare const TimeBox: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TimeBox = ReturnType<typeof TimeBox>;
+export default TimeBox;

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

@@ -1,16 +1,31 @@
-<script>import TextBox from "../text-box/text-box.svelte";
-export let protocol = "https";
-export let value = "";
-export let size = "lg";
-export let placeholder = "example.com";
-const onInput = () => {
-  const cleanValue = value ?? "";
-  const urlParts = cleanValue.split("://");
-  if (["http", "https"].includes(urlParts[0])) {
-    protocol = urlParts[0];
-    value = urlParts[1];
-  }
-};
+<script lang="ts">
+	import type { FormFieldSizeOptions } from '../../index.js';
+	import type { HttpProtocol } from '../../types/generic.js';
+	import TextBox from '../text-box/text-box.svelte';
+
+	let {
+		protocol = $bindable('https' as HttpProtocol),
+		value = $bindable('' as string | null),
+		size = 'lg' as FormFieldSizeOptions,
+		placeholder = 'example.com',
+		label = undefined
+	}: {
+		protocol?: HttpProtocol;
+		value?: string | null;
+		size?: FormFieldSizeOptions;
+		placeholder?: string;
+		label?: string;
+	} = $props();
+
+	// On input, parse the value and set the protocol
+	const handleInput = (inputValue: string) => {
+		const cleanValue = inputValue ?? '';
+		const urlParts = cleanValue.split('://');
+		if (['http', 'https'].includes(urlParts[0])) {
+			protocol = urlParts[0] as HttpProtocol;
+			value = urlParts[1];
+		}
+	};
 </script>
 
 <TextBox
@@ -19,9 +34,8 @@ const onInput = () => {
 	{placeholder}
 	prefix={protocol + '://'}
 	{size}
-	on:input={onInput}
-	on:change={onInput}
+	onInput={handleInput}
+	onChange={handleInput}
 	allowSpaces={false}
->
-	<slot />
-</TextBox>
+	{label}
+/>

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

@@ -1,23 +1,12 @@
-import { SvelteComponent } from "svelte";
 import type { FormFieldSizeOptions } from '../../index.js';
 import type { HttpProtocol } from '../../types/generic.js';
-declare const __propDef: {
-    props: {
-        protocol?: HttpProtocol | undefined;
-        value?: string | null | undefined;
-        size?: FormFieldSizeOptions | undefined;
-        placeholder?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+type $$ComponentProps = {
+    protocol?: HttpProtocol;
+    value?: string | null;
+    size?: FormFieldSizeOptions;
+    placeholder?: string;
+    label?: string;
 };
-export type UrlBoxProps = typeof __propDef.props;
-export type UrlBoxEvents = typeof __propDef.events;
-export type UrlBoxSlots = typeof __propDef.slots;
-export default class UrlBox extends SvelteComponent<UrlBoxProps, UrlBoxEvents, UrlBoxSlots> {
-}
-export {};
+declare const UrlBox: import("svelte").Component<$$ComponentProps, {}, "value" | "protocol">;
+type UrlBox = ReturnType<typeof UrlBox>;
+export default UrlBox;