@reddb-io/ui-kit 0.3.4 → 0.3.6

package/vendor/ds/kits/app/src/composites/SidebarRail.svelte

@@ -0,0 +1,162 @@
+<!-- A compact, externally selected application/workspace rail with roving focus. -->
+<script module lang="ts">
+  import { face, nameOf } from "../core/sidebar-rail";
+  import type { SidebarRailItem } from "../core/sidebar-rail";
+  export type { SidebarRailItem } from "../core/sidebar-rail";
+</script>
+
+<script lang="ts">
+  import type { SidebarRailContract } from "../core/contracts/sidebarrail";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { Badge, Button, Divider, Icon, Indicator, StatusIndicator, Tooltip } from "@reddb-io/design-system/base";
+  import { navigationBadge, navigationMarkerLabel } from "./navigation.behavior";
+  import { warnDeprecated } from "@reddb-io/design-system/base";
+  import { sidebarRail } from "./sidebar-rail.variants";
+
+  interface Props extends SidebarRailContract, Omit<HTMLAttributes<HTMLElement>, "class" | "onselect"> {
+    /** @deprecated Renamed `currentId` (ADR 0026); removed next release. */
+    selectedId?: string;
+    /** Emits the chosen identity without retaining organization state. */
+    onselect?: (id: string) => void;
+    /** Brand or home control placed above the roving item collection. */
+    top?: Snippet;
+    /** Account control placed below the roving item collection. */
+    bottom?: Snippet;
+    /** Extra classes merged onto the navigation landmark. */
+    class?: string;
+  }
+
+  let {
+    label,
+    items,
+    currentId: currentIdProp,
+    selectedId,
+    onselect,
+    top,
+    bottom,
+    showLabels = false,
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const currentId = $derived(currentIdProp ?? selectedId);
+
+  $effect(() => {
+    if (selectedId !== undefined) warnDeprecated("SidebarRail", "selectedId", "currentId");
+  });
+
+  function initialFocusIndex(): number {
+    const selected = items.findIndex((item) => item.id === currentId && !item.disabled);
+    if (selected >= 0) return selected;
+    const first = items.findIndex((item) => !item.disabled);
+    return Math.max(first, 0);
+  }
+
+  let focusIndex = $state(initialFocusIndex());
+  const styles = $derived(sidebarRail({ labelled: showLabels }));
+
+  $effect(() => {
+    if (items[focusIndex] && !items[focusIndex]?.disabled) return;
+    focusIndex = initialFocusIndex();
+  });
+
+  function controls(rail: HTMLElement): HTMLElement[] {
+    return [...rail.querySelectorAll<HTMLElement>('[data-sidebar-rail-item]:not(:disabled):not([aria-disabled="true"])')];
+  }
+
+  function focusControl(event: KeyboardEvent): void {
+    if (!(event.target instanceof HTMLElement) || !event.target.dataset.sidebarRailItem) {
+      return;
+    }
+
+    const available = controls(event.currentTarget as HTMLElement);
+    const current = available.indexOf(event.target);
+    if (current < 0) return;
+
+    let next: number | undefined;
+    if (event.key === "ArrowDown") next = (current + 1) % available.length;
+    if (event.key === "ArrowUp") next = (current - 1 + available.length) % available.length;
+    if (event.key === "Home") next = 0;
+    if (event.key === "End") next = available.length - 1;
+    if (next === undefined) return;
+
+    event.preventDefault();
+    const control = available[next]!;
+    focusIndex = Number(control.dataset.sidebarRailIndex);
+    control.focus();
+  }
+
+  function rememberFocusedControl(event: FocusEvent): void {
+    if (!(event.target instanceof HTMLElement) || !event.target.dataset.sidebarRailItem) {
+      return;
+    }
+    focusIndex = Number(event.target.dataset.sidebarRailIndex);
+  }
+</script>
+
+<nav
+  {...rest}
+  aria-label={label}
+  data-sidebar-rail
+  data-sidebar-rail-labels={showLabels ? "" : undefined}
+  class={styles.root({ class: className })}
+  onkeydown={focusControl}
+  onfocusin={rememberFocusedControl}
+>
+  <div data-sidebar-rail-region="top" class={styles.region()}>
+    {@render top?.()}
+  </div>
+
+  <div data-sidebar-rail-region="middle" class={styles.region({ class: styles.middle() })}>
+    <ul data-sidebar-rail-items class={styles.list()}>
+      {#each items as item, index (item.id)}
+        <li class="w-full">
+          {#if item.separatorBefore && index > 0}<Divider data-sidebar-rail-divider class={styles.divider()} />{/if}
+          {#snippet itemFace()}
+            {#if item.icon}<Icon icon={item.icon} size="md" aria-hidden="true" data-sidebar-rail-glyph />
+            {:else}<span aria-hidden="true" data-sidebar-rail-glyph class={styles.fallback()}>{face(item)}</span>{/if}
+          {/snippet}
+          <Tooltip content={navigationMarkerLabel(item, item.label)} disabled={item.disabled}>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="ghost"
+                href={item.href}
+                aria-label={navigationMarkerLabel(item, nameOf(item, showLabels))}
+                disabled={item.disabled}
+                tabindex={!item.disabled && index === focusIndex ? 0 : -1}
+                aria-pressed={item.href ? undefined : item.id === currentId}
+                aria-current={item.href && item.id === currentId ? "page" : undefined}
+                aria-expanded={item.expanded}
+                aria-controls={item.controls}
+                data-sidebar-rail-item={item.id}
+                data-sidebar-rail-index={index}
+                class={styles.item()}
+                onclick={() => onselect?.(item.id)}
+              >
+            <!-- Read the destination before its decorative face and notification. -->
+            {#if showLabels}<span data-sidebar-rail-label class={styles.label()}>{item.label}</span>{/if}
+            <span data-sidebar-rail-face class={styles.face()}>
+            {#if item.badge !== undefined || item.status}
+              <Indicator class={styles.badgeAnchor()}>
+                {#snippet marker()}{#if item.badge !== undefined}<Badge tone={item.badgeTone ?? "neutral"} variant="filled" class={styles.badge()} aria-hidden="true">{navigationBadge(item.badge)}</Badge>{/if}{/snippet}
+                <Indicator position="bottom-end" class={styles.statusAnchor()}>
+                  {#snippet marker()}{#if item.status}<StatusIndicator label={item.status.label} tone={item.status.tone} showLabel={false} aria-hidden="true" />{/if}{/snippet}
+                  {@render itemFace()}
+                </Indicator>
+              </Indicator>
+            {:else}{@render itemFace()}{/if}
+            </span>
+              </Button>
+            {/snippet}
+          </Tooltip>
+        </li>
+      {/each}
+    </ul>
+  </div>
+
+  <div data-sidebar-rail-region="bottom" class={styles.region()}>
+    {@render bottom?.()}
+  </div>
+</nav>

package/vendor/ds/kits/app/src/composites/SpeedDial.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { SpeedDialContract } from "../core/contracts/speeddial";
+  import type { Snippet } from "svelte";
+  import { Button, Popover } from "@reddb-io/design-system/base";
+  import type { SpeedDialAction } from "./command-surfaces.behavior";
+  import { speedDial, type SpeedDialSize } from "./speed-dial.variants";
+
+  type Side = "top" | "right" | "bottom" | "left";
+  type Align = "start" | "center" | "end";
+
+  interface Props extends SpeedDialContract {
+    /** Called with the new open state whenever the actions are revealed or hidden. */
+    onopenchange?: (open: boolean) => void;
+    /** Custom content for the trigger Button; `triggerLabel` is shown when omitted. */
+    trigger?: Snippet;
+    /** Extra classes, merged over the content slot's own, onto the revealed actions surface. */
+    class?: string;
+  }
+
+  let {
+    triggerLabel,
+    contentLabel,
+    actions = [],
+    open = $bindable(false),
+    onopenchange,
+    disabled = false,
+    size = "md",
+    side = "top",
+    align = "end",
+    sideOffset = 8,
+    collisionPadding = 8,
+    trigger,
+    class: className,
+  }: Props = $props();
+
+  const slots = $derived(speedDial({ size }));
+</script>
+
+<div data-speed-dial>
+  <Popover
+    {triggerLabel}
+    {contentLabel}
+    bind:open
+    {onopenchange}
+    {disabled}
+    variant="primary"
+    {size}
+    {side}
+    {align}
+    {sideOffset}
+    {collisionPadding}
+    {trigger}
+    class={slots.content({ class: className })}
+  >
+    {#each actions as action (action.id)}
+      <Button
+        data-speed-dial-action
+        href={action.href}
+        disabled={action.disabled}
+        variant="ghost"
+        {size}
+        class={slots.action()}
+        onclick={action.href === undefined ? () => action.onselect?.() : undefined}
+      >{action.label}</Button>
+    {/each}
+  </Popover>
+</div>

package/vendor/ds/kits/app/src/composites/StoreNavigation.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { StoreNavigationContract } from "../core/contracts/storenavigation";
+  import { Navbar, type NavbarCollapse, type NavbarLink } from "@reddb-io/design-system/base";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { navigationItems, type ApplicationNavigationItem } from "./navigation.behavior";
+  import { storeNavigation } from "./store-navigation.variants";
+
+  interface Props extends StoreNavigationContract, Omit<HTMLAttributes<HTMLElement>, keyof StoreNavigationContract | "class"> {
+    /** Optional banner rendered above the navbar, such as a promotion or shipping notice. */
+    announcement?: Snippet;
+    /** Optional content at the start of the bar, usually the store's logo or name. */
+    brand?: Snippet;
+    /** Optional controls at the end of the bar, such as search, account or cart buttons. */
+    actions?: Snippet;
+    /**
+     * Extra classes, merged over the root slot's own, onto the wrapper around the announcement and
+     * navbar.
+     */
+    class?: string;
+  }
+
+  const {
+    label,
+    items,
+    currentId,
+    collapse = "responsive",
+    announcement,
+    brand,
+    actions,
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const links: readonly NavbarLink[] = $derived(
+    navigationItems(items, currentId).map((item) => ({
+      id: item.id,
+      label: item.label,
+      href: item.href,
+      current: item.current,
+      disabled: item.disabled,
+      onselect: item.onselect,
+    })),
+  );
+  const styles = $derived(storeNavigation());
+</script>
+
+<div {...rest} data-store-navigation="" class={styles.root({ class: className })}>
+  {#if announcement}
+    <div data-store-announcement="" class={styles.announcement()}>{@render announcement()}</div>
+  {/if}
+  <Navbar {label} {links} {collapse} {brand} {actions} class={styles.navbar()} />
+</div>

package/vendor/ds/kits/app/src/composites/TaskCard.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import {
+    Link,
+    Progress,
+    StatusIndicator,
+    formatPercent,
+    normalizeRange,
+  } from "@reddb-io/design-system/base";
+  import type { TaskCardContract } from "../core/contracts/taskcard";
+  import {
+    TASK_STATE_LABELS,
+    TASK_STATE_TONES,
+    validateTasks,
+    type TaskListItem,
+  } from "./task-list.behavior";
+  import { taskList } from "./task-list.variants";
+  import { operational } from "../operational.variants";
+  interface Props extends TaskCardContract {
+    /** Application-owned controls; the card never schedules work. */
+    actions?: Snippet<[TaskListItem]>;
+    /** Additional root classes. */
+    class?: string;
+  }
+  let { item, surface = true, actions, class: className }: Props = $props();
+  const task = $derived(validateTasks([item])[0]!);
+  const slots = taskList(),
+    frame = operational();
+</script>
+
+<div
+  data-task-card
+  data-state={task.state}
+  class={[surface ? frame.root() : "", frame.body(), className]
+    .filter(Boolean)
+    .join(" ")}
+>
+  <div class={slots.header()}>
+    <p class={slots.title()}>
+      {#if task.href}<Link href={task.href}>{task.title}</Link
+        >{:else}{task.title}{/if}
+    </p>
+    <StatusIndicator
+      label={task.stateLabel ?? TASK_STATE_LABELS[task.state]}
+      tone={task.tone ?? TASK_STATE_TONES[task.state]}
+    />
+  </div>
+  {#if task.description}<p class={slots.description()}>
+      {task.description}
+    </p>{/if}
+  {#if task.progress !== undefined}<div class={slots.progress()}>
+      <Progress
+        label={`${task.title} progress`}
+        value={task.progress}
+        formatValue={task.progressLabel ? () => task.progressLabel! : undefined}
+        class="min-w-0 flex-1"
+      />{#if task.progress !== null}<span
+          aria-hidden="true"
+          class={slots.reading()}
+          >{task.progressLabel ??
+            formatPercent(normalizeRange(task.progress, 0, 100))}</span
+        >{/if}
+    </div>{/if}
+  {#if task.worker || task.estimate}<div class={slots.context()}>
+      {#if task.worker}<span>{task.worker}</span>{/if}{#if task.estimate}<span
+          >{task.estimate}</span
+        >{/if}
+    </div>{/if}
+  {#if task.reason}<p class={slots.reason()}>{task.reason}</p>{/if}
+  {#if actions}<div class={slots.actions()}>{@render actions(task)}</div>{/if}
+</div>

package/vendor/ds/kits/app/src/composites/TaskList.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import TaskCard from "./TaskCard.svelte";
+  import type { TaskListContract } from "../core/contracts/tasklist";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { EmptyState } from "@reddb-io/design-system/base";
+  import { validateTasks, type TaskListItem } from "./task-list.behavior";
+  import { taskList } from "./task-list.variants";
+
+  interface Props
+    extends
+      TaskListContract,
+      Omit<
+        HTMLAttributes<HTMLDivElement>,
+        keyof TaskListContract | "class" | "children"
+      > {
+    /** Caller-owned controls per task; receives the current item and never assumes an execution API. */
+    actions?: Snippet<[TaskListItem]>;
+    /** Optional custom empty content, replacing the canonical empty state. */
+    empty?: Snippet;
+    /** Extra classes on the root. */
+    class?: string;
+  }
+  let {
+    label,
+    items,
+    actions,
+    empty,
+    emptyLabel = "No tasks",
+    emptyDescription,
+    class: className,
+    ...rest
+  }: Props = $props();
+  const tasks = $derived(validateTasks(items));
+  const slots = taskList();
+</script>
+
+<div {...rest} data-task-list class={slots.root({ class: className })}>
+  {#if tasks.length}
+    <ul aria-label={label} class={slots.list()}>
+      {#each tasks as item (item.id)}
+        <li data-task-id={item.id} data-state={item.state} class={slots.item()}>
+          <TaskCard {item} surface={false} {actions} />
+        </li>
+      {/each}
+    </ul>
+  {:else if empty}
+    {@render empty()}
+  {:else}
+    <EmptyState title={emptyLabel} description={emptyDescription} size="sm" />
+  {/if}
+</div>

package/vendor/ds/kits/app/src/composites/TelemetryRow.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { Meter, StatusIndicator } from "@reddb-io/design-system/base";
+  import type { TelemetryRowContract } from "../core/contracts/telemetryrow";
+  import { operational } from "../operational.variants";
+
+  interface Props extends TelemetryRowContract {
+    /** Additional root classes. */
+    class?: string;
+  }
+  let {
+    label,
+    value,
+    max = 100,
+    stateLabel,
+    condition,
+    description,
+    tone = "neutral",
+    class: className,
+  }: Props = $props();
+  const s = operational();
+</script>
+
+<div data-telemetry-row class={s.body({ class: className })}>
+  <div class={s.header()}>
+    <p class={s.title()}>{label}</p>
+    {#if stateLabel}<StatusIndicator label={stateLabel} {tone} />{/if}
+  </div>
+  <Meter
+    {value}
+    {max}
+    {label}
+    layout="inline"
+    labelHidden
+    formatValue={(n) => `${n} / ${Math.max(1, max)}`}
+  />{#if description || condition}<div class={s.row()}>
+      {#if description}<span class={s.description()}>{description}</span
+        >{/if}{#if condition}<span class={s.description()}>{condition}</span
+        >{/if}
+    </div>{/if}
+</div>

package/vendor/ds/kits/app/src/composites/Toolbar.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { ToolbarContract } from "../core/contracts/toolbar";
+  import { Toolbar as Bits } from "bits-ui";
+  import { Button, Link, quietControl } from "@reddb-io/design-system/base";
+  import type { ToolbarItem } from "./command-surfaces.behavior";
+  import { toolbar, type ToolbarSize } from "./toolbar.variants";
+
+  type Orientation = "horizontal" | "vertical";
+
+  interface Props extends ToolbarContract {
+    /** Extra classes, merged over the root slot's own, onto the toolbar element. */
+    class?: string;
+  }
+
+  let {
+    label,
+    items = [],
+    orientation = "horizontal",
+    size = "md",
+    loop = true,
+    class: className,
+  }: Props = $props();
+
+  const slots = $derived(toolbar({ orientation, size }));
+</script>
+
+<Bits.Root {orientation} {loop}>
+  {#snippet child({ props })}
+    <div
+      {...props}
+      data-command-toolbar
+      aria-label={label}
+      aria-orientation={orientation}
+      class={slots.root({ class: className })}
+    >
+      {#each items as item (item.id)}
+        {@const href = item.href}
+        {#if href !== undefined && !item.disabled}
+          <Bits.Link>
+            {#snippet child({ props: linkProps })}
+              <Link
+                {...linkProps}
+                data-toolbar-item
+                {href}
+                class={quietControl({ class: slots.item({ class: "rounded-md no-underline" }) })}
+              >{item.label}</Link>
+            {/snippet}
+          </Bits.Link>
+        {:else}
+          <Bits.Button disabled={item.disabled}>
+            {#snippet child({ props: buttonProps })}
+              <Button
+                {...buttonProps}
+                data-toolbar-item
+                disabled={item.disabled}
+                variant="ghost"
+                {size}
+                class={slots.item()}
+                onclick={() => item.onselect?.()}
+              >{item.label}</Button>
+            {/snippet}
+          </Bits.Button>
+        {/if}
+      {/each}
+    </div>
+  {/snippet}
+</Bits.Root>

package/vendor/ds/kits/app/src/composites/action-panel.variants.ts

@@ -0,0 +1,12 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const actionPanel = tv({
+  slots: {
+    root: "w-full",
+    heading: "items-start pb-0",
+    content: "flex flex-col gap-[var(--reddb-spatial-gap-md)]",
+    actions: "flex w-full flex-wrap items-center justify-end gap-[var(--reddb-spatial-gap-md)]",
+  },
+});
+
+export type ActionPanelVariants = VariantProps<typeof actionPanel>;

package/vendor/ds/kits/app/src/composites/activity-feed.variants.ts

@@ -0,0 +1,10 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+/** Token-only extension seam over the canonical Base Timeline. */
+export const activityFeed = tv({
+  slots: {
+    root: "m-0 w-full min-w-0 gap-[var(--reddb-spatial-gap-md)]",
+  },
+});
+
+export type ActivityFeedVariants = VariantProps<typeof activityFeed>;

package/vendor/ds/kits/app/src/composites/application-shell.behavior.ts

@@ -0,0 +1,25 @@
+/** The existing shell region that owns the one application brand mark. */
+export type ShellBrandRegion = "navbar" | "rail" | "panel";
+
+/** Regions present in an application's configured shell composition. */
+export interface ShellBrandComposition {
+  /** Whether the shell has a Navbar brand region. */
+  navbar?: boolean;
+  /** Whether the shell has a SidebarRail top region. */
+  rail?: boolean;
+}
+
+/**
+ * Resolve the one brand owner for an application shell.
+ *
+ * A Navbar outranks a SidebarRail, which outranks the sidebar panel header.
+ * Callers render their brand snippet only in the returned existing region.
+ */
+export function shellBrandRegion({
+  navbar = false,
+  rail = false,
+}: ShellBrandComposition = {}): ShellBrandRegion {
+  if (navbar) return "navbar";
+  if (rail) return "rail";
+  return "panel";
+}

package/vendor/ds/kits/app/src/composites/application-shell.variants.ts

@@ -0,0 +1,35 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+/**
+ * The application frame's structural appearance. Every inset names a live
+ * Density role; colour names remain semantic so nested appearance scopes keep
+ * deciding what the shell looks like.
+ */
+export const applicationShell = tv({
+  slots: {
+    root: "flex min-h-dvh w-full flex-col bg-elevation-base-surface text-foreground",
+    header: "shrink-0 border-b",
+    headerContainer: "",
+    main: "min-h-0 flex-1 bg-elevation-base-surface",
+    mainContainer: "py-[var(--reddb-spatial-inset-lg)]",
+    footer: "shrink-0 border-t border-elevation-sunken-border bg-elevation-sunken-surface shadow-elevation-sunken",
+    footerContainer: "py-[var(--reddb-spatial-inset-sm)]",
+  },
+  variants: {
+    fullWidth: {
+      true: {
+        // Edge-to-edge chrome owns its own geometry, as the workspace does.
+        // A Navbar must not sit inside a separately padded, shadowed strip.
+        header: "border-muted bg-navigation-surface",
+        headerContainer: "py-0",
+      },
+      false: {
+        header: "border-elevation-sunken-border bg-elevation-sunken-surface shadow-elevation-sunken",
+        headerContainer: "py-[var(--reddb-spatial-inset-sm)]",
+      },
+    },
+  },
+  defaultVariants: { fullWidth: false },
+});
+
+export type ApplicationShellVariants = VariantProps<typeof applicationShell>;

package/vendor/ds/kits/app/src/composites/bottom-navigation.variants.ts

@@ -0,0 +1,20 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const bottomNavigation = tv({
+  slots: {
+    root: "w-full border-t border-muted bg-elevation-sunken-surface pb-[env(safe-area-inset-bottom)] text-foreground",
+    face: "inline-flex size-[var(--reddb-spatial-icon-size-md)] items-center justify-center",
+    badge: "h-[var(--reddb-spatial-icon-size-md)] min-w-[var(--reddb-spatial-icon-size-md)] justify-center rounded-full p-0 tabular-nums",
+    list: [
+      "m-0 flex list-none items-stretch gap-[var(--reddb-spatial-gap-sm)] p-0",
+      "px-[var(--reddb-spatial-inset-sm)] py-[var(--reddb-spatial-inset-sm)]",
+    ].join(" "),
+    entry: "min-w-0 flex-1",
+    // A horizontal rail: the current item's 2px ink indicator moves from
+    // NavItem's start edge to the top edge, the one the bar shares with the
+    // content above it.
+    item: "min-h-[var(--reddb-spatial-control-height-lg)] justify-center rounded-none border-s-0 border-t-2 px-0 text-center flex-col gap-[var(--reddb-spatial-gap-sm)] text-caption [&_[data-nav-label]]:max-w-full",
+  },
+});
+
+export type BottomNavigationVariants = VariantProps<typeof bottomNavigation>;

package/vendor/ds/kits/app/src/composites/card-heading.variants.ts

@@ -0,0 +1,7 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const cardHeading = tv({
+  base: "min-w-0 items-start pb-0",
+});
+
+export type CardHeadingVariants = VariantProps<typeof cardHeading>;

package/vendor/ds/kits/app/src/composites/category-filter.variants.ts

@@ -0,0 +1,22 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+/** One independently selectable category in a CategoryFilter. */
+export interface CategoryFilterOption {
+  /** Stable native form value. */
+  value: string;
+  /** Visible category name. */
+  label: string;
+  /** Present but unavailable to pointer and keyboard selection. */
+  disabled?: boolean;
+}
+
+/** Token-only arrangement around canonical Base Fieldset and Checkbox contracts. */
+export const categoryFilter = tv({
+  slots: {
+    root: "min-w-0",
+    list: "grid w-full gap-[var(--reddb-spatial-gap-sm)]",
+    option: "min-w-0",
+  },
+});
+
+export type CategoryFilterVariants = VariantProps<typeof categoryFilter>;

package/vendor/ds/kits/app/src/composites/category-preview.variants.ts

@@ -0,0 +1,21 @@
+import { card } from "@reddb-io/design-system/base/recipes";
+import { tv, type VariantProps } from "tailwind-variants";
+
+const ROOT = card({ variant: "plain", padding: "none" }).root({
+  class: "group h-full min-w-0 overflow-hidden",
+});
+
+/** Token-only presentation around canonical Card, AspectRatio, and Link contracts. */
+export const categoryPreview = tv({
+  slots: {
+    root: ROOT,
+    media: "overflow-hidden rounded-lg bg-muted",
+    content: "flex min-w-0 flex-col gap-[var(--reddb-spatial-gap-sm)] pt-[var(--reddb-spatial-inset-sm)]",
+    // The destination's name reads in the Theme's `heading` role, through the
+    // Base Heading (ADR 0025).
+    name: "",
+    description: "text-sm text-ink-muted",
+  },
+});
+
+export type CategoryPreviewVariants = VariantProps<typeof categoryPreview>;