@spaethtech/svelte-ui 0.1.10 → 0.3.1-dev.3.e16df24

package/dist/components/Calendar.svelte

@@ -0,0 +1,259 @@
+<!--
+/**
+ * Calendar — the themed month-grid primitive behind DatePicker. A pure inline calendar (no popup/
+ * trigger) so it can live in a Popup, a Dialog, or on a page. Values are ISO `YYYY-MM-DD` (local, not
+ * UTC-shifted).
+ *
+ * `mode="single"` binds `value`; `mode="range"` binds `start`/`end` and paints the band between them
+ * (with a live hover preview while picking the end). Keyboard: arrows move the day cursor (crossing
+ * months), Home/End jump to row ends, PageUp/PageDown change month, Enter/Space select.
+ */
+-->
+<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 IconLeft from "~icons/mdi/chevron-left";
+  import IconRight from "~icons/mdi/chevron-right";
+
+  interface Props {
+    mode?: "single" | "range";
+    /** Single mode: selected date, ISO `YYYY-MM-DD`. Bindable. */
+    value?: string;
+    /** Range mode: endpoints, ISO `YYYY-MM-DD`. Bindable. */
+    start?: string;
+    end?: string;
+    min?: string;
+    max?: string;
+    weekStart?: 0 | 1;
+    locale?: string;
+    size?: Responsive<Size>;
+    /** Accent for the selected day + range band. Default primary. */
+    variant?: Variant;
+    class?: string;
+    onselect?: (iso: string) => void;
+    onrange?: (r: { start: string; end: string }) => void;
+  }
+
+  let {
+    mode = "single",
+    value = $bindable(""),
+    start = $bindable(""),
+    end = $bindable(""),
+    min,
+    max,
+    weekStart,
+    locale = typeof navigator !== "undefined" ? navigator.language : "en-US",
+    size = "md",
+    variant = "primary",
+    class: cls = "",
+    onselect,
+    onrange,
+  }: Props = $props();
+
+  const accent = $derived(`var(${variantToken[variant]})`);
+
+  const iso = (dt: Date) =>
+    `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, "0")}-${String(dt.getDate()).padStart(2, "0")}`;
+  const parse = (s: string) => {
+    const [y, m, d] = s.split("-").map(Number);
+    return new Date(y, m - 1, d);
+  };
+  const todayIso = iso(new Date());
+
+  const resolvedWeekStart = $derived.by<0 | 1>(() => {
+    if (weekStart === 0 || weekStart === 1) return weekStart;
+    try {
+      const loc = new Intl.Locale(locale) as Intl.Locale & {
+        weekInfo?: { firstDay: number };
+        getWeekInfo?: () => { firstDay: number };
+      };
+      const first = loc.weekInfo?.firstDay ?? loc.getWeekInfo?.().firstDay;
+      return first === 1 ? 1 : 0;
+    } catch {
+      return 0;
+    }
+  });
+
+  const seed = $derived(parse(value || start || todayIso));
+  let view = $state({ y: seed.getFullYear(), m: seed.getMonth() });
+  let cursor = $state(iso(seed));
+  let hover = $state(""); // range: previewed end while picking
+
+  $effect(() => {
+    const anchor = value || start;
+    if (!anchor) return;
+    const d = parse(anchor);
+    if (d.getFullYear() !== view.y || d.getMonth() !== view.m)
+      view = { y: d.getFullYear(), m: d.getMonth() };
+  });
+
+  const monthLabel = $derived(
+    new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(
+      new Date(view.y, view.m, 1),
+    ),
+  );
+  const weekdays = $derived.by(() => {
+    const fmt = new Intl.DateTimeFormat(locale, { weekday: "short" });
+    return Array.from({ length: 7 }, (_, i) =>
+      fmt.format(new Date(2024, 0, 7 + ((i + resolvedWeekStart) % 7))),
+    );
+  });
+  const cells = $derived.by(() => {
+    const first = new Date(view.y, view.m, 1);
+    const lead = (first.getDay() - resolvedWeekStart + 7) % 7;
+    return Array.from({ length: 42 }, (_, i) => new Date(view.y, view.m, 1 - lead + i));
+  });
+
+  const outOfBounds = (i: string) => !!((min && i < min) || (max && i > max));
+
+  // range: the low/high of the currently-painted span (committed end, else hover preview).
+  const selecting = $derived(mode === "range" && !!start && !end);
+  const previewEnd = $derived(end || (selecting ? hover : ""));
+  const lo = $derived(start && previewEnd ? (start < previewEnd ? start : previewEnd) : start);
+  const hi = $derived(start && previewEnd ? (start < previewEnd ? previewEnd : start) : "");
+
+  // Each field is a per-Size class map → responsiveClasses() so `size` may be scalar OR responsive.
+  const cellMap: Record<Size, string> = {
+    sm: "size-7 text-xs",
+    md: "size-8 text-sm",
+    lg: "size-10 text-base",
+  };
+  const headMap: Record<Size, string> = { sm: "h-9", md: "h-10", lg: "h-11" };
+  const labelMap: Record<Size, string> = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+  const navMap: Record<Size, string> = { sm: "size-7", md: "size-8", lg: "size-9" };
+  const sizing = $derived({
+    cell: responsiveClasses(size, cellMap),
+    head: responsiveClasses(size, headMap),
+    label: responsiveClasses(size, labelMap),
+    nav: responsiveClasses(size, navMap),
+  });
+
+  function go(deltaMonths: number) {
+    const d = new Date(view.y, view.m + deltaMonths, 1);
+    view = { y: d.getFullYear(), m: d.getMonth() };
+  }
+  function pick(i: string) {
+    if (outOfBounds(i)) return;
+    cursor = i;
+    if (mode === "single") {
+      value = i;
+      onselect?.(i);
+      return;
+    }
+    if (!start || (start && end)) {
+      start = i;
+      end = "";
+      onrange?.({ start: i, end: "" });
+    } else if (i < start) {
+      start = i;
+      onrange?.({ start: i, end: "" });
+    } else {
+      end = i;
+      onrange?.({ start, end: i });
+    }
+  }
+  function moveCursor(days: number) {
+    const d = parse(cursor);
+    d.setDate(d.getDate() + days);
+    cursor = iso(d);
+    if (d.getFullYear() !== view.y || d.getMonth() !== view.m)
+      view = { y: d.getFullYear(), m: d.getMonth() };
+  }
+  function onKey(e: KeyboardEvent) {
+    const k = e.key;
+    if (k === "ArrowLeft") moveCursor(-1);
+    else if (k === "ArrowRight") moveCursor(1);
+    else if (k === "ArrowUp") moveCursor(-7);
+    else if (k === "ArrowDown") moveCursor(7);
+    else if (k === "Home") moveCursor(-((parse(cursor).getDay() - resolvedWeekStart + 7) % 7));
+    else if (k === "End") moveCursor(6 - ((parse(cursor).getDay() - resolvedWeekStart + 7) % 7));
+    else if (k === "PageUp") go(-1);
+    else if (k === "PageDown") go(1);
+    else if (k === "Enter" || k === " ") pick(cursor);
+    else return;
+    e.preventDefault();
+  }
+
+  let gridEl = $state<HTMLDivElement>();
+  $effect(() => {
+    const btn = gridEl?.querySelector<HTMLButtonElement>(`[data-iso="${cursor}"]`);
+    if (btn && gridEl?.contains(document.activeElement)) btn.focus();
+  });
+
+  const subtle = "[color:color-mix(in_srgb,var(--ui-color-text)_55%,transparent)]";
+</script>
+
+<div
+  class="inline-block select-none rounded-[var(--ui-border-radius)] [color:var(--ui-color-text)] {cls}"
+  style="--accent: {accent}"
+>
+  <div class="mb-1 flex items-center justify-between {sizing.head}">
+    <button
+      type="button"
+      aria-label="Previous month"
+      class="grid {sizing.nav} place-items-center rounded-[var(--ui-border-radius)] hover:[background-color:var(--ui-color-hover)] active:[background-color:var(--ui-color-active)]"
+      onclick={() => go(-1)}><IconLeft class="size-5" /></button
+    >
+    <span class="{sizing.label} font-medium">{monthLabel}</span>
+    <button
+      type="button"
+      aria-label="Next month"
+      class="grid {sizing.nav} place-items-center rounded-[var(--ui-border-radius)] hover:[background-color:var(--ui-color-hover)] active:[background-color:var(--ui-color-active)]"
+      onclick={() => go(1)}><IconRight class="size-5" /></button
+    >
+  </div>
+
+  <div class="grid grid-cols-7 {subtle}">
+    {#each weekdays as w (w)}<div class="grid {sizing.cell} place-items-center font-medium">
+        {w}
+      </div>{/each}
+  </div>
+
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <div
+    bind:this={gridEl}
+    role="grid"
+    tabindex="-1"
+    class="grid grid-cols-7"
+    onkeydown={onKey}
+    onmouseleave={() => (hover = "")}
+  >
+    {#each cells as dt (iso(dt))}
+      {@const i = iso(dt)}
+      {@const inMonth = dt.getMonth() === view.m}
+      {@const edge =
+        mode === "single" ? i === value : i === start || i === end || (selecting && i === hover)}
+      {@const band = mode === "range" && !!lo && !!hi && i > lo && i < hi}
+      {@const isToday = i === todayIso}
+      {@const disabled = outOfBounds(i)}
+      <div
+        class="flex justify-center"
+        style={band ? "background-color: color-mix(in srgb, var(--accent) 14%, transparent)" : ""}
+      >
+        <button
+          type="button"
+          role="gridcell"
+          data-iso={i}
+          aria-selected={edge}
+          aria-current={isToday ? "date" : undefined}
+          tabindex={i === cursor ? 0 : -1}
+          {disabled}
+          class="grid {sizing.cell} place-items-center rounded-[var(--ui-border-radius)] transition-colors
+						{disabled ? 'cursor-not-allowed opacity-30' : 'cursor-pointer'}
+						{edge
+            ? '[background-color:var(--accent)] font-semibold text-white'
+            : !disabled && !band
+              ? 'hover:[background-color:var(--ui-color-hover)] active:[background-color:var(--ui-color-active)]'
+              : ''}
+						{!edge && !inMonth ? subtle : ''}
+						{!edge && isToday ? '[box-shadow:inset_0_0_0_1px_var(--ui-color-secondary)]' : ''}"
+          onclick={() => pick(i)}
+          onmouseenter={() => {
+            if (selecting) hover = i;
+          }}>{dt.getDate()}</button
+        >
+      </div>
+    {/each}
+  </div>
+</div>

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

@@ -0,0 +1,27 @@
+import type { Size } from "../types/sizes.js";
+import { type Responsive } from "../types/responsive.js";
+import { type Variant } from "../types/variants.js";
+interface Props {
+    mode?: "single" | "range";
+    /** Single mode: selected date, ISO `YYYY-MM-DD`. Bindable. */
+    value?: string;
+    /** Range mode: endpoints, ISO `YYYY-MM-DD`. Bindable. */
+    start?: string;
+    end?: string;
+    min?: string;
+    max?: string;
+    weekStart?: 0 | 1;
+    locale?: string;
+    size?: Responsive<Size>;
+    /** Accent for the selected day + range band. Default primary. */
+    variant?: Variant;
+    class?: string;
+    onselect?: (iso: string) => void;
+    onrange?: (r: {
+        start: string;
+        end: string;
+    }) => void;
+}
+declare const Calendar: import("svelte").Component<Props, {}, "start" | "end" | "value">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/components/Card.svelte

@@ -0,0 +1,78 @@
+<!--
+/**
+ * Card — a bordered surface with rounded corners. The CARD owns the padding, so a `CardHeader` /
+ * `CardFooter` separator sits INSIDE that padding (inset, not edge-to-edge). Compose with the
+ * sub-components for structure, or pass plain children for a simple panel.
+ *
+ * Border + radius come from the shared tint tokens (the same scheme Input/DataTable use, so surfaces
+ * match): the OUTER frame is the variant token at `--ui-tint-border` (rest) / `--ui-tint-border-hover`
+ * (hover) — one calc for every variant, no `secondary` special case — while inset Header/Footer
+ * separators stay soft (`--ui-border-color`). `variant` sets the border colour; `size` the padding.
+ *
+ * Background comes from `--ui-color-background` so the card reads as a raised panel over the page
+ * body (matches Input, Dialog, tooltip surface tokens). Themes remap this token to their own
+ * surface color; svelte-ui's default is `#ffffff` for a light-UI baseline.
+ */
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { Size } from "../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../types/responsive.js";
+  import { variantToken, type Variant } from "../types/variants.js";
+
+  let {
+    variant = "secondary",
+    size = "md",
+    borderless = false,
+    class: cls = "",
+    children,
+    ...rest
+  }: {
+    variant?: Variant;
+    size?: Responsive<Size>;
+    /** Drop the visible frame while keeping the 1px box: border colour = the card's own background.
+     *  Defaults `false` — a Card reads as a framed surface. */
+    borderless?: boolean;
+    class?: string;
+    children?: Snippet;
+  } & Omit<HTMLAttributes<HTMLDivElement>, "class"> = $props();
+
+  const padFor: Record<Size, string> = { sm: "p-3", md: "p-4", lg: "p-6" };
+  // Border: ONE calc for EVERY variant (no `secondary`/`--ui-border-color-strong` special case) — the
+  // variant token at `--ui-tint-border` (rest) and `--ui-tint-border-hover` (hover), mixed toward
+  // transparent, same as Input/TextArea. `borderless` paints it the card's own background (frame gone,
+  // box unchanged). Rest goes in inline style (dynamic token); hover needs a class (inline can't do
+  // :hover), enumerated per-variant so Tailwind emits it.
+  const borderColor = $derived(
+    borderless
+      ? "var(--ui-color-background)"
+      : `color-mix(in srgb, var(${variantToken[variant]}) var(--ui-tint-border), transparent)`,
+  );
+  const hoverBorderClass: Record<Variant, string> = {
+    secondary:
+      "hover:[border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border-hover),transparent)]",
+    primary:
+      "hover:[border-color:color-mix(in_srgb,var(--ui-color-primary)_var(--ui-tint-border-hover),transparent)]",
+    danger:
+      "hover:[border-color:color-mix(in_srgb,var(--ui-color-error)_var(--ui-tint-border-hover),transparent)]",
+    info: "hover:[border-color:color-mix(in_srgb,var(--ui-color-info)_var(--ui-tint-border-hover),transparent)]",
+    success:
+      "hover:[border-color:color-mix(in_srgb,var(--ui-color-success)_var(--ui-tint-border-hover),transparent)]",
+    warning:
+      "hover:[border-color:color-mix(in_srgb,var(--ui-color-warning)_var(--ui-tint-border-hover),transparent)]",
+    neutral:
+      "hover:[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border-hover),transparent)]",
+    ghost:
+      "hover:[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border-hover),transparent)]",
+  };
+  const hoverClass = $derived(borderless ? "" : `transition-colors ${hoverBorderClass[variant]}`);
+</script>
+
+<div
+  class="border {responsiveClasses(size, padFor)} {hoverClass} {cls}"
+  style="border-radius: var(--ui-border-radius); border-color: {borderColor}; background: var(--ui-color-background)"
+  {...rest}
+>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } 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 $$ComponentProps = {
+    variant?: Variant;
+    size?: Responsive<Size>;
+    /** Drop the visible frame while keeping the 1px box: border colour = the card's own background.
+     *  Defaults `false` — a Card reads as a framed surface. */
+    borderless?: boolean;
+    class?: string;
+    children?: Snippet;
+} & Omit<HTMLAttributes<HTMLDivElement>, "class">;
+declare const Card: import("svelte").Component<$$ComponentProps, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/CardBody.svelte

@@ -0,0 +1,41 @@
+<!--
+/**
+ * CardBody — the main content region of a Card. A semantic wrapper; the Card already provides the
+ * padding, so this just groups the body content between an optional CardHeader and CardFooter. Pass a
+ * `class` for body-specific layout (e.g. `space-y-3`).
+ */
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { Size } from "../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../types/responsive.js";
+  import { variantToken, type Variant } from "../types/variants.js";
+
+  let {
+    variant,
+    size = "md",
+    class: cls = "",
+    children,
+    ...rest
+  }: {
+    /** Scopes the accent to the body subtree — points `--ui-accent` at the variant token (via
+     *  `.ui-accent`), so interactive children (hover tints, etc.) pick up that colour. */
+    variant?: Variant;
+    /** Body text tier (sm/md/lg). */
+    size?: Responsive<Size>;
+    class?: string;
+    children?: Snippet;
+  } & Omit<HTMLAttributes<HTMLDivElement>, "class"> = $props();
+
+  const textMap: Record<Size, string> = { sm: "text-sm", md: "", lg: "text-lg" };
+  const accentVar = $derived(variant ? `--ui-accent: var(${variantToken[variant]});` : "");
+</script>
+
+<div
+  class="{variant ? 'ui-accent ' : ''}{responsiveClasses(size, textMap)} {cls}"
+  style={accentVar}
+  {...rest}
+>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } 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 $$ComponentProps = {
+    /** Scopes the accent to the body subtree — points `--ui-accent` at the variant token (via
+     *  `.ui-accent`), so interactive children (hover tints, etc.) pick up that colour. */
+    variant?: Variant;
+    /** Body text tier (sm/md/lg). */
+    size?: Responsive<Size>;
+    class?: string;
+    children?: Snippet;
+} & Omit<HTMLAttributes<HTMLDivElement>, "class">;
+declare const CardBody: import("svelte").Component<$$ComponentProps, {}, "">;
+type CardBody = ReturnType<typeof CardBody>;
+export default CardBody;

