@vaam-apps/ui 0.1.0 → 0.1.1

package/src/components/primitives/calendar.tsx

@@ -1,136 +0,0 @@
-"use client";
-
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker, type DayPickerProps } from "react-day-picker";
-import { cn } from "../../lib/cn";
-
-export type CalendarProps = DayPickerProps & { className?: string | undefined };
-
-/**
- * `react-day-picker`, themed with this design system's own tokens.
- *
- * # Why the whole `classNames` map is spelled out
- *
- * `react-day-picker` ships a stylesheet (`react-day-picker/style.css`)
- * built on its own `--rdp-*` variables. Importing it would put a second,
- * independent theme in the page whose colours are set from somewhere
- * other than `theme.css` — so the first time anyone changed a surface
- * colour, the calendar would not follow, and the mismatch would be
- * invisible until someone opened a date picker.
- *
- * The stylesheet is therefore **not** imported, and every element gets a
- * class from the tokens here instead. That is more code than a handful of
- * overrides, and it is the point: there is exactly one place this
- * component's colours come from, and it is the same place every other
- * component's come from.
- *
- * # `selected` without `onSelect` is not a binding
- *
- * This component is a thin pass-through, so react-day-picker's own
- * control semantics apply unchanged: given `selected` but no `onSelect`,
- * it manages selection internally and treats `selected` as an initial
- * value. A caller who expects a controlled component gets one that
- * silently diverges from its own prop the first time someone clicks a
- * day — found exactly that way, in a gallery demo. Pass both, or neither.
- *
- * # Layout is deliberately not themed away
- *
- * The grid itself is a `<table>` and needs `border-collapse` plus fixed
- * cell sizing to stay square; those are structural, not thematic, and
- * live here rather than in a token.
- */
-export function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: CalendarProps) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
-      classNames={{
-        root: "text-body text-foreground",
-        months: "flex flex-col gap-4 sm:flex-row",
-        month: "flex flex-col gap-3",
-        month_caption: "flex h-8 items-center justify-center",
-        caption_label: "font-medium text-body text-foreground",
-        nav: "flex items-center gap-1",
-        // The nav buttons are absolutely positioned by RDP's own layout at
-        // the top corners of the month; these restyle them in place.
-        button_previous: cn(
-          "absolute top-3 left-3 inline-flex size-7 items-center justify-center rounded-sm",
-          "text-muted-foreground transition-colors hover:bg-surface-3 hover:text-foreground",
-          "disabled:pointer-events-none disabled:opacity-40",
-        ),
-        button_next: cn(
-          "absolute top-3 right-3 inline-flex size-7 items-center justify-center rounded-sm",
-          "text-muted-foreground transition-colors hover:bg-surface-3 hover:text-foreground",
-          "disabled:pointer-events-none disabled:opacity-40",
-        ),
-        month_grid: "w-full border-collapse",
-        weekdays: "flex",
-        weekday: "w-8 font-normal text-caption text-subtle-foreground",
-        week: "mt-1 flex w-full",
-        // Selection state lives on the CELL, not on the button inside it.
-        // Read off the real DOM, not guessed: react-day-picker puts
-        // `aria-selected` and `data-selected` on the `<td>` and leaves the
-        // `<button>` carrying only `type`/`tabindex`/`aria-label`. An
-        // earlier revision of this file styled the button with
-        // `aria-selected:bg-primary` and the cell with
-        // `[&:has([data-range-middle])]`, and BOTH silently matched
-        // nothing — no selected day had a fill and no range had a tint.
-        // Neither `tsc` nor the classNames-key test could see it: the keys
-        // were all real, and the class strings were valid CSS for a DOM
-        // shape that does not exist. Found by rendering it.
-        day: "relative size-8 p-0 text-center",
-        day_button: cn(
-          "inline-flex size-8 items-center justify-center rounded-sm font-mono text-caption tabular-nums",
-          "text-foreground transition-colors hover:bg-surface-3",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-        ),
-        // Fills the button from the cell's own state, which is where the
-        // state actually is. Covers single mode outright and both ends of
-        // a range; `range_middle` below overrides it for the interior.
-        selected:
-          "[&>button]:bg-primary [&>button]:text-primary-content [&>button]:hover:bg-primary",
-        today: "font-semibold text-state-uncertain-fg",
-        outside: "text-subtle-foreground opacity-50",
-        disabled: "pointer-events-none opacity-30",
-        hidden: "invisible",
-        // The interior of a range: tint the CELL so consecutive days meet
-        // with no gap, and knock the button's own fill back out.
-        //
-        // Two things here were wrong on the first attempt and are worth
-        // keeping written down. The tint was `bg-state-neutral-bg`, which
-        // is a real token that resolves to `transparent` — `neutral` is
-        // the quiet hue and deliberately has no fill — so the interior
-        // rendered as nothing at all. It is a wash of the selection
-        // colour instead, which is also what it means. And the `!` is
-        // load-bearing: a middle day also carries `selected` above, and
-        // both rules are arbitrary variants of equal specificity, so
-        // without it the winner is whichever class Tailwind emits last.
-        range_middle:
-          "bg-primary/15 [&>button]:bg-transparent! [&>button]:text-foreground! [&>button]:hover:bg-surface-3!",
-        range_start: "rounded-l-sm",
-        range_end: "rounded-r-sm",
-        week_number: "w-8 font-mono text-caption text-subtle-foreground",
-        footer: "pt-2 text-caption text-muted-foreground",
-        ...classNames,
-      }}
-      components={{
-        // RDP renders one `Chevron` for both directions and flips it with
-        // `orientation`; swapping in two real icons reads better than a
-        // CSS rotation and keeps the stroke weight matching every other
-        // icon in the system.
-        Chevron: ({ orientation, ...iconProps }) =>
-          orientation === "left" ? (
-            <ChevronLeft size={16} strokeWidth={1.5} {...iconProps} />
-          ) : (
-            <ChevronRight size={16} strokeWidth={1.5} {...iconProps} />
-          ),
-      }}
-      {...props}
-    />
-  );
-}

