@dowel-ui/react 0.7.0 → 0.8.0

package/src/components/code-block/code-block.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState, type ComponentPropsWithRef } from "react";
+import { useRef, type ComponentPropsWithRef } from "react";
 
+import { CopyButton } from "@/components/copy-button";
 import { focusRing } from "@/lib/styles";
 import { cn } from "@/lib/utils";
 
@@ -56,7 +57,15 @@ export function CodeBlock({
             {title ?? language}
           </span>
           {hideCopy ? null : (
-            <CopyButton getText={() => code ?? preRef.current?.textContent ?? ""} />
+            <CopyButton
+              value={() => code ?? preRef.current?.textContent ?? ""}
+              variant="ghost"
+              aria-label="Copy code"
+              className={cn(
+                "ms-auto size-6 rounded text-muted-foreground hover:text-foreground",
+                "[&_svg:not([class*='size-'])]:size-3.5",
+              )}
+            />
           )}
         </div>
       ) : null}
@@ -78,111 +87,3 @@ export function CodeBlock({
     </div>
   );
 }
-
-export interface CopyButtonProps extends Omit<ComponentPropsWithRef<"button">, "onClick"> {
-  getText: () => string;
-  label?: string;
-  copiedLabel?: string;
-  /** How long the confirmation stays, in milliseconds. */
-  resetAfter?: number;
-}
-
-/**
- * Copies text and confirms it.
- *
- * The confirmation is announced politely as well as shown — a checkmark that
- * only appears visually leaves a screen reader user with no idea whether the
- * button did anything. Failure is surfaced too, rather than silently looking
- * like success, since the clipboard API can be refused outright.
- */
-export function CopyButton({
-  className,
-  getText,
-  label = "Copy code",
-  copiedLabel = "Copied",
-  resetAfter = 2000,
-  ...props
-}: CopyButtonProps) {
-  const [state, setState] = useState<"idle" | "copied" | "error">("idle");
-  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(
-    () => () => {
-      if (timer.current) clearTimeout(timer.current);
-    },
-    [],
-  );
-
-  const copy = useCallback(() => {
-    const reset = () => {
-      if (timer.current) clearTimeout(timer.current);
-      timer.current = setTimeout(() => {
-        setState("idle");
-      }, resetAfter);
-    };
-
-    navigator.clipboard.writeText(getText()).then(
-      () => {
-        setState("copied");
-        reset();
-      },
-      () => {
-        // Refused by the browser or unavailable outside a secure context.
-        // Saying so beats pretending it worked.
-        setState("error");
-        reset();
-      },
-    );
-  }, [getText, resetAfter]);
-
-  return (
-    <button
-      type="button"
-      data-slot="copy-button"
-      data-state={state}
-      onClick={copy}
-      aria-label={label}
-      className={cn(
-        "ms-auto grid size-6 shrink-0 place-items-center rounded text-muted-foreground",
-        "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground",
-        focusRing,
-        className,
-      )}
-      {...props}
-    >
-      {state === "copied" ? (
-        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="size-3.5">
-          <path
-            d="m5 13 4 4L19 7"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      ) : (
-        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="size-3.5">
-          <rect
-            x="9"
-            y="9"
-            width="12"
-            height="12"
-            rx="2"
-            stroke="currentColor"
-            strokeWidth="2"
-          />
-          <path
-            d="M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-          />
-        </svg>
-      )}
-      {/* Announced, not just drawn. */}
-      <span role="status" aria-live="polite" className="sr-only">
-        {state === "copied" ? copiedLabel : state === "error" ? "Copy failed" : ""}
-      </span>
-    </button>
-  );
-}

package/src/components/code-block/index.ts

@@ -1 +1,4 @@
-export { CodeBlock, CopyButton, type CodeBlockProps, type CopyButtonProps } from "./code-block";
+export { CodeBlock, type CodeBlockProps } from "./code-block";
+// Code Block's copy control became the standalone Copy Button. Re-exported so
+// imports from this entry keep working; its old props are deprecated aliases.
+export { CopyButton, type CopyButtonProps } from "@/components/copy-button";

package/src/components/code-block/meta.ts

