@spaethtech/svelte-ui 0.1.10 → 0.3.1-dev.10.ff03a8d

package/dist/components/DatePicker.svelte

@@ -0,0 +1,312 @@
+<!--
+/**
+ * DatePicker — a themed date field (single date, datetime, or date RANGE) that follows the library
+ * look end to end: an {@link Input}-framed trigger + a {@link Popup} (top layer) holding a
+ * {@link Calendar}, with a compact {@link TimeSpinner} tucked underneath in `time` mode. A hidden
+ * input carries the ISO value for forms (single mode).
+ *
+ *   <DatePicker bind:value={dateStr} />                 single    value: 'YYYY-MM-DD'
+ *   <DatePicker time bind:value={dtStr} />              datetime  value: 'YYYY-MM-DDTHH:MM'
+ *   <DatePicker range bind:value={{start,end}} />       range     value: { start, end }
+ *
+ * `variant` accents the selection/actions; `size` scales the field, calendar, spinner, and popup.
+ */
+-->
+<script lang="ts">
+  import type { Size } from "../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../types/responsive.js";
+  import { variantToken, type Variant } from "../types/variants.js";
+  import { resolveStep, type StepSpec } from "../types/time.js";
+  import Input from "./Input.svelte";
+  import Popup from "./Popup.svelte";
+  import Calendar from "./Calendar.svelte";
+  import TimeSpinner from "./TimeSpinner.svelte";
+  import IconCalendar from "~icons/mdi/calendar-outline";
+  import IconClose from "~icons/mdi/close";
+
+  type RangeValue = { start: string | null; end: string | null };
+  interface Props {
+    value?: string | RangeValue | null;
+    range?: boolean;
+    time?: boolean;
+    /** `time` mode: column interval — a number = minute step, or `{ hour, minute, second }`. Default 1. */
+    step?: StepSpec;
+    /** `time` mode: add a seconds column; the time part becomes `HH:MM:SS`. Default false. */
+    seconds?: boolean;
+    /** `time` mode: show the AM/PM meridiem (12h). `false` = 24h. Default true; supply from app config. */
+    meridiem?: boolean;
+    min?: string;
+    max?: string;
+    weekStart?: 0 | 1;
+    locale?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: Responsive<Size>;
+    variant?: Variant;
+    class?: string;
+    name?: string;
+  }
+
+  let {
+    value = $bindable(),
+    range = false,
+    time = false,
+    step = 1,
+    seconds = false,
+    meridiem = true,
+    min,
+    max,
+    weekStart,
+    locale = typeof navigator !== "undefined" ? navigator.language : "en-US",
+    placeholder = range ? "Select dates" : time ? "Select date & time" : "Select date",
+    disabled = false,
+    size = "md",
+    variant = "primary",
+    class: cls = "",
+    name,
+  }: Props = $props();
+
+  const accent = $derived(`var(${variantToken[variant]})`);
+  const pad = $derived(responsiveClasses(size, { sm: "p-1.5", md: "p-2", lg: "p-3" }));
+  const footText = $derived(
+    responsiveClasses(size, { sm: "text-xs", md: "text-sm", lg: "text-base" }),
+  );
+  const subtle = "[color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]";
+
+  const dateOf = (s: string | null | undefined) => (s ? s.split("T")[0] : "");
+  const timeOf = (s: string | null | undefined) =>
+    s && s.includes("T") ? s.split("T")[1].slice(0, seconds ? 8 : 5) : "";
+  const midnight = $derived(seconds ? "00:00:00" : "00:00");
+  const compose = (d: string, t: string) => (time ? `${d}T${t || midnight}` : d);
+  const todayDate = () => {
+    const d = new Date();
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+  };
+
+  const rv = $derived(
+    range ? ((value as RangeValue) ?? { start: null, end: null }) : { start: null, end: null },
+  );
+  const singleStr = $derived(range ? "" : ((value as string | null) ?? ""));
+
+  let open = $state(false);
+  let anchorEl = $state<HTMLDivElement>();
+
+  // ── single ──
+  function pickSingleDate(iso: string) {
+    value = compose(iso, timeOf(singleStr));
+    if (!time) open = false;
+  }
+  function setSingleTime(t: string) {
+    value = compose(dateOf(singleStr) || todayDate(), t);
+  }
+
+  // ── range ──
+  function onRange(r: { start: string; end: string }) {
+    const s = r.start ? compose(r.start, timeOf(rv.start) || (time ? midnight : "")) : null;
+    const e = r.end
+      ? compose(r.end, timeOf(rv.end) || (time ? (seconds ? "23:59:59" : "23:59") : ""))
+      : null;
+    value = { start: s, end: e };
+    if (!time && e) open = false;
+  }
+  const setStartTime = (t: string) =>
+    rv.start && (value = { ...rv, start: `${dateOf(rv.start)}T${t}` });
+  const setEndTime = (t: string) => rv.end && (value = { ...rv, end: `${dateOf(rv.end)}T${t}` });
+
+  function goToday() {
+    const t = todayDate();
+    if (range) value = { start: compose(t, time ? midnight : ""), end: null };
+    else pickSingleDate(t);
+  }
+  // time mode: jump to today's date AND the current time (minutes snapped to `step`; real seconds).
+  function goNow() {
+    const d = new Date();
+    const ms = resolveStep(step).minute;
+    const mins = Math.round((d.getHours() * 60 + d.getMinutes()) / ms) * ms;
+    const hhmm = `${String(Math.floor(mins / 60) % 24).padStart(2, "0")}:${String(mins % 60).padStart(2, "0")}`;
+    const t = seconds ? `${hhmm}:${String(d.getSeconds()).padStart(2, "0")}` : hhmm;
+    const day = todayDate();
+    if (range) value = { start: `${day}T${t}`, end: null };
+    else value = compose(day, t);
+    if (!range) open = false; // a full date+time is a complete single selection
+  }
+  function clear() {
+    value = range ? { start: null, end: null } : null;
+    open = false;
+  }
+
+  // ── trigger label ──
+  const fmtDate = (s: string) => {
+    if (!s) return "";
+    const [y, m, d] = dateOf(s).split("-").map(Number);
+    return new Intl.DateTimeFormat(locale, {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    }).format(new Date(y, m - 1, d));
+  };
+  const fmtTime = (s: string) => {
+    const t = timeOf(s);
+    if (!t) return "";
+    const [h, m, sec] = t.split(":").map(Number);
+    return new Intl.DateTimeFormat(locale, {
+      hour: "numeric",
+      minute: "2-digit",
+      second: seconds ? "2-digit" : undefined,
+      hour12: meridiem,
+    }).format(new Date(2000, 0, 1, h, m, sec || 0));
+  };
+  const fmt = (s: string) => (s ? (time ? `${fmtDate(s)}, ${fmtTime(s)}` : fmtDate(s)) : "");
+  const label = $derived.by(() => {
+    if (range)
+      return rv.start ? `${fmt(rv.start ?? "")}${rv.end ? ` – ${fmt(rv.end ?? "")}` : " – …"}` : "";
+    return fmt(singleStr);
+  });
+  const hasValue = $derived(range ? !!(rv.start || rv.end) : !!singleStr);
+
+  function toggle() {
+    if (!disabled) open = !open;
+  }
+  function onKey(e: KeyboardEvent) {
+    if (disabled) return;
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      open = true;
+    }
+  }
+</script>
+
+<div bind:this={anchorEl} class="w-full {cls}">
+  <Input
+    value={label}
+    readonly
+    {size}
+    {disabled}
+    {placeholder}
+    onclick={toggle}
+    onkeydown={onKey}
+    inputClass="cursor-pointer"
+    actions={trailing}
+  />
+  {#if name && !range}<input type="hidden" {name} value={singleStr} />{/if}
+</div>
+
+{#snippet trailing()}
+  {#if hasValue && !disabled}
+    <button
+      type="button"
+      aria-label="Clear"
+      tabindex="-1"
+      class="grid size-5 place-items-center rounded {subtle} hover:[background-color:color-mix(in_srgb,var(--ui-color-text)_10%,transparent)]"
+      onclick={(e) => {
+        e.stopPropagation();
+        clear();
+      }}><IconClose class="size-3.5" /></button
+    >
+  {/if}
+  <button
+    type="button"
+    tabindex="-1"
+    aria-label="Open calendar"
+    {disabled}
+    class="inline-flex items-center [color:var(--ui-color-secondary)] disabled:opacity-50"
+    onclick={toggle}><IconCalendar /></button
+  >
+{/snippet}
+
+<Popup anchor={anchorEl} bind:open offset={6}>
+  <div
+    class="rounded-[var(--ui-border-radius)] border {pad} shadow-lg [border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)] [background-color:var(--ui-color-background)] [color:var(--ui-color-text)]"
+    style="--accent: {accent}"
+  >
+    {#if range}
+      <Calendar
+        mode="range"
+        start={dateOf(rv.start)}
+        end={dateOf(rv.end)}
+        {min}
+        {max}
+        {weekStart}
+        {locale}
+        {size}
+        {variant}
+        onrange={onRange}
+      />
+      {#if time}
+        <div class="mt-2 flex flex-col gap-2 border-t pt-2 [border-color:var(--ui-border-color)]">
+          <div class="flex items-center gap-3">
+            <span class="w-10 shrink-0 text-xs {subtle}">Start</span><TimeSpinner
+              value={timeOf(rv.start)}
+              {step}
+              {seconds}
+              {meridiem}
+              {size}
+              {variant}
+              {locale}
+              onchange={setStartTime}
+            />
+          </div>
+          <div class="flex items-center gap-3">
+            <span class="w-10 shrink-0 text-xs {subtle}">End</span><TimeSpinner
+              value={timeOf(rv.end)}
+              {step}
+              {seconds}
+              {meridiem}
+              {size}
+              {variant}
+              {locale}
+              onchange={setEndTime}
+            />
+          </div>
+        </div>
+      {/if}
+    {:else}
+      <Calendar
+        mode="single"
+        value={dateOf(singleStr)}
+        {min}
+        {max}
+        {weekStart}
+        {locale}
+        {size}
+        {variant}
+        onselect={pickSingleDate}
+      />
+      {#if time}
+        <div class="mt-2 flex justify-center border-t pt-2 [border-color:var(--ui-border-color)]">
+          <TimeSpinner
+            value={timeOf(singleStr)}
+            {step}
+            {seconds}
+            {meridiem}
+            {size}
+            {variant}
+            {locale}
+            onchange={setSingleTime}
+          />
+        </div>
+      {/if}
+    {/if}
+    <div
+      class="mt-2 flex items-center justify-between border-t pt-2 {footText} [border-color:var(--ui-border-color)]"
+    >
+      <div class="flex items-center gap-1">
+        <button
+          type="button"
+          class="rounded px-2 py-1 [color:var(--accent)] hover:underline"
+          onclick={goToday}>Today</button
+        >
+        {#if time}<span class={subtle}>/</span><button
+            type="button"
+            class="rounded px-2 py-1 [color:var(--accent)] hover:underline"
+            onclick={goNow}>Now</button
+          >{/if}
+      </div>
+      <button
+        type="button"
+        class="rounded px-2 py-1 {subtle} hover:underline"
+        onclick={() => (open = false)}>Done</button
+      >
+    </div>
+  </div>
+</Popup>

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

@@ -0,0 +1,32 @@
+import type { Size } from "../types/sizes.js";
+import { type Responsive } from "../types/responsive.js";
+import { type Variant } from "../types/variants.js";
+import { type StepSpec } from "../types/time.js";
+type RangeValue = {
+    start: string | null;
+    end: string | null;
+};
+interface Props {
+    value?: string | RangeValue | null;
+    range?: boolean;
+    time?: boolean;
+    /** `time` mode: column interval — a number = minute step, or `{ hour, minute, second }`. Default 1. */
+    step?: StepSpec;
+    /** `time` mode: add a seconds column; the time part becomes `HH:MM:SS`. Default false. */
+    seconds?: boolean;
+    /** `time` mode: show the AM/PM meridiem (12h). `false` = 24h. Default true; supply from app config. */
+    meridiem?: boolean;
+    min?: string;
+    max?: string;
+    weekStart?: 0 | 1;
+    locale?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: Responsive<Size>;
+    variant?: Variant;
+    class?: string;
+    name?: string;
+}
+declare const DatePicker: import("svelte").Component<Props, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/components/DateTimeInput.svelte

@@ -0,0 +1,93 @@
+<!--
+/**
+ * DateTimeInput — the themed native date/time picker. Wraps {@link Input} so it inherits the exact
+ * frame, `size` height (sm 24 / md 32 / lg 40px), border, hover/focus glow and disabled styling as
+ * every other control — a raw `<input type="date|datetime-local">` never matches those, which is why
+ * bare date inputs were the one sanctioned exception. Use this instead.
+ *
+ * `type` picks the native picker: `datetime-local` (default), `date`, `time`, `month`, `week`. The
+ * value is the native string the browser emits (e.g. `2026-07-01T13:00` / `2026-07-01`), so it drops
+ * straight into a form field. We render our own trailing calendar/clock icon (in the library accent,
+ * matching Input's icons) and hide the UA indicator; clicking it opens the native picker via
+ * `showPicker()`. The picker popup + edit fields follow light/dark automatically through the theme's
+ * `color-scheme`.
+ */
+-->
+<script lang="ts">
+  import Input from "./Input.svelte";
+  import IconCalendar from "~icons/mdi/calendar-outline";
+  import IconClock from "~icons/mdi/clock-outline";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { Size } from "../types/sizes.js";
+  import type { Responsive } from "../types/responsive.js";
+  import { variantToken, type Variant } from "../types/variants.js";
+
+  type DateType = "datetime-local" | "date" | "time" | "month" | "week";
+
+  interface Props extends Omit<HTMLInputAttributes, "type" | "value" | "size"> {
+    value?: string;
+    /** Which native picker to render. Default `datetime-local`. */
+    type?: DateType;
+    size?: Responsive<Size>;
+    /** Accent for the native picker highlights (via CSS `accent-color`). Default primary. */
+    variant?: Variant;
+    class?: string;
+    inputClass?: string;
+    element?: HTMLInputElement;
+    disabled?: boolean;
+  }
+
+  let {
+    value = $bindable(""),
+    type = "datetime-local",
+    size = "md",
+    variant = "primary",
+    class: cls = "",
+    inputClass = "",
+    element = $bindable(),
+    disabled = false,
+    ...rest
+  }: Props = $props();
+
+  // `accent-color` themes the native picker's own highlights (selected day, spin buttons) in
+  // supporting browsers — the one lever we have on the browser-owned popup.
+  const accentClass = $derived(`[accent-color:var(${variantToken[variant]})]`);
+
+  // Our trailing icon opens the native picker (a real user gesture). Guard for disabled + browsers
+  // without showPicker (fall back to focusing, which still lets the user type / use the UA indicator).
+  function openPicker() {
+    if (disabled) return;
+    try {
+      element?.showPicker?.();
+    } catch {
+      element?.focus();
+    }
+  }
+</script>
+
+<Input
+  bind:value
+  bind:element
+  {type}
+  {size}
+  {disabled}
+  class={cls}
+  inputClass="ui-datetime {accentClass} {inputClass}"
+  icon={pickerIcon}
+  iconPosition="right"
+  iconClickable
+  onIconClick={openPicker}
+  {...rest}
+/>
+
+{#snippet pickerIcon()}
+  {#if type === "time"}<IconClock />{:else}<IconCalendar />{/if}
+{/snippet}
+
+<style>
+  /* We draw our own calendar/clock icon (opens the picker), so hide the browser's native indicator to
+	   avoid a double glyph. Value text + edit fields still theme via Input's --ui-color-text + color-scheme. */
+  :global(.ui-datetime::-webkit-calendar-picker-indicator) {
+    display: none;
+  }
+</style>

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

@@ -0,0 +1,20 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { Size } from "../types/sizes.js";
+import type { Responsive } from "../types/responsive.js";
+import { type Variant } from "../types/variants.js";
+type DateType = "datetime-local" | "date" | "time" | "month" | "week";
+interface Props extends Omit<HTMLInputAttributes, "type" | "value" | "size"> {
+    value?: string;
+    /** Which native picker to render. Default `datetime-local`. */
+    type?: DateType;
+    size?: Responsive<Size>;
+    /** Accent for the native picker highlights (via CSS `accent-color`). Default primary. */
+    variant?: Variant;
+    class?: string;
+    inputClass?: string;
+    element?: HTMLInputElement;
+    disabled?: boolean;
+}
+declare const DateTimeInput: import("svelte").Component<Props, {}, "element" | "value">;
+type DateTimeInput = ReturnType<typeof DateTimeInput>;
+export default DateTimeInput;

package/dist/components/Dialog.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  /**
+   * Dialog — a PURE modal shell (layout container). It owns only the modal mechanics: portals itself
+   * to <body>, locks background scroll, renders a dismissable backdrop, traps focus, and exposes the
+   * ARIA dialog role. It imposes NO content structure — put a `Card` (or anything) inside via
+   * `children`. For the common title + message + Confirm/Cancel pattern, use `ConfirmDialog`, which is
+   * built on this.
+   *
+   * `width` / `height` accept any CSS length: `"80%"`, `"80vw"`, `"60vh"`, `"400px"`, … (both default
+   * to content size, capped to the viewport minus a 1rem inset so the panel never runs off-screen).
+   */
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+    /** Whether the dialog is shown (bindable). */
+    isOpen: boolean;
+    /** Panel width — any CSS value (`80%`, `80vw`, `400px`). Default: auto, capped at `min(32rem, …)`. */
+    width?: string;
+    /** Panel height — any CSS value (`60%`, `60vh`, `300px`). Default: auto (content height). */
+    height?: string;
+    /** Allow dismissing via backdrop click / Escape (default true). Set false for a must-decide modal. */
+    dismissible?: boolean;
+    /** Called when dismissed via backdrop / Escape (isOpen is also set false). */
+    onClose?: () => void;
+    /** Extra classes on the panel wrapper. */
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    isOpen = $bindable(),
+    width,
+    height,
+    dismissible = true,
+    onClose,
+    class: cls = "",
+    children,
+    ...rest
+  }: Props = $props();
+
+  const FOCUSABLE =
+    'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+  let panelEl: HTMLElement | undefined = $state();
+  let previouslyFocused: HTMLElement | null = null;
+
+  // Move the overlay to <body> so it's a real top-level layer — never a sibling of the trigger (which
+  // would perturb surrounding layout) and never clipped by an ancestor's overflow/stacking context.
+  function portal(node: HTMLElement) {
+    document.body.appendChild(node);
+    return { destroy: () => node.remove() };
+  }
+
+  // Lock background scroll while open; pad by the scrollbar width so hiding it doesn't shift the page.
+  $effect(() => {
+    if (!isOpen) return;
+    const sbw = window.innerWidth - document.documentElement.clientWidth;
+    const prevOverflow = document.body.style.overflow;
+    const prevPad = document.body.style.paddingRight;
+    document.body.style.overflow = "hidden";
+    if (sbw > 0) document.body.style.paddingRight = `${sbw}px`;
+    return () => {
+      document.body.style.overflow = prevOverflow;
+      document.body.style.paddingRight = prevPad;
+    };
+  });
+
+  // Focus management: on open, remember what was focused and move focus into the panel; on close,
+  // restore it. (Tab-wrapping is handled in onKeydown.)
+  $effect(() => {
+    if (!isOpen) return;
+    previouslyFocused = document.activeElement as HTMLElement | null;
+    queueMicrotask(() => {
+      const first = panelEl?.querySelector<HTMLElement>(FOCUSABLE);
+      (first ?? panelEl)?.focus();
+    });
+    return () => previouslyFocused?.focus?.();
+  });
+
+  const panelStyle = $derived(
+    [
+      width ? `width:${width}` : "width:auto",
+      `max-width:${width ? "calc(100vw - 2rem)" : "min(32rem, calc(100vw - 2rem))"}`,
+      height ? `height:${height}` : null,
+      "max-height:calc(100vh - 2rem)",
+    ]
+      .filter(Boolean)
+      .join(";"),
+  );
+
+  function close() {
+    if (!dismissible) return;
+    onClose?.();
+    isOpen = false;
+  }
+  function onBackdrop(event: MouseEvent) {
+    if (event.target === event.currentTarget) close();
+  }
+  function onKeydown(event: KeyboardEvent) {
+    if (!isOpen) return;
+    if (event.key === "Escape") {
+      close();
+      return;
+    }
+    if (event.key === "Tab" && panelEl) {
+      const items = [...panelEl.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(
+        (el) => el.offsetParent !== null,
+      );
+      if (items.length === 0) {
+        event.preventDefault();
+        panelEl.focus();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+      if (event.shiftKey && (active === first || active === panelEl)) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  }
+</script>
+
+<svelte:window on:keydown={onKeydown} />
+
+{#if isOpen}
+  <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+  <div
+    use:portal
+    class="fixed inset-0 bg-black/50 flex items-center justify-center z-[9999] p-4"
+    onclick={onBackdrop}
+    role="presentation"
+  >
+    <div
+      bind:this={panelEl}
+      class="overflow-auto z-[10000] {cls}"
+      style={panelStyle}
+      role="dialog"
+      aria-modal="true"
+      tabindex="-1"
+      {...rest}
+    >
+      {@render children?.()}
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,30 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+/**
+ * Dialog — a PURE modal shell (layout container). It owns only the modal mechanics: portals itself
+ * to <body>, locks background scroll, renders a dismissable backdrop, traps focus, and exposes the
+ * ARIA dialog role. It imposes NO content structure — put a `Card` (or anything) inside via
+ * `children`. For the common title + message + Confirm/Cancel pattern, use `ConfirmDialog`, which is
+ * built on this.
+ *
+ * `width` / `height` accept any CSS length: `"80%"`, `"80vw"`, `"60vh"`, `"400px"`, … (both default
+ * to content size, capped to the viewport minus a 1rem inset so the panel never runs off-screen).
+ */
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+    /** Whether the dialog is shown (bindable). */
+    isOpen: boolean;
+    /** Panel width — any CSS value (`80%`, `80vw`, `400px`). Default: auto, capped at `min(32rem, …)`. */
+    width?: string;
+    /** Panel height — any CSS value (`60%`, `60vh`, `300px`). Default: auto (content height). */
+    height?: string;
+    /** Allow dismissing via backdrop click / Escape (default true). Set false for a must-decide modal. */
+    dismissible?: boolean;
+    /** Called when dismissed via backdrop / Escape (isOpen is also set false). */
+    onClose?: () => void;
+    /** Extra classes on the panel wrapper. */
+    class?: string;
+    children?: Snippet;
+}
+declare const Dialog: import("svelte").Component<Props, {}, "isOpen">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/{EmailInput/EmailInput.svelte → EmailInput.svelte}

@@ -1,9 +1,12 @@
 <script lang="ts">
-  import Input from '../Input/Input.svelte';
-  import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
-  import type { HTMLInputAttributes } from 'svelte/elements';
+  import Input from "./Input.svelte";
+  import Email from "~icons/mdi/email-outline";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { Size } from "../types/sizes.js";
+  import type { Responsive } from "../types/responsive.js";
+  import type { Variant } from "../types/variants.js";
 
-  interface Props extends Omit<HTMLInputAttributes, 'type'> {
+  interface Props extends Omit<HTMLInputAttributes, "type" | "size"> {
     value: string;
     class?: string;
     inputClass?: string;
@@ -11,6 +14,10 @@
     valid?: boolean;
     touched?: boolean;
     element?: HTMLInputElement;
+    size?: Responsive<Size>;
+    /** Shared axes — forwarded to the underlying Input. */
+    variant?: Variant;
+    borderless?: boolean;
     required?: boolean;
   }
 
@@ -26,8 +33,9 @@
 
   // Default email validation
   const defaultEmailValidator = (value: string) => {
-    if (required && !value) return 'Email is required';
-    if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return 'Please enter a valid email address';
+    if (required && !value) return "Email is required";
+    if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
+      return "Please enter a valid email address";
     return true;
   };
 
@@ -41,7 +49,8 @@
   bind:touched
   bind:element
   type="email"
-  icon={faEnvelope}
   validate={emailValidator}
   {...restProps}
-/>
+>
+  {#snippet icon()}<Email />{/snippet}
+</Input>