@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/inputs/numeral-input/cmp.numeral-input.svelte

@@ -1,254 +0,0 @@
-<script lang="ts">import { Icon } from '../../icon';
-import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
-import { formatNumeral, NumeralThousandGroupStyles, registerCursorTracker } from 'cleave-zen';
-let { value, name = '', id = null, placeholder = '', disabled = false, inert = false, autofocus = false, clearable = false, borderless = false, title = '', min = null, max = null, numeralDecimalScale = 2, on, icon, clearButton } = $props();
-let inputRef = $state(undefined);
-const formatNumeralOptions = $derived({
-    delimiter: ' ',
-    numeralDecimalScale,
-    numeralThousandsGroupStyle: NumeralThousandGroupStyles.THOUSAND,
-    numeralIntegerScale: 14
-});
-const valueParsed = $derived(formatNumeral(value?.toString() ?? '', formatNumeralOptions));
-const initInput = (node) => {
-    inputRef = node;
-    if (autofocus) {
-        node.focus();
-    }
-    registerCursorTracker({ input: node, delimiter: formatNumeralOptions.delimiter, delimiters: [] });
-    on?.mounted?.({ input: node });
-};
-const clearButtonVisible = $derived(!disabled && clearable && !!value);
-const getNumericValue = () => {
-    if (!inputRef) {
-        return 0;
-    }
-    try {
-        let valueFormatted = formatNumeral(inputRef.value.replace(/,/, '.'), formatNumeralOptions);
-        if (!valueFormatted) {
-            valueFormatted = '0';
-        }
-        let numericValue = parseFloat(valueFormatted.replace(/\s/g, ''));
-        if (min !== null && numericValue < Number(min)) {
-            numericValue = Number(min);
-            valueFormatted = formatNumeral(numericValue.toString(), formatNumeralOptions);
-        }
-        if (max !== null && numericValue > Number(max)) {
-            numericValue = Number(max);
-            valueFormatted = formatNumeral(numericValue.toString(), formatNumeralOptions);
-        }
-        inputRef.value = valueFormatted;
-        return isNaN(numericValue) ? 0 : numericValue;
-    }
-    catch {
-        inputRef.value = '0';
-        return 0;
-    }
-};
-const onInput = () => {
-    on?.input?.(getNumericValue());
-};
-const onChange = () => {
-    on?.change?.(getNumericValue());
-};
-const clearValue = (e) => {
-    e.preventDefault();
-    if (!inputRef) {
-        return;
-    }
-    inputRef.value = '';
-    on?.input?.(0);
-    on?.change?.(0);
-    inputRef.focus();
-};
-const focusInput = () => {
-    inputRef?.focus();
-};
-const onBlur = () => {
-    const numericValue = getNumericValue();
-    if (inputRef) {
-        inputRef.value = valueParsed;
-    }
-    on?.blur?.(numericValue);
-};
-</script>
-
-<div
-  class="numeral-input"
-  class:numeral-input--disabled={disabled}
-  class:numeral-input--inert={inert}
-  class:numeral-input--borderless={borderless}
-  onclick={focusInput}
-  onkeydown={() => ({})}
-  role="none">
-  {#if icon}
-    <div class="numeral-input__icon">
-      {@render icon()}
-    </div>
-  {/if}
-  <input
-    use:initInput
-    inert={inert}
-    type="text"
-    name={name}
-    id={id}
-    placeholder={placeholder}
-    class="numeral-input__input"
-    value={valueParsed}
-    disabled={disabled}
-    title={title}
-    oninput={onInput}
-    onchange={onChange}
-    onblur={() => onBlur()}
-    onfocus={() => on?.focus?.()} />
-  {#if clearButtonVisible || clearButton}
-    <div class="numeral-input__clear-wrapper">
-      {#if clearButton}
-        {@render clearButton()}
-      {:else}
-        <button type="button" class="numeral-input__clear-button" onclick={clearValue}>
-          <Icon src={IconDismiss} />
-        </button>
-      {/if}
-    </div>
-  {/if}
-</div>
-
-<!--
-@component
-Formatted numeral input with thousand separators, decimal scale, and min/max clamping.
-Uses cleave-zen for formatting and cursor tracking.
-
-### CSS Custom Properties
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--input--root--font-size` | Root font size for em scaling | `1rem` |
-| `--sc-kit--input--height` | Container height | `2em` |
-| `--sc-kit--input--width` | Container width | `100%` |
-| `--sc-kit--input--padding--block` | Block (vertical) padding | `0` |
-| `--sc-kit--input--padding--inline` | Inline (horizontal) padding | `0.5em` |
-| `--sc-kit--input--accent-color` | Focus accent color | light-dark primary-500/primary-400 |
-| `--sc-kit--input--background` | Background color | light-dark white/gray-900 |
-| `--sc-kit--input--background--disabled` | Disabled background | light-dark neutral-50/neutral-800 |
-| `--sc-kit--input--border-color` | Border color | light-dark neutral-300/neutral-600 |
-| `--sc-kit--input--border-radius` | Border radius | `0.25em` |
-| `--sc-kit--input--text--font-size` | Text font size | `0.875em` |
-| `--sc-kit--input--text--color` | Text color | light-dark gray-800/white |
-| `--sc-kit--input--placeholder--color` | Placeholder text color | inherited from border |
-| `--sc-kit--input--icon--size` | Icon size | `1em` |
-| `--sc-kit--input--icon--color` | Icon color | inherited from border |
-| `--sc-kit--input--cursor--inert` | Cursor when inert | `default` |
--->
-
-<style>.numeral-input {
-  --_--input--root--font-size: var(--sc-kit--input--root--font-size);
-  --_--input--height: var(--sc-kit--input--height);
-  --_--input--width: var(--sc-kit--input--width);
-  --_--input--background: var(--sc-kit--input--background);
-  --_--input--background--disabled: var(--sc-kit--input--background--disabled);
-  --_--input--border-color: var(--sc-kit--input--border-color);
-  --_--input--border-radius: var(--sc-kit--input--border-radius);
-  --_--input--icon--size: var(--sc-kit--input--icon--size);
-  --_--input--icon--color: var(--sc-kit--input--icon--color);
-  --_--input--text--font-size: var(--sc-kit--input--text--font-size);
-  --_--input--text--color: var(--sc-kit--input--text--color);
-  --_--input--placeholder--color: var(--sc-kit--input--placeholder--color);
-  --_--input--accent-color: var(--sc-kit--input--accent-color);
-  --_--input--padding--inline: var(--sc-kit--input--padding--inline);
-  --_--input--padding--block: var(--sc-kit--input--padding--block);
-  --_input--cursor--inert: var(--sc-kit--input--cursor--inert);
-  --_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);
-}
-.numeral-input:focus, .numeral-input:focus-within {
-  --_input--default-shadow-color: var(--_input--accent-color);
-}
-.numeral-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);
-}
-.numeral-input--disabled {
-  background-color: var(--_input--background--disabled);
-  cursor: default;
-}
-.numeral-input {
-  display: flex;
-  align-items: center;
-  cursor: text;
-}
-.numeral-input--inert {
-  cursor: var(--_input--cursor--inert);
-}
-.numeral-input--borderless {
-  --_input--border-color: transparent;
-  --_input--background: transparent;
-  --_input--background--disabled: transparent;
-  --_input--accent-color: transparent;
-  --_input--explicit-shadow-color: transparent;
-}
-.numeral-input__input {
-  flex: 1;
-  height: 100%;
-  padding: 0;
-  background-color: transparent !important;
-  font-size: var(--_input--text--font-size);
-  color: var(--_input--text--color);
-}
-.numeral-input__input::placeholder {
-  color: var(--_input--placeholder--color);
-}
-.numeral-input__input:-webkit-autofill {
-  -webkit-text-fill-color: var(--_input--text--color) !important;
-}
-.numeral-input__icon {
-  margin-right: 0.625em;
-  color: var(--_input--icon--color);
-  font-size: var(--_input--icon--size);
-  line-height: 0;
-  cursor: pointer;
-}
-:global(.numeral-input__icon:not(:has(*))) {
-  margin-right: 0 !important;
-}
-.numeral-input__clear-wrapper {
-  color: var(--_input--icon--color);
-  font-size: var(--_input--icon--size);
-  line-height: 0;
-  cursor: pointer;
-}
-.numeral-input__clear-button {
-  margin-left: 0.625em;
-}</style>

package/dist/ui/inputs/numeral-input/cmp.numeral-input.svelte.d.ts

@@ -1,66 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    value: string | number | null | undefined;
-    name?: string;
-    id?: string | null;
-    placeholder?: string;
-    disabled?: boolean;
-    /** Make input non-interactive (visual display only) */
-    inert?: boolean;
-    autofocus?: boolean;
-    /** Show clear button when value is present */
-    clearable?: boolean;
-    /** Remove border, background, and accent shadow */
-    borderless?: boolean;
-    title?: string;
-    /** Minimum allowed value */
-    min?: string | number | null;
-    /** Maximum allowed value */
-    max?: string | number | null;
-    /** Number of decimal places @default 2 */
-    numeralDecimalScale?: number;
-    on: {
-        /** Fires on input with the parsed numeric value */
-        input?: (value: number) => void;
-        /** Fires on change with the parsed numeric value */
-        change?: (value: number) => void;
-        /** Fires after mount, provides the input element ref */
-        mounted?: (data: {
-            input: HTMLInputElement;
-        }) => void;
-        /** Fires on blur with the parsed numeric value */
-        blur?: (value: number) => void;
-        focus?: () => void;
-    };
-    /** Left icon snippet */
-    icon?: Snippet;
-    /** Custom clear button snippet */
-    clearButton?: Snippet;
-};
-/**
- * Formatted numeral input with thousand separators, decimal scale, and min/max clamping.
- * Uses cleave-zen for formatting and cursor tracking.
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-kit--input--root--font-size` | Root font size for em scaling | `1rem` |
- * | `--sc-kit--input--height` | Container height | `2em` |
- * | `--sc-kit--input--width` | Container width | `100%` |
- * | `--sc-kit--input--padding--block` | Block (vertical) padding | `0` |
- * | `--sc-kit--input--padding--inline` | Inline (horizontal) padding | `0.5em` |
- * | `--sc-kit--input--accent-color` | Focus accent color | light-dark primary-500/primary-400 |
- * | `--sc-kit--input--background` | Background color | light-dark white/gray-900 |
- * | `--sc-kit--input--background--disabled` | Disabled background | light-dark neutral-50/neutral-800 |
- * | `--sc-kit--input--border-color` | Border color | light-dark neutral-300/neutral-600 |
- * | `--sc-kit--input--border-radius` | Border radius | `0.25em` |
- * | `--sc-kit--input--text--font-size` | Text font size | `0.875em` |
- * | `--sc-kit--input--text--color` | Text color | light-dark gray-800/white |
- * | `--sc-kit--input--placeholder--color` | Placeholder text color | inherited from border |
- * | `--sc-kit--input--icon--size` | Icon size | `1em` |
- * | `--sc-kit--input--icon--color` | Icon color | inherited from border |
- * | `--sc-kit--input--cursor--inert` | Cursor when inert | `default` |
- */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/inputs/numeral-input/index.d.ts

@@ -1,2 +0,0 @@
-export { default as NumeralInput } from './cmp.numeral-input.svelte';
-export { default as NumeralInputValidatable } from './cmp.numeral-input-validatable.svelte';

package/dist/ui/inputs/numeral-input/index.js

@@ -1,2 +0,0 @@
-export { default as NumeralInput } from './cmp.numeral-input.svelte';
-export { default as NumeralInputValidatable } from './cmp.numeral-input-validatable.svelte';

package/dist/ui/inputs/pin-input/cmp.pin-input.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">import { PinInputGenerator } from './pin-input-generator';
-let { charsNumber = 6, on } = $props();
-const initContainer = (node) => {
-    new PinInputGenerator(node, {
-        onInput: (val) => {
-            on.input(val);
-        },
-        count: charsNumber
-    });
-};
-</script>
-
-<div class="pin-input" use:initContainer></div>
-
-<!--
-@component
-A PIN code input with configurable number of character cells. Each cell accepts a single digit.
-
-### CSS Custom Properties
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--pin-input--background` | Cell background | light-dark white/gray-900 |
-| `--sc-kit--pin-input--border-color` | Default border color | light-dark neutral-300/neutral-600 |
-| `--sc-kit--pin-input--border-color--filled` | Filled cell border | light-dark success-500/success-400 |
-| `--sc-kit--pin-input--border-color--focused` | Focused cell border | light-dark primary-500/primary-400 |
-| `--sc-kit--pin-input--border-radius` | Cell border radius | `0.25em` |
-| `--sc-kit--pin-input--color` | Text color | light-dark gray-800/white |
--->
-
-<style>.pin-input {
-  --_pin-input--color: var(--sc-kit--pin-input--color, light-dark(#2e2e2e, #ffffff));
-  --_pin-input--background: var(--sc-kit--pin-input--background, light-dark(#ffffff, #1c1c1c));
-  --_pin-input--border-color: var(--sc-kit--pin-input--border-color, light-dark(#f2f2f3, #1e1e1e));
-  --_pin-input--border-color--focused: var(
-    --sc-kit--pin-input--border-color--focused,
-    light-dark(#144ab0, #5a8dec)
-  );
-  --_pin-input--border-color--filled: var(--sc-kit--pin-input--border-color--filled, light-dark(#0cce6b, #0de374));
-  --_pin-input--border-radius: var(--sc-kit--pin-input--border-radius, 0.25em);
-  display: flex;
-  justify-content: space-between;
-}
-.pin-input :global(.pin-input__input) {
-  font-size: 2em;
-  color: var(--_pin-input--color);
-  border: 1px solid var(--_pin-input--border-color);
-  border-radius: var(--_pin-input--border-radius);
-  padding: 0.3em;
-  width: 1.8em;
-  background: var(--_pin-input--background);
-  text-align: center;
-}
-.pin-input :global(.pin-input__input--focused) {
-  border-color: var(--_pin-input--border-color--focused);
-}
-.pin-input :global(.pin-input__input--filled) {
-  border-color: var(--_pin-input--border-color--filled);
-}</style>

package/dist/ui/inputs/pin-input/cmp.pin-input.svelte.d.ts

@@ -1,23 +0,0 @@
-type Props = {
-    /** Number of PIN input cells @default 6 */
-    charsNumber?: number;
-    on: {
-        input: (value: string) => void;
-    };
-};
-/**
- * A PIN code input with configurable number of character cells. Each cell accepts a single digit.
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-kit--pin-input--background` | Cell background | light-dark white/gray-900 |
- * | `--sc-kit--pin-input--border-color` | Default border color | light-dark neutral-300/neutral-600 |
- * | `--sc-kit--pin-input--border-color--filled` | Filled cell border | light-dark success-500/success-400 |
- * | `--sc-kit--pin-input--border-color--focused` | Focused cell border | light-dark primary-500/primary-400 |
- * | `--sc-kit--pin-input--border-radius` | Cell border radius | `0.25em` |
- * | `--sc-kit--pin-input--color` | Text color | light-dark gray-800/white |
- */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/inputs/pin-input/pin-input-generator.d.ts

@@ -1,27 +0,0 @@
-interface PinInputArgs {
-    count?: number;
-    onInput: (value: string) => void;
-    secure?: boolean;
-    previewDuration?: number;
-    numeric?: boolean;
-}
-export declare class PinInputGenerator {
-    private _container;
-    private _onInput;
-    private _count;
-    private _secure;
-    private _previewDuration;
-    private _numeric;
-    private _cells;
-    private _focusedCellIndex;
-    constructor(container: HTMLElement, args: PinInputArgs);
-    private _initCells;
-    private _onCellChanged;
-    private _onKeyDown;
-    private _focusPreviousCell;
-    private _focusNextCell;
-    private _focusCellByIndex;
-    private _isTheCellValid;
-    private _notifyValueChanged;
-}
-export {};

package/dist/ui/inputs/pin-input/pin-input-generator.js

@@ -1,114 +0,0 @@
-const CELL_REGEXP = '^\\d{1}$';
-export class PinInputGenerator {
-    _container;
-    _onInput;
-    _count;
-    _secure;
-    _previewDuration;
-    _numeric;
-    _cells;
-    _focusedCellIndex;
-    constructor(container, args) {
-        const { count = 6, secure = false, previewDuration = 200, numeric = true, onInput } = args;
-        this._container = container;
-        this._count = count;
-        this._secure = secure;
-        this._previewDuration = previewDuration;
-        this._cells = [];
-        this._focusedCellIndex = 0;
-        this._numeric = numeric;
-        this._onInput = onInput;
-        this._initCells();
-    }
-    _initCells = () => {
-        for (let i = 0; i < this._count; i++) {
-            const input = document.createElement('input');
-            input.classList.add('pin-input__input');
-            if (this._numeric) {
-                input.setAttribute('inputmode', 'numeric');
-            }
-            this._cells.push(input);
-            this._container.appendChild(input);
-            input.addEventListener('input', (_event) => {
-                const value = input.value;
-                this._onCellChanged(i, value);
-            });
-            const onFocus = () => {
-                this._focusedCellIndex = i;
-                input.classList.toggle('pin-input__input--focused', true);
-                setTimeout(() => {
-                    input.setSelectionRange(0, input.value.length);
-                });
-            };
-            input.addEventListener('focus', onFocus);
-            input.addEventListener('click', onFocus);
-            input.addEventListener('blur', () => {
-                input.classList.toggle('pin-input__input--focused', false);
-            });
-            input.addEventListener('keydown', (event) => {
-                this._onKeyDown(event, i);
-                if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Backspace', 'Delete'].includes(event.key)) {
-                    this._cells[i].setAttribute('type', 'text');
-                }
-            });
-        }
-    };
-    _onCellChanged(index, newVal) {
-        if (!this._isTheCellValid(newVal)) {
-            this._cells[index].classList.remove('pin-input__input--filled');
-            this._cells[index].value = '';
-            this._notifyValueChanged();
-            return;
-        }
-        this._cells[index].classList.add('pin-input__input--filled');
-        if (this._secure && this._previewDuration) {
-            setTimeout(() => {
-                this._cells[index].setAttribute('type', 'password');
-            }, this._previewDuration);
-        }
-        this._notifyValueChanged();
-        this._focusNextCell();
-    }
-    _onKeyDown(e, index) {
-        switch (e.key) {
-            case 'ArrowLeft':
-                this._focusPreviousCell();
-                break;
-            case 'ArrowRight':
-                this._focusNextCell();
-                break;
-            case 'Backspace':
-                if (!this._cells[index].value.length) {
-                    this._focusPreviousCell();
-                    e.preventDefault();
-                }
-        }
-    }
-    _focusPreviousCell() {
-        if (!this._focusedCellIndex) {
-            return;
-        }
-        this._focusCellByIndex(this._focusedCellIndex - 1);
-    }
-    _focusNextCell() {
-        if (this._focusedCellIndex === this._cells.length - 1) {
-            return;
-        }
-        this._focusCellByIndex(this._focusedCellIndex + 1);
-    }
-    _focusCellByIndex(index = 0) {
-        const el = this._cells[index];
-        el.focus();
-        this._focusedCellIndex = index;
-    }
-    _isTheCellValid(cell) {
-        return this._numeric ? !!cell.match(CELL_REGEXP) : cell.length <= 1;
-    }
-    _notifyValueChanged() {
-        let value = '';
-        this._cells.forEach((p) => {
-            value += p.value;
-        });
-        this._onInput(value);
-    }
-}

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

@@ -1,55 +0,0 @@
-<script lang="ts">import { InputEmojiPicker, inputEmojiPickerContainer } from '../input-emoji-picker';
-import { default as TinymceInput } from './tinymce-input.svelte';
-let { value, options = undefined, debounce = 0, placeholder = undefined, autofocus = false, disabled = false, rows = 0, emoji = false, borderless = false, on } = $props();
-let insertEmojiToTinymce = $state(null);
-const onEmojiSelected = (emojiChar) => {
-    insertEmojiToTinymce?.(emojiChar);
-};
-</script>
-
-<div class="rich-text-input" class:rich-text-input--has-emoji={emoji} use:inputEmojiPickerContainer>
-  <TinymceInput
-    value={value}
-    options={options}
-    placeholder={placeholder}
-    disabled={disabled}
-    borderless={borderless}
-    rows={rows}
-    autofocus={autofocus || ''}
-    debounce={debounce}
-    on={{
-      change: (e) => on?.change?.(e),
-      mounted: (e) => (insertEmojiToTinymce = e.insertEmoji)
-    }} />
-  {#if emoji}
-    <InputEmojiPicker on={{ select: onEmojiSelected }} />
-  {/if}
-</div>
-
-<!--
-@component
-Rich text editor powered by TinyMCE with optional emoji picker support.
-
-### CSS Custom Properties
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--rich-text-input--root--font-size` | Root font size for em scaling | `1rem` |
-| `--sc-kit--rich-text-input--width` | Container width | `100%` |
-| `--sc-kit--rich-text-input--padding--block` | Block (vertical) padding | `0.5em` |
-| `--sc-kit--rich-text-input--padding--inline` | Inline (horizontal) padding | `0.5em` |
-| `--sc-kit--rich-text-input--accent-color` | Focus accent color | light-dark primary-500/primary-400 |
-| `--sc-kit--rich-text-input--background` | Background color | light-dark white/gray-900 |
-| `--sc-kit--rich-text-input--background--disabled` | Disabled background | light-dark neutral-50/neutral-800 |
-| `--sc-kit--rich-text-input--border-color` | Border color | light-dark neutral-300/neutral-600 |
-| `--sc-kit--rich-text-input--border-radius` | Border radius | `0.25em` |
-| `--sc-kit--rich-text-input--text--font-size` | Text font size | `0.875em` |
-| `--sc-kit--rich-text-input--text--color` | Text color | light-dark gray-800/white |
-| `--sc-kit--rich-text-input--placeholder--color` | Placeholder color | inherited from border |
--->
-
-<style>.rich-text-input {
-  position: relative;
-}
-.rich-text-input--has-emoji {
-  --_--input--padding-right: 1.5em;
-}</style>

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

@@ -1,43 +0,0 @@
-import type { RichTextInputOptions } from './types';
-type Props = {
-    /** HTML content */
-    value: string | null | undefined;
-    /** TinyMCE configuration options */
-    options?: RichTextInputOptions;
-    /** Debounce delay in ms for change events @default 0 */
-    debounce?: number;
-    placeholder?: string;
-    autofocus?: boolean;
-    disabled?: boolean;
-    /** Minimum visible rows @default 0 */
-    rows?: number;
-    /** Show emoji picker trigger */
-    emoji?: boolean;
-    /** Remove border, background, and accent shadow */
-    borderless?: boolean;
-    on: {
-        change: (value: string) => void;
-    };
-};
-/**
- * Rich text editor powered by TinyMCE with optional emoji picker support.
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-kit--rich-text-input--root--font-size` | Root font size for em scaling | `1rem` |
- * | `--sc-kit--rich-text-input--width` | Container width | `100%` |
- * | `--sc-kit--rich-text-input--padding--block` | Block (vertical) padding | `0.5em` |
- * | `--sc-kit--rich-text-input--padding--inline` | Inline (horizontal) padding | `0.5em` |
- * | `--sc-kit--rich-text-input--accent-color` | Focus accent color | light-dark primary-500/primary-400 |
- * | `--sc-kit--rich-text-input--background` | Background color | light-dark white/gray-900 |
- * | `--sc-kit--rich-text-input--background--disabled` | Disabled background | light-dark neutral-50/neutral-800 |
- * | `--sc-kit--rich-text-input--border-color` | Border color | light-dark neutral-300/neutral-600 |
- * | `--sc-kit--rich-text-input--border-radius` | Border radius | `0.25em` |
- * | `--sc-kit--rich-text-input--text--font-size` | Text font size | `0.875em` |
- * | `--sc-kit--rich-text-input--text--color` | Text color | light-dark gray-800/white |
- * | `--sc-kit--rich-text-input--placeholder--color` | Placeholder color | inherited from border |
- */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;