@birdycom/omniaui-react 0.0.0-stage → 0.11.0

package/src/components/ChartLine.tsx

@@ -0,0 +1,119 @@
+// File: packages/react/src/components/ChartLine.tsx
+// Map: types + demo data -> geometry (smooth path, area, percentages) -> ChartLine (head -> y axis -> plot: svg series + hover columns -> x axis -> legend)
+// Same markup as packages/ui/snippets/chart-line.html. The paths are computed here; tooltips open on :hover / :focus-visible (CSS only).
+import { forwardRef } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface ChartLineSeries {
+  name: string;
+  values: number[];
+  dashed?: boolean;
+}
+
+export interface ChartLineProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  title?: ReactNode;
+  sub?: ReactNode;
+  /** Big number in the head (`oc-chart-line__value`). */
+  value?: ReactNode;
+  series?: ChartLineSeries[];
+  /** One label per point, used in the tooltips (e.g. "January"). */
+  labels?: string[];
+  /** Short x axis labels (default: labels; "Jan"… for the demo months). */
+  xLabels?: string[];
+  /** Top of the y axis (default: a round number above the highest value). */
+  max?: number;
+  /** Gridline rows (default 4). */
+  rows?: number;
+  /** "area" fills the series, "spark" hides axes and grid. */
+  variant?: "line" | "area" | "spark";
+  /** Dots always visible. */
+  dots?: boolean;
+  /** aria-label of the point columns. */
+  label?: string;
+  format?: (value: number) => string;
+}
+
+const DEMO: ChartLineSeries[] = [
+  { name: "Desktop", values: [186, 305, 237, 73, 209, 214] },
+  { name: "Mobile", values: [80, 200, 120, 190, 130, 140] },
+];
+const MONTHS = ["January", "February", "March", "April", "May", "June"];
+const SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
+
+/** Number with at most 2 decimals and no trailing zeros ("75", "37.5", "4.69"). */
+const n2 = (n: number) => String(parseFloat(n.toFixed(2)));
+/** Round axis maximum: step = max / rows rounded up to 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8 or 10 x 10^k. */
+export function niceMax(value: number, rows = 4) {
+  if (value <= 0) return rows;
+  const raw = value / rows, pow = 10 ** Math.floor(Math.log10(raw));
+  return ([1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10].find((s) => s * pow >= raw) ?? 10) * pow * rows;
+}
+/** Smooth path through the points (x 0-100, y = 100 - value / max * 100); control points stay between their two ends. */
+export function chartLinePath(values: number[], max: number) {
+  const pts = values.map((v, i) => [values.length > 1 ? (i / (values.length - 1)) * 100 : 50, 100 - (v / max) * 100]);
+  if (!pts.length) return "";
+  const clamp = (v: number, a: number, b: number) => Math.min(Math.max(v, Math.min(a, b)), Math.max(a, b));
+  let d = `M${n2(pts[0][0])} ${n2(pts[0][1])}`;
+  for (let i = 0; i < pts.length - 1; i++) {
+    const p0 = pts[i - 1] ?? pts[i], p1 = pts[i], p2 = pts[i + 1], p3 = pts[i + 2] ?? p2;
+    const c1 = [p1[0] + (p2[0] - p0[0]) / 6, clamp(p1[1] + (p2[1] - p0[1]) / 6, p1[1], p2[1])];
+    const c2 = [p2[0] - (p3[0] - p1[0]) / 6, clamp(p2[1] - (p3[1] - p1[1]) / 6, p1[1], p2[1])];
+    d += ` C${n2(c1[0])} ${n2(c1[1])} ${n2(c2[0])} ${n2(c2[1])} ${n2(p2[0])} ${n2(p2[1])}`;
+  }
+  return d;
+}
+
+/** `figure.oc-chart-line`: line / area chart in inline SVG with axes, legend and tooltips. */
+export const ChartLine = forwardRef<HTMLElement, ChartLineProps>(function ChartLine(
+  { title = "Visitors", sub = "January – June 2026", value, series = DEMO, labels: labelsProp, xLabels, max, rows = 4, variant = "line", dots = true,
+    label = "Visitors per month", format = String, className, ...rest },
+  ref,
+) {
+  const top = max ?? niceMax(Math.max(0, ...series.flatMap((s) => s.values)), rows);
+  const count = Math.max(0, ...series.map((s) => s.values.length));
+  const labels = labelsProp ?? MONTHS;
+  const axis = xLabels ?? labelsProp ?? SHORT;
+  return (
+    <figure ref={ref} className={cx("oc-chart-line", variant !== "line" && `oc-chart-line--${variant}`, dots && "oc-chart-line--dots", className)} {...rest}>
+      {(title != null || sub != null || value != null) && (
+        <figcaption className="oc-chart-line__head">
+          {title != null && <span className="oc-chart-line__title">{title}</span>}
+          {sub != null && <span className="oc-chart-line__sub">{sub}</span>}
+          {value != null && <span className="oc-chart-line__value">{value}</span>}
+        </figcaption>
+      )}
+      <div className="oc-chart-line__body">
+        <ul className="oc-chart-line__y" aria-hidden="true">
+          {Array.from({ length: rows + 1 }, (_, i) => <li key={i}>{format(top - (top / rows) * i)}</li>)}
+        </ul>
+        <div className="oc-chart-line__plot" style={rows !== 4 ? ({ "--oc-chart-line-rows": rows } as CSSProperties) : undefined}>
+          <svg className="oc-chart-line__svg" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
+            {series.map((s, i) => {
+              const d = chartLinePath(s.values, top);
+              return (
+                <g key={i} className="oc-chart-line__series">
+                  <path className="oc-chart-line__area" d={`${d} L100 100 L0 100 Z`} />
+                  <path className={cx("oc-chart-line__path", s.dashed && "oc-chart-line__path--dashed")} d={d} />
+                </g>
+              );
+            })}
+          </svg>
+          <ul className="oc-chart-line__cols" style={{ "--n": count } as CSSProperties} aria-label={label}>
+            {Array.from({ length: count }, (_, i) => (
+              <li key={i} className="oc-chart-line__col" style={{ "--x": i } as CSSProperties} tabIndex={0} aria-label={`${labels[i] ?? i + 1}: ${series.map((s) => `${s.name} ${format(s.values[i])}`).join(", ")}`}>
+                {series.map((s, j) => <i key={j} className="oc-chart-line__dot" style={{ "--y": `${n2((s.values[i] / top) * 100)}%` } as CSSProperties} />)}
+                <span className="oc-chart-line__tip" aria-hidden="true">
+                  <strong>{labels[i] ?? i + 1}</strong>
+                  {series.map((s, j) => <span key={j} className="oc-chart-line__row">{s.name}<b>{format(s.values[i])}</b></span>)}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <ol className="oc-chart-line__x" aria-hidden="true">{axis.map((l, i) => <li key={i}>{l}</li>)}</ol>
+      </div>
+      <ul className="oc-chart-legend">{series.map((s, i) => <li key={i}><span className="oc-chart-swatch" />{s.name}</li>)}</ul>
+    </figure>
+  );
+});

package/src/components/ChatComposer.tsx

@@ -0,0 +1,73 @@
+// File: packages/react/src/components/ChatComposer.tsx
+// Map: props -> ChatComposer (form -> label + textarea -> bar: tools, hint, send) -> submit / Enter handling
+// Same markup as packages/ui/snippets/chat-composer.html. React adds onSend and (optional) Enter to send.
+"use client";
+
+import { forwardRef, useId } from "react";
+import type { FormHTMLAttributes, KeyboardEvent, ReactNode } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+/** The event type React gives to a form's onSubmit (differs between React 18 and 19 typings). */
+type SubmitEvent = Parameters<NonNullable<FormHTMLAttributes<HTMLFormElement>["onSubmit"]>>[0];
+
+export interface ChatComposerProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "onChange"> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** Called with the trimmed text on submit; the field is cleared afterwards. */
+  onSend?: (text: string) => void;
+  placeholder?: string;
+  /** Accessible label of the field (visually hidden). */
+  label?: string;
+  /** Tool buttons (`.oc-chat-composer__tool`), e.g. attach or an EmojiPicker. */
+  tools?: ReactNode;
+  hint?: ReactNode;
+  inline?: boolean;
+  /** Enter sends, Shift+Enter adds a new line. Default true. */
+  sendOnEnter?: boolean;
+  disabled?: boolean;
+}
+
+/** `form.oc-chat-composer`: growing textarea + toolbar + send button. */
+export const ChatComposer = forwardRef<HTMLFormElement, ChatComposerProps>(function ChatComposer(
+  { value, defaultValue = "", onValueChange, onSend, placeholder = "Write a message…", label = "Message", tools, hint, inline, sendOnEnter = true, disabled, className, onSubmit, ...rest },
+  ref,
+) {
+  const id = `oc-chat-${useId().replace(/:/g, "")}`;
+  const [text, setText] = useControllable(value, defaultValue, onValueChange);
+  const submit = (e: SubmitEvent) => {
+    e.preventDefault();
+    onSubmit?.(e);
+    if (!text.trim() || disabled) return;
+    onSend?.(text.trim());
+    setText("");
+  };
+  const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (sendOnEnter && e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      e.currentTarget.form?.requestSubmit();
+    }
+  };
+  return (
+    <form ref={ref} className={cx("oc-chat-composer", inline && "oc-chat-composer--inline", className)} onSubmit={submit} {...rest}>
+      <label className="oc-visually-hidden" htmlFor={id}>{label}</label>
+      <textarea
+        className="oc-chat-composer__input"
+        id={id}
+        rows={1}
+        placeholder={placeholder}
+        required
+        disabled={disabled}
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={onKeyDown}
+      />
+      <div className="oc-chat-composer__bar">
+        {tools != null && <div className="oc-chat-composer__tools">{tools}</div>}
+        {hint != null && <span className="oc-chat-composer__hint">{hint}</span>}
+        <button type="submit" className="oc-chat-composer__send" aria-label="Send" disabled={disabled}>&#10148;</button>
+      </div>
+    </form>
+  );
+});

package/src/components/Checkbox.tsx

@@ -0,0 +1,14 @@
+import { forwardRef } from "react";
+import type { InputHTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  /** When set the input is wrapped in a <label> with this text. */
+  label?: ReactNode;
+}
+
+/** `<input class="oc-checkbox" type="checkbox">`, wrapped in a label when `label` is given. */
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox({ label, className, ...rest }, ref) {
+  const input = <input ref={ref} type="checkbox" className={cx("oc-checkbox", className)} {...rest} />;
+  return label != null ? <label>{input} {label}</label> : input;
+});

