sveltacular 0.0.76 → 1.0.0

package/dist/forms/button/button.svelte.d.ts

@@ -1,30 +1,26 @@
-import { SvelteComponent } from "svelte";
-import type { ButtonStyle, FormFieldSizeOptions } from '../../types/form.js';
-declare const __propDef: {
-    props: {
-        href?: string | undefined;
-        size?: FormFieldSizeOptions | undefined;
-        style?: ButtonStyle | undefined;
-        type?: "button" | "submit" | "reset" | undefined;
-        block?: boolean | undefined;
-        flex?: boolean | undefined;
-        disabled?: boolean | undefined;
-        noMargin?: boolean | undefined;
-        collapse?: boolean | undefined;
-        repeatSubmitDelay?: number | "infinite" | undefined;
-    };
-    events: {
-        click: CustomEvent<void>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+/**
+     * Button component with multiple variants and sizes
+     * @component
+     */
+import type { Snippet } from 'svelte';
+import type { ButtonVariant, FormFieldSizeOptions } from '../../types/form.js';
+type $$ComponentProps = {
+    label?: string;
+    href?: string | undefined;
+    size?: FormFieldSizeOptions;
+    variant?: ButtonVariant;
+    type?: 'button' | 'submit' | 'reset';
+    block?: boolean;
+    flex?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    ariaLabel?: string | undefined;
+    noMargin?: boolean;
+    collapse?: boolean;
+    repeatSubmitDelay?: number | 'infinite';
+    onClick?: ((e?: Event) => void) | undefined;
+    children?: Snippet;
 };
-export type ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
-export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
-}
-export {};
+declare const Button: import("svelte").Component<$$ComponentProps, {}, "disabled">;
+type Button = ReturnType<typeof Button>;
+export default Button;

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

@@ -1,37 +1,71 @@
-<script>import FormField from "../form-field.svelte";
-import FormLabel from "../form-label.svelte";
-import CheckBox from "./check-box.svelte";
-import { uniqueId } from "../../helpers/unique-id.js";
-import { createEventDispatcher } from "svelte";
-const id = uniqueId();
-const dispatch = createEventDispatcher();
-export let group = [];
-export let items = [];
-export let size = "full";
-export let disabled = false;
-export let required = false;
-const onChecked = () => {
-  const newGroup = [];
-  items.forEach((item) => {
-    if (item.isChecked) {
-      newGroup.push(item.value);
-    }
-  });
-  group = newGroup;
-  dispatch("change", { selected: group });
-};
-onChecked();
+<script lang="ts">
+	import type { DropdownOption, FormFieldSizeOptions } from '../../types/form.js';
+	import FormField from '../form-field.svelte';
+	import FormLabel from '../form-label.svelte';
+	import CheckBox from './check-box.svelte';
+	import { uniqueId } from '../../helpers/unique-id.js';
+
+	const id = uniqueId();
+
+	let {
+		group = $bindable([] as string[]),
+		items = [],
+		size = 'full' as FormFieldSizeOptions,
+		disabled = false,
+		required = false,
+		onChange,
+		label
+	}: {
+		group?: string[];
+		items?: DropdownOption[];
+		size?: FormFieldSizeOptions;
+		disabled?: boolean;
+		required?: boolean;
+		onChange?: ((selected: string[]) => void) | undefined;
+		label?: string;
+	} = $props();
+
+	// Create reactive items with checked state, synced with group
+	let itemsWithState = $state<Array<DropdownOption & { isChecked: boolean }>>([]);
+
+	// Sync itemsWithState when items or group changes (one-way: items/group -> itemsWithState)
+	// Reassign the entire array to avoid reading itemsWithState in the effect
+	$effect(() => {
+		// Rebuild itemsWithState from items, using group to determine checked state
+		// Reassign instead of mutate to avoid circular dependency
+		const newItems = items.map((item) => ({
+			...item,
+			isChecked: group.includes(item.value ?? '')
+		}));
+		itemsWithState = newItems;
+	});
+
+	const handleCheckboxChange = (data: { isChecked: boolean; value: string }) => {
+		// Update group based on checkbox change (this will trigger the effect to sync itemsWithState)
+		if (data.isChecked) {
+			if (!group.includes(data.value)) {
+				group = [...group, data.value];
+			}
+		} else {
+			group = group.filter((v) => v !== data.value);
+		}
+		onChange?.(group);
+	};
 </script>
 
 <FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id} {required}><slot /></FormLabel>
