@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/select/types.d.ts

@@ -0,0 +1,211 @@
+import type { IconProp } from '../icon';
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+export type SelectOption<T> = {
+    label: string;
+    value: T;
+    disabled?: boolean;
+};
+export type SelectOptionGroup<T> = {
+    label: string;
+    /** When set together with `groupHeaderSelectable`, clicking the header emits this value. */
+    value?: T;
+    options: SelectOption<T>[];
+};
+/** Discriminated structurally — `'options' in item` distinguishes a group from an option. */
+export type SelectItem<T> = SelectOption<T> | SelectOptionGroup<T>;
+export declare const isSelectGroup: <T>(item: SelectItem<T>) => item is SelectOptionGroup<T>;
+/**
+ * Flat row passed to the shared listbox. Parent components build this list from their own data
+ * model (sync options + Fuse filter, async server response, multi-select with toggle membership,
+ * etc.) so the listbox stays semantics-agnostic.
+ */
+export type SelectRowOption<T> = {
+    kind: 'option';
+    option: SelectOption<T>;
+    group?: string;
+    indent: boolean;
+    selected: boolean;
+};
+export type SelectRowGroupHeader<T> = {
+    kind: 'group-header';
+    label: string;
+    /** Pre-computed by parent — header is clickable when consumer enables groupHeaderSelectable and group has a `value`. */
+    selectable: boolean;
+    selected: boolean;
+    /**
+     * Tri-state for `groupHeader='toggle-all'` + `selectionMode='children-include-parent'`.
+     * In every other configuration this is `'checked'` (= selected) or `'unchecked'`.
+     */
+    state: 'checked' | 'indeterminate' | 'unchecked';
+    value?: T;
+    /** The group's child options — used by `selectionMode='children-include-parent'` to cascade parent membership. */
+    options?: SelectOption<T>[];
+};
+export type SelectRowCreate = {
+    kind: 'create';
+    query: string;
+};
+export type SelectRow<T> = SelectRowOption<T> | SelectRowGroupHeader<T> | SelectRowCreate;
+/** Common (data-source-agnostic) prop surface shared by `Singleselect` (sync) and `SingleselectAsync`. */
+export type SingleselectCommonProps<T> = {
+    /** Trigger height preset. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Placeholder shown only when nothing is selected and the user is not typing. @default '' */
+    placeholder?: string;
+    /** Fully disabled — no focus, no interaction, dimmed styling. @default false */
+    disabled?: boolean;
+    /** Read-only — focusable, value visible, but selection cannot change. @default false */
+    readonly?: boolean;
+    /** Inert subtree — non-interactive but unstyled (use for "view-only" parents). @default false */
+    inert?: boolean;
+    /** Visual error state (accent border + aria-invalid). @default false */
+    error?: boolean;
+    /** Removes the field border; underline indicator still appears on open/error. @default false */
+    borderless?: boolean;
+    /**
+     * Group-header behavior:
+     * - `'static'` — non-interactive label (default).
+     * - `'value'` — clicking the header emits the group's own `value` (typed `T`); group must define `value`.
+     * @default 'static'
+     */
+    groupHeader?: 'static' | 'value';
+    /** Equality comparator for `T`. Required when `T` is an object. @default (a, b) => a === b */
+    compare?: (a: T, b: T) => boolean;
+    /** Enables creatable mode. The predicate validates each query — only when it returns true does the "Create …" row appear (and isn't a duplicate of an existing label). */
+    canCreate?: (query: string) => boolean;
+    /** Leading icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
+    icon?: IconProp;
+    /** Trailing chevron icon override. Same shape as `icon`. */
+    chevronIcon?: IconProp;
+    /** Custom row renderer. Replaces the option's label cell — receives `{ option }`. */
+    optionSnippet?: Snippet<[{
+        option: SelectOption<T>;
+    }]>;
+    /** Custom selection renderer (what's shown in the trigger when collapsed). Same shape as `optionSnippet`. */
+    selectionSnippet?: Snippet<[{
+        option: SelectOption<T>;
+    }]>;
+    /** Replaces the entire listbox body — consumer renders rows in any layout (e.g. a grid). Receives the rows produced by the existing filter pipeline + highlight index + the `pickRow`/`hoverRow` callbacks the default rendering uses, so search and selection still work through Singleselect. When this snippet is set, the listbox panel stops imposing a width (no `width`, no `min-width: trigger`), so the panel sizes to its content; `triggerWidth` is forwarded as a hint for consumers who want to opt back into stretching/shrinking to the trigger themselves. */
+    listbox?: Snippet<[
+        {
+            rows: SelectRow<T>[];
+            highlight: number;
+            triggerWidth: number | undefined;
+            on: {
+                pickRow: (row: SelectRow<T>) => void;
+                hoverRow: (index: number) => void;
+            };
+        }
+    ]>;
+    id?: string;
+    name?: string;
+    autocomplete?: HTMLInputAttributes['autocomplete'];
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    'aria-required'?: boolean;
+};
+/** Full prop surface of `multiselect-base.svelte`, shared with proxies via `Omit<…> & OwnProps`. */
+export type MultiselectBaseProps<T> = {
+    /** Server-side fetcher. Invoked with an empty query on open (initial page) and again — debounced — on every keystroke. */
+    loadOptions: (query: string) => Promise<SelectItem<T>[]>;
+    /** Debounce window for `loadOptions` while typing. @default 400 */
+    debounceMs?: number;
+    /** Current selection — array of pre-resolved options so chip labels render before the first fetch lands. */
+    value: SelectOption<T>[];
+    /** Trigger height preset. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Placeholder shown only when nothing is selected and the user is not typing. @default '' */
+    placeholder?: string;
+    /** Fully disabled — no focus, no interaction, dimmed styling. @default false */
+    disabled?: boolean;
+    /** Read-only — value visible, but selection cannot change. @default false */
+    readonly?: boolean;
+    /** Inert subtree — non-interactive but unstyled. @default false */
+    inert?: boolean;
+    /** Visual error state (accent border + aria-invalid). @default false */
+    error?: boolean;
+    /** Removes the field border. @default false */
+    borderless?: boolean;
+    /**
+     * Group-header behavior:
+     * - `'static'` — non-interactive label (default).
+     * - `'value'` — clicking the header toggles the group's own `value` in the selection.
+     * - `'toggle-all'` — clicking the header toggles every option in the group at once.
+     *   ⚠️ With async loadOptions, this toggles only the options on the current server page;
+     *   the consumer is responsible for preloading the full group if global toggle is needed.
+     * @default 'static'
+     */
+    groupHeader?: 'static' | 'value' | 'toggle-all';
+    /** Equality comparator for `T`. Required when `T` is an object. @default (a, b) => a === b */
+    compare?: (a: T, b: T) => boolean;
+    /**
+     * Multi cascade behavior when `groupHeader='toggle-all'`:
+     * - `'children-only'` (default) — picking a child adds only the child; the group's own `value` stays independent.
+     * - `'children-include-parent'` — picking any child auto-adds the group's `value` to the selection; unpicking the last child removes it. Toggle-all on the header in this mode also adds/removes the group's `value` together with children.
+     * @default 'children-only'
+     */
+    selectionMode?: 'children-only' | 'children-include-parent';
+    /**
+     * How rows render selected state inside the listbox:
+     * - `'checkmark'` (default) — ✓ on the right; group headers show check only in `'checked'` state.
+     * - `'checkbox'` — checkbox on the left of every row; group headers show tri-state in `selectionMode='children-include-parent'`, binary otherwise.
+     * - `'highlight'` — selected rows get the active background only.
+     * @default 'checkmark'
+     */
+    selectedDisplay?: 'checkmark' | 'checkbox' | 'highlight';
+    /** Enables creatable mode. The predicate validates each query — only when it returns true does the create UI appear. When options contain groups, a create-with-parent section replaces the simple "Create …" row. */
+    canCreate?: (query: string) => boolean;
+    /** Where chips render. `'external'` puts them in a row above the trigger and unlocks `reorderable`. @default 'inline' */
+    chipMode?: 'inline' | 'external';
+    /** Enables drag-and-drop reorder on the external chip row. Ignored unless `chipMode='external'`. @default false */
+    reorderable?: boolean;
+    /** Inline-mode only: collapses chips beyond N into a "+N more" indicator. @default Infinity */
+    maxVisible?: number;
+    /** Chips don't truncate their labels with ellipsis. @default false */
+    showFullItem?: boolean;
+    /** Chip color tone. When set, overrides the chip's default colors (e.g. `'accent'` for a tag-input look). */
+    chipVariant?: 'neutral' | 'accent';
+    /** Show the trailing chevron. Set `false` for a plain field look (e.g. tag input). The loading spinner still shows. @default true */
+    showChevron?: boolean;
+    /** Hide already-selected options from the listbox (tag-input style — picked tags disappear from suggestions). @default false */
+    hideSelected?: boolean;
+    /** Leading icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
+    icon?: IconProp;
+    /** Trailing chevron icon override. Same shape as `icon`. */
+    chevronIcon?: IconProp;
+    /** Custom row renderer. Replaces the option's label cell — receives `{ option }`. */
+    optionSnippet?: Snippet<[{
+        option: SelectOption<T>;
+    }]>;
+    /** Custom chip renderer (replaces both inline and external chip label cells). */
+    chipSnippet?: Snippet<[{
+        option: SelectOption<T>;
+    }]>;
+    /** When provided, replaces the entire chip row inside the trigger. Pass an empty snippet to hide chips completely (selection visible only inside the popover). */
+    selectionSnippet?: Snippet<[{
+        options: SelectOption<T>[];
+    }]>;
+    /**
+     * Enables the create-with-parent section (shown above the listbox when `canCreate` gates true).
+     * Receives the FULL group list independent of current filter — so the parent picker offers every
+     * group regardless of what's currently visible in the listbox. When undefined or empty, a
+     * single "Create …" row is shown instead.
+     */
+    parentSource?: SelectOption<T>[];
+    id?: string;
+    name?: string;
+    autocomplete?: HTMLInputAttributes['autocomplete'];
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    'aria-required'?: boolean;
+    on?: {
+        /** Fires when the user picks/unpicks/reorders. Emits the full new selection. */
+        change?: (value: SelectOption<T>[]) => void;
+        /** Fires when the user activates "Create …". When `parentValue` is present, the user picked it via the create-with-parent section (shown when options contain groups). Return a Promise to keep the spinner up until the consumer finishes. */
+        create?: (payload: {
+            query: string;
+            parentValue?: T;
+        }) => void | Promise<void>;
+    };
+};

