@motir/design-system 0.1.0

package/dist/components/ui/Card.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Card — content container with optional header/footer slots and tint variants.
+ *
+ * Compose with `header` / `footer` props for the common pattern, or just
+ * pass children for a bare card. `clickable` makes the whole card a button
+ * (use `onClick` + Enter/Space; pass `href` to render as `<a>` instead).
+ *
+ * Tint variants use the pastel feature tints from the palette
+ * (peach/rose/mint/lavender/sky/yellow) — apply sparingly, never to
+ * page-level surfaces.
+ *
+ * @example
+ * <Card header={<h3>Title</h3>}>Body content</Card>
+ * <Card tint="lavender" clickable onClick={open}>Pastel card</Card>
+ * <Card tint="mint"><a href="/x">Link wrapper</a></Card>
+ */
+declare const cardVariants: (props?: ({
+    tint?: "none" | "lavender" | "yellow" | "peach" | "rose" | "mint" | "sky" | null | undefined;
+    clickable?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof cardVariants> {
+    header?: ReactNode;
+    footer?: ReactNode;
+    children?: ReactNode;
+}
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Card, type CardProps };

package/dist/components/ui/Card.js

@@ -0,0 +1,64 @@
+import { forwardRef } from 'react';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/ui/Card.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var cardVariants = cva(
+  cn(
+    "rounded-(--radius-card) border border-(--el-border)",
+    "p-(--spacing-card-padding)",
+    "transition-shadow duration-(--transition-duration)"
+  ),
+  {
+    variants: {
+      tint: {
+        none: "bg-(--el-card)",
+        peach: "bg-(--el-tint-peach) border-transparent",
+        rose: "bg-(--el-tint-rose) border-transparent",
+        mint: "bg-(--el-tint-mint) border-transparent",
+        lavender: "bg-(--el-tint-lavender) border-transparent",
+        sky: "bg-(--el-tint-sky) border-transparent",
+        yellow: "bg-(--el-tint-yellow) border-transparent"
+      },
+      clickable: {
+        true: "cursor-pointer hover:shadow-(--shadow-card) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        false: ""
+      }
+    },
+    defaultVariants: { tint: "none", clickable: false }
+  }
+);
+var Card = forwardRef(function Card2({ tint, clickable, header, footer, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(cardVariants({ tint, clickable }), className),
+      "data-tilt": "",
+      ...tint && tint !== "none" ? {} : { "data-surface": "card" },
+      ...clickable ? { tabIndex: 0, role: "button" } : {},
+      ...rest,
+      children: [
+        header ? /* @__PURE__ */ jsx("div", { "data-tilt-layer": "front", className: "mb-(--spacing-md)", children: header }) : null,
+        /* @__PURE__ */ jsx("div", { children }),
+        footer ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-tilt-layer": "back",
+            className: "border-(--el-border) mt-(--spacing-md) border-t pt-(--spacing-md)",
+            children: footer
+          }
+        ) : null
+      ]
+    }
+  );
+});
+
+export { Card };
+//# sourceMappingURL=Card.js.map
+//# sourceMappingURL=Card.js.map

