@flanksource/clicky-ui 0.3.16 → 0.3.18

package/dist/components/ComboboxControl.cjs

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
+const comboboxUtils = require("./combobox-utils.cjs");
+const ComboboxActions = require("./ComboboxActions.cjs");
+const ComboboxTags = require("./ComboboxTags.cjs");
+function ComboboxControl({
+  anchorRef,
+  ariaLabel,
+  ariaRequired,
+  closedLabel,
+  describedBy,
+  disabled,
+  displayValue,
+  effectivePrefix,
+  highlighted,
+  id,
+  inputRef,
+  invalid,
+  label,
+  labelRef,
+  labelWidth,
+  listId,
+  loading,
+  onClear,
+  onInput,
+  onKeyDown,
+  onOpen,
+  onRemoveTag,
+  onToggle,
+  open,
+  options,
+  placeholder,
+  showClear,
+  size,
+  suffix,
+  tagValues,
+  tags
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: anchorRef,
+      "data-jsf-control": true,
+      className: utils.cn(
+        "relative flex items-center",
+        tags && "flex-wrap gap-1 rounded-md border border-input bg-background px-2 py-1 text-foreground focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1",
+        tags && (size ? jsonSchemaFormSize.controlMinHeightClass[size] : "min-h-control-h"),
+        tags && (suffix ? showClear ? "pr-[5.5rem]" : "pr-14" : showClear ? "pr-14" : "pr-8"),
+        tags && invalid && "border-destructive focus-within:ring-destructive",
+        tags && disabled && "cursor-not-allowed opacity-50"
+      ),
+      onMouseDown: (event) => {
+        var _a;
+        if (!tags || event.target.closest("button, input"))
+          return;
+        event.preventDefault();
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+      },
+      children: [
+        label != null && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            ref: labelRef,
+            className: utils.cn(
+              "pointer-events-none whitespace-nowrap font-medium uppercase tracking-wide text-muted-foreground text-[10px]",
+              tags ? "shrink-0" : "absolute left-2 z-10"
+            ),
+            children: label
+          }
+        ),
+        tags && effectivePrefix,
+        tags && /* @__PURE__ */ jsxRuntime.jsx(
+          ComboboxTags.ComboboxTags,
+          {
+            disabled,
+            onRemove: onRemoveTag,
+            options,
+            values: tagValues
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            id,
+            type: "text",
+            role: "combobox",
+            "aria-expanded": open,
+            "aria-controls": listId,
+            "aria-activedescendant": highlighted >= 0 ? `${listId}-${highlighted}` : void 0,
+            "aria-label": ariaLabel,
+            "aria-invalid": invalid || void 0,
+            "aria-required": ariaRequired || void 0,
+            "aria-describedby": describedBy,
+            autoComplete: "off",
+            disabled,
+            placeholder: tags && tagValues.length > 0 ? void 0 : placeholder,
+            value: displayValue,
+            ...!tags && !open && closedLabel ? { title: closedLabel } : {},
+            onChange: (event) => onInput(event.target.value),
+            onFocus: onOpen,
+            onClick: onOpen,
+            onKeyDown,
+            className: utils.cn(
+              tags ? "min-w-28 flex-1 bg-transparent px-1 py-1 text-foreground outline-none" : "w-full rounded-md border border-input bg-background text-foreground",
+              tags ? size ? jsonSchemaFormSize.labelSizeClass[size] : "text-sm" : size ? jsonSchemaFormSize.inputSizeClass[size] : "h-control-h px-control-px text-sm",
+              !tags && effectivePrefix && "pl-8",
+              !tags && (suffix ? showClear ? "pr-[5.5rem]" : "pr-14" : showClear ? "pr-14" : "pr-8"),
+              !tags && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+              !tags && "disabled:cursor-not-allowed disabled:opacity-50",
+              !tags && invalid && "border-destructive focus-visible:ring-destructive"
+            ),
+            style: !tags && label != null ? comboboxUtils.comboboxLabelPadding(label, labelWidth) : void 0
+          }
+        ),
+        !tags && effectivePrefix && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-1.5 flex items-center", children: effectivePrefix }),
+        suffix && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: utils.cn(
+              "absolute flex h-full items-center",
+              showClear ? "right-[3.75rem]" : "right-7"
+            ),
+            children: suffix
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ComboboxActions.ComboboxActions,
+          {
+            disabled,
+            loading,
+            onClear,
+            onToggle,
+            showClear
+          }
+        )
+      ]
+    }
+  );
+}
+exports.ComboboxControl = ComboboxControl;
+//# sourceMappingURL=ComboboxControl.cjs.map

