@streamscloud/kit 0.2.1 → 0.2.3

package/dist/ui/inputs/textarea/cmp.textarea-validatable.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" generics="T extends Record<string, unknown>">import { Utils } from '../../../core/utils';
+import { FormValidationHandler } from '../../../core/validation';
+import { Validatable } from '../../validatable';
+import { default as Textarea } from './cmp.textarea.svelte';
+let { name, handler, placeholder = '', debounce = 0, hidePlaceholderOnFocus = true, submitOnEnter = false, rows = 0, maxlength = 50000, id = '', disabled = false, autofocus = false, on } = $props();
+const onChange = (value) => {
+    on?.change?.(value);
+    handler.updateValidateField(name, value);
+};
+const handleChangeDebounced = $derived(debounce ? Utils.debounce(onChange, debounce) : onChange);
+</script>
+
+<Validatable handler={handler} name={name}>
+  <Textarea
+    id={id}
+    autofocus={autofocus}
+    hidePlaceholderOnFocus={hidePlaceholderOnFocus}
+    submitOnEnter={submitOnEnter}
+    rows={rows}
+    maxlength={maxlength}
+    disabled={disabled}
+    placeholder={placeholder}
+    value={handler.formStringified[name]}
+    title={!!handler.touched[name] && !!handler.errors[name] ? handler.errors[name] : ''}
+    on={{
+      change: (e) => handleChangeDebounced(e),
+      submit: () => on?.submit?.(),
+      mounted: (e) => on?.mounted?.(e)
+    }} />
+</Validatable>
+
+<!--
+@component
+Textarea wrapped with form validation.
+-->

package/dist/ui/inputs/textarea/cmp.textarea-validatable.svelte.d.ts

