@birdycom/omniaui-react 0.11.0 → 0.11.2

package/src/components/Collapsible.tsx

@@ -1,43 +1,43 @@
-"use client";
-
-import { forwardRef } from "react";
-import type { DetailsHTMLAttributes, ReactNode, SyntheticEvent } from "react";
-import { cx } from "../utils";
-import { useControllable } from "../hooks";
-
-export interface CollapsibleProps extends Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "title" | "open" | "onToggle"> {
-  /** Summary text (`oc-collapsible-title`). */
-  title: ReactNode;
-  /** Optional leading icon, e.g. an inline `<svg className="oc-collapsible-icon">`. */
-  icon?: ReactNode;
-  /** Compact paddings. */
-  dense?: boolean;
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-}
-
-/** `<details class="oc-collapsible">` card-style section. */
-export const Collapsible = forwardRef<HTMLDetailsElement, CollapsibleProps>(function Collapsible(
-  { title, icon, dense, open, defaultOpen, onOpenChange, className, children, ...rest },
-  ref,
-) {
-  const [isOpen, setOpen] = useControllable<boolean>(open, defaultOpen ?? false, onOpenChange);
-  return (
-    <details
-      ref={ref}
-      className={cx("oc-collapsible", dense && "oc-collapsible--dense", className)}
-      open={isOpen}
-      onToggle={(e: SyntheticEvent<HTMLDetailsElement>) => {
-        if (e.currentTarget.open !== isOpen) setOpen(e.currentTarget.open);
-      }}
-      {...rest}
-    >
-      <summary>
-        {icon}
-        <span className="oc-collapsible-title">{title}</span>
-      </summary>
-      <div className="oc-collapsible-content">{children}</div>
-    </details>
-  );
-});
+"use client";
+
+import { forwardRef } from "react";
+import type { DetailsHTMLAttributes, ReactNode, SyntheticEvent } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export interface CollapsibleProps extends Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "title" | "open" | "onToggle"> {
+  /** Summary text (`oc-collapsible-title`). */
+  title: ReactNode;
+  /** Optional leading icon, e.g. an inline `<svg className="oc-collapsible-icon">`. */
+  icon?: ReactNode;
+  /** Compact paddings. */
+  dense?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+/** `<details class="oc-collapsible">` card-style section. */
+export const Collapsible = forwardRef<HTMLDetailsElement, CollapsibleProps>(function Collapsible(
+  { title, icon, dense, open, defaultOpen, onOpenChange, className, children, ...rest },
+  ref,
+) {
+  const [isOpen, setOpen] = useControllable<boolean>(open, defaultOpen ?? false, onOpenChange);
+  return (
+    <details
+      ref={ref}
+      className={cx("oc-collapsible", dense && "oc-collapsible--dense", className)}
+      open={isOpen}
+      onToggle={(e: SyntheticEvent<HTMLDetailsElement>) => {
+        if (e.currentTarget.open !== isOpen) setOpen(e.currentTarget.open);
+      }}
+      {...rest}
+    >
+      <summary>
+        {icon}
+        <span className="oc-collapsible-title">{title}</span>
+      </summary>
+      <div className="oc-collapsible-content">{children}</div>
+    </details>
+  );
+});

package/src/components/ColorField.tsx

@@ -1,48 +1,48 @@
-"use client";
-
-import { forwardRef, useState } from "react";
-import type { HTMLAttributes } from "react";
-import { cx } from "../utils";
-import { useControllable } from "../hooks";
-
-export interface ColorFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
-  /** Hex value, e.g. `#3366cc` (controlled). */
-  value?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  /** Id of the text input (so a <label for> can point at it). */
-  id?: string;
-  name?: string;
-  disabled?: boolean;
-}
-
-const HEX = /^#[0-9a-f]{6}$/i;
-
-/** Native color picker + monospaced hex text input, kept in sync. */
-export const ColorField = forwardRef<HTMLDivElement, ColorFieldProps>(function ColorField(
-  { value, defaultValue = "#000000", onChange, id, name, disabled, className, ...rest },
-  ref,
-) {
-  const [color, setColor] = useControllable<string>(value, defaultValue, onChange);
-  const [lastValid, setLastValid] = useState(HEX.test(color) ? color : "#000000");
-  const picker = HEX.test(color) ? color : lastValid;
-  const update = (next: string) => {
-    if (HEX.test(next)) setLastValid(next);
-    setColor(next);
-  };
-  return (
-    <div ref={ref} className={cx("oc-color-field", className)} {...rest}>
-      <input type="color" aria-label="Pick a color" value={picker} disabled={disabled} onChange={(e) => update(e.target.value)} />
-      <input
-        className="oc-input"
-        type="text"
-        id={id}
-        name={name}
-        aria-label="Color value"
-        value={color}
-        disabled={disabled}
-        onChange={(e) => update(e.target.value)}
-      />
-    </div>
-  );
-});
+"use client";
+
+import { forwardRef, useState } from "react";
+import type { HTMLAttributes } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export interface ColorFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+  /** Hex value, e.g. `#3366cc` (controlled). */
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  /** Id of the text input (so a <label for> can point at it). */
+  id?: string;
+  name?: string;
+  disabled?: boolean;
+}
+
+const HEX = /^#[0-9a-f]{6}$/i;
+
+/** Native color picker + monospaced hex text input, kept in sync. */
+export const ColorField = forwardRef<HTMLDivElement, ColorFieldProps>(function ColorField(
+  { value, defaultValue = "#000000", onChange, id, name, disabled, className, ...rest },
+  ref,
+) {
+  const [color, setColor] = useControllable<string>(value, defaultValue, onChange);
+  const [lastValid, setLastValid] = useState(HEX.test(color) ? color : "#000000");
+  const picker = HEX.test(color) ? color : lastValid;
+  const update = (next: string) => {
+    if (HEX.test(next)) setLastValid(next);
+    setColor(next);
+  };
+  return (
+    <div ref={ref} className={cx("oc-color-field", className)} {...rest}>
+      <input type="color" aria-label="Pick a color" value={picker} disabled={disabled} onChange={(e) => update(e.target.value)} />
+      <input
+        className="oc-input"
+        type="text"
+        id={id}
+        name={name}
+        aria-label="Color value"
+        value={color}
+        disabled={disabled}
+        onChange={(e) => update(e.target.value)}
+      />
+    </div>
+  );
+});