package/dist/components/ComboboxControl.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxControl.cjs","sources":["../../src/components/ComboboxControl.tsx"],"sourcesContent":["import type { KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport {\n  controlMinHeightClass,\n  inputSizeClass,\n  labelSizeClass,\n  type FormSize,\n} from \"./json-schema-form-size\";\nimport type { ComboboxOption } from \"./combobox-types\";\nimport { comboboxLabelPadding } from \"./combobox-utils\";\nimport { ComboboxActions } from \"./ComboboxActions\";\nimport { ComboboxTags } from \"./ComboboxTags\";\n\nexport function ComboboxControl({\n  anchorRef,\n  ariaLabel,\n  ariaRequired,\n  closedLabel,\n  describedBy,\n  disabled,\n  displayValue,\n  effectivePrefix,\n  highlighted,\n  id,\n  inputRef,\n  invalid,\n  label,\n  labelRef,\n  labelWidth,\n  listId,\n  loading,\n  onClear,\n  onInput,\n  onKeyDown,\n  onOpen,\n  onRemoveTag,\n  onToggle,\n  open,\n  options,\n  placeholder,\n  showClear,\n  size,\n  suffix,\n  tagValues,\n  tags,\n}: {\n  anchorRef: RefObject<HTMLDivElement>;\n  ariaLabel: string | undefined;\n  ariaRequired: boolean | undefined;\n  closedLabel: string;\n  describedBy: string | undefined;\n  disabled: boolean | undefined;\n  displayValue: string;\n  effectivePrefix: ReactNode;\n  highlighted: number;\n  id: string | undefined;\n  inputRef: RefObject<HTMLInputElement>;\n  invalid: boolean | undefined;\n  label: ReactNode;\n  labelRef: RefObject<HTMLSpanElement>;\n  labelWidth: number;\n  listId: string | undefined;\n  loading: boolean | undefined;\n  onClear: () => void;\n  onInput: (value: string) => void;\n  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;\n  onOpen: () => void;\n  onRemoveTag: (value: string) => void;\n  onToggle: () => void;\n  open: boolean;\n  options: ComboboxOption[];\n  placeholder: string | undefined;\n  showClear: boolean;\n  size: FormSize | undefined;\n  suffix: ReactNode;\n  tagValues: string[];\n  tags: boolean;\n}) {\n  return (\n    <div\n      ref={anchorRef}\n      data-jsf-control\n      className={cn(\n        \"relative flex items-center\",\n        tags &&\n          \"flex-wrap gap-1 rounded-md border border-input bg-background px-2 py-1 text-foreground focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1\",\n        tags && (size ? controlMinHeightClass[size] : \"min-h-control-h\"),\n        tags &&\n          (suffix\n            ? showClear\n              ? \"pr-[5.5rem]\"\n              : \"pr-14\"\n            : showClear\n              ? \"pr-14\"\n              : \"pr-8\"),\n        tags && invalid && \"border-destructive focus-within:ring-destructive\",\n        tags && disabled && \"cursor-not-allowed opacity-50\",\n      )}\n      onMouseDown={(event) => {\n        if (!tags || (event.target as HTMLElement).closest(\"button, input\"))\n          return;\n        event.preventDefault();\n        inputRef.current?.focus();\n      }}\n    >\n      {label != null && (\n        <span\n          ref={labelRef}\n          className={cn(\n            \"pointer-events-none whitespace-nowrap font-medium uppercase tracking-wide text-muted-foreground text-[10px]\",\n            tags ? \"shrink-0\" : \"absolute left-2 z-10\",\n          )}\n        >\n          {label}\n        </span>\n      )}\n      {tags && effectivePrefix}\n      {tags && (\n        <ComboboxTags\n          disabled={disabled}\n          onRemove={onRemoveTag}\n          options={options}\n          values={tagValues}\n        />\n      )}\n      <input\n        ref={inputRef}\n        id={id}\n        type=\"text\"\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-controls={listId}\n        aria-activedescendant={\n          highlighted >= 0 ? `${listId}-${highlighted}` : undefined\n        }\n        aria-label={ariaLabel}\n        aria-invalid={invalid || undefined}\n        aria-required={ariaRequired || undefined}\n        aria-describedby={describedBy}\n        autoComplete=\"off\"\n        disabled={disabled}\n        placeholder={tags && tagValues.length > 0 ? undefined : placeholder}\n        value={displayValue}\n        {...(!tags && !open && closedLabel ? { title: closedLabel } : {})}\n        onChange={(event) => onInput(event.target.value)}\n        onFocus={onOpen}\n        onClick={onOpen}\n        onKeyDown={onKeyDown}\n        className={cn(\n          tags\n            ? \"min-w-28 flex-1 bg-transparent px-1 py-1 text-foreground outline-none\"\n            : \"w-full rounded-md border border-input bg-background text-foreground\",\n          tags\n            ? size\n              ? labelSizeClass[size]\n              : \"text-sm\"\n            : size\n              ? inputSizeClass[size]\n              : \"h-control-h px-control-px text-sm\",\n          !tags && effectivePrefix && \"pl-8\",\n          !tags &&\n            (suffix\n              ? showClear\n                ? \"pr-[5.5rem]\"\n                : \"pr-14\"\n              : showClear\n                ? \"pr-14\"\n                : \"pr-8\"),\n          !tags &&\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1\",\n          !tags && \"disabled:cursor-not-allowed disabled:opacity-50\",\n          !tags &&\n            invalid &&\n            \"border-destructive focus-visible:ring-destructive\",\n        )}\n        style={\n          !tags && label != null\n            ? comboboxLabelPadding(label, labelWidth)\n            : undefined\n        }\n      />\n      {!tags && effectivePrefix && (\n        <div className=\"absolute inset-y-0 left-1.5 flex items-center\">\n          {effectivePrefix}\n        </div>\n      )}\n      {suffix && (\n        <div\n          className={cn(\n            \"absolute flex h-full items-center\",\n            showClear ? \"right-[3.75rem]\" : \"right-7\",\n          )}\n        >\n          {suffix}\n        </div>\n      )}\n      <ComboboxActions\n        disabled={disabled}\n        loading={loading}\n        onClear={onClear}\n        onToggle={onToggle}\n        showClear={showClear}\n      />\n    </div>\n  );\n}\n"],"names":["jsxs","cn","controlMinHeightClass","jsx","ComboboxTags","labelSizeClass","inputSizeClass","comboboxLabelPadding","ComboboxActions"],"mappings":"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"}