package/src/components/Checklist.tsx

@@ -0,0 +1,45 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, LiHTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface ChecklistProps extends HTMLAttributes<HTMLUListElement> {
+  /** Bordered rows with an action slot. */
+  card?: boolean;
+}
+
+/** `<ul class="oc-checklist">` */
+export const Checklist = forwardRef<HTMLUListElement, ChecklistProps>(function Checklist({ card, className, ...rest }, ref) {
+  return <ul ref={ref} className={cx("oc-checklist", card && "oc-checklist--card", className)} {...rest} />;
+});
+
+export interface ChecklistItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, "title"> {
+  /** Rule is met / step is done (`is-done`). */
+  done?: boolean;
+  /** Card variant: title + hint text column. Without it `children` are the row content. */
+  title?: ReactNode;
+  hint?: ReactNode;
+  /** Card variant: trailing action (usually a button or link). */
+  action?: ReactNode;
+}
+
+/** `<li class="oc-checklist-item is-done">` */
+export const ChecklistItem = forwardRef<HTMLLIElement, ChecklistItemProps>(function ChecklistItem(
+  { done, title, hint, action, className, children, ...rest },
+  ref,
+) {
+  return (
+    <li ref={ref} className={cx("oc-checklist-item", done && "is-done", className)} {...rest}>
+      {title != null ? (
+        <>
+          <span className="oc-checklist-text">
+            <span className="oc-checklist-title">{title}</span>
+            {hint != null && <span className="oc-checklist-hint">{hint}</span>}
+          </span>
+          {action}
+        </>
+      ) : (
+        children
+      )}
+    </li>
+  );
+});

