@reddb-io/ui-kit 0.3.3 → 0.3.5

package/vendor/ds/kits/base/src/core/reveal.ts

@@ -0,0 +1,60 @@
+export const REVEAL_DIRECTIONS = ["up", "down", "left", "right", "none"] as const;
+export type RevealDirection = typeof REVEAL_DIRECTIONS[number];
+export interface RevealState { path: "css" | "js"; entered: boolean; reducedMotion: boolean }
+/** Useful, visible SSR; adapters adopt the same initial state before native effects run. */
+export function initialRevealState(): RevealState { return { path: "js", entered: true, reducedMotion: false }; }
+export function revealDelay(delay: number): number {
+  if (!Number.isFinite(delay) || delay < 0) throw new Error("Reveal: delay must be finite and nonnegative.");
+  return delay;
+}
+const offsets: Record<RevealDirection, readonly [string, string]> = {
+  up: ["0px", "var(--reddb-spatial-inset-lg)"],
+  down: ["0px", "calc(-1 * var(--reddb-spatial-inset-lg))"],
+  left: ["calc(-1 * var(--reddb-spatial-inset-lg))", "0px"],
+  right: ["var(--reddb-spatial-inset-lg)", "0px"],
+  none: ["0px", "0px"],
+};
+
+/** Native browser behavior with no rendering runtime; disposed by each adapter. */
+export function mountReveal(element: HTMLElement, direction: RevealDirection, delay: number, changed: (state: RevealState) => void): () => void {
+  // Millisecond delays belong to a timed entry transition, not a progress timeline.
+  const path = delay === 0 && typeof CSS !== "undefined" && CSS.supports("animation-timeline: view()") ? "css" : "js";
+  const preference = typeof matchMedia === "function" ? matchMedia("(prefers-reduced-motion: reduce)") : undefined;
+  let animation: Animation | undefined, observer: IntersectionObserver | undefined;
+  let disposed = false, settled = false;
+  function stop() { animation?.cancel(); animation = undefined; observer?.disconnect(); observer = undefined; }
+  function sync() {
+    stop();
+    const reducedMotion = preference?.matches ?? false;
+    if (reducedMotion || settled) { settled = true; changed({ path, entered: true, reducedMotion }); return; }
+    if (path === "css") {
+      const ViewTimeline = (globalThis as typeof globalThis & { ViewTimeline?: new (options: { subject: Element }) => AnimationTimeline }).ViewTimeline;
+      if (typeof element.animate !== "function" || !ViewTimeline) { changed({ path, entered: true, reducedMotion }); return; }
+      try {
+        const [x, y] = offsets[direction];
+        animation = element.animate([{ opacity: 0, transform: `translate3d(${x}, ${y}, 0)` }, { opacity: 1, transform: "translate3d(0, 0, 0)" }], {
+          duration: 1, easing: "cubic-bezier(0.22, 1, 0.36, 1)", fill: "both", timeline: new ViewTimeline({ subject: element }), rangeStart: "entry 0%", rangeEnd: "entry 35%",
+        } as KeyframeAnimationOptions);
+        changed({ path, entered: false, reducedMotion });
+      } catch { changed({ path, entered: true, reducedMotion }); }
+      return;
+    }
+    if (typeof IntersectionObserver === "undefined") { changed({ path, entered: true, reducedMotion }); return; }
+    changed({ path, entered: false, reducedMotion });
+    observer = new IntersectionObserver(entries => {
+      if (disposed || !entries.some(entry => entry.isIntersecting)) return;
+      settled = true;
+      changed({ path, entered: true, reducedMotion: preference?.matches ?? false });
+      observer?.disconnect(); observer = undefined;
+    });
+    observer.observe(element);
+  }
+  sync();
+  if (preference?.addEventListener) preference.addEventListener("change", sync);
+  else preference?.addListener(sync);
+  return () => {
+    disposed = true; stop();
+    if (preference?.removeEventListener) preference.removeEventListener("change", sync);
+    else preference?.removeListener(sync);
+  };
+}

package/vendor/ds/kits/base/src/core/segments.ts