package/dist/components/ComboboxControl.d.ts

@@ -0,0 +1,37 @@
+import { KeyboardEvent, ReactNode, RefObject } from 'react';
+import { FormSize } from './json-schema-form-size';
+import { ComboboxOption } from './combobox-types';
+export declare function ComboboxControl({ anchorRef, ariaLabel, ariaRequired, closedLabel, describedBy, disabled, displayValue, effectivePrefix, highlighted, id, inputRef, invalid, label, labelRef, labelWidth, listId, loading, onClear, onInput, onKeyDown, onOpen, onRemoveTag, onToggle, open, options, placeholder, showClear, size, suffix, tagValues, tags, }: {
+    anchorRef: RefObject<HTMLDivElement>;
+    ariaLabel: string | undefined;
+    ariaRequired: boolean | undefined;
+    closedLabel: string;
+    describedBy: string | undefined;
+    disabled: boolean | undefined;
+    displayValue: string;
+    effectivePrefix: ReactNode;
+    highlighted: number;
+    id: string | undefined;
+    inputRef: RefObject<HTMLInputElement>;
+    invalid: boolean | undefined;
+    label: ReactNode;
+    labelRef: RefObject<HTMLSpanElement>;
+    labelWidth: number;
+    listId: string | undefined;
+    loading: boolean | undefined;
+    onClear: () => void;
+    onInput: (value: string) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onOpen: () => void;
+    onRemoveTag: (value: string) => void;
+    onToggle: () => void;
+    open: boolean;
+    options: ComboboxOption[];
+    placeholder: string | undefined;
+    showClear: boolean;
+    size: FormSize | undefined;
+    suffix: ReactNode;
+    tagValues: string[];
+    tags: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ComboboxControl.d.ts.map

package/dist/components/ComboboxControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxControl.d.ts","sourceRoot":"","sources":["../../src/components/ComboboxControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EAIL,KAAK,QAAQ,EACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAKvD,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,SAAS,EACT,YAAY,EACZ,WAAW,EACX,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,WAAW,EACX,EAAE,EACF,QAAQ,EACR,OAAO,EACP,KAAK,EACL,QAAQ,EACR,UAAU,EACV,MAAM,EACN,OAAO,EACP,OAAO,EACP,OAAO,EACP,SAAS,EACT,MAAM,EACN,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,IAAI,EACJ,MAAM,EACN,SAAS,EACT,IAAI,GACL,EAAE;IACD,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,SAAS,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACtC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B,MAAM,EAAE,SAAS,CAAC;IAClB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;CACf,2CAgIA"}

package/dist/components/ComboboxControl.js

@@ -0,0 +1,145 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { labelSizeClass, inputSizeClass, controlMinHeightClass } from "./json-schema-form-size.js";
+import { comboboxLabelPadding } from "./combobox-utils.js";
+import { ComboboxActions } from "./ComboboxActions.js";
+import { ComboboxTags } from "./ComboboxTags.js";
+function ComboboxControl({
+  anchorRef,
+  ariaLabel,
+  ariaRequired,
+  closedLabel,
+  describedBy,
+  disabled,
+  displayValue,
+  effectivePrefix,
+  highlighted,
+  id,
+  inputRef,
+  invalid,
+  label,
+  labelRef,
+  labelWidth,
+  listId,
+  loading,
+  onClear,
+  onInput,
+  onKeyDown,
+  onOpen,
+  onRemoveTag,
+  onToggle,
+  open,
+  options,
+  placeholder,
+  showClear,
+  size,
+  suffix,
+  tagValues,
+  tags
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: anchorRef,
+      "data-jsf-control": true,
+      className: cn(
+        "relative flex items-center",
+        tags && "flex-wrap gap-1 rounded-md border border-input bg-background px-2 py-1 text-foreground focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1",
+        tags && (size ? controlMinHeightClass[size] : "min-h-control-h"),
+        tags && (suffix ? showClear ? "pr-[5.5rem]" : "pr-14" : showClear ? "pr-14" : "pr-8"),
+        tags && invalid && "border-destructive focus-within:ring-destructive",
+        tags && disabled && "cursor-not-allowed opacity-50"
+      ),
+      onMouseDown: (event) => {
+        var _a;
+        if (!tags || event.target.closest("button, input"))
+          return;
+        event.preventDefault();
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+      },
+      children: [
+        label != null && /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: labelRef,
+            className: cn(
+              "pointer-events-none whitespace-nowrap font-medium uppercase tracking-wide text-muted-foreground text-[10px]",
+              tags ? "shrink-0" : "absolute left-2 z-10"
+            ),
+            children: label
+          }
+        ),
+        tags && effectivePrefix,
+        tags && /* @__PURE__ */ jsx(
+          ComboboxTags,
+          {
+            disabled,
+            onRemove: onRemoveTag,
+            options,
+            values: tagValues
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            id,
+            type: "text",
+            role: "combobox",
+            "aria-expanded": open,
+            "aria-controls": listId,
+            "aria-activedescendant": highlighted >= 0 ? `${listId}-${highlighted}` : void 0,
+            "aria-label": ariaLabel,
+            "aria-invalid": invalid || void 0,
+            "aria-required": ariaRequired || void 0,
+            "aria-describedby": describedBy,
+            autoComplete: "off",
+            disabled,
+            placeholder: tags && tagValues.length > 0 ? void 0 : placeholder,
+            value: displayValue,
+            ...!tags && !open && closedLabel ? { title: closedLabel } : {},
+            onChange: (event) => onInput(event.target.value),
+            onFocus: onOpen,
+            onClick: onOpen,
+            onKeyDown,
+            className: cn(
+              tags ? "min-w-28 flex-1 bg-transparent px-1 py-1 text-foreground outline-none" : "w-full rounded-md border border-input bg-background text-foreground",
+              tags ? size ? labelSizeClass[size] : "text-sm" : size ? inputSizeClass[size] : "h-control-h px-control-px text-sm",
+              !tags && effectivePrefix && "pl-8",
+              !tags && (suffix ? showClear ? "pr-[5.5rem]" : "pr-14" : showClear ? "pr-14" : "pr-8"),
+              !tags && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+              !tags && "disabled:cursor-not-allowed disabled:opacity-50",
+              !tags && invalid && "border-destructive focus-visible:ring-destructive"
+            ),
+            style: !tags && label != null ? comboboxLabelPadding(label, labelWidth) : void 0
+          }
+        ),
+        !tags && effectivePrefix && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-1.5 flex items-center", children: effectivePrefix }),
+        suffix && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute flex h-full items-center",
+              showClear ? "right-[3.75rem]" : "right-7"
+            ),
+            children: suffix
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ComboboxActions,
+          {
+            disabled,
+            loading,
+            onClear,
+            onToggle,
+            showClear
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ComboboxControl
+};
+//# sourceMappingURL=ComboboxControl.js.map

package/dist/components/ComboboxControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxControl.js","sources":["../../src/components/ComboboxControl.tsx"],"sourcesContent":["import type { KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport {\n  controlMinHeightClass,\n  inputSizeClass,\n  labelSizeClass,\n  type FormSize,\n} from \"./json-schema-form-size\";\nimport type { ComboboxOption } from \"./combobox-types\";\nimport { comboboxLabelPadding } from \"./combobox-utils\";\nimport { ComboboxActions } from \"./ComboboxActions\";\nimport { ComboboxTags } from \"./ComboboxTags\";\n\nexport function ComboboxControl({\n  anchorRef,\n  ariaLabel,\n  ariaRequired,\n  closedLabel,\n  describedBy,\n  disabled,\n  displayValue,\n  effectivePrefix,\n  highlighted,\n  id,\n  inputRef,\n  invalid,\n  label,\n  labelRef,\n  labelWidth,\n  listId,\n  loading,\n  onClear,\n  onInput,\n  onKeyDown,\n  onOpen,\n  onRemoveTag,\n  onToggle,\n  open,\n  options,\n  placeholder,\n  showClear,\n  size,\n  suffix,\n  tagValues,\n  tags,\n}: {\n  anchorRef: RefObject<HTMLDivElement>;\n  ariaLabel: string | undefined;\n  ariaRequired: boolean | undefined;\n  closedLabel: string;\n  describedBy: string | undefined;\n  disabled: boolean | undefined;\n  displayValue: string;\n  effectivePrefix: ReactNode;\n  highlighted: number;\n  id: string | undefined;\n  inputRef: RefObject<HTMLInputElement>;\n  invalid: boolean | undefined;\n  label: ReactNode;\n  labelRef: RefObject<HTMLSpanElement>;\n  labelWidth: number;\n  listId: string | undefined;\n  loading: boolean | undefined;\n  onClear: () => void;\n  onInput: (value: string) => void;\n  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;\n  onOpen: () => void;\n  onRemoveTag: (value: string) => void;\n  onToggle: () => void;\n  open: boolean;\n  options: ComboboxOption[];\n  placeholder: string | undefined;\n  showClear: boolean;\n  size: FormSize | undefined;\n  suffix: ReactNode;\n  tagValues: string[];\n  tags: boolean;\n}) {\n  return (\n    <div\n      ref={anchorRef}\n      data-jsf-control\n      className={cn(\n        \"relative flex items-center\",\n        tags &&\n          \"flex-wrap gap-1 rounded-md border border-input bg-background px-2 py-1 text-foreground focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1\",\n        tags && (size ? controlMinHeightClass[size] : \"min-h-control-h\"),\n        tags &&\n          (suffix\n            ? showClear\n              ? \"pr-[5.5rem]\"\n              : \"pr-14\"\n            : showClear\n              ? \"pr-14\"\n              : \"pr-8\"),\n        tags && invalid && \"border-destructive focus-within:ring-destructive\",\n        tags && disabled && \"cursor-not-allowed opacity-50\",\n      )}\n      onMouseDown={(event) => {\n        if (!tags || (event.target as HTMLElement).closest(\"button, input\"))\n          return;\n        event.preventDefault();\n        inputRef.current?.focus();\n      }}\n    >\n      {label != null && (\n        <span\n          ref={labelRef}\n          className={cn(\n            \"pointer-events-none whitespace-nowrap font-medium uppercase tracking-wide text-muted-foreground text-[10px]\",\n            tags ? \"shrink-0\" : \"absolute left-2 z-10\",\n          )}\n        >\n          {label}\n        </span>\n      )}\n      {tags && effectivePrefix}\n      {tags && (\n        <ComboboxTags\n          disabled={disabled}\n          onRemove={onRemoveTag}\n          options={options}\n          values={tagValues}\n        />\n      )}\n      <input\n        ref={inputRef}\n        id={id}\n        type=\"text\"\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-controls={listId}\n        aria-activedescendant={\n          highlighted >= 0 ? `${listId}-${highlighted}` : undefined\n        }\n        aria-label={ariaLabel}\n        aria-invalid={invalid || undefined}\n        aria-required={ariaRequired || undefined}\n        aria-describedby={describedBy}\n        autoComplete=\"off\"\n        disabled={disabled}\n        placeholder={tags && tagValues.length > 0 ? undefined : placeholder}\n        value={displayValue}\n        {...(!tags && !open && closedLabel ? { title: closedLabel } : {})}\n        onChange={(event) => onInput(event.target.value)}\n        onFocus={onOpen}\n        onClick={onOpen}\n        onKeyDown={onKeyDown}\n        className={cn(\n          tags\n            ? \"min-w-28 flex-1 bg-transparent px-1 py-1 text-foreground outline-none\"\n            : \"w-full rounded-md border border-input bg-background text-foreground\",\n          tags\n            ? size\n              ? labelSizeClass[size]\n              : \"text-sm\"\n            : size\n              ? inputSizeClass[size]\n              : \"h-control-h px-control-px text-sm\",\n          !tags && effectivePrefix && \"pl-8\",\n          !tags &&\n            (suffix\n              ? showClear\n                ? \"pr-[5.5rem]\"\n                : \"pr-14\"\n              : showClear\n                ? \"pr-14\"\n                : \"pr-8\"),\n          !tags &&\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1\",\n          !tags && \"disabled:cursor-not-allowed disabled:opacity-50\",\n          !tags &&\n            invalid &&\n            \"border-destructive focus-visible:ring-destructive\",\n        )}\n        style={\n          !tags && label != null\n            ? comboboxLabelPadding(label, labelWidth)\n            : undefined\n        }\n      />\n      {!tags && effectivePrefix && (\n        <div className=\"absolute inset-y-0 left-1.5 flex items-center\">\n          {effectivePrefix}\n        </div>\n      )}\n      {suffix && (\n        <div\n          className={cn(\n            \"absolute flex h-full items-center\",\n            showClear ? \"right-[3.75rem]\" : \"right-7\",\n          )}\n        >\n          {suffix}\n        </div>\n      )}\n      <ComboboxActions\n        disabled={disabled}\n        loading={loading}\n        onClear={onClear}\n        onToggle={onToggle}\n        showClear={showClear}\n      />\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/ComboboxMenu.cjs

@@ -83,28 +83,33 @@ function ComboboxMenu({
                   } : {},
                   onMouseEnter: () => onHighlight(index),
                   className: utils.cn(
-                    "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
+                    "flex cursor-pointer gap-2 rounded-sm px-2 py-1.5 text-sm",
+                    option.description ? "items-start" : "items-center",
                     index === highlighted && "bg-accent",
                     selected && !tristate && "font-medium",
                     option.disabled && "cursor-not-allowed opacity-50"
                   ),
-                  children: tristate ? /* @__PURE__ */ jsxRuntime.jsx(
-                    FilterPill.FilterPill,
-                    {
-                      mode: mode ?? "neutral",
-                      togglePosition: "right",
-                      interactive: false,
-                      label: option.label,
-                      onModeChange: (next) => onSetMode(option.value, next),
-                      className: "w-full justify-between"
-                    }
-                  ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  children: tristate ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      FilterPill.FilterPill,
+                      {
+                        mode: mode ?? "neutral",
+                        togglePosition: "right",
+                        interactive: false,
+                        label: option.label,
+                        onModeChange: (next) => onSetMode(option.value, next),
+                        className: "w-full justify-between"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(ComboboxOptionDescription, { description: option.description })
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
                       Icon.Icon,
                       {
                         icon: UiCheck.UiCheck,
                         className: utils.cn(
                           "shrink-0 text-xs",
+                          option.description && "mt-1",
                           selected ? "opacity-100" : "opacity-0"
                         )
                       }
@@ -113,10 +118,13 @@ function ComboboxMenu({
                       Icon.LabelIcon,
                       {
                         icon: option.icon,
-                        className: "text-sm text-muted-foreground"
+                        className: utils.cn(
+                          "text-sm text-muted-foreground",
+                          option.description && "mt-1"
+                        )
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })
+                    /* @__PURE__ */ jsxRuntime.jsx(ComboboxOptionText, { option })
                   ] })
                 }
               )
@@ -156,5 +164,14 @@ function ComboboxMenu({
     document.body
   );
 }
+function ComboboxOptionText({ option }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate", children: option.label }),
+    /* @__PURE__ */ jsxRuntime.jsx(ComboboxOptionDescription, { description: option.description })
+  ] });
+}
+function ComboboxOptionDescription({ description }) {
+  return description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 block whitespace-pre-line text-xs font-normal leading-4 text-muted-foreground", children: description }) : null;
+}
 exports.ComboboxMenu = ComboboxMenu;
 //# sourceMappingURL=ComboboxMenu.cjs.map

