@vaam-apps/ui 0.1.0 → 0.1.1

package/src/components/primitives/inline-confirm.tsx

@@ -1,118 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-import { cn } from "../../lib/cn";
-import { InlineBanner } from "../patterns/inline-banner";
-import { Button } from "./button";
-
-/**
- * A confirmation rendered **inline**, inside the caller's own DOM subtree —
- * never a portal, never a second `Dialog`/`FocusScope`. Exists specifically
- * to replace a centered `Dialog` nested inside an open `QuickDetailDrawer` /
- * `MoreDetailDrawer` (`vaul`), which is permanently broken: see
- * `frontends/apps/admin/app/gallery/page.tsx`'s own
- * `NestedDialogInDrawerRegression` writeup for the full root-cause
- * investigation (`vaul`'s `Content` mounts a trapped, document-level
- * `@radix-ui/react-focus-scope` `FocusScope` regardless of `dimmed`/`modal`,
- * and Headless UI's `Dialog` always portals to its own sibling
- * `#headlessui-portal-root` — so the trap yanks focus straight back out of
- * the portal the instant it tries to move in, and the confirmation never
- * becomes visible).
- *
- * Covers both destructive yes/no confirmations (`title`/`description`, no
- * `children`) and a short form embedded in a confirmation step (`children`
- * holds the field, e.g. sender-ids-screen.tsx's provider picker) — the two
- * shapes this console actually needs, one component. A second, form-only
- * component was considered and rejected: both shapes are "explain the
- * consequence, then commit or back out," and forking that into two
- * components would just be this file's own title/description/actions
- * scaffold copy-pasted around a different middle section.
- *
- * The caller owns visibility: render this instead of the drawer's normal
- * body content (and drop the drawer's own `footer` prop, since this
- * component supplies its own Cancel/Confirm row) rather than layering it on
- * top — there is no overlay, no absolute positioning, and no independent
- * open/close transition to fight the drawer's own.
- */
-export interface InlineConfirmProps {
-  /** The question being asked, e.g. "Delete this route?" or "Register {value}
-   * with a provider". Rendered as the panel's own heading — the drawer's
-   * `title` prop stays whatever record is being acted on; this is the
-   * action, not the record. */
-  title: ReactNode;
-  description?: ReactNode;
-  /** A field belonging to this confirmation, e.g. a provider `Select` — omit
-   * for a plain yes/no confirm. */
-  children?: ReactNode;
-  confirmLabel: string;
-  /** Shown on the confirm button while `pending` — defaults to `confirmLabel`
-   * with an ellipsis. */
-  pendingLabel?: string | undefined;
-  cancelLabel?: string;
-  onConfirm: () => void;
-  onCancel: () => void;
-  pending?: boolean;
-  /** Disables the confirm button independent of `pending`, e.g. no provider
-   * selected yet. */
-  confirmDisabled?: boolean;
-  /** Danger-hued confirm button + accent border, matching `Dialog`'s own
-   * "destructive action in the danger hue, never the primary hue"
-   * convention (console-redesign.md §1.7). Defaults `true` — every current
-   * call site is destructive; the one exception (sender-ids-screen.tsx's
-   * "register with a provider" form) passes `false`. */
-  destructive?: boolean;
-  error?: ReactNode;
-  className?: string;
-}
-
-export function InlineConfirm({
-  title,
-  description,
-  children,
-  confirmLabel,
-  pendingLabel,
-  cancelLabel = "Cancel",
-  onConfirm,
-  onCancel,
-  pending = false,
-  confirmDisabled = false,
-  destructive = true,
-  error,
-  className,
-}: InlineConfirmProps) {
-  return (
-    <div
-      className={cn(
-        "flex flex-col gap-4 rounded-sm border p-4",
-        destructive
-          ? "border-state-danger-border bg-state-danger-bg/30"
-          : "border-edge bg-surface-2",
-        className,
-      )}
-    >
-      <div className="flex flex-col gap-1">
-        <h3 className="font-medium text-foreground text-title-sm">{title}</h3>
-        {description != null && <p className="text-body text-muted-foreground">{description}</p>}
-      </div>
-
-      {children != null && <div className="flex flex-col gap-4">{children}</div>}
-
-      {error != null && <InlineBanner variant="danger">{error}</InlineBanner>}
-
-      <div className="flex items-center justify-end gap-2">
-        <Button type="button" variant="ghost" size="sm" disabled={pending} onClick={onCancel}>
-          {cancelLabel}
-        </Button>
-        <Button
-          type="button"
-          variant={destructive ? "destructive" : "primary"}
-          size="sm"
-          disabled={pending || confirmDisabled}
-          onClick={onConfirm}
-        >
-          {pending ? (pendingLabel ?? `${confirmLabel}…`) : confirmLabel}
-        </Button>
-      </div>
-    </div>
-  );
-}

