@loidolt/theme-svelte 0.4.0 → 0.6.0

package/dist/components/MediaEmbed.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AspectRatioName, type EmbedProvider } from '../media-utils.js';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+    /** A YouTube or Vimeo page, share or embed URL. */
+    url?: string;
+    /** Or name the video directly. */
+    provider?: EmbedProvider;
+    videoId?: string;
+    /** Required: names the iframe and the play button. */
+    title: string;
+    /**
+     * Still shown before the player loads. None is fetched from the provider by default — that
+     * request alone would tell them someone opened the page.
+     */
+    poster?: string;
+    /** No-tracking hosts: `youtube-nocookie.com`, Vimeo's `dnt=1`. */
+    privacy?: boolean;
+    /** Start offset in seconds. Read from the URL when it carries one. */
+    start?: number;
+    /**
+     * Load the provider's player straight away. By default a local facade stands in until the
+     * user presses play, so no third-party request happens before they choose to watch.
+     */
+    eager?: boolean;
+    ratio?: AspectRatioName | number | string;
+    playLabel?: (title: string) => string;
+    /** Shown when the URL is not a recognised YouTube or Vimeo link. */
+    unsupportedText?: string;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+declare const MediaEmbed: import("svelte").Component<Props, {}, "ref">;
+type MediaEmbed = ReturnType<typeof MediaEmbed>;
+export default MediaEmbed;

