intelliwaketssveltekitv25 1.0.81 → 1.0.82

package/dist/MultiSelect.svelte

@@ -1,3 +1,43 @@
+<!--
+  @component
+  Type-safe, searchable multi-select dropdown with dynamic item creation and keyboard navigation.
+  Replaces native <select multiple> with advanced features.
+
+  @example
+  ```svelte
+  <script lang="ts">
+    import { MultiSelect } from 'intelliwaketssveltekitv25';
+
+    interface Tag {
+      id: number;
+      name: string;
+    }
+
+    const tags: Tag[] = [
+      { id: 1, name: 'JavaScript' },
+      { id: 2, name: 'TypeScript' }
+    ];
+
+    let selected = $state<Tag[]>([]);
+  </script>
+
+  <MultiSelect possibles={tags} bind:selected={selected} placeholder="Select tags..." />
+  ```
+
+  @remarks
+  - Uses TypeScript generics for type-safe selections: <T extends TGenericMultiSelect>
+  - Svelte 5 $bindable runes for two-way binding (selected, selectedIDs, created, existing)
+  - Keyboard navigation: Arrow keys, Enter, Backspace
+  - Searchable with automatic filtering
+  - Dynamic item creation with validation
+  - Supports single-select mode (isMulti=false)
+  - Custom display and ID functions for flexible data structures
+  - Grouping/headers support via headerValue function
+
+  @see DropDown - For single action/selection without search
+  @see DropDownControl - Lower-level dropdown control (used internally)
+-->
+
 <!--suppress JSDeprecatedSymbols -->
 <script lang='ts' generics="T extends TGenericMultiSelect">
 	import { DeepEqual, SearchRows } from '@solidbasisventures/intelliwaketsfoundation'