@@ -0,0 +1,28 @@
+/** Bounded decorative representation; accessible readings retain exact values. */
+export function segmentGeometry(
+  count: number,
+  percent: number,
+  columns?: number,
+) {
+  if (!Number.isFinite(count) || count < 1)
+    throw new Error("segments must be a positive finite number");
+  const total = Math.min(128, Math.max(1, Math.floor(count)));
+  const perRow =
+    columns === undefined
+      ? total
+      : Math.min(
+          total,
+          Math.max(1, Math.floor(Number.isFinite(columns) ? columns : total)),
+        );
+  const fill =
+    (Math.min(100, Math.max(0, Number.isFinite(percent) ? percent : 0)) / 100) *
+    total;
+  return {
+    columns: perRow,
+    aggregated: count > total,
+    fills: Array.from(
+      { length: total },
+      (_, i) => Math.min(1, Math.max(0, fill - i)) * 100,
+    ),
+  };
+}

package/vendor/ds/kits/base/src/core/skip-link.ts

@@ -0,0 +1,7 @@
+/** Focus only a valid in-page target and respect consumer cancellation. */
+export function focusSkipTarget(event: { defaultPrevented: boolean }, href: string, document: { getElementById(id: string): { focus(): void } | null }): void {
+  if (event.defaultPrevented || !href.startsWith("#")) return;
+  let id: string;
+  try { id = decodeURIComponent(href.slice(1)); } catch { return; }
+  document.getElementById(id)?.focus();
+}

package/vendor/ds/kits/base/src/core/slider.ts

@@ -0,0 +1,23 @@
+/** Exact decimal parts keep range step ties independent of floating-point noise. */
+function decimal(value: number) {
+  const [mantissa, exponent = "0"] = String(value).split("e");
+  const fraction = mantissa!.split(".")[1]?.length ?? 0;
+  return { coefficient: BigInt(mantissa!.replace(".", "")), exponent: Number(exponent) - fraction };
+}
+/** Match native range sanitization so the SSR readout agrees with the browser. */
+export function rangeValue(value: number, min: number, max: number, step: number | "any"): number {
+  const lower = Number.isFinite(min) ? min : 0;
+  const upper = Math.max(lower, Number.isFinite(max) ? max : 100);
+  const next = Math.min(upper, Math.max(lower, Number.isFinite(value) ? value : lower / 2 + upper / 2));
+  if (step === "any") return next;
+  const increment = Number.isFinite(step) && step > 0 ? step : 1;
+  const parts = [next, lower, upper, increment].map(decimal);
+  const exponent = Math.min(...parts.map(part => part.exponent));
+  const [chosen, first, last, stride] = parts.map(part => part.coefficient * 10n ** BigInt(part.exponent - exponent)) as [bigint, bigint, bigint, bigint];
+  const offset = chosen - first;
+  let index = offset / stride;
+  if ((offset % stride) * 2n >= stride) index++;
+  const maximum = (last - first) / stride;
+  if (index > maximum) index = maximum;
+  return Number(`${first + index * stride}e${exponent}`);
+}

package/vendor/ds/kits/base/src/core/steps.ts

@@ -0,0 +1,12 @@
+export type StepState = "complete" | "current" | "upcoming";
+
+export interface StepItem {
+  /** Stable step identity. */
+  id: string;
+  /** Visible step name. */
+  label: string;
+  /** Optional destination for a non-current step. */
+  href?: string;
+  /** Progress state, independent of appearance axes. */
+  state: StepState;
+}

package/vendor/ds/kits/base/src/core/table.ts

@@ -0,0 +1,21 @@
+export type TableCellValue = string | number | null | undefined;
+
+export interface TableColumn {
+  /** Stable key used to read this column from each row. */
+  key: string;
+  /** Visible column heading. */
+  header: string;
+}
+
+export type TableRow = Readonly<Record<string, TableCellValue>>;
+
+export interface TableCellContext {
+  /** Current canonical column. */
+  column: TableColumn;
+  /** Current caller-owned row. */
+  row: TableRow;
+  /** Cell value read from the column key. */
+  value: TableCellValue;
+  /** Zero-based position in the current rows. */
+  rowIndex: number;
+}

package/vendor/ds/kits/base/src/core/timeline.ts

@@ -0,0 +1,14 @@
+export interface TimelineItem {
+  /** Stable entry identity. */
+  id: string;
+  /** Visible entry heading. */
+  title: string;
+  /** Machine-readable date or time accepted by native `<time>`. */
+  datetime: string;
+  /** Caller-owned visible rendering of the date or time. */
+  time: string;
+  /** Supporting event detail. */
+  description?: string;
+  /** Optional destination for the entry heading. */
+  href?: string;
+}

