@streamscloud/kit 0.2.42 → 0.9.1

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

@@ -1,241 +0,0 @@
-<script lang="ts">import { HtmlHelper } from '../../../core/utils';
-import { Icon } from '../../icon';
-import { InputEmojiPicker, inputEmojiPickerContainer } from '../input-emoji-picker';
-import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
-let { value, type = 'text', name = '', id = null, placeholder = '', disabled = false, inert = false, autofocus = false, clearable = false, emoji = false, borderless = false, title = '', maxLength = null, on, icon, clearButton } = $props();
-let inputRef = $state(undefined);
-const valueParsed = $derived(value ?? '');
-const initInput = (node) => {
-    inputRef = node;
-    if (autofocus) {
-        node.focus();
-    }
-    on?.mounted?.({ input: node });
-};
-const clearButtonVisible = $derived(!disabled && clearable && !!value);
-const onInput = () => {
-    if (!inputRef) {
-        return;
-    }
-    on?.input?.(inputRef.value);
-};
-const onChange = () => {
-    if (!inputRef) {
-        return;
-    }
-    on?.change?.(inputRef.value);
-};
-const clearValue = (e) => {
-    e.preventDefault();
-    if (!inputRef) {
-        return;
-    }
-    inputRef.value = '';
-    onInput();
-    onChange();
-    inputRef.focus();
-};
-const focusInput = () => {
-    inputRef?.focus();
-};
-const onBlur = () => {
-    if (inputRef) {
-        inputRef.value = valueParsed;
-    }
-    on?.blur?.();
-};
-const onEmojiSelected = (emojiChar) => {
-    if (inputRef) {
-        HtmlHelper.pasteIntoInput(emojiChar, inputRef);
-    }
-};
-</script>
-
-<div
-  class="input"
-  class:input--disabled={disabled}
-  class:input--inert={inert}
-  class:input--borderless={borderless}
-  class:input--has-emoji={emoji}
-  use:inputEmojiPickerContainer
-  onclick={focusInput}
-  onkeydown={() => ({})}
-  role="none">
-  {#if icon}
-    <div class="input__icon">
-      {@render icon()}
-    </div>
-  {/if}
-  <input
-    use:initInput
-    inert={inert}
-    type={type}
-    name={name}
-    id={id}
-    placeholder={placeholder}
-    class="input__input"
-    value={valueParsed}
-    disabled={disabled}
-    title={title}
-    maxlength={maxLength}
-    oninput={onInput}
-    onchange={onChange}
-    onblur={() => onBlur()}
-    onfocus={() => on?.focus?.()} />
-  {#if clearButtonVisible || clearButton}
-    <div class="input__clear-wrapper">
-      {#if clearButton}
-        {@render clearButton()}
-      {:else}
-        <button type="button" class="input__clear-button" onclick={clearValue}>
-          <Icon src={IconDismiss} />
-        </button>
-      {/if}
-    </div>
-  {/if}
-  {#if emoji}
-    <InputEmojiPicker on={{ select: onEmojiSelected }} />
-  {/if}
-</div>
-
-<!--
-@component
-Text/password input with optional clear button, icon, and emoji picker.
-
-### 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>.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);
-}
-.input:focus, .input:focus-within {
-  --_input--default-shadow-color: var(--_input--accent-color);
-}
-.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);
-}
-.input--disabled {
-  background-color: var(--_input--background--disabled);
-  cursor: default;
-}
-.input {
-  display: flex;
-  align-items: center;
-  cursor: text;
-  position: relative;
-}
-.input--inert {
-  cursor: var(--_input--cursor--inert);
-}
-.input--borderless {
-  --_input--border-color: transparent;
-  --_input--background: transparent;
-  --_input--background--disabled: transparent;
-  --_input--accent-color: transparent;
-  --_input--explicit-shadow-color: transparent;
-}
-.input--has-emoji {
-  --_--input--padding-right: 1.5em;
-}
-.input__input {
-  flex: 1;
-  height: 100%;
-  padding: 0;
-  background-color: transparent !important;
-  font-size: var(--_input--text--font-size);
-  color: var(--_input--text--color);
-}
-.input__input::placeholder {
-  color: var(--_input--placeholder--color);
-}
-.input__input:-webkit-autofill {
-  -webkit-text-fill-color: var(--_input--text--color) !important;
-}
-.input__icon {
-  margin-right: 0.625em;
-  color: var(--_input--icon--color);
-  font-size: var(--_input--icon--size);
-  line-height: 0;
-  cursor: pointer;
-}
-:global(.input__icon:not(:has(*))) {
-  margin-right: 0 !important;
-}
-.input__clear-wrapper {
-  color: var(--_input--icon--color);
-  font-size: var(--_input--icon--size);
-  line-height: 0;
-  cursor: pointer;
-}
-.input__clear-button {
-  margin-left: 0.625em;
-}</style>

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

@@ -1,61 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    value: string | null | undefined;
-    /** @default 'text' */
-    type?: 'text' | 'password';
-    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;
-    /** Show emoji picker trigger */
-    emoji?: boolean;
-    /** Remove border, background, and accent shadow */
-    borderless?: boolean;
-    title?: string;
-    maxLength?: number | null;
-    on: {
-        input?: (value: string) => void;
-        change?: (value: string) => void;
-        /** Fires after mount, provides the input element ref */
-        mounted?: (data: {
-            input: HTMLInputElement;
-        }) => void;
-        blur?: () => void;
-        focus?: () => void;
-    };
-    /** Left icon snippet */
-    icon?: Snippet;
-    /** Custom clear button snippet */
-    clearButton?: Snippet;
-};
-/**
- * Text/password input with optional clear button, icon, and emoji picker.
- *
- * ### 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/input/index.d.ts

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

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

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

package/dist/ui/inputs/input-emoji-picker/cmp.input-emoji-picker.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">import { Dropdown } from '../../dropdown';
-import { EmojiPanel } from '../../emoji-picker';
-import { Icon } from '../../icon';
-import IconEmoji from '@fluentui/svg-icons/icons/emoji_20_regular.svg?raw';
-let toggleDropdown = $state();
-let { on } = $props();
-</script>
-
-<button type="button" class="input-emoji-picker-trigger" onclick={() => toggleDropdown?.()}>
-  <Icon src={IconEmoji} />
-</button>
-
-<div class="input-emoji-picker">
-  <Dropdown position="bottom-end" matchTriggerWidth panel={false} on={{ mounted: (e) => (toggleDropdown = e.toggleOpen) }} keepDropdownOpen={true}>
-    {#snippet trigger()}
-      <div class="input-emoji-picker__trigger-stub"></div>
-    {/snippet}
-    <EmojiPanel on={{ select: on.select }} />
-  </Dropdown>
-</div>
-
-<!--
-@component
-Emoji picker dropdown with trigger icon. Wraps EmojiPanel in a Dropdown for positioning.
--->
-
-<style>.input-emoji-picker-trigger {
-  --_input-emoji-picker--trigger--opacity: var(--input-emoji-picker--trigger--opacity, 0);
-  --sc-kit--icon--size: 1em;
-  --sc-kit--icon--color: light-dark(#9ca3af, #6b7280);
-  opacity: var(--_input-emoji-picker--trigger--opacity);
-  position: absolute;
-  right: 0.25rem;
-  bottom: 0.25rem;
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.input-emoji-picker {
-  --sc-kit--dropdown--width: 100%;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}</style>

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

@@ -1,9 +0,0 @@
-type Props = {
-    on: {
-        select: (value: string) => void;
-    };
-};
-/** Emoji picker dropdown with trigger icon. Wraps EmojiPanel in a Dropdown for positioning. */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/inputs/input-emoji-picker/input-emoji-picker-container.d.ts

