sveltacular 0.0.77 → 1.0.1

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

@@ -1,49 +1,69 @@
-<script>import { roundToDecimals } from "../../helpers/round-to-decimals.js";
-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 = 0;
-export let placeholder = "";
-export let size = "full";
-export let type = "number";
-export let min = 0;
-export let max = 1e6;
-export let decimals = 0;
-export let prefix = null;
-export let suffix = null;
-export let step = 1;
-const valueChanged = () => {
-  if (value === null || value === void 0) return;
-  if (value < min) value = min;
-  if (value > max) value = max;
-  value = roundToDecimals(value, decimals);
-  dipatch("change", value);
-};
-const onInput = (e) => {
-  const input = e.target;
-  const newValue = parseFloat(input.value);
-  if (isNaN(newValue)) return;
-  value = newValue;
-};
-const onKeyPress = (e) => {
-  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 && decimals === 0) return e.preventDefault();
-  const newValue = `${value}${e.key}`;
-  const decimalPart = newValue.split(".")[1];
-  if (decimalPart && decimalPart.length > decimals) return e.preventDefault();
-};
+<script lang="ts">
+	import { roundToDecimals } from '../../helpers/round-to-decimals.js';
+	import { uniqueId } from '../../helpers/unique-id.js';
+	import FormField from '../form-field.svelte';
+	import type { FormFieldSizeOptions } from '../../types/form.js';
+	const id = uniqueId();
+
+	type AllowedInputTypes = 'number' | 'currency';
+
+	let {
+		value = $bindable(0 as number | null),
+		placeholder = '',
+		size = 'full' as FormFieldSizeOptions,
+		type = 'number' as AllowedInputTypes,
+		min = 0,
+		max = 1000000,
+		decimals = 0,
+		prefix = null as string | null,
+		suffix = null as string | null,
+		step = 1,
+		onChange = undefined,
+		label = undefined
+	}: {
+		value?: number | null;
+		placeholder?: string;
+		size?: FormFieldSizeOptions;
+		type?: AllowedInputTypes;
+		min?: number;
+		max?: number;
+		decimals?: number;
+		prefix?: string | null;
+		suffix?: string | null;
+		step?: number;
+		onChange?: ((value: number | null) => void) | undefined;
+		label?: string;
+	} = $props();
+
+	const valueChanged = () => {
+		if (value === null || value === undefined) return;
+		if (value < min) value = min;
+		if (value > max) value = max;
+		value = roundToDecimals(value, decimals);
+		onChange?.(value);
+	};
+
+	const onInput = (e: Event) => {
+		const input = e.target as HTMLInputElement;
+		const newValue = parseFloat(input.value);
+		if (isNaN(newValue)) return;
+		value = newValue;
+	};
+
+	// Don't allow certain characters to be typed into the input
+	const onKeyPress = (e: KeyboardEvent) => {
+		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 && decimals === 0) return e.preventDefault();
+		const newValue = `${value}${e.key}`;
+		const decimalPart = newValue.split('.')[1];
+		if (decimalPart && decimalPart.length > decimals) return e.preventDefault();
+	};
 </script>
 
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id}><slot /></FormLabel>
-	{/if}
+<FormField {size} {label} {id}>
 	<div class="input {type}">
 		{#if prefix}
 			<span class="prefix">{prefix}</span>
@@ -57,9 +77,9 @@ const onKeyPress = (e) => {
 			{step}
 			{min}
 			{max}
-			on:change={valueChanged}
-			on:input={onInput}
-			on:keypress={onKeyPress}
+			onchange={valueChanged}
+			oninput={onInput}
+			onkeypress={onKeyPress}
 		/>
 
 		{#if suffix}
@@ -75,14 +95,14 @@ const onKeyPress = (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;
 }
@@ -90,26 +110,26 @@ const onKeyPress = (e) => {
   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 .prefix,
 .input .suffix {
-  font-size: 1rem;
+  font-size: var(--font-md);
   line-height: 2rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  background-color: var(--form-input-accent-bg, #ccc);
-  color: var(--form-input-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);
 }</style>

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

@@ -1,32 +1,19 @@
-import { SvelteComponent } from "svelte";
 import type { FormFieldSizeOptions } from '../../types/form.js';
-declare const __propDef: {
-    props: {
-        value?: number | null;
-        placeholder?: string;
-        size?: FormFieldSizeOptions;
-        type?: "number" | "currency";
-        min?: number;
-        max?: number;
-        decimals?: number;
-        prefix?: string | null;
-        suffix?: string | null;
-        step?: number;
-    };
-    events: {
-        change: CustomEvent<number | null>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+type AllowedInputTypes = 'number' | 'currency';
+type $$ComponentProps = {
+    value?: number | null;
+    placeholder?: string;
+    size?: FormFieldSizeOptions;
+    type?: AllowedInputTypes;
+    min?: number;
+    max?: number;
+    decimals?: number;
+    prefix?: string | null;
+    suffix?: string | null;
+    step?: number;
+    onChange?: ((value: number | null) => void) | undefined;
+    label?: string;
 };
-export type NumberBoxProps = typeof __propDef.props;
-export type NumberBoxEvents = typeof __propDef.events;
-export type NumberBoxSlots = typeof __propDef.slots;
-export default class NumberBox extends SvelteComponent<NumberBoxProps, NumberBoxEvents, NumberBoxSlots> {
-}
-export {};
+declare const NumberBox: import("svelte").Component<$$ComponentProps, {}, "value">;
+type NumberBox = ReturnType<typeof NumberBox>;
+export default NumberBox;

package/dist/forms/phone-box/index.d.ts

@@ -0,0 +1 @@
+export { default as PhoneBox } from './phone-box.svelte';

package/dist/forms/phone-box/index.js

@@ -0,0 +1 @@
+export { default as PhoneBox } from './phone-box.svelte';

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

@@ -1,121 +1,161 @@
-<script>import { uniqueId } from "../../index.js";
-import { createEventDispatcher } from "svelte";
-import FormField from "../form-field.svelte";
-import FormLabel from "../form-label.svelte";
-export let value = "";
-export let size = "md";
-const id = uniqueId();
-const dispatch = createEventDispatcher();
-const fieldOrder = ["areaCode", "localExt", "lastFour"];
-let areaCode = "";
-let localExt = "";
-let lastFour = "";
-const getValueByField = (field) => {
-  if (field === "areaCode") return areaCode;
-  if (field === "localExt") return localExt;
-  if (field === "lastFour") return lastFour;
-  return "";
-};
-const getValueByIndex = (index) => {
-  return getValueByField(fieldOrder[index]);
-};
-const getTargetProperties = (event) => {
-  const target = event.target;
-  const name = target.getAttribute("name");
-  const currentIndex = fieldOrder.indexOf(name ?? "areaCode");
-  const nextId = currentIndex == 2 ? null : fieldOrder[currentIndex + 1];
-  const prevId = currentIndex == 0 ? null : fieldOrder[currentIndex - 1];
-  return {
-    target,
-    name,
-    value: target.value,
-    maxLength: Number(target.getAttribute("data-maxlength")),
-    nextInput: document.getElementById(`${id}-${nextId}`),
-    prevId: document.getElementById(`${id}-${prevId}`)
-  };
-};
-const cleanValue = (value2) => {
-  return value2.replace(/[^0-9]/g, "").slice(0, 10);
-};
-const getCombinedValue = () => {
-  return cleanValue(`${areaCode}${localExt}${lastFour}`);
-};
-const publishChange = () => {
-  value = getCombinedValue();
-  dispatch("change", value);
-  return value;
-};
-const setValue = (value2) => {
-  const newValue = cleanValue(value2);
-  if (newValue.length == 7) {
-    areaCode = "";
-    localExt = newValue.slice(0, 3);
-    lastFour = newValue.slice(3, 7);
-  } else {
-    areaCode = newValue.slice(0, 3);
-    localExt = newValue.slice(3, 6);
-    lastFour = newValue.slice(6, 10);
-  }
-};
-const valueChanged = (event) => {
-  const props = getTargetProperties(event);
-  const newValue = cleanValue(props.value);
-  if (newValue.length >= 10) return setValue(newValue);
-  if (props.name == "localExt" && newValue.length >= 7) {
-    return setValue(`${areaCode}${newValue}`);
-  }
-  props.target.value = newValue.slice(0, props.maxLength);
-  if (newValue.length >= props.maxLength && props.nextInput) {
-    props.nextInput.focus();
-  }
-};
-const keyUp = (event) => {
-  const props = getTargetProperties(event);
-  const isBackspace = event.key === "Backspace";
-  const isDelete = event.key === "Delete";
-  const isBackspaceOrDelete = isBackspace || isDelete;
-  const isNumeric = !isNaN(Number(event.key));
-  const isCursorHighlighting = props.target.selectionStart !== props.target.selectionEnd;
-  const isAcceptable = isNumeric || isBackspaceOrDelete;
-  const isRightArrow = event.key === "ArrowRight" || event.key === "Tab";
-  const isLeftArrow = event.key === "ArrowLeft";
-  if (isRightArrow || isLeftArrow) return;
-  if (!isAcceptable) event.preventDefault();
-  const newValue = (() => {
-    if (isCursorHighlighting) {
-      const start = props.target.selectionStart || 0;
-      const end = props.target.selectionEnd || 0;
-      return isBackspaceOrDelete ? props.value.slice(0, start) + props.value.slice(end) : props.value.slice(0, start) + event.key + props.value.slice(end);
-    }
-    return props.value;
-  })();
-  if (newValue.length >= props.maxLength) {
-    props.target.value = newValue.slice(0, props.maxLength);
-    if (props.nextInput) props.nextInput.focus();
-  }
-  if (isBackspace) {
-    if (newValue.length === 0 && props.prevId) {
-      props.prevId.focus();
-    }
-  }
-};
-setValue(value ?? "");
-$: areaCode || localExt || lastFour ? publishChange() : null;
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { uniqueId, type FormFieldSizeOptions } from '../../index.js';
+	import FormField from '../form-field.svelte';
+
+	let {
+		value = $bindable('' as string | null),
+		size = 'md' as FormFieldSizeOptions,
+		onChange = undefined,
+		label = undefined
+	}: {
+		value?: string | null;
+		size?: FormFieldSizeOptions;
+		onChange?: ((value: string) => void) | undefined;
+		label?: string;
+	} = $props();
+
+	const id = uniqueId();
+	const fieldOrder = ['areaCode', 'localExt', 'lastFour'];
+	let areaCode = $state('');
+	let localExt = $state('');
+	let lastFour = $state('');
+
+	const getValueByField = (field: string) => {
+		if (field === 'areaCode') return areaCode;
+		if (field === 'localExt') return localExt;
+		if (field === 'lastFour') return lastFour;
+		return '';
+	};
+
+	const getValueByIndex = (index: number) => {
+		return getValueByField(fieldOrder[index]);
+	};
+
+	const getTargetProperties = (event: Event) => {
+		const target = event.target as HTMLInputElement;
+		const name = target.getAttribute('name');
+		const currentIndex = fieldOrder.indexOf(name ?? 'areaCode');
+		const nextId = currentIndex == 2 ? null : fieldOrder[currentIndex + 1];
+		const prevId = currentIndex == 0 ? null : fieldOrder[currentIndex - 1];
+		return {
+			target,
+			name,
+			value: target.value,
+			maxLength: Number(target.getAttribute('data-maxlength')),
+			nextInput: document.getElementById(`${id}-${nextId}`),
+			prevId: document.getElementById(`${id}-${prevId}`)
+		};
+	};
+
+	const cleanValue = (value: string) => {
+		return value.replace(/[^0-9]/g, '').slice(0, 10);
+	};
+
+	const getCombinedValue = () => {
+		return cleanValue(`${areaCode}${localExt}${lastFour}`);
+	};
+
+	const publishChange = () => {
+		value = getCombinedValue();
+		onChange?.(value);
+		return value;
+	};
+
+	const setValue = (value: string) => {
+		const newValue = cleanValue(value);
+		if (newValue.length == 7) {
+			areaCode = '';
+			localExt = newValue.slice(0, 3);
+			lastFour = newValue.slice(3, 7);
+		} else {
+			areaCode = newValue.slice(0, 3);
+			localExt = newValue.slice(3, 6);
+			lastFour = newValue.slice(6, 10);
+		}
+	};
+
+	// Only accept number input
+	const valueChanged = (event: Event) => {
+		const props = getTargetProperties(event);
+		const newValue = cleanValue(props.value);
+		// If they put in 10 digits, in any input, consider that the whole number
+		if (newValue.length >= 10) return setValue(newValue);
+		// If they put in 7 or more digits in the localExt input, flow the second 4 to the lastFour input
+		if (props.name == 'localExt' && newValue.length >= 7) {
+			return setValue(`${areaCode}${newValue}`);
+		}
+		// Otherwise, just accept it into the current input
+		props.target.value = newValue.slice(0, props.maxLength);
+		// Then focus on the next input
+		if (newValue.length >= props.maxLength && props.nextInput) {
+			props.nextInput.focus();
+		}
+	};
+
+	// Key down event handler, don't accept non-numeric characters
+	const keyUp = (event: KeyboardEvent) => {
+		const props = getTargetProperties(event);
+		const isBackspace = event.key === 'Backspace';
+		const isDelete = event.key === 'Delete';
+		const isBackspaceOrDelete = isBackspace || isDelete;
+		const isNumeric = !isNaN(Number(event.key));
+		const isCursorHighlighting = props.target.selectionStart !== props.target.selectionEnd;
+		const isAcceptable = isNumeric || isBackspaceOrDelete;
+		const isRightArrow = event.key === 'ArrowRight' || event.key === 'Tab';
+		const isLeftArrow = event.key === 'ArrowLeft';
+		// If they are trying to move the cursor, let them
+		if (isRightArrow || isLeftArrow) return;
+		// Do not allow any non-numeric characters
+		if (!isAcceptable) event.preventDefault();
+		// Parse what they typed and update the value
+		const newValue = (() => {
+			if (isCursorHighlighting) {
+				const start = props.target.selectionStart || 0;
+				const end = props.target.selectionEnd || 0;
+				return isBackspaceOrDelete
+					? props.value.slice(0, start) + props.value.slice(end)
+					: props.value.slice(0, start) + event.key + props.value.slice(end);
+			}
+			return props.value;
+		})();
+		if (newValue.length >= props.maxLength) {
+			props.target.value = newValue.slice(0, props.maxLength);
+			if (props.nextInput) props.nextInput.focus();
+		}
+		// If backspace and the length is now 0, focus the previous input
+		if (isBackspace) {
+			if (newValue.length === 0 && props.prevId) {
+				props.prevId.focus();
+			}
+		}
+	};
+
+	// Set the initial value
+	setValue(value ?? '');
+
+	$effect(() => {
+		// Only trigger when the phone number parts change
+		const hasValue = areaCode || localExt || lastFour;
+		if (hasValue) {
+			// Use untrack to prevent value changes from triggering this effect again
+			untrack(() => {
+				publishChange();
+			});
+		}
+	});
 </script>
 
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel id="{id}-areaCode"><slot /></FormLabel>
-	{/if}
+<FormField {size} {label} id="{id}-areaCode">
 	<div class="input">
 		<span class="areaCode segment">
 			<span>(</span>
 			<input
 				id="{id}-areaCode"
 				type="text"
-				on:input={valueChanged}
-				on:keyup={keyUp}
-				on:change={valueChanged}
+				oninput={valueChanged}
+				onkeyup={keyUp}
+				onchange={valueChanged}
 				bind:value={areaCode}
 				name="areaCode"
 				data-maxlength="3"
@@ -126,9 +166,9 @@ $: areaCode || localExt || lastFour ? publishChange() : null;
 			<input
 				id="{id}-localExt"
 				type="text"
-				on:input={valueChanged}
-				on:change={valueChanged}
-				on:keyup={keyUp}
+				oninput={valueChanged}
+				onchange={valueChanged}
+				onkeyup={keyUp}
 				bind:value={localExt}
 				name="localExt"
 				data-maxlength="3"
@@ -139,9 +179,9 @@ $: areaCode || localExt || lastFour ? publishChange() : null;
 			<input
 				id="{id}-lastFour"
 				type="text"
-				on:input={valueChanged}
-				on:change={valueChanged}
-				on:keyup={keyUp}
+				oninput={valueChanged}
+				onchange={valueChanged}
+				onkeyup={keyUp}
 				bind:value={lastFour}
 				name="lastFour"
 				data-maxlength="4"

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

@@ -1,24 +1,10 @@
-import { SvelteComponent } from "svelte";
 import { type FormFieldSizeOptions } from '../../index.js';
-declare const __propDef: {
-    props: {
-        value?: string | null;
-        size?: FormFieldSizeOptions;
-    };
-    events: {
-        change: CustomEvent<string>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+type $$ComponentProps = {
+    value?: string | null;
+    size?: FormFieldSizeOptions;
+    onChange?: ((value: string) => void) | undefined;
+    label?: string;
 };
-export type PhoneBoxProps = typeof __propDef.props;
-export type PhoneBoxEvents = typeof __propDef.events;
-export type PhoneBoxSlots = typeof __propDef.slots;
-export default class PhoneBox extends SvelteComponent<PhoneBoxProps, PhoneBoxEvents, PhoneBoxSlots> {
-}
-export {};
+declare const PhoneBox: import("svelte").Component<$$ComponentProps, {}, "value">;
+type PhoneBox = ReturnType<typeof PhoneBox>;
+export default PhoneBox;

package/dist/forms/radio-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './radio-group.svelte';
+export { default as RadioBox } from './radio-box.svelte';

package/dist/forms/radio-group/index.js

@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './radio-group.svelte';
+export { default as RadioBox } from './radio-box.svelte';

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

@@ -1,9 +1,23 @@
-<script>import { uniqueId } from "../../helpers/unique-id.js";
-import CheckIcon from "../../icons/check-icon.svelte";
-export let value = void 0;
-export let group = void 0;
-export let disabled = false;
-const id = uniqueId();
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { uniqueId } from '../../helpers/unique-id.js';
+	import CheckIcon from '../../icons/check-icon.svelte';
+
+	type RadioValue = string | number | boolean | undefined | null;
+
+	let {
+		value = undefined as RadioValue,
+		group = $bindable(undefined as string | undefined),
+		disabled = false,
+		children = undefined
+	}: {
+		value?: RadioValue;
+		group?: string | undefined;
+		disabled?: boolean;
+		children?: Snippet;
+	} = $props();
+
+	const id = uniqueId();
 </script>
 
 <label>
@@ -11,9 +25,9 @@ const id = uniqueId();
 	<span class="checkbox">
 		<span class="checkmark"><CheckIcon /></span>
 	</span>
-	{#if $$slots.default}
+	{#if children}
 		<div class="text">
-			<slot />
+			{@render children?.()}
 		</div>
 	{/if}
 </label>
@@ -48,6 +62,7 @@ label .checkbox .checkmark {
   display: block;
   width: 0;
   height: 0;
+  line-height: 100%;
   color: var(--form-input-selected-fg, white);
   fill: var(--form-input-selected-bg, #3182ce);
   stroke: var(--form-input-selected-fg, white);