@streamscloud/kit 0.2.42 → 0.9.0

package/dist/ui/inputs/rich-text-input/tinymce-input.svelte

@@ -1,252 +0,0 @@
-<script lang="ts">import { AppTheme } from '../../../core/theme';
-import { DomHelper, HtmlHelper, Utils } from '../../../core/utils';
-import { HtmlBlock } from '../../html-block';
-import { RichTextInputLocalization } from './rich-text-input-localization';
-import { addValidatedLinkButton } from './validated-link-button';
-import { onDestroy, onMount } from 'svelte';
-let { value, options = undefined, debounce = 0, placeholder = undefined, disabled = false, borderless = false, autofocus = 'false', modelEvents = 'change input undo redo', rows = 0, conf = undefined, on } = $props();
-const id = `ti-${crypto.randomUUID()}`;
-const fixedToolbarId = `fixed-toolbar-${id}`;
-let element;
-let editorRef = $state.raw(null);
-let everFocused = false;
-let lastVal = $state.raw(undefined);
-let tinymce;
-$effect(() => {
-    if (editorRef && lastVal !== value) {
-        setEditorValue(editorRef, value ?? '');
-    }
-});
-$effect(() => {
-    if (editorRef) {
-        editorRef.mode.set(disabled ? 'readonly' : 'design');
-    }
-});
-onMount(async () => {
-    const loc = new RichTextInputLocalization();
-    on?.mounted?.({
-        insertEmoji: (emoji) => {
-            if (!everFocused && editorRef) {
-                editorRef.selection.select(editorRef.getBody(), true);
-                editorRef.selection.collapse(false);
-            }
-            return new Promise((resolve) => {
-                setTimeout(() => {
-                    editorRef?.execCommand('mceInsertContent', false, emoji);
-                    resolve(true);
-                });
-            });
-        }
-    });
-    if (debounce) {
-        applyChange = Utils.debounce(applyChange, debounce);
-    }
-    const { default: tmi } = await import('tinymce');
-    await Promise.all([
-        import('tinymce/themes/silver'),
-        AppTheme.isDarkMode ? import('tinymce/skins/ui/oxide-dark/skin.min.css') : import('tinymce/skins/ui/oxide/skin.min.css'),
-        import('tinymce/skins/ui/oxide/content.inline.min.css'),
-        import('tinymce/icons/default'),
-        import('tinymce/plugins/link'),
-        import('tinymce/plugins/lists'),
-        import('tinymce/plugins/paste'),
-        import('tinymce/plugins/advlist'),
-        import('tinymce/plugins/table')
-    ]);
-    tinymce = tmi;
-    await tinymce.init({
-        target: element,
-        inline: true,
-        skin: false,
-        fixed_toolbar_container: `#${options?.fixedToolbarId || fixedToolbarId}`,
-        menubar: false,
-        auto_focus: autofocus,
-        placeholder: placeholder,
-        readonly: disabled,
-        toolbar: 'undo redo | formatselect | fontselect fontsizeselect | bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist outdent indent | lineheight | table | validatedlink',
-        toolbar_persist: options?.persistToolbar,
-        plugins: ['lists', 'paste', 'advlist', 'table'],
-        advlist_bullet_styles: 'default,circle,square,disc',
-        advlist_number_styles: 'default,lower-alpha,lower-roman,upper-alpha,upper-roman',
-        lineheight_formats: '1 1.15 1.5 2 2.5 3',
-        font_formats: 'Arial=arial,helvetica,sans-serif; Comic Sans MS=comic sans ms,cursive; Courier New=courier new,courier,monospace; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,charcoal,sans-serif; Lucida Console=lucida console,monaco,monospace; Palatino Linotype=palatino linotype,book antiqua,palatino,serif; Tahoma=tahoma,geneva,sans-serif; Times New Roman=times new roman,times,serif; Trebuchet MS=trebuchet ms,sans-serif; Verdana=verdana,geneva,sans-serif',
-        fontsize_formats: '8px 10px 12px 14px 16px 18px 24px 36px 48px',
-        block_formats: 'Paragraph=p; Heading 1=h1; Heading 2=h2; Heading 3=h3; Heading 4=h4; Heading 5=h5; Heading 6=h6',
-        contextmenu: 'link',
-        paste_data_images: false,
-        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        paste_preprocess: (_, args) => {
-            if (!args.wordContent && !args.internal) {
-                const text = HtmlHelper.stripHtml(args.content);
-                const lines = text.split('\n');
-                args.content = '';
-                lines.forEach((line) => {
-                    if (!line) {
-                        line = '&nbsp;';
-                    }
-                    args.content += `<p>${line}</p>`;
-                });
-            }
-        },
-        ...conf,
-        setup: (editor) => {
-            editorRef = editor;
-            editor.on('init', () => {
-                if (rows) {
-                    editor.bodyElement.style.minHeight = DomHelper.calcHeightBasedOnRows(editor.bodyElement, rows);
-                }
-                editor.on(modelEvents, () => applyChange(editor));
-            });
-            editor.on('blur', () => {
-                HtmlHelper.clearSelection();
-                notifyFocused(false);
-            });
-            editor.on('focus', () => {
-                everFocused = true;
-                notifyFocused(true);
-            });
-            addValidatedLinkButton(editor, loc);
-            if (typeof conf?.setup === 'function') {
-                conf.setup(editor);
-            }
-        }
-    });
-});
-onDestroy(() => {
-    if (editorRef) {
-        tinymce.remove(editorRef);
-    }
-    editorRef = null;
-});
-const notifyFocused = (foc) => {
-    on?.focused?.(foc);
-};
-let applyChange = (editor) => {
-    lastVal = editor.getContent();
-    if (lastVal !== value) {
-        value = lastVal;
-    }
-    on?.change?.(lastVal);
-};
-const setEditorValue = (editor, val) => {
-    editor.setContent(val);
-    lastVal = val;
-};
-</script>
-
-<div class="tinymce-input" class:tinymce-input--disabled={disabled} class:tinymce-input--borderless={borderless}>
-  <span class="tinymce-input__toolbar" id={fixedToolbarId}></span>
-  <HtmlBlock>
-    <div class="tinymce-input__input" id={id} bind:this={element}></div>
-  </HtmlBlock>
-</div>
-
-<style>.tinymce-input {
-  --_tinymce-input--padding--block: var(--sc-kit--rich-text-input--padding--block, 0.5em);
-  --_tinymce-input--placeholder--color: var(--sc-kit--rich-text-input--placeholder--color, var(--_input--border-color));
-  --_--input--root--font-size: var(--sc-kit--rich-text-input--root--font-size);
-  --_--input--width: var(--sc-kit--rich-text-input--width);
-  --_--input--background: var(--sc-kit--rich-text-input--background);
-  --_--input--background--disabled: var(--sc-kit--rich-text-input--background--disabled);
-  --_--input--border-color: var(--sc-kit--rich-text-input--border-color);
-  --_--input--border-radius: var(--sc-kit--rich-text-input--border-radius);
-  --_--input--text--font-size: var(--sc-kit--rich-text-input--text--font-size);
-  --_--input--text--color: var(--sc-kit--rich-text-input--text--color);
-  --_--input--placeholder--color: var(--_tinymce-input--placeholder--color);
-  --_--input--accent-color: var(--sc-kit--rich-text-input--accent-color);
-  --_--input--padding--inline: var(--sc-kit--rich-text-input--padding--inline);
-  --_--input--padding--block: var(--_tinymce-input--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(#f2f2f3, #1e1e1e));
-  --_input--border-radius: var(--_--input--border-radius, 0.25em);
-  --_input--icon--size: var(--_--input--icon--size, 1em);
-  --_input--icon--color: var(--_--input--icon--color, light-dark(#d1d5db, #4b5563));
-  --_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, light-dark(#d1d5db, #4b5563));
-  --input--placeholder--color: var(--_--input--placeholder--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);
-}
-.tinymce-input:focus, .tinymce-input:focus-within {
-  --_input--default-shadow-color: var(--_input--accent-color);
-}
-.tinymce-input {
-  transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.tinymce-input--disabled {
-  background-color: var(--_input--background--disabled);
-  cursor: default;
-}
-.tinymce-input {
-  cursor: text;
-  min-height: 2em;
-  height: auto;
-  display: block;
-  position: relative;
-}
-.tinymce-input--borderless {
-  --_input--border-color: transparent;
-  --_input--background: transparent;
-  --_input--background--disabled: transparent;
-  --_input--accent-color: transparent;
-  --_input--explicit-shadow-color: transparent;
-}
-.tinymce-input :global(.tox-tinymce-inline .tox-editor-header) {
-  border-radius: 0.375em !important;
-  overflow: hidden;
-}
-.tinymce-input__input {
-  font-size: var(--_input--text--font-size);
-  color: var(--_input--text--color);
-}
-.tinymce-input__input::placeholder {
-  color: var(--_input--placeholder--color);
-}
-.tinymce-input__input:-webkit-autofill {
-  -webkit-text-fill-color: var(--_input--text--color) !important;
-}
-.tinymce-input__input {
-  min-height: 100%;
-  background: transparent;
-}
-.tinymce-input__input::before {
-  color: var(--_tinymce-input--placeholder--color) !important;
-}
-.tinymce-input__input:focus {
-  outline: none;
-}
-.tinymce-input__toolbar {
-  position: absolute;
-  left: 0;
-  bottom: 100%;
-}
-
-:global(.tox .tox-collection__item-label) {
-  white-space: nowrap;
-}</style>

package/dist/ui/inputs/rich-text-input/tinymce-input.svelte.d.ts

@@ -1,25 +0,0 @@
-import type { RichTextInputOptions } from './types';
-import type { RawEditorSettings } from 'tinymce';
-type Props = {
-    value: string | null | undefined;
-    options?: RichTextInputOptions;
-    debounce?: number;
-    placeholder?: string;
-    disabled?: boolean;
-    /** Remove border, background, and accent shadow */
-    borderless?: boolean;
-    autofocus?: true | string;
-    modelEvents?: string;
-    rows?: number;
-    conf?: RawEditorSettings;
-    on: {
-        change: (value: string) => void;
-        focused?: (focused: boolean) => void;
-        mounted?: (data: {
-            insertEmoji: (emoji: string) => void;
-        }) => void;
-    };
-};
-declare const TinymceInput: import("svelte").Component<Props, {}, "">;
-type TinymceInput = ReturnType<typeof TinymceInput>;
-export default TinymceInput;

package/dist/ui/inputs/rich-text-input/tinymce.declarations.d.ts

@@ -1,7 +0,0 @@
-declare module 'tinymce/themes/silver';
-declare module 'tinymce/icons/default';
-declare module 'tinymce/plugins/link';
-declare module 'tinymce/plugins/lists';
-declare module 'tinymce/plugins/paste';
-declare module 'tinymce/plugins/advlist';
-declare module 'tinymce/plugins/table';

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

@@ -1,35 +0,0 @@
-<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

@@ -1,54 +0,0 @@
-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 @default false */
-        submitOnEnter?: boolean;
-        /** Minimum visible rows @default 0 */
-        rows?: number;
-        /** @default 50000 */
-        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

@@ -1,249 +0,0 @@
-<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(#f2f2f3, #1e1e1e));
-  --_input--border-radius: var(--_--input--border-radius, 0.25em);
-  --_input--icon--size: var(--_--input--icon--size, 1em);
-  --_input--icon--color: var(--_--input--icon--color, light-dark(#d1d5db, #4b5563));
-  --_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, light-dark(#d1d5db, #4b5563));
-  --input--placeholder--color: var(--_--input--placeholder--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);
-}
-.textarea-input:focus, .textarea-input:focus-within {
-  --_input--default-shadow-color: var(--_input--accent-color);
-}
-.textarea-input {
-  transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.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;
-}
-.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

@@ -1,58 +0,0 @@
-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;
-    /** @default 50000 */
-    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;