package/vendor/ds/kits/base/src/core/toggle-group.ts

@@ -0,0 +1,41 @@
+import type { ToggleGroupOption } from "../toggle-group.variants";
+
+export interface ToggleGroupContract {
+  /** Visible group name, rendered as the native legend. */
+  legend: string;
+  /** Caller-owned choices; exactly one enabled option is pressed when available. */
+  options: readonly ToggleGroupOption[];
+  /** Selected option; an absent or unavailable value resolves to the first enabled option. */
+  value?: string;
+  /** Initial uncontrolled value, restored by native form reset. */
+  defaultValue?: string;
+  /** Optional native form name for the selected value. */
+  name?: string;
+  /** Disables the whole group, so no option can be chosen. */
+  disabled?: boolean;
+  /** Supporting text announced with every option. */
+  help?: string;
+  /** Current validation error, announced with every option. */
+  error?: string;
+  /** Extra classes merged onto the segmented row. */
+  listClass?: string;
+  /** Extra classes merged onto each option's ToggleButton. */
+  optionClass?: string;
+}
+
+export function toggleGroupValue(options: readonly ToggleGroupOption[], value?: string): string {
+  return options.find(option => !option.disabled && option.value === value)?.value ?? options.find(option => !option.disabled)?.value ?? "";
+}
+
+/** Roving selection skips disabled options, wraps, and respects inline direction. */
+export function toggleGroupTarget(options: readonly ToggleGroupOption[], current: number, key: string, rtl = false): number | undefined {
+  const enabled = options.map((option, index) => ({ option, index })).filter(({ option }) => !option.disabled);
+  const position = enabled.findIndex(({ index }) => index === current);
+  if (position < 0) return undefined;
+  let next: number | undefined;
+  if (key === "ArrowDown" || key === (rtl ? "ArrowLeft" : "ArrowRight")) next = (position + 1) % enabled.length;
+  if (key === "ArrowUp" || key === (rtl ? "ArrowRight" : "ArrowLeft")) next = (position - 1 + enabled.length) % enabled.length;
+  if (key === "Home") next = 0;
+  if (key === "End") next = enabled.length - 1;
+  return next === undefined ? undefined : enabled[next]!.index;
+}

package/vendor/ds/kits/base/src/countdown.behavior.ts

@@ -0,0 +1,26 @@
+/** Clamp caller-owned remaining time to whole, non-negative seconds. */
+export function normalizeRemaining(remaining: number): number {
+  if (!Number.isFinite(remaining)) return 0;
+  return Math.max(0, Math.floor(remaining));
+}
+
+/** A compact clock rendering that keeps hours when a duration crosses one hour. */
+export function formatDuration(remaining: number): string {
+  const seconds = normalizeRemaining(remaining);
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const rest = seconds % 60;
+  const pair = (value: number): string => String(value).padStart(2, "0");
+
+  return hours > 0 ? `${hours}:${pair(minutes)}:${pair(rest)}` : `${minutes}:${pair(rest)}`;
+}
+
+/** The same normalized duration in the machine-readable form native `<time>` expects. */
+export function durationAttribute(remaining: number): string {
+  const seconds = normalizeRemaining(remaining);
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const rest = seconds % 60;
+
+  return `PT${hours > 0 ? `${hours}H` : ""}${minutes > 0 ? `${minutes}M` : ""}${rest > 0 || seconds === 0 ? `${rest}S` : ""}`;
+}

package/vendor/ds/kits/base/src/countdown.variants.ts

@@ -0,0 +1,11 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const countdown = tv({
+  slots: {
+    root: "inline-flex items-baseline gap-[var(--reddb-spatial-gap-sm)] text-foreground",
+    label: "text-sm text-ink-muted",
+    value: "font-mono text-2xl font-medium tabular-nums",
+  },
+});
+
+export type CountdownVariants = VariantProps<typeof countdown>;

package/vendor/ds/kits/base/src/date-field.variants.ts

