@blurrow/ui 0.1.0 → 0.2.0

package/dist/registry/Drawer.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import React, { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+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 ────────────────────────────────── */
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      return;
+    }
+    if (mounted) {
+      setVisible(false);
+      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 (
+    <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-white 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-neutral-900 tracking-[-0.015em] leading-snug"
+                  >
+                    {title}
+                  </h2>
+                )}
+                {description && (
+                  <p id={`${uid}-desc`} className="text-[13px] text-neutral-500 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-neutral-600 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: "linear-gradient(180deg, #fafafa 0%, #f6f6f6 100%)",
+                  boxShadow: "inset 0 1px 0 rgba(17,17,17,0.06)",
+                }}
+              >
+                {actions}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/registry/DropdownMenu.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+import React, { useState, useRef, useEffect, useId, useCallback, ReactNode } from "react";
+import { Kbd } from "./Kbd";
+
+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;
+}
+
+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,
+  position = "bottom-end",
+  onSelect,
+  className = "",
+}: DropdownMenuProps) {
+  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 uid = useId();
+
+  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();
+  };
+
+  /* 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]);
+
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      requestAnimationFrame(() =>
+        requestAnimationFrame(() => {
+          setVisible(true);
+          // Land on the first item so arrow keys work straight away
+          focusItem(0);
+        })
+      );
+    } else {
+      setVisible(false);
+      const t = setTimeout(() => setMounted(false), 180);
+      return () => clearTimeout(t);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    function onOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        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={() => {
+          if (!open) {
+            // Start each opening from the requested side; attachMenu flips if needed
+            setPlacement(position);
+            setShift(0);
+          }
+          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 && (
+        <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 }}
+        >
+          <div
+            className="bg-white 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 (
+                <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-red-600 focus:bg-red-50"
+                      : "text-neutral-700 focus:text-neutral-900 focus:bg-neutral-100/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",
+                      ].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>
+      )}
+    </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-white 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(rgba(17,17,17,0.07) 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%)",
+          }}
+        />
+        {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)" }}
+          >
+            {icon}
+          </div>
+        )}
+        <p className="relative text-[15px] font-semibold text-neutral-900 tracking-[-0.015em]">{title}</p>
+        {description && (
+          <p className="relative text-[13px] text-neutral-500 mt-1.5 max-w-xs leading-relaxed">{description}</p>
+        )}
+        {action && <div className="relative mt-6">{action}</div>}
+      </div>
+    </div>
+  );
+}

package/dist/registry/Input.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  hint?: string;
+  error?: string;
+  fullWidth?: boolean;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
+}
+
+/* Fields are sunken wells (see --field tokens in globals.css). Raised
+   means "press me", sunken means "fill me" — that is the whole system. */
+
+export function Input({
+  label,
+  hint,
+  error,
+  fullWidth = false,
+  iconLeft,
+  iconRight,
+  className = "",
+  id,
+  ...rest
+}: InputProps) {
+  const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+  const messageId = inputId && (error || hint) ? `${inputId}-message` : undefined;
+
+  return (
+    <div className={["group/field flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" ")}>
+      {label && (
+        <label
+          htmlFor={inputId}
+          className="text-[12.5px] font-medium text-neutral-700 tracking-[-0.005em] transition-colors duration-200 group-focus-within/field:text-neutral-950"
+        >
+          {label}
+        </label>
+      )}
+      <div className="relative group/input isolate">
+        {iconLeft && (
+          <span
+            className="absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400 transition-all duration-300 ease-[cubic-bezier(0.34,1.4,0.64,1)] group-focus-within/input:text-neutral-800 group-focus-within/input:scale-110 pointer-events-none z-20 flex items-center justify-center"
+          >
+            {iconLeft}
+          </span>
+        )}
+        <input
+          id={inputId}
+          className={[
+            "field relative z-10 w-full rounded-xl py-3 text-[13.5px] text-neutral-900 caret-neutral-900",
+            "placeholder:text-neutral-400 placeholder:transition-colors placeholder:duration-200 focus:placeholder:text-neutral-300",
+            "disabled:opacity-40 disabled:cursor-not-allowed",
+            iconLeft ? "pl-10" : "pl-4",
+            iconRight ? "pr-10" : "pr-4",
+            className,
+          ]
+            .filter(Boolean)
+            .join(" ")}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={messageId}
+          {...rest}
+        />
+        <span
+          aria-hidden
+          className="pointer-events-none absolute inset-0 z-15 rounded-xl overflow-hidden"
+        >
+          <span
+            className="block absolute inset-y-0 w-[30%] -left-[30%] opacity-0 group-focus-within/input:animate-input-shimmer"
+            style={{
+              background:
+                "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%)",
+            }}
+          />
+        </span>
+        {iconRight && (
+          <span
+            className="absolute right-3.5 top-1/2 -translate-y-1/2 text-neutral-400 transition-all duration-300 ease-[cubic-bezier(0.34,1.4,0.64,1)] group-focus-within/input:text-neutral-800 group-focus-within/input:scale-110 pointer-events-none z-20 flex items-center justify-center"
+          >
+            {iconRight}
+          </span>
+        )}
+      </div>
+      {error && (
+        <p id={messageId} role="alert" className="text-[11.5px] text-red-600 font-medium flex items-center gap-1 mt-0.5">
+          <svg width="11" height="11" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+            <circle cx="12" cy="12" r="10" />
+            <path strokeLinecap="round" d="M12 8v4m0 4h.01" />
+          </svg>
+          {error}
+        </p>
+      )}
+      {hint && !error && (
+        <p id={messageId} className="text-[11.5px] text-neutral-500 mt-0.5">{hint}</p>
+      )}
+    </div>
+  );
+}

package/dist/registry/Kbd.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+
+export function Kbd({
+  children,
+  className = "",
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <kbd
+      className={`inline-flex items-center justify-center min-w-[22px] h-[22px] px-1.5 rounded-md text-[11px] font-semibold text-neutral-500 ${className}`}
+      style={{
+        /* A keycap: lit top, solid 1.5px skirt below so it reads as pressable */
+        background: "var(--face-light)",
+        boxShadow:
+          "0 0 3px rgba(17,17,17,0.136), 0 1.5px 1px rgba(17,17,17,0.12), 0 2px 3px -1px rgba(17,17,17,0.1), inset 0 2px 3px -2px rgba(255,255,255,1)",
+        textShadow: "0 1px 0 rgba(255,255,255,0.9)",
+      }}
+    >
+      {children}
+    </kbd>
+  );
+}