package/dist/ui/select/types.js

@@ -0,0 +1 @@
+export const isSelectGroup = (item) => 'options' in item;

package/dist/ui/skeleton/cmp.skeleton.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">let { shape = 'rect', lines = 1 } = $props();
+</script>
+
+{#if shape === 'text' && lines > 1}
+  <span class="skeleton-stack">
+    {#each Array(lines) as _, i (i)}
+      <span class="skeleton skeleton--text" class:skeleton--text-last={i === lines - 1}></span>
+    {/each}
+  </span>
+{:else}
+  <span class="skeleton skeleton--{shape}"></span>
+{/if}
+
+<!--
+@component
+Skeleton — content placeholder rendered while data is loading. Three shapes: `rect` (default — generic block), `circle` (avatars), `text` (one or more text lines via `lines` — the last line is naturally shorter to suggest a paragraph end). All dimensions are CSS-var driven; sizing is the consumer's concern.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--skeleton--width` | Width (rect / circle / per text-line) | `100%` |
+| `--sc-kit--skeleton--height` | Height (rect / circle) | `1em` |
+| `--sc-kit--skeleton--text-height` | Per-line height in `shape='text'` | `0.75em` |
+| `--sc-kit--skeleton--text-last-width` | Width of the last line in multi-line text | `70%` |
+| `--sc-kit--skeleton--text-gap` | Vertical gap between text lines | `--sc-kit--space--2` |
+| `--sc-kit--skeleton--base-color` | Shimmer base (darker stop) | `--sc-kit--color--bg--active` |
+| `--sc-kit--skeleton--highlight-color` | Shimmer peak (lighter stop) | `--sc-kit--color--bg--hover` |
+| `--sc-kit--skeleton--radius` | Corner radius (rect / text) | `--sc-kit--radius--sm` |
+| `--sc-kit--skeleton--duration` | Animation cycle length | `2.2s` |
+-->
+
+<style>.skeleton {
+  --_skeleton--width: var(--sc-kit--skeleton--width, 100%);
+  --_skeleton--height: var(--sc-kit--skeleton--height, 1em);
+  --_skeleton--text-height: var(--sc-kit--skeleton--text-height, 0.75em);
+  --_skeleton--text-last-width: var(--sc-kit--skeleton--text-last-width, 70%);
+  --_skeleton--base-color: var(--sc-kit--skeleton--base-color, var(--sc-kit--color--bg--active));
+  --_skeleton--highlight-color: var(--sc-kit--skeleton--highlight-color, var(--sc-kit--color--bg--hover));
+  --_skeleton--radius: var(--sc-kit--skeleton--radius, var(--sc-kit--radius--sm));
+  --_skeleton--duration: var(--sc-kit--skeleton--duration, 2.2s);
+  display: block;
+  background: linear-gradient(90deg, var(--_skeleton--base-color) 0%, var(--_skeleton--highlight-color) 50%, var(--_skeleton--base-color) 100%);
+  background-size: 200% 100%;
+  animation: kit-skeleton-shimmer var(--_skeleton--duration) ease-in-out infinite;
+  border-radius: var(--_skeleton--radius);
+  width: var(--_skeleton--width);
+  height: var(--_skeleton--height);
+}
+.skeleton--circle {
+  border-radius: 50%;
+}
+.skeleton--text {
+  height: var(--_skeleton--text-height);
+}
+.skeleton--text-last {
+  width: var(--_skeleton--text-last-width);
+}
+
+.skeleton-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sc-kit--skeleton--text-gap, var(--sc-kit--space--2));
+}
+
+@keyframes kit-skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}</style>

