sveltacular 0.0.76 → 1.0.0

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

@@ -1,71 +1,97 @@
-<script>import { addUnits, currentDateTime, isDateString, isDateOrDateTimeString, isDateTimeString } from "../../helpers/date.js";
-import { uniqueId } from "../../helpers/unique-id.js";
-import FormField from "../form-field.svelte";
-import FormLabel from "../form-label.svelte";
-import Button from "../button/button.svelte";
-import { createEventDispatcher } from "svelte";
-const id = uniqueId();
-export let value = void 0;
-export let defaultValue = void 0;
-export let size = "full";
-export let placeholder = "";
-export let nullable = false;
-export let enabled = true;
-export let type = "date";
-export let required = false;
-export let steps = [];
-const dipatch = createEventDispatcher();
-const _defaultValue = defaultValue || value || currentDateTime();
-const getDefaultValue = () => {
-  if (type === "date") {
-    return isDateString(_defaultValue) ? _defaultValue : currentDateTime().substring(0, 10);
-  }
-  return isDateTimeString(_defaultValue) ? _defaultValue : currentDateTime();
-};
-const checkChanged = () => {
-  if (nullable) {
-    value = enabled ? getDefaultValue() : "";
-  }
-  dipatch("checkChanged", enabled);
-  onInput();
-};
-const incrementValue = (step) => {
-  if (isDateOrDateTimeString(value)) {
-    const newDate = addUnits(step.value, step.unit, value);
-    newDate.setUTCDate(newDate.getUTCDate() + step.value);
-    value = newDate.toISOString().substring(0, type === "date" ? 10 : 19);
-  }
-};
-const onInput = () => {
-  dipatch("value", enabled ? value : null);
-};
-if (!value) {
-  if (nullable)
-    enabled = false;
-  else
-    value = getDefaultValue();
-}
-$:
-  disabled = !enabled;
+<script lang="ts">
+	import { addUnits, currentDateTime, isDateString, isDateOrDateTimeString, isDateTimeString } from '../../helpers/date.js';
+	import { uniqueId } from '../../helpers/unique-id.js';
+	import FormField from '../form-field.svelte';
+	import FormLabel from '../form-label.svelte';
+	import type { DateUnit, FormFieldSizeOptions } from '../../index.js';
+	import Button from '../button/button.svelte';
+
+	type DateIncrementStep = { label: string; value: number, unit: DateUnit };
+
+	const id = uniqueId();
+
+	let {
+		value = $bindable(undefined as string | undefined | null),
+		defaultValue = undefined,
+		size = 'full' as FormFieldSizeOptions,
+		placeholder = '',
+		nullable = false,
+		enabled = $bindable(true),
+		type = 'date' as 'date' | 'datetime-local',
+		required = false,
+		steps = [] as DateIncrementStep[],
+		onChange = undefined,
+		onCheckChanged = undefined,
+		label = undefined
+	}: {
+		value?: string | undefined | null;
+		defaultValue?: string | undefined;
+		size?: FormFieldSizeOptions;
+		placeholder?: string;
+		nullable?: boolean;
+		enabled?: boolean;
+		type?: 'date' | 'datetime-local';
+		required?: boolean;
+		steps?: DateIncrementStep[];
+		onChange?: ((value: string | null) => void) | undefined;
+		onCheckChanged?: ((enabled: boolean) => void) | undefined;
+		label?: string;
+	} = $props();
+
+	const getDefaultValue = () => {
+		const _defaultValue = defaultValue || value || currentDateTime();
+		if (type === 'date') {
+			return isDateString(_defaultValue) ? _defaultValue : currentDateTime().substring(0, 10);
+		}
+		return isDateTimeString(_defaultValue) ? _defaultValue : currentDateTime();
+	};
+
+	const checkChanged = () => {
+		if (nullable) {
+			value = enabled ? getDefaultValue() : '';
+		}
+		onCheckChanged?.(enabled);
+		onInput();
+	};
+
+	const incrementValue = (step: DateIncrementStep) => {
+		if (isDateOrDateTimeString(value)) {
+			const newDate = addUnits(step.value, step.unit, value);
+			newDate.setUTCDate(newDate.getUTCDate() + step.value);
+			value = newDate.toISOString().substring(0, type === 'date' ? 10 : 19);
+		}
+	};
+
+	const onInput = () => {
+		onChange?.(enabled ? value : null);
+	};
+
+	$effect(() => {
+		if (!value) {
+			if (nullable) enabled = false;
+			else value = getDefaultValue();
+		}
+	});
+	let disabled = $derived(!enabled);
 </script>
 
 <FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id} {required}><slot /></FormLabel>
