@vaam-apps/ui 0.1.0 → 0.1.1

package/src/components/primitives/switch.tsx

@@ -1,74 +0,0 @@
-"use client";
-
-import { Field, Label as HeadlessLabel, Switch as HeadlessSwitch } from "@headlessui/react";
-import type { ReactNode } from "react";
-import { cn } from "../../lib/cn";
-
-export interface SwitchProps {
-  checked: boolean;
-  onCheckedChange: (checked: boolean) => void;
-  disabled?: boolean | undefined;
-  "aria-label"?: string | undefined;
-  "aria-labelledby"?: string | undefined;
-  className?: string | undefined;
-}
-
-/**
- * An on/off toggle that takes effect immediately.
- *
- * **Use a `Checkbox`, not this, inside a form with a Save button.** The
- * distinction is not cosmetic: a switch promises the change has already
- * happened, so pairing one with a Save button tells the operator two
- * contradictory things and leaves them unsure whether the toggle landed.
- * A switch belongs where the write fires on change and the UI can report
- * the result.
- */
-export function Switch({ checked, onCheckedChange, disabled, className, ...aria }: SwitchProps) {
-  return (
-    <HeadlessSwitch
-      checked={checked}
-      onChange={onCheckedChange}
-      disabled={disabled ?? false}
-      className={cn(
-        "group relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-edge-strong bg-surface-3 transition-colors",
-        "data-checked:border-primary data-checked:bg-primary",
-        "data-focus:outline-none data-focus:ring-1 data-focus:ring-ring",
-        "data-disabled:cursor-not-allowed data-disabled:opacity-50",
-        className,
-      )}
-      {...aria}
-    >
-      <span
-        aria-hidden="true"
-        className={cn(
-          "pointer-events-none ml-0.5 inline-block size-3.5 rounded-full bg-foreground transition-transform",
-          "group-data-checked:translate-x-4 group-data-checked:bg-primary-content",
-        )}
-      />
-    </HeadlessSwitch>
-  );
-}
-
-export interface SwitchFieldProps extends Omit<SwitchProps, "aria-label" | "aria-labelledby"> {
-  label: ReactNode;
-  description?: ReactNode;
-}
-
-/** A switch with its label to the left, filling the available width — the
- * settings-row layout, where the labels form a readable column and the
- * controls line up on the right. */
-export function SwitchField({ label, description, className, ...props }: SwitchFieldProps) {
-  return (
-    <Field className={cn("flex items-center justify-between gap-4", className)}>
-      <span className="flex flex-col gap-0.5">
-        <HeadlessLabel className="cursor-pointer text-body text-foreground data-disabled:cursor-not-allowed data-disabled:opacity-50">
-          {label}
-        </HeadlessLabel>
-        {description !== undefined && (
-          <span className="text-caption text-muted-foreground">{description}</span>
-        )}
-      </span>
-      <Switch {...props} />
-    </Field>
-  );
-}

package/src/components/primitives/table.tsx