+	{#if label}
+		<FormLabel {id} {required} {label} />
 	{/if}
 	<div>
-		{#each items as item}
-			<CheckBox {disabled} value={item.value} bind:isChecked={item.isChecked} on:change={onChecked}
-				>{item.name}</CheckBox
-			>
+		{#each itemsWithState as item}
+			<CheckBox
+				{disabled}
+				value={item.value ?? undefined}
+				bind:isChecked={item.isChecked}
+				onChange={handleCheckboxChange}
+				label={item.name}
+			/>
 		{/each}
 	</div>
 </FormField>

package/dist/forms/check-box/check-box-group.svelte.d.ts

@@ -1,29 +1,13 @@
-import { SvelteComponent } from "svelte";
 import type { DropdownOption, FormFieldSizeOptions } from '../../types/form.js';
-declare const __propDef: {
-    props: {
-        group?: string[] | undefined;
-        items?: (DropdownOption & {
-            isChecked?: true | undefined;
-        })[] | undefined;
-        size?: FormFieldSizeOptions | undefined;
-        disabled?: boolean | undefined;
-        required?: boolean | undefined;
-    };
-    events: {
-        change: CustomEvent<{
-            selected: string[];
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+type $$ComponentProps = {
+    group?: string[];
+    items?: DropdownOption[];
+    size?: FormFieldSizeOptions;
+    disabled?: boolean;
+    required?: boolean;
+    onChange?: ((selected: string[]) => void) | undefined;
+    label?: string;
 };
-export type CheckBoxGroupProps = typeof __propDef.props;
-export type CheckBoxGroupEvents = typeof __propDef.events;
-export type CheckBoxGroupSlots = typeof __propDef.slots;
-export default class CheckBoxGroup extends SvelteComponent<CheckBoxGroupProps, CheckBoxGroupEvents, CheckBoxGroupSlots> {
-}
-export {};
+declare const CheckBoxGroup: import("svelte").Component<$$ComponentProps, {}, "group">;
+type CheckBoxGroup = ReturnType<typeof CheckBoxGroup>;
+export default CheckBoxGroup;

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

@@ -1,17 +1,36 @@
-<script>import { uniqueId } from "../../helpers/unique-id.js";
-import CheckIcon from "../../icons/check-icon.svelte";
-import { createEventDispatcher } from "svelte";
-export let value = "";
-export let isChecked = false;
-export let disabled = false;
-export let name = void 0;
-const id = uniqueId();
-const dispatch = createEventDispatcher();
-const onChecked = (event) => {
-  const target = event.target;
-  isChecked = target.checked;
-  dispatch("change", { isChecked, value });
-};
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { uniqueId } from '../../helpers/unique-id.js';
+	import CheckIcon from '../../icons/check-icon.svelte';
+
+	let {
+		value = '',
+		isChecked = $bindable(false),
+		disabled = false,
+		name = undefined,
+		onChange = undefined,
+		label,
+		children
+	}: {
+		value?: string;
+		isChecked?: boolean;
+		disabled?: boolean;
+		name?: string | undefined;
+		onChange?: ((data: { isChecked: boolean; value: string }) => void) | undefined;
+		label?: string;
+		children?: Snippet;
+	} = $props();
+
+	const id = uniqueId();
+
+	const onChecked = (event: Event) => {
+		const target = event.target as HTMLInputElement;
+		const newChecked = target.checked;
+		// Update isChecked (will work whether bound or not)
+		isChecked = newChecked;
+		// Always notify parent via onChange callback
+		onChange?.({ isChecked: newChecked, value });
+	};
 </script>
 
 <label>
@@ -20,16 +39,20 @@ const onChecked = (event) => {
 		{id}
 		{disabled}
 		{name}
-		bind:value
+		{value}
 		bind:checked={isChecked}
-		on:change={onChecked}
+		onchange={onChecked}
 	/>
 	<span class="checkbox">
 		<span class="checkmark"><CheckIcon /></span>
 	</span>
-	{#if $$slots.default}
+	{#if children}
+		<div class="text">
+			{@render children()}
+		</div>
+	{:else if label}
 		<div class="text">
-			<slot />
+			{label}
 		</div>
 	{/if}
 </label>
@@ -42,19 +65,19 @@ const onChecked = (event) => {
 }
 label .text {
   display: block;
-  margin-left: 0.5em;
-  font-size: 1rem;
+  margin-left: var(--spacing-sm);
+  font-size: var(--font-md);
   line-height: 2rem;
 }
 label .checkbox {
   position: relative;
   display: block;
-  width: 1rem;
-  height: 1rem;
-  border: 1px solid var(--form-input-border, black);
-  background-color: var(--form-input-bg, white);
-  color: var(--form-input-fg, black);
-  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;
+  width: var(--spacing-base);
+  height: var(--spacing-base);
+  border: var(--border-thin) solid var(--form-input-border);
+  background-color: var(--form-input-bg);
+  color: var(--form-input-fg);
+  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;
 }
 label .checkbox .checkmark {
@@ -64,19 +87,20 @@ label .checkbox .checkmark {
   left: 0;
   width: 0;
   height: 0;
-  background-color: var(--form-input-selected-bg, #3182ce);
-  color: var(--form-input-selected-fg, white);
-  fill: var(--form-input-selected-bg, #3182ce);
-  stroke: var(--form-input-selected-fg, white);
-  transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
+  line-height: 100%;
+  background-color: var(--form-input-selected-bg);
+  color: var(--form-input-selected-fg);
+  fill: var(--form-input-selected-bg);
+  stroke: var(--form-input-selected-fg);
+  transition: width var(--transition-base) var(--ease-in-out), height var(--transition-base) var(--ease-in-out);
 }
 label input {
   width: 0;
   height: 0;
 }
 label input:checked + .checkbox {
-  background-color: var(--form-input-bg, white);
-  border-color: var(--form-input-border, black);
+  background-color: var(--form-input-bg);
+  border-color: var(--form-input-border);
 }
 label input:checked + .checkbox .checkmark {
   width: 100%;

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

@@ -1,26 +1,16 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        value?: string | undefined;
-        isChecked?: boolean | undefined;
-        disabled?: boolean | undefined;
-        name?: string | undefined;
-    };
-    events: {
-        change: CustomEvent<{
-            isChecked: boolean;
-            value: string;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    value?: string;
+    isChecked?: boolean;
+    disabled?: boolean;
+    name?: string | undefined;
+    onChange?: ((data: {
+        isChecked: boolean;
+        value: string;
+    }) => void) | undefined;
+    label?: string;
+    children?: Snippet;
 };
-export type CheckBoxProps = typeof __propDef.props;
-export type CheckBoxEvents = typeof __propDef.events;
-export type CheckBoxSlots = typeof __propDef.slots;
-export default class CheckBox extends SvelteComponent<CheckBoxProps, CheckBoxEvents, CheckBoxSlots> {
-}
-export {};
+declare const CheckBox: import("svelte").Component<$$ComponentProps, {}, "isChecked">;
+type CheckBox = ReturnType<typeof CheckBox>;
+export default CheckBox;

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

@@ -0,0 +1,2 @@
+export { default as CheckBox } from './check-box.svelte';
+export { default as CheckBoxGroup } from './check-box-group.svelte';

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

@@ -0,0 +1,2 @@
+export { default as CheckBox } from './check-box.svelte';
+export { default as CheckBoxGroup } from './check-box-group.svelte';

package/dist/forms/combo/new-or-existing-combo.svelte

@@ -1,21 +1,40 @@
-<script>import {
-  FlexRow,
-  ListBox,
-  RadioBox,
-  TextBox
-} from "../../index.js";
-import FlexCol from "../../layout/flex-col.svelte";
-export let mode = "existing";
-export let newValue = "";
-export let existingValue = "";
-export let items = [];
-export let size = "full";
-export let disabled = false;
-export let required = false;
-export let searchable = false;
-export let search = void 0;
-export let searchPlaceholder = "Search";
-export let newPlaceholder = "New";
+<script lang="ts">
+	import {
+		FlexRow,
+		ListBox,
+		RadioBox,
+		type DropdownOption,
+		type FormFieldSizeOptions,
+		TextBox
+	} from '../../index.js';
+	import FlexCol from '../../layout/flex-col.svelte';
+	import type { SearchFunction } from '../list-box/list-box.js';
+
+	let {
+		mode = $bindable('existing' as 'new' | 'existing'),
+		newValue = $bindable('' as string | null),
+		existingValue = $bindable('' as string | null),
+		items = [] as DropdownOption[],
+		size = 'full' as FormFieldSizeOptions,
+		disabled = false,
+		required = false,
+		searchable = false,
+		search = undefined as SearchFunction | undefined,
+		searchPlaceholder = 'Search',
+		newPlaceholder = 'New'
+	}: {
+		mode?: 'new' | 'existing';
+		newValue?: string | null;
+		existingValue?: string | null;
+		items?: DropdownOption[];
+		size?: FormFieldSizeOptions;
+		disabled?: boolean;
+		required?: boolean;
+		searchable?: boolean;
+		search?: SearchFunction | undefined;
+		searchPlaceholder?: string;
+		newPlaceholder?: string;
+	} = $props();
 </script>
 
 <div class="group">

package/dist/forms/combo/new-or-existing-combo.svelte.d.ts

@@ -1,28 +1,18 @@
-import { SvelteComponent } from "svelte";
 import { type DropdownOption, type FormFieldSizeOptions } from '../../index.js';
 import type { SearchFunction } from '../list-box/list-box.js';
-declare const __propDef: {
-    props: {
-        mode?: "new" | "existing" | undefined;
-        newValue?: string | null | undefined;
-        existingValue?: string | null | undefined;
-        items?: DropdownOption[] | undefined;
-        size?: FormFieldSizeOptions | undefined;
-        disabled?: boolean | undefined;
-        required?: boolean | undefined;
-        searchable?: boolean | undefined;
-        search?: SearchFunction | undefined;
-        searchPlaceholder?: string | undefined;
-        newPlaceholder?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    mode?: 'new' | 'existing';
+    newValue?: string | null;
+    existingValue?: string | null;
+    items?: DropdownOption[];
+    size?: FormFieldSizeOptions;
+    disabled?: boolean;
+    required?: boolean;
+    searchable?: boolean;
+    search?: SearchFunction | undefined;
+    searchPlaceholder?: string;
+    newPlaceholder?: string;
 };
-export type NewOrExistingComboProps = typeof __propDef.props;
-export type NewOrExistingComboEvents = typeof __propDef.events;
-export type NewOrExistingComboSlots = typeof __propDef.slots;
-export default class NewOrExistingCombo extends SvelteComponent<NewOrExistingComboProps, NewOrExistingComboEvents, NewOrExistingComboSlots> {
-}
-export {};
+declare const NewOrExistingCombo: import("svelte").Component<$$ComponentProps, {}, "mode" | "newValue" | "existingValue">;
+type NewOrExistingCombo = ReturnType<typeof NewOrExistingCombo>;
+export default NewOrExistingCombo;