package/src/components/primitives/card.tsx

@@ -1,70 +0,0 @@
-import type { HTMLAttributes, ReactNode } from "react";
-import { cn } from "../../lib/cn";
-
-export type CardProps = HTMLAttributes<HTMLDivElement>;
-
-// Borders, not shadows (design doc §3.6): every card is `--shadow-none` +
-// a 1px border. daisyUI's own `card` class would add `shadow-xl` under
-// some presets — explicitly opted out here rather than stripped after the
-// fact, since this is a hand-built component, not a generated one.
-//
-// D8: the previous `rounded-sm` override is dropped, not swapped for
-// `rounded-box` — daisyUI's own `.card` rule already sets
-// `border-radius: var(--radius-box)` (confirmed by reading
-// `daisyui/components/card.css` directly), so an explicit override was
-// fighting the component's own class at equal specificity for no reason.
-// This *is* the deliberate D8 value change §5's inventory calls for
-// ("new radius (`--radius-box`)") — the previous `rounded-sm` resolved to
-// `--radius-field` (12px) once Phase 0 rewrote the alias, one tier tighter
-// than the box-tier corners the reference lock (§1.1/§1.2/§1.5) shows for
-// card/drawer/panel chrome.
-export function Card({ className, ...props }: CardProps) {
-  return (
-    <div className={cn("card border border-edge bg-base-300 shadow-none", className)} {...props} />
-  );
-}
-
-export interface CardHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  title: ReactNode;
-  /**
-   * Heading level for `title`. Defaults to `h3`, which is right for a
-   * card inside a section that already has an `h2`.
-   *
-   * It is a prop rather than a constant because a heading level is a
-   * property of the page's outline, not of the card: a card placed
-   * directly under the screen's `h1` with `h3` skips a level, which axe
-   * reports as `heading-order` and a screen-reader user experiences as a
-   * missing section.
-   */
-  headingLevel?: 2 | 3 | 4 | 5 | 6;
-  /** Optional mono metadata line beneath the title. */
-  meta?: ReactNode;
-  /** Right-aligned slot, e.g. a row of buttons. */
-  action?: ReactNode;
-}
-
-export function CardHeader({
-  title,
-  meta,
-  action,
-  headingLevel = 3,
-  className,
-  ...props
-}: CardHeaderProps) {
-  const Heading = `h${headingLevel}` as const;
-  return (
-    <div className={cn("flex items-start justify-between gap-4 p-4", className)} {...props}>
-      <div className="min-w-0">
-        <Heading className="truncate font-medium text-foreground text-title-sm">{title}</Heading>
-        {meta != null && (
-          <p className="mt-1 truncate font-mono text-caption text-subtle-foreground">{meta}</p>
-        )}
-      </div>
-      {action != null && <div className="shrink-0">{action}</div>}
-    </div>
-  );
-}
-
-export function CardBody({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("px-4 pb-4", className)} {...props} />;
-}

