sveltacular 1.0.17 → 1.0.20

package/README.md

@@ -72,8 +72,7 @@ npm i sveltacular
 - **PhoneBox** - Phone number input with formatting
 - **FileBox** / **FileArea** - File upload with drag-and-drop
 - **Slider** - Range slider with tooltip and value display
-- **SwitchBox** - Toggle switch component
-- **BoolBox** - Boolean input component
+- **BoolBox** - Boolean input component with multiple variants (dropdown, switch, checkbox, radio)
 - **MoneyBox** - Currency input with formatting
 - **TagBox** - Tag input with chip display
 - **UrlBox** - URL input with validation

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

@@ -1,8 +1,12 @@
 <script lang="ts">
 	import ListBox from '../list-box/list-box.svelte';
+	import FormField from '../form-field/form-field.svelte';
+	import { uniqueId } from '../../helpers/unique-id.js';
 	import type { FormFieldSizeOptions } from '../../index.js';
 	import type { FormFieldFeedback } from '../form-field/form-field.svelte';
 
+	type BoolBoxVariant = 'dropdown' | 'switch' | 'checkbox' | 'radio';
+
 	let {
 		value = $bindable(false),
 		options = ['Yes', 'No'] as [yes: string, no: string],
@@ -12,7 +16,8 @@
 		helperText = undefined,
 		feedback = undefined,
 		disabled = false,
-		required = false
+		required = false,
+		variant = 'dropdown'
 	}: {
 		value?: boolean;
 		options?: [yes: string, no: string];
@@ -23,29 +28,403 @@
 		feedback?: FormFieldFeedback;
 		disabled?: boolean;
 		required?: boolean;
+		variant?: BoolBoxVariant;
 	} = $props();
 
+	const id = uniqueId();
 	let stringValue = $state(value ? 'true' : 'false');
 
