@tangle-network/ui 11.28.1 → 11.29.0

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";
 

package/src/primitives/input.tsx

@@ -13,7 +13,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 // and a Button at the same size share a height, text size and corner.
 const inputVariants = cva(
   cn(
-    "flex w-full border py-1 placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm",
+    "flex w-full border py-1 placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium",
     fieldPresentation,
     fieldTouchText,
   ),

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}