@blurrow/ui 0.1.0 → 0.2.1

package/dist/registry/Combobox.tsx

@@ -0,0 +1,318 @@
+"use client";
+
+import React, { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Portal } from "./Floating";
+import { FieldLabel, FieldMessage } from "./FieldMessage";
+import { useFloatingPanel } from "./useFloatingPanel";
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  /** A second, quieter line under the label */
+  description?: string;
+  /** Extra words to match on that aren't shown */
+  keywords?: string[];
+  disabled?: boolean;
+}
+
+interface ComboboxProps {
+  options: ComboboxOption[];
+  value?: string | null;
+  defaultValue?: string | null;
+  onChange?: (value: string | null) => void;
+  placeholder?: string;
+  label?: string;
+  hint?: string;
+  error?: string;
+  /** Shown when nothing matches */
+  emptyText?: string;
+  /** Replace the default "contains" match */
+  filter?: (option: ComboboxOption, query: string) => boolean;
+  /** Show a key that empties the field */
+  clearable?: boolean;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  name?: string;
+  className?: string;
+}
+
+const defaultFilter = (o: ComboboxOption, q: string) => {
+  const hay = [o.label, o.description ?? "", ...(o.keywords ?? [])].join(" ").toLowerCase();
+  return q
+    .toLowerCase()
+    .split(/\s+/)
+    .filter(Boolean)
+    .every((word) => hay.includes(word));
+};
+
+/* Bolds the part of the label that matched what was typed */
+function Highlight({ text, query }: { text: string; query: string }) {
+  const q = query.trim().toLowerCase();
+  const at = q ? text.toLowerCase().indexOf(q) : -1;
+  if (at < 0) return <>{text}</>;
+  return (
+    <>
+      {text.slice(0, at)}
+      <mark className="bg-transparent font-semibold text-ink">{text.slice(at, at + q.length)}</mark>
+      {text.slice(at + q.length)}
+    </>
+  );
+}
+
+/* A Select you can type into. The field filters the list as you go,
+   arrows walk the matches, Enter picks one, and leaving the field puts
+   the chosen label back if what you typed didn't match anything.     */
+export function Combobox({
+  options,
+  value,
+  defaultValue = null,
+  onChange,
+  placeholder = "search…",
+  label,
+  hint,
+  error,
+  emptyText = "nothing matches",
+  filter = defaultFilter,
+  clearable = false,
+  disabled = false,
+  fullWidth = false,
+  name,
+  className = "",
+}: ComboboxProps) {
+  const uid = useId();
+  const ref = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const [internal, setInternal] = useState<string | null>(defaultValue);
+  const selectedValue = value !== undefined ? value : internal;
+  const selected = options.find((o) => o.value === selectedValue) ?? null;
+  const [query, setQuery] = useState<string | null>(null); // null: not typing, show the selection
+  const [active, setActive] = useState(0);
+  const { open, mounted, show, close, setFloating, panelStyle } = useFloatingPanel(ref, {
+    matchWidth: true,
+    onEscape: () => setQuery(null),
+  });
+  const messageId = error || hint ? `${uid}-message` : undefined;
+
+  const matches = useMemo(
+    () => (query ? options.filter((o) => filter(o, query)) : options),
+    [options, query, filter],
+  );
+
+  useEffect(() => {
+    if (!open) return;
+    listRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [open, active]);
+
+  const pick = (o: ComboboxOption | null) => {
+    if (o?.disabled) return;
+    setInternal(o?.value ?? null);
+    onChange?.(o?.value ?? null);
+    setQuery(null);
+    close();
+  };
+
+  const openList = () => {
+    if (open || disabled) return;
+    const i = matches.findIndex((o) => o.value === selectedValue);
+    setActive(Math.max(0, i));
+    show();
+  };
+
+  const step = (dir: 1 | -1) => {
+    if (!matches.length) return;
+    let i = active;
+    for (let n = 0; n < matches.length; n++) {
+      i = (i + dir + matches.length) % matches.length;
+      if (!matches[i].disabled) break;
+    }
+    setActive(i);
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!open) openList();
+        else step(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (!open) openList();
+        else step(-1);
+        break;
+      case "Enter":
+        if (open && matches[active]) {
+          e.preventDefault();
+          pick(matches[active]);
+        }
+        break;
+      case "Tab":
+        if (open) close();
+        break;
+    }
+  };
+
+  const shownText = query ?? selected?.label ?? "";
+  const showClear = clearable && !!selected && !disabled;
+
+  return (
+    <div className={["group/field flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" ")}>
+      {label && (
+        <FieldLabel id={`${uid}-label`} htmlFor={`${uid}-input`}>
+          {label}
+        </FieldLabel>
+      )}
+      {/* Closed, it reads exactly like Select: the chosen label and a
+          chevron. Focus it and it turns into a field you type into.  */}
+      <div ref={ref} className={["group/combo relative isolate", fullWidth ? "w-full" : "w-60", className].join(" ")}>
+        <input
+          ref={inputRef}
+          id={`${uid}-input`}
+          role="combobox"
+          aria-expanded={open}
+          aria-controls={`${uid}-list`}
+          aria-autocomplete="list"
+          aria-activedescendant={open && matches[active] ? `${uid}-opt-${active}` : undefined}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={messageId}
+          autoComplete="off"
+          spellCheck={false}
+          disabled={disabled}
+          placeholder={selected?.label ?? placeholder}
+          value={shownText}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            setActive(0);
+            if (!open) show();
+          }}
+          onClick={openList}
+          // typing replaces the chosen label instead of adding to it
+          onFocus={(e) => e.target.select()}
+          onKeyDown={onKeyDown}
+          onBlur={() => {
+            setQuery(null);
+            if (open) close();
+          }}
+          data-open={open || undefined}
+          className={[
+            "field relative z-10 w-full rounded-xl py-3 pl-4 text-[13.5px] font-medium text-ink caret-ink",
+            "placeholder:font-normal placeholder:text-ink-faint focus:placeholder:text-ink-ghost",
+            "disabled:opacity-40 disabled:cursor-not-allowed",
+            open ? "cursor-text" : "cursor-pointer",
+            showClear ? "pr-[60px]" : "pr-10",
+          ].join(" ")}
+        />
+
+        {/* Input's sweep of light as the field comes up */}
+        <span aria-hidden className="pointer-events-none absolute inset-0 z-15 overflow-hidden rounded-xl">
+          <span
+            className="absolute inset-y-0 -left-[30%] block w-[30%] opacity-0 group-focus-within/combo:animate-input-shimmer"
+            style={{ background: "linear-gradient(90deg, transparent 0%, var(--shimmer) 50%, transparent 100%)" }}
+          />
+        </span>
+
+        {showClear && (
+          <button
+            type="button"
+            aria-label="clear"
+            tabIndex={-1}
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={() => pick(null)}
+            className={[
+              "absolute right-9 top-1/2 z-20 grid h-[18px] w-[18px] -translate-y-1/2 cursor-pointer place-items-center rounded-full",
+              "text-ink-faint transition-[opacity,color,background-color] duration-150 hover:bg-surface-active hover:text-ink",
+              "opacity-0 group-hover/combo:opacity-100 group-focus-within/combo:opacity-100",
+            ].join(" ")}
+          >
+            <svg aria-hidden width="9" height="9" fill="none" stroke="currentColor" strokeWidth="2.75" viewBox="0 0 24 24">
+              <path strokeLinecap="round" d="M6 6l12 12M18 6L6 18" />
+            </svg>
+          </button>
+        )}
+
+        <svg
+          aria-hidden
+          width="14"
+          height="14"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          className={[
+            "pointer-events-none absolute right-4 top-1/2 z-20 -mt-[7px] transition-[transform,color] duration-300 ease-[var(--ease-spring)]",
+            open ? "rotate-180 text-ink" : "text-ink-faint group-hover/combo:text-ink-label",
+          ].join(" ")}
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+        </svg>
+        {name && <input type="hidden" name={name} value={selectedValue ?? ""} />}
+      </div>
+
+      {mounted && (
+        <Portal>
+          <div
+            ref={setFloating}
+            className="rounded-[16px] p-1.5"
+            style={{ ...panelStyle, maxWidth: "min(420px, calc(100vw - 16px))" }}
+          >
+            <div
+              ref={listRef}
+              id={`${uid}-list`}
+              role="listbox"
+              aria-labelledby={label ? `${uid}-label` : undefined}
+              // keeps focus in the field, even when the scrollbar is dragged
+              onMouseDown={(e) => e.preventDefault()}
+              className="flex max-h-72 flex-col gap-0.5 overflow-y-auto rounded-[11px] bg-panel-face p-1 scroll-thin"
+              style={{ boxShadow: "var(--panel-face-shadow)" }}
+            >
+              {matches.length === 0 && (
+                <div role="presentation" className="px-2.5 py-2 text-[13px] text-ink-faint">
+                  {emptyText}
+                </div>
+              )}
+              {matches.map((o, i) => {
+                const isSel = o.value === selectedValue;
+                const isActive = i === active;
+                return (
+                  <div
+                    key={o.value}
+                    id={`${uid}-opt-${i}`}
+                    data-index={i}
+                    role="option"
+                    aria-selected={isSel}
+                    aria-disabled={o.disabled || undefined}
+                    onClick={() => pick(o)}
+                    onMouseMove={() => !o.disabled && setActive(i)}
+                    className={[
+                      "flex w-full items-center justify-between gap-3 rounded-[8px] px-2.5 py-2 text-[13px] transition-colors duration-100",
+                      o.disabled ? "cursor-not-allowed opacity-40" : "cursor-pointer",
+                      isSel ? "font-medium" : "",
+                      // one ink per state, as in Select
+                      isSel || isActive ? "text-ink" : "text-ink-body",
+                      isActive ? "bg-surface-active/80" : "",
+                    ].join(" ")}
+                    style={{ animation: `select-option-in 300ms var(--ease-out-soft) ${40 + Math.min(i, 8) * 22}ms both` }}
+                  >
+                    <span className="flex min-w-0 flex-col gap-px">
+                      <span className="truncate">
+                        <Highlight text={o.label} query={query ?? ""} />
+                      </span>
+                      {o.description && <span className="truncate text-[11.5px] font-normal text-ink-faint">{o.description}</span>}
+                    </span>
+                    {isSel && (
+                      <svg aria-hidden className="shrink-0 text-ink" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                      </svg>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </Portal>
+      )}
+      <FieldMessage id={messageId} error={error} hint={hint} />
+    </div>
+  );
+}

package/dist/registry/CommandPalette.tsx

@@ -0,0 +1,356 @@
+"use client";
+
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useMemo,
+  useCallback,
+  useId,
+} from "react";
+import { Portal } from "./Floating";
+import { Kbd } from "./Kbd";
+import { useModalBehavior } from "./useModalBehavior";
+
+interface CommandItem {
+  key: string;
+  label: string;
+  description?: string;
+  icon?: React.ReactNode;
+  shortcut?: string;
+  onSelect?: () => void;
+}
+
+interface CommandSection {
+  title: string;
+  items: CommandItem[];
+}
+
+interface CommandPaletteProps {
+  open: boolean;
+  onClose: () => void;
+  sections: CommandSection[];
+  placeholder?: string;
+  className?: string;
+}
+
+const CLOSE_MS = 240;
+
+export function CommandPalette({
+  open,
+  onClose,
+  sections,
+  placeholder = "search commands…",
+  className = "",
+}: CommandPaletteProps) {
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const uid = useId();
+
+  // Filter sections based on query
+  const filtered = useMemo(() => {
+    const q = query.toLowerCase().trim();
+    if (!q) return sections;
+    return sections
+      .map((section) => ({
+        ...section,
+        items: section.items.filter(
+          (item) =>
+            item.label.toLowerCase().includes(q) ||
+            item.description?.toLowerCase().includes(q),
+        ),
+      }))
+      .filter((section) => section.items.length > 0);
+  }, [sections, query]);
+
+  // Flat list of all visible items for keyboard nav
+  const flatItems = useMemo(
+    () => filtered.flatMap((s) => s.items),
+    [filtered],
+  );
+
+  // Mount / unmount lifecycle (matches Modal pattern); every opening starts fresh
+  const [wasOpen, setWasOpen] = useState(false);
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (open) {
+      setMounted(true);
+      setQuery("");
+      setActiveIndex(0);
+    } else {
+      setVisible(false);
+    }
+  }
+
+  useEffect(() => {
+    if (open || !mounted) return;
+    const t = setTimeout(() => setMounted(false), CLOSE_MS);
+    return () => clearTimeout(t);
+  }, [open, mounted]);
+
+  // Enter animation (matches Modal pattern)
+  useLayoutEffect(() => {
+    if (!mounted || !open || visible) return;
+
+    const el = dialogRef.current;
+    if (el) {
+      void el.getBoundingClientRect();
+    }
+
+    const id = requestAnimationFrame(() => {
+      setVisible(true);
+    });
+    return () => cancelAnimationFrame(id);
+  }, [mounted, open, visible]);
+
+  // Reset active index when filter changes
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [query]);
+
+  // Scroll active item into view
+  useEffect(() => {
+    if (!listRef.current) return;
+    const activeEl = listRef.current.querySelector(
+      `[data-command-index="${activeIndex}"]`,
+    );
+    if (activeEl) {
+      activeEl.scrollIntoView({ block: "nearest" });
+    }
+  }, [activeIndex]);
+
+  // Handle selection
+  const handleSelect = useCallback(
+    (item: CommandItem) => {
+      item.onSelect?.();
+      onClose();
+    },
+    [onClose],
+  );
+
+  // Keyboard navigation
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setActiveIndex((i) => (i + 1 >= flatItems.length ? 0 : i + 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setActiveIndex((i) =>
+            i - 1 < 0 ? Math.max(flatItems.length - 1, 0) : i - 1,
+          );
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (flatItems[activeIndex]) {
+            handleSelect(flatItems[activeIndex]);
+          }
+          break;
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose, flatItems, activeIndex, handleSelect]);
+
+  // Escape, focus trap + restore, scroll lock
+  useModalBehavior({ open, ready: visible, ref: dialogRef, onClose, initialFocus: inputRef });
+
+  if (!mounted) return null;
+
+  let itemIndex = 0;
+
+  return (
+    <Portal>
+    <div className="fixed inset-0 z-90 flex items-start justify-center pt-[min(20vh,140px)] px-4">
+      {/* Backdrop */}
+      <div
+        className={[
+          "absolute inset-0 backdrop-blur-[6px]",
+          "transition-opacity ease-out",
+          visible ? "opacity-100 duration-300" : "opacity-0 duration-200",
+        ].join(" ")}
+        style={{ background: "var(--scrim)" }}
+        aria-hidden
+        onClick={onClose}
+      />
+
+      {/* Palette panel */}
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Command palette"
+        className={[
+          "relative z-10 w-full max-w-lg rounded-[20px] p-1.5 overflow-hidden",
+          "transition-[opacity,transform,scale,translate] ease-[var(--ease-spring)]",
+          visible
+            ? "opacity-100 scale-100 translate-y-0 duration-300"
+            : "opacity-0 scale-[0.94] translate-y-3 duration-200",
+          className,
+        ]
+          .filter(Boolean)
+          .join(" ")}
+        style={{ background: "var(--panel-bezel)", boxShadow: "var(--modal-shadow)" }}
+      >
+        <div
+          className="bg-panel-face rounded-[14px] overflow-hidden"
+          style={{ boxShadow: "var(--panel-face-shadow)" }}
+        >
+          {/* Search input */}
+          <div className="flex items-center gap-3 px-4 py-3.5">
+            <svg
+              className="shrink-0 text-ink-faint"
+              width="14"
+              height="14"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.75"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"
+              />
+            </svg>
+            <input
+              ref={inputRef}
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder={placeholder}
+              role="combobox"
+              aria-expanded="true"
+              aria-controls={`${uid}-list`}
+              aria-activedescendant={flatItems[activeIndex] ? `${uid}-item-${activeIndex}` : undefined}
+              aria-autocomplete="list"
+              className="flex-1 min-w-0 text-[14.5px] font-medium text-ink placeholder:text-ink-faint placeholder:font-normal bg-transparent border-none outline-none"
+            />
+            <Kbd className="shrink-0">esc</Kbd>
+          </div>
+
+          {/* Separator */}
+          <div className="border-b border-line" />
+
+          {/* Results */}
+          <div
+            ref={listRef}
+            id={`${uid}-list`}
+            role="listbox"
+            className="max-h-[340px] overflow-y-auto scroll-thin py-2 px-2"
+          >
+            {filtered.length === 0 ? (
+              <div className="py-10 flex flex-col items-center gap-1 text-center">
+                <p className="text-[13px] font-medium text-ink-label">
+                  nothing for &ldquo;{query}&rdquo;
+                </p>
+                <p className="text-[12px] text-ink-faint">try a shorter or different word.</p>
+              </div>
+            ) : (
+              filtered.map((section, si) => (
+                <div key={section.title} role="group" aria-label={section.title} className={si > 0 ? "mt-3" : ""}>
+                  <div aria-hidden className="px-3 py-1.5 text-[11.5px] font-medium text-ink-faint lowercase select-none">
+                    {section.title}
+                  </div>
+                  <div className="flex flex-col gap-0.5">
+                    {section.items.map((item) => {
+                      const currentIndex = itemIndex++;
+                      const isActive = currentIndex === activeIndex;
+                      return (
+                        <div
+                          key={item.key}
+                          id={`${uid}-item-${currentIndex}`}
+                          role="option"
+                          aria-selected={isActive}
+                          data-command-index={currentIndex}
+                          onClick={() => handleSelect(item)}
+                          onMouseMove={() => setActiveIndex(currentIndex)}
+                          className={[
+                            "group/cmd flex items-center gap-3 w-full text-left px-3 py-2 rounded-[10px] cursor-pointer",
+                            "transition-[background,box-shadow] duration-100",
+                            isActive ? "bg-surface-hover" : "",
+                          ].join(" ")}
+                          style={{ boxShadow: isActive ? "var(--panel-face-shadow)" : undefined }}
+                        >
+                          {item.icon && (
+                            <span
+                              className={[
+                                "shrink-0 w-7 h-7 rounded-[8px] flex items-center justify-center transition-colors duration-100",
+                                isActive ? "text-ink" : "text-ink-muted",
+                              ].join(" ")}
+                              style={{ background: "var(--face)", boxShadow: "var(--face-shadow)" }}
+                            >
+                              {item.icon}
+                            </span>
+                          )}
+                          <div className="flex-1 min-w-0 flex flex-col">
+                            <span className="text-[13px] font-medium text-ink truncate">
+                              {item.label}
+                            </span>
+                            {item.description && (
+                              <span className="text-[12px] text-ink-muted truncate">
+                                {item.description}
+                              </span>
+                            )}
+                          </div>
+                          {item.shortcut && <Kbd className="shrink-0">{item.shortcut}</Kbd>}
+                          {!item.shortcut && (
+                            <svg
+                              aria-hidden
+                              width="12"
+                              height="12"
+                              fill="none"
+                              stroke="currentColor"
+                              strokeWidth="2"
+                              viewBox="0 0 24 24"
+                              className={[
+                                "shrink-0 text-ink-faint transition-all duration-150",
+                                isActive ? "opacity-100 translate-x-0" : "opacity-0 -translate-x-1",
+                              ].join(" ")}
+                            >
+                              <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                            </svg>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+
+          {/* Key hints — teach the palette while it's open */}
+          <div
+            className="flex items-center gap-4 px-4 py-2.5 border-t border-line text-[11.5px] text-ink-muted select-none"
+            style={{ background: "var(--palette-tray)" }}
+          >
+            <span className="inline-flex items-center gap-1.5">
+              <Kbd>↑</Kbd>
+              <Kbd>↓</Kbd>
+              Navigate
+            </span>
+            <span className="inline-flex items-center gap-1.5">
+              <Kbd>↵</Kbd>
+              Open
+            </span>
+            <span className="ml-auto tabular-nums text-ink-faint">
+              {flatItems.length} {flatItems.length === 1 ? "result" : "results"}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    </Portal>
+  );
+}