package/src/components/primitives/checkbox.tsx

@@ -1,101 +0,0 @@
-"use client";
-
-import { Field, Checkbox as HeadlessCheckbox, Label as HeadlessLabel } from "@headlessui/react";
-import { Check, Minus } from "lucide-react";
-import type { ReactNode } from "react";
-import { cn } from "../../lib/cn";
-
-export interface CheckboxProps {
-  checked: boolean;
-  /** Omit for an uncontrolled display-only checkbox (e.g. inside a row
-   * whose whole surface handles the click). */
-  onCheckedChange?: ((checked: boolean) => void) | undefined;
-  /** Neither on nor off — a parent whose children disagree. Rendered as a
-   * dash. `checked` is still what a click toggles from. */
-  indeterminate?: boolean;
-  disabled?: boolean | undefined;
-  /** Required when no visible `<CheckboxField>` label wraps it. */
-  "aria-label"?: string | undefined;
-  "aria-labelledby"?: string | undefined;
-  className?: string | undefined;
-}
-
-/**
- * A checkbox, rendered as a real focusable control rather than a styled
- * `<input>`.
- *
- * Headless UI gives it `role="checkbox"`, `aria-checked`, space-to-toggle
- * and focus management; everything here is appearance. A native
- * `<input type="checkbox">` styled with `appearance-none` would be
- * equivalent for the plain case but cannot express `indeterminate`
- * without an imperative DOM write on a ref, which is how that state ends
- * up out of sync with React's own.
- */
-export function Checkbox({
-  checked,
-  onCheckedChange,
-  indeterminate = false,
-  disabled,
-  className,
-  ...aria
-}: CheckboxProps) {
-  return (
-    <HeadlessCheckbox
-      checked={checked}
-      onChange={onCheckedChange ?? (() => undefined)}
-      disabled={disabled ?? false}
-      indeterminate={indeterminate}
-      className={cn(
-        "group inline-flex size-4 shrink-0 items-center justify-center rounded-selector border border-edge-strong bg-surface-2",
-        "transition-colors data-checked:border-primary data-checked:bg-primary",
-        "data-indeterminate:border-primary data-indeterminate: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}
-    >
-      {indeterminate ? (
-        <Minus size={12} strokeWidth={2.5} className="text-primary-content" />
-      ) : (
-        <Check
-          size={12}
-          strokeWidth={2.5}
-          className="text-primary-content opacity-0 group-data-checked:opacity-100"
-        />
-      )}
-    </HeadlessCheckbox>
-  );
-}
-
-export interface CheckboxFieldProps extends Omit<CheckboxProps, "aria-label" | "aria-labelledby"> {
-  label: ReactNode;
-  /** One line beneath the label. */
-  description?: ReactNode;
-}
-
-/**
- * A checkbox with a clickable label beside it.
- *
- * Separate from `FormField`, which stacks a label *above* a control:
- * a checkbox's label belongs on the same line and must itself be a click
- * target, which is a different layout and a different association
- * (`Field`/`Label` wiring rather than `htmlFor`).
- */
-export function CheckboxField({ label, description, className, ...props }: CheckboxFieldProps) {
-  return (
-    <Field className={cn("flex items-start gap-2", className)}>
-      <span className="mt-0.5">
-        <Checkbox {...props} />
-      </span>
-      <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>
-    </Field>
-  );
-}

package/src/components/primitives/chip-select.tsx

@@ -1,105 +0,0 @@
-"use client";
-
-// No `CheckboxGroup` — Headless UI 2.2.10 does not export one (checked,
-// not assumed: `tsc` rejected it), so the grouping is done here.
-//
-// A `<fieldset>`, not `<div role="group">`. Biome's `a11y/useSemanticElements`
-// is right that the native element beats the ARIA role, and it caught the
-// div in CI after a local `biome check frontends` had passed — CI runs
-// `pnpm biome ci .`, which is not the same command. Run CI's own.
-//
-// `min-w-0` because a `<fieldset>` has a UA `min-width: min-content` that a
-// `<div>` does not, which would otherwise stop the chips wrapping inside a
-// narrow drawer.
-import { Checkbox, Field, Label } from "@headlessui/react";
-import { Check } from "lucide-react";
-import type { ReactNode } from "react";
-import { cn } from "../../lib/cn";
-
-/**
- * Multi-select over a small, fixed vocabulary, rendered as toggleable
- * chips.
- *
- * # Why chips rather than a text field or a multi-select
- *
- * The motivating case is OAuth scopes when provisioning a client. That
- * field was a free-text input: an operator had to already know both that
- * scopes are space-delimited *and* what the fourteen valid strings are,
- * with a typo silently producing a client that is denied at Layer 2 with
- * no hint why. Showing the vocabulary is the whole point.
- *
- * Not a `Select` with `multiple`: this renders inline with no portal and
- * no transition, so it cannot hit the focus-trap bug that made `Select`
- * unusable inside a drawer (#315). Same reasoning as `RadioGroup` — for a
- * bounded vocabulary in a drawer, the inline control is the safer one.
- *
- * Not a `<datalist>` or a tag input either: both still let a caller type
- * something outside the vocabulary, which is exactly the property being
- * removed.
- */
-export interface ChipOption<T extends string> {
-  value: T;
-  label: ReactNode;
-  /** Shown beneath the label — for scopes, what the scope actually permits. */
-  description?: ReactNode;
-}
-
-export interface ChipSelectProps<T extends string> {
-  value: readonly T[];
-  onValueChange: (value: T[]) => void;
-  options: readonly ChipOption<T>[];
-  disabled?: boolean | undefined;
-  "aria-label"?: string | undefined;
-  className?: string | undefined;
-}
-
-export function ChipSelect<T extends string>({
-  value,
-  onValueChange,
-  options,
-  disabled,
-  className,
-  ...aria
-}: ChipSelectProps<T>) {
-  return (
-    <fieldset className={cn("flex min-w-0 flex-wrap gap-2", className)} {...aria}>
-      {options.map((option) => {
-        const checked = value.includes(option.value);
-        return (
-          <Field key={option.value}>
-            <Checkbox
-              checked={checked}
-              disabled={disabled ?? false}
-              onChange={(next: boolean) => {
-                onValueChange(
-                  next ? [...value, option.value] : value.filter((v) => v !== option.value),
-                );
-              }}
-              className={cn(
-                "flex cursor-pointer items-start gap-2 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={cn(
-                  "mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-xs border border-edge",
-                  checked && "border-state-success-fg",
-                )}
-              >
-                {checked && <Check className="size-3" aria-hidden="true" />}
-              </span>
-              <span className="flex flex-col gap-0.5">
-                <Label className="cursor-pointer font-mono font-medium">{option.label}</Label>
-                {option.description !== undefined && (
-                  <span className="text-caption text-subtle-foreground">{option.description}</span>
-                )}
-              </span>
-            </Checkbox>
-          </Field>
-        );
-      })}
-    </fieldset>
-  );
-}

package/src/components/primitives/command-menu.tsx

@@ -1,92 +0,0 @@
-"use client";
-
-import { Command as CommandPrimitive } from "cmdk";
-import { Search } from "lucide-react";
-import { forwardRef } from "react";
-import { cn } from "../../lib/cn";
-
-// cmdk is standalone (no Radix wrapper needed — it already owns its own
-// keyboard nav/ARIA). Styled with the same surface-2/border-edge/radius-md
-// floating-layer treatment as Popover/DropdownMenu for visual consistency.
-
-export const CommandMenu = forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex w-full flex-col overflow-hidden rounded-md border border-edge bg-surface-2 text-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-CommandMenu.displayName = "CommandMenu";
-
-export function CommandMenuInput(
-  props: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>,
-) {
-  return (
-    <div className="flex items-center gap-2 border-edge border-b px-3">
-      <Search size={14} strokeWidth={1.5} className="shrink-0 text-subtle-foreground" />
-      <CommandPrimitive.Input
-        className="h-10 w-full bg-transparent text-prose outline-none placeholder:text-subtle-foreground"
-        {...props}
-      />
-    </div>
-  );
-}
-
-export const CommandMenuList = forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-80 overflow-y-auto overflow-x-hidden p-1", className)}
-    {...props}
-  />
-));
-CommandMenuList.displayName = "CommandMenuList";
-
-export function CommandMenuEmpty(
-  props: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>,
-) {
-  return (
-    <CommandPrimitive.Empty
-      className="px-3 py-6 text-center text-body text-muted-foreground"
-      {...props}
-    />
-  );
-}
-
-export const CommandMenuGroup = forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "text-body [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-micro [&_[cmdk-group-heading]]:text-muted-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-CommandMenuGroup.displayName = "CommandMenuGroup";
-
-export const CommandMenuItem = forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-body data-[selected=true]:bg-surface-3",
-      className,
-    )}
-    {...props}
-  />
-));
-CommandMenuItem.displayName = "CommandMenuItem";

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