package/dist/components/ui/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Card.tsx"],"names":["Card"],"mappings":";;;;;;;AAcO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACIA,IAAM,YAAA,GAAe,GAAA;AAAA,EACnB,EAAA;AAAA,IACE,qDAAA;AAAA,IACA,4BAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM,gBAAA;AAAA,QACN,KAAA,EAAO,yCAAA;AAAA,QACP,IAAA,EAAM,wCAAA;AAAA,QACN,IAAA,EAAM,wCAAA;AAAA,QACN,QAAA,EAAU,4CAAA;AAAA,QACV,GAAA,EAAK,uCAAA;AAAA,QACL,MAAA,EAAQ;AAAA,OACV;AAAA,MACA,SAAA,EAAW;AAAA,QACT,IAAA,EAAM,sMAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,MAAA,EAAQ,WAAW,KAAA;AAAM;AAEtD,CAAA;AASO,IAAM,IAAA,GAAO,UAAA,CAAsC,SAASA,KAAAA,CACjE,EAAE,IAAA,EAAM,SAAA,EAAW,MAAA,EAAQ,MAAA,EAAQ,SAAA,EAAW,QAAA,EAAU,GAAG,IAAA,IAC3D,GAAA,EACA;AACA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,GAAG,YAAA,CAAa,EAAE,MAAM,SAAA,EAAW,GAAG,SAAS,CAAA;AAAA,MAI1D,WAAA,EAAU,EAAA;AAAA,MAKT,GAAI,QAAQ,IAAA,KAAS,MAAA,GAAS,EAAC,GAAI,EAAE,gBAAgB,MAAA,EAAO;AAAA,MAC5D,GAAI,YAAY,EAAE,QAAA,EAAU,GAAG,IAAA,EAAM,QAAA,KAAa,EAAC;AAAA,MACnD,GAAG,IAAA;AAAA,MAQH,QAAA,EAAA;AAAA,QAAA,MAAA,uBACE,KAAA,EAAA,EAAI,iBAAA,EAAgB,SAAQ,SAAA,EAAU,mBAAA,EACpC,kBACH,CAAA,GACE,IAAA;AAAA,wBACJ,GAAA,CAAC,SAAK,QAAA,EAAS,CAAA;AAAA,QACd,MAAA,mBACC,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,iBAAA,EAAgB,MAAA;AAAA,YAChB,SAAA,EAAU,mEAAA;AAAA,YAET,QAAA,EAAA;AAAA;AAAA,SACH,GACE;AAAA;AAAA;AAAA,GACN;AAEJ,CAAC","file":"Card.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Card — content container with optional header/footer slots and tint variants.\n *\n * Compose with `header` / `footer` props for the common pattern, or just\n * pass children for a bare card. `clickable` makes the whole card a button\n * (use `onClick` + Enter/Space; pass `href` to render as `<a>` instead).\n *\n * Tint variants use the pastel feature tints from the palette\n * (peach/rose/mint/lavender/sky/yellow) — apply sparingly, never to\n * page-level surfaces.\n *\n * @example\n * <Card header={<h3>Title</h3>}>Body content</Card>\n * <Card tint=\"lavender\" clickable onClick={open}>Pastel card</Card>\n * <Card tint=\"mint\"><a href=\"/x\">Link wrapper</a></Card>\n */\nconst cardVariants = cva(\n  cn(\n    'rounded-(--radius-card) border border-(--el-border)',\n    'p-(--spacing-card-padding)',\n    'transition-shadow duration-(--transition-duration)',\n  ),\n  {\n    variants: {\n      tint: {\n        none: 'bg-(--el-card)',\n        peach: 'bg-(--el-tint-peach) border-transparent',\n        rose: 'bg-(--el-tint-rose) border-transparent',\n        mint: 'bg-(--el-tint-mint) border-transparent',\n        lavender: 'bg-(--el-tint-lavender) border-transparent',\n        sky: 'bg-(--el-tint-sky) border-transparent',\n        yellow: 'bg-(--el-tint-yellow) border-transparent',\n      },\n      clickable: {\n        true: 'cursor-pointer hover:shadow-(--shadow-card) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n        false: '',\n      },\n    },\n    defaultVariants: { tint: 'none', clickable: false },\n  },\n);\n\nexport interface CardProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof cardVariants> {\n  header?: ReactNode;\n  footer?: ReactNode;\n  children?: ReactNode;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  { tint, clickable, header, footer, className, children, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(cardVariants({ tint, clickable }), className)}\n      // `data-tilt` is the hook the 3D / Immersive style's pointer-parallax\n      // engine (ImmersiveTilt, 7.3.39) uses to tip this tile toward the cursor.\n      // Inert for every other style + under reduced motion; harmless otherwise.\n      data-tilt=\"\"\n      // `data-surface` is the hook a surface-MATERIAL style (e.g. glassmorphism)\n      // uses to frost this panel — see globals.css's material layer. Only the\n      // default (untinted) card opts in; a pastel-tint feature card keeps its\n      // opaque tint, never a frosted overlay that would wash the hue out.\n      {...(tint && tint !== 'none' ? {} : { 'data-surface': 'card' })}\n      {...(clickable ? { tabIndex: 0, role: 'button' } : {})}\n      {...rest}\n    >\n      {/* `data-tilt-layer` lifts the slot onto a translateZ plane under the 3D /\n          Immersive style (7.3.39) so it PARALLAXES above the card face as the\n          card tilts — `front` (the header/title pops most), `back` (the footer\n          sits nearer the face). Inert under every other style + reduced motion.\n          The body stays on the face so arbitrary content never renders on a\n          skewed Z-plane. */}\n      {header ? (\n        <div data-tilt-layer=\"front\" className=\"mb-(--spacing-md)\">\n          {header}\n        </div>\n      ) : null}\n      <div>{children}</div>\n      {footer ? (\n        <div\n          data-tilt-layer=\"back\"\n          className=\"border-(--el-border) mt-(--spacing-md) border-t pt-(--spacing-md)\"\n        >\n          {footer}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n"]}

