@tangle-network/ui 11.28.2 → 11.30.0

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

@@ -0,0 +1,146 @@
+import * as React from "react";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { controlHeight } from "../lib/control-presentation";
+import { Button } from "./button";
+import { Calendar, formatCalendarDate, parseCalendarDate } from "./calendar";
+import { DatePicker } from "./date-picker";
+import { Select, SelectTrigger, SelectValue } from "./select";
+import { TimeSelect } from "./time-select";
+import { FilterField, Toolbar } from "./toolbar";
+
+afterEach(cleanup);
+
+describe("calendar dates", () => {
+  it("round-trips YYYY-MM-DD in UTC and rejects impossible dates", () => {
+    const time = parseCalendarDate("2026-03-08");
+    expect(time).toBe(Date.UTC(2026, 2, 8));
+    expect(formatCalendarDate(time!)).toBe("2026-03-08");
+    expect(parseCalendarDate("2026-02-31")).toBeNull();
+    expect(parseCalendarDate("03/08/2026")).toBeNull();
+  });
+});
+
+describe("Calendar", () => {
+  it("renders six weeks, marks today and the selection, and picks a day", async () => {
+    const onChange = vi.fn();
+    render(<Calendar value="2026-10-08" today="2026-10-08" onChange={onChange} locale="en-US" />);
+    const grid = screen.getByRole("grid", { name: "October 2026" });
+    expect(within(grid).getAllByRole("gridcell")).toHaveLength(42);
+    const selected = screen.getByRole("button", { name: "Thursday, October 8, 2026" });
+    expect(selected).toHaveAttribute("aria-current", "date");
+    expect(selected.closest("[role=gridcell]")).toHaveAttribute("aria-selected", "true");
+    await userEvent.click(screen.getByRole("button", { name: "Friday, October 16, 2026" }));
+    expect(onChange).toHaveBeenCalledWith("2026-10-16");
+  });
+
+  it("moves by day, week and month from the keyboard and picks with Enter", async () => {
+    const onChange = vi.fn();
+    render(<Calendar value="2026-10-31" onChange={onChange} locale="en-US" />);
+    const user = userEvent.setup();
+    screen.getByRole("button", { name: "Saturday, October 31, 2026" }).focus();
+    await user.keyboard("{ArrowRight}");
+    expect(screen.getByRole("grid", { name: "November 2026" })).toBeTruthy();
+    expect(document.activeElement).toHaveAccessibleName("Sunday, November 1, 2026");
+    await user.keyboard("{ArrowDown}{PageUp}");
+    expect(document.activeElement).toHaveAccessibleName("Thursday, October 8, 2026");
+    await user.keyboard("{Enter}");
+    expect(onChange).toHaveBeenCalledWith("2026-10-08");
+  });
+
+  it("refuses dates outside min and max", async () => {
+    const onChange = vi.fn();
+    render(<Calendar defaultMonth="2026-10-01" min="2026-10-10" onChange={onChange} locale="en-US" />);
+    const early = screen.getByRole("button", { name: "Friday, October 9, 2026" });
+    expect(early).toHaveAttribute("aria-disabled", "true");
+    await userEvent.click(early);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("starts weeks on Monday when asked", () => {
+    render(<Calendar defaultMonth="2026-10-01" weekStartsOn={1} locale="en-US" />);
+    expect(screen.getAllByRole("columnheader")[0]).toHaveAccessibleName("Monday");
+  });
+});
+
+describe("DatePicker", () => {
+  it("shows the date in the locale instead of a mm/dd/yyyy mask, on the control scale", () => {
+    render(<DatePicker aria-label="Schedule for" value="2026-10-08" locale="en-US" />);
+    const trigger = screen.getByRole("button", { name: "Schedule for" });
+    expect(trigger).toHaveTextContent("Oct 8, 2026");
+    expect(trigger.className.split(" ")).toContain(controlHeight.md);
+    expect(trigger).toHaveAttribute("aria-haspopup", "dialog");
+  });
+
+  it("opens a calendar, reports the chosen date and closes", async () => {
+    const onChange = vi.fn();
+    render(<DatePicker aria-label="Schedule for" placeholder="Any date" defaultMonth="2026-10-01" onChange={onChange} locale="en-US" />);
+    const trigger = screen.getByRole("button", { name: "Schedule for" });
+    expect(trigger).toHaveTextContent("Any date");
+    expect(trigger).toHaveAttribute("data-placeholder");
+    await userEvent.click(trigger);
+    await userEvent.click(await screen.findByRole("button", { name: "Tuesday, October 20, 2026" }));
+    expect(onChange).toHaveBeenCalledWith("2026-10-20");
+    expect(screen.queryByRole("grid")).toBeNull();
+  });
+
+  it("clears a chosen date and submits it with a name", async () => {
+    const onChange = vi.fn();
+    const { container } = render(<DatePicker aria-label="Due" name="due" value="2026-10-08" onChange={onChange} locale="en-US" />);
+    expect(container.querySelector('input[type="hidden"][name="due"]')).toHaveValue("2026-10-08");
+    await userEvent.click(screen.getByRole("button", { name: "Due" }));
+    await userEvent.click(await screen.findByRole("button", { name: "Clear" }));
+    expect(onChange).toHaveBeenCalledWith("");
+  });
+});
+
+describe("TimeSelect", () => {
+  it("lists step slots in the locale and keeps an off-step value", () => {
+    render(<TimeSelect aria-label="Time" value="09:07" locale="en-US" step={30} />);
+    const trigger = screen.getByRole("combobox", { name: "Time" });
+    expect(trigger).toHaveTextContent("9:07 AM");
+    expect(trigger.className.split(" ")).toContain(controlHeight.md);
+  });
+
+  it("reports HH:MM when a slot is picked", async () => {
+    // jsdom lacks the layout APIs Radix Select calls while opening.
+    Element.prototype.scrollIntoView ??= vi.fn();
+    Element.prototype.hasPointerCapture ??= vi.fn(() => false);
+    Element.prototype.releasePointerCapture ??= vi.fn();
+    const onChange = vi.fn();
+    render(<TimeSelect aria-label="Time" value="09:00" onChange={onChange} locale="en-US" step={60} />);
+    const trigger = screen.getByRole("combobox", { name: "Time" });
+    trigger.focus();
+    fireEvent.keyDown(trigger, { key: "Enter" });
+    fireEvent.click(await screen.findByRole("option", { name: "10:00 AM" }));
+    expect(onChange).toHaveBeenCalledWith("10:00");
+  });
+});
+
+describe("raised fields in a Toolbar", () => {
+  it("lifts fields inside a Toolbar onto the card surface and leaves others in the well", () => {
+    render(
+      <>
+        <Toolbar data-testid="toolbar" filters={<FilterField label="Format"><Select><SelectTrigger aria-label="Format"><SelectValue /></SelectTrigger></Select></FilterField>} />
+        <Select><SelectTrigger aria-label="Elsewhere"><SelectValue /></SelectTrigger></Select>
+      </>,
+    );
+    expect(screen.getByTestId("toolbar").className).toContain("[--field-surface:hsl(var(--card))]");
+    for (const name of ["Format", "Elsewhere"]) {
+      expect(screen.getByRole("combobox", { name }).className).toContain("bg-[var(--field-surface,var(--bg-input))]");
+    }
+  });
+});
+
+describe("Button bare", () => {
+  it("keeps focus and disabled behavior without surface or size classes", () => {
+    render(<Button variant="bare" className="flex w-full px-4 py-2" disabled>Row</Button>);
+    const row = screen.getByRole("button", { name: "Row" });
+    expect(row).toBeDisabled();
+    expect(row.className).toContain("focus-visible:ring-4");
+    expect(row.className).not.toContain("h-[var(--control-height");
+    expect(row.className).not.toContain("inline-flex");
+    expect(row.className).toContain("px-4");
+  });
+});

package/src/primitives/date-picker.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { CalendarDays } from "lucide-react";
+import * as React from "react";
+import { fieldPresentation, fieldSizes, fieldTouchText, type ControlSize } from "../lib/control-presentation";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { Calendar, parseCalendarDate, type CalendarDate, type CalendarProps } from "./calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+export interface DatePickerProps
+  extends Pick<CalendarProps, "min" | "max" | "isDateDisabled" | "today" | "weekStartsOn" | "locale" | "defaultMonth"> {
+  /** The chosen date, `YYYY-MM-DD`, or empty for none. */
+  value?: CalendarDate | null;
+  onChange?: (value: CalendarDate | "") => void;
+  /** Shown when no date is chosen. */
+  placeholder?: string;
+  size?: ControlSize;
+  disabled?: boolean;
+  /** Offer a Clear action while a date is chosen. Default true. */
+  clearable?: boolean;
+  /** How the chosen date reads on the trigger. */
+  formatOptions?: Intl.DateTimeFormatOptions;
+  id?: string;
+  name?: string;
+  className?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  "aria-describedby"?: string;
+}
+
+const DEFAULT_FORMAT: Intl.DateTimeFormatOptions = { month: "short", day: "numeric", year: "numeric" };
+
+/**
+ * A date field: a trigger on the control scale that opens a Calendar. It reads
+ * like a Select (same height, well, border, focus ring), shows the date in the
+ * viewer's locale instead of a `mm/dd/yyyy` mask, and reports `YYYY-MM-DD`.
+ * With `name` it also submits that value in a form.
+ */
+const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
+  (
+    {
+      value,
+      onChange,
+      placeholder = "Pick a date",
+      size = "md",
+      disabled,
+      clearable = true,
+      formatOptions = DEFAULT_FORMAT,
+      id,
+      name,
+      className,
+      locale,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      ...calendarProps
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = React.useState(false);
+    const selected = parseCalendarDate(value);
+    const label = selected === null
+      ? null
+      : new Intl.DateTimeFormat(locale, { ...formatOptions, timeZone: "UTC" }).format(selected);
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            ref={ref}
+            id={id}
+            type="button"
+            disabled={disabled}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            aria-describedby={ariaDescribedBy}
+            aria-haspopup="dialog"
+            data-placeholder={selected === null ? "" : undefined}
+            className={cn(
+              "inline-flex w-full items-center justify-between gap-2 whitespace-nowrap border py-1 text-left shadow-sm disabled:cursor-not-allowed disabled:opacity-50",
+              fieldPresentation,
+              fieldTouchText,
+              fieldSizes[size],
+              "data-[placeholder]:text-[var(--text-dim)] data-[state=open]:border-primary",
+              className,
+            )}
+          >
+            <span className="min-w-0 truncate">{label ?? placeholder}</span>
+            <CalendarDays aria-hidden className="size-4 shrink-0 opacity-60" />
+          </button>
+        </PopoverTrigger>
+        {name && <input type="hidden" name={name} value={selected === null ? "" : (value as string)} />}
+        <PopoverContent align="start" className="w-auto p-3">
+          <Calendar
+            {...calendarProps}
+            locale={locale}
+            value={value}
+            onChange={(next) => {
+              onChange?.(next);
+              setOpen(false);
+            }}
+          />
+          {clearable && selected !== null && (
+            <div className="mt-2 flex justify-end border-t border-border pt-2">
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  onChange?.("");
+                  setOpen(false);
+                }}
+              >
+                Clear
+              </Button>
+            </div>
+          )}
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker };

package/src/primitives/index.ts

@@ -68,6 +68,13 @@ export type { InputProps, TextareaProps } from "./input";
 export { HelpText } from "./help-text";
 export type { HelpTextProps } from "./help-text";
 
+export { Calendar, formatCalendarDate, localToday, parseCalendarDate } from "./calendar";
+export type { CalendarDate, CalendarProps } from "./calendar";
+export { DatePicker } from "./date-picker";
+export type { DatePickerProps } from "./date-picker";
+export { TimeSelect } from "./time-select";
+export type { TimeSelectProps } from "./time-select";
+
 export { Badge, badgeVariants } from "./badge";
 export type { BadgeProps } from "./badge";
 
@@ -130,6 +137,8 @@ export { Switch } from "./switch";
 
 export { Checkbox } from "./checkbox";
 
+export { RadioGroup, RadioGroupItem } from "./radio-group";
+
 export { Separator } from "./separator";
 
 export {

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Label } from "./label";
+import { RadioGroup, RadioGroupItem } from "./radio-group";
+
+afterEach(cleanup);
+
+describe("RadioGroup", () => {
+  it("chooses one item by click or arrow key and reports its value", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <RadioGroup aria-label="Plan" defaultValue="basic" onValueChange={onValueChange}>
+        <div><RadioGroupItem id="basic" value="basic" /><Label htmlFor="basic">Basic</Label></div>
+        <div><RadioGroupItem id="pro" value="pro" /><Label htmlFor="pro">Pro</Label></div>
+      </RadioGroup>,
+    );
+    expect(screen.getByRole("radiogroup", { name: "Plan" })).toBeTruthy();
+    expect(screen.getByRole("radio", { name: "Basic" })).toHaveAttribute("aria-checked", "true");
+    await userEvent.click(screen.getByText("Pro"));
+    expect(onValueChange).toHaveBeenLastCalledWith("pro");
+    expect(screen.getByRole("radio", { name: "Pro" })).toHaveAttribute("aria-checked", "true");
+    expect(screen.getByRole("radio", { name: "Basic" })).toHaveAttribute("aria-checked", "false");
+  });
+});