package/src/components/primitives/input.tsx

@@ -1,21 +0,0 @@
-import type { InputHTMLAttributes } from "react";
-import { forwardRef } from "react";
-import { cn } from "../../lib/cn";
-
-export type InputProps = InputHTMLAttributes<HTMLInputElement>;
-
-// D8: no explicit `rounded-*` class needed or added — daisyUI's own
-// `.input` rule already sets every corner from `--radius-field`
-// (confirmed by reading `daisyui/components/input.css` directly), and
-// Phase 0 already rewrote that token to the new register. The class
-// string here is unchanged from before the redesign; the rendered radius
-// changed anyway, entirely from the token, with zero component code to
-// touch — the intended effect of constraint 7 ("DaisyUI does the work").
-export const Input = forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => (
-  <input
-    ref={ref}
-    className={cn("input input-bordered w-full font-sans text-prose", className)}
-    {...props}
-  />
-));
-Input.displayName = "Input";

package/src/components/primitives/label.tsx

@@ -1,43 +0,0 @@
-"use client";
-
-import { Field, Label as HeadlessLabel } from "@headlessui/react";
-import { Fragment, forwardRef } from "react";
-import { cn } from "../../lib/cn";
-import { omitUndefined } from "../../lib/omit-undefined";
-
-/**
- * D3: ports from Radix `Label` to Headless UI's `Field`/`Label` composition.
- *
- * **Found live, not assumed:** Headless UI's own `Label` throws ("You used a
- * `<Label />` component, but it is not inside a relevant parent") unless a
- * `Field` ancestor exists to supply its context — unlike Radix's `Label`,
- * which was a fully standalone `<label>` wrapper. None of this console's
- * ~15 call sites wrap their `<Label htmlFor="x">…</Label>` +
- * `<Input id="x">` pair in a `Field` (they associate the two explicitly via
- * matching `htmlFor`/`id` instead, which needs no shared context at all),
- * so porting to the bare Headless UI `Label` export would crash every one
- * of them. Wrapping each call site in `<Field>` was considered and
- * rejected — it would touch ~15 files outside this bucket's scope for no
- * behavioural gain, since every call site already supplies its own
- * `htmlFor`.
- *
- * Fixed here instead: `Label` supplies its own self-contained `Field`
- * (`as={Fragment}`, so it adds no DOM node) around just the `Label` itself.
- * This satisfies Headless UI's context requirement without requiring any
- * caller to know `Field` exists, keeps the public API
- * (`<Label htmlFor="x">…</Label>`) byte-identical to the Radix version, and
- * still genuinely uses Headless UI's `Label` (constraint 6) rather than a
- * hand-rolled `<label>`.
- */
-export const Label = forwardRef<HTMLLabelElement, React.ComponentPropsWithoutRef<"label">>(
-  ({ className, ...props }, ref) => (
-    <Field as={Fragment}>
-      <HeadlessLabel
-        ref={ref}
-        className={cn("text-body font-medium text-foreground", className)}
-        {...omitUndefined(props)}
-      />
-    </Field>
-  ),
-);
-Label.displayName = "Label";

package/src/components/primitives/pagination.tsx

