@blurrow/ui 0.1.0 → 0.2.1

package/dist/registry/DateRangePicker.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import React, { useId, useRef, useState } from "react";
+import { Calendar, CalendarIcon, ClearKey, DateRange, sameDay, startOfDay, toISODate } from "./DatePicker";
+import { Portal } from "./Floating";
+import { FieldLabel, FieldMessage } from "./FieldMessage";
+import { useFloatingPanel } from "./useFloatingPanel";
+
+export type { DateRange };
+
+export interface DateRangePreset {
+  label: string;
+  range: () => DateRange;
+}
+
+interface DateRangePickerProps {
+  value?: DateRange;
+  defaultValue?: DateRange;
+  onChange?: (range: DateRange) => void;
+  label?: string;
+  hint?: string;
+  error?: string;
+  placeholder?: string;
+  min?: Date;
+  max?: Date;
+  isDateDisabled?: (date: Date) => boolean;
+  weekStartsOn?: 0 | 1;
+  locale?: string;
+  /** Shortcuts down the side, like "last 7 days" */
+  presets?: DateRangePreset[];
+  /** One month instead of two side by side */
+  singleMonth?: boolean;
+  clearable?: boolean;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  /** Submits name[from] and name[to] as yyyy-mm-dd */
+  name?: string;
+  className?: string;
+}
+
+const EMPTY: DateRange = { from: null, to: null };
+
+/* The first click sets where the range starts, the second where it ends
+   (either way round), and the days between sink into a well as you hover.
+   Two months sit side by side, wrapping to one above the other on a
+   narrow screen.                                                    */
+export function DateRangePicker({
+  value,
+  defaultValue = EMPTY,
+  onChange,
+  label,
+  hint,
+  error,
+  placeholder = "pick dates",
+  min,
+  max,
+  isDateDisabled,
+  weekStartsOn,
+  locale = "en-US",
+  presets,
+  singleMonth = false,
+  clearable = false,
+  disabled = false,
+  fullWidth = false,
+  name,
+  className = "",
+}: DateRangePickerProps) {
+  const uid = useId();
+  const ref = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [internal, setInternal] = useState<DateRange>(defaultValue);
+  const range = value ?? internal;
+  // Mid-selection: the start is down, the end follows the pointer
+  const [draft, setDraft] = useState<Date | null>(null);
+  const [hover, setHover] = useState<Date | null>(null);
+  const { open, mounted, toggle, close, setFloating, panelStyle } = useFloatingPanel(ref, {
+    onEscape: () => buttonRef.current?.focus(),
+  });
+  const messageId = error || hint ? `${uid}-message` : undefined;
+
+  // Reset a half-made selection whenever the panel closes
+  const [wasOpen, setWasOpen] = useState(open);
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (!open) {
+      setDraft(null);
+      setHover(null);
+    }
+  }
+
+  const set = (r: DateRange) => {
+    setInternal(r);
+    onChange?.(r);
+  };
+
+  const pickDay = (d: Date) => {
+    if (!draft) {
+      setDraft(d);
+      return;
+    }
+    const [from, to] = d < draft ? [d, draft] : [draft, d];
+    set({ from, to });
+    setDraft(null);
+    close();
+    buttonRef.current?.focus();
+  };
+
+  // What the calendar shades: the finished range, or the one being drawn
+  const shown: DateRange = draft
+    ? hover && !sameDay(hover, draft)
+      ? hover < draft
+        ? { from: hover, to: draft }
+        : { from: draft, to: hover }
+      : { from: draft, to: draft }
+    : range;
+
+  const fmt = new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", year: "numeric" });
+  const text =
+    range.from && range.to
+      ? // formatRange drops the repeated month and year: "Aug 3 – 12, 2028"
+        fmt.formatRange(range.from, range.to)
+      : range.from
+        ? `${fmt.format(range.from)} –`
+        : null;
+
+  return (
+    <div className={["group/field flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" ")}>
+      {label && <FieldLabel id={`${uid}-label`}>{label}</FieldLabel>}
+      <div ref={ref} className={["relative", fullWidth ? "w-full" : "inline-block w-72", className].join(" ")}>
+        {/* The field's error styling keys off aria-invalid, as Input's does */}
+        {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}
+        <button
+          ref={buttonRef}
+          type="button"
+          disabled={disabled}
+          onClick={toggle}
+          aria-haspopup="dialog"
+          aria-expanded={open}
+          aria-labelledby={label ? `${uid}-label ${uid}-value` : undefined}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={messageId}
+          data-open={open || undefined}
+          className={[
+            "field group/date relative isolate flex w-full cursor-pointer items-center gap-2.5 rounded-xl py-3 pl-3.5 text-left text-[13.5px]",
+            clearable && range.from ? "pr-10" : "pr-4",
+            "focus:outline-none disabled:opacity-40 disabled:pointer-events-none",
+          ].join(" ")}
+        >
+          <CalendarIcon
+            className={[
+              "shrink-0 transition-[color,transform] duration-300 ease-[var(--ease-spring)]",
+              open ? "scale-110 text-ink-soft" : "text-ink-faint group-hover/date:text-ink-body",
+            ].join(" ")}
+          />
+          <span id={`${uid}-value`} className={["truncate tabular-nums", text ? "font-medium text-ink" : "text-ink-faint"].join(" ")}>
+            {text ?? placeholder}
+          </span>
+        </button>
+        {clearable && range.from && !disabled && (
+          <ClearKey
+            label="clear dates"
+            onClear={() => {
+              set(EMPTY);
+              buttonRef.current?.focus();
+            }}
+          />
+        )}
+        {name && (
+          <>
+            <input type="hidden" name={`${name}[from]`} value={range.from ? toISODate(range.from) : ""} />
+            <input type="hidden" name={`${name}[to]`} value={range.to ? toISODate(range.to) : ""} />
+          </>
+        )}
+      </div>
+
+      {mounted && (
+        <Portal>
+          <div
+            ref={setFloating}
+            role="dialog"
+            aria-label={label ? `choose ${label}` : "choose dates"}
+            className="max-w-[calc(100vw-16px)] rounded-[16px] p-1.5"
+            style={panelStyle}
+          >
+            <div
+              className="flex flex-col gap-3 rounded-[11px] bg-panel-face p-2.5 sm:flex-row"
+              style={{ boxShadow: "var(--panel-face-shadow)" }}
+            >
+              {presets && presets.length > 0 && (
+                <div className="flex shrink-0 flex-row flex-wrap gap-1 border-line-strong pb-2 sm:w-32 sm:flex-col sm:border-r sm:pb-0 sm:pr-2">
+                  {presets.map((p) => (
+                    <button
+                      key={p.label}
+                      type="button"
+                      onClick={() => {
+                        const r = p.range();
+                        set({ from: r.from && startOfDay(r.from), to: r.to && startOfDay(r.to) });
+                        close();
+                        buttonRef.current?.focus();
+                      }}
+                      className="cursor-pointer rounded-[8px] px-2.5 py-1.5 text-left text-[12.5px] text-ink-body transition-colors hover:bg-surface-active hover:text-ink focus-visible:outline-2 focus-visible:outline-ink"
+                    >
+                      {p.label}
+                    </button>
+                  ))}
+                </div>
+              )}
+              <div className="flex flex-col gap-2">
+                <Calendar
+                  range={shown}
+                  onChange={pickDay}
+                  onDayHover={setHover}
+                  months={singleMonth ? 1 : 2}
+                  min={min}
+                  max={max}
+                  isDateDisabled={isDateDisabled}
+                  weekStartsOn={weekStartsOn}
+                  locale={locale}
+                  autoFocus
+                />
+                <p aria-live="polite" className="px-1 text-[11.5px] text-ink-faint">
+                  {draft ? "now pick the last day" : "pick the first day"}
+                </p>
+              </div>
+            </div>
+          </div>
+        </Portal>
+      )}
+      <FieldMessage id={messageId} error={error} hint={hint} />
+    </div>
+  );
+}

package/dist/registry/Drawer.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import React, { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Portal } from "./Floating";
+import { CloseButton } from "./CloseButton";
+import { useModalBehavior } from "./useModalBehavior";
+
+interface DrawerProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  description?: string;
+  children?: React.ReactNode;
+  actions?: React.ReactNode;
+  side?: "left" | "right";
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+const ENTER_MS = 380;
+const EXIT_MS = 240;
+
+const sizeMap = {
+  sm: "max-w-xs",
+  md: "max-w-md",
+  lg: "max-w-lg",
+} as const;
+
+export function Drawer({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  actions,
+  side = "right",
+  size = "md",
+  className = "",
+}: DrawerProps) {
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const uid = useId();
+
+  /* ── mount / unmount ────────────────────────────────── */
+  /* Mounting on open and sliding out on close happen during render, so
+     neither waits for an extra commit; only the unmount is delayed */
+  if (open && !mounted) setMounted(true);
+  if (!open && visible) setVisible(false);
+
+  useEffect(() => {
+    if (open || !mounted) return;
+    const t = setTimeout(() => setMounted(false), EXIT_MS);
+    return () => clearTimeout(t);
+  }, [open, mounted]);
+
+  /* ── trigger enter animation after mount ────────────── */
+  useLayoutEffect(() => {
+    if (!mounted || !open || visible) return;
+    void panelRef.current?.getBoundingClientRect();
+    const id = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(id);
+  }, [mounted, open, visible]);
+
+  /* ── Escape, focus trap + restore, scroll lock ─────── */
+  useModalBehavior({ open, ready: visible, ref: panelRef, onClose });
+
+  if (!mounted) return null;
+
+  const isRight = side === "right";
+
+  return (
+    <Portal>
+    <div className="fixed inset-0 z-90">
+      <div
+        aria-hidden
+        className="absolute inset-0 backdrop-blur-[6px] transition-opacity ease-out"
+        style={{
+          background: "var(--scrim)",
+          opacity: visible ? 1 : 0,
+          transitionDuration: `${visible ? ENTER_MS : EXIT_MS}ms`,
+        }}
+        onClick={onClose}
+      />
+
+      {/* Floats a few px off the viewport edge so it reads as a panel, not a wall */}
+      <div
+        className={[
+          "absolute inset-y-0 w-full p-2 flex",
+          isRight ? "right-0 justify-end" : "left-0 justify-start",
+        ].join(" ")}
+        style={{ pointerEvents: "none" }}
+      >
+        <div
+          ref={panelRef}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={title ? `${uid}-title` : undefined}
+          aria-describedby={description ? `${uid}-desc` : undefined}
+          className={[
+            "relative h-full w-full rounded-[22px] p-1.5 flex flex-col pointer-events-auto",
+            sizeMap[size],
+            className,
+          ]
+            .filter(Boolean)
+            .join(" ")}
+          style={{
+            background: "var(--panel-bezel)",
+            boxShadow: "var(--modal-shadow)",
+            transform: visible
+              ? "translateX(0)"
+              : isRight
+                ? "translateX(calc(100% + 16px))"
+                : "translateX(calc(-100% - 16px))",
+            transition: `transform ${visible ? ENTER_MS : EXIT_MS}ms ${
+              visible ? "var(--ease-out-soft)" : "cubic-bezier(0.4,0,1,1)"
+            }`,
+          }}
+        >
+          <div
+            className="flex flex-col h-full bg-panel-face rounded-[16px] overflow-hidden"
+            style={{ boxShadow: "var(--panel-face-shadow)" }}
+          >
+            <div className="pl-6 pr-4 pt-5 pb-4 flex items-start gap-4 shrink-0">
+              <div className="flex-1 min-w-0 flex flex-col gap-1.5 pt-1">
+                {title && (
+                  <h2
+                    id={`${uid}-title`}
+                    className="text-[16px] font-semibold text-ink tracking-[-0.015em] leading-snug"
+                  >
+                    {title}
+                  </h2>
+                )}
+                {description && (
+                  <p id={`${uid}-desc`} className="text-[13px] text-ink-muted leading-relaxed">
+                    {description}
+                  </p>
+                )}
+              </div>
+              <CloseButton label="Close drawer" onClick={onClose} />
+            </div>
+
+            {children && (
+              <div className="flex-1 overflow-y-auto scroll-thin px-6 pb-5 text-[13.5px] text-ink-body leading-relaxed">
+                {children}
+              </div>
+            )}
+
+            {actions && (
+              <div
+                className="mt-auto px-5 py-3.5 flex items-center justify-end gap-2 shrink-0"
+                style={{
+                  background: "var(--panel-tray)",
+                  boxShadow: "inset 0 1px 0 var(--hairline)",
+                }}
+              >
+                {actions}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+    </Portal>
+  );
+}

package/dist/registry/DropdownMenu.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import React, { useState, useRef, useEffect, useId, useCallback, ReactNode } from "react";
+import { Kbd } from "./Kbd";
+import { ENTER_FROM, LAYER, Portal, useAnchoredPosition } from "./Floating";
+
+type DropdownMenuPosition =
+  | "bottom-start"
+  | "bottom-end"
+  | "top-start"
+  | "top-end";
+
+export interface DropdownMenuItem {
+  key: string;
+  label: string;
+  icon?: ReactNode;
+  shortcut?: string;
+  danger?: boolean;
+  disabled?: boolean;
+  divider?: boolean;
+}
+
+interface DropdownMenuProps {
+  trigger: ReactNode;
+  items: DropdownMenuItem[];
+  position?: DropdownMenuPosition;
+  onSelect?: (key: string) => void;
+  className?: string;
+}
+
+export function DropdownMenu({
+  trigger,
+  items,
+  position = "bottom-end",
+  onSelect,
+  className = "",
+}: DropdownMenuProps) {
+  const [open, setOpen] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  const uid = useId();
+  const [v, h] = position.split("-") as ["top" | "bottom", "start" | "end"];
+  // Portalled and pinned to the trigger; flips up or over when it runs out of room
+  const { setFloating, side } = useAnchoredPosition(ref, { open: mounted, side: v, align: h });
+  const attachMenu = useCallback(
+    (el: HTMLDivElement | null) => {
+      menuRef.current = el;
+      setFloating(el);
+    },
+    [setFloating],
+  );
+
+  const enabledItems = () => Array.from(menuRef.current?.querySelectorAll<HTMLElement>('[role="menuitem"]:not([disabled])') ?? []);
+
+  const focusItem = (index: number) => {
+    const list = enabledItems();
+    if (list.length === 0) return;
+    list[(index + list.length) % list.length].focus();
+  };
+
+  /* Mounted and faded out during render; the effect only times the rest */
+  if (open && !mounted) setMounted(true);
+  if (!open && visible) setVisible(false);
+
+  useEffect(() => {
+    if (open) {
+      requestAnimationFrame(() =>
+        requestAnimationFrame(() => {
+          setVisible(true);
+          // Land on the first item so arrow keys work straight away
+          enabledItems()[0]?.focus();
+        })
+      );
+    } else {
+      const t = setTimeout(() => setMounted(false), 180);
+      return () => clearTimeout(t);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    function onOutside(e: MouseEvent) {
+      const t = e.target as Node;
+      if (ref.current?.contains(t) || menuRef.current?.contains(t)) return;
+      setOpen(false);
+    }
+    document.addEventListener("mousedown", onOutside);
+    return () => document.removeEventListener("mousedown", onOutside);
+  }, []);
+
+  const returnFocus = () => {
+    ref.current?.querySelector<HTMLElement>("[data-menu-trigger] button, [data-menu-trigger] a")?.focus();
+  };
+
+  const onMenuKeyDown = (e: React.KeyboardEvent) => {
+    const list = enabledItems();
+    const at = list.indexOf(document.activeElement as HTMLElement);
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        focusItem(at + 1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        focusItem(at - 1);
+        break;
+      case "Home":
+        e.preventDefault();
+        focusItem(0);
+        break;
+      case "End":
+        e.preventDefault();
+        focusItem(list.length - 1);
+        break;
+      case "Escape":
+        e.preventDefault();
+        setOpen(false);
+        returnFocus();
+        break;
+      case "Tab":
+        setOpen(false);
+        break;
+    }
+  };
+
+  function handleSelect(item: DropdownMenuItem) {
+    if (item.disabled) return;
+    onSelect?.(item.key);
+    setOpen(false);
+    returnFocus();
+  }
+
+  return (
+    <div ref={ref} className={["relative inline-flex", className].join(" ")}>
+      <div
+        data-menu-trigger
+        onClick={() => {
+          setOpen(!open);
+        }}
+        className="inline-flex cursor-pointer"
+      >
+        {React.isValidElement(trigger)
+          ? React.cloneElement(trigger as React.ReactElement<Record<string, unknown>>, {
+              "aria-haspopup": "menu",
+              "aria-expanded": open,
+              "aria-controls": open ? `${uid}-menu` : undefined,
+            })
+          : trigger}
+      </div>
+      {mounted && (
+        <Portal>
+        <div
+          ref={attachMenu}
+          id={`${uid}-menu`}
+          role="menu"
+          onKeyDown={onMenuKeyDown}
+          className="min-w-[200px] rounded-[16px] p-1.5 transition-[opacity,transform] duration-200 ease-[var(--ease-spring)]"
+          style={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            zIndex: LAYER.floating,
+            transformOrigin: `${side === "top" ? "bottom" : "top"} ${h === "start" ? "left" : "right"}`,
+            opacity: visible ? 1 : 0,
+            transform: visible ? "none" : `${ENTER_FROM[side]} scale(0.96)`,
+            background: "var(--panel-bezel)",
+            boxShadow: "var(--overlay-shadow)",
+          }}
+        >
+          <div
+            className="bg-panel-face rounded-[11px] p-1 flex flex-col"
+            style={{ boxShadow: "var(--panel-face-shadow)" }}
+          >
+            {items.map((item) => {
+              if (item.divider) {
+                return <div key={item.key} role="separator" className="h-px bg-line my-1 mx-2" />;
+              }
+
+              return (
+                <button
+                  key={item.key}
+                  type="button"
+                  role="menuitem"
+                  tabIndex={-1}
+                  onClick={() => handleSelect(item)}
+                  onMouseEnter={(e) => e.currentTarget.focus()}
+                  disabled={item.disabled}
+                  className={[
+                    "group/item w-full flex items-center gap-2.5 px-2.5 py-2 rounded-[8px] text-[13px] font-medium cursor-pointer outline-none",
+                    "transition-[background,color] duration-100",
+                    "disabled:opacity-35 disabled:pointer-events-none",
+                    item.danger
+                      ? "text-danger focus:bg-danger-wash"
+                      : "text-ink-label focus:text-ink focus:bg-surface-active/80",
+                  ].join(" ")}
+                >
+                  {item.icon && (
+                    <span
+                      className={[
+                        "shrink-0 w-4 h-4 flex items-center justify-center transition-colors duration-100",
+                        item.danger ? "text-danger-soft" : "text-ink-faint group-focus/item:text-ink-label",
+                      ].join(" ")}
+                    >
+                      {item.icon}
+                    </span>
+                  )}
+                  <span className="flex-1 text-left">{item.label}</span>
+                  {item.shortcut && <Kbd className="shrink-0">{item.shortcut}</Kbd>}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+        </Portal>
+      )}
+    </div>
+  );
+}

package/dist/registry/EmptyState.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+interface EmptyStateProps {
+  icon?: React.ReactNode;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  className?: string;
+}
+
+export function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className = "",
+}: EmptyStateProps) {
+  return (
+    <div
+      className={["rounded-[20px] p-1.5", className].filter(Boolean).join(" ")}
+      style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
+    >
+      <div
+        className="relative bg-panel-face rounded-[15px] overflow-hidden flex flex-col items-center justify-center text-center py-14 px-6"
+        style={{ boxShadow: "var(--panel-face-shadow)" }}
+      >
+        {/* A faint dotted floor: the space is empty, not broken */}
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-0"
+          style={{
+            backgroundImage: "radial-gradient(var(--dots) 1px, transparent 1px)",
+            backgroundSize: "14px 14px",
+            maskImage: "radial-gradient(60% 70% at 50% 40%, black 0%, transparent 100%)",
+            WebkitMaskImage: "radial-gradient(60% 70% at 50% 40%, black 0%, transparent 100%)",
+          }}
+        />
+        {icon && (
+          <div
+            aria-hidden
+            className="relative w-12 h-12 rounded-[14px] flex items-center justify-center text-ink-muted mb-5"
+            style={{ background: "var(--face)", boxShadow: "var(--face-shadow), var(--face-drop)" }}
+          >
+            {icon}
+          </div>
+        )}
+        <p className="relative text-[15px] font-semibold text-ink tracking-[-0.015em]">{title}</p>
+        {description && (
+          <p className="relative text-[13px] text-ink-muted mt-1.5 max-w-xs leading-relaxed">{description}</p>
+        )}
+        {action && <div className="relative mt-6">{action}</div>}
+      </div>
+    </div>
+  );
+}