@loidolt/theme-svelte 0.3.0 → 0.4.0

package/README.md

@@ -0,0 +1,21 @@
+# @loidolt/theme-svelte
+
+Accessible Svelte 5 components and state helpers for the Loidolt design system.
+
+```sh
+npm install @loidolt/theme-svelte
+```
+
+Import the global styles once:
+
+```css
+@import '@loidolt/theme-svelte/styles.css';
+```
+
+Then import components from the package barrel:
+
+```svelte
+<script>
+  import { Button, Field, Input } from '@loidolt/theme-svelte';
+</script>
+```

package/dist/components/AlertDialog.svelte

@@ -2,7 +2,13 @@
   import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
   import type { Snippet } from 'svelte';
   import type { AlertDialogContentProps } from 'bits-ui';
-  import type { ActionVariant, DialogSize, HeadingLevel, TriggerChildProps } from '../types.js';
+  import type {
+    ActionVariant,
+    ControlSize,
+    DialogSize,
+    HeadingLevel,
+    TriggerChildProps,
+  } from '../types.js';
   import { cx } from '../utils.js';
 
   type Props = Omit<AlertDialogContentProps, 'children' | 'class' | 'child'> & {
@@ -14,6 +20,9 @@
     trigger?: Snippet;
     /** Full control of the trigger element — receives the props Bits needs on it. */
     triggerChild?: Snippet<[TriggerChildProps]>;
+    /** Button variant for the default trigger. An explicit `triggerClass` wins wholesale. */
+    triggerVariant?: ActionVariant;
+    triggerSize?: ControlSize;
     triggerClass?: string;
     /** Extra body content between the description and the buttons. */
     children?: Snippet;
@@ -38,7 +47,9 @@
     description,
     trigger,
     triggerChild,
-    triggerClass = 'ldt-button',
+    triggerVariant,
+    triggerSize,
+    triggerClass,
     children,
     confirmLabel = 'Confirm',
     cancelLabel = 'Cancel',
@@ -53,6 +64,16 @@
     ref = $bindable(null),
     ...rest
   }: Props = $props();
+
+  // An explicit triggerClass keeps today's contract and wins outright.
+  const triggerClasses = $derived(
+    triggerClass ??
+      cx(
+        'ldt-button',
+        triggerVariant && triggerVariant !== 'default' && `ldt-button--${triggerVariant}`,
+        triggerSize && triggerSize !== 'md' && `ldt-button--${triggerSize}`
+      )
+  );
 </script>
 
 <!--
@@ -66,7 +87,7 @@
       >{#snippet child(childProps)}{@render triggerChild(
           childProps
         )}{/snippet}</AlertDialogPrimitive.Trigger