package/src/components/ColorSelect.tsx

@@ -1,49 +1,49 @@
-// File: packages/react/src/components/ColorSelect.tsx
-// Map: types -> component (fieldset radiogroup -> one label per color: radio + swatch + name)
-// Same markup as packages/ui/snippets/color-select.html.
-"use client";
-
-import { forwardRef, useId } from "react";
-import type { CSSProperties, FieldsetHTMLAttributes } from "react";
-import { cx } from "../utils";
-import { useControllable } from "../hooks";
-
-export interface ColorSelectOption {
-  value: string;
-  label: string;
-  /** CSS color, use Omnia tokens: "var(--color-red-70)". */
-  color: string;
-  disabled?: boolean;
-}
-
-export interface ColorSelectProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "defaultValue"> {
-  options: ColorSelectOption[];
-  value?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  /** Radio group name (generated when omitted). */
-  name?: string;
-  /** Rows with visible names instead of a swatch grid. */
-  list?: boolean;
-  size?: "sm" | "md";
-}
-
-/** `.oc-color-select`: radio swatches; the color is passed through the --oc-swatch variable. */
-export const ColorSelect = forwardRef<HTMLFieldSetElement, ColorSelectProps>(function ColorSelect(
-  { options, value, defaultValue, onChange, name, list, size = "md", className, ...rest },
-  ref,
-) {
-  const group = name ?? `oc-color-${useId().replace(/:/g, "")}`;
-  const [current, setCurrent] = useControllable<string>(value, defaultValue ?? "", onChange);
-  return (
-    <fieldset ref={ref} className={cx("oc-color-select", list && "oc-color-select--list", size === "sm" && "oc-color-select--sm", className)} role="radiogroup" {...rest}>
-      {options.map((o) => (
-        <label key={o.value} className="oc-color-select-option" style={{ "--oc-swatch": o.color } as CSSProperties}>
-          <input type="radio" name={group} value={o.value} disabled={o.disabled} checked={current === o.value} onChange={() => setCurrent(o.value)} />
-          <span className="oc-color-select-swatch" />
-          <span className="oc-color-select-name">{o.label}</span>
-        </label>
-      ))}
-    </fieldset>
-  );
-});
+// File: packages/react/src/components/ColorSelect.tsx
+// Map: types -> component (fieldset radiogroup -> one label per color: radio + swatch + name)
+// Same markup as packages/ui/snippets/color-select.html.
+"use client";
+
+import { forwardRef, useId } from "react";
+import type { CSSProperties, FieldsetHTMLAttributes } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export interface ColorSelectOption {
+  value: string;
+  label: string;
+  /** CSS color, use Omnia tokens: "var(--color-red-70)". */
+  color: string;
+  disabled?: boolean;
+}
+
+export interface ColorSelectProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "defaultValue"> {
+  options: ColorSelectOption[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  /** Radio group name (generated when omitted). */
+  name?: string;
+  /** Rows with visible names instead of a swatch grid. */
+  list?: boolean;
+  size?: "sm" | "md";
+}
+
+/** `.oc-color-select`: radio swatches; the color is passed through the --oc-swatch variable. */
+export const ColorSelect = forwardRef<HTMLFieldSetElement, ColorSelectProps>(function ColorSelect(
+  { options, value, defaultValue, onChange, name, list, size = "md", className, ...rest },
+  ref,
+) {
+  const group = name ?? `oc-color-${useId().replace(/:/g, "")}`;
+  const [current, setCurrent] = useControllable<string>(value, defaultValue ?? "", onChange);
+  return (
+    <fieldset ref={ref} className={cx("oc-color-select", list && "oc-color-select--list", size === "sm" && "oc-color-select--sm", className)} role="radiogroup" {...rest}>
+      {options.map((o) => (
+        <label key={o.value} className="oc-color-select-option" style={{ "--oc-swatch": o.color } as CSSProperties}>
+          <input type="radio" name={group} value={o.value} disabled={o.disabled} checked={current === o.value} onChange={() => setCurrent(o.value)} />
+          <span className="oc-color-select-swatch" />
+          <span className="oc-color-select-name">{o.label}</span>
+        </label>
+      ))}
+    </fieldset>
+  );
+});

package/src/components/ColumnMenu.tsx

@@ -1,66 +1,66 @@
-// File: packages/react/src/components/ColumnMenu.tsx
-// Map: ColumnMenu = scope -> toolbar trigger -> popover (title, form with one checkbox per column, reset) -> children (the table)
-// Hiding columns is pure CSS: an unchecked [data-col="n"] hides column n inside the scope (n = 1-10).
-// The checkboxes are uncontrolled, so "Reset" (a form reset) restores the defaults.
-import { forwardRef, useId } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { attrs, cx } from "../utils";
-
-export interface ColumnMenuColumn {
-  label: ReactNode;
-  /** Visible at the start (default true). */
-  visible?: boolean;
-  /** Always visible; the checkbox is disabled. */
-  locked?: boolean;
-}
-
-export interface ColumnMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  /** One entry per table column, in column order (max 10). */
-  columns: ColumnMenuColumn[];
-  /** The table (`.oc-table`) the menu controls. */
-  children: ReactNode;
-  triggerLabel?: ReactNode;
-  title?: ReactNode;
-  resetLabel?: ReactNode;
-  /** Called with the column number (1-based) and its new visibility. */
-  onColumnToggle?: (column: number, visible: boolean) => void;
-}
-
-/** `.oc-column-menu-scope` with a `.oc-column-menu[popover]` column checklist. */
-export const ColumnMenu = forwardRef<HTMLDivElement, ColumnMenuProps>(function ColumnMenu(
-  { columns, children, triggerLabel = "Columns", title = "Visible columns", resetLabel = "Reset", onColumnToggle, className, ...rest },
-  ref,
-) {
-  const menuId = `oc-column-menu-${useId().replace(/:/g, "")}`;
-  return (
-    <div ref={ref} className={cx("oc-column-menu-scope", className)} {...rest}>
-      <div className="oc-table-toolbar">
-        <span className="oc-table-toolbar-spacer" />
-        <button className="oc-btn oc-btn--outline oc-btn--sm" type="button" {...attrs({ popovertarget: menuId })}>
-          {triggerLabel}
-        </button>
-      </div>
-      <div className="oc-column-menu" id={menuId} {...attrs({ popover: "" })}>
-        <p className="oc-column-menu-title">{title}</p>
-        <form className="oc-column-menu-list">
-          {columns.map((col, i) => (
-            <label className="oc-column-menu-item" key={i}>
-              <input
-                type="checkbox"
-                data-col={i + 1}
-                defaultChecked={col.locked || col.visible !== false}
-                disabled={col.locked}
-                onChange={(e) => onColumnToggle?.(i + 1, e.currentTarget.checked)}
-              />{" "}
-              {col.label}
-            </label>
-          ))}
-          <div className="oc-column-menu-footer">
-            <button className="oc-btn oc-btn--ghost oc-btn--sm" type="reset">{resetLabel}</button>
-          </div>
-        </form>
-      </div>
-      {children}
-    </div>
-  );
-});
+// File: packages/react/src/components/ColumnMenu.tsx
+// Map: ColumnMenu = scope -> toolbar trigger -> popover (title, form with one checkbox per column, reset) -> children (the table)
+// Hiding columns is pure CSS: an unchecked [data-col="n"] hides column n inside the scope (n = 1-10).
+// The checkboxes are uncontrolled, so "Reset" (a form reset) restores the defaults.
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+
+export interface ColumnMenuColumn {
+  label: ReactNode;
+  /** Visible at the start (default true). */
+  visible?: boolean;
+  /** Always visible; the checkbox is disabled. */
+  locked?: boolean;
+}
+
+export interface ColumnMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  /** One entry per table column, in column order (max 10). */
+  columns: ColumnMenuColumn[];
+  /** The table (`.oc-table`) the menu controls. */
+  children: ReactNode;
+  triggerLabel?: ReactNode;
+  title?: ReactNode;
+  resetLabel?: ReactNode;
+  /** Called with the column number (1-based) and its new visibility. */
+  onColumnToggle?: (column: number, visible: boolean) => void;
+}
+
+/** `.oc-column-menu-scope` with a `.oc-column-menu[popover]` column checklist. */
+export const ColumnMenu = forwardRef<HTMLDivElement, ColumnMenuProps>(function ColumnMenu(
+  { columns, children, triggerLabel = "Columns", title = "Visible columns", resetLabel = "Reset", onColumnToggle, className, ...rest },
+  ref,
+) {
+  const menuId = `oc-column-menu-${useId().replace(/:/g, "")}`;
+  return (
+    <div ref={ref} className={cx("oc-column-menu-scope", className)} {...rest}>
+      <div className="oc-table-toolbar">
+        <span className="oc-table-toolbar-spacer" />
+        <button className="oc-btn oc-btn--outline oc-btn--sm" type="button" {...attrs({ popovertarget: menuId })}>
+          {triggerLabel}
+        </button>
+      </div>
+      <div className="oc-column-menu" id={menuId} {...attrs({ popover: "" })}>
+        <p className="oc-column-menu-title">{title}</p>
+        <form className="oc-column-menu-list">
+          {columns.map((col, i) => (
+            <label className="oc-column-menu-item" key={i}>
+              <input
+                type="checkbox"
+                data-col={i + 1}
+                defaultChecked={col.locked || col.visible !== false}
+                disabled={col.locked}
+                onChange={(e) => onColumnToggle?.(i + 1, e.currentTarget.checked)}
+              />{" "}
+              {col.label}
+            </label>
+          ))}
+          <div className="oc-column-menu-footer">
+            <button className="oc-btn oc-btn--ghost oc-btn--sm" type="reset">{resetLabel}</button>
+          </div>
+        </form>
+      </div>
+      {children}
+    </div>
+  );
+});