+	{#if label}
+		<FormLabel {id} {required} {label} />
 	{/if}
 	<div class:nullable class:disabled>
 		<span class="input">
-			<input {...{ type }} {id} {placeholder} {disabled} bind:value {required} on:input={onInput} />
+			<input {...{ type }} {id} {placeholder} {disabled} bind:value {required} oninput={onInput} />
 		</span>
 		{#if nullable}
 			<span class="toggle">
-				<input type="checkbox" bind:checked={enabled} on:change={checkChanged} />
+				<input type="checkbox" bind:checked={enabled} onchange={checkChanged} />
 			</span>
 		{/if}
 		{#if steps.length > 0}
 			<span class="steps">
 				{#each steps as step}
-					<Button noMargin={true} collapse={true} on:click={() => incrementValue(step)}>{step.label}</Button>
+					<Button noMargin={true} collapse={true} onClick={() => incrementValue(step)} label={step.label} />
 				{/each}
 			</span>
 		{/if}

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

@@ -1,34 +1,23 @@
-import { SvelteComponent } from "svelte";
 import type { DateUnit, FormFieldSizeOptions } from '../../index.js';
-declare const __propDef: {
-    props: {
-        value?: string | undefined | null;
-        defaultValue?: string | undefined;
-        size?: FormFieldSizeOptions | undefined;
-        placeholder?: string | undefined;
-        nullable?: boolean | undefined;
-        enabled?: boolean | undefined;
-        type?: "date" | "datetime-local" | undefined;
-        required?: boolean | undefined;
-        steps?: {
-            label: string;
-            value: number;
-            unit: DateUnit;
-        }[] | undefined;
-    };
-    events: {
-        value: CustomEvent<string | null>;
-        checkChanged: CustomEvent<boolean>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+type DateIncrementStep = {
+    label: string;
+    value: number;
+    unit: DateUnit;
 };
-export type DateBoxProps = typeof __propDef.props;
-export type DateBoxEvents = typeof __propDef.events;
-export type DateBoxSlots = typeof __propDef.slots;
-export default class DateBox extends SvelteComponent<DateBoxProps, DateBoxEvents, DateBoxSlots> {
-}
-export {};
+type $$ComponentProps = {
+    value?: string | undefined | null;
+    defaultValue?: string | undefined;
+    size?: FormFieldSizeOptions;
+    placeholder?: string;
+    nullable?: boolean;
+    enabled?: boolean;
+    type?: 'date' | 'datetime-local';
+    required?: boolean;
+    steps?: DateIncrementStep[];
+    onChange?: ((value: string | null) => void) | undefined;
+    onCheckChanged?: ((enabled: boolean) => void) | undefined;
+    label?: string;
+};
+declare const DateBox: import("svelte").Component<$$ComponentProps, {}, "value" | "enabled">;
+type DateBox = ReturnType<typeof DateBox>;
+export default DateBox;

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

@@ -1,61 +1,82 @@
-<script>import UploadIcon from "../../icons/upload-icon.svelte";
-import { createEventDispatcher } from "svelte";
-export let selectedFiles = [];
-export let disabled = false;
-export let fileLimit = 1;
-export let fileMimePattern = void 0;
-let isDragging = false;
-const dispatch = createEventDispatcher();
-const filterFiles = (files) => {
-  if (!fileMimePattern)
-    return files;
-  return [...files].filter((file) => {
-    if (!file.type)
-      return false;
-    if (!fileMimePattern)
-      return true;
-    if (typeof fileMimePattern === "string")
-      return file.type.startsWith(fileMimePattern);
-    return file.type.match(fileMimePattern);
-  });
-};
-const addFiles = async (files) => {
-  if (!files.length)
-    return;
-  selectedFiles = [...files, selectedFiles].flat().slice(0, fileLimit);
-  dispatch("filesSelected", selectedFiles);
-};
-const selectFiles = async (e) => {
-  const target = e.target;
-  if (!target?.files || !target.files.length)
-    return;
-  addFiles(filterFiles([...target.files]));
-};
-const dropFiles = async (e) => {
-  dragStop(e);
-  if (!e.dataTransfer)
-    return;
-  const files = e.dataTransfer.items ? [...e.dataTransfer.items].filter((item) => item.kind === "file").map((item) => item.getAsFile()) : e.dataTransfer.files;
-  addFiles(filterFiles(files));
-};
-const dragStart = (e) => {
-  e.preventDefault();
-  e.stopPropagation();
-  isDragging = true;
-};
-const dragStop = (e) => {
-  e.preventDefault();
-  e.stopPropagation();
-  isDragging = false;
-};
-$:
-  filesClass = selectedFiles.length ? "has-files" : "no-files";
-$:
-  enabledClass = disabled ? "disabled" : "";
-$:
-  draggingClass = isDragging ? "isDragging" : "";
-$:
-  filesSelectedText = selectedFiles.length ? `${selectedFiles.length} file${selectedFiles.length > 1 ? "s" : ""} selected` : "";
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import UploadIcon from '../../icons/upload-icon.svelte';
+
+	type SelectFilesTarget = null | { files: FileList | null | undefined };
+	type DroppedFiles = FileList | File[];
+
+	let {
+		selectedFiles = $bindable([] as DroppedFiles),
+		disabled = false,
+		fileLimit = 1,
+		fileMimePattern = undefined as string | RegExp | undefined,
+		onFilesSelected = undefined,
+		children = undefined
+	}: {
+		selectedFiles?: DroppedFiles;
+		disabled?: boolean;
+		fileLimit?: number;
+		fileMimePattern?: string | RegExp | undefined;
+		onFilesSelected?: ((files: FileList | File[]) => void) | undefined;
+		children?: Snippet;
+	} = $props();
+
+	let isDragging = $state(false);
+
+	const filterFiles = (files: DroppedFiles) => {
+		if (!fileMimePattern) return files;
+		return [...files].filter((file) => {
+			if (!file.type) return false;
+			if (!fileMimePattern) return true;
+			if (typeof fileMimePattern === 'string') return file.type.startsWith(fileMimePattern);
+			return file.type.match(fileMimePattern);
+		});
+	};
+
+	const addFiles = async (files: DroppedFiles) => {
+		if (!files.length) return;
+		selectedFiles = [...files, selectedFiles].flat().slice(0, fileLimit) as DroppedFiles;
+		onFilesSelected?.(selectedFiles);
+	};
+
+	const selectFiles = async (e: Event) => {
+		const target = e.target as unknown as SelectFilesTarget;
+		if (!target?.files || !target.files.length) return;
+		addFiles(filterFiles([...target.files]));
+	};
+
+	const dropFiles = async (e: DragEvent) => {
+		dragStop(e);
+		if (!e.dataTransfer) return;
+		// Get image files from drag and drop
+		const files = e.dataTransfer.items
+			? ([...e.dataTransfer.items]
+					.filter((item) => item.kind === 'file')
+					.map((item) => item.getAsFile()) as DroppedFiles)
+			: e.dataTransfer.files;
+		addFiles(filterFiles(files));
+	};
+
+	const dragStart = (e: Event) => {
+		e.preventDefault();
+		e.stopPropagation();
+		isDragging = true;
+	};
+
+	const dragStop = (e: Event) => {
+		e.preventDefault();
+		e.stopPropagation();
+		isDragging = false;
+	};
+
+	let filesClass = $derived(selectedFiles.length ? 'has-files' : 'no-files');
+	let enabledClass = $derived(disabled ? 'disabled' : '');
+	let draggingClass = $derived(isDragging ? 'isDragging' : '');
+	let filesSelectedText = $derived(
+		selectedFiles.length
+			? `${selectedFiles.length} file${selectedFiles.length > 1 ? 's' : ''} selected`
+			: ''
+	);
 </script>
 
 <div
@@ -63,19 +84,19 @@ $:
 	data-file-count={selectedFiles.length}
 >
 	<label
-		on:drop={dropFiles}
-		on:dragenter={dragStart}
-		on:dragstart={dragStart}
-		on:dragover={dragStart}
-		on:dragend={dragStop}
-		on:dragleave={dragStop}
-		on:dragexit={dragStop}
+		ondrop={dropFiles}
+		ondragenter={dragStart}
+		ondragstart={dragStart}
+		ondragover={dragStart}
+		ondragend={dragStop}
+		ondragleave={dragStop}
+		ondragexit={dragStop}
 	>
-		<input type="file" id="upload-button" accept="image/*" on:change={selectFiles} {disabled} />
+		<input type="file" id="upload-button" accept="image/*" onchange={selectFiles} {disabled} />
 		<div class="icon"><UploadIcon /></div>
 		<div class="text">
-			{#if $$slots.default}
-				<slot />
+			{#if children}
+				{@render children?.()}
 			{:else}
 				<span>Drop file or click to select</span>
 			{/if}
@@ -101,6 +122,11 @@ $:
   color: var(--form-input-fg, black);
   border-radius: 0.25rem;
   cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+.dropzone:hover:not(.disabled) {
+  border-color: var(--primary-500, #3b82f6);
+  background-color: var(--primary-50, rgba(59, 130, 246, 0.05));
 }
 .dropzone.disabled {
   opacity: 0.5;
@@ -109,6 +135,19 @@ $:
 .dropzone.isDragging {
   background-color: var(--form-input-selected-bg, #3182ce);
   color: var(--form-input-selected-fg, white);
+  border-color: var(--form-input-selected-bg, #3182ce);
+  border-style: solid;
+  transform: scale(1.02);
+  box-shadow: 0 4px 12px rgba(49, 130, 206, 0.3);
+  transition: all 0.2s ease-in-out;
+}
+.dropzone.isDragging .icon {
+  opacity: 1;
+  transform: scale(1.1);
+  transition: all 0.2s ease-in-out;
+}
+.dropzone.isDragging .text {
+  opacity: 1;
 }
 .dropzone label {
   display: flex;
@@ -123,6 +162,7 @@ $:
 .dropzone label .icon {
   width: 50%;
   opacity: 0.5;
+  transition: all 0.2s ease-in-out;
 }
 .dropzone label .text {
   font-size: 1rem;
@@ -130,6 +170,7 @@ $:
   margin-top: 1rem;
   opacity: 0.5;
   text-align: center;
+  transition: all 0.2s ease-in-out;
 }
 .dropzone label .file-count {
   display: block;

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

@@ -1,23 +1,13 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        selectedFiles?: (FileList | File[]) | undefined;
-        disabled?: boolean | undefined;
-        fileLimit?: number | undefined;
-        fileMimePattern?: string | RegExp | undefined;
-    };
-    events: {
-        filesSelected: CustomEvent<FileList | File[]>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from 'svelte';
+type DroppedFiles = FileList | File[];
+type $$ComponentProps = {
+    selectedFiles?: DroppedFiles;
+    disabled?: boolean;
+    fileLimit?: number;
+    fileMimePattern?: string | RegExp | undefined;
+    onFilesSelected?: ((files: FileList | File[]) => void) | undefined;
+    children?: Snippet;
 };
-export type FileAreaProps = typeof __propDef.props;
-export type FileAreaEvents = typeof __propDef.events;
-export type FileAreaSlots = typeof __propDef.slots;
-export default class FileArea extends SvelteComponent<FileAreaProps, FileAreaEvents, FileAreaSlots> {
-}
-export {};
+declare const FileArea: import("svelte").Component<$$ComponentProps, {}, "selectedFiles">;
+type FileArea = ReturnType<typeof FileArea>;
+export default FileArea;

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

@@ -1,21 +1,40 @@
-<script>import { uniqueId } from "../../helpers/unique-id.js";
-import FormField from "../form-field.svelte";
-import FormLabel from "../form-label.svelte";
-const id = uniqueId();
-export let value = "";
-export let placeholder = "";
-export let size = "full";
-export let disabled = false;
-export let required = false;
-export let readonly = false;
-export let multiple = false;
-export let mimeTypes = [];
-export let capture = void 0;
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { uniqueId } from '../../helpers/unique-id.js';
+	import FormField from '../form-field.svelte';
+	import FormLabel from '../form-label.svelte';
+	import type { FormFieldSizeOptions } from '../../types/form.js';
+
+	const id = uniqueId();
+
+	let {
+		value = $bindable(''),
+		placeholder = '',
+		size = 'full' as FormFieldSizeOptions,
+		disabled = false,
+		required = false,
+		readonly = false,
+		multiple = false,
+		mimeTypes = [],
+		capture = undefined as boolean | undefined | 'environment' | 'user',
+		label
+	}: {
+		value?: string;
+		placeholder?: string;
+		size?: FormFieldSizeOptions;
+		disabled?: boolean;
+		required?: boolean;
+		readonly?: boolean;
+		multiple?: boolean;
+		mimeTypes?: string[];
+		capture?: boolean | undefined | 'environment' | 'user';
+		label?: string;
+	} = $props();
 </script>
 
 <FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id} {required}><slot /></FormLabel>
+	{#if label}
+		<FormLabel {id} {required} {label} />
 	{/if}
 	<div>
 		<input
@@ -35,12 +54,12 @@ export let capture = void 0;
 
 <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;
+  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-base);
   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;

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

@@ -1,27 +1,16 @@
-import { SvelteComponent } from "svelte";
 import type { FormFieldSizeOptions } from '../../types/form.js';
-declare const __propDef: {
-    props: {
-        value?: string | undefined;
-        placeholder?: string | undefined;
-        size?: FormFieldSizeOptions | undefined;
-        disabled?: boolean | undefined;
-        required?: boolean | undefined;
-        readonly?: boolean | undefined;
-        multiple?: boolean | undefined;
-        mimeTypes?: string[] | undefined;
-        capture?: boolean | undefined | 'environment' | 'user';
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+type $$ComponentProps = {
+    value?: string;
+    placeholder?: string;
+    size?: FormFieldSizeOptions;
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    multiple?: boolean;
+    mimeTypes?: string[];
+    capture?: boolean | undefined | 'environment' | 'user';
+    label?: string;
 };
-export type FileBoxProps = typeof __propDef.props;
-export type FileBoxEvents = typeof __propDef.events;
-export type FileBoxSlots = typeof __propDef.slots;
-export default class FileBox extends SvelteComponent<FileBoxProps, FileBoxEvents, FileBoxSlots> {
-}
-export {};
+declare const FileBox: import("svelte").Component<$$ComponentProps, {}, "value">;
+type FileBox = ReturnType<typeof FileBox>;
+export default FileBox;

package/dist/forms/form-field.svelte

@@ -1,22 +1,25 @@
-<script>const maxWidthMap = {
-  sm: "10rem",
-  md: "20rem",
-  lg: "30rem",
-  xl: "auto",
-  full: "100%"
-};
-export let size = "full";
-$:
-  displayType = ["xl", "full"].includes(size) ? "block" : "inline-block";
-$:
-  maxWidth = maxWidthMap[size];
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ComponentSize } from '../types/size.js';
+	import { getMaxWidth, getDisplayType } from '../types/size.js';
+
+	let {
+		size = 'full',
+		children
+	}: {
+		size?: ComponentSize;
+		children: Snippet;
+	} = $props();
+
+	let displayType = $derived(getDisplayType(size));
+	let maxWidth = $derived(getMaxWidth(size));
 </script>
 
 <div style={`display: ${displayType}; width: 100%; min-width: 10rem; max-width: ${maxWidth}`}>
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>div {
-  margin-bottom: 1rem;
-  margin-right: 1rem;
+  margin-bottom: var(--spacing-base);
+  margin-right: var(--spacing-base);
 }</style>

package/dist/forms/form-field.svelte.d.ts

@@ -1,19 +1,9 @@
-import { SvelteComponent } from "svelte";
-import type { FormFieldSizeOptions } from '../types/form.js';
-declare const __propDef: {
-    props: {
-        size?: FormFieldSizeOptions | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from 'svelte';
+import type { ComponentSize } from '../types/size.js';
+type $$ComponentProps = {
+    size?: ComponentSize;
+    children: Snippet;
 };
-export type FormFieldProps = typeof __propDef.props;
-export type FormFieldEvents = typeof __propDef.events;
-export type FormFieldSlots = typeof __propDef.slots;
-export default class FormField extends SvelteComponent<FormFieldProps, FormFieldEvents, FormFieldSlots> {
-}
-export {};
+declare const FormField: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormField = ReturnType<typeof FormField>;
+export default FormField;