package/dist/components/ComboboxMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxMenu.cjs","sources":["../../src/components/ComboboxMenu.tsx"],"sourcesContent":["import { Fragment, type ReactNode, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { FilterPill } from \"../data/FilterPill\";\nimport { Icon, LabelIcon } from \"../data/Icon\";\nimport { UiCheck } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport type {\n  ComboboxOption,\n  ComboboxTriStateMode,\n} from \"./combobox-types\";\nimport type { ComboboxMenuPosition } from \"./combobox-utils\";\n\nexport function ComboboxMenu({\n  customEntry,\n  filtered,\n  floatingZ,\n  footer,\n  highlighted,\n  isSelected,\n  listId,\n  listRef,\n  loading,\n  menuPos,\n  modes,\n  multiple,\n  onHighlight,\n  onSelect,\n  onSetMode,\n  tristate,\n}: {\n  customEntry: ComboboxOption | null;\n  filtered: ComboboxOption[];\n  floatingZ: number;\n  footer: ReactNode;\n  highlighted: number;\n  isSelected: (value: string) => boolean;\n  listId: string | undefined;\n  listRef: RefObject<HTMLDivElement>;\n  loading: boolean | undefined;\n  menuPos: ComboboxMenuPosition;\n  modes: Record<string, ComboboxTriStateMode>;\n  multiple: boolean;\n  onHighlight: (index: number) => void;\n  onSelect: (option: ComboboxOption) => void;\n  onSetMode: (value: string, mode: string) => void;\n  tristate: boolean;\n}) {\n  return createPortal(\n    <div\n      id={listId}\n      ref={listRef}\n      role=\"listbox\"\n      aria-multiselectable={multiple || undefined}\n      style={{\n        position: \"fixed\",\n        ...(menuPos.top != null\n          ? { top: menuPos.top }\n          : { bottom: menuPos.bottom }),\n        left: menuPos.left,\n        minWidth: menuPos.width,\n        maxWidth: menuPos.maxWidth,\n        maxHeight: menuPos.maxHeight,\n        zIndex: floatingZ,\n      }}\n      className=\"w-max overflow-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\"\n    >\n      {loading && filtered.length === 0 && (\n        <div className=\"px-2 py-4 text-center text-sm text-muted-foreground\">\n          Loading…\n        </div>\n      )}\n      {!loading && filtered.length === 0 && !customEntry && (\n        <div className=\"px-2 py-4 text-center text-sm text-muted-foreground\">\n          No results\n        </div>\n      )}\n      {filtered.map((option, index) => {\n        const selected = isSelected(option.value);\n        const mode = tristate ? modes[option.value] : undefined;\n        const showHeader =\n          option.group != null &&\n          option.group !== filtered[index - 1]?.group;\n        return (\n          <Fragment key={option.value}>\n            {showHeader && (\n              <div\n                role=\"presentation\"\n                className=\"select-none px-2 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\"\n              >\n                {option.group}\n              </div>\n            )}\n            <div\n              id={listId ? `${listId}-${index}` : undefined}\n              role=\"option\"\n              aria-selected={tristate ? mode != null : selected}\n              aria-disabled={option.disabled}\n              {...(mode != null\n                ? {\n                    \"aria-label\": `${option.label}, ${\n                      mode === \"include\" ? \"included\" : \"excluded\"\n                    }`,\n                  }\n                : {})}\n              {...(option.title !== undefined ? { title: option.title } : {})}\n              {...(tristate\n                ? { \"data-filter-option\": option.value }\n                : {})}\n              onMouseDown={(event) => {\n                event.preventDefault();\n                if (!tristate && !option.disabled) onSelect(option);\n              }}\n              {...(tristate\n                ? {\n                    onClick: () => {\n                      if (!option.disabled) onSelect(option);\n                    },\n                  }\n                : {})}\n              onMouseEnter={() => onHighlight(index)}\n              className={cn(\n                \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm\",\n                index === highlighted && \"bg-accent\",\n                selected && !tristate && \"font-medium\",\n                option.disabled && \"cursor-not-allowed opacity-50\",\n              )}\n            >\n              {tristate ? (\n                <FilterPill\n                  mode={mode ?? \"neutral\"}\n                  togglePosition=\"right\"\n                  interactive={false}\n                  label={option.label}\n                  onModeChange={(next) => onSetMode(option.value, next)}\n                  className=\"w-full justify-between\"\n                />\n              ) : (\n                <>\n                  <Icon\n                    icon={UiCheck}\n                    className={cn(\n                      \"shrink-0 text-xs\",\n                      selected ? \"opacity-100\" : \"opacity-0\",\n                    )}\n                  />\n                  <LabelIcon\n                    icon={option.icon}\n                    className=\"text-sm text-muted-foreground\"\n                  />\n                  <span className=\"min-w-0 truncate\">{option.label}</span>\n                </>\n              )}\n            </div>\n          </Fragment>\n        );\n      })}\n      {customEntry && (\n        <div\n          id={listId ? `${listId}-${filtered.length}` : undefined}\n          role=\"option\"\n          aria-selected={false}\n          data-filter-add-custom={customEntry.value}\n          title={customEntry.title}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => onSelect(customEntry)}\n          onMouseEnter={() => onHighlight(filtered.length)}\n          className={cn(\n            \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-primary\",\n            highlighted === filtered.length && \"bg-accent\",\n          )}\n        >\n          <LabelIcon\n            icon={customEntry.icon}\n            className=\"text-sm text-muted-foreground\"\n          />\n          <span className=\"min-w-0 truncate\">{customEntry.label}</span>\n        </div>\n      )}\n      {footer != null && (\n        <div className=\"select-none px-2 py-1.5 text-[11px] text-muted-foreground\">\n          {footer}\n        </div>\n      )}\n    </div>,\n    document.body,\n  );\n}\n"],"names":["createPortal","jsxs","jsx","Fragment","cn","FilterPill","Icon","UiCheck","LabelIcon"],"mappings":"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"}
+{"version":3,"file":"ComboboxMenu.cjs","sources":["../../src/components/ComboboxMenu.tsx"],"sourcesContent":["import { Fragment, type ReactNode, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { FilterPill } from \"../data/FilterPill\";\nimport { Icon, LabelIcon } from \"../data/Icon\";\nimport { UiCheck } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport type {\n  ComboboxOption,\n  ComboboxTriStateMode,\n} from \"./combobox-types\";\nimport type { ComboboxMenuPosition } from \"./combobox-utils\";\n\nexport function ComboboxMenu({\n  customEntry,\n  filtered,\n  floatingZ,\n  footer,\n  highlighted,\n  isSelected,\n  listId,\n  listRef,\n  loading,\n  menuPos,\n  modes,\n  multiple,\n  onHighlight,\n  onSelect,\n  onSetMode,\n  tristate,\n}: {\n  customEntry: ComboboxOption | null;\n  filtered: ComboboxOption[];\n  floatingZ: number;\n  footer: ReactNode;\n  highlighted: number;\n  isSelected: (value: string) => boolean;\n  listId: string | undefined;\n  listRef: RefObject<HTMLDivElement>;\n  loading: boolean | undefined;\n  menuPos: ComboboxMenuPosition;\n  modes: Record<string, ComboboxTriStateMode>;\n  multiple: boolean;\n  onHighlight: (index: number) => void;\n  onSelect: (option: ComboboxOption) => void;\n  onSetMode: (value: string, mode: string) => void;\n  tristate: boolean;\n}) {\n  return createPortal(\n    <div\n      id={listId}\n      ref={listRef}\n      role=\"listbox\"\n      aria-multiselectable={multiple || undefined}\n      style={{\n        position: \"fixed\",\n        ...(menuPos.top != null\n          ? { top: menuPos.top }\n          : { bottom: menuPos.bottom }),\n        left: menuPos.left,\n        minWidth: menuPos.width,\n        maxWidth: menuPos.maxWidth,\n        maxHeight: menuPos.maxHeight,\n        zIndex: floatingZ,\n      }}\n      className=\"w-max overflow-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\"\n    >\n      {loading && filtered.length === 0 && (\n        <div className=\"px-2 py-4 text-center text-sm text-muted-foreground\">\n          Loading…\n        </div>\n      )}\n      {!loading && filtered.length === 0 && !customEntry && (\n        <div className=\"px-2 py-4 text-center text-sm text-muted-foreground\">\n          No results\n        </div>\n      )}\n      {filtered.map((option, index) => {\n        const selected = isSelected(option.value);\n        const mode = tristate ? modes[option.value] : undefined;\n        const showHeader =\n          option.group != null &&\n          option.group !== filtered[index - 1]?.group;\n        return (\n          <Fragment key={option.value}>\n            {showHeader && (\n              <div\n                role=\"presentation\"\n                className=\"select-none px-2 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\"\n              >\n                {option.group}\n              </div>\n            )}\n            <div\n              id={listId ? `${listId}-${index}` : undefined}\n              role=\"option\"\n              aria-selected={tristate ? mode != null : selected}\n              aria-disabled={option.disabled}\n              {...(mode != null\n                ? {\n                    \"aria-label\": `${option.label}, ${\n                      mode === \"include\" ? \"included\" : \"excluded\"\n                    }`,\n                  }\n                : {})}\n              {...(option.title !== undefined ? { title: option.title } : {})}\n              {...(tristate\n                ? { \"data-filter-option\": option.value }\n                : {})}\n              onMouseDown={(event) => {\n                event.preventDefault();\n                if (!tristate && !option.disabled) onSelect(option);\n              }}\n              {...(tristate\n                ? {\n                    onClick: () => {\n                      if (!option.disabled) onSelect(option);\n                    },\n                  }\n                : {})}\n              onMouseEnter={() => onHighlight(index)}\n              className={cn(\n                \"flex cursor-pointer gap-2 rounded-sm px-2 py-1.5 text-sm\",\n                option.description ? \"items-start\" : \"items-center\",\n                index === highlighted && \"bg-accent\",\n                selected && !tristate && \"font-medium\",\n                option.disabled && \"cursor-not-allowed opacity-50\",\n              )}\n            >\n              {tristate ? (\n                <div className=\"min-w-0 flex-1\">\n                  <FilterPill\n                    mode={mode ?? \"neutral\"}\n                    togglePosition=\"right\"\n                    interactive={false}\n                    label={option.label}\n                    onModeChange={(next) => onSetMode(option.value, next)}\n                    className=\"w-full justify-between\"\n                  />\n                  <ComboboxOptionDescription description={option.description} />\n                </div>\n              ) : (\n                <>\n                  <Icon\n                    icon={UiCheck}\n                    className={cn(\n                      \"shrink-0 text-xs\",\n                      option.description && \"mt-1\",\n                      selected ? \"opacity-100\" : \"opacity-0\",\n                    )}\n                  />\n                  <LabelIcon\n                    icon={option.icon}\n                    className={cn(\n                      \"text-sm text-muted-foreground\",\n                      option.description && \"mt-1\",\n                    )}\n                  />\n                  <ComboboxOptionText option={option} />\n                </>\n              )}\n            </div>\n          </Fragment>\n        );\n      })}\n      {customEntry && (\n        <div\n          id={listId ? `${listId}-${filtered.length}` : undefined}\n          role=\"option\"\n          aria-selected={false}\n          data-filter-add-custom={customEntry.value}\n          title={customEntry.title}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => onSelect(customEntry)}\n          onMouseEnter={() => onHighlight(filtered.length)}\n          className={cn(\n            \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-primary\",\n            highlighted === filtered.length && \"bg-accent\",\n          )}\n        >\n          <LabelIcon\n            icon={customEntry.icon}\n            className=\"text-sm text-muted-foreground\"\n          />\n          <span className=\"min-w-0 truncate\">{customEntry.label}</span>\n        </div>\n      )}\n      {footer != null && (\n        <div className=\"select-none px-2 py-1.5 text-[11px] text-muted-foreground\">\n          {footer}\n        </div>\n      )}\n    </div>,\n    document.body,\n  );\n}\n\nfunction ComboboxOptionText({ option }: { option: ComboboxOption }) {\n  return (\n    <span className=\"min-w-0 flex-1\">\n      <span className=\"block truncate\">{option.label}</span>\n      <ComboboxOptionDescription description={option.description} />\n    </span>\n  );\n}\n\nfunction ComboboxOptionDescription({ description }: { description: string | undefined }) {\n  return description ? (\n    <span className=\"mt-0.5 block whitespace-pre-line text-xs font-normal leading-4 text-muted-foreground\">\n      {description}\n    </span>\n  ) : null;\n}\n"],"names":["createPortal","jsxs","jsx","Fragment","cn","FilterPill","Icon","UiCheck","LabelIcon"],"mappings":"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"}