package/dist/components/ui/ColorSwatchPicker.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ColorSwatchOption {
+    /** Accessible name + tooltip. */
+    name: string;
+    /** The stored hex value, or null for "derive from category". */
+    value: string | null;
+}
+declare const STATUS_COLOR_SWATCHES: ReadonlyArray<ColorSwatchOption>;
+interface ColorSwatchPickerProps {
+    /** Selected hex, or null for "derive from category". */
+    value: string | null;
+    onChange: (value: string | null) => void;
+    label?: string;
+    disabled?: boolean;
+}
+declare function ColorSwatchPicker({ value, onChange, label, disabled, }: ColorSwatchPickerProps): react_jsx_runtime.JSX.Element;
+
+export { type ColorSwatchOption, ColorSwatchPicker, type ColorSwatchPickerProps, STATUS_COLOR_SWATCHES };

package/dist/components/ui/ColorSwatchPicker.js

@@ -0,0 +1,71 @@
+'use client';
+import { useRef } from 'react';
+import { Ban } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var STATUS_COLOR_SWATCHES = [
+  { name: "None (derive from category)", value: null },
+  { name: "Grey", value: "#787671" },
+  { name: "Blue", value: "#0075de" },
+  { name: "Teal", value: "#2a9d99" },
+  { name: "Green", value: "#1aae39" },
+  { name: "Orange", value: "#dd5b00" },
+  { name: "Red", value: "#e03131" },
+  { name: "Pink", value: "#ff64c8" }
+];
+function ColorSwatchPicker({
+  value,
+  onChange,
+  label = "Color",
+  disabled
+}) {
+  const refs = useRef([]);
+  const selectedIndex = STATUS_COLOR_SWATCHES.findIndex((s) => s.value === value);
+  const tabbableIndex = selectedIndex >= 0 ? selectedIndex : 0;
+  function select(index) {
+    const opt = STATUS_COLOR_SWATCHES[index];
+    if (!opt) return;
+    onChange(opt.value);
+    refs.current[index]?.focus();
+  }
+  function onKeyDown(e, index) {
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      e.preventDefault();
+      select((index + 1) % STATUS_COLOR_SWATCHES.length);
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      e.preventDefault();
+      select((index - 1 + STATUS_COLOR_SWATCHES.length) % STATUS_COLOR_SWATCHES.length);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-(--el-text) font-sans text-sm font-medium", children: label }),
+    /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": label, className: "flex flex-wrap gap-2", children: STATUS_COLOR_SWATCHES.map((opt, i) => {
+      const checked = opt.value === value;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: (el) => {
+            refs.current[i] = el;
+          },
+          type: "button",
+          role: "radio",
+          "aria-checked": checked,
+          "aria-label": opt.name,
+          title: opt.name,
+          tabIndex: i === tabbableIndex ? 0 : -1,
+          disabled,
+          onClick: () => onChange(opt.value),
+          onKeyDown: (e) => onKeyDown(e, i),
+          className: `flex h-7 w-7 items-center justify-center rounded-full border border-(--el-border) transition-shadow focus-visible:ring-(--el-text) focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:opacity-50 ${checked ? "ring-(--el-text) ring-2 ring-offset-2" : ""}`,
+          style: opt.value ? { backgroundColor: opt.value } : void 0,
+          children: opt.value === null && /* @__PURE__ */ jsx(Ban, { className: "text-(--el-text-muted) h-4 w-4", "aria-hidden": true })
+        },
+        opt.name
+      );
+    }) })
+  ] });
+}
+
+export { ColorSwatchPicker, STATUS_COLOR_SWATCHES };
+//# sourceMappingURL=ColorSwatchPicker.js.map
+//# sourceMappingURL=ColorSwatchPicker.js.map