package/src/components/Command.tsx

@@ -1,113 +1,113 @@
-"use client";
-
-import { forwardRef, useId, useMemo, useState } from "react";
-import type { HTMLAttributes, KeyboardEvent, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface CommandItemData {
-  id: string;
-  label: string;
-  /** Right-aligned keyboard hint. */
-  shortcut?: string;
-  disabled?: boolean;
-  /** Extra search terms. */
-  keywords?: string[];
-}
-
-export interface CommandGroupData {
-  label?: string;
-  items: CommandItemData[];
-}
-
-export interface CommandProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
-  groups: CommandGroupData[];
-  placeholder?: string;
-  emptyText?: ReactNode;
-  /** Search value (controlled). */
-  query?: string;
-  onQueryChange?: (query: string) => void;
-  onSelect?: (item: CommandItemData) => void;
-}
-
-const matches = (item: CommandItemData, q: string) =>
-  !q || [item.label, ...(item.keywords ?? [])].some((s) => s.toLowerCase().includes(q));
-
-/**
- * Command palette. The list is filtered by the search input (non-matching rows get `hidden`),
- * the active row carries `aria-selected="true"`; arrow keys move it and Enter selects.
- */
-export const Command = forwardRef<HTMLDivElement, CommandProps>(function Command(
-  { groups, placeholder = "Type a command or search...", emptyText = "No results found.", query, onQueryChange, onSelect, className, ...rest },
-  ref,
-) {
-  const listId = useId();
-  const [innerQuery, setInnerQuery] = useState("");
-  const q = (query ?? innerQuery).trim().toLowerCase();
-  const [activeId, setActiveId] = useState<string | null>(null);
-
-  const visible = useMemo(
-    () => groups.flatMap((g) => g.items).filter((i) => !i.disabled && matches(i, q)),
-    [groups, q],
-  );
-  const active = visible.find((i) => i.id === activeId) ?? visible[0];
-
-  const move = (delta: number) => {
-    if (!visible.length) return;
-    const idx = Math.max(0, visible.findIndex((i) => i.id === active?.id));
-    setActiveId(visible[(idx + delta + visible.length) % visible.length].id);
-  };
-  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "ArrowDown") { e.preventDefault(); move(1); }
-    else if (e.key === "ArrowUp") { e.preventDefault(); move(-1); }
-    else if (e.key === "Enter" && active) { e.preventDefault(); onSelect?.(active); }
-  };
-
-  return (
-    <div ref={ref} className={cx("oc-command", className)} role="combobox" aria-expanded="true" aria-haspopup="listbox" aria-controls={listId} {...rest}>
-      <input
-        className="oc-command-input"
-        type="search"
-        placeholder={placeholder}
-        aria-label="Search commands"
-        value={query ?? innerQuery}
-        onChange={(e) => {
-          setInnerQuery(e.target.value);
-          setActiveId(null);
-          onQueryChange?.(e.target.value);
-        }}
-        onKeyDown={onKeyDown}
-      />
-      <ul className="oc-command-list" role="listbox" id={listId}>
-        {groups.map((group, gi) => {
-          const anyVisible = group.items.some((i) => matches(i, q));
-          return [
-            gi > 0 && (
-              <li key={`sep-${gi}`} className="oc-command-separator" role="separator" hidden={!anyVisible} />
-            ),
-            group.label && (
-              <li key={`label-${gi}`} className="oc-command-group-label" role="presentation" hidden={!anyVisible}>{group.label}</li>
-            ),
-            ...group.items.map((item) => (
-              <li
-                key={item.id}
-                className="oc-command-item"
-                role="option"
-                hidden={!matches(item, q)}
-                aria-selected={active?.id === item.id ? true : undefined}
-                aria-disabled={item.disabled ? true : undefined}
-                onMouseMove={() => !item.disabled && setActiveId(item.id)}
-                onClick={() => !item.disabled && onSelect?.(item)}
-              >
-                {item.label}
-                {item.shortcut && <> <span className="oc-command-shortcut">{item.shortcut}</span></>}
-              </li>
-            )),
-          ];
-        })}
-      </ul>
-      <div className="oc-command-empty" hidden={groups.some((g) => g.items.some((i) => matches(i, q)))}>
-        {emptyText}
-      </div>
-    </div>
-  );
-});
+"use client";
+
+import { forwardRef, useId, useMemo, useState } from "react";
+import type { HTMLAttributes, KeyboardEvent, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface CommandItemData {
+  id: string;
+  label: string;
+  /** Right-aligned keyboard hint. */
+  shortcut?: string;
+  disabled?: boolean;
+  /** Extra search terms. */
+  keywords?: string[];
+}
+
+export interface CommandGroupData {
+  label?: string;
+  items: CommandItemData[];
+}
+
+export interface CommandProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  groups: CommandGroupData[];
+  placeholder?: string;
+  emptyText?: ReactNode;
+  /** Search value (controlled). */
+  query?: string;
+  onQueryChange?: (query: string) => void;
+  onSelect?: (item: CommandItemData) => void;
+}
+
+const matches = (item: CommandItemData, q: string) =>
+  !q || [item.label, ...(item.keywords ?? [])].some((s) => s.toLowerCase().includes(q));
+
+/**
+ * Command palette. The list is filtered by the search input (non-matching rows get `hidden`),
+ * the active row carries `aria-selected="true"`; arrow keys move it and Enter selects.
+ */
+export const Command = forwardRef<HTMLDivElement, CommandProps>(function Command(
+  { groups, placeholder = "Type a command or search...", emptyText = "No results found.", query, onQueryChange, onSelect, className, ...rest },
+  ref,
+) {
+  const listId = useId();
+  const [innerQuery, setInnerQuery] = useState("");
+  const q = (query ?? innerQuery).trim().toLowerCase();
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  const visible = useMemo(
+    () => groups.flatMap((g) => g.items).filter((i) => !i.disabled && matches(i, q)),
+    [groups, q],
+  );
+  const active = visible.find((i) => i.id === activeId) ?? visible[0];
+
+  const move = (delta: number) => {
+    if (!visible.length) return;
+    const idx = Math.max(0, visible.findIndex((i) => i.id === active?.id));
+    setActiveId(visible[(idx + delta + visible.length) % visible.length].id);
+  };
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "ArrowDown") { e.preventDefault(); move(1); }
+    else if (e.key === "ArrowUp") { e.preventDefault(); move(-1); }
+    else if (e.key === "Enter" && active) { e.preventDefault(); onSelect?.(active); }
+  };
+
+  return (
+    <div ref={ref} className={cx("oc-command", className)} role="combobox" aria-expanded="true" aria-haspopup="listbox" aria-controls={listId} {...rest}>
+      <input
+        className="oc-command-input"
+        type="search"
+        placeholder={placeholder}
+        aria-label="Search commands"
+        value={query ?? innerQuery}
+        onChange={(e) => {
+          setInnerQuery(e.target.value);
+          setActiveId(null);
+          onQueryChange?.(e.target.value);
+        }}
+        onKeyDown={onKeyDown}
+      />
+      <ul className="oc-command-list" role="listbox" id={listId}>
+        {groups.map((group, gi) => {
+          const anyVisible = group.items.some((i) => matches(i, q));
+          return [
+            gi > 0 && (
+              <li key={`sep-${gi}`} className="oc-command-separator" role="separator" hidden={!anyVisible} />
+            ),
+            group.label && (
+              <li key={`label-${gi}`} className="oc-command-group-label" role="presentation" hidden={!anyVisible}>{group.label}</li>
+            ),
+            ...group.items.map((item) => (
+              <li
+                key={item.id}
+                className="oc-command-item"
+                role="option"
+                hidden={!matches(item, q)}
+                aria-selected={active?.id === item.id ? true : undefined}
+                aria-disabled={item.disabled ? true : undefined}
+                onMouseMove={() => !item.disabled && setActiveId(item.id)}
+                onClick={() => !item.disabled && onSelect?.(item)}
+              >
+                {item.label}
+                {item.shortcut && <> <span className="oc-command-shortcut">{item.shortcut}</span></>}
+              </li>
+            )),
+          ];
+        })}
+      </ul>
+      <div className="oc-command-empty" hidden={groups.some((g) => g.items.some((i) => matches(i, q)))}>
+        {emptyText}
+      </div>
+    </div>
+  );
+});