package/src/components/ChipFilter.tsx

@@ -0,0 +1,60 @@
+// File: packages/react/src/components/ChipFilter.tsx
+// Map: types -> component (group -> one chip label per option: checkbox or radio + text + optional count)
+// Same markup as packages/ui/snippets/chip-filter.html. multiple = checkboxes (array value), else radios (string).
+"use client";
+
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export interface ChipFilterOption {
+  value: string;
+  label: ReactNode;
+  count?: number;
+  disabled?: boolean;
+}
+
+export interface ChipFilterProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+  options: ChipFilterOption[];
+  /** Several chips at once (checkboxes). */
+  multiple?: boolean;
+  /** string for single choice, string[] with `multiple`. */
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onChange?: (value: string | string[]) => void;
+  name?: string;
+  size?: "sm" | "md";
+  /** One line that scrolls sideways. */
+  scroll?: boolean;
+}
+
+/** `.oc-chip-filter`: rounded filter chips. */
+export const ChipFilter = forwardRef<HTMLDivElement, ChipFilterProps>(function ChipFilter(
+  { options, multiple, value, defaultValue, onChange, name, size = "md", scroll, className, ...rest },
+  ref,
+) {
+  const group = name ?? `oc-chip-${useId().replace(/:/g, "")}`;
+  const [current, setCurrent] = useControllable<string | string[]>(value, defaultValue ?? (multiple ? [] : ""), onChange);
+  const selected = Array.isArray(current) ? current : current ? [current] : [];
+
+  // Checkbox: add or remove the value. Radio: replace it.
+  const toggle = (v: string) => setCurrent(multiple ? (selected.includes(v) ? selected.filter((s) => s !== v) : [...selected, v]) : v);
+
+  return (
+    <div
+      ref={ref}
+      className={cx("oc-chip-filter", size === "sm" && "oc-chip-filter--sm", scroll && "oc-chip-filter--scroll", className)}
+      role={multiple ? "group" : "radiogroup"}
+      {...rest}
+    >
+      {options.map((o) => (
+        <label key={o.value} className="oc-chip-filter-item">
+          <input type={multiple ? "checkbox" : "radio"} name={group} value={o.value} disabled={o.disabled} checked={selected.includes(o.value)} onChange={() => toggle(o.value)} />
+          {" "}{o.label}
+          {o.count != null && <span className="oc-chip-filter-count">{o.count}</span>}
+        </label>
+      ))}
+    </div>
+  );
+});

package/src/components/Collapsible.tsx

@@ -0,0 +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>
+  );
+});

package/src/components/ColorField.tsx

@@ -0,0 +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>
+  );
+});

package/src/components/ColorSelect.tsx

@@ -0,0 +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>
+  );
+});

package/src/components/ColumnMenu.tsx

@@ -0,0 +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>
+  );
+});

package/src/components/Command.tsx

@@ -0,0 +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>
+  );
+});