@@ -7,7 +7,7 @@ export const meta = defineMeta({
   category: "data",
   status: "stable",
   dependencies: [],
-  registryDependencies: [],
+  registryDependencies: ["copy-button"],
   files: ["code-block.tsx"],
   a11y:
     "The pre is a focusable named region, since code overflows horizontally and an unfocusable " +

package/src/components/combobox/combobox.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+// Motion from SmoothUI Combobox and SearchableDropdown (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
+
 import { Popover as PopoverPrimitive } from "radix-ui";
 import {
   createContext,
@@ -57,6 +59,7 @@ interface ComboboxContextValue {
   listRef: React.RefObject<HTMLDivElement | null>;
   registerVisible: (value: string, visible: boolean) => void;
   visibleCount: number;
+  loading: boolean;
 }
 
 const ComboboxContext = createContext<ComboboxContextValue | null>(null);
@@ -78,9 +81,42 @@ export interface ComboboxProps {
   onOpenChange?: (open: boolean) => void;
   /** Overrides how a search string is matched against an option. */
   filter?: (search: string, haystack: string[]) => boolean;
+  /**
+   * Set `false` when the options are already the results for the search — for
+   * example when `onSearchChange` fetches them — so they are not filtered twice.
+   */
+  shouldFilter?: boolean;
+  /** Called as the search text changes, including the reset when it closes. */
+  onSearchChange?: (search: string) => void;
+  /** Milliseconds of quiet typing before `onSearchChange` fires. */
+  searchDebounce?: number;
+  /**
+   * Results are on their way: the listbox is `aria-busy`, `ComboboxLoading`
+   * shows and `ComboboxEmpty` holds back, so "No results" never flashes first.
+   */
+  loading?: boolean;
+  /** Choosing the selected option again clears it, reporting `""`. */
+  allowDeselect?: boolean;
   children?: ReactNode;
 }
 
+/*
+ * Motion (SmoothUI's Combobox): options rise in, the first few a beat apart,
+ * and the trigger's chevron turns while open. Keyframes ship with the
+ * component (ADR 0014); every duration and delay runs on the motion scale.
+ */
+const ITEM_STAGGER = Array.from(
+  { length: 8 },
+  (_, index) =>
+    `[data-slot="combobox-item"]:nth-child(${String(index + 2)}){animation-delay:calc(${String((index + 1) * 20)}ms * var(--motion-scale, 1))}`,
+).join("");
+
+const ITEM_KEYFRAMES = `
+@keyframes dowel-combobox-item-in{from{opacity:0;transform:translateY(0.25rem)}}
+[data-slot="combobox-item"]{animation:dowel-combobox-item-in var(--duration-normal) var(--ease-out-quint) backwards}
+${ITEM_STAGGER}
+`;
+
 export function Combobox({
   value: valueProp,
   defaultValue,
@@ -88,10 +124,16 @@ export function Combobox({
   open: openProp,
   defaultOpen = false,
   onOpenChange,
-  filter = defaultComboboxFilter,
+  filter: filterProp = defaultComboboxFilter,
+  shouldFilter = true,
+  onSearchChange,
+  searchDebounce = 0,
+  loading = false,
+  allowDeselect = false,
   children,
 }: ComboboxProps) {
   const uid = useId();
+  const filter = shouldFilter ? filterProp : acceptAll;
 
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
   const value = valueProp === undefined ? uncontrolledValue : valueProp;
@@ -99,7 +141,37 @@ export function Combobox({
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
   const open = openProp === undefined ? uncontrolledOpen : openProp;
 
-  const [search, setSearch] = useState("");
+  const [search, setSearchState] = useState("");
+  const searchRef = useRef("");
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const onSearchChangeRef = useRef(onSearchChange);
+  useEffect(() => {
+    onSearchChangeRef.current = onSearchChange;
+  }, [onSearchChange]);
+
+  const setSearch = useCallback(
+    (next: string) => {
+      if (next === searchRef.current) return;
+      searchRef.current = next;
+      setSearchState(next);
+      clearTimeout(debounceRef.current);
+      if (searchDebounce <= 0) {
+        onSearchChangeRef.current?.(next);
+        return;
+      }
+      debounceRef.current = setTimeout(() => {
+        onSearchChangeRef.current?.(next);
+      }, searchDebounce);
+    },
+    [searchDebounce],
+  );
+
+  useEffect(
+    () => () => {
+      clearTimeout(debounceRef.current);
+    },
+    [],
+  );
   const [activeValue, setActiveValue] = useState<string | undefined>(undefined);
   const listRef = useRef<HTMLDivElement | null>(null);
 
@@ -128,16 +200,17 @@ export function Combobox({
         setActiveValue(undefined);
       }
     },
-    [openProp, onOpenChange],
+    [openProp, onOpenChange, setSearch],
   );
 
   const select = useCallback(
-    (next: string) => {
-      if (valueProp === undefined) setUncontrolledValue(next);
+    (chosen: string) => {
+      const next = allowDeselect && chosen === value ? "" : chosen;
+      if (valueProp === undefined) setUncontrolledValue(next || undefined);
       onValueChange?.(next);
       setOpen(false);
     },
-    [valueProp, onValueChange, setOpen],
+    [valueProp, onValueChange, setOpen, allowDeselect, value],
   );
 
   const context = useMemo<ComboboxContextValue>(
@@ -158,11 +231,14 @@ export function Combobox({
       listRef,
       registerVisible,
       visibleCount,
+      loading,
     }),
     [
       open,
       setOpen,
       search,
+      setSearch,
+      loading,
       value,
       select,
       activeValue,
@@ -182,6 +258,10 @@ export function Combobox({
   );
 }
 
+function acceptAll(): boolean {
+  return true;
+}
+
 export interface ComboboxTriggerProps extends ComponentPropsWithRef<"button"> {
   /** Shown when nothing is selected. */
   placeholder?: string;
@@ -219,7 +299,12 @@ export function ComboboxTrigger({
           viewBox="0 0 24 24"
           fill="none"
           aria-hidden="true"
-          className="size-4 shrink-0 opacity-60"
+          data-slot="combobox-chevron"
+          className={cn(
+            "size-4 shrink-0 opacity-60",
+            "transition-[rotate] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
+            open && "rotate-180",
+          )}
         >
           <path
             d="m7 10 5 5 5-5"
@@ -281,9 +366,15 @@ function visibleOptions(list: HTMLElement | null): HTMLElement[] {
   return Array.from(list.querySelectorAll<HTMLElement>('[role="option"]:not([data-disabled])'));
 }
 
-export type ComboboxInputProps = Omit<ComponentPropsWithRef<"input">, "value" | "onChange">;
+export interface ComboboxInputProps extends Omit<
+  ComponentPropsWithRef<"input">,
+  "value" | "onChange"
+> {
+  /** Shows a button that clears the search while there is text to clear. */
+  clearable?: boolean;
+}
 
-export function ComboboxInput({ className, ...props }: ComboboxInputProps) {
+export function ComboboxInput({ className, clearable = false, ...props }: ComboboxInputProps) {
   const {
     search,
     setSearch,
@@ -393,18 +484,49 @@ export function ComboboxInput({ className, ...props }: ComboboxInputProps) {
         )}
         {...props}
       />
+      {clearable && search ? (
+        <button
+          type="button"
+          data-slot="combobox-clear"
+          aria-label="Clear search"
+          // Keeps focus, and so aria-activedescendant, in the input.
+          onMouseDown={(event) => {
+            event.preventDefault();
+          }}
+          onClick={() => {
+            setSearch("");
+            setActiveValue(undefined);
+            inputRef.current?.focus();
+          }}
+          className={cn(
+            "-me-1 grid size-6 shrink-0 place-items-center rounded-sm opacity-60 hover:opacity-100",
+            "transition-opacity duration-[var(--duration-fast)]",
+            focusRing,
+          )}
+        >
+          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="size-3.5">
+            <path
+              d="M6 6l12 12M18 6 6 18"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+      ) : null}
     </div>
   );
 }
 
 export function ComboboxList({ className, ...props }: ComponentPropsWithRef<"div">) {
-  const { listId, listRef } = useCombobox("ComboboxList");
+  const { listId, listRef, loading } = useCombobox("ComboboxList");
 
   return (
     <div
       ref={listRef}
       id={listId}
       role="listbox"
+      aria-busy={loading || undefined}
       data-slot="combobox-list"
       className={cn("max-h-64 overflow-y-auto overscroll-contain p-1", className)}
       {...props}
@@ -508,6 +630,9 @@ export function ComboboxItem({
       )}
       {...props}
     >
+      <style href="dowel-combobox" precedence="dowel">
+        {ITEM_KEYFRAMES}
+      </style>
       {children ?? value}
       {selected ? (
         <span className="absolute end-2 grid size-4 place-items-center">
@@ -528,8 +653,8 @@ export function ComboboxItem({
 
 /** Shown only when the filter leaves nothing. */
 export function ComboboxEmpty({ className, children, ...props }: ComponentPropsWithRef<"div">) {
-  const { visibleCount } = useCombobox("ComboboxEmpty");
-  if (visibleCount > 0) return null;
+  const { visibleCount, loading } = useCombobox("ComboboxEmpty");
+  if (visibleCount > 0 || loading) return null;
 
   return (
     <div
@@ -542,3 +667,31 @@ export function ComboboxEmpty({ className, children, ...props }: ComponentPropsW
     </div>
   );
 }
+
+/**
+ * Shown only while `loading` is set on Combobox. Render it beside ComboboxList,
+ * as with ComboboxEmpty; pass a Spinner as a child if wanted.
+ */
+export function ComboboxLoading({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithRef<"div">) {
+  const { loading } = useCombobox("ComboboxLoading");
+  if (!loading) return null;
+
+  return (
+    <div
+      data-slot="combobox-loading"
+      role="status"
+      className={cn(
+        "flex items-center justify-center gap-2 px-3 py-6 text-sm text-muted-foreground",
+        "animate-float-in",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? "Loading…"}
+    </div>
+  );
+}

package/src/components/combobox/index.ts

@@ -5,6 +5,7 @@ export {
   ComboboxInput,
   ComboboxItem,
   ComboboxList,
+  ComboboxLoading,
   ComboboxTrigger,
   defaultComboboxFilter,
   type ComboboxContentProps,

package/src/components/combobox/meta.ts

@@ -13,5 +13,6 @@ export const meta = defineMeta({
     'The input owns role="combobox" with aria-expanded, aria-controls and aria-autocomplete; ' +
     'the list owns role="listbox" and each option role="option" with aria-selected. Focus stays ' +
     "in the input while arrow keys move aria-activedescendant, so typing is never interrupted. " +
-    "Arrow navigation wraps, Home/End jump, Enter selects the active option and Escape closes.",
+    "Arrow navigation wraps, Home/End jump, Enter selects the active option and Escape closes." +
+    " With loading set, the listbox is aria-busy, ComboboxLoading is a status and the empty state waits for the answer. The optional clear button is a named button that returns focus to the input.",
 });

package/src/components/command-bar/command-bar.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+// Original design (pattern inspired by bencho Command bar; no code referenced).
+import { cva, type VariantProps } from "class-variance-authority";
+import { useState, type FormEvent, type ReactNode } from "react";
+
+import {
+  PromptInput,
+  PromptInputSubmit,
+  PromptInputTextarea,
+  type PromptInputProps,
+} from "@/components/ai-prompt-input";
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * A single-row prompt bar: an auto-growing field, a dictate toggle and send.
+ *
+ * This is a compact composition of AI Prompt Input, not a second composer.
+ * Everything that is easy to get wrong — growing to a ceiling, Enter to send
+ * and Shift+Enter for a newline, never sending mid-IME-composition, the
+ * send/stop control whose name follows its state — is PromptInput's own. This
+ * adds only the layout (one pill row, controls aligned to the last line), a
+ * controlled-or-not value that clears after sending, an empty-field guard, and
+ * the dictate toggle (aria-pressed; the consumer owns the microphone).
+ */
+
+const commandBarVariants = cva("flex items-end gap-1 p-1.5", {
+  variants: {
+    shape: {
+      pill: "rounded-[1.5rem]",
+      rounded: "rounded-xl",
+    },
+  },
+  defaultVariants: { shape: "pill" },
+});
+
+export interface CommandBarProps
+  extends
+    Omit<PromptInputProps, "onSubmit" | "children" | "busy">,
+    VariantProps<typeof commandBarVariants> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** Called with the trimmed text. An uncontrolled bar then clears itself. */
+  onSend?: (value: string) => void;
+  /** A send is in flight: sending is blocked and the button becomes Stop. */
+  sending?: boolean;
+  onStop?: () => void;
+  /** Whether dictation is on. Omit `onDictatingChange` to hide the button. */
+  dictating?: boolean;
+  defaultDictating?: boolean;
+  onDictatingChange?: (dictating: boolean) => void;
+  placeholder?: string;
+  /** The field's accessible name. */
+  label?: string;
+  sendLabel?: string;
+  stopLabel?: string;
+  dictateLabel?: string;
+  /** Rows the field grows to before scrolling. */
+  maxRows?: number;
+  /** Slot before the field, e.g. an attach button. */
+  leading?: ReactNode;
+}
+
+function Mic() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className="size-4"
+    >
+      <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3ZM19 10v2a7 7 0 0 1-14 0v-2M12 19v3" />
+    </svg>
+  );
+}
+
+/** A compact prompt bar: auto-growing field, dictate toggle and send. */
+export function CommandBar({
+  className,
+  shape,
+  value: valueProp,
+  defaultValue = "",
+  onValueChange,
+  onSend,
+  sending = false,
+  onStop,
+  dictating: dictatingProp,
+  defaultDictating = false,
+  onDictatingChange,
+  placeholder = "Ask anything…",
+  label = "Message",
+  sendLabel = "Send",
+  stopLabel = "Stop",
+  dictateLabel = "Dictate",
+  maxRows = 6,
+  leading,
+  disabled = false,
+  ...props
+}: CommandBarProps) {
+  const [inner, setInner] = useState(defaultValue);
+  const value = valueProp ?? inner;
+  const [innerDictating, setInnerDictating] = useState(defaultDictating);
+  const dictating = dictatingProp ?? innerDictating;
+  const empty = value.trim() === "";
+
+  function setValue(next: string) {
+    if (valueProp === undefined) setInner(next);
+    onValueChange?.(next);
+  }
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (empty) return;
+    onSend?.(value.trim());
+    if (valueProp === undefined) setInner("");
+  }
+
+  return (
+    <PromptInput
+      data-slot="command-bar"
+      busy={sending}
+      disabled={disabled}
+      onSubmit={handleSubmit}
+      className={cn(commandBarVariants({ shape }), className)}
+      {...props}
+    >
+      {leading}
+      <PromptInputTextarea
+        aria-label={label}
+        placeholder={placeholder}
+        maxRows={maxRows}
+        value={value}
+        onChange={(event) => {
+          setValue(event.target.value);
+        }}
+        className="min-h-9 flex-1 px-2.5 py-2 leading-5"
+      />
+      {onDictatingChange || dictatingProp !== undefined ? (
+        <button
+          type="button"
+          aria-label={dictateLabel}
+          aria-pressed={dictating}
+          disabled={disabled}
+          data-slot="command-bar-dictate"
+          className={cn(
+            "grid size-9 shrink-0 place-items-center rounded-full text-muted-foreground",
+            "transition-[background-color,color] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]",
+            "hover:bg-accent hover:text-foreground aria-pressed:bg-destructive/12 aria-pressed:text-destructive",
+            "disabled:pointer-events-none disabled:opacity-55",
+            focusRing,
+          )}
+          onClick={() => {
+            if (dictatingProp === undefined) setInnerDictating(!dictating);
+            onDictatingChange?.(!dictating);
+          }}
+        >
+          <Mic />
+        </button>
+      ) : null}
+      <PromptInputSubmit
+        label={sendLabel}
+        stopLabel={stopLabel}
+        onStop={onStop}
+        disabled={disabled || (!sending && empty)}
+        className="ms-0 size-9 rounded-full"
+      />
+    </PromptInput>
+  );
+}
+
+export { commandBarVariants };

package/src/components/command-bar/index.ts

@@ -0,0 +1 @@
+export { CommandBar, commandBarVariants, type CommandBarProps } from "./command-bar";

package/src/components/command-bar/meta.ts

@@ -0,0 +1,17 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "command-bar",
+  title: "Command Bar",
+  description:
+    "A compact one-row prompt bar — auto-growing field, dictate toggle and send — composed from AI Prompt Input.",
+  category: "ai",
+  status: "beta",
+  dependencies: ["class-variance-authority"],
+  registryDependencies: ["ai-prompt-input"],
+  files: ["command-bar.tsx"],
+  a11y:
+    "Inherits AI Prompt Input's behaviour: Enter sends, Shift+Enter adds a newline, never mid-IME-composition, " +
+    'and the submit control renames itself to "Stop" while sending. The field is named by `label`. Send is ' +
+    "disabled while the field is empty. Dictate is a toggle button (aria-pressed); the consumer owns the microphone.",
+});