-    >{:else if trigger}<AlertDialogPrimitive.Trigger class={triggerClass}
+    >{:else if trigger}<AlertDialogPrimitive.Trigger class={triggerClasses}
       >{@render trigger()}</AlertDialogPrimitive.Trigger
     >{/if}
   <AlertDialogPrimitive.Portal>

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { AlertDialogContentProps } from 'bits-ui';
-import type { ActionVariant, DialogSize, HeadingLevel, TriggerChildProps } from '../types.js';
+import type { ActionVariant, ControlSize, DialogSize, HeadingLevel, TriggerChildProps } from '../types.js';
 type Props = Omit<AlertDialogContentProps, 'children' | 'class' | 'child'> & {
     open?: boolean;
     title: string;
@@ -10,6 +10,9 @@ type Props = Omit<AlertDialogContentProps, 'children' | 'class' | 'child'> & {
     trigger?: Snippet;
     /** Full control of the trigger element — receives the props Bits needs on it. */
     triggerChild?: Snippet<[TriggerChildProps]>;
+    /** Button variant for the default trigger. An explicit `triggerClass` wins wholesale. */
+    triggerVariant?: ActionVariant;
+    triggerSize?: ControlSize;
     triggerClass?: string;
     /** Extra body content between the description and the buttons. */
     children?: Snippet;

package/dist/components/AppShell.svelte

@@ -4,6 +4,7 @@
   import { cx } from '../utils.js';
 
   interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Complete banner/header content, such as `Topbar`; rendered without another landmark wrapper. */
     header?: Snippet;
     children: Snippet;
     footer?: Snippet;
@@ -25,7 +26,7 @@
 </script>
 
 <div bind:this={ref} class={cx('ldt-app-shell', className)} {...rest}>
-  {#if header}<header>{@render header()}</header>{/if}
+  {#if header}{@render header()}{/if}
   <main id={mainId}>{@render children()}</main>
   {#if footer}<footer>{@render footer()}</footer>{/if}
 </div>

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

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Complete banner/header content, such as `Topbar`; rendered without another landmark wrapper. */
     header?: Snippet;
     children: Snippet;
     footer?: Snippet;

package/dist/components/Card.svelte

@@ -1,22 +1,36 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import type { HTMLAttributes } from 'svelte/elements';
+  import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
   import type { HeadingLevel } from '../types.js';
   import { cx } from '../utils.js';
 
-  interface Props extends HTMLAttributes<HTMLElement> {
+  interface CommonProps {
     title?: string;
     description?: string;
     header?: Snippet;
     children: Snippet;
     footer?: Snippet;
-    /** Root element. `div` by default — use `article` only for self-contained content. */
-    as?: 'div' | 'article' | 'section' | 'li';
     headingLevel?: HeadingLevel;
     class?: string;
     ref?: HTMLElement | null;
   }
 
+  // Discriminated on `href`, like Button: with it the whole card is an anchor and accepts
+  // anchor attributes; without it the root stays a plain container element.
+  type Props = CommonProps &
+    (
+      | (Omit<HTMLAnchorAttributes, 'class'> & {
+          /** Renders the card as one block-level link. */
+          href: string;
+          as?: never;
+        })
+      | (Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+          href?: never;
+          /** Root element. `div` by default — use `article` only for self-contained content. */
+          as?: 'div' | 'article' | 'section' | 'li';
+        })
+    );
+
   let {
     title,
     description,
@@ -24,14 +38,18 @@
     children,
     footer,
     as = 'div',
+    href,
     headingLevel = 3,
     class: className,
     ref = $bindable(null),
     ...rest
   }: Props = $props();
+
+  const element = $derived(href ? 'a' : as);
+  const classes = $derived(cx('ldt-card', href && 'ldt-card--link', className));
 </script>
 
-<svelte:element this={as} bind:this={ref} class={cx('ldt-card', className)} {...rest}>
+<svelte:element this={element} bind:this={ref} class={classes} {href} {...rest}>
   {#if header || title || description}<header class="ldt-card__header">
       {#if header}{@render header()}{:else}{#if title}<svelte:element
             this={`h${headingLevel}`}

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

@@ -1,18 +1,25 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
 import type { HeadingLevel } from '../types.js';
-interface Props extends HTMLAttributes<HTMLElement> {
+interface CommonProps {
     title?: string;
     description?: string;
     header?: Snippet;
     children: Snippet;
     footer?: Snippet;
-    /** Root element. `div` by default — use `article` only for self-contained content. */
-    as?: 'div' | 'article' | 'section' | 'li';
     headingLevel?: HeadingLevel;
     class?: string;
     ref?: HTMLElement | null;
 }
+type Props = CommonProps & ((Omit<HTMLAnchorAttributes, 'class'> & {
+    /** Renders the card as one block-level link. */
+    href: string;
+    as?: never;
+}) | (Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    href?: never;
+    /** Root element. `div` by default — use `article` only for self-contained content. */
+    as?: 'div' | 'article' | 'section' | 'li';
+}));
 declare const Card: import("svelte").Component<Props, {}, "ref">;
 type Card = ReturnType<typeof Card>;
 export default Card;

package/dist/components/CodeBlock.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    code: string;
+    /** One click/tap selects the whole value. On by default — this block exists for copying. */
+    selectable?: boolean;
+    copyable?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    code,
+    selectable = true,
+    copyable = false,
+    copyLabel = 'Copy',
+    copiedLabel = 'Copied',
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  let copied = $state(false);
+  let resetTimer: ReturnType<typeof setTimeout> | undefined;
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(code);
+      copied = true;
+      clearTimeout(resetTimer);
+      resetTimer = setTimeout(() => (copied = false), 2000);
+    } catch {
+      // Clipboard unavailable (permissions, insecure context) — the text stays selectable.
+    }
+  }
+</script>
+
+<div
+  bind:this={ref}
+  class={cx('ldt-code-block', selectable && 'ldt-code-block--selectable', className)}
+  {...rest}
+>
+  <code class="ldt-code-block__code">{code}</code>
+  {#if copyable}
+    <button type="button" class="ldt-button ldt-button--quiet ldt-button--sm" onclick={copy}>
+      {copied ? copiedLabel : copyLabel}
+    </button>
+    <!-- Persistently mounted so the announcement fires when the content changes. -->
+    <span class="ldt-sr-only" role="status">{copied ? copiedLabel : ''}</span>
+  {/if}
+</div>

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

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    code: string;
+    /** One click/tap selects the whole value. On by default — this block exists for copying. */
+    selectable?: boolean;
+    copyable?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+declare const CodeBlock: import("svelte").Component<Props, {}, "ref">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/components/CommentList.svelte

@@ -0,0 +1,67 @@
+<script lang="ts" generics="T extends string = string">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import Marker from './Marker.svelte';
+  import { cx } from '../utils.js';
+
+  interface CommentListItem<V extends string = string> {
+    id: V;
+    author: string;
+    /** Preformatted suffix after the author — timestamps, origins. The theme adds nothing. */
+    meta?: string;
+    body: string;
+    /** Renders a numbered Marker when set — ties the comment to a pin on a canvas. */
+    marker?: number;
+  }
+
+  interface Props extends Omit<HTMLAttributes<HTMLUListElement>, 'children'> {
+    items: CommentListItem<T>[];
+    /** Highlighted item; kept in view as it changes. */
+    activeId?: T | null;
+    /** Fired when a markered item is hovered — for syncing the matching canvas pin. */
+    onItemHover?: (id: T) => void;
+    /** Full row-content override. */
+    item?: Snippet<[CommentListItem<T>]>;
+    class?: string;
+    itemClass?: string;
+    ref?: HTMLUListElement | null;
+  }
+
+  let {
+    items,
+    activeId = $bindable(null),
+    onItemHover,
+    item,
+    class: className,
+    itemClass,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  let rows = $state<Record<string, HTMLLIElement | null>>({});
+
+  $effect(() => {
+    if (activeId) rows[activeId]?.scrollIntoView({ block: 'nearest' });
+  });
+</script>
+
+<ul bind:this={ref} class={cx('ldt-comment-list', className)} {...rest}>
+  {#each items as entry (entry.id)}
+    <li
+      class={cx('ldt-comment', activeId === entry.id && 'ldt-comment--active', itemClass)}
+      bind:this={rows[entry.id]}
+      onpointerenter={entry.marker !== undefined ? () => onItemHover?.(entry.id) : undefined}
+    >
+      {#if item}{@render item(entry)}{:else}
+        {#if entry.marker !== undefined}<Marker
+            number={entry.marker}
+            active={activeId === entry.id}
+          />{/if}
+        <div class="ldt-comment__content">
+          <span class="ldt-comment__meta">{entry.author}{entry.meta ? ` ${entry.meta}` : ''}</span>
+          <p class="ldt-comment__body">{entry.body}</p>
+        </div>
+      {/if}
+    </li>
+  {/each}
+</ul>

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

@@ -0,0 +1,53 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<T extends string = string>(): {
+    props: Omit<HTMLAttributes<HTMLUListElement>, "children"> & {
+        items: {
+            id: T;
+            author: string;
+            /** Preformatted suffix after the author — timestamps, origins. The theme adds nothing. */
+            meta?: string;
+            body: string;
+            /** Renders a numbered Marker when set — ties the comment to a pin on a canvas. */
+            marker?: number;
+        }[];
+        /** Highlighted item; kept in view as it changes. */
+        activeId?: T | null;
+        /** Fired when a markered item is hovered — for syncing the matching canvas pin. */
+        onItemHover?: (id: T) => void;
+        /** Full row-content override. */
+        item?: Snippet<[{
+            id: T;
+            author: string;
+            /** Preformatted suffix after the author — timestamps, origins. The theme adds nothing. */
+            meta?: string;
+            body: string;
+            /** Renders a numbered Marker when set — ties the comment to a pin on a canvas. */
+            marker?: number;
+        }]>;
+        class?: string;
+        itemClass?: string;
+        ref?: HTMLUListElement | null;
+    };
+    exports: {};
+    bindings: "ref" | "activeId";
+    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(): "ref" | "activeId";
+    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 CommentList: $$IsomorphicComponent;
+type CommentList<T extends string = string> = InstanceType<typeof CommentList<T>>;
+export default CommentList;

package/dist/components/Dialog.svelte

@@ -2,7 +2,13 @@
   import { Dialog as DialogPrimitive } from 'bits-ui';
   import type { Snippet } from 'svelte';
   import type { DialogContentProps } from 'bits-ui';
-  import type { DialogSize, HeadingLevel, TriggerChildProps } from '../types.js';
+  import type {
+    ActionVariant,
+    ControlSize,
+    DialogSize,
+    HeadingLevel,
+    TriggerChildProps,
+  } from '../types.js';
   import { cx } from '../utils.js';
 
   type Props = Omit<DialogContentProps, 'children' | 'class' | 'child'> & {
@@ -13,6 +19,9 @@
     trigger?: Snippet;
     /** Full control of the trigger element — receives the props Bits needs on it. */
     triggerChild?: Snippet<[TriggerChildProps]>;
+    /** Button variant for the default trigger. An explicit `triggerClass` wins wholesale. */
+    triggerVariant?: ActionVariant;
+    triggerSize?: ControlSize;
     triggerClass?: string;
     children: Snippet;
     footer?: Snippet;
@@ -34,7 +43,9 @@
     description,
     trigger,
     triggerChild,
-    triggerClass = 'ldt-button',
+    triggerVariant,
+    triggerSize,
+    triggerClass,
     children,
     footer,
     size,
@@ -47,6 +58,17 @@
     ref = $bindable(null),
     ...rest
   }: Props = $props();
+
+  // An explicit triggerClass keeps today's contract and wins outright; otherwise the class is
+  // composed from the button variant vocabulary.
+  const triggerClasses = $derived(
+    triggerClass ??
+      cx(
+        'ldt-button',
+        triggerVariant && triggerVariant !== 'default' && `ldt-button--${triggerVariant}`,
+        triggerSize && triggerSize !== 'md' && `ldt-button--${triggerSize}`
+      )
+  );
 </script>
 
 <DialogPrimitive.Root bind:open {onOpenChange}>
@@ -54,7 +76,7 @@
       >{#snippet child(childProps)}{@render triggerChild(
           childProps
         )}{/snippet}</DialogPrimitive.Trigger
-    >{:else if trigger}<DialogPrimitive.Trigger class={triggerClass}
+    >{:else if trigger}<DialogPrimitive.Trigger class={triggerClasses}
       >{@render trigger()}</DialogPrimitive.Trigger
     >{/if}
   <DialogPrimitive.Portal>

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { DialogContentProps } from 'bits-ui';
-import type { DialogSize, HeadingLevel, TriggerChildProps } from '../types.js';
+import type { ActionVariant, ControlSize, DialogSize, HeadingLevel, TriggerChildProps } from '../types.js';
 type Props = Omit<DialogContentProps, 'children' | 'class' | 'child'> & {
     open?: boolean;
     title: string;
@@ -9,6 +9,9 @@ type Props = Omit<DialogContentProps, 'children' | 'class' | 'child'> & {
     trigger?: Snippet;
     /** Full control of the trigger element — receives the props Bits needs on it. */
     triggerChild?: Snippet<[TriggerChildProps]>;
+    /** Button variant for the default trigger. An explicit `triggerClass` wins wholesale. */
+    triggerVariant?: ActionVariant;
+    triggerSize?: ControlSize;
     triggerClass?: string;
     children: Snippet;
     footer?: Snippet;

package/dist/components/Drawer.svelte

@@ -2,7 +2,7 @@
   import { Dialog as DialogPrimitive } from 'bits-ui';
   import type { Snippet } from 'svelte';
   import type { DialogContentProps } from 'bits-ui';
-  import type { HeadingLevel, TriggerChildProps } from '../types.js';
+  import type { ActionVariant, ControlSize, HeadingLevel, TriggerChildProps } from '../types.js';
   import { cx } from '../utils.js';
 
   type Props = Omit<DialogContentProps, 'children' | 'class' | 'child'> & {
@@ -15,6 +15,9 @@
     trigger?: Snippet;
     /** Full control of the trigger element — receives the props Bits needs on it. */
     triggerChild?: Snippet<[TriggerChildProps]>;
+    /** Button variant for the default trigger. An explicit `triggerClass` wins wholesale. */
+    triggerVariant?: ActionVariant;
+    triggerSize?: ControlSize;
     triggerClass?: string;
     children: Snippet;
     footer?: Snippet;
@@ -35,7 +38,9 @@
     side = 'left',
     trigger,
     triggerChild,
-    triggerClass = 'ldt-button',
+    triggerVariant,
+    triggerSize,
+    triggerClass,
     children,
     footer,
     headingLevel = 2,
@@ -47,6 +52,16 @@
     ref = $bindable(null),
     ...rest
   }: Props = $props();
+
+  // An explicit triggerClass keeps today's contract and wins outright.
+  const triggerClasses = $derived(
+    triggerClass ??
+      cx(
+        'ldt-button',
+        triggerVariant && triggerVariant !== 'default' && `ldt-button--${triggerVariant}`,
+        triggerSize && triggerSize !== 'md' && `ldt-button--${triggerSize}`
+      )
+  );
 </script>
 
 <!--
@@ -60,7 +75,7 @@
       >{#snippet child(childProps)}{@render triggerChild(
           childProps
         )}{/snippet}</DialogPrimitive.Trigger
-    >{:else if trigger}<DialogPrimitive.Trigger class={triggerClass}
+    >{:else if trigger}<DialogPrimitive.Trigger class={triggerClasses}
       >{@render trigger()}</DialogPrimitive.Trigger
     >{/if}
   <DialogPrimitive.Portal>

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { DialogContentProps } from 'bits-ui';
-import type { HeadingLevel, TriggerChildProps } from '../types.js';
+import type { ActionVariant, ControlSize, HeadingLevel, TriggerChildProps } from '../types.js';
 type Props = Omit<DialogContentProps, 'children' | 'class' | 'child'> & {
     open?: boolean;
     title: string;
@@ -11,6 +11,9 @@ type Props = Omit<DialogContentProps, 'children' | 'class' | 'child'> & {
     trigger?: Snippet;
     /** Full control of the trigger element — receives the props Bits needs on it. */
     triggerChild?: Snippet<[TriggerChildProps]>;
+    /** Button variant for the default trigger. An explicit `triggerClass` wins wholesale. */
+    triggerVariant?: ActionVariant;
+    triggerSize?: ControlSize;
     triggerClass?: string;
     children: Snippet;
     footer?: Snippet;

package/dist/components/FileInput.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  // Input cannot render type="file" — its string `value` binding does not apply — so the
+  // file picker gets its own component in the same clothes.
+  interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'files' | 'class'> {
+    accept?: string;
+    multiple?: boolean;
+    /** Fired when the user picks at least one file. */
+    onFiles?: (files: FileList) => void;
+    disabled?: boolean;
+    /** Draws the full box instead of the default underline, like Input. */
+    boxed?: boolean;
+    class?: string;
+    ref?: HTMLInputElement | null;
+  }
+
+  let {
+    accept,
+    multiple = false,
+    onFiles,
+    disabled = false,
+    boxed = false,
+    class: className,
+    onchange,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
+    onchange?.(event);
+    const files = event.currentTarget.files;
+    if (files && files.length > 0) onFiles?.(files);
+  }
+</script>
+
+<input
+  bind:this={ref}
+  type="file"
+  class={cx('ldt-input', 'ldt-file-input', boxed && 'ldt-input--boxed', className)}
+  {accept}
+  {multiple}
+  {disabled}
+  {...rest}
+  onchange={handleChange}
+/>

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

@@ -0,0 +1,15 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'files' | 'class'> {
+    accept?: string;
+    multiple?: boolean;
+    /** Fired when the user picks at least one file. */
+    onFiles?: (files: FileList) => void;
+    disabled?: boolean;
+    /** Draws the full box instead of the default underline, like Input. */
+    boxed?: boolean;
+    class?: string;
+    ref?: HTMLInputElement | null;
+}
+declare const FileInput: import("svelte").Component<Props, {}, "ref">;
+type FileInput = ReturnType<typeof FileInput>;
+export default FileInput;