@streamscloud/kit 0.2.1 → 0.2.2

package/dist/ui/emoji-picker/emoji-picker-localization.d.ts

@@ -0,0 +1,5 @@
+export declare class EmojiPickerLocalization {
+    get searchPlaceholder(): string;
+    get notFound(): string;
+    get categories(): Record<string, string>;
+}

package/dist/ui/emoji-picker/emoji-picker-localization.js

@@ -0,0 +1,40 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    searchPlaceholder: { en: 'Search emoji...', no: 'Sok etter emoji...' },
+    notFound: { en: 'No emoji found', no: 'Ingen emoji funnet' }
+};
+const categories = {
+    emotions: { en: 'Smileys & Emotion', no: 'Smileys og folelser' },
+    people: { en: 'People & Body', no: 'Mennesker og kropp' },
+    nature: { en: 'Animals & Nature', no: 'Dyr og natur' },
+    food: { en: 'Food & Drink', no: 'Mat og drikke' },
+    travel: { en: 'Travel & Places', no: 'Reise og steder' },
+    activities: { en: 'Activities', no: 'Aktiviteter' },
+    objects: { en: 'Objects', no: 'Objekter' },
+    symbols: { en: 'Symbols', no: 'Symboler' },
+    flags: { en: 'Flags', no: 'Flagg' },
+    search: { en: 'Search Results', no: 'Sokeresultater' }
+};
+export class EmojiPickerLocalization {
+    get searchPlaceholder() {
+        return loc.searchPlaceholder[AppLocale.current];
+    }
+    get notFound() {
+        return loc.notFound[AppLocale.current];
+    }
+    get categories() {
+        const l = AppLocale.current;
+        return {
+            emotions: categories.emotions[l],
+            people: categories.people[l],
+            nature: categories.nature[l],
+            food: categories.food[l],
+            travel: categories.travel[l],
+            activities: categories.activities[l],
+            objects: categories.objects[l],
+            symbols: categories.symbols[l],
+            flags: categories.flags[l],
+            search: categories.search[l]
+        };
+    }
+}

package/dist/ui/emoji-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EmojiPanel } from './cmp.emoji-panel.svelte';
+export { default as EmojiPicker } from './cmp.emoji-picker.svelte';

package/dist/ui/emoji-picker/index.js

@@ -0,0 +1,2 @@
+export { default as EmojiPanel } from './cmp.emoji-panel.svelte';
+export { default as EmojiPicker } from './cmp.emoji-picker.svelte';

package/dist/ui/emoji-picker/types.d.ts

@@ -0,0 +1,8 @@
+export type Emoji = {
+    text: string;
+    unicode: string;
+};
+export type EmojiCategory = {
+    name: string;
+    emojis: Emoji[];
+};

package/dist/ui/emoji-picker/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/form-group/cmp.form-group-label.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 type Props = {
+    /** Enable flex layout for label + tooltip icon */
     withTooltip?: boolean;
     children: Snippet;
 };

package/dist/ui/form-group/cmp.form-group.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 type Props = {
+    /** Remove bottom margin */
     noMargin?: boolean;
     children: Snippet;
 };

package/dist/ui/icon-text/cmp.icon-text.svelte

@@ -25,15 +25,6 @@ Displays an icon alongside text in a horizontal layout. The icon can be an SVG s
 (rendered via `Icon`) or a custom `Snippet`. Use `iconPosition` to place the icon
 before or after the text.
 
-### Props
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `icon` | `string \| Snippet` | — | SVG string or custom snippet for the icon |
-| `iconColor` | `IconColor \| null` | `null` | Color preset passed to `Icon` |
-| `iconPosition` | `'left' \| 'right'` | `'left'` | Icon placement relative to text |
-| `trimText` | `boolean` | `false` | Truncate text with ellipsis when overflowing |
-| `children` | `Snippet` | — | Text content |
-
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|

package/dist/ui/icon-text/cmp.icon-text.svelte.d.ts

@@ -1,9 +1,13 @@
 import { type IconColor } from '../icon';
 import type { Snippet } from 'svelte';
 type Props = {
+    /** SVG string or custom snippet for the icon */
     icon?: string | Snippet;
+    /** Color preset passed to the Icon component */
     iconColor?: IconColor | null;
+    /** Icon placement relative to text @default 'left' */
     iconPosition?: 'left' | 'right';
+    /** Truncate text with ellipsis on overflow */
     trimText?: boolean;
     children?: Snippet;
 };
@@ -12,15 +16,6 @@ type Props = {
  * (rendered via `Icon`) or a custom `Snippet`. Use `iconPosition` to place the icon
  * before or after the text.
  *
- * ### Props
- * | Prop | Type | Default | Description |
- * |---|---|---|---|
- * | `icon` | `string \| Snippet` | — | SVG string or custom snippet for the icon |
- * | `iconColor` | `IconColor \| null` | `null` | Color preset passed to `Icon` |
- * | `iconPosition` | `'left' \| 'right'` | `'left'` | Icon placement relative to text |
- * | `trimText` | `boolean` | `false` | Truncate text with ellipsis when overflowing |
- * | `children` | `Snippet` | — | Text content |
- *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|

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

@@ -0,0 +1,6 @@
+export { Input, InputValidatable } from './input';
+export { NumeralInput, NumeralInputValidatable } from './numeral-input';
+export { PinInput } from './pin-input';
+export { RichTextInput } from './rich-text-input';
+export type { RichTextInputOptions } from './rich-text-input';
+export { Textarea, TextareaValidatable } from './textarea';

package/dist/ui/inputs/index.js

@@ -0,0 +1,5 @@
+export { Input, InputValidatable } from './input';
+export { NumeralInput, NumeralInputValidatable } from './numeral-input';
+export { PinInput } from './pin-input';
+export { RichTextInput } from './rich-text-input';
+export { Textarea, TextareaValidatable } from './textarea';

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

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

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

@@ -0,0 +1,56 @@
+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;
+        type?: "text" | "password";
+        /** Debounce delay in ms for input/change handlers @default 0 */
+        debounce?: number;
+        disabled?: boolean;
+        autofocus?: boolean;
+        placeholder?: string;
+        maxLength?: number | null;
+        /** Show clear button when value is present */
+        clearable?: boolean;
+        /** Validate on change event instead of input @default false */
+        validateOnChange?: boolean;
+        on?: {
+            input?: (value: string) => void;
+            change?: (value: string) => 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']>;
+}
+/** 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;

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

@@ -0,0 +1,235 @@
+<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(#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);
+}
+.input:focus, .input:focus-within {
+  --_input--default-shadow-color: var(--_input--accent-color);
+}
+.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--height: auto;
+}
+.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);
+}
+:global(.input__icon:not(:has(*))) {
+  margin-right: 0 !important;
+}
+.input__clear-wrapper {
+  color: var(--_input--icon--color);
+  font-size: var(--_input--icon--size);
+}
+.input__clear-button {
+  margin-left: 0.625em;
+}</style>

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

@@ -0,0 +1,60 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    value: string | null | undefined;
+    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

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

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

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

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

@@ -0,0 +1,9 @@
+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/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InputEmojiPicker } from './cmp.input-emoji-picker.svelte';
+export { inputEmojiPickerContainer } from './input-emoji-picker-container';

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

@@ -0,0 +1,2 @@
+export { default as InputEmojiPicker } from './cmp.input-emoji-picker.svelte';
+export { inputEmojiPickerContainer } from './input-emoji-picker-container';

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

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

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

@@ -0,0 +1,16 @@
+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);
+        }
+    };
+};