@@ -0,0 +1,24 @@
+// DateField's appearance seam composes the canonical Field and Input skins;
+// only the segmented calendar arrangement is new.
+
+import { tv, type VariantProps } from "tailwind-variants";
+import { typeRoleMerge } from "./type-roles";
+import { field } from "./field.variants";
+import { input } from "./input.variants";
+
+const segment = [
+  input(),
+  "w-[var(--reddb-spatial-control-height-md)] px-0 text-center tabular-nums",
+].join(" ");
+
+export const dateField = tv({
+  slots: {
+    root: field().root(),
+    segments: "flex items-center gap-[var(--reddb-spatial-gap-sm)]",
+    year: [segment, "w-[calc(var(--reddb-spatial-control-height-md)*1.5)]"].join(" "),
+    segment,
+    separator: "text-foreground",
+  },
+}, typeRoleMerge);
+
+export type DateFieldVariants = VariantProps<typeof dateField>;

package/vendor/ds/kits/base/src/date-picker.variants.ts

@@ -0,0 +1,16 @@
+// DatePicker composes DateField, Popover, and Calendar appearance. This seam
+// owns only their arrangement and removes the redundant nested Calendar frame.
+
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const datePicker = tv({
+  slots: {
+    root: "flex min-w-0 items-end gap-[var(--reddb-spatial-gap-sm)]",
+    field: "min-w-0 flex-1",
+    trigger: "shrink-0",
+    content: "w-fit max-w-none",
+    calendar: "border-0 p-0",
+  },
+});
+
+export type DatePickerVariants = VariantProps<typeof datePicker>;

package/vendor/ds/kits/base/src/date-range-field.variants.ts

@@ -0,0 +1,21 @@
+// DateRangeField composes Fieldset and DateField; this seam only owns the
+// relationship between the two fields and the group's supporting text.
+
+import { tv, type VariantProps } from "tailwind-variants";
+import { fieldset } from "./fieldset.variants";
+
+export const dateRangeField = tv({
+  slots: {
+    root: fieldset().root(),
+    // The pair answers to the width it is given, not the window (ADR 0021):
+    // side by side from the DS's `md` container step (28rem), stacked below.
+    // The size container is a wrapper of its own, so the native fieldset —
+    // the component's root — keeps its rendering and its intrinsic width.
+    frame: "@container/range-field min-w-0",
+    fields: "grid gap-[var(--reddb-spatial-layout-gap-sm)] @md/range-field:grid-cols-2",
+    help: fieldset().help(),
+    error: fieldset().error(),
+  },
+});
+
+export type DateRangeFieldVariants = VariantProps<typeof dateRangeField>;

package/vendor/ds/kits/base/src/date-range-picker.variants.ts

@@ -0,0 +1,15 @@
+// DateRangePicker composes DateRangeField, Popover, and RangeCalendar. This
+// seam owns only their arrangement and removes the redundant calendar frame.
+
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const dateRangePicker = tv({
+  slots: {
+    root: "flex min-w-0 items-end gap-[var(--reddb-spatial-gap-sm)]",
+    field: "min-w-0 flex-1",
+    trigger: "shrink-0",
+    calendar: "border-0 p-0",
+  },
+});
+
+export type DateRangePickerVariants = VariantProps<typeof dateRangePicker>;

package/vendor/ds/kits/base/src/deck.variants.ts

@@ -0,0 +1,10 @@
+// Deck: slides stacked in reading order (ADR 0027). The space between slides
+// is page layout, so it follows Density from the layout tier (ADR 0024); the
+// rhythm inside each slide is the SlideFrame's own.
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const deck = tv({
+  base: "flex w-full min-w-0 flex-col gap-[var(--reddb-spatial-layout-gap-lg)]",
+});
+
+export type DeckVariants = VariantProps<typeof deck>;

package/vendor/ds/kits/base/src/deprecation.ts

@@ -0,0 +1,24 @@
+// The DS deprecation window, as code (ADR 0026).
+//
+// A public rename keeps the old name as a working alias for exactly one CalVer
+// release, and that release's notes carry a **BREAKING:** line. While the
+// alias lives, using it warns once per session in a development build (the
+// consumer's bundler sets `import.meta.env.DEV`); production keeps the alias
+// silently. The next release removes the alias.
+
+const warned = new Set<string>();
+
+/**
+ * Warn, once per session and only in development, that `component` received a
+ * deprecated name. `used` is what the caller wrote (`intent="danger"`),
+ * `instead` the canonical spelling (`tone="danger"`).
+ */
+export function warnDeprecated(component: string, used: string, instead: string): void {
+  if (!(import.meta as ImportMeta & { readonly env?: { readonly DEV?: boolean } }).env?.DEV) return;
+  const key = `${component}\u0000${used}`;
+  if (warned.has(key)) return;
+  warned.add(key);
+  console.warn(
+    `[reddb ${component}] ${used} is deprecated and is removed in the next release. Use ${instead}.`,
+  );
+}