@@ -1,2 +0,0 @@
-import type { Action } from 'svelte/action';
-export declare const inputEmojiPickerContainer: Action;

package/dist/ui/inputs/input-emoji-picker/input-emoji-picker-container.js

@@ -1,16 +0,0 @@
-export const inputEmojiPickerContainer = (node) => {
-    const handleHover = () => {
-        node.style.setProperty('--input-emoji-picker--trigger--opacity', '1');
-    };
-    const handleHoverOut = () => {
-        node.style.setProperty('--input-emoji-picker--trigger--opacity', '');
-    };
-    node.addEventListener('mouseenter', handleHover);
-    node.addEventListener('mouseleave', handleHoverOut);
-    return {
-        destroy() {
-            node.removeEventListener('mouseenter', handleHover);
-            node.removeEventListener('mouseleave', handleHoverOut);
-        }
-    };
-};

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

@@ -1,55 +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 NumeralInput } from './cmp.numeral-input.svelte';
-let { name, handler, id = undefined, debounce = 0, disabled = false, autofocus = false, placeholder = '', min = null, max = null, numeralDecimalScale = 2, clearable = false, validateOnChange = false, validateAsString = false, on, icon, clearButton } = $props();
-const validateValue = (value) => {
-    const valueToValidate = validateAsString ? value.toString() : value;
-    handler.updateValidateField(name, valueToValidate);
-};
-const onInput = (value) => {
-    if (!validateOnChange) {
-        validateValue(value);
-    }
-    on?.input?.(value);
-};
-const onChange = (value) => {
-    if (validateOnChange) {
-        validateValue(value);
-    }
-    on?.change?.(value);
-};
-const onBlur = (value) => {
-    validateValue(value);
-};
-const handleInputDebounced = $derived(debounce ? Utils.debounce(onInput, debounce) : onInput);
-const handleChangeDebounced = $derived(debounce ? Utils.debounce(onChange, debounce) : onChange);
-</script>
-
-<Validatable handler={handler} name={name}>
-  <NumeralInput
-    value={handler.form[name] as string | number | null | undefined}
-    name={name}
-    id={id}
-    autofocus={autofocus}
-    disabled={disabled}
-    placeholder={placeholder}
-    min={min}
-    max={max}
-    numeralDecimalScale={numeralDecimalScale}
-    clearable={clearable}
-    title={!!handler.touched[name] && !!handler.errors[name] ? handler.errors[name] : ''}
-    on={{
-      input: handleInputDebounced,
-      change: handleChangeDebounced,
-      mounted: (e) => on?.mounted?.(e),
-      blur: onBlur
-    }}
-    icon={icon}
-    clearButton={clearButton} />
-</Validatable>
-
-<!--
-@component
-Numeral input wrapped with form validation. Validates on input or change based on `validateOnChange` prop.
--->

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