@@ -8,46 +48,87 @@
 	import { type ActionArray, useActions } from './useActions'
 
 	let {
+		/** HTML id attribute for the input element */
 		id = undefined,
+		/** Controls dropdown visibility (two-way bindable) */
 		show = $bindable(false),
+		/** Svelte actions array */
 		use = [],
+		/** Array of all available items to select from */
 		possibles,
+		/** Currently selected items (two-way bindable) */
 		selected = $bindable([]),
+		/** IDs of selected items (two-way bindable, alternative to selected) */
 		selectedIDs = $bindable(undefined),
+		/** Newly created items (two-way bindable, subset of selected that don't exist in possibles) */
 		created = $bindable([]),
+		/** Existing items (two-way bindable, subset of selected that exist in possibles) */
 		existing = $bindable([]),
+		/** Form input name for hidden inputs (enables form submission) */
 		name = null,
+		/** Placeholder text shown when no items selected */
 		placeholder = '',
+		/** Disable user interaction */
 		disabled = false,
+		/** Display in readonly mode (no interaction allowed) */
 		readonly = false,
+		/** Mark as required (shows invalid state if empty) */
 		required = false,
+		/** Mark as invalid (shows error styling) */
 		invalid = false,
+		/** Allow multiple selections (false = single-select mode) */
 		isMulti = true,
+		/** Show clear all button when items are selected */
 		allowClearAll = true,
+		/** Text prefix shown before new item name in create option */
 		createPrefix = 'Create:',
+		/** Function to create new items from search string (enables dynamic creation) */
 		create = undefined,
+		/** Validation function for new items (returns true or error message string) */
 		createValid = undefined,
+		/** Tab index for keyboard navigation */
 		tabindex = 0,
+		/** Function to extract display text from item */
 		displayValue = (item: T) => item.name ?? item.id ?? '',
+		/** Function to extract unique identifier from item */
 		idValue = (item: T) => item.id ?? displayValue(item),
+		/** Function to compute key for each statements (defaults to idValue) */
 		keyValue = (item: T) => idValue(item),
+		/** Function to compute value for hidden form inputs */
 		inputValue = (item: T) => idValue(item),
+		/** Function to extract header/group text from item (for grouping) */
 		headerValue = (item: T | null | undefined) => item?.header,
+		/** Match dropdown width to toggle button width */
 		sameSize = true,
+		/** Timestamp to trigger dropdown resize recalculation */
 		resizeTS = 1,
+		/** Auto-focus input on mount */
 		autoFocus = false,
+		/** Z-index for dropdown positioning */
 		zIndex = 50,
+		/** Additional CSS classes for dropdown body */
 		bodyClass = '',
+		/** Additional CSS classes for toggle button */
 		toggleClass = '',
+		/** Additional CSS classes for dropdown control wrapper */
 		controlClass = '',
+		/** Additional CSS classes for search input */
 		inputClass = '',
+		/** Parent div element reference (for focus management) */
 		parentDivElement = null,
+		/** Associate with a form by ID */
 		form = undefined,
+		/** Callback when item is added (passes item ID) */
 		onadd,
+		/** Callback when existing item is selected (passes item ID) */
 		onselect,
+		/** Callback when new item is created (passes item ID) */
 		oncreate,
+		/** Callback when selection changes (passes array of selected items) */
 		onchange,
+		/** Callback when item is cleared (passes item ID) */
 		onclear,
+		/** Callback when all items are cleared */
 		onclearall
 	}: {
 		id?: string

package/dist/MultiSelect.svelte.d.ts

@@ -64,6 +64,44 @@ interface $$IsomorphicComponent {
     <T extends TGenericMultiSelect>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
+/**
+ * Type-safe, searchable multi-select dropdown with dynamic item creation and keyboard navigation.
+ * Replaces native <select multiple> with advanced features.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { MultiSelect } from 'intelliwaketssveltekitv25';
+ *
+ *   interface Tag {
+ *     id: number;
+ *     name: string;
+ *   }
+ *
+ *   const tags: Tag[] = [
+ *     { id: 1, name: 'JavaScript' },
+ *     { id: 2, name: 'TypeScript' }
+ *   ];
+ *
+ *   let selected = $state<Tag[]>([]);
+ * </script>
+ *
+ * <MultiSelect possibles={tags} bind:selected={selected} placeholder="Select tags..." />
+ * ```
+ *
+ * @remarks
+ * - Uses TypeScript generics for type-safe selections: <T extends TGenericMultiSelect>
+ * - Svelte 5 $bindable runes for two-way binding (selected, selectedIDs, created, existing)
+ * - Keyboard navigation: Arrow keys, Enter, Backspace
+ * - Searchable with automatic filtering
+ * - Dynamic item creation with validation
+ * - Supports single-select mode (isMulti=false)
+ * - Custom display and ID functions for flexible data structures
+ * - Grouping/headers support via headerValue function
+ *
+ * @see DropDown - For single action/selection without search
+ * @see DropDownControl - Lower-level dropdown control (used internally)
+ */
 declare const MultiSelect: $$IsomorphicComponent;
 type MultiSelect<T extends TGenericMultiSelect> = InstanceType<typeof MultiSelect<T>>;
 export default MultiSelect;

package/dist/Switch.stories.d.ts

@@ -0,0 +1,81 @@
+import type { StoryObj } from '@storybook/svelte';
+type SwitchProps = {
+    checked?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    name?: string;
+    value?: unknown;
+    offValue?: unknown;
+    displayCheckInverse?: boolean;
+    hidden?: boolean;
+    class?: string;
+};
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<{
+        id?: string | undefined;
+        use?: import("./useActions").ActionArray;
+        checked?: boolean;
+        disabled?: boolean;
+        readonly?: boolean;
+        name?: string | undefined;
+        form?: string | undefined;
+        value?: unknown | undefined;
+        offValue?: unknown | undefined;
+        hidden?: boolean;
+        displayCheckInverse?: boolean;
+        class?: string;
+        oncheck?: (val: boolean) => void;
+        children?: import("svelte").Snippet;
+    }, {}, "checked">;
+    tags: string[];
+    argTypes: {
+        checked: {
+            control: "boolean";
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        readonly: {
+            control: "boolean";
+            description: string;
+        };
+        name: {
+            control: "text";
+            description: string;
+        };
+        value: {
+            control: "text";
+            description: string;
+        };
+        offValue: {
+            control: "text";
+            description: string;
+        };
+        displayCheckInverse: {
+            control: "boolean";
+            description: string;
+        };
+        hidden: {
+            control: "boolean";
+            description: string;
+        };
+        class: {
+            control: "text";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<SwitchProps>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const Readonly: Story;
+export declare const WithFormName: Story;
+export declare const WithCustomValues: Story;
+export declare const DisplayInverse: Story;
+export declare const DisplayInverseChecked: Story;

package/dist/Switch.stories.js

@@ -0,0 +1,99 @@
+import Switch from './Switch.svelte';
+const meta = {
+    title: 'Components/Switch',
+    component: Switch,
+    tags: ['autodocs'],
+    argTypes: {
+        checked: {
+            control: 'boolean',
+            description: 'Current checked state (two-way bindable)'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disables user interaction'
+        },
+        readonly: {
+            control: 'boolean',
+            description: 'Visual display only, no interaction'
+        },
+        name: {
+            control: 'text',
+            description: 'Form field name for submissions'
+        },
+        value: {
+            control: 'text',
+            description: 'Value to submit when checked'
+        },
+        offValue: {
+            control: 'text',
+            description: 'Value to submit when unchecked'
+        },
+        displayCheckInverse: {
+            control: 'boolean',
+            description: 'Invert visual display (useful for "disabled" semantics)'
+        },
+        hidden: {
+            control: 'boolean',
+            description: 'Hide the component'
+        },
+        class: {
+            control: 'text',
+            description: 'Additional CSS classes'
+        }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        checked: false
+    }
+};
+export const Checked = {
+    args: {
+        checked: true
+    }
+};
+export const Disabled = {
+    args: {
+        checked: false,
+        disabled: true
+    }
+};
+export const DisabledChecked = {
+    args: {
+        checked: true,
+        disabled: true
+    }
+};
+export const Readonly = {
+    args: {
+        checked: true,
+        readonly: true
+    }
+};
+export const WithFormName = {
+    args: {
+        checked: true,
+        name: 'agreeToTerms'
+    }
+};
+export const WithCustomValues = {
+    args: {
+        checked: true,
+        name: 'subscription',
+        value: 'premium',
+        offValue: 'free'
+    }
+};
+export const DisplayInverse = {
+    args: {
+        checked: false,
+        displayCheckInverse: true
+    }
+};
+export const DisplayInverseChecked = {
+    args: {
+        checked: true,
+        displayCheckInverse: true
+    }
+};

package/dist/Switch.svelte

@@ -1,3 +1,31 @@
+<!--
+  @component
+  Custom styled toggle switch with smooth animations and accessibility features.
+  Replaces native <input type="checkbox"> for boolean on/off controls.
+
+  @example
+  ```svelte
+  <script>
+    import { Switch } from 'intelliwaketssveltekitv25';
+    let enabled = $state(false);
+  </script>
+
+  <Switch bind:checked={enabled}>
+    Enable Notifications
+  </Switch>
+  ```
+
+  @remarks
+  - Uses Svelte 5 $bindable rune for two-way binding of checked state
+  - Supports keyboard interaction (Space key to toggle)
+  - Includes visual inversion option via displayCheckInverse
+  - Dispatches change and input events for form integration
+  - Print-friendly with fallback to checkmark/square symbols
+
+  @see CheckBox - For custom checkbox styling (not toggle appearance)
+  @see SwitchDateNull - Toggle that sets/clears a date value
+-->
+
 <script lang='ts'>
 	import { type Snippet, tick } from 'svelte'
 	import { type ActionArray, useActions } from './useActions'
@@ -5,18 +33,30 @@
 	let {
 		id = undefined,
 		use = [],
+		/** Current checked state (two-way bindable) */
 		checked = $bindable(false),
+		/** Disable user interaction */
 		disabled = false,
+		/** Visual display only, no interaction */
 		readonly = false,
+		/** Form field name for submissions */
 		name = undefined,
+		/** Associate with a specific form by ID */
 		form = undefined,
+		/** Value to submit when checked */
 		value = undefined,
+		/** Value to submit when unchecked (internal default) */
 		offValue = 'ZZZnoneZZZ',
+		/** Hide the component */
 		hidden = false,
+		/** Invert visual display (useful for "disabled" semantics) */
 		displayCheckInverse = false,
+		/** Additional CSS classes */
 		class: clazz = '',
+		/** Callback fired when checked state changes */
 		oncheck = () => {
 		},
+		/** Label content displayed next to switch */
 		children
 	}: {
 		id?: string | undefined

package/dist/Switch.svelte.d.ts

@@ -16,6 +16,32 @@ type $$ComponentProps = {
     oncheck?: (val: boolean) => void;
     children?: Snippet;
 };
+/**
+ * Custom styled toggle switch with smooth animations and accessibility features.
+ * Replaces native <input type="checkbox"> for boolean on/off controls.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Switch } from 'intelliwaketssveltekitv25';
+ *   let enabled = $state(false);
+ * </script>
+ *
+ * <Switch bind:checked={enabled}>
+ *   Enable Notifications
+ * </Switch>
+ * ```
+ *
+ * @remarks
+ * - Uses Svelte 5 $bindable rune for two-way binding of checked state
+ * - Supports keyboard interaction (Space key to toggle)
+ * - Includes visual inversion option via displayCheckInverse
+ * - Dispatches change and input events for form integration
+ * - Print-friendly with fallback to checkmark/square symbols
+ *
+ * @see CheckBox - For custom checkbox styling (not toggle appearance)
+ * @see SwitchDateNull - Toggle that sets/clears a date value
+ */
 declare const Switch: import("svelte").Component<$$ComponentProps, {}, "checked">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/TextArea.stories.d.ts

@@ -0,0 +1,180 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<Omit<import("svelte/elements").HTMLTextareaAttributes, "value" | "use" | "this"> & {
+        value: string | null;
+        onkeydown?: (e: KeyboardEvent) => void;
+        propagateEnter?: boolean;
+        use?: import("./useActions").ActionArray;
+    }, {}, "value">;
+    tags: string[];
+    argTypes: {
+        value: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        readonly: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        placeholder: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        propagateEnter: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        rows: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        maxlength: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        required: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        class: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Default empty textarea with auto-grow enabled.
+ */
+export declare const Default: Story;
+/**
+ * Textarea with pre-populated value demonstrating auto-resize.
+ */
+export declare const WithValue: Story;
+/**
+ * Textarea with placeholder text.
+ */
+export declare const WithPlaceholder: Story;
+/**
+ * Readonly mode displays the text as formatted HTML with line breaks preserved.
+ * This is useful for displaying data that should not be edited.
+ */
+export declare const Readonly: Story;
+/**
+ * Disabled state prevents user interaction but keeps textarea visible.
+ */
+export declare const Disabled: Story;
+/**
+ * Demonstrates auto-grow behavior with long text.
+ * The textarea automatically adjusts height to fit content without scrollbars.
+ */
+export declare const LongText: Story;
+/**
+ * Character limit with maxlength attribute.
+ */
+export declare const WithMaxLength: Story;
+/**
+ * Required field with validation styling.
+ */
+export declare const Required: Story;
+/**
+ * Custom styling with Tailwind classes.
+ */
+export declare const CustomStyling: Story;
+/**
+ * Textarea with propagateEnter enabled (Enter key will propagate to parent).
+ * By default, Enter key is stopped to prevent accidental form submissions.
+ */
+export declare const PropagateEnter: Story;
+/**
+ * Form integration example showing how to use TextArea in a form.
+ * The textarea will submit with the form using the name attribute.
+ */
+export declare const FormIntegration: Story;
+/**
+ * Empty textarea showing placeholder.
+ */
+export declare const Empty: Story;
+/**
+ * Initial rows specification (standard HTML attribute).
+ * The textarea will start with this height and then auto-grow.
+ */
+export declare const WithInitialRows: Story;