intelliwaketssveltekitv25 1.0.80 → 1.0.82

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;

package/dist/TextArea.stories.js

@@ -0,0 +1,216 @@
+import TextArea from './TextArea.svelte';
+const meta = {
+    title: 'Components/TextArea',
+    component: TextArea,
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: 'text',
+            description: 'Current text value (two-way bindable)',
+            table: {
+                type: { summary: 'string | null' },
+                defaultValue: { summary: 'null' }
+            }
+        },
+        readonly: {
+            control: 'boolean',
+            description: 'Display as readonly (renders as DisplayHTML instead of textarea)',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' }
+            }
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable user interaction',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' }
+            }
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text shown when empty',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '""' }
+            }
+        },
+        propagateEnter: {
+            control: 'boolean',
+            description: 'Allow Enter key to propagate (useful in forms) - default: false',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' }
+            }
+        },
+        rows: {
+            control: 'number',
+            description: 'Initial number of rows (standard HTML attribute)',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: 'undefined' }
+            }
+        },
+        maxlength: {
+            control: 'number',
+            description: 'Maximum character length (standard HTML attribute)',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: 'undefined' }
+            }
+        },
+        required: {
+            control: 'boolean',
+            description: 'Mark field as required (standard HTML attribute)',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' }
+            }
+        },
+        class: {
+            control: 'text',
+            description: 'Additional CSS classes',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '""' }
+            }
+        }
+    }
+};
+export default meta;
+/**
+ * Default empty textarea with auto-grow enabled.
+ */
+export const Default = {
+    args: {
+        value: '',
+        placeholder: 'Enter your text here...'
+    }
+};
+/**
+ * Textarea with pre-populated value demonstrating auto-resize.
+ */
+export const WithValue = {
+    args: {
+        value: 'This is some initial text.\nIt automatically adjusts height as you type.\nTry adding more lines!'
+    }
+};
+/**
+ * Textarea with placeholder text.
+ */
+export const WithPlaceholder = {
+    args: {
+        value: '',
+        placeholder: 'Describe your project in detail...'
+    }
+};
+/**
+ * Readonly mode displays the text as formatted HTML with line breaks preserved.
+ * This is useful for displaying data that should not be edited.
+ */
+export const Readonly = {
+    args: {
+        value: 'This is readonly text.\nLine breaks are preserved.\nThe textarea is replaced with DisplayHTML component.',
+        readonly: true
+    }
+};
+/**
+ * Disabled state prevents user interaction but keeps textarea visible.
+ */
+export const Disabled = {
+    args: {
+        value: 'This textarea is disabled.',
+        disabled: true
+    }
+};
+/**
+ * Demonstrates auto-grow behavior with long text.
+ * The textarea automatically adjusts height to fit content without scrollbars.
+ */
+export const LongText = {
+    args: {
+        value: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+
+Duis aute irure dolor in reprehenderit in voluptate velit esse.
+Cillum dolore eu fugiat nulla pariatur excepteur sint occaecat.
+Cupidatat non proident sunt in culpa qui officia deserunt mollit.
+
+Add more lines to see the textarea grow automatically!
+Each line is preserved exactly as typed.
+No manual resizing needed - the component handles it for you.`
+    }
+};
+/**
+ * Character limit with maxlength attribute.
+ */
+export const WithMaxLength = {
+    args: {
+        value: '',
+        maxlength: 100,
+        placeholder: 'Maximum 100 characters allowed...'
+    }
+};
+/**
+ * Required field with validation styling.
+ */
+export const Required = {
+    args: {
+        value: '',
+        required: true,
+        placeholder: 'This field is required'
+    }
+};
+/**
+ * Custom styling with Tailwind classes.
+ */
+export const CustomStyling = {
+    args: {
+        value: 'Custom styled textarea',
+        class: 'border-2 border-primary-main rounded-lg p-4 bg-primary-light'
+    }
+};
+/**
+ * Textarea with propagateEnter enabled (Enter key will propagate to parent).
+ * By default, Enter key is stopped to prevent accidental form submissions.
+ */
+export const PropagateEnter = {
+    args: {
+        value: 'Try pressing Enter - it will propagate to the form',
+        propagateEnter: true,
+        placeholder: 'Enter key propagates to parent elements'
+    }
+};
+/**
+ * Form integration example showing how to use TextArea in a form.
+ * The textarea will submit with the form using the name attribute.
+ */
+export const FormIntegration = {
+    args: {
+        value: 'This is form data',
+        name: 'comment',
+        required: true,
+        placeholder: 'Enter your comment (required)'
+    }
+};
+/**
+ * Empty textarea showing placeholder.
+ */
+export const Empty = {
+    args: {
+        value: null,
+        placeholder: 'Start typing...'
+    }
+};
+/**
+ * Initial rows specification (standard HTML attribute).
+ * The textarea will start with this height and then auto-grow.
+ */
+export const WithInitialRows = {
+    args: {
+        value: 'This textarea starts with 10 rows',
+        rows: 10
+    }
+};

package/dist/TextArea.svelte

@@ -1,3 +1,29 @@
+<!--
+  @component
+  Auto-resizing textarea with automatic height adjustment and readonly display mode.
+  Replaces native <textarea> elements with auto-grow functionality.
+
+  @example
+  ```svelte
+  <script>
+    import { TextArea } from 'intelliwaketssveltekitv25';
+    let comment = $state('');
+  </script>
+
+  <TextArea bind:value={comment} placeholder="Enter your comment..." />
+  ```
+
+  @remarks
+  - Uses Svelte 5 $bindable rune for two-way binding of value
+  - Automatically adjusts height to fit content (auto-grow)
+  - Readonly mode displays as formatted HTML with line breaks preserved
+  - Prevents Enter key propagation by default (prevents accidental form submissions)
+  - Supports all standard HTML textarea attributes
+
+  @see DisplayHTML - Used for readonly display
+  @see InputNumber - For single-line numeric inputs
+-->
+
 <script lang="ts">
 
 	import type { HTMLTextareaAttributes } from 'svelte/elements'
@@ -6,12 +32,18 @@
 	import {autoGrow} from './Functions'
 
 	let {
+		/** Current text value (two-way bindable) */
 		value = $bindable(),
 		// thisRef = $bindable<HTMLTextAreaElement>(),
+		/** Display as readonly (renders as DisplayHTML instead of textarea) */
 		readonly,
+		/** Svelte actions array */
 		use = [],
+		/** Keyboard event handler */
 		onkeydown,
+		/** Allow Enter key to propagate (useful in forms) - default: false */
 		propagateEnter = false,
+		/** Standard HTML textarea attributes (placeholder, disabled, required, maxlength, rows, cols, name, class, etc.) */
 		...otherProps
 	}: Omit<
 		HTMLTextareaAttributes,

package/dist/TextArea.svelte.d.ts

@@ -6,6 +6,30 @@ type $$ComponentProps = Omit<HTMLTextareaAttributes, 'value' | 'this' | 'use'> &
     propagateEnter?: boolean;
     use?: ActionArray;
 };
+/**
+ * Auto-resizing textarea with automatic height adjustment and readonly display mode.
+ * Replaces native <textarea> elements with auto-grow functionality.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { TextArea } from 'intelliwaketssveltekitv25';
+ *   let comment = $state('');
+ * </script>
+ *
+ * <TextArea bind:value={comment} placeholder="Enter your comment..." />
+ * ```
+ *
+ * @remarks
+ * - Uses Svelte 5 $bindable rune for two-way binding of value
+ * - Automatically adjusts height to fit content (auto-grow)
+ * - Readonly mode displays as formatted HTML with line breaks preserved
+ * - Prevents Enter key propagation by default (prevents accidental form submissions)
+ * - Supports all standard HTML textarea attributes
+ *
+ * @see DisplayHTML - Used for readonly display
+ * @see InputNumber - For single-line numeric inputs
+ */
 declare const TextArea: import("svelte").Component<$$ComponentProps, {}, "value">;
 type TextArea = ReturnType<typeof TextArea>;
 export default TextArea;