@@ -1,110 +0,0 @@
-"use client";
-
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import type { ReactNode } from "react";
-import { cn } from "../../lib/cn";
-import { Button } from "./button";
-
-export interface PaginationProps {
-  onPrevious: (() => void) | undefined;
-  onNext: (() => void) | undefined;
-  /**
-   * What the reader is looking at. Two honest shapes, and the choice is
-   * not cosmetic:
-   *
-   * - `{ kind: "offset", offset, pageSize, total }` — only when the API
-   *   genuinely returns a total. Renders `1–25 of 340`.
-   * - `{ kind: "cursor", count }` — a keyset-paged API, which most
-   *   event-shaped endpoints are, because counting a large table on every
-   *   request is the expensive part. Renders `25 shown` and no page
-   *   numbers, because there is no honest page number to render.
-   *
-   * Inventing a page count from a cursor API is the failure this type
-   * exists to prevent: it produces a "Page 3 of ?" that is wrong the
-   * moment a row is inserted.
-   */
-  position: PaginationPosition;
-  /** Rendered between the counts and the buttons — a page-size select, a
-   * "Newest first" note. */
-  children?: ReactNode;
-  /**
-   * Overrides the landmark's accessible name.
-   *
-   * Needed whenever a screen shows more than one pager — a table with
-   * controls above and below is the usual case. Two `<nav>` landmarks
-   * with the same name is a real navigation defect, not a lint nit: a
-   * screen-reader user listing landmarks sees "Pagination, Pagination"
-   * and cannot tell which is which.
-   */
-  label?: string | undefined;
-  className?: string | undefined;
-}
-
-export type PaginationPosition =
-  | { kind: "offset"; offset: number; pageSize: number; total: number }
-  | { kind: "cursor"; count: number };
-
-function positionLabel(position: PaginationPosition): string {
-  if (position.kind === "cursor") {
-    return position.count === 0 ? "No results" : `${position.count} shown`;
-  }
-  const { offset, pageSize, total } = position;
-  if (total === 0) return "No results";
-  const first = offset + 1;
-  const last = Math.min(offset + pageSize, total);
-  return `${first}–${last} of ${total}`;
-}
-
-/**
- * Previous/next paging with an honest position readout.
- *
- * Both callbacks are required but nullable: `undefined` disables that
- * direction. Making them required-but-nullable rather than optional
- * forces a caller to decide what the boundary is, instead of getting a
- * silently dead button by omission.
- */
-export function Pagination({
-  onPrevious,
-  onNext,
-  position,
-  children,
-  label = "Pagination",
-  className,
-}: PaginationProps) {
-  const atEnd =
-    position.kind === "cursor"
-      ? onNext === undefined
-      : position.offset + position.pageSize >= position.total;
-
-  return (
-    <nav
-      aria-label={label}
-      className={cn("flex items-center justify-between gap-4 text-caption", className)}
-    >
-      <p className="font-mono text-subtle-foreground tabular-nums">{positionLabel(position)}</p>
-      <div className="flex items-center gap-2">
-        {children}
-        <Button
-          variant="secondary"
-          size="sm"
-          onClick={onPrevious}
-          disabled={onPrevious === undefined}
-          aria-label="Previous page"
-        >
-          <ChevronLeft size={14} strokeWidth={1.5} />
-          Previous
-        </Button>
-        <Button
-          variant="secondary"
-          size="sm"
-          onClick={onNext}
-          disabled={onNext === undefined || atEnd}
-          aria-label="Next page"
-        >
-          Next
-          <ChevronRight size={14} strokeWidth={1.5} />
-        </Button>
-      </div>
-    </nav>
-  );
-}