package/dist/components/CardFooter.svelte

@@ -0,0 +1,49 @@
+<!--
+/**
+ * CardFooter — the bottom section of a Card, with a top separator (inset by the Card's padding). The
+ * separator is configurable HERE: `variant` sets its colour, `separator={false}` removes it, `size`
+ * sets the spacing. Lays out as a flex row with the content end-aligned (action buttons) by default;
+ * override via `class`.
+ */
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { Size } from "../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../types/responsive.js";
+  import { variantToken, type Variant } from "../types/variants.js";
+
+  let {
+    variant = "secondary",
+    size = "md",
+    separator = true,
+    class: cls = "",
+    children,
+    ...rest
+  }: {
+    variant?: Variant;
+    size?: Responsive<Size>;
+    /** Show the top separator (default true). */
+    separator?: boolean;
+    class?: string;
+    children?: Snippet;
+  } & Omit<HTMLAttributes<HTMLDivElement>, "class"> = $props();
+
+  const space: Record<Size, string> = { sm: "pt-2 mt-2", md: "pt-3 mt-3", lg: "pt-4 mt-4" };
+  // Neutral default (secondary) → the shared surface border; any other variant → that accent.
+  const sepColor = $derived(
+    variant === "secondary"
+      ? "var(--ui-border-color)"
+      : `color-mix(in srgb, var(${variantToken[variant]}) var(--ui-tint-border), transparent)`,
+  );
+</script>
+
+<div
+  class="flex items-center justify-end gap-3 {separator
+    ? 'border-t ' + responsiveClasses(size, space)
+    : ''} {cls}"
+  style={separator ? `border-color: ${sepColor}` : ""}
+  {...rest}
+>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } 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 $$ComponentProps = {
+    variant?: Variant;
+    size?: Responsive<Size>;
+    /** Show the top separator (default true). */
+    separator?: boolean;
+    class?: string;
+    children?: Snippet;
+} & Omit<HTMLAttributes<HTMLDivElement>, "class">;
+declare const CardFooter: import("svelte").Component<$$ComponentProps, {}, "">;
+type CardFooter = ReturnType<typeof CardFooter>;
+export default CardFooter;