package/vendor/ds/kits/base/src/description-list.appearance.ts

@@ -0,0 +1,32 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+const GAP = {
+  sm: "gap-[var(--reddb-spatial-gap-sm)]",
+  md: "gap-[var(--reddb-spatial-gap-md)]",
+  lg: "gap-[var(--reddb-spatial-gap-lg)]",
+} as const;
+
+// Container-first (ADR 0021): the list is a named size container, and each
+// item sets its term beside its detail from the DS's `md` container step
+// (28rem) — so a list in a narrow pane stacks even on a wide window.
+export const descriptionList = tv({
+  slots: {
+    root: "@container/description-list grid",
+    item: "grid @md/description-list:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]",
+    term: "font-medium text-foreground",
+    detail: "m-0 text-ink-muted",
+  },
+  variants: {
+    gap: {
+      sm: { root: GAP.sm, item: GAP.sm },
+      md: { root: GAP.md, item: GAP.md },
+      lg: { root: GAP.lg, item: GAP.lg },
+    },
+  },
+  defaultVariants: { gap: "md" },
+});
+
+export type DescriptionListVariants = VariantProps<typeof descriptionList>;
+export type DescriptionListGap = NonNullable<DescriptionListVariants["gap"]>;
+export const DESCRIPTION_LIST_GAPS = Object.keys(GAP) as readonly DescriptionListGap[];
+

package/vendor/ds/kits/base/src/description-list.variants.ts

@@ -0,0 +1,6 @@
+import type { Snippet } from "svelte";
+import type { DescriptionListEntry } from "./core/description-list";
+export * from "./description-list.appearance";
+
+export type DescriptionListContent = string | Snippet;
+export interface DescriptionListItem extends DescriptionListEntry<DescriptionListContent> {}

package/vendor/ds/kits/base/src/dialog.variants.ts

@@ -0,0 +1,30 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+/** Token-only modal surface appearance; behavior remains in Dialog.svelte. */
+export const dialog = tv({
+  base: [
+    "m-auto w-full rounded-lg border border-elevation-overlay-border bg-elevation-overlay-surface text-foreground shadow-elevation-overlay",
+    "p-[var(--reddb-spatial-inset-lg)]",
+    "focus:outline-hidden",
+    "backdrop:bg-scrim/60",
+    "motion-safe:transition-opacity motion-reduce:transition-none",
+  ].join(" "),
+  variants: {
+    size: {
+      sm: "max-w-sm",
+      md: "max-w-lg",
+      lg: "max-w-2xl",
+      xl: "max-w-[var(--reddb-container-wide)]",
+    },
+  },
+  defaultVariants: { size: "md" },
+});
+
+/** The standard close control, pinned to the surface's top trailing corner. */
+export const dialogClose = tv({
+  base: "absolute top-[var(--reddb-spatial-inset-sm)] right-[var(--reddb-spatial-inset-sm)]",
+});
+
+export type DialogVariants = VariantProps<typeof dialog>;
+export type DialogSize = NonNullable<DialogVariants["size"]>;
+export const DIALOG_SIZES = ["sm", "md", "lg", "xl"] as const satisfies readonly DialogSize[];

package/vendor/ds/kits/base/src/disclosure.variants.ts

@@ -0,0 +1,14 @@
+// Disclosure's token-only appearance seam; Collapsible owns expanded state.
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const disclosure = tv({
+  slots: {
+    root: "min-w-0 rounded-md border border-muted",
+    // `group` is what the indicator's expanded-state rotation reads.
+    trigger: "group w-full justify-between",
+    indicator: "ml-auto text-ink-muted transition-transform group-aria-expanded:rotate-180 motion-reduce:transition-none",
+    content: "border-t border-muted p-[var(--reddb-spatial-inset-md)] text-foreground",
+  },
+});
+
+export type DisclosureVariants = VariantProps<typeof disclosure>;

package/vendor/ds/kits/base/src/divider.variants.ts