package/src/primitives/radio-group.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as React from "react";
+import { focusRing } from "../lib/focus";
+import { cn } from "../lib/utils";
+
+/**
+ * One choice from a set. Arrow keys move between items; pair each item with a
+ * `Label` through `id`/`htmlFor`. The item matches `Checkbox` (16px, the
+ * strong border, primary when chosen) so single and multiple choice lists
+ * read as one family.
+ */
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Root ref={ref} className={cn("grid gap-2", className)} {...props} />
+));
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Item
+    ref={ref}
+    className={cn(
+      "peer inline-grid size-4 shrink-0 cursor-pointer place-content-center rounded-full border border-[var(--border-strong)] bg-transparent transition-[border-color,box-shadow] duration-150 ease-out",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "aria-invalid:border-[var(--surface-danger-border)]",
+      "data-[state=checked]:border-primary",
+      focusRing,
+      className,
+    )}
+    {...props}
+  >
+    <RadioGroupPrimitive.Indicator className="size-2 rounded-full bg-primary" />
+  </RadioGroupPrimitive.Item>
+));
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

package/src/primitives/time-select.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import type { ControlSize } from "../lib/control-presentation";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+
+const TIME_PATTERN = /^([01]\d|2[0-3]):([0-5]\d)$/;
+
+export interface TimeSelectProps {
+  /** `HH:MM`, 24-hour, the value a native time input reports. */
+  value?: string;
+  onChange?: (value: string) => void;
+  /** Minutes between choices. Default 15. */
+  step?: number;
+  placeholder?: string;
+  size?: ControlSize;
+  disabled?: boolean;
+  locale?: string;
+  id?: string;
+  name?: string;
+  className?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+}
+
+/**
+ * A time of day as a Select on the control scale: the day in `step`-minute
+ * slots, labelled in the viewer's locale (9:30 AM, 21:30). A value between
+ * slots stays listed so the current time is never lost.
+ */
+const TimeSelect = React.forwardRef<HTMLButtonElement, TimeSelectProps>(
+  ({ value, onChange, step = 15, placeholder = "Pick a time", size = "md", disabled, locale, id, name, className, ...aria }, ref) => {
+    const format = React.useMemo(
+      () => new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit", timeZone: "UTC" }),
+      [locale],
+    );
+    const options = React.useMemo(() => {
+      const values: string[] = [];
+      for (let minutes = 0; minutes < 24 * 60; minutes += Math.max(1, step)) {
+        values.push(`${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}`);
+      }
+      if (value && TIME_PATTERN.test(value) && !values.includes(value)) values.push(value);
+      return values.sort();
+    }, [step, value]);
+    const label = (time: string) => {
+      const [hours, minutes] = time.split(":").map(Number);
+      return format.format(Date.UTC(1970, 0, 1, hours, minutes));
+    };
+
+    return (
+      <Select value={value && TIME_PATTERN.test(value) ? value : undefined} onValueChange={onChange} disabled={disabled} name={name}>
+        <SelectTrigger ref={ref} id={id} size={size} className={className} {...aria}>
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent className="max-h-72">
+          {options.map((time) => (
+            <SelectItem key={time} value={time}>{label(time)}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  },
+);
+TimeSelect.displayName = "TimeSelect";
+
+export { TimeSelect };

package/src/primitives/toolbar.tsx

@@ -47,7 +47,9 @@ const Toolbar = React.forwardRef<HTMLDivElement, ToolbarProps>(
     <div
       ref={ref}
       className={cn(
-        "mb-4 flex flex-col gap-3 lg:flex-row lg:items-center",
+        // Filters sit on the page canvas, where the recessed field well barely
+        // differs from the page. Raise every field inside onto the card surface.
+        "mb-4 flex flex-col gap-3 lg:flex-row lg:items-center [--field-surface:hsl(var(--card))]",
         className,
       )}
       {...props}