package/dist/components/CardHeader.svelte

@@ -0,0 +1,49 @@
+<!--
+/**
+ * CardHeader — the top section of a Card, with a bottom separator. It lives inside the Card's padding,
+ * so the separator is naturally inset. The separator is configurable HERE: `variant` sets its colour,
+ * `separator={false}` removes it, `size` sets the spacing around it. Lays out as a flex row
+ * (title left, actions right) by default; override via `class`.
+ */
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { Size } from "../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../types/responsive.js";
+  import { variantToken, type Variant } from "../types/variants.js";
+
+  let {
+    variant = "secondary",
+    size = "md",
+    separator = true,
+    class: cls = "",
+    children,
+    ...rest
+  }: {
+    variant?: Variant;
+    size?: Responsive<Size>;
+    /** Show the bottom separator (default true). */
+    separator?: boolean;
+    class?: string;
+    children?: Snippet;
+  } & Omit<HTMLAttributes<HTMLDivElement>, "class"> = $props();
+
+  const space: Record<Size, string> = { sm: "pb-2 mb-2", md: "pb-3 mb-3", lg: "pb-4 mb-4" };
+  // Neutral default (secondary) → the shared surface border; any other variant → that accent.
+  const sepColor = $derived(
+    variant === "secondary"
+      ? "var(--ui-border-color)"
+      : `color-mix(in srgb, var(${variantToken[variant]}) var(--ui-tint-border), transparent)`,
+  );
+</script>
+
+<div
+  class="flex items-center justify-between gap-3 {separator
+    ? 'border-b ' + responsiveClasses(size, space)
+    : ''} {cls}"
+  style={separator ? `border-color: ${sepColor}` : ""}
+  {...rest}
+>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } 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 $$ComponentProps = {
+    variant?: Variant;
+    size?: Responsive<Size>;
+    /** Show the bottom separator (default true). */
+    separator?: boolean;
+    class?: string;
+    children?: Snippet;
+} & Omit<HTMLAttributes<HTMLDivElement>, "class">;
+declare const CardHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type CardHeader = ReturnType<typeof CardHeader>;
+export default CardHeader;