-	const handleChange = () => {
+	// Handle dropdown changes
+	const handleDropdownChange = () => {
 		value = stringValue == 'true';
 		onChange?.(value);
 	};
 
+	// Handle direct boolean changes (switch, checkbox)
+	const handleBooleanChange = () => {
+		onChange?.(value);
+	};
+
+	// Handle radio changes
+	const handleRadioChange = (newValue: boolean) => {
+		value = newValue;
+		onChange?.(value);
+	};
+
 	let items = $derived([
 		{ value: 'true', name: options[0] },
 		{ value: 'false', name: options[1] }
 	]);
 </script>
 
-<ListBox
-	{items}
-	bind:value={stringValue}
-	{size}
-	onChange={handleChange}
-	{label}
-	{helperText}
-	{feedback}
-	{disabled}
-	{required}
-/>
+{#if variant === 'dropdown'}
+	<ListBox
+		{items}
+		bind:value={stringValue}
+		{size}
+		onChange={handleDropdownChange}
+		{label}
+		{helperText}
+		{feedback}
+		{disabled}
+		{required}
+	/>
+{:else if variant === 'switch'}
+	<FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
+		<label class="switch-box {value ? 'checked' : ''} {size}">
+			<input
+				type="checkbox"
+				bind:checked={value}
+				onchange={handleBooleanChange}
+				{id}
+				{disabled}
+				{required}
+			/>
+			<span class="switch">
+				<span class="slider"></span>
+			</span>
+			{#if options[0]}
+				<span class="text">{value ? options[0] : options[1]}</span>
+			{/if}
+		</label>
+	</FormField>
+{:else if variant === 'checkbox'}
+	<FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
+		<label class="checkbox-box {size}">
+			<input
+				type="checkbox"
+				bind:checked={value}
+				onchange={handleBooleanChange}
+				{id}
+				{disabled}
+				{required}
+			/>
+			<span class="checkmark"></span>
+			{#if options[0]}
+				<span class="text">{value ? options[0] : options[1]}</span>
+			{/if}
+		</label>
+	</FormField>
+{:else if variant === 'radio'}
+	<FormField {size} {label} id={`${id}-group`} {required} {disabled} {helperText} {feedback}>
+		<div class="radio-group {size}">
+			<label class="radio-option">
+				<input
+					type="radio"
+					name={id}
+					checked={value === true}
+					onchange={() => handleRadioChange(true)}
+					{disabled}
+					{required}
+				/>
+				<span class="radio-mark"></span>
+				<span class="text">{options[0]}</span>
+			</label>
+			<label class="radio-option">
+				<input
+					type="radio"
+					name={id}
+					checked={value === false}
+					onchange={() => handleRadioChange(false)}
+					{disabled}
+					{required}
+				/>
+				<span class="radio-mark"></span>
+				<span class="text">{options[1]}</span>
+			</label>
+		</div>
+	</FormField>
+{/if}
+
+<style>/* Switch Styles */
+.switch-box {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.switch-box input {
+  width: 0;
+  height: 0;
+  position: absolute;
+  opacity: 0;
+}
+.switch-box .switch {
+  background-color: var(--form-switch-unchecked-bg);
+  position: relative;
+  cursor: pointer;
+  transition: background-color var(--transition-base) var(--ease-in-out);
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+.switch-box .slider {
+  border-radius: var(--radius-full);
+  position: absolute;
+  transition: left var(--transition-base) var(--ease-in-out);
+  background-color: var(--form-switch-unchecked-fg);
+}
+.switch-box.checked .switch {
+  background-color: var(--form-switch-checked-bg, #3182ce);
+}
+.switch-box.checked .slider {
+  background-color: var(--form-switch-checked-fg, white);
+}
+.switch-box .text {
+  margin-left: 0.65rem;
+}
+.switch-box {
+  /* Switch Sizes */
+}
+.switch-box.xl .switch {
+  width: 4rem;
+  height: 2rem;
+  border-radius: 1rem;
+}
+.switch-box.xl .slider {
+  width: 1.6rem;
+  height: 1.6rem;
+  top: 0.2rem;
+  left: 0.2rem;
+}
+.switch-box.xl.checked .slider {
+  left: 2.25rem;
+}
+.switch-box.xl .text {
+  font-size: 1.5rem;
+  margin-left: 1rem;
+}
+.switch-box.lg .switch {
+  width: 3rem;
+  height: 1.5rem;
+  border-radius: 0.75rem;
+}
+.switch-box.lg .slider {
+  width: 1.2rem;
+  height: 1.2rem;
+  top: 0.15rem;
+  left: 0.15rem;
+}
+.switch-box.lg.checked .slider {
+  left: 1.65rem;
+}
+.switch-box.lg .text {
+  font-size: 1.2rem;
+  margin-left: 0.8rem;
+}
+.switch-box.md .switch, .switch-box.full .switch {
+  width: 2.5rem;
+  height: 1.4rem;
+  border-radius: 0.7rem;
+}
+.switch-box.md .slider, .switch-box.full .slider {
+  width: 1.2rem;
+  height: 1.2rem;
+  top: 0.1rem;
+  left: 0.1rem;
+}
+.switch-box.md.checked .slider, .switch-box.full.checked .slider {
+  left: 1.2rem;
+}
+.switch-box.md .text, .switch-box.full .text {
+  font-size: 1rem;
+  margin-left: 0.65rem;
+}
+.switch-box.sm .switch {
+  width: 1.5rem;
+  height: 0.75rem;
+  border-radius: 0.375rem;
+}
+.switch-box.sm .slider {
+  width: 0.6rem;
+  height: 0.6rem;
+  top: 0.075rem;
+  left: 0.075rem;
+}
+.switch-box.sm.checked .slider {
+  left: 0.825rem;
+}
+.switch-box.sm .text {
+  font-size: 0.8rem;
+  margin-left: 0.5rem;
+}
+
+/* Checkbox Styles */
+.checkbox-box {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.checkbox-box input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.checkbox-box .checkmark {
+  position: relative;
+  background-color: var(--form-input-bg, white);
+  border: 2px solid var(--form-input-border, #d1d5db);
+  border-radius: var(--radius-sm, 0.25rem);
+  transition: all var(--transition-base) var(--ease-in-out);
+  flex-shrink: 0;
+}
+.checkbox-box input:checked ~ .checkmark {
+  background-color: var(--form-switch-checked-bg, #3182ce);
+  border-color: var(--form-switch-checked-bg, #3182ce);
+}
+.checkbox-box .checkmark::after {
+  content: "";
+  position: absolute;
+  display: none;
+  left: 35%;
+  top: 15%;
+  width: 25%;
+  height: 50%;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.checkbox-box input:checked ~ .checkmark::after {
+  display: block;
+}
+.checkbox-box input:disabled ~ .checkmark {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.checkbox-box .text {
+  margin-left: 0.5rem;
+}
+.checkbox-box {
+  /* Checkbox Sizes */
+}
+.checkbox-box.xl .checkmark {
+  width: 2rem;
+  height: 2rem;
+}
+.checkbox-box.xl .text {
+  font-size: 1.5rem;
+  margin-left: 1rem;
+}
+.checkbox-box.lg .checkmark {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.checkbox-box.lg .text {
+  font-size: 1.2rem;
+  margin-left: 0.8rem;
+}
+.checkbox-box.md .checkmark, .checkbox-box.full .checkmark {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.checkbox-box.md .text, .checkbox-box.full .text {
+  font-size: 1rem;
+}
+.checkbox-box.sm .checkmark {
+  width: 1rem;
+  height: 1rem;
+}
+.checkbox-box.sm .text {
+  font-size: 0.8rem;
+}
+
+/* Radio Styles */
+.radio-group {
+  display: flex;
+  gap: 1rem;
+}
+.radio-group .radio-option {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.radio-group .radio-option input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.radio-group .radio-option .radio-mark {
+  position: relative;
+  background-color: var(--form-input-bg, white);
+  border: 2px solid var(--form-input-border, #d1d5db);
+  border-radius: var(--radius-full);
+  transition: all var(--transition-base) var(--ease-in-out);
+  flex-shrink: 0;
+}
+.radio-group .radio-option input:checked ~ .radio-mark {
+  border-color: var(--form-switch-checked-bg, #3182ce);
+}
+.radio-group .radio-option .radio-mark::after {
+  content: "";
+  position: absolute;
+  display: none;
+  border-radius: var(--radius-full);
+  background-color: var(--form-switch-checked-bg, #3182ce);
+}
+.radio-group .radio-option input:checked ~ .radio-mark::after {
+  display: block;
+}
+.radio-group .radio-option input:disabled ~ .radio-mark {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.radio-group .radio-option .text {
+  margin-left: 0.5rem;
+}
+.radio-group {
+  /* Radio Sizes */
+}
+.radio-group.xl .radio-mark {
+  width: 2rem;
+  height: 2rem;
+}
+.radio-group.xl .radio-mark::after {
+  top: 25%;
+  left: 25%;
+  width: 50%;
+  height: 50%;
+}
+.radio-group.xl .text {
+  font-size: 1.5rem;
+  margin-left: 1rem;
+}
+.radio-group.lg .radio-mark {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.radio-group.lg .radio-mark::after {
+  top: 25%;
+  left: 25%;
+  width: 50%;
+  height: 50%;
+}
+.radio-group.lg .text {
+  font-size: 1.2rem;
+  margin-left: 0.8rem;
+}
+.radio-group.md .radio-mark, .radio-group.full .radio-mark {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.radio-group.md .radio-mark::after, .radio-group.full .radio-mark::after {
+  top: 25%;
+  left: 25%;
+  width: 50%;
+  height: 50%;
+}
+.radio-group.md .text, .radio-group.full .text {
+  font-size: 1rem;
+}
+.radio-group.sm .radio-mark {
+  width: 1rem;
+  height: 1rem;
+}
+.radio-group.sm .radio-mark::after {
+  top: 25%;
+  left: 25%;
+  width: 50%;
+  height: 50%;
+}
+.radio-group.sm .text {
+  font-size: 0.8rem;
+}</style>

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

@@ -1,5 +1,6 @@
 import type { FormFieldSizeOptions } from '../../index.js';
 import type { FormFieldFeedback } from '../form-field/form-field.svelte';
+type BoolBoxVariant = 'dropdown' | 'switch' | 'checkbox' | 'radio';
 type $$ComponentProps = {
     value?: boolean;
     options?: [yes: string, no: string];
@@ -10,6 +11,7 @@ type $$ComponentProps = {
     feedback?: FormFieldFeedback;
     disabled?: boolean;
     required?: boolean;
+    variant?: BoolBoxVariant;
 };
 declare const BoolBox: import("svelte").Component<$$ComponentProps, {}, "value">;
 type BoolBox = ReturnType<typeof BoolBox>;

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

@@ -0,0 +1,2 @@
+export { default as BoolBox } from './bool-box.svelte';
+export { default } from './bool-box.svelte';

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

@@ -0,0 +1,2 @@
+export { default as BoolBox } from './bool-box.svelte';
+export { default } from './bool-box.svelte';

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

@@ -9,6 +9,7 @@
 	} from '../../helpers/date.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 { DateUnit, FormFieldSizeOptions } from '../../index.js';
 	import Button from '../button/button.svelte';
 
@@ -22,14 +23,19 @@
 		size = 'full' as FormFieldSizeOptions,
 		placeholder = '',
 		nullable = false,
-		enabled = $bindable(true),
+		disabled = false,
+		readonly = false,
 		type = 'date' as 'date' | 'datetime-local',
 		required = false,
 		steps = [] as DateIncrementStep[],
 		onChange = undefined,
 		onCheckChanged = undefined,
+		onInput = undefined,
+		onFocus = undefined,
+		onBlur = undefined,
 		label = undefined,
 		helperText = undefined,
+		nullText = '-- / -- / ----',
 		feedback = undefined
 	}: {
 		value?: string | undefined | null;
@@ -37,17 +43,31 @@
 		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;
 	} = $props();
 
+	// Track whether the nullable checkbox is checked (i.e., whether field has a value)
+	let isChecked = $state(untrack(() => !!value));
+
+	// Remember the last non-null value so we can restore it when re-checking
+	let lastValue = $state<string | undefined>(undefined);
+
+	// Derive the actual disabled state: disabled prop OR (nullable and unchecked)
+	let inputDisabled = $derived(disabled || (nullable && !isChecked));
+
 	const getDefaultValue = () => {
 		const _defaultValue = defaultValue || value || currentDateTime();
 		if (type === 'date') {
@@ -58,10 +78,19 @@
 
 	const checkChanged = () => {
 		if (nullable) {
-			value = enabled ? getDefaultValue() : '';
+			if (isChecked) {
+				// Restore last value if available, otherwise use default
+				value = lastValue || getDefaultValue();
+			} else {
+				// Store current value before clearing
+				if (value) {
+					lastValue = value;
+				}
+				value = '';
+			}
 		}
-		onCheckChanged?.(enabled);
-		onInput();
+		onCheckChanged?.(isChecked);
+		handleInput();
 	};
 
 	const incrementValue = (step: DateIncrementStep) => {
@@ -72,32 +101,55 @@
 		}
 	};
 
-	const onInput = () => {
-		onChange?.(enabled ? value : null);
+	const handleInput = () => {
+		const currentValue = !nullable || isChecked ? value : null;
+		// Remember the value if it's not empty
+		if (isChecked && value) {
+			lastValue = value;
+		}
+		onChange?.(currentValue);
+		onInput?.(currentValue);
 	};
 
 	$effect(() => {
 		if (!value) {
-			// Use untrack to prevent writes to enabled/value from triggering this effect again
+			// Use untrack to prevent writes to isChecked/value from triggering this effect again
 			untrack(() => {
-				if (nullable) enabled = false;
+				if (nullable) isChecked = false;
 				else value = getDefaultValue();
 			});
+		} else {
+			// Initialize lastValue if we have an initial value
+			if (!lastValue) {
+				lastValue = value;
+			}
 		}
 	});
-	let disabled = $derived(!enabled);
+
+	let showInput = $derived(!nullable || isChecked);
 </script>
 
 <FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
-	<div class:nullable class:disabled>
-		<span class="input">
-			<input {...{ type }} {id} {placeholder} {disabled} bind:value {required} oninput={onInput} />
-		</span>
-		{#if nullable}
-			<span class="toggle">
-				<input type="checkbox" bind:checked={enabled} onchange={checkChanged} />
-			</span>
-		{/if}
+	<div class="date-box-wrapper">
+		<FormInputWrapper
+			{disabled}
+			{nullable}
+			nullText={nullText || '-- / -- / ----'}
+			onCheckChanged={checkChanged}
+		>
+			<input
+				{...{ type }}
+				{id}
+				{placeholder}
+				disabled={inputDisabled}
+				{readonly}
+				bind:value
+				{required}
+				oninput={handleInput}
+				onfocus={onFocus}
+				onblur={onBlur}
+			/>
+		</FormInputWrapper>
 		{#if steps.length > 0}
 			<span class="steps">
 				{#each steps as step}
@@ -113,46 +165,45 @@
 	</div>
 </FormField>
 
-<style>input {
-  width: 100%;
-  padding: 0.5rem 1rem;
-  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: 0.875rem;
-  font-weight: 500;
-  line-height: 1.25rem;
-  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;
-  user-select: none;
-  white-space: nowrap;
-}
-input::placeholder {
-  color: var(--form-input-placeholder, #a0aec0);
-}
-
-div {
+<style>.date-box-wrapper {
   display: flex;
   position: relative;
   gap: 0.5rem;
 }
-div .input {
+.date-box-wrapper :global(.input) {
   flex-grow: 1;
 }
-div .steps {
-  display: flex;
-  gap: 0.25rem;
+.date-box-wrapper input {
+  background-color: transparent;
+  border: none;
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: 2rem;
+  height: 2rem;
+  width: 100%;
+  flex-grow: 1;
+  padding: 0 var(--spacing-base);
+  margin: 0;
+  box-sizing: border-box;
 }
-div.nullable input {
-  padding-left: 2.5rem;
+.date-box-wrapper input:focus {
+  outline: none;
 }
-div.nullable .toggle {
-  position: absolute;
-  top: 0.7rem;
-  left: 0.4rem;
+.date-box-wrapper input:focus-visible {
+  outline: 2px solid var(--focus-ring, #007bff);
+  outline-offset: 2px;
 }
-div.disabled input {
-  background-color: #f5f5f5;
-  border-color: #e0e0e0;
-  color: #a0a0a0;
+.date-box-wrapper input::placeholder {
+  color: var(--form-input-placeholder, #a0aec0);
+}
+.date-box-wrapper input:disabled {
+  cursor: not-allowed;
+}
+.date-box-wrapper input:read-only {
+  cursor: default;
+}
+.date-box-wrapper .steps {
+  display: flex;
+  gap: 0.25rem;
 }</style>