@@ -1,109 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-import { Button } from "./button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "./dialog";
-import { Spinner } from "./spinner";
-
-export interface ConfirmDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  title: ReactNode;
-  /**
-   * What will happen, in the user's terms — and for anything
-   * irreversible, say so here. "This cannot be undone" is not filler;
-   * it is the one sentence that changes the decision.
-   */
-  description: ReactNode;
-  /** Names the action, e.g. "Delete endpoint". Never "OK" or "Yes": the
-   * confirm button is often the only text read before clicking, so it has
-   * to say what it does on its own. */
-  confirmLabel: string;
-  cancelLabel?: string;
-  /** `destructive` renders the confirm button in the error variant. Use
-   * it for anything that deletes, revokes or cancels — not merely for
-   * anything important. */
-  tone?: "default" | "destructive";
-  onConfirm: () => void;
-  /** In-flight: both buttons disabled, confirm shows a spinner. The
-   * dialog does not close itself — the caller closes it when the write
-   * actually lands, so a failure leaves the dialog open with its error
-   * rather than vanishing and losing the context. */
-  busy?: boolean;
-  /** Rendered above the buttons. The place for a failed attempt's message. */
-  children?: ReactNode;
-}
-
-/**
- * A modal yes/no for an action worth interrupting someone over.
- *
- * # When *not* to use it
- *
- * Most of the time. A modal confirm is an interruption, and an
- * interruption that appears on every delete trains people to dismiss it
- * without reading — at which point it protects nothing and costs a click.
- * `InlineConfirm` (the two-step button that expands in place) is the
- * right default for a row-level action; this is for the ones where
- * getting it wrong is expensive and hard to reverse.
- *
- * # Why the caller closes it
- *
- * `onConfirm` returning does not close the dialog, and `busy` is a prop
- * rather than internal state. Both follow from the same requirement: the
- * dialog must still be open, with its context intact, when a write fails.
- * A self-closing confirm reports failure through a toast on a screen the
- * operator has already been returned to, which is where error messages go
- * to be missed.
- */
-export function ConfirmDialog({
-  open,
-  onOpenChange,
-  title,
-  description,
-  confirmLabel,
-  cancelLabel = "Cancel",
-  tone = "default",
-  onConfirm,
-  busy = false,
-  children,
-}: ConfirmDialogProps) {
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-sm">
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          <DialogDescription>{description}</DialogDescription>
-        </DialogHeader>
-        {children}
-        <DialogFooter>
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            disabled={busy}
-            onClick={() => onOpenChange(false)}
-          >
-            {cancelLabel}
-          </Button>
-          <Button
-            type="button"
-            variant={tone === "destructive" ? "destructive" : "primary"}
-            size="sm"
-            disabled={busy}
-            onClick={onConfirm}
-          >
-            {busy && <Spinner size="xs" />}
-            {confirmLabel}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}