@@ -0,0 +1,53 @@
+import { FormValidationHandler } from '../../../core/validation';
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: {
+        /** Field name in the form handler */
+        name: keyof T & string;
+        /** Form validation handler instance */
+        handler: FormValidationHandler<T>;
+        placeholder?: string;
+        /** Debounce delay in ms @default 0 */
+        debounce?: number;
+        /** Hide placeholder text when focused @default true */
+        hidePlaceholderOnFocus?: boolean;
+        /** Fire submit callback on Enter key */
+        submitOnEnter?: boolean;
+        /** Minimum visible rows @default 0 */
+        rows?: number;
+        maxlength?: number;
+        id?: string;
+        disabled?: boolean;
+        autofocus?: boolean;
+        on?: {
+            change?: (value: string) => void;
+            /** Fires on Enter when submitOnEnter is enabled */
+            submit?: () => void;
+            /** Fires after mount, provides the textarea element ref */
+            mounted?: (data: {
+                textarea: HTMLTextAreaElement;
+            }) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** Textarea wrapped with form validation. */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T extends Record<string, unknown>> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/inputs/textarea/cmp.textarea.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">import { DomHelper, HtmlHelper, Utils } from '../../../core/utils';
+import { InputEmojiPicker, inputEmojiPickerContainer } from '../input-emoji-picker';
+import { untrack } from 'svelte';
+let { value, placeholder = '', debounce = 0, hidePlaceholderOnFocus = true, submitOnEnter = false, singleLine = false, rows = 0, maxlength = 50000, id = '', disabled = false, autofocus = false, emoji = false, borderless = false, title = '', on } = $props();
+let textareaRef = $state(undefined);
+let placeholderInternal = $state(untrack(() => placeholder));
+const initTextarea = (node) => {
+    textareaRef = node;
+    if (rows) {
+        node.style.minHeight = DomHelper.calcHeightBasedOnRows(node, rows);
+    }
+    on?.mounted?.({ textarea: node });
+    autoHeightTextArea();
+    if (autofocus) {
+        node.focus();
+    }
+};
+const autoHeightTextArea = () => {
+    if (!textareaRef) {
+        return;
+    }
+    textareaRef.style.overflow = 'hidden';
+    textareaRef.style.height = 'auto';
+    textareaRef.style.height = textareaRef.scrollHeight + 'px';
+    textareaRef.style.overflow = '';
+};
+$effect(() => {
+    if (value !== undefined) {
+        autoHeightTextArea();
+    }
+});
+const onFocus = () => {
+    placeholderInternal = !hidePlaceholderOnFocus ? placeholder : '';
+};
+const onBlur = () => {
+    placeholderInternal = placeholder;
+};
+const sanitizeLineBreaks = (text) => text.replace(/[\r\n]+/g, ' ');
+const textChanged = () => {
+    if (textareaRef) {
+        on?.change?.(textareaRef.value);
+    }
+};
+const onBeforeInput = (event) => {
+    if (!singleLine || !textareaRef) {
+        return;
+    }
+    if (event.inputType === 'insertLineBreak' || event.inputType === 'insertParagraph') {
+        event.preventDefault();
+        return;
+    }
+    if (event.data && /[\r\n]/.test(event.data)) {
+        event.preventDefault();
+        const start = textareaRef.selectionStart;
+        const end = textareaRef.selectionEnd;
+        const clean = sanitizeLineBreaks(event.data);
+        textareaRef.setRangeText(clean, start, end, 'end');
+        textareaRef.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+};
+const onKeyDown = (event) => {
+    if (submitOnEnter && event.key === 'Enter' && !(event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)) {
+        event.preventDefault();
+        on?.submit?.();
+    }
+};
+const handleChangeDebounced = $derived(debounce ? Utils.debounce(textChanged, debounce) : textChanged);
+const onEmojiSelected = (emojiChar) => {
+    if (textareaRef) {
+        HtmlHelper.pasteIntoInput(emojiChar, textareaRef);
+    }
+};
+</script>
+
+<div
+  class="textarea-input"
+  class:textarea-input--disabled={disabled}
+  class:textarea-input--borderless={borderless}
+  class:textarea-input--has-emoji={emoji}
+  use:inputEmojiPickerContainer>
+  <textarea
+    use:initTextarea
+    disabled={disabled}
+    placeholder={placeholderInternal}
+    maxlength={maxlength}
+    class="textarea-input__textarea"
+    class:textarea-input--disabled={disabled}
+    rows="1"
+    id={id}
+    title={title}
+    oninput={(e) => {
+      autoHeightTextArea();
+      handleChangeDebounced(e);
+    }}
+    onbeforeinput={onBeforeInput}
+    onfocus={onFocus}
+    onblur={onBlur}
+    onkeydown={onKeyDown}>{singleLine && value ? sanitizeLineBreaks(value) : value}</textarea>
+  {#if emoji}
+    <InputEmojiPicker on={{ select: onEmojiSelected }} />
+  {/if}
+</div>
+
+<!--
+@component
+Auto-resizing textarea with optional emoji picker, single-line mode, and submit-on-enter.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--textarea--root--font-size` | Root font size for em scaling | `1rem` |
+| `--sc-kit--textarea--width` | Container width | `100%` |
+| `--sc-kit--textarea--min-height` | Minimum height | `none` |
+| `--sc-kit--textarea--max-height` | Maximum height | `none` |
+| `--sc-kit--textarea--padding--block` | Block (vertical) padding | `0.5em` |
+| `--sc-kit--textarea--padding--inline` | Inline (horizontal) padding | `0.5em` |
+| `--sc-kit--textarea--accent-color` | Focus accent color | light-dark primary-500/primary-400 |
+| `--sc-kit--textarea--background` | Background color | light-dark white/gray-900 |
+| `--sc-kit--textarea--background--disabled` | Disabled background | light-dark neutral-50/neutral-800 |
+| `--sc-kit--textarea--border-color` | Border color | light-dark neutral-300/neutral-600 |
+| `--sc-kit--textarea--border-radius` | Border radius | `0.25em` |
+| `--sc-kit--textarea--text--font-size` | Text font size | `0.875em` |
+| `--sc-kit--textarea--text--color` | Text color | light-dark gray-800/white |
+| `--sc-kit--textarea--text-align` | Text alignment | inherited |
+| `--sc-kit--textarea--placeholder--color` | Placeholder text color | inherited from border |
+-->
+
+<style>.textarea-input {
+  --_textarea--padding-block: var(--sc-kit--textarea--padding--block, 0.5em);
+  --_textarea--text-align: var(--sc-kit--textarea--text-align);
+  --_textarea--max-height: var(--sc-kit--textarea--max-height);
+  --_textarea--min-height: var(--sc-kit--textarea--min-height, none);
+  --_--input--root--font-size: var(--sc-kit--textarea--root--font-size);
+  --_--input--height: auto;
+  --_--input--width: var(--sc-kit--textarea--width);
+  --_--input--background: var(--sc-kit--textarea--background);
+  --_--input--background--disabled: var(--sc-kit--textarea--background--disabled);
+  --_--input--border-color: var(--sc-kit--textarea--border-color);
+  --_--input--border-radius: var(--sc-kit--textarea--border-radius);
+  --_--input--text--font-size: var(--sc-kit--textarea--text--font-size);
+  --_--input--text--color: var(--sc-kit--textarea--text--color);
+  --_--input--placeholder--color: var(--sc-kit--textarea--placeholder--color);
+  --_--input--accent-color: var(--sc-kit--textarea--accent-color);
+  --_--input--padding--inline: var(--sc-kit--textarea--padding--inline);
+  --_--input--padding--block: var(--_textarea--padding-block);
+  --_input--root--font-size: var(--_--input--root--font-size, 1rem);
+  --_input--height: var(--_--input--height, 2em);
+  --_input--width: var(--_--input--width, 100%);
+  --_input--background: var(--_--input--background, light-dark(#ffffff, #1c1c1c));
+  --_input--background--disabled: var(--_--input--background--disabled, light-dark(#f9fafb, #1f2937));
+  --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
+  --_input--border-radius: var(--_--input--border-radius, 0.25em);
+  --_input--icon--size: var(--_--input--icon--size, 1em);
+  --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
+  --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
+  --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
+  --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
+  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
+  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
+  --_input--padding--block: var(--_--input--padding--block, 0);
+  --_input--padding-top: var(--_--input--padding-top, var(--_input--padding--block));
+  --_input--padding-right: var(--_--input--padding-right, var(--_input--padding--inline));
+  --_input--padding-bottom: var(--_--input--padding-bottom, var(--_input--padding--block));
+  --_input--padding-left: var(--_--input--padding-left, var(--_input--padding--inline));
+  font-size: var(--_input--root--font-size);
+  height: var(--_input--height);
+  color: var(--_input--text--color);
+  border: 1px solid var(--_input--border-color);
+  border-radius: var(--_input--border-radius);
+  width: var(--_input--width);
+  min-width: var(--_input--width);
+  background: var(--_input--background);
+  padding-top: var(--_input--padding-top);
+  padding-right: var(--_input--padding-right);
+  padding-bottom: var(--_input--padding-bottom);
+  padding-left: var(--_input--padding-left);
+  --_input--default-shadow-color: transparent;
+  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
+  position: relative;
+  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
+  transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.textarea-input:focus, .textarea-input:focus-within {
+  --_input--default-shadow-color: var(--_input--accent-color);
+}
+.textarea-input--disabled {
+  background-color: var(--_input--background--disabled);
+  cursor: default;
+}
+.textarea-input {
+  position: relative;
+}
+.textarea-input--borderless {
+  --_input--border-color: transparent;
+  --_input--background: transparent;
+  --_input--background--disabled: transparent;
+  --_input--accent-color: transparent;
+  --_input--explicit-shadow-color: transparent;
+  --_input--height: auto;
+}
+.textarea-input--has-emoji {
+  --_--input--padding-right: 1.5em;
+}
+.textarea-input__textarea {
+  min-height: var(--_textarea--min-height);
+  height: auto;
+  max-height: var(--_textarea--max-height);
+  width: 100%;
+  resize: none;
+  text-align: var(--_textarea--text-align);
+  padding: 0;
+  background-color: transparent !important;
+  font-size: var(--_input--text--font-size);
+  color: var(--_input--text--color);
+}
+.textarea-input__textarea::placeholder {
+  color: var(--_input--placeholder--color);
+}
+.textarea-input__textarea:-webkit-autofill {
+  -webkit-text-fill-color: var(--_input--text--color) !important;
+}
+.textarea-input__textarea {
+  --_cross-browser-scrollbar--thumb-color: transparent;
+  --_cross-browser-scrollbar--track-color: transparent;
+}
+.textarea-input__textarea:hover {
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.textarea-input__textarea::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.textarea-input__textarea::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.textarea-input__textarea::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .textarea-input__textarea {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}</style>

package/dist/ui/inputs/textarea/cmp.textarea.svelte.d.ts

@@ -0,0 +1,57 @@
+type Props = {
+    value: string | null | undefined;
+    placeholder?: string;
+    /** Debounce delay in ms for change events @default 0 */
+    debounce?: number;
+    /** Hide placeholder text when textarea is focused @default true */
+    hidePlaceholderOnFocus?: boolean;
+    /** Fire submit callback on Enter key @default false */
+    submitOnEnter?: boolean;
+    /** Prevent line breaks, sanitize pasted text @default false */
+    singleLine?: boolean;
+    /** Minimum visible rows (0 = auto height) @default 0 */
+    rows?: number;
+    maxlength?: number;
+    id?: string;
+    disabled?: boolean;
+    autofocus?: boolean;
+    /** Show emoji picker trigger */
+    emoji?: boolean;
+    /** Remove border, background, and accent shadow */
+    borderless?: boolean;
+    title?: string;
+    on: {
+        change?: (value: string) => void;
+        /** Fires on Enter when submitOnEnter is enabled */
+        submit?: () => void;
+        /** Fires after mount, provides the textarea element ref */
+        mounted?: (data: {
+            textarea: HTMLTextAreaElement;
+        }) => void;
+    };
+};
+/**
+ * Auto-resizing textarea with optional emoji picker, single-line mode, and submit-on-enter.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--textarea--root--font-size` | Root font size for em scaling | `1rem` |
+ * | `--sc-kit--textarea--width` | Container width | `100%` |
+ * | `--sc-kit--textarea--min-height` | Minimum height | `none` |
+ * | `--sc-kit--textarea--max-height` | Maximum height | `none` |
+ * | `--sc-kit--textarea--padding--block` | Block (vertical) padding | `0.5em` |
+ * | `--sc-kit--textarea--padding--inline` | Inline (horizontal) padding | `0.5em` |
+ * | `--sc-kit--textarea--accent-color` | Focus accent color | light-dark primary-500/primary-400 |
+ * | `--sc-kit--textarea--background` | Background color | light-dark white/gray-900 |
+ * | `--sc-kit--textarea--background--disabled` | Disabled background | light-dark neutral-50/neutral-800 |
+ * | `--sc-kit--textarea--border-color` | Border color | light-dark neutral-300/neutral-600 |
+ * | `--sc-kit--textarea--border-radius` | Border radius | `0.25em` |
+ * | `--sc-kit--textarea--text--font-size` | Text font size | `0.875em` |
+ * | `--sc-kit--textarea--text--color` | Text color | light-dark gray-800/white |
+ * | `--sc-kit--textarea--text-align` | Text alignment | inherited |
+ * | `--sc-kit--textarea--placeholder--color` | Placeholder text color | inherited from border |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/inputs/textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Textarea } from './cmp.textarea.svelte';
+export { default as TextareaValidatable } from './cmp.textarea-validatable.svelte';

package/dist/ui/inputs/textarea/index.js

@@ -0,0 +1,2 @@
+export { default as Textarea } from './cmp.textarea.svelte';
+export { default as TextareaValidatable } from './cmp.textarea-validatable.svelte';

package/dist/ui/media-viewer-dialog/cmp.media-viewer-dialog.svelte.d.ts

@@ -1,7 +1,9 @@
 import { type DialogController } from '../dialog';
 import type { MediaViewerData } from './types';
 type Props = {
+    /** Dialog controller instance */
     controller: DialogController;
+    /** Media items and viewer configuration */
     data: MediaViewerData;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;