@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/feedback/ConfirmDialog.svelte

@@ -0,0 +1,79 @@
+<!-- @component
+A destructive action behind a modal confirmation, run either as a callback (`onConfirm`) or as a progressive-enhancement POST (`form`).
+-->
+<!--
+  ConfirmDialog — a destructive action behind a modal confirmation, in the two
+  shapes the app repos actually needed.
+
+  **Callback mode** (`onConfirm`) is the client-side one: the promise runs,
+  the confirm button goes busy, a rejection is shown inside the still-open
+  dialog so the reader can retry or cancel, and a resolution closes it and
+  optionally navigates through the components context.
+
+  **Form mode** (`form`) is the progressive-enhancement one: the confirm
+  button is a real `type="submit"` inside a real `<form method="POST">`, so
+  the action posts and the server redirects even with scripting off. The SvelteKit `enhance` action is passed IN by the
+  app (`enhance: (node) => enhance(node)`); importing `$app/forms` here would
+  tie this package to SvelteKit. It is applied as an attachment, so a caller
+  that omits it simply gets the unenhanced form.
+
+  Pass exactly one of the two. With neither, the confirm button does nothing
+  — there is no action to take.
+
+  ARIA contract: `Dialog`'s, plus a failure surfaced as an `Alert` with
+  `live="assertive"` inside the dialog (the reader pressed confirm and
+  nothing visible happened, so the reason has to interrupt). Both buttons are
+  `disabled` while the callback is in flight and the confirm button swaps its
+  text to `pendingLabel` rather than emptying itself, so its accessible name
+  never disappears mid-press.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+import Alert from "../ui/Alert.svelte";
+import Button from "../ui/Button.svelte";
+import Dialog from "./Dialog.svelte";
+let { open = $bindable(false), title, description, confirmLabel = "Delete", cancelLabel = "Cancel", pendingLabel = "Working…", failureMessage = "That didn’t work. Try again.", closeLabel = "Close", tone = "error", size = "md", onConfirm, form, redirectTo, class: className, trigger, children } = $props();
+const context = getComponentsContext();
+let pending = $state(false);
+let errorMessage = $state(undefined);
+const confirm = async () => {
+	if (onConfirm === undefined) return;
+	pending = true;
+	errorMessage = undefined;
+	try {
+		await onConfirm();
+		open = false;
+		if (redirectTo !== undefined) await context.navigate(context.href(redirectTo));
+	} catch (error) {
+		errorMessage = error instanceof Error ? error.message : failureMessage;
+	} finally {
+		pending = false;
+	}
+};
+/** The app's `enhance`, as an attachment so omitting it is a no-op. */
+const enhanceForm = (node) => form?.enhance?.(node);
+</script>
+
+<Dialog bind:open {title} {description} {closeLabel} {size} class={className} {trigger}>
+  {#if children}
+    {@render children()}
+  {/if}
+  {#if errorMessage !== undefined}
+    <Alert tone="error" live="assertive">{errorMessage}</Alert>
+  {/if}
+
+  {#snippet actions({ close })}
+    <Button variant="ghost" disabled={pending} onclick={close}>{cancelLabel}</Button>
+    {#if form === undefined}
+      <Button {tone} loading={pending} onclick={confirm}>
+        {pending ? pendingLabel : confirmLabel}
+      </Button>
+    {:else}
+      <form method={form.method ?? 'POST'} action={form.action} {@attach enhanceForm}>
+        {#each Object.entries(form.fields ?? {}) as [name, value] (name)}
+          <input type="hidden" {name} {value} />
+        {/each}
+        <Button {tone} type="submit">{confirmLabel}</Button>
+      </form>
+    {/if}
+  {/snippet}
+</Dialog>

package/dist/feedback/ConfirmDialog.svelte.d.ts

@@ -0,0 +1,82 @@
+import type { Snippet } from 'svelte';
+import type { Tone } from '../ui/tones.ts';
+import type { DialogSize } from './sizes.ts';
+/** A progressive-enhancement POST: the confirm button submits this form. */
+export interface ConfirmForm {
+    /** The form's `action` — a SvelteKit named action (`?/delete`) or a path. */
+    readonly action: string;
+    /** Always `POST`; spelled out because a destructive GET is a bug. */
+    readonly method?: 'POST' | undefined;
+    /**
+     * Extra fields to post, rendered as hidden inputs INSIDE the form. They
+     * live here rather than in `children` because `children` renders in the
+     * dialog body, which is outside the form element.
+     */
+    readonly fields?: Readonly<Record<string, string>> | undefined;
+    /**
+     * The app's own `use:enhance`, applied to the `<form>` element. Returns
+     * its teardown, if it has one. Omit for a plain, unenhanced POST.
+     */
+    readonly enhance?: ((form: HTMLFormElement) => void | (() => void)) | undefined;
+}
+interface Props {
+    /** Whether the dialog is shown. Bindable. */
+    open?: boolean | undefined;
+    /** Heading — the dialog's accessible name. */
+    title: string;
+    /** What confirming does, in the reader's terms. */
+    description?: string | undefined;
+    /**
+     * Text of the confirm button.
+     * @defaultValue `'Delete'`
+     */
+    confirmLabel?: string | undefined;
+    /**
+     * Text of the cancel button.
+     * @defaultValue `'Cancel'`
+     */
+    cancelLabel?: string | undefined;
+    /**
+     * The confirm button's text while the callback is in flight.
+     * @defaultValue `'Working…'`
+     */
+    pendingLabel?: string | undefined;
+    /**
+     * Shown when the callback rejects with something that is not an `Error`.
+     * @defaultValue `'That didn’t work. Try again.'`
+     */
+    failureMessage?: string | undefined;
+    /**
+     * Accessible name of the corner close button.
+     * @defaultValue `'Close'`
+     */
+    closeLabel?: string | undefined;
+    /**
+     * Colour of the confirm button.
+     * @defaultValue `'error'`
+     */
+    tone?: Tone | undefined;
+    /**
+     * Width of the dialog.
+     * @defaultValue `'md'`
+     */
+    size?: DialogSize | undefined;
+    /** Client-side confirmation. Mutually exclusive with `form`. */
+    onConfirm?: (() => Promise<unknown>) | undefined;
+    /** Progressive-enhancement POST. Mutually exclusive with `onConfirm`. */
+    form?: ConfirmForm | undefined;
+    /** Navigated to through the components context once `onConfirm` resolves. */
+    redirectTo?: string | undefined;
+    /** Extra classes, merged last. */
+    class?: string | undefined;
+    /** The opening control — the caller's own element, spreading `props`. */
+    trigger?: Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    /** Extra body content: a list of what will be destroyed, a reason field. */
+    children?: Snippet<[]> | undefined;
+}
+/** A destructive action behind a modal confirmation, run either as a callback (`onConfirm`) or as a progressive-enhancement POST (`form`). */
+declare const ConfirmDialog: import("svelte").Component<Props, {}, "open">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;

package/dist/feedback/Dialog.svelte

@@ -0,0 +1,47 @@
+<!-- @component
+A modal on bits-ui’s `Dialog`, wearing daisyUI’s `modal-box`.
+-->
+<!--
+  Dialog — a modal on bits-ui's `Dialog`, wearing daisyUI's `modal-box`.
+
+  ARIA contract: everything that makes a modal a modal is bits-ui's — the
+  focus trap, the initial focus move, `aria-modal`, the `aria-labelledby` /
+  `aria-describedby` wiring to `Dialog.Title` and `Dialog.Description`,
+  Escape and outside-click dismissal, the scroll lock, and returning focus
+  to whatever opened it. None of that is re-implemented here, because the
+  hand-rolled version is the one that is always subtly wrong: the native
+  `<dialog>` the app repos used gets the trap right but leaves the title
+  wiring and the focus return to the call site, and every call site did it
+  differently.
+
+  `title` is required: a dialog with no accessible name is announced as
+  "dialog" and nothing else. `description` is optional but is what turns
+  "Delete garden?" into a sentence an assistive-technology user can act on.
+
+  `trigger` receives the props to spread, so an existing `Button` keeps its
+  own markup and its own accessible name; `actions` receives `close`, so the
+  action row's buttons can dismiss without reaching for the bindable `open`.
+
+  The modal itself is `DialogFrame`, shared with `Drawer`: this file only
+  chooses the centred `modal-box`.
+-->
+<script lang="ts">import DialogFrame from "./DialogFrame.svelte";
+import { dialogSize } from "./sizes.js";
+let { open = $bindable(false), title, description, closeLabel = "Close", size = "md", class: className, trigger, actions, children } = $props();
+</script>
+
+<DialogFrame
+  bind:open
+  {title}
+  {description}
+  {closeLabel}
+  {trigger}
+  {actions}
+  {children}
+  layout="modal"
+  contentClass={[
+    'modal-box fixed top-1/2 left-1/2 z-50 max-h-[calc(100svh-2rem)] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2',
+    dialogSize[size],
+    className,
+  ]}
+/>

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

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+import { type DialogSize } from './sizes.ts';
+interface Props {
+    /** Whether the dialog is shown. Bindable. */
+    open?: boolean | undefined;
+    /** Heading — the dialog's accessible name. */
+    title: string;
+    /** Supporting line under the heading — the accessible description. */
+    description?: string | undefined;
+    /**
+     * Accessible name of the corner close button.
+     * @defaultValue `'Close'`
+     */
+    closeLabel?: string | undefined;
+    /**
+     * Width step of the `modal-box`.
+     * @defaultValue `'md'`
+     */
+    size?: DialogSize | undefined;
+    /** Extra classes on the `modal-box`. */
+    class?: string | undefined;
+    /** The opening control — the caller's own element, spreading `props`. */
+    trigger?: Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    /** Buttons for the `modal-action` row. */
+    actions?: Snippet<[{
+        close: () => void;
+    }]> | undefined;
+    /** The dialog body, under the title and description. */
+    children: Snippet<[]>;
+}
+/** A modal on bits-ui’s `Dialog`, wearing daisyUI’s `modal-box`. */
+declare const Dialog: import("svelte").Component<Props, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/feedback/DialogFrame.svelte

@@ -0,0 +1,64 @@
+<!-- @component
+The modal body `Dialog` and `Drawer` share; internal, not exported.
+-->
+<!--
+  DialogFrame — one implementation of everything that makes a modal a
+  modal, on bits-ui's `Dialog`: the trigger, overlay, focus trap and
+  return, Escape, scroll lock, the title and description wiring, the
+  labelled close button and the `actions({ close })` row. `Dialog` (a
+  centred `modal-box`) and `Drawer` (a panel at an edge) differ only in
+  `layout` and the content classes they pass, so the two cannot drift on
+  focus, dismissal or labelling.
+
+  `hideTitle` keeps the title as the accessible name but hides it
+  visually: a mobile navigation drawer needs a name, not a heading.
+-->
+<script lang="ts">import { X } from "@lucide/svelte";
+import { Dialog } from "bits-ui";
+import Button from "../ui/Button.svelte";
+import VisuallyHidden from "../ui/VisuallyHidden.svelte";
+let { open = $bindable(false), title, description, closeLabel, hideTitle = false, layout, contentClass, trigger, actions, children } = $props();
+const close = () => {
+	open = false;
+};
+const sheet = $derived(layout === "sheet");
+</script>
+
+<Dialog.Root bind:open>
+  {#if trigger}
+    <Dialog.Trigger>
+      {#snippet child({ props })}
+        {@render trigger({ props })}
+      {/snippet}
+    </Dialog.Trigger>
+  {/if}
+  <Dialog.Portal>
+    <!-- daisyUI's `modal-backdrop` is a child of an open `.modal`; this is
+         the same scrim as an element bits-ui can animate and dismiss from. -->
+    <Dialog.Overlay class="bg-base-300/60 fixed inset-0 z-40" />
+    <Dialog.Content class={contentClass}>
+      <div class={['flex items-start justify-between gap-4', sheet && 'px-4 pt-4']}>
+        <Dialog.Title class={hideTitle ? 'sr-only' : 'text-lg font-semibold'}>{title}</Dialog.Title>
+        <Dialog.Close>
+          {#snippet child({ props })}
+            <Button {...props} variant="ghost" size="sm" class="btn-square -mt-1 -mr-1 ms-auto">
+              <X class="size-4" aria-hidden="true" />
+              <VisuallyHidden>{closeLabel}</VisuallyHidden>
+            </Button>
+          {/snippet}
+        </Dialog.Close>
+      </div>
+      {#if description !== undefined}
+        <Dialog.Description class={['text-base-content/70 mt-1 text-sm leading-6', sheet && 'px-4']}>
+          {description}
+        </Dialog.Description>
+      {/if}
+      <div class={sheet ? 'min-h-0 flex-1 overflow-y-auto p-4' : 'py-4'}>{@render children()}</div>
+      {#if actions}
+        <div class={sheet ? 'border-base-300 flex justify-end gap-2 border-t p-4' : 'modal-action'}>
+          {@render actions({ close })}
+        </div>
+      {/if}
+    </Dialog.Content>
+  </Dialog.Portal>
+</Dialog.Root>

package/dist/feedback/DialogFrame.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+interface Props {
+    open?: boolean | undefined;
+    title: string;
+    description?: string | undefined;
+    closeLabel: string;
+    hideTitle?: boolean | undefined;
+    /** `modal`: daisyUI `modal-box` flow. `sheet`: a column with a scrolling body and a pinned footer. */
+    layout: 'modal' | 'sheet';
+    contentClass: ClassValue;
+    trigger?: Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    actions?: Snippet<[{
+        close: () => void;
+    }]> | undefined;
+    children: Snippet<[]>;
+}
+/** The modal body `Dialog` and `Drawer` share; internal, not exported. */
+declare const DialogFrame: import("svelte").Component<Props, {}, "open">;
+type DialogFrame = ReturnType<typeof DialogFrame>;
+export default DialogFrame;

package/dist/feedback/Drawer.svelte

@@ -0,0 +1,43 @@
+<!-- @component
+A modal panel that slides in from an edge: a filters sheet, a mobile action sheet, mobile navigation.
+-->
+<!--
+  Drawer — `Dialog`'s contract at an edge of the screen. It shares
+  `DialogFrame` with `Dialog`, so the focus trap and return, Escape and
+  overlay dismissal, scroll lock, `aria-modal`, the title as the accessible
+  name and the labelled close button are one implementation.
+
+  Not daisyUI's `drawer`: that is driven by a hidden checkbox and a
+  `<label>` overlay, which gives no focus trap, no focus move or return, no
+  Escape, no `aria-modal` and no name, and leaves the page behind it in the
+  Tab order. Only daisyUI's look is borrowed here.
+
+  The panel is a column: the title row, a body that scrolls on its own, and
+  an `actions({ close })` footer that stays put. `start` / `end` follow
+  the writing direction, so a `start` drawer opens from the right in RTL.
+  It does not animate, so there is no motion to reduce; swipe-to-dismiss is
+  out of v1.
+-->
+<script lang="ts">import DialogFrame from "./DialogFrame.svelte";
+import { drawerHeight, drawerSide, drawerWidth } from "./sizes.js";
+let { open = $bindable(false), title, description, side = "end", size = "md", closeLabel = "Close", hideTitle = false, class: className, trigger, actions, children } = $props();
+const horizontal = $derived(side === "start" || side === "end");
+</script>
+
+<DialogFrame
+  bind:open
+  {title}
+  {description}
+  {closeLabel}
+  {hideTitle}
+  {trigger}
+  {actions}
+  {children}
+  layout="sheet"
+  contentClass={[
+    'bg-base-100 fixed z-50 flex flex-col shadow-xl outline-none',
+    drawerSide[side],
+    horizontal ? drawerWidth[size] : drawerHeight[size],
+    className,
+  ]}
+/>

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

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+import { type DrawerSide, type DrawerSize } from './sizes.ts';
+interface Props {
+    /** Whether the drawer is shown. Bindable. */
+    open?: boolean | undefined;
+    /** Heading — the panel's accessible name. */
+    title: string;
+    /** Supporting line under the heading — the accessible description. */
+    description?: string | undefined;
+    /**
+     * The edge the panel enters from.
+     * @defaultValue `'end'`
+     */
+    side?: DrawerSide | undefined;
+    /**
+     * Width at `start` / `end`, height at `top` / `bottom`.
+     * @defaultValue `'md'`
+     */
+    size?: DrawerSize | undefined;
+    /**
+     * Accessible name of the corner close button.
+     * @defaultValue `'Close'`
+     */
+    closeLabel?: string | undefined;
+    /** Hide the title visually; it stays the accessible name (mobile navigation). */
+    hideTitle?: boolean | undefined;
+    /** Extra classes on the panel. */
+    class?: string | undefined;
+    /** The opening control — the caller's own element, spreading `props`. */
+    trigger?: Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    /** A footer row that stays in view; receives `close`. */
+    actions?: Snippet<[{
+        close: () => void;
+    }]> | undefined;
+    /** The panel body; it scrolls when long. */
+    children: Snippet<[]>;
+}
+/** A modal panel that slides in from an edge: a filters sheet, a mobile action sheet, mobile navigation. */
+declare const Drawer: import("svelte").Component<Props, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/feedback/LoadingBoundary.svelte

@@ -0,0 +1,61 @@
+<!-- @component
+The loading and error chrome around one read.
+-->
+<!--
+  LoadingBoundary — the loading and error chrome around one read.
+
+  The four states exist because "not settled" is two different things, and
+  collapsing them is what made every mutation blank its list back to
+  "Loading…": `loading` is a FIRST read with nothing to show yet, while
+  `refreshing` is a re-fetch over content that is already on screen. Children
+  keep rendering through `refreshing` — only a first read or a failure shows
+  chrome instead of content.
+
+  The two `tone`s are the two treatments the app repos had, not a new pair:
+  `page` is a route's own read, where the message stands alone under the page
+  heading, and `section` is a detail page's secondary read, indented into the
+  flow and deliberately quiet so a failed sidebar section degrades on its own
+  instead of taking the page with it.
+
+  ARIA contract: the loading chrome is a polite `role="status"` named by what
+  it is loading, so a reader who arrives mid-fetch is told rather than
+  finding nothing. During `refreshing` the same announcement is made from a
+  visually hidden status, because the content is still there to read. A
+  failure is assertive: the reader is waiting for something that is not
+  coming.
+-->
+<script lang="ts">import Alert from "../ui/Alert.svelte";
+import VisuallyHidden from "../ui/VisuallyHidden.svelte";
+let { state, loadingLabel = "Loading…", errorLabel = "That didn’t load. Try again.", tone = "page", class: className, loading, failed, children } = $props();
+</script>
+
+{#if state === 'error'}
+  {#if failed}
+    {@render failed({ message: errorLabel })}
+  {:else if tone === 'section'}
+    <p role="alert" class={['text-base-content/60 mt-3 text-sm leading-6', className]}>
+      {errorLabel}
+    </p>
+  {:else}
+    <Alert tone="error" live="assertive" class={className}>{errorLabel}</Alert>
+  {/if}
+{:else if state === 'loading'}
+  {#if loading}
+    {@render loading()}
+  {:else}
+    <p
+      role="status"
+      class={[
+        tone === 'section' ? 'text-base-content/50 mt-3 text-sm' : 'text-base-content/50',
+        className,
+      ]}
+    >
+      {loadingLabel}
+    </p>
+  {/if}
+{:else}
+  {#if state === 'refreshing'}
+    <VisuallyHidden role="status">{loadingLabel}</VisuallyHidden>
+  {/if}
+  {@render children()}
+{/if}

package/dist/feedback/LoadingBoundary.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Where the read has got to. */
+    state: 'loading' | 'refreshing' | 'error' | 'ready';
+    /**
+     * Announced, and shown, while the first read is in flight.
+     * @defaultValue `'Loading…'`
+     */
+    loadingLabel?: string | undefined;
+    /**
+     * The message for a failed read. Every call site has a specific one.
+     * @defaultValue `'That didn’t load. Try again.'`
+     */
+    errorLabel?: string | undefined;
+    /**
+     * Which of the two established treatments to render.
+     * @defaultValue `'page'`
+     */
+    tone?: 'page' | 'section' | undefined;
+    /** Extra classes, merged last. */
+    class?: string | undefined;
+    /** Replaces the default loading chrome. */
+    loading?: Snippet<[]> | undefined;
+    /** Replaces the default error chrome. */
+    failed?: Snippet<[{
+        message: string;
+    }]> | undefined;
+    /** The loaded content. Rendered from the first success onwards. */
+    children: Snippet<[]>;
+}
+/** The loading and error chrome around one read. */
+declare const LoadingBoundary: import("svelte").Component<Props, {}, "">;
+type LoadingBoundary = ReturnType<typeof LoadingBoundary>;
+export default LoadingBoundary;

package/dist/feedback/ProgressBar.svelte

@@ -0,0 +1,46 @@
+<!-- @component
+A native `<progress>` in a daisyUI tone.
+-->
+<!--
+  ProgressBar — a native `<progress>` in a daisyUI tone.
+
+  Native rather than a `div role="progressbar"`: the element already carries
+  the role, the value semantics and the platform's own indeterminate
+  rendering, and no hand-rolled version gets the indeterminate state right.
+
+  ARIA contract: `label` is the accessible name (a `<progress>` takes no name
+  from its contents), and `aria-valuetext` carries the percentage as words so
+  a reader hears "62 per cent" rather than "62 of 100". Omitting `value`
+  leaves the element indeterminate — no value attribute at all, which is what
+  makes the platform animate it — and drops `aria-valuetext` with it. The
+  printed percentage beside the bar is `aria-hidden`, because it restates the
+  name and value the element already exposes.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+import { progressTone } from "../ui/tones.js";
+let { label, value, max = 100, tone = "primary", showValue = false, locales, class: className, ...rest } = $props();
+const context = getComponentsContext();
+const fraction = $derived(value === undefined || max <= 0 ? undefined : Math.min(1, Math.max(0, value / max)));
+// The formatter is built in one `$derived` and applied in another: building
+// an `Intl` formatter is the expensive half, and it must not be redone every
+// time the value ticks.
+const percent = $derived(new Intl.NumberFormat(locales ?? context.locale(), {
+	style: "percent",
+	maximumFractionDigits: 1
+}));
+const valueText = $derived(fraction === undefined ? undefined : percent.format(fraction));
+</script>
+
+<div class={['flex items-center gap-3', className]}>
+  <progress
+    {...rest}
+    class={['progress', progressTone[tone]]}
+    value={value === undefined ? undefined : Math.min(max, Math.max(0, value))}
+    {max}
+    aria-label={label}
+    aria-valuetext={valueText}
+  ></progress>
+  {#if showValue && valueText !== undefined}
+    <span class="w-14 shrink-0 text-right text-sm tabular-nums" aria-hidden="true">{valueText}</span>
+  {/if}
+</div>

package/dist/feedback/ProgressBar.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLProgressAttributes } from 'svelte/elements';
+import { type Tone } from '../ui/tones.ts';
+interface Props extends Omit<HTMLProgressAttributes, 'value' | 'max'> {
+    /** Accessible name, e.g. `Seeds germinated`. */
+    label: string;
+    /** Current value in `[0, max]`. Omit for an indeterminate bar. */
+    value?: number | undefined;
+    /**
+     * The value that means complete.
+     * @defaultValue `100`
+     */
+    max?: number | undefined;
+    /**
+     * Semantic colour.
+     * @defaultValue `'primary'`
+     */
+    tone?: Tone | undefined;
+    /** Print the percentage beside the bar. */
+    showValue?: boolean | undefined;
+    /** Locale(s) for the percentage. Defaults to the components context's. */
+    locales?: string | readonly string[] | undefined;
+    /** Extra classes on the wrapper. */
+    class?: string | undefined;
+}
+/** A native `<progress>` in a daisyUI tone. */
+declare const ProgressBar: import("svelte").Component<Props, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;