package/dist/ui/skeleton/cmp.skeleton.svelte.d.ts

@@ -0,0 +1,25 @@
+type Props = {
+    /** Shape variant. @default 'rect' */
+    shape?: 'rect' | 'circle' | 'text';
+    /** For `shape='text'` only — render N stacked text lines (last one naturally shorter to suggest paragraph end). @default 1 */
+    lines?: number;
+};
+/**
+ * Skeleton — content placeholder rendered while data is loading. Three shapes: `rect` (default — generic block), `circle` (avatars), `text` (one or more text lines via `lines` — the last line is naturally shorter to suggest a paragraph end). All dimensions are CSS-var driven; sizing is the consumer's concern.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--skeleton--width` | Width (rect / circle / per text-line) | `100%` |
+ * | `--sc-kit--skeleton--height` | Height (rect / circle) | `1em` |
+ * | `--sc-kit--skeleton--text-height` | Per-line height in `shape='text'` | `0.75em` |
+ * | `--sc-kit--skeleton--text-last-width` | Width of the last line in multi-line text | `70%` |
+ * | `--sc-kit--skeleton--text-gap` | Vertical gap between text lines | `--sc-kit--space--2` |
+ * | `--sc-kit--skeleton--base-color` | Shimmer base (darker stop) | `--sc-kit--color--bg--active` |
+ * | `--sc-kit--skeleton--highlight-color` | Shimmer peak (lighter stop) | `--sc-kit--color--bg--hover` |
+ * | `--sc-kit--skeleton--radius` | Corner radius (rect / text) | `--sc-kit--radius--sm` |
+ * | `--sc-kit--skeleton--duration` | Animation cycle length | `2.2s` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1 @@
+export { default as Skeleton } from './cmp.skeleton.svelte';

package/dist/ui/skeleton/index.js

@@ -0,0 +1 @@
+export { default as Skeleton } from './cmp.skeleton.svelte';

package/dist/ui/slider/cmp.slider.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">let { value, min = 0, max = 100, step = 1, disabled = false, showValue = false, withInput = false, ticks = [], valueSuffix = '', on } = $props();
+let focused = $state(false);
+const fillPct = $derived(max === min ? 0 : ((value - min) / (max - min)) * 100);
+const handleInput = (e) => {
+    on?.input?.(Number(e.currentTarget.value));
+};
+const handleChange = (e) => {
+    on?.change?.(Number(e.currentTarget.value));
+};
+const handleNumeric = (e) => {
+    const raw = Number(e.currentTarget.value);
+    if (Number.isNaN(raw)) {
+        return;
+    }
+    const clamped = Math.min(max, Math.max(min, raw));
+    on?.input?.(clamped);
+    on?.change?.(clamped);
+};
+</script>
+
+<div class="slider" class:slider--disabled={disabled}>
+  <div class="slider__track">
+    <span class="slider__fill" style:width="{fillPct}%"></span>
+    <input
+      type="range"
+      class="slider__input"
+      min={min}
+      max={max}
+      step={step}
+      disabled={disabled}
+      value={value}
+      oninput={handleInput}
+      onchange={handleChange}
+      onfocus={(e) => (focused = e.currentTarget.matches(':focus-visible'))}
+      onblur={() => (focused = false)} />
+    <span class="slider__thumb" class:slider__thumb--focused={focused} style:left="{fillPct}%"></span>
+  </div>
+  {#if showValue}
+    <span class="slider__value">{value}{valueSuffix}</span>
+  {/if}
+  {#if withInput}
+    <input type="number" class="slider__numeric" min={min} max={max} step={step} disabled={disabled} value={value} oninput={handleNumeric} />
+  {/if}
+</div>
+
+{#if ticks.length}
+  <div class="slider__ticks">
+    {#each ticks as tick (tick)}
+      <span class="slider__tick">{tick}</span>
+    {/each}
+  </div>
+{/if}
+
+<!--
+@component
+Slider — single-value range input. Controlled via `value` + `on.input` / `on.change` (no binding).
+Optionally renders the current value, a numeric input alongside the track, and tick labels below.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--slider--gap` | Gap between track and value / input | `var(--sc-kit--space--3)` |
+| `--sc-kit--slider--track--height` | Track height | `0.25rem` |
+| `--sc-kit--slider--track--color` | Track background | `var(--sc-kit--color--bg--active)` |
+| `--sc-kit--slider--fill--color` | Filled portion color | `var(--sc-kit--color--accent)` |
+| `--sc-kit--slider--thumb--size` | Thumb diameter | `0.875rem` |
+| `--sc-kit--slider--thumb--color` | Thumb background | `var(--sc-kit--color--bg--panel)` |
+| `--sc-kit--slider--thumb--border-color` | Thumb border | `var(--sc-kit--color--accent)` |
+-->
+<style>.slider {
+  display: flex;
+  align-items: center;
+  gap: var(--sc-kit--slider--gap, var(--sc-kit--space--3));
+  width: 100%;
+}
+.slider--disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.slider__track {
+  flex: 1;
+  position: relative;
+  height: var(--sc-kit--slider--track--height, 0.25rem);
+  background: var(--sc-kit--slider--track--color, var(--sc-kit--color--bg--active));
+  border-radius: var(--sc-kit--radius--pill);
+  cursor: pointer;
+}
+.slider__fill {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background: var(--sc-kit--slider--fill--color, var(--sc-kit--color--accent));
+  border-radius: var(--sc-kit--radius--pill);
+  pointer-events: none;
+}
+.slider__input {
+  position: absolute;
+  inset: -0.5rem 0;
+  width: 100%;
+  height: calc(100% + 1rem);
+  margin: 0;
+  background: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  opacity: 0;
+}
+.slider__input:disabled {
+  cursor: default;
+}
+.slider__thumb {
+  position: absolute;
+  top: 50%;
+  width: var(--sc-kit--slider--thumb--size, 0.875rem);
+  height: var(--sc-kit--slider--thumb--size, 0.875rem);
+  background: var(--sc-kit--slider--thumb--color, var(--sc-kit--color--bg--panel));
+  border: 2px solid var(--sc-kit--slider--thumb--border-color, var(--sc-kit--color--accent));
+  border-radius: var(--sc-kit--radius--circle);
+  box-shadow: var(--sc-kit--shadow--sm);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+.slider__thumb--focused {
+  box-shadow: var(--sc-kit--shadow--sm), 0 0 0 0.1875rem var(--sc-kit--color--accent--soft);
+}
+.slider__value {
+  min-width: 2.5rem;
+  font-size: var(--sc-kit--font-size--sm);
+  color: var(--sc-kit--color--text--secondary);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+.slider__numeric {
+  width: 4rem;
+  height: var(--sc-kit--field--height--sm);
+  padding: 0 var(--sc-kit--space--2);
+  text-align: center;
+  font-size: var(--sc-kit--font-size--sm);
+  font-variant-numeric: tabular-nums;
+  background: var(--sc-kit--color--bg--field);
+  border: 1px solid var(--sc-kit--color--border--field);
+  border-radius: var(--sc-kit--radius--sm);
+  color: var(--sc-kit--color--text--primary);
+}
+.slider__numeric:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 1px;
+}
+.slider__ticks {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--sc-kit--space--2);
+  padding: 0 0.125rem;
+}
+.slider__tick {
+  font-size: var(--sc-kit--font-size--xs);
+  color: var(--sc-kit--color--text--muted);
+  font-variant-numeric: tabular-nums;
+}</style>

package/dist/ui/slider/cmp.slider.svelte.d.ts

@@ -0,0 +1,40 @@
+type Props = {
+    value: number;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** @default 1 */
+    step?: number;
+    disabled?: boolean;
+    /** Show the current value at the right of the track. @default false */
+    showValue?: boolean;
+    /** Show a numeric input next to the slider. @default false */
+    withInput?: boolean;
+    /** Tick labels rendered evenly under the track. */
+    ticks?: string[];
+    /** Suffix appended to the displayed value (e.g. ' %'). @default '' */
+    valueSuffix?: string;
+    on?: {
+        change?: (value: number) => void;
+        input?: (value: number) => void;
+    };
+};
+/**
+ * Slider — single-value range input. Controlled via `value` + `on.input` / `on.change` (no binding).
+ * Optionally renders the current value, a numeric input alongside the track, and tick labels below.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--slider--gap` | Gap between track and value / input | `var(--sc-kit--space--3)` |
+ * | `--sc-kit--slider--track--height` | Track height | `0.25rem` |
+ * | `--sc-kit--slider--track--color` | Track background | `var(--sc-kit--color--bg--active)` |
+ * | `--sc-kit--slider--fill--color` | Filled portion color | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--slider--thumb--size` | Thumb diameter | `0.875rem` |
+ * | `--sc-kit--slider--thumb--color` | Thumb background | `var(--sc-kit--color--bg--panel)` |
+ * | `--sc-kit--slider--thumb--border-color` | Thumb border | `var(--sc-kit--color--accent)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1 @@
+export { default as Slider } from './cmp.slider.svelte';

package/dist/ui/slider/index.js

@@ -0,0 +1 @@
+export { default as Slider } from './cmp.slider.svelte';