@vaam-apps/ui 0.1.0

package/src/components/primitives/date-picker.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { Popover as HeadlessPopover, PopoverButton, PopoverPanel } from "@headlessui/react";
+import { CalendarDays, X } from "lucide-react";
+import type { DateRange } from "react-day-picker";
+import { cn } from "../../lib/cn";
+import { omitUndefined } from "../../lib/omit-undefined";
+import { Calendar } from "./calendar";
+
+export type { DateRange };
+
+/**
+ * `2026-09-11` — ISO 8601 calendar date, no time, no zone.
+ *
+ * Every date this module exchanges with a caller is one of these, not a
+ * `Date`. A `Date` is an instant, and an instant rendered in a different
+ * zone is a different calendar day — which is how a filter for "today"
+ * silently returns yesterday's rows for anyone west of the server. The
+ * `Date` objects `react-day-picker` works in are confined to this file.
+ */
+export type IsoDate = string;
+
+/** `Date` (local midnight) → `YYYY-MM-DD`, without going through UTC. */
+export function toIsoDate(date: Date): IsoDate {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+/**
+ * `YYYY-MM-DD` → `Date` at *local* midnight.
+ *
+ * Deliberately not `new Date("2026-09-11")`, which the spec parses as
+ * UTC midnight — in any negative-offset zone that is the previous day,
+ * so a calendar built on it highlights the wrong cell.
+ */
+export function fromIsoDate(iso: IsoDate): Date | undefined {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+  if (match === null) return undefined;
+  const [, year, month, day] = match as unknown as [string, string, string, string];
+  return new Date(Number(year), Number(month) - 1, Number(day));
+}
+
+function displayLabel(iso: IsoDate | undefined, placeholder: string): string {
+  return iso === undefined || iso === "" ? placeholder : iso;
+}
+
+interface TriggerProps {
+  /** Shown when nothing is selected. */
+  placeholder: string;
+  label: string;
+  hasValue: boolean;
+  disabled: boolean | undefined;
+  onClear: (() => void) | undefined;
+  className: string | undefined;
+}
+
+/**
+ * The field-looking button that opens the calendar.
+ *
+ * A `<button>`, not an `<input>`: the value is chosen from the calendar,
+ * and a text input that looks editable but is not is worse than a button
+ * that looks like a field. Callers who want typed entry should use a
+ * plain `<Input type="date">` — the browser's own picker is better than
+ * anything worth reimplementing here.
+ */
+function PickerTrigger({
+  placeholder,
+  label,
+  hasValue,
+  disabled,
+  onClear,
+  className,
+}: TriggerProps) {
+  return (
+    <div className={cn("relative inline-flex w-full items-center", className)}>
+      <PopoverButton
+        {...omitUndefined({ disabled })}
+        className={cn(
+          "input input-bordered flex w-full items-center gap-2 text-left font-sans text-prose",
+          !hasValue && "text-subtle-foreground",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          hasValue && onClear !== undefined && "pr-9",
+        )}
+      >
+        <CalendarDays size={14} strokeWidth={1.5} className="shrink-0 text-subtle-foreground" />
+        <span className="truncate font-mono tabular-nums">{label}</span>
+        <span className="sr-only">{placeholder}</span>
+      </PopoverButton>
+      {hasValue && onClear !== undefined && (
+        // Outside the PopoverButton on purpose: nesting a button inside a
+        // button is invalid HTML, and browsers resolve it by hoisting the
+        // inner one out, which silently detaches the click handler.
+        <button
+          type="button"
+          onClick={onClear}
+          aria-label={`Clear ${placeholder}`}
+          className="-translate-y-1/2 absolute top-1/2 right-2 text-subtle-foreground hover:text-foreground"
+        >
+          <X size={14} strokeWidth={1.5} />
+        </button>
+      )}
+    </div>
+  );
+}
+
+const PANEL_CLASS = cn(
+  "z-50 rounded-md border border-edge bg-surface-2 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",
+);
+
+export interface DatePickerProps {
+  value: IsoDate | undefined;
+  onValueChange: (value: IsoDate | undefined) => void;
+  /** Shown when empty, and used as the control's accessible name. */
+  placeholder?: string;
+  /** Earliest selectable date, inclusive. */
+  min?: IsoDate | undefined;
+  /** Latest selectable date, inclusive. */
+  max?: IsoDate | undefined;
+  disabled?: boolean | undefined;
+  /** Show an inline clear affordance once a date is picked. */
+  clearable?: boolean;
+  className?: string | undefined;
+}
+
+/** A single calendar date, chosen from a popover calendar. */
+export function DatePicker({
+  value,
+  onValueChange,
+  placeholder = "Pick a date",
+  min,
+  max,
+  disabled,
+  clearable = true,
+  className,
+}: DatePickerProps) {
+  const selected = value === undefined ? undefined : fromIsoDate(value);
+
+  return (
+    <HeadlessPopover className={cn("relative", className)}>
+      {({ close }) => (
+        <>
+          <PickerTrigger
+            placeholder={placeholder}
+            label={displayLabel(value, placeholder)}
+            hasValue={value !== undefined && value !== ""}
+            disabled={disabled}
+            onClear={clearable ? () => onValueChange(undefined) : undefined}
+            className={undefined}
+          />
+          <PopoverPanel anchor="bottom start" transition className={PANEL_CLASS}>
+            <Calendar
+              mode="single"
+              {...omitUndefined({
+                selected,
+                defaultMonth: selected,
+                startMonth: min === undefined ? undefined : fromIsoDate(min),
+                endMonth: max === undefined ? undefined : fromIsoDate(max),
+              })}
+              onSelect={(next) => {
+                onValueChange(next === undefined ? undefined : toIsoDate(next));
+                // Closing on pick is right for a single date and wrong for
+                // a range, where the first click is only half the answer.
+                if (next !== undefined) close();
+              }}
+            />
+          </PopoverPanel>
+        </>
+      )}
+    </HeadlessPopover>
+  );
+}
+
+/** Two ISO dates, inclusive at both ends. `undefined` at either end means open. */
+export interface IsoDateRange {
+  from?: IsoDate | undefined;
+  to?: IsoDate | undefined;
+}
+
+export interface DateRangePickerProps {
+  value: IsoDateRange | undefined;
+  onValueChange: (value: IsoDateRange | undefined) => void;
+  placeholder?: string;
+  min?: IsoDate | undefined;
+  max?: IsoDate | undefined;
+  disabled?: boolean | undefined;
+  clearable?: boolean;
+  /** Months shown side by side. Two makes a cross-month range selectable
+   * without navigating, which is the common case for "last 30 days". */
+  numberOfMonths?: number;
+  className?: string | undefined;
+}
+
+function rangeLabel(value: IsoDateRange | undefined, placeholder: string): string {
+  if (value === undefined) return placeholder;
+  const { from, to } = value;
+  if (from === undefined && to === undefined) return placeholder;
+  if (from !== undefined && to === undefined) return `${from} → …`;
+  if (from === undefined && to !== undefined) return `… → ${to}`;
+  return `${from} → ${to}`;
+}
+
+/**
+ * A start and end date as one control.
+ *
+ * Exists because the alternative — two `<input type="date">` side by side
+ * — is what applications actually ship, and it cannot express the one
+ * thing a range needs: that the two ends constrain each other. Here the
+ * second click is always after the first, the fill between them is
+ * visible, and a half-finished range is representable (`from` set, `to`
+ * open) rather than being a validation error.
+ */
+export function DateRangePicker({
+  value,
+  onValueChange,
+  placeholder = "Pick a date range",
+  min,
+  max,
+  disabled,
+  clearable = true,
+  numberOfMonths = 2,
+  className,
+}: DateRangePickerProps) {
+  const selected: DateRange | undefined =
+    value === undefined
+      ? undefined
+      : {
+          from: value.from === undefined ? undefined : fromIsoDate(value.from),
+          to: value.to === undefined ? undefined : fromIsoDate(value.to),
+        };
+
+  const hasValue = value !== undefined && (value.from !== undefined || value.to !== undefined);
+
+  return (
+    <HeadlessPopover className={cn("relative", className)}>
+      <PickerTrigger
+        placeholder={placeholder}
+        label={rangeLabel(value, placeholder)}
+        hasValue={hasValue}
+        disabled={disabled}
+        onClear={clearable ? () => onValueChange(undefined) : undefined}
+        className={undefined}
+      />
+      <PopoverPanel anchor="bottom start" transition className={PANEL_CLASS}>
+        <Calendar
+          mode="range"
+          numberOfMonths={numberOfMonths}
+          {...omitUndefined({
+            selected,
+            defaultMonth: selected?.from,
+            startMonth: min === undefined ? undefined : fromIsoDate(min),
+            endMonth: max === undefined ? undefined : fromIsoDate(max),
+          })}
+          onSelect={(next) => {
+            if (next === undefined) {
+              onValueChange(undefined);
+              return;
+            }
+            onValueChange({
+              from: next.from === undefined ? undefined : toIsoDate(next.from),
+              to: next.to === undefined ? undefined : toIsoDate(next.to),
+            });
+          }}
+        />
+      </PopoverPanel>
+    </HeadlessPopover>
+  );
+}

package/src/components/primitives/dialog.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import {
+  DialogBackdrop,
+  DialogPanel,
+  Dialog as HeadlessDialog,
+  DialogDescription as HeadlessDialogDescription,
+  DialogTitle as HeadlessDialogTitle,
+} from "@headlessui/react";
+import { X } from "lucide-react";
+import {
+  type ComponentPropsWithoutRef,
+  createContext,
+  type ElementType,
+  type MouseEvent,
+  type ReactNode,
+  useContext,
+  useState,
+} from "react";
+import { cn } from "../../lib/cn";
+
+interface DialogContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+const DialogContext = createContext<DialogContextValue | null>(null);
+
+function useDialogContext(component: string): DialogContextValue {
+  const ctx = useContext(DialogContext);
+  if (ctx === null) {
+    throw new Error(`<${component} /> must be rendered inside <Dialog>.`);
+  }
+  return ctx;
+}
+
+export interface DialogProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: ReactNode;
+}
+
+/**
+ * D3: Radix `Dialog` → Headless UI `Dialog`/`DialogPanel`/`DialogTitle`/`DialogBackdrop`.
+ *
+ * `Dialog` itself is **not** a Headless UI component — it's a plain context
+ * provider. Headless UI's own `Dialog` only wraps the modal
+ * backdrop/panel (`DialogContent` below) and is controlled-only
+ * (`open`/`onClose`); it has no equivalent to Radix's `Dialog.Trigger`,
+ * which rendered in place (outside any portal) and could itself drive an
+ * *uncontrolled* open state. Two real consumers need both shapes:
+ * `providers-screen.tsx`'s edit dialog is fully controlled
+ * (`open={selectedId !== null}`, no `DialogTrigger` at all), while the
+ * gallery's demo dialog is uncontrolled, opened by its own in-place
+ * `DialogTrigger`. This root supplies the open/close plumbing for both,
+ * the same controlled/uncontrolled duality `Select` (D17) uses.
+ */
+export function Dialog({ open, defaultOpen = false, onOpenChange, children }: DialogProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = open !== undefined;
+  const currentOpen = isControlled ? open : internalOpen;
+
+  function setOpen(next: boolean) {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  }
+
+  return (
+    <DialogContext.Provider value={{ open: currentOpen, setOpen }}>
+      {children}
+    </DialogContext.Provider>
+  );
+}
+
+type TriggerProps<T extends ElementType> = { as?: T } & Omit<ComponentPropsWithoutRef<T>, "as">;
+
+/**
+ * Renders in place, not portaled — `as` selects the rendered element/component,
+ * matching Headless UI's own polymorphism convention rather than Radix's
+ * `asChild` (D4 already retired that pattern for `Button`; this is the
+ * identical call applied to a trigger). Replaces
+ * `<DialogTrigger asChild><Button variant="secondary">…</Button></DialogTrigger>`
+ * with `<DialogTrigger as={Button} variant="secondary">…</DialogTrigger>`
+ * (the gallery's own only consumer, updated in this same change).
+ */
+export function DialogTrigger<T extends ElementType = "button">({
+  as,
+  onClick,
+  ...props
+}: TriggerProps<T>) {
+  const { setOpen } = useDialogContext("DialogTrigger");
+  const Component = (as ?? "button") as ElementType;
+  return (
+    <Component
+      type={as === undefined ? "button" : undefined}
+      onClick={(event: MouseEvent) => {
+        (onClick as ((e: MouseEvent) => void) | undefined)?.(event);
+        setOpen(true);
+      }}
+      {...props}
+    />
+  );
+}
+
+/** Unconsumed today (grepped across `admin/`) — kept for API parity. Same
+ * `as`-polymorphic shape as `DialogTrigger`. */
+export function DialogClose<T extends ElementType = "button">({
+  as,
+  onClick,
+  ...props
+}: TriggerProps<T>) {
+  const { setOpen } = useDialogContext("DialogClose");
+  const Component = (as ?? "button") as ElementType;
+  return (
+    <Component
+      type={as === undefined ? "button" : undefined}
+      onClick={(event: MouseEvent) => {
+        (onClick as ((e: MouseEvent) => void) | undefined)?.(event);
+        setOpen(false);
+      }}
+      {...props}
+    />
+  );
+}
+
+// Radius bumps to --radius-md here on purpose (design doc §3.5, unchanged by
+// D8's radius-scale rewrite — see theme.css): a floating layer reads as
+// detached from the grid beneath it.
+export function DialogContent({ className, children, ...props }: ComponentPropsWithoutRef<"div">) {
+  const { open, setOpen } = useDialogContext("DialogContent");
+  return (
+    <HeadlessDialog open={open} onClose={setOpen} className="relative z-50">
+      <DialogBackdrop
+        transition
+        className="fixed inset-0 bg-black/50 duration-150 ease-out data-closed:opacity-0"
+      />
+      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
+        <DialogPanel
+          transition
+          className={cn(
+            "relative w-full max-w-[480px] rounded-md border border-edge bg-surface-2 p-6 shadow-[var(--shadow-dialog)]",
+            "duration-150 ease-out data-closed:scale-95 data-closed:opacity-0",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          <button
+            type="button"
+            aria-label="Close"
+            onClick={() => setOpen(false)}
+            className="absolute top-4 right-4 text-subtle-foreground hover:text-foreground"
+          >
+            <X size={16} strokeWidth={1.5} />
+          </button>
+        </DialogPanel>
+      </div>
+    </HeadlessDialog>
+  );
+}
+
+export function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("mb-4 flex flex-col gap-1", className)} {...props} />;
+}
+
+/** #56: the confirm/requeue dialog's own action row. Mirrors `DialogHeader`'s
+ * shape (a thin, class-composing div, not a Headless-UI-wrapped primitive —
+ * a footer has no accessibility semantics either library needs to own). */
+export function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("mt-6 flex items-center justify-end gap-2", className)} {...props} />;
+}
+
+export function DialogTitle({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof HeadlessDialogTitle>) {
+  return (
+    <HeadlessDialogTitle
+      className={cn("font-medium text-foreground text-title-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export function DialogDescription({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof HeadlessDialogDescription>) {
+  return (
+    <HeadlessDialogDescription
+      className={cn("text-muted-foreground text-prose", className)}
+      {...props}
+    />
+  );
+}