package/dist/components/ComboboxMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxMenu.d.ts","sourceRoot":"","sources":["../../src/components/ComboboxMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMjE,OAAO,KAAK,EACV,cAAc,EACd,oBAAoB,EACrB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE7D,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,QAAQ,EACR,SAAS,EACT,MAAM,EACN,WAAW,EACX,UAAU,EACV,MAAM,EACN,OAAO,EACP,OAAO,EACP,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE;IACD,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACnC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,OAAO,EAAE,oBAAoB,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,OAAO,CAAC;CACnB,+BA4IA"}
+{"version":3,"file":"ComboboxMenu.d.ts","sourceRoot":"","sources":["../../src/components/ComboboxMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMjE,OAAO,KAAK,EACV,cAAc,EACd,oBAAoB,EACrB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE7D,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,QAAQ,EACR,SAAS,EACT,MAAM,EACN,WAAW,EACX,UAAU,EACV,MAAM,EACN,OAAO,EACP,OAAO,EACP,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE;IACD,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACnC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,OAAO,EAAE,oBAAoB,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,OAAO,CAAC;CACnB,+BAoJA"}

package/dist/components/ComboboxMenu.js

@@ -81,28 +81,33 @@ function ComboboxMenu({
                   } : {},
                   onMouseEnter: () => onHighlight(index),
                   className: cn(
-                    "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
+                    "flex cursor-pointer gap-2 rounded-sm px-2 py-1.5 text-sm",
+                    option.description ? "items-start" : "items-center",
                     index === highlighted && "bg-accent",
                     selected && !tristate && "font-medium",
                     option.disabled && "cursor-not-allowed opacity-50"
                   ),
-                  children: tristate ? /* @__PURE__ */ jsx(
-                    FilterPill,
-                    {
-                      mode: mode ?? "neutral",
-                      togglePosition: "right",
-                      interactive: false,
-                      label: option.label,
-                      onModeChange: (next) => onSetMode(option.value, next),
-                      className: "w-full justify-between"
-                    }
-                  ) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                  children: tristate ? /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx(
+                      FilterPill,
+                      {
+                        mode: mode ?? "neutral",
+                        togglePosition: "right",
+                        interactive: false,
+                        label: option.label,
+                        onModeChange: (next) => onSetMode(option.value, next),
+                        className: "w-full justify-between"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(ComboboxOptionDescription, { description: option.description })
+                  ] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
                     /* @__PURE__ */ jsx(
                       Icon,
                       {
                         icon: UiCheck,
                         className: cn(
                           "shrink-0 text-xs",
+                          option.description && "mt-1",
                           selected ? "opacity-100" : "opacity-0"
                         )
                       }
@@ -111,10 +116,13 @@ function ComboboxMenu({
                       LabelIcon,
                       {
                         icon: option.icon,
-                        className: "text-sm text-muted-foreground"
+                        className: cn(
+                          "text-sm text-muted-foreground",
+                          option.description && "mt-1"
+                        )
                       }
                     ),
-                    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: option.label })
+                    /* @__PURE__ */ jsx(ComboboxOptionText, { option })
                   ] })
                 }
               )
@@ -154,6 +162,15 @@ function ComboboxMenu({
     document.body
   );
 }
+function ComboboxOptionText({ option }) {
+  return /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+    /* @__PURE__ */ jsx("span", { className: "block truncate", children: option.label }),
+    /* @__PURE__ */ jsx(ComboboxOptionDescription, { description: option.description })
+  ] });
+}
+function ComboboxOptionDescription({ description }) {
+  return description ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 block whitespace-pre-line text-xs font-normal leading-4 text-muted-foreground", children: description }) : null;
+}
 export {
   ComboboxMenu
 };