package/dist/components/ui/ColorSwatchPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/ColorSwatchPicker.tsx"],"names":[],"mappings":"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","file":"ColorSwatchPicker.js","sourcesContent":["'use client';\n\nimport { useRef, type KeyboardEvent } from 'react';\nimport { Ban } from 'lucide-react';\n\n// ColorSwatchPicker — a keyboard-navigable radiogroup of curated status colors\n// (Story 2.2 · Subtask 2.2.8). Replaces the free-text hex input in the workflow\n// status form. The palette is drawn from the design-system semantic tokens\n// (globals.css) and stored as HEX — theme-independent and durable (a status's\n// color shouldn't shift if a CSS var is renamed). `null` = \"derive from\n// category\" (the Pill/category tint decides the swatch).\n//\n// A11y: WAI-ARIA radiogroup pattern — role=\"radiogroup\" + role=\"radio\"\n// children, `aria-checked`, roving tabindex (only the selected swatch is in the\n// tab order), arrow keys move + select, and a high-contrast focus/selected ring\n// that's independent of the swatch fill (so it reads on any color, AA-safe).\n\nexport interface ColorSwatchOption {\n  /** Accessible name + tooltip. */\n  name: string;\n  /** The stored hex value, or null for \"derive from category\". */\n  value: string | null;\n}\n\nexport const STATUS_COLOR_SWATCHES: ReadonlyArray<ColorSwatchOption> = [\n  { name: 'None (derive from category)', value: null },\n  { name: 'Grey', value: '#787671' },\n  { name: 'Blue', value: '#0075de' },\n  { name: 'Teal', value: '#2a9d99' },\n  { name: 'Green', value: '#1aae39' },\n  { name: 'Orange', value: '#dd5b00' },\n  { name: 'Red', value: '#e03131' },\n  { name: 'Pink', value: '#ff64c8' },\n];\n\nexport interface ColorSwatchPickerProps {\n  /** Selected hex, or null for \"derive from category\". */\n  value: string | null;\n  onChange: (value: string | null) => void;\n  label?: string;\n  disabled?: boolean;\n}\n\nexport function ColorSwatchPicker({\n  value,\n  onChange,\n  label = 'Color',\n  disabled,\n}: ColorSwatchPickerProps) {\n  const refs = useRef<Array<HTMLButtonElement | null>>([]);\n  const selectedIndex = STATUS_COLOR_SWATCHES.findIndex((s) => s.value === value);\n  // Roving tabindex anchor: the selected swatch, or the first when nothing matches\n  // (e.g. a legacy custom hex outside the curated palette).\n  const tabbableIndex = selectedIndex >= 0 ? selectedIndex : 0;\n\n  function select(index: number) {\n    const opt = STATUS_COLOR_SWATCHES[index];\n    if (!opt) return;\n    onChange(opt.value);\n    refs.current[index]?.focus();\n  }\n\n  function onKeyDown(e: KeyboardEvent, index: number) {\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      select((index + 1) % STATUS_COLOR_SWATCHES.length);\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      select((index - 1 + STATUS_COLOR_SWATCHES.length) % STATUS_COLOR_SWATCHES.length);\n    }\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <span className=\"text-(--el-text) font-sans text-sm font-medium\">{label}</span>\n      <div role=\"radiogroup\" aria-label={label} className=\"flex flex-wrap gap-2\">\n        {STATUS_COLOR_SWATCHES.map((opt, i) => {\n          const checked = opt.value === value;\n          return (\n            <button\n              key={opt.name}\n              ref={(el) => {\n                refs.current[i] = el;\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={checked}\n              aria-label={opt.name}\n              title={opt.name}\n              tabIndex={i === tabbableIndex ? 0 : -1}\n              disabled={disabled}\n              onClick={() => onChange(opt.value)}\n              onKeyDown={(e) => onKeyDown(e, i)}\n              className={`flex h-7 w-7 items-center justify-center rounded-full border border-(--el-border) transition-shadow focus-visible:ring-(--el-text) focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:opacity-50 ${\n                checked ? 'ring-(--el-text) ring-2 ring-offset-2' : ''\n              }`}\n              style={opt.value ? { backgroundColor: opt.value } : undefined}\n            >\n              {opt.value === null && <Ban className=\"text-(--el-text-muted) h-4 w-4\" aria-hidden />}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/components/ui/Combobox.d.ts