package/dist/components/MediaGrid.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { rovingFocus } from '../attachments.js';
+  import MediaTile from '../internal/media/MediaTile.svelte';
+  import { mediaKey, type AspectRatioName, type MediaItem } from '../media-utils.js';
+  import { cx } from '../utils.js';
+  import Lightbox from './Lightbox.svelte';
+
+  interface Props extends Omit<HTMLAttributes<HTMLUListElement>, 'children'> {
+    items: MediaItem[];
+    /** Accessible name of the collection. */
+    label: string;
+    /** `grid` crops tiles to `ratio`; `masonry` keeps each image's own shape in columns. */
+    variant?: 'grid' | 'masonry';
+    /** Narrowest a column may get before the grid drops one. */
+    minColumnWidth?: string;
+    gap?: 'sm' | 'md' | 'lg';
+    ratio?: AspectRatioName | string | number;
+    /** Open a `Lightbox` on the pressed item. */
+    lightbox?: boolean;
+    /** Called when an item is pressed, whether or not the lightbox opens. */
+    onSelect?: (index: number, item: MediaItem) => void;
+    /** Words for the marker on time-based tiles. */
+    kindLabels?: Partial<Record<MediaItem['kind'], string>>;
+    class?: string;
+    ref?: HTMLUListElement | null;
+  }
+
+  let {
+    items,
+    label,
+    variant = 'grid',
+    minColumnWidth = '12rem',
+    gap = 'md',
+    ratio = 'photo',
+    lightbox = true,
+    onSelect,
+    kindLabels,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const kinds = $derived({
+    image: 'Image',
+    video: 'Video',
+    audio: 'Audio',
+    embed: 'Video',
+    ...kindLabels,
+  });
+  let open = $state(false);
+  let active = $state(0);
+
+  function select(index: number) {
+    onSelect?.(index, items[index]);
+    if (!lightbox) return;
+    active = index;
+    open = true;
+  }
+</script>
+
+<!--
+  A list with one tab stop: arrow keys, Home and End move between tiles, so a long gallery costs
+  a keyboard user one Tab rather than one per image.
+-->
+<ul
+  bind:this={ref}
+  class={cx(
+    'ldt-media-grid',
+    variant === 'masonry' && 'ldt-media-grid--masonry',
+    gap !== 'md' && `ldt-media-grid--${gap}`,
+    className
+  )}
+  style:--ldt-media-grid-min={minColumnWidth}
+  aria-label={label}
+  {@attach rovingFocus({ orientation: 'both' })}
+  {...rest}
+>
+  {#each items as item, index (mediaKey(item, index))}
+    <li class="ldt-media-grid__item">
+      <MediaTile
+        {item}
+        {index}
+        ratio={variant === 'masonry' ? 'auto' : ratio}
+        kindLabels={kinds}
+        onSelect={() => select(index)}
+      />
+    </li>
+  {/each}
+</ul>
+{#if lightbox}<Lightbox {items} bind:open bind:index={active} title={label} showThumbnails />{/if}

package/dist/components/MediaGrid.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AspectRatioName, type MediaItem } from '../media-utils.js';
+interface Props extends Omit<HTMLAttributes<HTMLUListElement>, 'children'> {
+    items: MediaItem[];
+    /** Accessible name of the collection. */
+    label: string;
+    /** `grid` crops tiles to `ratio`; `masonry` keeps each image's own shape in columns. */
+    variant?: 'grid' | 'masonry';
+    /** Narrowest a column may get before the grid drops one. */
+    minColumnWidth?: string;
+    gap?: 'sm' | 'md' | 'lg';
+    ratio?: AspectRatioName | string | number;
+    /** Open a `Lightbox` on the pressed item. */
+    lightbox?: boolean;
+    /** Called when an item is pressed, whether or not the lightbox opens. */
+    onSelect?: (index: number, item: MediaItem) => void;
+    /** Words for the marker on time-based tiles. */
+    kindLabels?: Partial<Record<MediaItem['kind'], string>>;
+    class?: string;
+    ref?: HTMLUListElement | null;
+}
+declare const MediaGrid: import("svelte").Component<Props, {}, "ref">;
+type MediaGrid = ReturnType<typeof MediaGrid>;
+export default MediaGrid;

package/dist/components/MultiSelect.svelte

@@ -0,0 +1,232 @@
+<script lang="ts" generics="T extends string = string">
+  import { Combobox as ComboboxPrimitive, type ComboboxInputProps } from 'bits-ui';
+  import { tick, type Snippet } from 'svelte';
+  import ListboxEntries from '../internal/ListboxEntries.svelte';
+  import {
+    filterEntries,
+    flattenOptions,
+    matchesQuery,
+    type OptionEntry,
+  } from '../internal/options.js';
+  import type { Option } from '../types.js';
+  import { cx } from '../utils.js';
+  import LiveRegion from './LiveRegion.svelte';
+
+  type Props = Omit<
+    ComboboxInputProps,
+    'value' | 'child' | 'children' | 'defaultValue' | 'clearOnDeselect' | 'oninput' | 'ref'
+  > & {
+    /** The selected values, in the order they were chosen. */
+    value?: T[];
+    /** Options, optionally in labelled groups. */
+    options: OptionEntry<T>[];
+    /** Accessible name when the control is not wrapped in a `Field` or `<label>`. */
+    label?: string;
+    /** Most values that can be chosen. Remaining options disable once it is reached. */
+    max?: number;
+    disabled?: boolean;
+    required?: boolean;
+    /** Submits each selected value under this name. */
+    name?: string;
+    /** How typing narrows the list. `false` when `onQueryChange` filters on a server. */
+    filter?: ((option: Option<T>, query: string) => boolean) | false;
+    query?: string;
+    onQueryChange?: (query: string) => void;
+    queryDebounce?: number;
+    loading?: boolean;
+    loadingText?: string;
+    emptyText?: string;
+    resultsText?: (count: number, selected: number) => string;
+    maxText?: (max: number) => string;
+    /** Accessible name of each chip's remove button. */
+    removeLabel?: (label: string) => string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onValueChange?: (value: T[]) => void;
+    /** Draws the full box instead of the default underline. */
+    boxed?: boolean;
+    triggerLabel?: string;
+    item?: Snippet<[Option<T>, { selected: boolean; highlighted: boolean }]>;
+    /** Lands on the wrapper; the rest props land on the text input. */
+    class?: string;
+    contentClass?: string;
+    ref?: HTMLElement | null;
+  };
+
+  let {
+    value = $bindable([]),
+    options,
+    label,
+    max,
+    disabled = false,
+    required = false,
+    name,
+    filter,
+    query = $bindable(''),
+    onQueryChange,
+    queryDebounce = 0,
+    loading = false,
+    loadingText = 'Loading…',
+    emptyText = 'No results',
+    resultsText = (count, selected) =>
+      `${count} ${count === 1 ? 'result' : 'results'}, ${selected} selected`,
+    maxText = (limit) => `Up to ${limit} can be chosen`,
+    removeLabel = (text) => `Remove ${text}`,
+    open = $bindable(false),
+    onOpenChange,
+    onValueChange,
+    boxed = false,
+    triggerLabel = 'Show options',
+    item,
+    class: className,
+    contentClass,
+    onkeydown,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const flat = $derived(flattenOptions(options));
+  const chosen = $derived(
+    value.map((one) => flat.find((option) => option.value === one) ?? { value: one, label: one })
+  );
+  const full = $derived(max !== undefined && value.length >= max);
+  const visible = $derived(
+    filter === false || !query
+      ? options
+      : filterEntries(options, (option) => (filter ?? matchesQuery)(option, query))
+  );
+  const count = $derived(flattenOptions(visible).length);
+
+  let text = $state('');
+  let chips = $state<HTMLElement | null>(null);
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  $effect(() => () => clearTimeout(timer));
+
+  function setValue(next: T[]) {
+    value = next;
+    onValueChange?.(next);
+  }
+
+  function handleInput(event: Event & { currentTarget: HTMLInputElement }) {
+    query = event.currentTarget.value;
+    text = query;
+    if (!onQueryChange) return;
+    clearTimeout(timer);
+    const next = query;
+    if (queryDebounce > 0) timer = setTimeout(() => onQueryChange(next), queryDebounce);
+    else onQueryChange(next);
+  }
+
+  async function handleValueChange(next: string[]) {
+    // Bits writes the chosen label into the input; for a multi-select the input is for searching,
+    // so hand it back empty. The two-step write is what makes the prop change reach Bits.
+    const option = flat.find((one) => one.value === next[next.length - 1]);
+    text = option?.label ?? '';
+    onValueChange?.(next as T[]);
+    await tick();
+    text = '';
+    query = '';
+  }
+
+  function handleOpenChange(next: boolean) {
+    if (!next) {
+      text = '';
+      query = '';
+    }
+    onOpenChange?.(next);
+  }
+
+  async function remove(target: T, index: number) {
+    setValue(value.filter((one) => one !== target));
+    await tick();
+    // Focus follows the removal: the next chip, else the previous one, else the input.
+    const buttons = chips?.querySelectorAll<HTMLButtonElement>('.ldt-chip__remove') ?? [];
+    (buttons[index] ?? buttons[index - 1] ?? ref)?.focus();
+  }
+
+  function handleKeydown(event: KeyboardEvent & { currentTarget: HTMLInputElement }) {
+    onkeydown?.(event);
+    if (event.defaultPrevented) return;
+    if (event.key === 'Backspace' && event.currentTarget.value === '' && value.length) {
+      setValue(value.slice(0, -1));
+    }
+  }
+
+  const announcement = $derived(
+    !open
+      ? ''
+      : loading
+        ? loadingText
+        : [count === 0 ? emptyText : resultsText(count, value.length), full && maxText(max!)]
+            .filter(Boolean)
+            .join('. ')
+  );
+</script>
+
+<ComboboxPrimitive.Root
+  type="multiple"
+  bind:value={() => value, (next) => (value = next as T[])}
+  bind:open
+  inputValue={text}
+  items={flat}
+  {disabled}
+  {required}
+  {name}
+  onOpenChange={handleOpenChange}
+  onValueChange={handleValueChange}
+>
+  <div
+    class={cx('ldt-combobox', 'ldt-multi-select', boxed && 'ldt-combobox--boxed', className)}
+    data-disabled={disabled ? '' : undefined}
+  >
+    {#if chosen.length}
+      <ul class="ldt-multi-select__chips" bind:this={chips}>
+        {#each chosen as option, index (option.value)}
+          <li class="ldt-chip">
+            <span>{option.label}</span>
+            <button
+              type="button"
+              class="ldt-chip__remove"
+              aria-label={removeLabel(option.label)}
+              {disabled}
+              onclick={() => remove(option.value, index)}
+              ><svg viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" focusable="false"
+                ><path d="m2 2 6 6M8 2 2 8" stroke="currentColor" stroke-width="1.4" /></svg
+              ></button
+            >
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    <ComboboxPrimitive.Input
+      bind:ref
+      class="ldt-combobox__input"
+      aria-label={label}
+      autocomplete="off"
+      {...rest}
+      oninput={handleInput}
+      onkeydown={handleKeydown}
+    />
+    <ComboboxPrimitive.Trigger class="ldt-combobox__trigger" aria-label={triggerLabel}>
+      <svg viewBox="0 0 12 12" width="12" height="12" aria-hidden="true" focusable="false"
+        ><path d="M2 4.5 6 8.5l4-4" fill="none" stroke="currentColor" stroke-width="1.5" /></svg
+      >
+    </ComboboxPrimitive.Trigger>
+  </div>
+  <ComboboxPrimitive.Portal>
+    <ComboboxPrimitive.Content class={cx('ldt-listbox', contentClass)} sideOffset={4}>
+      {#if loading}
+        <div class="ldt-listbox__empty" aria-hidden="true">{loadingText}</div>
+      {:else if count === 0}
+        <div class="ldt-listbox__empty" aria-hidden="true">{emptyText}</div>
+      {:else}
+        <ListboxEntries
+          entries={visible}
+          {item}
+          blocked={(option) => full && !value.includes(option.value)}
+        />
+      {/if}
+    </ComboboxPrimitive.Content>
+  </ComboboxPrimitive.Portal>
+</ComboboxPrimitive.Root>
+<LiveRegion message={announcement} />

package/dist/components/MultiSelect.svelte.d.ts

@@ -0,0 +1,67 @@
+import { Combobox as ComboboxPrimitive } from 'bits-ui';
+import { type Snippet } from 'svelte';
+import { type OptionEntry } from '../internal/options.js';
+import type { Option } from '../types.js';
+declare function $$render<T extends string = string>(): {
+    props: Omit<ComboboxPrimitive.InputProps, "value" | "children" | "oninput" | "ref" | "child" | "defaultValue" | "clearOnDeselect"> & {
+        /** The selected values, in the order they were chosen. */
+        value?: T[];
+        /** Options, optionally in labelled groups. */
+        options: OptionEntry<T>[];
+        /** Accessible name when the control is not wrapped in a `Field` or `<label>`. */
+        label?: string;
+        /** Most values that can be chosen. Remaining options disable once it is reached. */
+        max?: number;
+        disabled?: boolean;
+        required?: boolean;
+        /** Submits each selected value under this name. */
+        name?: string;
+        /** How typing narrows the list. `false` when `onQueryChange` filters on a server. */
+        filter?: ((option: Option<T>, query: string) => boolean) | false;
+        query?: string;
+        onQueryChange?: (query: string) => void;
+        queryDebounce?: number;
+        loading?: boolean;
+        loadingText?: string;
+        emptyText?: string;
+        resultsText?: (count: number, selected: number) => string;
+        maxText?: (max: number) => string;
+        /** Accessible name of each chip's remove button. */
+        removeLabel?: (label: string) => string;
+        open?: boolean;
+        onOpenChange?: (open: boolean) => void;
+        onValueChange?: (value: T[]) => void;
+        /** Draws the full box instead of the default underline. */
+        boxed?: boolean;
+        triggerLabel?: string;
+        item?: Snippet<[Option<T>, {
+            selected: boolean;
+            highlighted: boolean;
+        }]>;
+        /** Lands on the wrapper; the rest props land on the text input. */
+        class?: string;
+        contentClass?: string;
+        ref?: HTMLElement | null;
+    };
+    exports: {};
+    bindings: "value" | "ref" | "open" | "query";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string = string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value" | "ref" | "open" | "query";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string = string>(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 string = string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const MultiSelect: $$IsomorphicComponent;
+type MultiSelect<T extends string = string> = InstanceType<typeof MultiSelect<T>>;
+export default MultiSelect;

package/dist/components/NumberField.svelte

@@ -1,9 +1,10 @@
-<script lang="ts">
+<script lang="ts" generics="V extends number | null = number">
   import type { HTMLInputAttributes } from 'svelte/elements';
   import { cx } from '../utils.js';
 
   interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'min' | 'max' | 'step'> {
-    value?: number;
+    /** A number, or `null` for an empty field when `nullable` is set. */
+    value?: V;
     min?: number;
     max?: number;
     step?: number;
@@ -13,7 +14,15 @@
     incrementLabel?: (label: string) => string;
     /** Draws the full box instead of the default underline. */
     boxed?: boolean;
-    onValueChange?: (value: number) => void;
+    /**
+     * Let the field be empty: clearing it yields `null` instead of snapping to the low bound.
+     * For optional quantities where "not set" differs from zero. Type `value` as
+     * `number | null` to bind it.
+     */
+    nullable?: boolean;
+    /** Hide the − and + buttons, for dense tables. The keyboard still steps with the arrows. */
+    hideSteppers?: boolean;
+    onValueChange?: (value: V) => void;
     /** `class` lands on the wrapper; use `inputClass` to reach the input. */
     class?: string;
     inputClass?: string;
@@ -21,7 +30,7 @@
   }
 
   let {
-    value = $bindable(0),
+    value = $bindable(0 as V),
     min = -Infinity,
     max = Infinity,
     step = 1,
@@ -29,7 +38,10 @@
     decrementLabel = (name) => `Decrease ${name}`,
     incrementLabel = (name) => `Increase ${name}`,
     boxed = false,
+    nullable = false,
+    hideSteppers = false,
     disabled = false,
+    readonly = false,
     onValueChange,
     onchange,
     class: className,
@@ -41,33 +53,49 @@
   /** Clearing the input yields `NaN`; fall back to the low bound rather than wedging the field. */
   const fallback = $derived(Number.isFinite(min) ? min : 0);
 
-  const atMin = $derived(value <= min);
-  const atMax = $derived(value >= max);
+  const current = $derived(value === null ? null : (value as number));
+  const atMin = $derived(current !== null && current <= min);
+  const atMax = $derived(current !== null && current >= max);
+  const locked = $derived(Boolean(disabled) || Boolean(readonly));
 
   function set(next: number) {
-    value = Number.isFinite(next) ? Math.min(max, Math.max(min, next)) : fallback;
+    value = (
+      Number.isFinite(next) ? Math.min(max, Math.max(min, next)) : nullable ? null : fallback
+    ) as V;
     onValueChange?.(value);
   }
+
+  // Stepping from an empty field starts at the low bound, the same place clearing lands.
+  const nudge = (direction: 1 | -1) =>
+    set((current ?? fallback) + (current === null ? 0 : step * direction));
 </script>
 
-<div class={cx('ldt-number-field', boxed && 'ldt-number-field--boxed', className)}>
-  <button
-    class="ldt-number-field__button"
-    type="button"
-    {disabled}
-    aria-label={decrementLabel(label)}
-    aria-disabled={atMin || undefined}
-    onclick={() => !atMin && set(value - step)}>−</button
-  >
+<div
+  class={cx(
+    'ldt-number-field',
+    boxed && 'ldt-number-field--boxed',
+    hideSteppers && 'ldt-number-field--bare',
+    className
+  )}
+>
+  {#if !hideSteppers}<button
+      class="ldt-number-field__button"
+      type="button"
+      {disabled}
+      aria-label={decrementLabel(label)}
+      aria-disabled={atMin || readonly || undefined}
+      onclick={() => !atMin && !locked && nudge(-1)}>−</button
+    >{/if}
   <input
     bind:this={ref}
     class={cx('ldt-number-field__input', inputClass)}
     type="number"
-    bind:value
+    bind:value={() => value, (next) => (value = next as V)}
     min={Number.isFinite(min) ? min : undefined}
     max={Number.isFinite(max) ? max : undefined}
     {step}
     {disabled}
+    {readonly}
     aria-label={label}
     {...rest}
     onchange={(event) => {
@@ -78,12 +106,12 @@
       onchange?.(event);
     }}
   />
-  <button
-    class="ldt-number-field__button"
-    type="button"
-    {disabled}
-    aria-label={incrementLabel(label)}
-    aria-disabled={atMax || undefined}
-    onclick={() => !atMax && set(value + step)}>+</button
-  >
+  {#if !hideSteppers}<button
+      class="ldt-number-field__button"
+      type="button"
+      {disabled}
+      aria-label={incrementLabel(label)}
+      aria-disabled={atMax || readonly || undefined}
+      onclick={() => !atMax && !locked && nudge(1)}>+</button
+    >{/if}
 </div>

package/dist/components/NumberField.svelte.d.ts

@@ -1,21 +1,50 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
-interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'min' | 'max' | 'step'> {
-    value?: number;
-    min?: number;
-    max?: number;
-    step?: number;
-    /** Accessible name of the field; also used to name the two spin buttons. */
-    label: string;
-    decrementLabel?: (label: string) => string;
-    incrementLabel?: (label: string) => string;
-    /** Draws the full box instead of the default underline. */
-    boxed?: boolean;
-    onValueChange?: (value: number) => void;
-    /** `class` lands on the wrapper; use `inputClass` to reach the input. */
-    class?: string;
-    inputClass?: string;
-    ref?: HTMLInputElement | null;
+declare function $$render<V extends number | null = number>(): {
+    props: Omit<HTMLInputAttributes, "value" | "type" | "step" | "max" | "min"> & {
+        /** A number, or `null` for an empty field when `nullable` is set. */
+        value?: V;
+        min?: number;
+        max?: number;
+        step?: number;
+        /** Accessible name of the field; also used to name the two spin buttons. */
+        label: string;
+        decrementLabel?: (label: string) => string;
+        incrementLabel?: (label: string) => string;
+        /** Draws the full box instead of the default underline. */
+        boxed?: boolean;
+        /**
+         * Let the field be empty: clearing it yields `null` instead of snapping to the low bound.
+         * For optional quantities where "not set" differs from zero. Type `value` as
+         * `number | null` to bind it.
+         */
+        nullable?: boolean;
+        /** Hide the − and + buttons, for dense tables. The keyboard still steps with the arrows. */
+        hideSteppers?: boolean;
+        onValueChange?: (value: V) => void;
+        /** `class` lands on the wrapper; use `inputClass` to reach the input. */
+        class?: string;
+        inputClass?: string;
+        ref?: HTMLInputElement | null;
+    };
+    exports: {};
+    bindings: "value" | "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V extends number | null = number> {
+    props(): ReturnType<typeof $$render<V>>['props'];
+    events(): ReturnType<typeof $$render<V>>['events'];
+    slots(): ReturnType<typeof $$render<V>>['slots'];
+    bindings(): "value" | "ref";
+    exports(): {};
 }
-declare const NumberField: import("svelte").Component<Props, {}, "value" | "ref">;
-type NumberField = ReturnType<typeof NumberField>;
+interface $$IsomorphicComponent {
+    new <V extends number | null = number>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V>['props']>, ReturnType<__sveltets_Render<V>['events']>, ReturnType<__sveltets_Render<V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V>['bindings']>;
+    } & ReturnType<__sveltets_Render<V>['exports']>;
+    <V extends number | null = number>(internal: unknown, props: ReturnType<__sveltets_Render<V>['props']> & {}): ReturnType<__sveltets_Render<V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const NumberField: $$IsomorphicComponent;
+type NumberField<V extends number | null = number> = InstanceType<typeof NumberField<V>>;
 export default NumberField;