@@ -0,0 +1,17 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const DIVIDER_ORIENTATIONS = ["horizontal", "vertical"] as const;
+export type DividerOrientation = (typeof DIVIDER_ORIENTATIONS)[number];
+
+export const divider = tv({
+  base: "shrink-0 bg-muted",
+  variants: {
+    orientation: {
+      horizontal: "my-[var(--reddb-spatial-gap-sm)] h-px w-full",
+      vertical: "mx-[var(--reddb-spatial-gap-sm)] h-full w-px self-stretch",
+    },
+  },
+  defaultVariants: { orientation: "horizontal" },
+});
+
+export type DividerVariants = VariantProps<typeof divider>;

package/vendor/ds/kits/base/src/drawer.variants.ts

@@ -0,0 +1,48 @@
+import { tv, type VariantProps } from "tailwind-variants";
+import { dialog } from "./dialog.variants";
+
+export const DRAWER_SIDES = ["top", "right", "bottom", "left"] as const;
+export type DrawerSide = (typeof DRAWER_SIDES)[number];
+
+// A modal <dialog> arrives from the user agent with `inset: 0` on every edge,
+// so pinning one edge is not enough: the sized panel is over-constrained and
+// keeps its top and inline-start edges, opening a `right` Drawer on the left
+// and a `bottom` one at the top. Each side pins its own edge and releases the
+// opposite one, which also holds the panel in place while it leaves the top
+// layer. Closed, and in its first frame, the panel sits just past that edge,
+// so it enters from it and leaves toward it; under reduced motion it never moves.
+const SIDE: Record<DrawerSide, string> = {
+  top: [
+    "inset-x-0 top-0 bottom-auto w-full max-w-none",
+    "motion-safe:not-open:-translate-y-full motion-safe:starting:open:-translate-y-full",
+  ].join(" "),
+  right: [
+    "inset-y-0 right-0 left-auto h-full w-full max-w-md",
+    "motion-safe:not-open:translate-x-full motion-safe:starting:open:translate-x-full",
+  ].join(" "),
+  bottom: [
+    "inset-x-0 top-auto bottom-0 w-full max-w-none",
+    "motion-safe:not-open:translate-y-full motion-safe:starting:open:translate-y-full",
+  ].join(" "),
+  left: [
+    "inset-y-0 left-0 right-auto h-full w-full max-w-md",
+    "motion-safe:not-open:-translate-x-full motion-safe:starting:open:-translate-x-full",
+  ].join(" "),
+};
+
+/** Dialog appearance specialized into an edge-anchored surface. */
+export const drawer = tv({
+  base: [
+    dialog(),
+    // An over-tall sheet scrolls inside the viewport instead of running past it.
+    "fixed m-0 max-h-full overflow-y-auto rounded-none",
+    // `display` and `overlay` change discretely, so the panel stays painted in
+    // the top layer until its slide out has finished.
+    "motion-safe:transition-[translate,display,overlay] motion-safe:transition-discrete",
+    "motion-safe:duration-[var(--reddb-duration-normal)] motion-safe:ease-exit motion-safe:open:ease-entrance",
+  ].join(" "),
+  variants: { side: SIDE },
+  defaultVariants: { side: "right" },
+});
+
+export type DrawerVariants = VariantProps<typeof drawer>;

package/vendor/ds/kits/base/src/dropdown-menu.behavior.ts

@@ -0,0 +1,6 @@
+import type { IconGlyph } from "./Icon.svelte";
+import type * as Portable from "./core/dropdown-menu";
+export { dropdownMenuGroups, dropdownMenuItems, isDropdownMenuGroup } from "./core/dropdown-menu";
+export type DropdownMenuItem = Portable.DropdownMenuItem<IconGlyph>;
+export type DropdownMenuGroup = Portable.DropdownMenuGroup<IconGlyph>;
+export type DropdownMenuEntry = Portable.DropdownMenuEntry<IconGlyph>;

package/vendor/ds/kits/base/src/dropdown-menu.variants.ts