package/src/components/primitives/popover.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import { Popover as HeadlessPopover, PopoverButton, PopoverPanel } from "@headlessui/react";
-import type { ComponentPropsWithoutRef } from "react";
-import { cn } from "../../lib/cn";
-
-// D3: Radix `Popover` → Headless UI `Popover`/`PopoverButton`/`PopoverPanel`.
-// `Popover`/`PopoverButton` are used as-is — Headless UI's own `Popover` is
-// already a fully self-contained open/close state machine (no separate
-// "Root" plumbing needed the way `Dialog` needs one here, since Popover
-// natively supports an in-place, uncontrolled trigger).
-export const Popover = HeadlessPopover;
-
-// `PopoverButton` is natively polymorphic (`as`), replacing Radix's
-// `asChild` pattern (D4's same call, applied here to a trigger rather than
-// `Button` itself): `<PopoverTrigger as={Button} variant="secondary">…`.
-export const PopoverTrigger = PopoverButton;
-
-// Radix also exported a standalone `Anchor` (a positioning reference
-// distinct from the trigger) — unconsumed anywhere in this codebase, and
-// Headless UI's own `anchor` prop on `PopoverPanel` (below) covers the same
-// need without a separate element, so no replacement is exported.
-
-export function PopoverContent({
-  className,
-  anchor = "bottom start",
-  ...props
-}: ComponentPropsWithoutRef<typeof PopoverPanel>) {
-  return (
-    <PopoverPanel
-      anchor={anchor}
-      transition
-      className={cn(
-        "z-50 rounded-md border border-edge bg-surface-2 p-3 shadow-[var(--shadow-popover)] [--anchor-gap:6px] focus:outline-none",
-        "origin-top transition duration-100 ease-out data-closed:scale-95 data-closed:opacity-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-}

package/src/components/primitives/progress.tsx

@@ -1,66 +0,0 @@
-import { cn } from "../../lib/cn";
-import type { StatusHue } from "../status/status-tokens";
-import { HUE_CLASSES } from "../status/status-tokens";
-
-export interface ProgressProps {
-  /** Completed units. Clamped into `[0, max]`. */
-  value: number;
-  max?: number;
-  /** `undefined` renders an indeterminate bar. */
-  tone?: StatusHue;
-  /** Accessible name, e.g. `"Retry budget used"`. */
-  label: string;
-  /** Show `3 / 5` beside the bar. */
-  showValue?: boolean;
-  className?: string | undefined;
-}
-
-/**
- * A determinate progress bar for a *bounded, countable* quantity —
- * attempts against a retry budget, rows processed, quota consumed.
- *
- * Not for an unbounded wait: a bar that creeps toward a value it cannot
- * reach is a lie, and `Spinner` is the honest alternative. The `max` is
- * required in spirit for that reason, and defaults to 100 only so a
- * percentage — the one case where the bound is implied — needs no
- * ceremony.
- */
-export function Progress({
-  value,
-  max = 100,
-  tone = "neutral",
-  label,
-  showValue = false,
-  className,
-}: ProgressProps) {
-  const safeMax = max <= 0 ? 1 : max;
-  const clamped = Math.min(Math.max(value, 0), safeMax);
-  const percent = (clamped / safeMax) * 100;
-  const hue = HUE_CLASSES[tone];
-
-  return (
-    <div className={cn("flex items-center gap-2", className)}>
-      <div
-        role="progressbar"
-        aria-label={label}
-        aria-valuenow={clamped}
-        aria-valuemin={0}
-        aria-valuemax={safeMax}
-        className="h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-surface-3"
-      >
-        <div
-          // `currentColor` on a text-token class, so the fill tracks the
-          // same hue vocabulary every status surface uses rather than
-          // introducing a parallel set of bar colours.
-          className={cn("h-full rounded-full bg-current transition-[width] duration-300", hue.fg)}
-          style={{ width: `${percent}%` }}
-        />
-      </div>
-      {showValue && (
-        <span className="shrink-0 font-mono text-caption text-subtle-foreground tabular-nums">
-          {clamped} / {safeMax}
-        </span>
-      )}
-    </div>
-  );
-}

package/src/components/primitives/radio-group.tsx

@@ -1,90 +0,0 @@
-"use client";
-
-import { RadioGroup as HeadlessRadioGroup, Radio } from "@headlessui/react";
-import type { ReactNode } from "react";
-import { cn } from "../../lib/cn";
-
-/**
- * A single-choice control over a small, fixed vocabulary.
- *
- * # Why this exists rather than reaching for `Select`
- *
- * Two reasons, and the second is a correctness one.
- *
- * The first is the one that prompted it: for a handful of options, a
- * `Select` makes the reader click once to discover what the choices even
- * are, and again to pick. A radio group shows the whole vocabulary and
- * costs one click. `SenderIdRegistrationStatus` has four values and lives
- * in a review drawer where seeing the other three *is* the decision.
- *
- * The second: this cannot hit the bug that made `Select` unusable inside a
- * drawer for its entire existence (#315). Headless UI's `Listbox` portals
- * its options to a top-level sibling of `<body>`, which lands outside
- * vaul's Radix focus trap and stalls the enter transition —
- * `opacity: 0`, `pointer-events: none`, measured live. `RadioGroup`
- * renders inline with no portal and no transition, so there is no
- * equivalent failure available to it. For a small vocabulary inside a
- * drawer, that makes radio the *safer* control, not merely the friendlier
- * one.
- *
- * Deliberately not built on `Select`'s CVA table: there are no visual
- * variants to parameterise, and every option renders identically apart
- * from its checked state.
- */
-export interface RadioGroupOption<T extends string> {
-  value: T;
-  label: ReactNode;
-  /** Optional one-line explanation rendered under the label. */
-  description?: ReactNode;
-}
-
-export interface RadioGroupProps<T extends string> {
-  value: T | undefined;
-  onValueChange: (value: T) => void;
-  options: readonly RadioGroupOption<T>[];
-  /** Accessible name. Pair with `FormField`'s label via `aria-labelledby`
-   * where one exists; supplied directly when the group stands alone. */
-  "aria-label"?: string | undefined;
-  "aria-labelledby"?: string | undefined;
-  disabled?: boolean | undefined;
-  className?: string | undefined;
-}
-
-export function RadioGroup<T extends string>({
-  value,
-  onValueChange,
-  options,
-  disabled,
-  className,
-  ...aria
-}: RadioGroupProps<T>) {
-  return (
-    <HeadlessRadioGroup
-      value={value ?? null}
-      onChange={(next: T | null) => {
-        if (next !== null) onValueChange(next);
-      }}
-      disabled={disabled ?? false}
-      className={cn("flex flex-wrap gap-2", className)}
-      {...aria}
-    >
-      {options.map((option) => (
-        <Radio
-          key={option.value}
-          value={option.value}
-          className={cn(
-            "flex cursor-pointer flex-col gap-0.5 rounded-sm border border-edge bg-surface-2 px-3 py-2 text-body text-muted-foreground",
-            "data-checked:border-state-success-border data-checked:bg-state-success-bg data-checked:text-state-success-fg",
-            "data-focus:outline-none data-focus:ring-1 data-focus:ring-state-success-border",
-            "data-disabled:cursor-not-allowed data-disabled:opacity-50",
-          )}
-        >
-          <span className="font-medium">{option.label}</span>
-          {option.description !== undefined && (
-            <span className="text-caption text-subtle-foreground">{option.description}</span>
-          )}
-        </Radio>
-      ))}
-    </HeadlessRadioGroup>
-  );
-}