@@ -0,0 +1,84 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+/**
+ * Combobox — an accessible select/combobox primitive (Subtask 2.3.4). A trigger
+ * button (`role="combobox"`, `aria-haspopup="listbox"`) opens an anchored panel
+ * holding an optional type-ahead filter and a `role="listbox"` of
+ * `role="option"` rows. The active option is tracked with `aria-activedescendant`
+ * on whichever control holds focus (the filter input when `searchable`, else the
+ * listbox) — the CommandPalette pattern that already clears the STRICT axe sweep.
+ *
+ * Deliberately NOT built on the Radix Popover primitive: that injects
+ * `aria-haspopup="dialog"` + dialog focus semantics onto its trigger, which
+ * conflicts with the listbox combobox pattern. This is a self-contained anchored
+ * dropdown (click-outside + Escape + focus return handled here) so the ARIA is
+ * exactly the WAI-ARIA combobox shape.
+ *
+ * Composed by `components/issues/TypePicker` (searchable=false, 5 options) and
+ * `ParentPicker` (searchable, async candidate list).
+ */
+interface ComboboxOption<T extends string> {
+    value: T;
+    /** Primary text — also the accessible name of the option. */
+    label: string;
+    /** Extra text matched by the filter (e.g. a PROD-N identifier). */
+    keywords?: string;
+    /** Leading visual (a kind icon); decorative — label carries the name. */
+    icon?: ReactNode;
+    /** Trailing muted text (e.g. the identifier). */
+    secondary?: string;
+    /**
+     * Optional section label. When consecutive options carry different `group`
+     * values, a non-interactive header row is rendered at each transition (the
+     * advanced filter's "Fields" / "Custom fields" / "Other" field menu). Pass
+     * options pre-sorted by group; headers follow list order, so a group whose
+     * every option is filtered out disappears with it. Decorative — not part of
+     * the listbox's option indices, so keyboard nav is unaffected.
+     */
+    group?: string;
+}
+interface ComboboxProps<T extends string> {
+    options: ComboboxOption<T>[];
+    value: T | null;
+    onChange: (value: T) => void;
+    /** Accessible name for the trigger + listbox. */
+    label: string;
+    /** Trigger text when nothing is selected. */
+    placeholder?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    loading?: boolean;
+    loadingText?: string;
+    disabled?: boolean;
+    /** id for the trigger button. */
+    id?: string;
+    className?: string;
+    /**
+     * Mount already-open (Subtask 2.5.5) — for an inline-edit cell that renders the
+     * picker on a single click, so the menu is open immediately (mirrors
+     * `DatePicker`'s `autoOpen`). Focus lands on the search input / listbox.
+     */
+    autoOpen?: boolean;
+    /**
+     * Fired whenever the menu transitions open → closed (a pick, Escape,
+     * click-outside, or toggling the trigger). The inline-edit cell uses it to
+     * leave edit mode and return to the static pill/avatar (Subtask 2.5.5).
+     */
+    onClose?: () => void;
+    /**
+     * Server-driven search mode (Subtask 6.9.2 — the link picker). When
+     * `onQueryChange` is provided the type-ahead query is CONTROLLED by the parent
+     * (`query`) and client-side filtering is SKIPPED — `options` is taken as the
+     * server's authoritative result for the current query (the parent debounces
+     * its fetch off `onQueryChange`, the same contract as `MultiSelectPicker`).
+     * Omit both for the default self-filtering behaviour. The parent owns the
+     * query lifecycle, so opening the menu does NOT reset it.
+     */
+    query?: string;
+    onQueryChange?: (query: string) => void;
+}
+declare function Combobox<T extends string>({ options, value, onChange, label, placeholder, searchable, searchPlaceholder, emptyText, loading, loadingText, disabled, id, className, autoOpen, onClose, query: controlledQuery, onQueryChange, }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
+
+export { Combobox, type ComboboxOption, type ComboboxProps };