@@ -0,0 +1,38 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const dropdownMenu = tv({
+  slots: {
+    content: "min-w-48 overflow-hidden p-[var(--reddb-spatial-inset-sm)]",
+    group: "flex flex-col",
+    heading: "px-[var(--reddb-spatial-inset-sm)] py-1 text-xs font-medium text-ink-muted",
+    separator: "my-1 h-px bg-muted",
+    item: [
+      "flex w-full select-none items-center rounded-md text-start text-foreground outline-hidden",
+      "data-[highlighted]:bg-foreground/10 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    ].join(" "),
+    icon: "me-[var(--reddb-spatial-gap-sm)] inline-flex shrink-0",
+    label: "min-w-0 truncate",
+    shortcut: "ms-auto shrink-0 ps-[var(--reddb-spatial-inset-md)]",
+  },
+  variants: {
+    size: {
+      sm: {
+        item: "h-[var(--reddb-spatial-control-height-sm)] px-[var(--reddb-spatial-inset-sm)] text-sm",
+        icon: "size-[var(--reddb-spatial-icon-size-sm)]",
+      },
+      md: {
+        item: "h-[var(--reddb-spatial-control-height-md)] px-[var(--reddb-spatial-inset-md)] text-sm",
+        icon: "size-[var(--reddb-spatial-icon-size-md)]",
+      },
+      lg: {
+        item: "h-[var(--reddb-spatial-control-height-lg)] px-[var(--reddb-spatial-inset-lg)] text-base",
+        icon: "size-[var(--reddb-spatial-icon-size-lg)]",
+      },
+    },
+  },
+  defaultVariants: { size: "md" },
+});
+
+export type DropdownMenuVariants = VariantProps<typeof dropdownMenu>;
+export type DropdownMenuSize = NonNullable<DropdownMenuVariants["size"]>;
+export const DROPDOWN_MENU_SIZES = ["sm", "md", "lg"] as const satisfies readonly DropdownMenuSize[];

package/vendor/ds/kits/base/src/empty-state.variants.ts

@@ -0,0 +1,41 @@
+// EmptyState's appearance is one coordinated slot contract. The size axis
+// changes typography and Density-owned space together; bordered only decides
+// whether the otherwise empty region needs to draw its own boundary.
+import { tv, type VariantProps } from "tailwind-variants";
+
+const SIZE = {
+  sm: {
+    root: "gap-[var(--reddb-spatial-gap-md)] px-[var(--reddb-spatial-inset-md)] py-[var(--reddb-spatial-inset-lg)]",
+    title: "text-sm",
+    description: "text-xs",
+    hint: "text-xs",
+  },
+  md: {
+    root: "gap-[var(--reddb-spatial-gap-lg)] px-[var(--reddb-spatial-inset-lg)] py-10",
+    title: "text-base",
+    description: "text-sm",
+    hint: "text-xs",
+  },
+} as const;
+
+const BORDERED = {
+  true: { root: "border-dashed border-muted" },
+  false: { root: "border-transparent" },
+} as const;
+
+export const emptyState = tv({
+  slots: {
+    root: "flex flex-col items-center justify-center rounded-lg border text-center",
+    media: "text-ink-muted",
+    title: "font-medium leading-tight text-foreground",
+    description: "max-w-prose text-ink-muted",
+    hint: "max-w-full rounded-md border border-muted px-2 py-1 font-mono text-ink-muted",
+    actions: "flex flex-wrap items-center justify-center gap-[var(--reddb-spatial-gap-md)] pt-1",
+  },
+  variants: { size: SIZE, bordered: BORDERED },
+  defaultVariants: { size: "md", bordered: true },
+});
+
+export type EmptyStateVariants = VariantProps<typeof emptyState>;
+export type EmptyStateSize = NonNullable<EmptyStateVariants["size"]>;
+export const EMPTY_STATE_SIZES = Object.keys(SIZE) as readonly EmptyStateSize[];

package/vendor/ds/kits/base/src/eyebrow.variants.ts

@@ -0,0 +1,14 @@
+// Eyebrow: the uppercase micro-label above a heading (ADR 0025, DESIGN.md).
+//
+// Size, tracking and weight are the Theme's eyebrow role — one tracking, the
+// Brand's `wide`, instead of the three the Kits used to spell by hand — and
+// the colour is the secondary reading role, `ink-muted`.
+import { tv, type VariantProps } from "tailwind-variants";
+import { typeRoleMerge } from "./type-roles";
+
+export const eyebrow = tv({ base: "text-eyebrow uppercase text-ink-muted" }, typeRoleMerge);
+
+export type EyebrowVariants = VariantProps<typeof eyebrow>;
+/** The elements an Eyebrow may render: it labels a heading, it is never one. */
+export const EYEBROW_ELEMENTS = ["p", "span", "div"] as const;
+export type EyebrowElement = (typeof EYEBROW_ELEMENTS)[number];