@blurrow/ui 0.2.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

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Portal } from "./Floating";
 import { CloseButton } from "./CloseButton";
 import { useModalBehavior } from "./useModalBehavior";
 
@@ -42,16 +43,15 @@ export function Drawer({
   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) {
-      setMounted(true);
-      return;
-    }
-    if (mounted) {
-      setVisible(false);
-      const t = setTimeout(() => setMounted(false), EXIT_MS);
-      return () => clearTimeout(t);
-    }
+    if (open || !mounted) return;
+    const t = setTimeout(() => setMounted(false), EXIT_MS);
+    return () => clearTimeout(t);
   }, [open, mounted]);
 
   /* ── trigger enter animation after mount ────────────── */
@@ -70,6 +70,7 @@ export function Drawer({
   const isRight = side === "right";
 
   return (
+    <Portal>
     <div className="fixed inset-0 z-90">
       <div
         aria-hidden
@@ -117,7 +118,7 @@ export function Drawer({
           }}
         >
           <div
-            className="flex flex-col h-full bg-white rounded-[16px] overflow-hidden"
+            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">
@@ -125,13 +126,13 @@ export function Drawer({
                 {title && (
                   <h2
                     id={`${uid}-title`}
-                    className="text-[16px] font-semibold text-neutral-900 tracking-[-0.015em] leading-snug"
+                    className="text-[16px] font-semibold text-ink tracking-[-0.015em] leading-snug"
                   >
                     {title}
                   </h2>
                 )}
                 {description && (
-                  <p id={`${uid}-desc`} className="text-[13px] text-neutral-500 leading-relaxed">
+                  <p id={`${uid}-desc`} className="text-[13px] text-ink-muted leading-relaxed">
                     {description}
                   </p>
                 )}
@@ -140,7 +141,7 @@ export function Drawer({
             </div>
 
             {children && (
-              <div className="flex-1 overflow-y-auto scroll-thin px-6 pb-5 text-[13.5px] text-neutral-600 leading-relaxed">
+              <div className="flex-1 overflow-y-auto scroll-thin px-6 pb-5 text-[13.5px] text-ink-body leading-relaxed">
                 {children}
               </div>
             )}
@@ -149,8 +150,8 @@ export function Drawer({
               <div
                 className="mt-auto px-5 py-3.5 flex items-center justify-end gap-2 shrink-0"
                 style={{
-                  background: "linear-gradient(180deg, #fafafa 0%, #f6f6f6 100%)",
-                  boxShadow: "inset 0 1px 0 rgba(17,17,17,0.06)",
+                  background: "var(--panel-tray)",
+                  boxShadow: "inset 0 1px 0 var(--hairline)",
                 }}
               >
                 {actions}
@@ -160,5 +161,6 @@ export function Drawer({
         </div>
       </div>
     </div>
+    </Portal>
   );
 }

package/dist/registry/DropdownMenu.tsx

@@ -2,6 +2,7 @@
 
 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"
@@ -27,20 +28,6 @@ interface DropdownMenuProps {
   className?: string;
 }
 
-const positionStyles: Record<DropdownMenuPosition, string> = {
-  "bottom-start": "top-full left-0 mt-2 origin-top-left",
-  "bottom-end": "top-full right-0 mt-2 origin-top-right",
-  "top-start": "bottom-full left-0 mb-2 origin-bottom-left",
-  "top-end": "bottom-full right-0 mb-2 origin-bottom-right",
-};
-
-const enterFrom: Record<DropdownMenuPosition, string> = {
-  "bottom-start": "-translate-y-1.5",
-  "bottom-end": "-translate-y-1.5",
-  "top-start": "translate-y-1.5",
-  "top-end": "translate-y-1.5",
-};
-
 export function DropdownMenu({
   trigger,
   items,
@@ -51,15 +38,21 @@ export function DropdownMenu({
   const [open, setOpen] = useState(false);
   const [visible, setVisible] = useState(false);
   const [mounted, setMounted] = useState(false);
-  // Where the menu actually opens: the requested side unless that runs off-screen
-  const [placement, setPlacement] = useState(position);
-  const [shift, setShift] = useState(0);
   const ref = useRef<HTMLDivElement>(null);
-  const menuRef = 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 enabledItems = () => Array.from(menuRef.current?.querySelectorAll<HTMLElement>('[role="menuitem"]:not([disabled])') ?? []);
 
   const focusItem = (index: number) => {
     const list = enabledItems();
@@ -67,51 +60,20 @@ export function DropdownMenu({
     list[(index + list.length) % list.length].focus();
   };
 
-  /* Measured as soon as the menu is attached, before it fades in.
-     offsetWidth/Height ignore the enter transform, so the numbers are the
-     menu's settled size.                                                */
-  const attachMenu = useCallback((menu: HTMLDivElement | null) => {
-    menuRef.current = menu;
-    const anchor = ref.current;
-    if (!menu || !anchor) return;
-    const gap = 8;
-    const a = anchor.getBoundingClientRect();
-    const w = menu.offsetWidth;
-    const h = menu.offsetHeight;
-    const vw = document.documentElement.clientWidth;
-    const vh = window.innerHeight;
-
-    let [v, side] = position.split("-") as ["top" | "bottom", "start" | "end"];
-    const fitsStart = a.left + w <= vw - gap;
-    const fitsEnd = a.right - w >= gap;
-    if (side === "end" && !fitsEnd && fitsStart) side = "start";
-    else if (side === "start" && !fitsStart && fitsEnd) side = "end";
-
-    const fitsBelow = a.bottom + gap + h <= vh - gap;
-    const fitsAbove = a.top - gap - h >= gap;
-    if (v === "bottom" && !fitsBelow && fitsAbove) v = "top";
-    else if (v === "top" && !fitsAbove && fitsBelow) v = "bottom";
-
-    // Neither side fits (narrow screens): slide it back inside the viewport
-    const left = side === "start" ? a.left : a.right - w;
-    const nudge = Math.max(gap - left, 0) - Math.max(left + w - (vw - gap), 0);
-
-    setPlacement(`${v}-${side}` as DropdownMenuPosition);
-    setShift(nudge);
-  }, [position]);
+  /* 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) {
-      setMounted(true);
       requestAnimationFrame(() =>
         requestAnimationFrame(() => {
           setVisible(true);
           // Land on the first item so arrow keys work straight away
-          focusItem(0);
+          enabledItems()[0]?.focus();
         })
       );
     } else {
-      setVisible(false);
       const t = setTimeout(() => setMounted(false), 180);
       return () => clearTimeout(t);
     }
@@ -119,9 +81,9 @@ export function DropdownMenu({
 
   useEffect(() => {
     function onOutside(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
+      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);
@@ -174,11 +136,6 @@ export function DropdownMenu({
       <div
         data-menu-trigger
         onClick={() => {
-          if (!open) {
-            // Start each opening from the requested side; attachMenu flips if needed
-            setPlacement(position);
-            setShift(0);
-          }
           setOpen(!open);
         }}
         className="inline-flex cursor-pointer"
@@ -192,28 +149,32 @@ export function DropdownMenu({
           : trigger}
       </div>
       {mounted && (
+        <Portal>
         <div
           ref={attachMenu}
           id={`${uid}-menu`}
           role="menu"
           onKeyDown={onMenuKeyDown}
-          className={[
-            "absolute z-50 min-w-[200px] rounded-[16px] p-1.5",
-            "transition-[opacity,transform,scale,translate] duration-200 ease-[var(--ease-spring)]",
-            visible
-              ? "opacity-100 scale-100 translate-y-0"
-              : ["opacity-0 scale-[0.96]", enterFrom[placement]].join(" "),
-            positionStyles[placement],
-          ].join(" ")}
-          style={{ background: "var(--panel-bezel)", boxShadow: "var(--overlay-shadow)", marginLeft: shift || undefined }}
+          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-white rounded-[11px] p-1 flex flex-col"
+            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-neutral-100 my-1 mx-2" />;
+                return <div key={item.key} role="separator" className="h-px bg-line my-1 mx-2" />;
               }
 
               return (
@@ -230,15 +191,15 @@ export function DropdownMenu({
                     "transition-[background,color] duration-100",
                     "disabled:opacity-35 disabled:pointer-events-none",
                     item.danger
-                      ? "text-red-600 focus:bg-red-50"
-                      : "text-neutral-700 focus:text-neutral-900 focus:bg-neutral-100/80",
+                      ? "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-red-500" : "text-neutral-400 group-focus/item:text-neutral-700",
+                        item.danger ? "text-danger-soft" : "text-ink-faint group-focus/item:text-ink-label",
                       ].join(" ")}
                     >
                       {item.icon}
@@ -251,6 +212,7 @@ export function DropdownMenu({
             })}
           </div>
         </div>
+        </Portal>
       )}
     </div>
   );

package/dist/registry/EmptyState.tsx

@@ -21,7 +21,7 @@ export function EmptyState({
       style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
     >
       <div
-        className="relative bg-white rounded-[15px] overflow-hidden flex flex-col items-center justify-center text-center py-14 px-6"
+        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 */}
@@ -29,24 +29,24 @@ export function EmptyState({
           aria-hidden
           className="pointer-events-none absolute inset-0"
           style={{
-            backgroundImage: "radial-gradient(rgba(17,17,17,0.07) 1px, transparent 1px)",
+            backgroundImage: "radial-gradient(var(--dots) 1px, transparent 1px)",
             backgroundSize: "14px 14px",
-            maskImage: "radial-gradient(60% 70% at 50% 40%, #000 0%, transparent 100%)",
-            WebkitMaskImage: "radial-gradient(60% 70% at 50% 40%, #000 0%, transparent 100%)",
+            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-neutral-500 mb-5"
-            style={{ background: "var(--face-light)", boxShadow: "var(--face-light-shadow), 0 6px 16px -6px rgba(17,17,17,0.15)" }}
+            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-neutral-900 tracking-[-0.015em]">{title}</p>
+        <p className="relative text-[15px] font-semibold text-ink tracking-[-0.015em]">{title}</p>
         {description && (
-          <p className="relative text-[13px] text-neutral-500 mt-1.5 max-w-xs leading-relaxed">{description}</p>
+          <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>