@burtson-labs/ui 0.13.1 → 0.14.1

package/dist/components/combobox.js

@@ -1,16 +1,26 @@
+"use client";
 import { cn } from "../lib/utils.js";
 import { Spinner } from "./spinner.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
-import { fieldClasses } from "./input.js";
+import { fieldClasses, fieldWidthClasses } from "./input.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Check from "@burtson-labs/icons/react/check";
 import ChevronsUpDown from "@burtson-labs/icons/react/chevrons-up-down";
 //#region src/components/combobox.tsx
-/** Pick one value from a long or remote list by typing. */
-function Combobox({ options, value, onValueChange, placeholder = "Select…", searchPlaceholder = "Search…", emptyText = "No matches.", disabled, loading, onSearchChange, clearable = true, id, className, name, required, ...aria }) {
+/**
+* Pick one value from a long or remote list by typing. The ref reaches the
+* trigger button, so a form library or an ErrorSummary can focus it.
+*/
+var Combobox = React.forwardRef(function Combobox({ options, value: valueProp, defaultValue = null, onValueChange, placeholder = "Select…", searchPlaceholder = "Search…", emptyText = "No matches.", disabled, loading, onSearchChange, clearable = true, width, id, className, name, required, ...aria }, ref) {
 	const [open, setOpen] = React.useState(false);
+	const [own, setOwn] = React.useState(defaultValue);
+	const value = valueProp === void 0 ? own : valueProp;
+	const setValue = (next) => {
+		if (valueProp === void 0) setOwn(next);
+		onValueChange?.(next);
+	};
 	const listId = React.useId();
 	const selected = options.find((o) => o.value === value);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [name && /* @__PURE__ */ jsx("input", {
@@ -24,9 +34,10 @@ function Combobox({ options, value, onValueChange, placeholder = "Select…", se
 		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsxs("button", {
+				ref,
 				type: "button",
 				role: "combobox",
-				"aria-required": required || void 0,
+				"aria-required": aria["aria-required"] ?? (required || void 0),
 				onKeyDown: (event) => {
 					if (event.key === "ArrowDown" || event.key === "ArrowUp") {
 						event.preventDefault();
@@ -44,12 +55,12 @@ function Combobox({ options, value, onValueChange, placeholder = "Select…", se
 				"aria-invalid": aria["aria-invalid"],
 				disabled,
 				"data-slot": "combobox-trigger",
-				className: cn(fieldClasses, "flex h-9 items-center justify-between gap-2 text-left", !selected && "text-muted-foreground", className),
+				className: cn(fieldClasses, "flex h-9 items-center justify-between gap-2 text-left", !selected && "text-muted-foreground", width && fieldWidthClasses[width], className),
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "truncate",
 					children: selected?.label ?? value ?? placeholder
 				}), /* @__PURE__ */ jsx(ChevronsUpDown, {
-					className: "size-4 shrink-0 opacity-60",
+					className: "size-4 shrink-0 text-muted-foreground",
 					"aria-hidden": true
 				})]
 			})
@@ -71,7 +82,7 @@ function Combobox({ options, value, onValueChange, placeholder = "Select…", se
 					value: `${o.label} ${o.description ?? ""} ${o.value}`,
 					disabled: o.disabled,
 					onSelect: () => {
-						onValueChange(clearable && o.value === value ? null : o.value);
+						setValue(clearable && o.value === value ? null : o.value);
 						setOpen(false);
 					},
 					children: [/* @__PURE__ */ jsxs("span", {
@@ -91,7 +102,7 @@ function Combobox({ options, value, onValueChange, placeholder = "Select…", se
 			})
 		})]
 	})] });
-}
+});
 //#endregion
 export { Combobox };
 

package/dist/components/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":["_Fragment"],"sources":["../../src/components/combobox.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronsUpDown from '@burtson-labs/icons/react/chevrons-up-down';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from './command';\nimport { fieldClasses } from './input';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\nimport { Spinner } from './spinner';\n\nexport interface ComboboxOption {\n  value: string;\n  label: string;\n  /** Second line, e.g. an email under a name. Also searched. */\n  description?: string;\n  disabled?: boolean;\n}\n\nexport interface ComboboxProps {\n  options: ComboboxOption[];\n  value: string | null;\n  onValueChange: (value: string | null) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyText?: string;\n  disabled?: boolean;\n  /** Show a spinner in the list, e.g. while `onSearchChange` fetches. */\n  loading?: boolean;\n  /**\n   * Called as the person types. Pass it to search on a server; the options\n   * you pass back are shown as-is (no client filtering).\n   */\n  onSearchChange?: (search: string) => void;\n  /** Let the person clear the selection by picking it again. */\n  clearable?: boolean;\n  id?: string;\n  className?: string;\n  'aria-invalid'?: boolean;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n  name?: string;\n  required?: boolean;\n}\n\n/** Pick one value from a long or remote list by typing. */\nfunction Combobox({\n  options,\n  value,\n  onValueChange,\n  placeholder = 'Select…',\n  searchPlaceholder = 'Search…',\n  emptyText = 'No matches.',\n  disabled,\n  loading,\n  onSearchChange,\n  clearable = true,\n  id,\n  className,\n  name,\n  required,\n  ...aria\n}: ComboboxProps) {\n  const [open, setOpen] = React.useState(false);\n  const listId = React.useId();\n  const selected = options.find((o) => o.value === value);\n  return (\n    <>\n      {name && <input type=\"hidden\" name={name} value={value ?? ''} disabled={disabled} />}\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <button\n            type=\"button\"\n            role=\"combobox\"\n            aria-required={required || undefined}\n            onKeyDown={(event) => {\n              if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n                event.preventDefault();\n                setOpen(true);\n              }\n            }}\n            id={id}\n            aria-expanded={open}\n            aria-haspopup=\"dialog\"\n            aria-controls={open ? listId : undefined}\n            aria-label={\n              aria['aria-label'] ?? (aria['aria-labelledby'] || id ? undefined : placeholder)\n            }\n            aria-labelledby={aria['aria-labelledby']}\n            aria-describedby={aria['aria-describedby']}\n            data-required={required || undefined}\n            aria-invalid={aria['aria-invalid']}\n            disabled={disabled}\n            data-slot=\"combobox-trigger\"\n            className={cn(\n              fieldClasses,\n              'flex h-9 items-center justify-between gap-2 text-left',\n              !selected && 'text-muted-foreground',\n              className,\n            )}\n          >\n            <span className=\"truncate\">{selected?.label ?? value ?? placeholder}</span>\n            <ChevronsUpDown className=\"size-4 shrink-0 opacity-60\" aria-hidden />\n          </button>\n        </PopoverTrigger>\n        <PopoverContent\n          id={listId}\n          aria-label={aria['aria-label'] ?? placeholder}\n          className=\"w-(--radix-popover-trigger-width) min-w-64 p-0\"\n          align=\"start\"\n        >\n          <Command shouldFilter={!onSearchChange}>\n            <CommandInput\n              aria-label={searchPlaceholder}\n              placeholder={searchPlaceholder}\n              onValueChange={onSearchChange}\n            />\n            <CommandList>\n              {loading ? (\n                <div className=\"flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground\">\n                  <Spinner /> Searching…\n                </div>\n              ) : (\n                <CommandEmpty>{emptyText}</CommandEmpty>\n              )}\n              {!loading && (\n                <CommandGroup>\n                  {options.map((o) => (\n                    <CommandItem\n                      key={o.value}\n                      value={`${o.label} ${o.description ?? ''} ${o.value}`}\n                      disabled={o.disabled}\n                      onSelect={() => {\n                        onValueChange(clearable && o.value === value ? null : o.value);\n                        setOpen(false);\n                      }}\n                    >\n                      <span className=\"grid min-w-0 flex-1\">\n                        <span className=\"truncate\">{o.label}</span>\n                        {o.description && (\n                          <span className=\"truncate text-xs text-muted-foreground\">\n                            {o.description}\n                          </span>\n                        )}\n                      </span>\n                      <Check\n                        aria-hidden\n                        className={cn(\n                          'ml-auto size-4 text-brand',\n                          o.value === value ? 'opacity-100' : 'opacity-0',\n                        )}\n                      />\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              )}\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </>\n  );\n}\n\nexport { Combobox };\n"],"mappings":";;;;;;;;;;;AAsDA,SAAS,SAAS,EAChB,SACA,OACA,eACA,cAAc,WACd,oBAAoB,WACpB,YAAY,eACZ,UACA,SACA,gBACA,YAAY,MACZ,IACA,WACA,MACA,UACA,GAAG,QACa;CAChB,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,KAAK;CAC5C,MAAM,SAAS,MAAM,MAAM;CAC3B,MAAM,WAAW,QAAQ,MAAM,MAAM,EAAE,UAAU,KAAK;CACtD,OACE,qBAAAA,UAAA,EAAA,UAAA,CACG,QAAQ,oBAAC,SAAD;EAAO,MAAK;EAAe;EAAM,OAAO,SAAS;EAAc;CAAW,CAAA,GACnF,qBAAC,SAAD;EAAe;EAAM,cAAc;EAAnC,UAAA,CACE,oBAAC,gBAAD;GAAgB,SAAA;GACd,UAAA,qBAAC,UAAD;IACE,MAAK;IACL,MAAK;IACL,iBAAe,YAAY,KAAA;IAC3B,YAAY,UAAU;KACpB,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;MACxD,MAAM,eAAe;MACrB,QAAQ,IAAI;KACd;IACF;IACI;IACJ,iBAAe;IACf,iBAAc;IACd,iBAAe,OAAO,SAAS,KAAA;IAC/B,cACE,KAAK,kBAAkB,KAAK,sBAAsB,KAAK,KAAA,IAAY;IAErE,mBAAiB,KAAK;IACtB,oBAAkB,KAAK;IACvB,iBAAe,YAAY,KAAA;IAC3B,gBAAc,KAAK;IACT;IACV,aAAU;IACV,WAAW,GACT,cACA,yDACA,CAAC,YAAY,yBACb,SACF;IA5BF,UAAA,CA8BE,oBAAC,QAAD;KAAM,WAAU;KAAY,UAAA,UAAU,SAAS,SAAS;IAAkB,CAAA,GAC1E,oBAAC,gBAAD;KAAgB,WAAU;KAA6B,eAAA;IAAa,CAAA,CAC9D;;EACM,CAAA,GAChB,oBAAC,gBAAD;GACE,IAAI;GACJ,cAAY,KAAK,iBAAiB;GAClC,WAAU;GACV,OAAM;GAEN,UAAA,qBAAC,SAAD;IAAS,cAAc,CAAC;IAAxB,UAAA,CACE,oBAAC,cAAD;KACE,cAAY;KACZ,aAAa;KACb,eAAe;IAChB,CAAA,GACD,qBAAC,aAAD,EAAA,UAAA,CACG,UACC,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,SAAD,CAAU,CAAA,GAAC,aACR;IAEL,CAAA,IAAA,oBAAC,cAAD,EAAA,UAAe,UAAwB,CAAA,GAExC,CAAC,WACA,oBAAC,cAAD,EAAA,UACG,QAAQ,KAAK,MACZ,qBAAC,aAAD;KAEE,OAAO,GAAG,EAAE,MAAM,GAAG,EAAE,eAAe,GAAG,GAAG,EAAE;KAC9C,UAAU,EAAE;KACZ,gBAAgB;MACd,cAAc,aAAa,EAAE,UAAU,QAAQ,OAAO,EAAE,KAAK;MAC7D,QAAQ,KAAK;KACf;KAPF,UAAA,CASE,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACE,oBAAC,QAAD;OAAM,WAAU;OAAY,UAAA,EAAE;MAAY,CAAA,GACzC,EAAE,eACD,oBAAC,QAAD;OAAM,WAAU;OACb,UAAA,EAAE;MACC,CAAA,CAEJ;KACN,CAAA,GAAA,oBAAC,OAAD;MACE,eAAA;MACA,WAAW,GACT,6BACA,EAAE,UAAU,QAAQ,gBAAgB,WACtC;KACD,CAAA,CACU;IAvBN,GAAA,EAAE,KAuBI,CACd,EACW,CAAA,CAEL,EAAA,CAAA,CACN;;EACK,CAAA,CACT;CACT,CAAA,CAAA,EAAA,CAAA;AAEN"}
+{"version":3,"file":"combobox.js","names":["_Fragment"],"sources":["../../src/components/combobox.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronsUpDown from '@burtson-labs/icons/react/chevrons-up-down';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from './command';\nimport { fieldClasses, type FieldWidth, fieldWidthClasses } from './input';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\nimport { Spinner } from './spinner';\n\nexport interface ComboboxOption {\n  value: string;\n  label: string;\n  /** Second line, e.g. an email under a name. Also searched. */\n  description?: string;\n  disabled?: boolean;\n}\n\nexport interface ComboboxProps {\n  options: ComboboxOption[];\n  /** Controlled: the chosen value, or null. Leave out for an uncontrolled combobox. */\n  value?: string | null;\n  /** The starting value when uncontrolled. */\n  defaultValue?: string | null;\n  onValueChange?: (value: string | null) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyText?: string;\n  disabled?: boolean;\n  /** Show a spinner in the list, e.g. while `onSearchChange` fetches. */\n  loading?: boolean;\n  /**\n   * Called as the person types. Pass it to search on a server; the options\n   * you pass back are shown as-is (no client filtering).\n   */\n  onSearchChange?: (search: string) => void;\n  /** Let the person clear the selection by picking it again. */\n  clearable?: boolean;\n  /** How wide the trigger is from 640px up; full width on phones. */\n  width?: FieldWidth;\n  id?: string;\n  className?: string;\n  'aria-invalid'?: boolean;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n  'aria-required'?: boolean;\n  name?: string;\n  required?: boolean;\n}\n\n/**\n * Pick one value from a long or remote list by typing. The ref reaches the\n * trigger button, so a form library or an ErrorSummary can focus it.\n */\nconst Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(function Combobox(\n  {\n    options,\n    value: valueProp,\n    defaultValue = null,\n    onValueChange,\n    placeholder = 'Select…',\n    searchPlaceholder = 'Search…',\n    emptyText = 'No matches.',\n    disabled,\n    loading,\n    onSearchChange,\n    clearable = true,\n    width,\n    id,\n    className,\n    name,\n    required,\n    ...aria\n  },\n  ref,\n) {\n  const [open, setOpen] = React.useState(false);\n  const [own, setOwn] = React.useState<string | null>(defaultValue);\n  const value = valueProp === undefined ? own : valueProp;\n  const setValue = (next: string | null) => {\n    if (valueProp === undefined) setOwn(next);\n    onValueChange?.(next);\n  };\n  const listId = React.useId();\n  const selected = options.find((o) => o.value === value);\n  return (\n    <>\n      {name && <input type=\"hidden\" name={name} value={value ?? ''} disabled={disabled} />}\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <button\n            ref={ref}\n            type=\"button\"\n            role=\"combobox\"\n            aria-required={aria['aria-required'] ?? (required || undefined)}\n            onKeyDown={(event) => {\n              if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n                event.preventDefault();\n                setOpen(true);\n              }\n            }}\n            id={id}\n            aria-expanded={open}\n            aria-haspopup=\"dialog\"\n            aria-controls={open ? listId : undefined}\n            aria-label={\n              aria['aria-label'] ?? (aria['aria-labelledby'] || id ? undefined : placeholder)\n            }\n            aria-labelledby={aria['aria-labelledby']}\n            aria-describedby={aria['aria-describedby']}\n            data-required={required || undefined}\n            aria-invalid={aria['aria-invalid']}\n            disabled={disabled}\n            data-slot=\"combobox-trigger\"\n            className={cn(\n              fieldClasses,\n              'flex h-9 items-center justify-between gap-2 text-left',\n              !selected && 'text-muted-foreground',\n              width && fieldWidthClasses[width],\n              className,\n            )}\n          >\n            <span className=\"truncate\">{selected?.label ?? value ?? placeholder}</span>\n            <ChevronsUpDown className=\"size-4 shrink-0 text-muted-foreground\" aria-hidden />\n          </button>\n        </PopoverTrigger>\n        <PopoverContent\n          id={listId}\n          aria-label={aria['aria-label'] ?? placeholder}\n          className=\"w-(--radix-popover-trigger-width) min-w-64 p-0\"\n          align=\"start\"\n        >\n          <Command shouldFilter={!onSearchChange}>\n            <CommandInput\n              aria-label={searchPlaceholder}\n              placeholder={searchPlaceholder}\n              onValueChange={onSearchChange}\n            />\n            <CommandList>\n              {loading ? (\n                <div className=\"flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground\">\n                  <Spinner /> Searching…\n                </div>\n              ) : (\n                <CommandEmpty>{emptyText}</CommandEmpty>\n              )}\n              {!loading && (\n                <CommandGroup>\n                  {options.map((o) => (\n                    <CommandItem\n                      key={o.value}\n                      value={`${o.label} ${o.description ?? ''} ${o.value}`}\n                      disabled={o.disabled}\n                      onSelect={() => {\n                        setValue(clearable && o.value === value ? null : o.value);\n                        setOpen(false);\n                      }}\n                    >\n                      <span className=\"grid min-w-0 flex-1\">\n                        <span className=\"truncate\">{o.label}</span>\n                        {o.description && (\n                          <span className=\"truncate text-xs text-muted-foreground\">\n                            {o.description}\n                          </span>\n                        )}\n                      </span>\n                      <Check\n                        aria-hidden\n                        className={cn(\n                          'ml-auto size-4 text-brand',\n                          o.value === value ? 'opacity-100' : 'opacity-0',\n                        )}\n                      />\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              )}\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </>\n  );\n});\n\nexport { Combobox };\n"],"mappings":"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"}

package/dist/components/command.d.ts

@@ -1,18 +1,74 @@
-import { Command as CommandPrimitive } from 'cmdk';
 import * as React from 'react';
 import { Dialog } from './dialog';
-declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): React.JSX.Element;
-/** A command palette in a dialog, the usual ⌘K surface. */
-declare function CommandDialog({ title, description, children, className, ...props }: React.ComponentProps<typeof Dialog> & {
+declare const Command: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref"> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface CommandDialogProps extends React.ComponentProps<typeof Dialog> {
     title?: string;
     description?: string;
     className?: string;
-}): React.JSX.Element;
-declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): React.JSX.Element;
-declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): React.JSX.Element;
-declare function CommandEmpty(props: React.ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element;
-declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): React.JSX.Element;
-declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): React.JSX.Element;
-declare function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): React.JSX.Element;
-declare function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+}
+/** A command palette in a dialog, the usual ⌘K surface. */
+declare function CommandDialog({ title, description, children, className, ...props }: CommandDialogProps): React.JSX.Element;
+/**
+ * The row is the field (icon + input, ruled off from the list); the input
+ * itself draws no border or outline, whatever the host page's CSS says.
+ */
+declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & {
+    asChild?: boolean;
+}, "ref">, "value" | "type" | "onChange"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const CommandList: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref"> & {
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref">, "value" | "heading"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref"> & {
+    alwaysRender?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** A row: 32px (44px on touch screens), 8px radius, a fill when active. */
+declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref">, "value" | "onSelect" | "disabled"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandShortcut: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, };

package/dist/components/command.js

@@ -1,17 +1,19 @@
-import { cn } from "../lib/utils.js";
+"use client";
+import { cn, noOutlineClasses } from "../lib/utils.js";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog.js";
-import "react";
+import { Command as pkg } from "../primitives/vendor/cmdk/index.js";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Search from "@burtson-labs/icons/react/search";
-import { Command } from "cmdk";
 //#region src/components/command.tsx
-function Command$1({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Command, {
+var Command = React.forwardRef(function Command({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(pkg, {
+		ref,
 		"data-slot": "command",
 		className: cn("flex h-full w-full flex-col overflow-hidden rounded-lg bg-surface-raised text-popover-foreground has-[[cmdk-input]:focus-visible]:border-ring", className),
 		...props
 	});
-}
+});
 /** A command palette in a dialog, the usual ⌘K surface. */
 function CommandDialog({ title = "Command palette", description = "Search for a page or an action", children, className, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog, {
@@ -22,70 +24,82 @@ function CommandDialog({ title = "Command palette", description = "Search for a
 			children: [/* @__PURE__ */ jsxs(DialogHeader, {
 				className: "sr-only",
 				children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { children: description })]
-			}), /* @__PURE__ */ jsx(Command$1, {
+			}), /* @__PURE__ */ jsx(Command, {
 				className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-2",
 				children
 			})]
 		})
 	});
 }
-function CommandInput({ className, ...props }) {
+/**
+* The row is the field (icon + input, ruled off from the list); the input
+* itself draws no border or outline, whatever the host page's CSS says.
+*/
+var CommandInput = React.forwardRef(function CommandInput({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "command-input-wrapper",
-		className: "flex h-11 items-center gap-2 border-b px-3",
+		className: "flex items-center gap-2 border-b px-3",
 		children: [/* @__PURE__ */ jsx(Search, {
-			className: "size-4 shrink-0 opacity-50",
+			className: "size-4 shrink-0 text-muted-foreground",
 			"aria-hidden": true
-		}), /* @__PURE__ */ jsx(Command.Input, {
+		}), /* @__PURE__ */ jsx(pkg.Input, {
+			ref,
 			"data-slot": "command-input",
-			className: cn("flex h-10 w-full rounded-none border-0 bg-transparent py-3 text-sm shadow-none outline-hidden! placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className),
+			className: cn("flex h-11 w-full rounded-none border-0 bg-transparent py-3 text-base shadow-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm", noOutlineClasses, className),
 			...props
 		})]
 	});
-}
-function CommandList({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Command.List, {
+});
+var CommandList = React.forwardRef(function CommandList({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(pkg.List, {
+		ref,
 		"data-slot": "command-list",
 		className: cn("max-h-80 scroll-py-1 overflow-x-hidden overflow-y-auto p-1", className),
 		...props
 	});
-}
-function CommandEmpty(props) {
-	return /* @__PURE__ */ jsx(Command.Empty, {
+});
+var CommandEmpty = React.forwardRef(function CommandEmpty({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(pkg.Empty, {
+		ref,
 		"data-slot": "command-empty",
-		className: "py-6 text-center text-sm text-muted-foreground",
+		className: cn("py-6 text-center text-sm text-muted-foreground", className),
 		...props
 	});
-}
-function CommandGroup({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Command.Group, {
+});
+var CommandGroup = React.forwardRef(function CommandGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(pkg.Group, {
+		ref,
 		"data-slot": "command-group",
-		className: cn("overflow-hidden py-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", className),
+		className: cn("overflow-hidden py-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:tracking-[0.06em] [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase", className),
 		...props
 	});
-}
-function CommandSeparator({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Command.Separator, {
+});
+var CommandSeparator = React.forwardRef(function CommandSeparator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(pkg.Separator, {
+		ref,
 		"data-slot": "command-separator",
 		className: cn("-mx-1 h-px bg-border", className),
 		...props
 	});
-}
-function CommandItem({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Command.Item, {
+});
+/** A row: 32px (44px on touch screens), 8px radius, a fill when active. */
+var CommandItem = React.forwardRef(function CommandItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(pkg.Item, {
+		ref,
 		"data-slot": "command-item",
-		className: cn("relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-hidden! select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-secondary data-[selected=true]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
+		className: cn("relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-secondary data-[selected=true]:text-foreground pointer-coarse:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", noOutlineClasses, className),
 		...props
 	});
-}
-function CommandShortcut({ className, ...props }) {
+});
+var CommandShortcut = React.forwardRef(function CommandShortcut({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("span", {
+		ref,
 		"data-slot": "command-shortcut",
 		className: cn("ml-auto rounded-xs border border-border bg-surface-muted px-1.5 font-mono text-[11px] leading-5 text-muted-foreground", className),
 		...props
 	});
-}
+});
 //#endregion
-export { Command$1 as Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
 
 //# sourceMappingURL=command.js.map

package/dist/components/command.js.map

@@ -1 +1 @@
-{"version":3,"file":"command.js","names":["Command","CommandPrimitive"],"sources":["../../src/components/command.tsx"],"sourcesContent":["import Search from '@burtson-labs/icons/react/search';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog';\n\nfunction Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        // Standalone with a border, the box is the field: its border takes the\n        // ring colour while the search input has keyboard focus. In a popover or\n        // dialog there is no border of its own, so the rule draws nothing.\n        'flex h-full w-full flex-col overflow-hidden rounded-lg bg-surface-raised text-popover-foreground has-[[cmdk-input]:focus-visible]:border-ring',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A command palette in a dialog, the usual ⌘K surface. */\nfunction CommandDialog({\n  title = 'Command palette',\n  description = 'Search for a page or an action',\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string;\n  description?: string;\n  className?: string;\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogContent\n        className={cn(\n          'top-[20%] translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-xl sm:p-0',\n          className,\n        )}\n        showCloseButton={false}\n      >\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-2\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    // The row is the field (icon + input, ruled off from the list); the input\n    // itself draws no border or outline, whatever the host page's CSS says.\n    <div data-slot=\"command-input-wrapper\" className=\"flex h-11 items-center gap-2 border-b px-3\">\n      <Search className=\"size-4 shrink-0 opacity-50\" aria-hidden />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          'flex h-10 w-full rounded-none border-0 bg-transparent py-3 text-sm shadow-none outline-hidden! placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn('max-h-80 scroll-py-1 overflow-x-hidden overflow-y-auto p-1', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty(props: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm text-muted-foreground\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        'overflow-hidden py-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn('-mx-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-hidden! select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-secondary data-[selected=true]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        'ml-auto rounded-xs border border-border bg-surface-muted px-1.5 font-mono text-[11px] leading-5 text-muted-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n};\n"],"mappings":";;;;;;;AAQA,SAASA,UAAQ,EAAE,WAAW,GAAG,SAAwD;CACvF,OACE,oBAACC,SAAD;EACE,aAAU;EACV,WAAW,GAIT,iJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,EACrB,QAAQ,mBACR,cAAc,kCACd,UACA,WACA,GAAG,SAKF;CACD,OACE,oBAAC,QAAD;EAAQ,GAAI;EACV,UAAA,qBAAC,eAAD;GACE,WAAW,GACT,wEACA,SACF;GACA,iBAAiB;GALnB,UAAA,CAOE,qBAAC,cAAD;IAAc,WAAU;IAAxB,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GACjC,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CACvC;GACd,CAAA,GAAA,oBAACD,WAAD;IAAS,WAAU;IAChB;GACM,CAAA,CACI;;CACT,CAAA;AAEZ;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OAGE,qBAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;EAAjD,UAAA,CACE,oBAAC,QAAD;GAAQ,WAAU;GAA6B,eAAA;EAAa,CAAA,GAC5D,oBAACC,QAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,oLACA,SACF;GACA,GAAI;EACL,CAAA,CACE;;AAET;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,QAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,OAA4D;CAChF,OACE,oBAACA,QAAiB,OAAlB;EACE,aAAU;EACV,WAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,oBAACA,QAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GACT,2NACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,QAAiB,WAAlB;EACE,aAAU;EACV,WAAW,GAAG,wBAAwB,SAAS;EAC/C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,QAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GACT,yYACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAuC;CAC9E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,yHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"command.js","names":["CommandPrimitive"],"sources":["../../src/components/command.tsx"],"sourcesContent":["import Search from '@burtson-labs/icons/react/search';\nimport * as React from 'react';\n\nimport { cn, noOutlineClasses } from '../lib/utils';\nimport { Command as CommandPrimitive } from '../primitives/vendor/cmdk';\n\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog';\n\nconst Command = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof CommandPrimitive>>(\n  function Command({ className, ...props }, ref) {\n    return (\n      <CommandPrimitive\n        ref={ref}\n        data-slot=\"command\"\n        className={cn(\n          // Standalone with a border, the box is the field: its border takes the\n          // ring colour while the search input has keyboard focus. In a popover or\n          // dialog there is no border of its own, so the rule draws nothing.\n          'flex h-full w-full flex-col overflow-hidden rounded-lg bg-surface-raised text-popover-foreground has-[[cmdk-input]:focus-visible]:border-ring',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nexport interface CommandDialogProps extends React.ComponentProps<typeof Dialog> {\n  title?: string;\n  description?: string;\n  className?: string;\n}\n\n/** A command palette in a dialog, the usual ⌘K surface. */\nfunction CommandDialog({\n  title = 'Command palette',\n  description = 'Search for a page or an action',\n  children,\n  className,\n  ...props\n}: CommandDialogProps) {\n  return (\n    <Dialog {...props}>\n      <DialogContent\n        className={cn(\n          'top-[20%] translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-xl sm:p-0',\n          className,\n        )}\n        showCloseButton={false}\n      >\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-2\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\n/**\n * The row is the field (icon + input, ruled off from the list); the input\n * itself draws no border or outline, whatever the host page's CSS says.\n */\nconst CommandInput = React.forwardRef<\n  HTMLInputElement,\n  React.ComponentProps<typeof CommandPrimitive.Input>\n>(function CommandInput({ className, ...props }, ref) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"flex items-center gap-2 border-b px-3\">\n      <Search className=\"size-4 shrink-0 text-muted-foreground\" aria-hidden />\n      <CommandPrimitive.Input\n        ref={ref}\n        data-slot=\"command-input\"\n        className={cn(\n          'flex h-11 w-full rounded-none border-0 bg-transparent py-3 text-base shadow-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm',\n          noOutlineClasses,\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n});\n\nconst CommandList = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof CommandPrimitive.List>\n>(function CommandList({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.List\n      ref={ref}\n      data-slot=\"command-list\"\n      className={cn('max-h-80 scroll-py-1 overflow-x-hidden overflow-y-auto p-1', className)}\n      {...props}\n    />\n  );\n});\n\nconst CommandEmpty = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof CommandPrimitive.Empty>\n>(function CommandEmpty({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.Empty\n      ref={ref}\n      data-slot=\"command-empty\"\n      className={cn('py-6 text-center text-sm text-muted-foreground', className)}\n      {...props}\n    />\n  );\n});\n\nconst CommandGroup = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof CommandPrimitive.Group>\n>(function CommandGroup({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.Group\n      ref={ref}\n      data-slot=\"command-group\"\n      className={cn(\n        'overflow-hidden py-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:tracking-[0.06em] [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nconst CommandSeparator = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof CommandPrimitive.Separator>\n>(function CommandSeparator({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.Separator\n      ref={ref}\n      data-slot=\"command-separator\"\n      className={cn('-mx-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n});\n\n/** A row: 32px (44px on touch screens), 8px radius, a fill when active. */\nconst CommandItem = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof CommandPrimitive.Item>\n>(function CommandItem({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.Item\n      ref={ref}\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-secondary data-[selected=true]:text-foreground pointer-coarse:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        noOutlineClasses,\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nconst CommandShortcut = React.forwardRef<HTMLSpanElement, React.ComponentProps<'span'>>(\n  function CommandShortcut({ className, ...props }, ref) {\n    return (\n      <span\n        ref={ref}\n        data-slot=\"command-shortcut\"\n        className={cn(\n          'ml-auto rounded-xs border border-border bg-surface-muted px-1.5 font-mono text-[11px] leading-5 text-muted-foreground',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n};\n"],"mappings":";;;;;;;;AAQA,IAAM,UAAU,MAAM,WACpB,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAS,KAAK;CAC7C,OACE,oBAACA,KAAD;EACO;EACL,aAAU;EACV,WAAW,GAIT,iJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;;AASA,SAAS,cAAc,EACrB,QAAQ,mBACR,cAAc,kCACd,UACA,WACA,GAAG,SACkB;CACrB,OACE,oBAAC,QAAD;EAAQ,GAAI;EACV,UAAA,qBAAC,eAAD;GACE,WAAW,GACT,wEACA,SACF;GACA,iBAAiB;GALnB,UAAA,CAOE,qBAAC,cAAD;IAAc,WAAU;IAAxB,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GACjC,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CACvC;GACd,CAAA,GAAA,oBAAC,SAAD;IAAS,WAAU;IAChB;GACM,CAAA,CACI;;CACT,CAAA;AAEZ;;;;;AAMA,IAAM,eAAe,MAAM,WAGzB,SAAS,aAAa,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,qBAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;EAAjD,UAAA,CACE,oBAAC,QAAD;GAAQ,WAAU;GAAwC,eAAA;EAAa,CAAA,GACvE,oBAACA,IAAiB,OAAlB;GACO;GACL,aAAU;GACV,WAAW,GACT,iLACA,kBACA,SACF;GACA,GAAI;EACL,CAAA,CACE;;AAET,CAAC;AAED,IAAM,cAAc,MAAM,WAGxB,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACnD,OACE,oBAACA,IAAiB,MAAlB;EACO;EACL,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,eAAe,MAAM,WAGzB,SAAS,aAAa,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAACA,IAAiB,OAAlB;EACO;EACL,aAAU;EACV,WAAW,GAAG,kDAAkD,SAAS;EACzE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,eAAe,MAAM,WAGzB,SAAS,aAAa,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAACA,IAAiB,OAAlB;EACO;EACL,aAAU;EACV,WAAW,GACT,+SACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,mBAAmB,MAAM,WAG7B,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACxD,OACE,oBAACA,IAAiB,WAAlB;EACO;EACL,aAAU;EACV,WAAW,GAAG,wBAAwB,SAAS;EAC/C,GAAI;CACL,CAAA;AAEL,CAAC;;AAGD,IAAM,cAAc,MAAM,WAGxB,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACnD,OACE,oBAACA,IAAiB,MAAlB;EACO;EACL,aAAU;EACV,WAAW,GACT,iZACA,kBACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,kBAAkB,MAAM,WAC5B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAAC,QAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,yHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF"}

package/dist/components/composer.d.ts

@@ -47,11 +47,11 @@ export declare function acceptsFile(file: Pick<File, 'name' | 'type'>, accept?:
  * The message box: grows with its text, Enter sends, Shift+Enter adds a
  * line, and it never sends mid-composition (IME input).
  */
-declare function Composer({ onSubmit, onSubmitError, submitErrorText, value: controlled, onValueChange, streaming, onStop, disabled, placeholder, attachments, attachmentCount, canSubmit, actions, label, onAttach, accept, multiple, attachLabel, className, ...props }: ComposerProps): React.JSX.Element;
+declare const Composer: React.ForwardRefExoticComponent<Omit<ComposerProps, "ref"> & React.RefAttributes<HTMLFormElement>>;
 export interface SuggestionsProps extends Omit<React.ComponentProps<'div'>, 'onSelect'> {
     items: string[];
     onSelect: (item: string) => void;
 }
 /** Starter prompts as chips. */
-declare function Suggestions({ items, onSelect, className, ...props }: SuggestionsProps): React.JSX.Element;
+declare const Suggestions: React.ForwardRefExoticComponent<Omit<SuggestionsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Composer, Suggestions };

package/dist/components/composer.js

@@ -1,4 +1,5 @@
-import { cn } from "../lib/utils.js";
+"use client";
+import { cn, focusRingClasses, noOutlineClasses } from "../lib/utils.js";
 import { Button } from "./button.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -17,7 +18,7 @@ function acceptsFile(file, accept) {
 * The message box: grows with its text, Enter sends, Shift+Enter adds a
 * line, and it never sends mid-composition (IME input).
 */
-function Composer({ onSubmit, onSubmitError, submitErrorText = "Message could not be sent. Your draft is saved here. Try again.", value: controlled, onValueChange, streaming = false, onStop, disabled = false, placeholder = "Ask anything…", attachments, attachmentCount = 0, canSubmit = true, actions, label = "Message", onAttach, accept, multiple = true, attachLabel = "Attach files", className, ...props }) {
+var Composer = React.forwardRef(function Composer({ onSubmit, onSubmitError, submitErrorText = "Message could not be sent. Your draft is saved here. Try again.", value: controlled, onValueChange, streaming = false, onStop, disabled = false, placeholder = "Ask anything…", attachments, attachmentCount = 0, canSubmit = true, actions, label = "Message", onAttach, accept, multiple = true, attachLabel = "Attach files", className, ...props }, ref) {
 	const fileInput = React.useRef(null);
 	const [dragging, setDragging] = React.useState(false);
 	const dragDepth = React.useRef(0);
@@ -68,6 +69,7 @@ function Composer({ onSubmit, onSubmitError, submitErrorText = "Message could no
 		}
 	};
 	return /* @__PURE__ */ jsxs("form", {
+		ref,
 		"data-slot": "composer",
 		"data-dragging": dragging || void 0,
 		onSubmit: (e) => {
@@ -128,7 +130,7 @@ function Composer({ onSubmit, onSubmitError, submitErrorText = "Message could no
 						send();
 					}
 				},
-				className: "field-sizing-content max-h-48 min-h-9 w-full resize-none rounded-none border-0 bg-transparent px-2 py-1.5 text-base sm:text-sm leading-6 shadow-none outline-hidden! placeholder:text-muted-foreground disabled:cursor-not-allowed"
+				className: cn("field-sizing-content max-h-48 min-h-9 w-full resize-none rounded-none border-0 bg-transparent px-2 py-1.5 text-base sm:text-sm leading-6 shadow-none placeholder:text-muted-foreground disabled:cursor-not-allowed pointer-coarse:min-h-11 pointer-coarse:py-2.5", noOutlineClasses)
 			}),
 			failed && /* @__PURE__ */ jsx("p", {
 				id: errorId,
@@ -192,10 +194,11 @@ function Composer({ onSubmit, onSubmitError, submitErrorText = "Message could no
 			})
 		]
 	});
-}
+});
 /** Starter prompts as chips. */
-function Suggestions({ items, onSelect, className, ...props }) {
+var Suggestions = React.forwardRef(function Suggestions({ items, onSelect, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "suggestions",
 		role: "group",
 		"aria-label": "Suggestions",
@@ -204,11 +207,11 @@ function Suggestions({ items, onSelect, className, ...props }) {
 		children: items.map((item) => /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick: () => onSelect(item),
-			className: "animate-in rounded-full border border-border-strong bg-surface px-3 py-1.5 text-[13px] text-foreground outline-none transition-colors hover:border-brand/40 hover:bg-brand-soft hover:text-brand-soft-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20",
+			className: cn("animate-in rounded-full border border-border-strong bg-surface px-3 py-1.5 text-[13px] text-foreground transition-colors hover:border-brand/40 hover:bg-brand-soft hover:text-brand-soft-foreground pointer-coarse:min-h-11", focusRingClasses),
 			children: item
 		}, item))
 	});
-}
+});
 //#endregion
 export { Composer, Suggestions, acceptsFile };
 

package/dist/components/composer.js.map

@@ -1 +1 @@
-{"version":3,"file":"composer.js","names":["_Fragment"],"sources":["../../src/components/composer.tsx"],"sourcesContent":["import ArrowUp from '@burtson-labs/icons/react/arrow-up';\nimport Paperclip from '@burtson-labs/icons/react/paperclip';\nimport Square from '@burtson-labs/icons/react/square';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\n\nexport interface ComposerProps extends Omit<React.ComponentProps<'form'>, 'onSubmit' | 'onChange'> {\n  /**\n   * Clears after success. Reject a returned promise to retain the draft. The\n   * text can be empty when `attachmentCount` allows an attachment-only send.\n   */\n  onSubmit: (text: string) => void | Promise<void>;\n  onSubmitError?: (error: unknown) => void;\n  submitErrorText?: string;\n  /** Controlled value; leave out to let the composer keep its own. */\n  value?: string;\n  onValueChange?: (value: string) => void;\n  /** While a reply streams, the send button becomes Stop. */\n  streaming?: boolean;\n  onStop?: () => void;\n  disabled?: boolean;\n  placeholder?: string;\n  /** Attachment chips or a file button, shown under the text. */\n  attachments?: React.ReactNode;\n  /** Attachments ready to send. Above zero, an empty message can be sent. */\n  attachmentCount?: number;\n  /**\n   * Extra gate on sending, e.g. false while an attachment is still parsing.\n   * Unlike `disabled`, the person can keep typing.\n   */\n  canSubmit?: boolean;\n  /** Extra controls left of the send button (model picker, tools). */\n  actions?: React.ReactNode;\n  label?: string;\n  /**\n   * Files the person picked, dropped on the composer or pasted. Setting it\n   * shows a paperclip button. The composer only hands the files over: the\n   * app uploads them and renders their state in `attachments` (an\n   * AttachmentTray), with `attachmentCount` and `canSubmit` for sending.\n   */\n  onAttach?: (files: File[]) => void;\n  /** File input `accept`, e.g. \"image/*,.pdf\". Dropped and pasted files are filtered too. */\n  accept?: string;\n  /** Allow several files at once. Default true. */\n  multiple?: boolean;\n  /** Accessible name of the attach button. */\n  attachLabel?: string;\n}\n\n/** Does `file` match an `accept` list (\"image/*,.pdf,text/plain\")? Empty accepts all. */\nexport function acceptsFile(file: Pick<File, 'name' | 'type'>, accept?: string): boolean {\n  if (!accept?.trim()) return true;\n  const name = file.name.toLowerCase();\n  const type = (file.type || '').toLowerCase();\n  return accept\n    .split(',')\n    .map((a) => a.trim().toLowerCase())\n    .filter(Boolean)\n    .some((rule) =>\n      rule.startsWith('.')\n        ? name.endsWith(rule)\n        : rule.endsWith('/*')\n          ? type.startsWith(rule.slice(0, -1))\n          : type === rule,\n    );\n}\n\n/**\n * The message box: grows with its text, Enter sends, Shift+Enter adds a\n * line, and it never sends mid-composition (IME input).\n */\nfunction Composer({\n  onSubmit,\n  onSubmitError,\n  submitErrorText = 'Message could not be sent. Your draft is saved here. Try again.',\n  value: controlled,\n  onValueChange,\n  streaming = false,\n  onStop,\n  disabled = false,\n  placeholder = 'Ask anything…',\n  attachments,\n  attachmentCount = 0,\n  canSubmit = true,\n  actions,\n  label = 'Message',\n  onAttach,\n  accept,\n  multiple = true,\n  attachLabel = 'Attach files',\n  className,\n  ...props\n}: ComposerProps) {\n  const fileInput = React.useRef<HTMLInputElement>(null);\n  const [dragging, setDragging] = React.useState(false);\n  const dragDepth = React.useRef(0);\n  const attach = (list: FileList | File[] | null | undefined) => {\n    if (!onAttach || !list) return;\n    let files = Array.from(list).filter((f) => acceptsFile(f, accept));\n    if (!multiple) files = files.slice(0, 1);\n    if (files.length) onAttach(files);\n  };\n  const hasFiles = (e: React.DragEvent) =>\n    Array.from(e.dataTransfer?.types ?? []).includes('Files');\n  const [own, setOwn] = React.useState('');\n  const value = controlled ?? own;\n  const [pending, setPending] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n  const sending = React.useRef(false);\n  const latest = React.useRef(value);\n  const mounted = React.useRef(true);\n  const errorId = React.useId();\n  React.useEffect(() => {\n    latest.current = value;\n  }, [value]);\n  React.useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n  const setValue = (v: string) => {\n    if (controlled === undefined) setOwn(v);\n    onValueChange?.(v);\n  };\n  const canSend =\n    canSubmit &&\n    !disabled &&\n    !streaming &&\n    !pending &&\n    (value.trim().length > 0 || attachmentCount > 0);\n  const send = async () => {\n    if (!canSend || sending.current) return;\n    const draft = value;\n    sending.current = true;\n    setFailed(false);\n    setPending(true);\n    try {\n      await onSubmit(draft.trim());\n      if (mounted.current && latest.current === draft) setValue('');\n    } catch (error) {\n      if (mounted.current) setFailed(true);\n      onSubmitError?.(error);\n    } finally {\n      sending.current = false;\n      if (mounted.current) setPending(false);\n    }\n  };\n\n  return (\n    <form\n      data-slot=\"composer\"\n      data-dragging={dragging || undefined}\n      onSubmit={(e) => {\n        e.preventDefault();\n        void send();\n      }}\n      onDragEnter={(e) => {\n        if (!onAttach || disabled || !hasFiles(e)) return;\n        e.preventDefault();\n        dragDepth.current += 1;\n        setDragging(true);\n      }}\n      onDragOver={(e) => {\n        if (!onAttach || disabled || !hasFiles(e)) return;\n        e.preventDefault();\n        e.dataTransfer.dropEffect = 'copy';\n      }}\n      onDragLeave={() => {\n        if (!onAttach) return;\n        dragDepth.current = Math.max(0, dragDepth.current - 1);\n        if (dragDepth.current === 0) setDragging(false);\n      }}\n      onDrop={(e) => {\n        if (!onAttach || disabled) return;\n        e.preventDefault();\n        dragDepth.current = 0;\n        setDragging(false);\n        attach(e.dataTransfer?.files);\n      }}\n      className={cn(\n        // The box is the field: same focus as Input (ring border + 1px inset ring).\n        'relative grid gap-2 rounded-lg border border-input bg-surface p-2 shadow-xs transition-[border-color,box-shadow] has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:inset-ring-1 has-[textarea:focus-visible]:inset-ring-ring dark:bg-surface-raised',\n        'data-[dragging]:border-brand data-[dragging]:inset-ring-1 data-[dragging]:inset-ring-brand',\n        disabled && 'opacity-60',\n        className,\n      )}\n      {...props}\n    >\n      {dragging && (\n        <div\n          aria-hidden\n          className=\"pointer-events-none absolute inset-1 z-10 grid place-items-center rounded-md border border-dashed border-brand/50 bg-brand-soft/80 text-sm font-medium text-brand-soft-foreground\"\n        >\n          Drop files to attach\n        </div>\n      )}\n      <textarea\n        aria-label={label}\n        rows={1}\n        value={value}\n        disabled={disabled || pending}\n        aria-describedby={failed ? errorId : undefined}\n        aria-invalid={failed || undefined}\n        placeholder={placeholder}\n        onChange={(e) => setValue(e.target.value)}\n        onPaste={(e) => {\n          if (!onAttach) return;\n          const files = Array.from(e.clipboardData?.files ?? []);\n          // Only take over the paste when it carries files; text pastes as text.\n          if (files.length) {\n            e.preventDefault();\n            attach(files);\n          }\n        }}\n        onKeyDown={(e) => {\n          if (\n            e.key === 'Enter' &&\n            !e.shiftKey &&\n            !e.nativeEvent.isComposing &&\n            e.nativeEvent.keyCode !== 229\n          ) {\n            e.preventDefault();\n            void send();\n          }\n        }}\n        className=\"field-sizing-content max-h-48 min-h-9 w-full resize-none rounded-none border-0 bg-transparent px-2 py-1.5 text-base sm:text-sm leading-6 shadow-none outline-hidden! placeholder:text-muted-foreground disabled:cursor-not-allowed\"\n      />\n      {failed && (\n        <p id={errorId} role=\"alert\" className=\"px-2 text-sm text-destructive\">\n          {submitErrorText}\n        </p>\n      )}\n      {attachments && <div className=\"flex flex-wrap gap-1.5 px-1\">{attachments}</div>}\n      <div className=\"flex items-center gap-1\">\n        {onAttach && (\n          <>\n            <input\n              ref={fileInput}\n              type=\"file\"\n              hidden\n              tabIndex={-1}\n              accept={accept}\n              multiple={multiple}\n              data-slot=\"composer-file-input\"\n              onChange={(e) => {\n                attach(e.target.files);\n                // Let the same file be picked again after a removal.\n                e.target.value = '';\n              }}\n            />\n            <Button\n              type=\"button\"\n              size=\"icon-sm\"\n              variant=\"ghost\"\n              aria-label={attachLabel}\n              title={attachLabel}\n              disabled={disabled}\n              onClick={() => fileInput.current?.click()}\n              className=\"pointer-coarse:size-11\"\n            >\n              <Paperclip />\n            </Button>\n          </>\n        )}\n        {actions}\n        <div className=\"ml-auto\">\n          {streaming ? (\n            <Button\n              type=\"button\"\n              size=\"icon-sm\"\n              variant=\"secondary\"\n              aria-label=\"Stop\"\n              className=\"pointer-coarse:size-11\"\n              onClick={onStop}\n              disabled={!onStop || disabled}\n            >\n              <Square className=\"fill-current\" />\n            </Button>\n          ) : (\n            <Button\n              type=\"submit\"\n              size=\"icon-sm\"\n              aria-label=\"Send\"\n              className=\"pointer-coarse:size-11\"\n              loading={pending}\n              disabled={!canSend}\n            >\n              <ArrowUp />\n            </Button>\n          )}\n        </div>\n      </div>\n    </form>\n  );\n}\n\nexport interface SuggestionsProps extends Omit<React.ComponentProps<'div'>, 'onSelect'> {\n  items: string[];\n  onSelect: (item: string) => void;\n}\n\n/** Starter prompts as chips. */\nfunction Suggestions({ items, onSelect, className, ...props }: SuggestionsProps) {\n  return (\n    <div\n      data-slot=\"suggestions\"\n      role=\"group\"\n      aria-label=\"Suggestions\"\n      className={cn('flex flex-wrap gap-2', className)}\n      {...props}\n    >\n      {items.map((item) => (\n        <button\n          key={item}\n          type=\"button\"\n          onClick={() => onSelect(item)}\n          className=\"animate-in rounded-full border border-border-strong bg-surface px-3 py-1.5 text-[13px] text-foreground outline-none transition-colors hover:border-brand/40 hover:bg-brand-soft hover:text-brand-soft-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20\"\n        >\n          {item}\n        </button>\n      ))}\n    </div>\n  );\n}\n\nexport { Composer, Suggestions };\n"],"mappings":"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"}
+{"version":3,"file":"composer.js","names":["_Fragment"],"sources":["../../src/components/composer.tsx"],"sourcesContent":["import ArrowUp from '@burtson-labs/icons/react/arrow-up';\nimport Paperclip from '@burtson-labs/icons/react/paperclip';\nimport Square from '@burtson-labs/icons/react/square';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses, noOutlineClasses } from '../lib/utils';\n\nimport { Button } from './button';\n\nexport interface ComposerProps extends Omit<React.ComponentProps<'form'>, 'onSubmit' | 'onChange'> {\n  /**\n   * Clears after success. Reject a returned promise to retain the draft. The\n   * text can be empty when `attachmentCount` allows an attachment-only send.\n   */\n  onSubmit: (text: string) => void | Promise<void>;\n  onSubmitError?: (error: unknown) => void;\n  submitErrorText?: string;\n  /** Controlled value; leave out to let the composer keep its own. */\n  value?: string;\n  onValueChange?: (value: string) => void;\n  /** While a reply streams, the send button becomes Stop. */\n  streaming?: boolean;\n  onStop?: () => void;\n  disabled?: boolean;\n  placeholder?: string;\n  /** Attachment chips or a file button, shown under the text. */\n  attachments?: React.ReactNode;\n  /** Attachments ready to send. Above zero, an empty message can be sent. */\n  attachmentCount?: number;\n  /**\n   * Extra gate on sending, e.g. false while an attachment is still parsing.\n   * Unlike `disabled`, the person can keep typing.\n   */\n  canSubmit?: boolean;\n  /** Extra controls left of the send button (model picker, tools). */\n  actions?: React.ReactNode;\n  label?: string;\n  /**\n   * Files the person picked, dropped on the composer or pasted. Setting it\n   * shows a paperclip button. The composer only hands the files over: the\n   * app uploads them and renders their state in `attachments` (an\n   * AttachmentTray), with `attachmentCount` and `canSubmit` for sending.\n   */\n  onAttach?: (files: File[]) => void;\n  /** File input `accept`, e.g. \"image/*,.pdf\". Dropped and pasted files are filtered too. */\n  accept?: string;\n  /** Allow several files at once. Default true. */\n  multiple?: boolean;\n  /** Accessible name of the attach button. */\n  attachLabel?: string;\n}\n\n/** Does `file` match an `accept` list (\"image/*,.pdf,text/plain\")? Empty accepts all. */\nexport function acceptsFile(file: Pick<File, 'name' | 'type'>, accept?: string): boolean {\n  if (!accept?.trim()) return true;\n  const name = file.name.toLowerCase();\n  const type = (file.type || '').toLowerCase();\n  return accept\n    .split(',')\n    .map((a) => a.trim().toLowerCase())\n    .filter(Boolean)\n    .some((rule) =>\n      rule.startsWith('.')\n        ? name.endsWith(rule)\n        : rule.endsWith('/*')\n          ? type.startsWith(rule.slice(0, -1))\n          : type === rule,\n    );\n}\n\n/**\n * The message box: grows with its text, Enter sends, Shift+Enter adds a\n * line, and it never sends mid-composition (IME input).\n */\nconst Composer = React.forwardRef<HTMLFormElement, ComposerProps>(function Composer(\n  {\n    onSubmit,\n    onSubmitError,\n    submitErrorText = 'Message could not be sent. Your draft is saved here. Try again.',\n    value: controlled,\n    onValueChange,\n    streaming = false,\n    onStop,\n    disabled = false,\n    placeholder = 'Ask anything…',\n    attachments,\n    attachmentCount = 0,\n    canSubmit = true,\n    actions,\n    label = 'Message',\n    onAttach,\n    accept,\n    multiple = true,\n    attachLabel = 'Attach files',\n    className,\n    ...props\n  },\n  ref,\n) {\n  const fileInput = React.useRef<HTMLInputElement>(null);\n  const [dragging, setDragging] = React.useState(false);\n  const dragDepth = React.useRef(0);\n  const attach = (list: FileList | File[] | null | undefined) => {\n    if (!onAttach || !list) return;\n    let files = Array.from(list).filter((f) => acceptsFile(f, accept));\n    if (!multiple) files = files.slice(0, 1);\n    if (files.length) onAttach(files);\n  };\n  const hasFiles = (e: React.DragEvent) =>\n    Array.from(e.dataTransfer?.types ?? []).includes('Files');\n  const [own, setOwn] = React.useState('');\n  const value = controlled ?? own;\n  const [pending, setPending] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n  const sending = React.useRef(false);\n  const latest = React.useRef(value);\n  const mounted = React.useRef(true);\n  const errorId = React.useId();\n  React.useEffect(() => {\n    latest.current = value;\n  }, [value]);\n  React.useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n  const setValue = (v: string) => {\n    if (controlled === undefined) setOwn(v);\n    onValueChange?.(v);\n  };\n  const canSend =\n    canSubmit &&\n    !disabled &&\n    !streaming &&\n    !pending &&\n    (value.trim().length > 0 || attachmentCount > 0);\n  const send = async () => {\n    if (!canSend || sending.current) return;\n    const draft = value;\n    sending.current = true;\n    setFailed(false);\n    setPending(true);\n    try {\n      await onSubmit(draft.trim());\n      if (mounted.current && latest.current === draft) setValue('');\n    } catch (error) {\n      if (mounted.current) setFailed(true);\n      onSubmitError?.(error);\n    } finally {\n      sending.current = false;\n      if (mounted.current) setPending(false);\n    }\n  };\n\n  return (\n    <form\n      ref={ref}\n      data-slot=\"composer\"\n      data-dragging={dragging || undefined}\n      onSubmit={(e) => {\n        e.preventDefault();\n        void send();\n      }}\n      onDragEnter={(e) => {\n        if (!onAttach || disabled || !hasFiles(e)) return;\n        e.preventDefault();\n        dragDepth.current += 1;\n        setDragging(true);\n      }}\n      onDragOver={(e) => {\n        if (!onAttach || disabled || !hasFiles(e)) return;\n        e.preventDefault();\n        e.dataTransfer.dropEffect = 'copy';\n      }}\n      onDragLeave={() => {\n        if (!onAttach) return;\n        dragDepth.current = Math.max(0, dragDepth.current - 1);\n        if (dragDepth.current === 0) setDragging(false);\n      }}\n      onDrop={(e) => {\n        if (!onAttach || disabled) return;\n        e.preventDefault();\n        dragDepth.current = 0;\n        setDragging(false);\n        attach(e.dataTransfer?.files);\n      }}\n      className={cn(\n        // The box is the field: same focus as Input (ring border + 1px inset ring).\n        'relative grid gap-2 rounded-lg border border-input bg-surface p-2 shadow-xs transition-[border-color,box-shadow] has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:inset-ring-1 has-[textarea:focus-visible]:inset-ring-ring dark:bg-surface-raised',\n        'data-[dragging]:border-brand data-[dragging]:inset-ring-1 data-[dragging]:inset-ring-brand',\n        disabled && 'opacity-60',\n        className,\n      )}\n      {...props}\n    >\n      {dragging && (\n        <div\n          aria-hidden\n          className=\"pointer-events-none absolute inset-1 z-10 grid place-items-center rounded-md border border-dashed border-brand/50 bg-brand-soft/80 text-sm font-medium text-brand-soft-foreground\"\n        >\n          Drop files to attach\n        </div>\n      )}\n      <textarea\n        aria-label={label}\n        rows={1}\n        value={value}\n        disabled={disabled || pending}\n        aria-describedby={failed ? errorId : undefined}\n        aria-invalid={failed || undefined}\n        placeholder={placeholder}\n        onChange={(e) => setValue(e.target.value)}\n        onPaste={(e) => {\n          if (!onAttach) return;\n          const files = Array.from(e.clipboardData?.files ?? []);\n          // Only take over the paste when it carries files; text pastes as text.\n          if (files.length) {\n            e.preventDefault();\n            attach(files);\n          }\n        }}\n        onKeyDown={(e) => {\n          if (\n            e.key === 'Enter' &&\n            !e.shiftKey &&\n            !e.nativeEvent.isComposing &&\n            e.nativeEvent.keyCode !== 229\n          ) {\n            e.preventDefault();\n            void send();\n          }\n        }}\n        className={cn(\n          'field-sizing-content max-h-48 min-h-9 w-full resize-none rounded-none border-0 bg-transparent px-2 py-1.5 text-base sm:text-sm leading-6 shadow-none placeholder:text-muted-foreground disabled:cursor-not-allowed pointer-coarse:min-h-11 pointer-coarse:py-2.5',\n          noOutlineClasses,\n        )}\n      />\n      {failed && (\n        <p id={errorId} role=\"alert\" className=\"px-2 text-sm text-destructive\">\n          {submitErrorText}\n        </p>\n      )}\n      {attachments && <div className=\"flex flex-wrap gap-1.5 px-1\">{attachments}</div>}\n      <div className=\"flex items-center gap-1\">\n        {onAttach && (\n          <>\n            <input\n              ref={fileInput}\n              type=\"file\"\n              hidden\n              tabIndex={-1}\n              accept={accept}\n              multiple={multiple}\n              data-slot=\"composer-file-input\"\n              onChange={(e) => {\n                attach(e.target.files);\n                // Let the same file be picked again after a removal.\n                e.target.value = '';\n              }}\n            />\n            <Button\n              type=\"button\"\n              size=\"icon-sm\"\n              variant=\"ghost\"\n              aria-label={attachLabel}\n              title={attachLabel}\n              disabled={disabled}\n              onClick={() => fileInput.current?.click()}\n              className=\"pointer-coarse:size-11\"\n            >\n              <Paperclip />\n            </Button>\n          </>\n        )}\n        {actions}\n        <div className=\"ml-auto\">\n          {streaming ? (\n            <Button\n              type=\"button\"\n              size=\"icon-sm\"\n              variant=\"secondary\"\n              aria-label=\"Stop\"\n              className=\"pointer-coarse:size-11\"\n              onClick={onStop}\n              disabled={!onStop || disabled}\n            >\n              <Square className=\"fill-current\" />\n            </Button>\n          ) : (\n            <Button\n              type=\"submit\"\n              size=\"icon-sm\"\n              aria-label=\"Send\"\n              className=\"pointer-coarse:size-11\"\n              loading={pending}\n              disabled={!canSend}\n            >\n              <ArrowUp />\n            </Button>\n          )}\n        </div>\n      </div>\n    </form>\n  );\n});\n\nexport interface SuggestionsProps extends Omit<React.ComponentProps<'div'>, 'onSelect'> {\n  items: string[];\n  onSelect: (item: string) => void;\n}\n\n/** Starter prompts as chips. */\nconst Suggestions = React.forwardRef<HTMLDivElement, SuggestionsProps>(function Suggestions(\n  { items, onSelect, className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"suggestions\"\n      role=\"group\"\n      aria-label=\"Suggestions\"\n      className={cn('flex flex-wrap gap-2', className)}\n      {...props}\n    >\n      {items.map((item) => (\n        <button\n          key={item}\n          type=\"button\"\n          onClick={() => onSelect(item)}\n          className={cn(\n            'animate-in rounded-full border border-border-strong bg-surface px-3 py-1.5 text-[13px] text-foreground transition-colors hover:border-brand/40 hover:bg-brand-soft hover:text-brand-soft-foreground pointer-coarse:min-h-11',\n            focusRingClasses,\n          )}\n        >\n          {item}\n        </button>\n      ))}\n    </div>\n  );\n});\n\nexport { Composer, Suggestions };\n"],"mappings":"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"}

package/dist/components/connection-status.d.ts

@@ -15,7 +15,7 @@ export interface ConnectionStatusProps extends Omit<React.ComponentProps<'div'>,
     onRetry?: () => void;
 }
 /** A dot and a word for a live connection: model provider, gateway, socket. */
-declare function ConnectionStatus({ state, label, detail, onRetry, ...props }: ConnectionStatusProps): React.JSX.Element;
+declare const ConnectionStatus: React.ForwardRefExoticComponent<Omit<ConnectionStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SyncStatusProps extends Omit<React.ComponentProps<'div'>, 'children'> {
     state: SyncState;
     /** When the last successful sync finished. */
@@ -29,7 +29,7 @@ export interface SyncStatusProps extends Omit<React.ComponentProps<'div'>, 'chil
     formatTime?: (date: Date) => string;
 }
 /** Whether local changes have reached the server. */
-declare function SyncStatus({ state, lastSynced, pendingCount, detail, onRetry, formatTime, ...props }: SyncStatusProps): React.JSX.Element;
+declare const SyncStatus: React.ForwardRefExoticComponent<Omit<SyncStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ConnectionBannerProps extends Omit<React.ComponentProps<'div'>, 'children'> {
     state: ConnectionState;
     /** What still works, e.g. "Messages you send will go out when you reconnect." */
@@ -40,5 +40,5 @@ export interface ConnectionBannerProps extends Omit<React.ComponentProps<'div'>,
  * A full-width notice for connection trouble. It renders nothing while
  * connected, connecting or unknown, so it can stay mounted.
  */
-declare function ConnectionBanner({ state, description, onRetry, className, ...props }: ConnectionBannerProps): React.JSX.Element | null;
+declare const ConnectionBanner: React.ForwardRefExoticComponent<Omit<ConnectionBannerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { ConnectionBanner, ConnectionStatus, SyncStatus };