@@ -1,157 +0,0 @@
-import type { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from "react";
-import { cn } from "../../lib/cn";
-
-// Table conventions per design doc §6.4: sticky header on surface-1, 1px
-// `border-edge-subtle` row dividers, no zebra striping (the status tints
-// are the signal — zebra plus tints is noise), hover on surface-3.
-//
-// D16: daisyUI's real `table`/`table-pin-rows` classes sit underneath this
-// file's own bespoke row/cell behaviour (constraint 7 — "DaisyUI does the
-// work") rather than replacing it. Every own-authored utility class below
-// is unchanged from before this PR; `table`/`table-pin-rows` are added on
-// top and reconciled against three things confirmed by reading
-// `daisyui/components/table.css` directly, not assumed:
-//
-// 1. `table-pin-rows` alone does nothing — every one of its selectors is
-//    `.table :where(.table-pin-rows thead)`, i.e. it only matches when
-//    `table-pin-rows` sits on the same element as `table`. Both classes go
-//    on `<table>` together, never one without the other.
-// 2. `.table` switches `border-collapse` to `separate`. Under the separate
-//    border model a border set on `<tr>` — this file's whole row-divider
-//    mechanism, `TableRow`'s `border-edge-subtle border-b` — does not
-//    render at all; the CSS spec confines borders in that model to cells,
-//    never rows or sections. `border-collapse!` (Tailwind v4's trailing-`!`
-//    important syntax) stays on `<table>` specifically so adding
-//    `.table` doesn't silently delete every row divider in this app —
-//    verified live against a real render (`just demo`, `/messages`) with
-//    and without the override before trusting it.
-// 3. `.table` also applies its own `padding-block`/`padding-inline` to
-//    every `th`/`td` via a zero-specificity-inside `:where()` selector,
-//    and its own `font-size`. `TableHead`/`TableCell` keep their existing
-//    `px-3`/`py-2`/`h-8` utilities unchanged, at equal selector
-//    specificity to daisyUI's rule — confirmed live that the existing
-//    cell padding and type scale still win, not daisyUI's defaults.
-export function Table({ className, ...props }: HTMLAttributes<HTMLTableElement>) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <table
-        className={cn("table table-pin-rows w-full border-collapse! text-body", className)}
-        {...props}
-      />
-    </div>
-  );
-}
-
-export function TableHeader({ className, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
-  return (
-    <thead
-      className={cn(
-        "sticky top-0 z-10 bg-surface-1 [&_tr]:border-b [&_tr]:border-edge [&_tr]:bg-surface-1",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export function TableBody({ className, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
-  return <tbody className={cn("[&_tr:last-child]:border-b-0", className)} {...props} />;
-}
-
-export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
-  selected?: boolean;
-}
-
-export function TableRow({ className, selected = false, ...props }: TableRowProps) {
-  return (
-    <tr
-      className={cn(
-        "border-edge-subtle border-b transition-colors duration-[var(--dur-instant)] hover:bg-surface-3",
-        selected && "bg-surface-3 shadow-[inset_2px_0_0_var(--color-ring)]",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/**
- * Responsive column visibility. `hideBelow="md"` hides the cell on
- * viewports narrower than `md` and shows it from `md` up.
- *
- * This exists because the class it replaces was the single
- * most-duplicated string in the console: `"hidden sm:table-cell"`,
- * `"hidden md:table-cell"` and `"hidden lg:table-cell"` appeared **90
- * times** as inline literals across the route-local table components.
- *
- * Worth recording how they got there, because it is a lesson about the
- * rule and not just about tables. R6's own text names
- * `const COL_ID = "hidden lg:table-cell"` in `jobs-screen.tsx` — four
- * hoisted consts — as the motivating example of a class const that must
- * not live in a view. The R6 sweep removed those four consts and, in
- * moving the markup into dumb components, re-expressed the same decision
- * as 90 inline literals. The letter of the rule was satisfied (no classes
- * in a *view* file); the thing the rule exists to prevent — one decision
- * written in many places — got 22× worse.
- *
- * A mapping table rather than an interpolated `` `hidden ${bp}:table-cell` ``
- * because Tailwind scans source text statically: a template literal
- * produces no class at all in the built CSS. The full strings must appear
- * verbatim somewhere Tailwind can see them, and this is that place.
- */
-const HIDE_BELOW: Record<Breakpoint, string> = {
-  sm: "hidden sm:table-cell",
-  md: "hidden md:table-cell",
-  lg: "hidden lg:table-cell",
-  xl: "hidden xl:table-cell",
-};
-
-export type Breakpoint = "sm" | "md" | "lg" | "xl";
-
-export interface TableHeadProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, "align"> {
-  align?: "start" | "end";
-  /** Hide this column below the given breakpoint. See `HIDE_BELOW`. */
-  hideBelow?: Breakpoint | undefined;
-}
-
-export function TableHead({ className, align = "start", hideBelow, ...props }: TableHeadProps) {
-  return (
-    <th
-      className={cn(
-        "h-8 whitespace-nowrap px-3 font-medium text-micro text-muted-foreground tracking-[0.03em]",
-        align === "end" ? "text-right" : "text-left",
-        hideBelow && HIDE_BELOW[hideBelow],
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, "align"> {
-  align?: "start" | "end";
-  mono?: boolean;
-  /** Hide this column below the given breakpoint. See `HIDE_BELOW`. */
-  hideBelow?: Breakpoint | undefined;
-}
-
-export function TableCell({
-  className,
-  align = "start",
-  mono = false,
-  hideBelow,
-  ...props
-}: TableCellProps) {
-  return (
-    <td
-      className={cn(
-        "px-3 py-2 text-body",
-        align === "end" ? "text-right" : "text-left",
-        mono && "font-mono tabular-nums",
-        hideBelow && HIDE_BELOW[hideBelow],
-        className,
-      )}
-      {...props}
-    />
-  );
-}

package/src/components/primitives/tabs.tsx

@@ -1,163 +0,0 @@
-"use client";
-
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
-import {
-  Children,
-  Fragment,
-  isValidElement,
-  type ReactElement,
-  type ReactNode,
-  useMemo,
-  useState,
-} from "react";
-import { cn } from "../../lib/cn";
-
-/**
- * D18/D3: Radix `Tabs` → Headless UI `TabGroup`, behind a value-based
- * `ValueTabs` adapter. Radix's `Tabs` was value-based and controlled
- * (`value`/`onValueChange`/`defaultValue`); Headless UI's own `TabGroup` is
- * index-based (`selectedIndex`/`onChange(index)`). Four call sites
- * (`payload-inspector.tsx`, `users-screen.tsx`, and the gallery) already
- * depend on the value-based shape, and a value-based API is more resistant
- * to bugs when tab order changes — so this adapter translates once, here,
- * rather than rewriting every call site to track an index.
- *
- * Every consumer's own JSX is untouched: only the import line changes, via
- * aliasing (`import { ValueTabs as Tabs, ... } from "@vaam-apps/ui"`) — the one
- * genuinely necessary API break this bucket owns (see each updated file's
- * own import for the one-line diff).
- */
-
-function collectTriggerValues(node: ReactNode, out: string[] = []): string[] {
-  Children.forEach(node, (child) => {
-    if (!isValidElement(child)) return;
-    const el = child as ReactElement<{ value?: string; children?: ReactNode }>;
-    if (el.type === ValueTabsTrigger) {
-      if (typeof el.props.value === "string") out.push(el.props.value);
-      return;
-    }
-    if (el.props?.children != null) collectTriggerValues(el.props.children, out);
-  });
-  return out;
-}
-
-/** Separates the one `ValueTabsList` child from everything else, so
- * `ValueTabs` can group "everything else" (the `ValueTabsContent` panels,
- * declared as direct siblings of `ValueTabsList` — the exact Radix `Tabs`
- * shape) under one implicit `TabPanels`, which Headless UI's `TabGroup`
- * requires but the old Radix-shaped call sites never had to write. */
-function splitOutList(children: ReactNode): { list: ReactNode; rest: ReactNode[] } {
-  let list: ReactNode = null;
-  const rest: ReactNode[] = [];
-  Children.forEach(children, (child) => {
-    if (isValidElement(child) && child.type === ValueTabsList) {
-      list = child;
-    } else {
-      rest.push(child);
-    }
-  });
-  return { list, rest };
-}
-
-/**
- * Note the `| undefined` on the optional props below. This package
- * compiles under `exactOptionalPropertyTypes`, where a bare `value?:
- * string` means "you may omit this key" and NOT "you may pass
- * `undefined`" — so the ordinary controlled pattern,
- * `const [v, setV] = useState<string>()` followed by `value={v}`, is a
- * type error. Found writing this component's own story, which is the
- * first code outside the original application to use it.
- */
-export interface ValueTabsProps {
-  value?: string | undefined;
-  defaultValue?: string | undefined;
-  onValueChange?: ((value: string) => void) | undefined;
-  className?: string | undefined;
-  children: ReactNode;
-}
-
-export function ValueTabs({
-  value,
-  defaultValue,
-  onValueChange,
-  className,
-  children,
-}: ValueTabsProps) {
-  const values = useMemo(() => collectTriggerValues(children), [children]);
-  const { list, rest } = useMemo(() => splitOutList(children), [children]);
-  const [internalValue, setInternalValue] = useState(defaultValue ?? values[0]);
-  const isControlled = value !== undefined;
-  const currentValue = isControlled ? value : internalValue;
-  const selectedIndex = Math.max(0, values.indexOf(currentValue ?? values[0] ?? ""));
-
-  function handleChange(index: number) {
-    const next = values[index];
-    if (next === undefined) return;
-    if (!isControlled) setInternalValue(next);
-    onValueChange?.(next);
-  }
-
-  return (
-    <TabGroup className={className} selectedIndex={selectedIndex} onChange={handleChange}>
-      {list}
-      <TabPanels as={Fragment}>{rest}</TabPanels>
-    </TabGroup>
-  );
-}
-
-export function ValueTabsList({
-  className,
-  children,
-}: {
-  className?: string;
-  children: ReactNode;
-}) {
-  return (
-    <TabList className={cn("flex items-center gap-4 border-edge border-b", className)}>
-      {children}
-    </TabList>
-  );
-}
-
-// Underline variant only (design doc §5.2: "no pill/segmented variant — pill
-// tabs are consumer furniture"). 2px bottom rule in --foreground on the
-// active tab.
-export function ValueTabsTrigger({
-  value,
-  className,
-  children,
-}: {
-  /** Consumed by `collectTriggerValues` above via prop introspection on the
-   * element tree, not read inside this component itself. */
-  value: string;
-  className?: string;
-  children: ReactNode;
-}) {
-  void value;
-  return (
-    <Tab
-      type="button"
-      className={cn(
-        "-mb-px border-b-2 border-transparent px-1 py-2 font-medium text-body text-muted-foreground outline-none",
-        "data-selected:border-foreground data-selected:text-foreground",
-        className,
-      )}
-    >
-      {children}
-    </Tab>
-  );
-}
-
-export function ValueTabsContent({
-  className,
-  children,
-}: {
-  /** Kept for API parity with the old value-based `TabsContent` — the real
-   * Tab↔Panel association is positional (Headless UI's own `TabGroup`
-   * matches `Tab`/`TabPanel` by declaration order), not looked up by value. */
-  value: string;
-  className?: string;
-  children: ReactNode;
-}) {
-  return <TabPanel className={cn("pt-4", className)}>{children}</TabPanel>;
-}

package/src/components/primitives/textarea.tsx

@@ -1,21 +0,0 @@
-import type { TextareaHTMLAttributes } from "react";
-import { forwardRef } from "react";
-import { cn } from "../../lib/cn";
-
-export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
-
-// D8: same reasoning as `input.tsx` — daisyUI's own `.textarea` rule sets
-// `border-radius: var(--radius-field)` directly (confirmed by reading
-// `daisyui/components/textarea.css`), so no `rounded-*` class is added
-// here. The class string is unchanged; the token rewrite in Phase 0 is
-// what moved the rendered radius.
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => (
-    <textarea
-      ref={ref}
-      className={cn("textarea textarea-bordered w-full font-sans text-prose", className)}
-      {...props}
-    />
-  ),
-);
-Textarea.displayName = "Textarea";

package/src/components/primitives/toast.tsx

@@ -1,117 +0,0 @@
-"use client";
-
-import { cva } from "class-variance-authority";
-import { useSyncExternalStore } from "react";
-import { cn } from "../../lib/cn";
-
-/**
- * Toasts, no Radix — `dialog`/`dropdown-menu`/`select`/`tooltip`/`popover`
- * are the five primitives that need Radix's behaviour (design doc T6
- * brief); a toast is a transient, non-modal, non-focus-trapping
- * notification, so a small hand-rolled store is enough.
- *
- * For transient confirmations only ("copied", "saved", "replay queued") —
- * design doc §5.1: anything an operator must act on is inline, never a
- * toast, because a toast that expires while they're reading a payload is a
- * lost message.
- */
-
-export type ToastVariant = "default" | "success" | "danger";
-
-export interface ToastItem {
-  id: string;
-  title: string;
-  description?: string;
-  variant?: ToastVariant;
-  durationMs?: number;
-}
-
-type Listener = () => void;
-
-let toasts: ToastItem[] = [];
-const listeners = new Set<Listener>();
-
-function emit() {
-  for (const listener of listeners) listener();
-}
-
-function subscribe(listener: Listener): () => void {
-  listeners.add(listener);
-  return () => listeners.delete(listener);
-}
-
-function getSnapshot(): ToastItem[] {
-  return toasts;
-}
-
-export function dismissToast(id: string) {
-  toasts = toasts.filter((t) => t.id !== id);
-  emit();
-}
-
-export function toast(item: Omit<ToastItem, "id">): string {
-  const id = crypto.randomUUID();
-  const durationMs = item.durationMs ?? 4000;
-  toasts = [...toasts, { ...item, id }];
-  emit();
-  if (durationMs > 0) {
-    setTimeout(() => dismissToast(id), durationMs);
-  }
-  return id;
-}
-
-// D11: `cva()` replaces the previous `Record<ToastVariant, string>` lookup,
-// same three class strings per variant, keyed identically. One deliberate
-// D8 diff lives in the base string below, not here: the shared "toast card"
-// classes move off `rounded-sm` (`--radius-field`, 12px) onto `rounded-box`
-// (`--radius-box`, 20px) — a toast shares `--shadow-popover` with
-// dialog/popover/dropdown/drawer (see `theme.css`'s own "only floating
-// layers... get one [shadow]" comment), i.e. it's the same family of
-// floating panel those get, not a field-scale control, and D14's own
-// drawer sketch (§6.4) already uses `rounded-t-box` for exactly that
-// family. `variant` classes themselves are untouched.
-const toastVariants = cva(
-  "pointer-events-auto rounded-box border p-3 text-body shadow-[var(--shadow-popover)]",
-  {
-    variants: {
-      variant: {
-        default: "border-edge bg-surface-2 text-foreground",
-        success: "border-state-success-fg/30 bg-surface-2 text-foreground",
-        danger: "border-state-danger-border bg-state-danger-bg text-state-danger-fg",
-      },
-    },
-    defaultVariants: { variant: "default" },
-  },
-);
-
-/** Mount once, near the app root. Renders the live toast stack. */
-export function Toaster() {
-  const items = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-
-  return (
-    <div
-      role="status"
-      aria-live="polite"
-      className="pointer-events-none fixed right-4 bottom-4 z-50 flex w-80 flex-col gap-2"
-    >
-      {items.map((item) => (
-        <div key={item.id} className={cn(toastVariants({ variant: item.variant ?? "default" }))}>
-          <div className="flex items-start justify-between gap-2">
-            <p className="font-medium">{item.title}</p>
-            <button
-              type="button"
-              onClick={() => dismissToast(item.id)}
-              aria-label="Dismiss"
-              className="text-subtle-foreground hover:text-foreground"
-            >
-              ×
-            </button>
-          </div>
-          {item.description != null && (
-            <p className="mt-1 text-caption text-muted-foreground">{item.description}</p>
-          )}
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/components/primitives/tooltip.tsx

@@ -1,38 +0,0 @@
-import type { ReactNode } from "react";
-import { cn } from "../../lib/cn";
-
-/**
- * D5: `@radix-ui/react-tooltip` is deleted outright, replaced by DaisyUI's
- * native `.tooltip`/`data-tip` CSS component — no JS, no portal, hover/focus
- * driven by `:hover`/`:focus` in CSS alone. Headless UI ships no Tooltip
- * equivalent, and introducing a second behaviour library (e.g.
- * `@floating-ui/react`) just to replace one Radix package with another
- * contradicts constraints 6–7.
- *
- * **Accepted limitation (named explicitly in the design doc, D5):** `data-tip`
- * is a plain HTML attribute rendered via CSS `content: attr(data-tip)`, so
- * the label must be a string — no rich/interactive tooltip content anywhere
- * in this console. Nothing today needs one (`side-nav.tsx`'s own icon-rail
- * tooltips already use the identical `tooltip`/`data-tip` convention
- * directly, predating this file).
- *
- * The API collapses Radix's four-part compound
- * (`TooltipProvider`/`Tooltip`/`TooltipTrigger`/`TooltipContent`) into one
- * wrapper, since DaisyUI's mechanism needs no provider and no separate
- * trigger/content split — the trigger is just `children`.
- */
-export interface TooltipProps {
-  /** Plain text only — see the module doc above. */
-  label: string;
-  position?: "top" | "bottom" | "left" | "right";
-  className?: string;
-  children: ReactNode;
-}
-
-export function Tooltip({ label, position = "top", className, children }: TooltipProps) {
-  return (
-    <div className={cn("tooltip", `tooltip-${position}`, className)} data-tip={label}>
-      {children}
-    </div>
-  );
-}

package/src/components/status/state-chip.tsx

@@ -1,70 +0,0 @@
-import type { HTMLAttributes } from "react";
-import { cn } from "../../lib/cn";
-import { HUE_CLASSES, type StatusHue } from "./status-tokens";
-
-/**
- * A compact, state-toned chip for a single word or short phrase rendered
- * *inline* — beside a table cell's value, after a label, inside a card.
- *
- * # Not `InlineBanner`, and not `Badge`
- *
- * `InlineBanner` is the full-width `px-3 py-2` notice that owns its own
- * line. Four route groups correctly refused to route these through it
- * during the R6 factorization: forcing a chip into a banner would mean
- * overriding padding and swapping `<span>` for `<div>`, which is fighting
- * the primitive rather than using it. That refusal was right, and this is
- * the component they were missing.
- *
- * `Badge` is the other near-miss: it exists, but it is built on daisyUI's
- * `badge-neutral`/`badge-outline` classes, a different visual system from
- * the `state-*` token family every status surface in this console uses.
- * A chip that must read as *success* or *danger* cannot express that
- * through `Badge` without bypassing its variants entirely.
- *
- * # Why it is shared
- *
- * Five sites across three route groups (`workers`, `routes`, `simulator`)
- * had byte-identical `rounded-sm border border-state-<tone>-border
- * bg-state-<tone>-bg px-1.5 py-0.5 text-caption text-state-<tone>-fg`
- * strings, differing only in tone. A sixth (`dashboard`) used the same
- * shape at `px-2`. They are unified here at `px-1.5`, the majority
- * spelling — a one-step spacing change on that single site, and the same
- * normalisation `DetailRow` made for the same reason: the console should
- * not render one concept two ways because two people typed a different
- * padding.
- *
- * `StatusPill` is **not** replaced by this. It maps a whole state
- * machine's variants onto a fixed vocabulary and carries a glyph; this is
- * the generic chip for everything that is state-toned but is not a state
- * machine — a capability flag, a derived verdict, a one-word qualifier.
- *
- * # Tone
- *
- * Tone comes from the shared [`StatusHue`] vocabulary rather than a second
- * private list. Before this, `StateChip` carried its own four-tone table
- * whose class strings were transcribed by hand from the same tokens
- * `HUE_CLASSES` already held — two copies of one mapping, and the chip's
- * copy was missing three of the hues, so a caller wanting `expired` or
- * `parked` had no way to ask for it and reached for `className` instead.
- */
-export type StateChipTone = StatusHue;
-
-export interface StateChipProps extends HTMLAttributes<HTMLSpanElement> {
-  tone?: StateChipTone | undefined;
-}
-
-export function StateChip({ className, tone = "uncertain", ...props }: StateChipProps) {
-  const hue = HUE_CLASSES[tone];
-  return (
-    <span
-      className={cn(
-        "rounded-sm border px-1.5 py-0.5 text-caption",
-        hue.border,
-        hue.bg,
-        hue.fg,
-        className,
-      )}
-      {...props}
-    />
-  );
-}