@@ -1,62 +0,0 @@
-import { FormValidationHandler } from '../../../core/validation';
-import type { Snippet } from 'svelte';
-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>;
-        id?: string;
-        /** Debounce delay in ms for input/change handlers @default 0 */
-        debounce?: number;
-        disabled?: boolean;
-        autofocus?: boolean;
-        placeholder?: string;
-        /** Minimum allowed value */
-        min?: string | number | null;
-        /** Maximum allowed value */
-        max?: string | number | null;
-        /** Number of decimal places @default 2 */
-        numeralDecimalScale?: number;
-        /** Show clear button when value is present */
-        clearable?: boolean;
-        /** Validate on change event instead of input @default false */
-        validateOnChange?: boolean;
-        /** Pass numeric value as string to the validator @default false */
-        validateAsString?: boolean;
-        on?: {
-            input?: (value: number) => void;
-            change?: (value: number) => void;
-            /** Fires after mount, provides the input element ref */
-            mounted?: (data: {
-                input: HTMLInputElement;
-            }) => void;
-        };
-        /** Left icon snippet */
-        icon?: Snippet;
-        /** Custom clear button snippet */
-        clearButton?: Snippet;
-    };
-    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']>;
-}
-/** Numeral input wrapped with form validation. Validates on input or change based on `validateOnChange` prop. */
-declare const Cmp: $$IsomorphicComponent;
-type Cmp<T extends Record<string, unknown>> = InstanceType<typeof Cmp<T>>;
-export default Cmp;