@streamscloud/kit 0.2.1 → 0.2.3

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);
+        }
+    };
+};

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

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

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

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

@@ -0,0 +1,248 @@
+<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(#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);
+}
+.numeral-input:focus, .numeral-input:focus-within {
+  --_input--default-shadow-color: var(--_input--accent-color);
+}
+.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;
+  --_input--height: auto;
+}
+.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);
+}
+: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);
+}
+.numeral-input__clear-button {
+  margin-left: 0.625em;
+}</style>

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

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

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

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

@@ -0,0 +1,58 @@
+<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(#d1d5db, #4b5563));
+  --_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

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

@@ -0,0 +1 @@
+export { default as PinInput } from './cmp.pin-input.svelte';

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

@@ -0,0 +1 @@
+export { default as PinInput } from './cmp.pin-input.svelte';

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

@@ -0,0 +1,27 @@
+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 {};