@uipath/apollo-wind 2.55.0 → 2.57.0

package/dist/components/ui/model-picker/primitives/OptionList.js

@@ -0,0 +1,242 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { Shield } from "lucide-react";
+import react, { useEffect, useMemo, useRef } from "react";
+import { DEFAULT_MODEL_PICKER_LABELS } from "../labels.js";
+import { GroupHeader } from "./GroupHeader.js";
+import { DENSE_OPTION_HEIGHT, FULL_OPTION_HEIGHT, ModelOptionRow } from "./ModelOptionRow.js";
+const BYO_GROUP_KEY = 'byo';
+function isCollapsibleGroup(groupKey) {
+    return groupKey === BYO_GROUP_KEY;
+}
+const DEFAULT_LIST_MAX_HEIGHT = 362;
+function groupLeadingIcon(groupKey) {
+    if (groupKey === BYO_GROUP_KEY) return /*#__PURE__*/ jsx(Shield, {
+        className: "size-3.5"
+    });
+    return null;
+}
+const GROUP_HINT_KEYS = {
+    recommended: 'recommendedGroupHint',
+    preview: 'previewGroupHint',
+    byo: 'byoGroupHint',
+    more: 'moreGroupHint',
+    deprecating: 'deprecatingGroupHint'
+};
+function groupHint(groupKey, labels) {
+    const key = GROUP_HINT_KEYS[groupKey];
+    return key ? labels[key] : void 0;
+}
+function countLabel(n, labels) {
+    return null == n ? void 0 : labels.modelCount(n);
+}
+function optionDomId(listboxId, modelId) {
+    const safe = modelId.replace(/[^A-Za-z0-9-]/g, (c)=>`_${c.codePointAt(0)?.toString(16)}_`);
+    return `${listboxId}-opt-${safe}`;
+}
+const GroupedOptionList = ({ id, options, activeIndex, setActiveIndex, selectedId, onSelect, tagContext, tagVariants, groupCounts, renderRowActions, renderRowMeta, dense, maxHeight = DEFAULT_LIST_MAX_HEIGHT, hideGroupHeaders, hideTagKinds, collapsedGroups, onGroupToggle, 'aria-label': ariaLabel = 'Models' })=>{
+    const labels = tagContext?.labels ?? DEFAULT_MODEL_PICKER_LABELS;
+    let lastGroupKey;
+    let headerCount = 0;
+    useEffect(()=>{
+        const model = options[activeIndex];
+        if (!model) return;
+        document.getElementById(optionDomId(id, model.modelId))?.scrollIntoView?.({
+            block: 'nearest'
+        });
+    }, [
+        activeIndex,
+        id,
+        options
+    ]);
+    const derivedCounts = useMemo(()=>{
+        if (groupCounts) return groupCounts;
+        const out = {};
+        for (const o of options)out[o.groupKey] = (out[o.groupKey] ?? 0) + 1;
+        return out;
+    }, [
+        groupCounts,
+        options
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        "aria-label": ariaLabel,
+        className: "overflow-y-auto py-1",
+        "data-slot": "model-picker-listbox",
+        id: id,
+        role: "listbox",
+        style: {
+            maxHeight
+        },
+        children: options.map((opt, i)=>{
+            const showHeader = !hideGroupHeaders && opt.groupKey !== lastGroupKey;
+            const isFirstHeader = showHeader && 0 === headerCount;
+            if (showHeader) headerCount += 1;
+            lastGroupKey = opt.groupKey;
+            const isCollapsible = isCollapsibleGroup(opt.groupKey);
+            const isCollapsed = isCollapsible && (collapsedGroups?.has(opt.groupKey) ?? false);
+            const headerActive = isCollapsed && options[activeIndex]?.groupKey === opt.groupKey;
+            return /*#__PURE__*/ jsxs(react.Fragment, {
+                children: [
+                    showHeader && /*#__PURE__*/ jsx(GroupHeader, {
+                        active: headerActive,
+                        label: opt.groupLabel,
+                        hint: groupHint(opt.groupKey, labels),
+                        count: derivedCounts[opt.groupKey],
+                        countLabel: countLabel(derivedCounts[opt.groupKey], labels),
+                        dense: dense,
+                        isFirst: isFirstHeader,
+                        leadingIcon: groupLeadingIcon(opt.groupKey),
+                        collapsible: isCollapsible,
+                        collapsed: isCollapsed,
+                        onToggle: isCollapsible ? ()=>onGroupToggle?.(opt.groupKey) : void 0
+                    }),
+                    !isCollapsed && /*#__PURE__*/ jsx(ModelOptionRow, {
+                        id: optionDomId(id, opt.modelId),
+                        model: opt,
+                        index: i,
+                        active: i === activeIndex,
+                        selected: opt.modelId === selectedId,
+                        onSelect: onSelect,
+                        onActivate: setActiveIndex,
+                        tagContext: tagContext,
+                        tagVariants: tagVariants,
+                        hideTagKinds: hideTagKinds?.filter((k)=>k === opt.groupKey),
+                        renderMeta: renderRowMeta,
+                        renderActions: renderRowActions,
+                        dense: dense
+                    })
+                ]
+            }, opt.modelId);
+        })
+    });
+};
+const VirtualOptionList = ({ id, options, activeIndex, setActiveIndex, selectedId, onSelect, tagContext, tagVariants, groupCounts, renderRowActions, renderRowMeta, dense, maxHeight = DEFAULT_LIST_MAX_HEIGHT, hideGroupHeaders, hideTagKinds, collapsedGroups, onGroupToggle, 'aria-label': ariaLabel = 'Models' })=>{
+    const labels = tagContext?.labels ?? DEFAULT_MODEL_PICKER_LABELS;
+    const rows = useMemo(()=>{
+        const out = [];
+        let lastGroupKey;
+        let headerCount = 0;
+        const counts = groupCounts ?? {};
+        if (!groupCounts) for (const o of options)counts[o.groupKey] = (counts[o.groupKey] ?? 0) + 1;
+        options.forEach((opt, i)=>{
+            const collapsed = isCollapsibleGroup(opt.groupKey) && (collapsedGroups?.has(opt.groupKey) ?? false);
+            if (!hideGroupHeaders && opt.groupKey !== lastGroupKey) {
+                out.push({
+                    kind: 'header',
+                    key: `h-${opt.groupKey}`,
+                    groupKey: opt.groupKey,
+                    label: opt.groupLabel,
+                    isFirst: 0 === headerCount,
+                    count: counts[opt.groupKey] ?? 0
+                });
+                headerCount += 1;
+            }
+            lastGroupKey = opt.groupKey;
+            if (!collapsed) out.push({
+                kind: 'option',
+                key: opt.modelId,
+                model: opt,
+                index: i
+            });
+        });
+        return out;
+    }, [
+        options,
+        hideGroupHeaders,
+        groupCounts,
+        collapsedGroups
+    ]);
+    const headerHeight = dense ? 32 : 48;
+    const optionHeight = dense ? DENSE_OPTION_HEIGHT : FULL_OPTION_HEIGHT;
+    const parentRef = useRef(null);
+    const virtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: ()=>parentRef.current,
+        estimateSize: (i)=>rows[i]?.kind === 'header' ? headerHeight : optionHeight,
+        overscan: 10
+    });
+    const measure = virtualizer.measureElement;
+    useEffect(()=>{
+        const rowIdx = rows.findIndex((r)=>'option' === r.kind && r.index === activeIndex);
+        if (rowIdx >= 0) virtualizer.scrollToIndex(rowIdx, {
+            align: 'auto'
+        });
+    }, [
+        activeIndex,
+        rows,
+        virtualizer
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        "aria-label": ariaLabel,
+        className: "relative overflow-y-auto py-1",
+        "data-slot": "model-picker-listbox",
+        id: id,
+        ref: parentRef,
+        role: "listbox",
+        style: {
+            maxHeight
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            className: "relative w-full",
+            style: {
+                height: virtualizer.getTotalSize()
+            },
+            children: virtualizer.getVirtualItems().map((vi)=>{
+                const row = rows[vi.index];
+                if (!row) return null;
+                const baseStyle = {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    transform: `translateY(${vi.start}px)`
+                };
+                if ('header' === row.kind) {
+                    const isCollapsible = isCollapsibleGroup(row.groupKey);
+                    const isCollapsed = isCollapsible && (collapsedGroups?.has(row.groupKey) ?? false);
+                    const headerActive = isCollapsed && options[activeIndex]?.groupKey === row.groupKey;
+                    return /*#__PURE__*/ jsx("div", {
+                        "data-index": vi.index,
+                        ref: measure,
+                        style: baseStyle,
+                        children: /*#__PURE__*/ jsx(GroupHeader, {
+                            active: headerActive,
+                            label: row.label,
+                            hint: groupHint(row.groupKey, labels),
+                            count: row.count,
+                            countLabel: countLabel(row.count, labels),
+                            dense: dense,
+                            isFirst: row.isFirst,
+                            leadingIcon: groupLeadingIcon(row.groupKey),
+                            collapsible: isCollapsible,
+                            collapsed: isCollapsed,
+                            onToggle: isCollapsible ? ()=>onGroupToggle?.(row.groupKey) : void 0
+                        })
+                    }, row.key);
+                }
+                return /*#__PURE__*/ jsx("div", {
+                    "data-index": vi.index,
+                    ref: measure,
+                    style: baseStyle,
+                    children: /*#__PURE__*/ jsx(ModelOptionRow, {
+                        id: optionDomId(id, row.model.modelId),
+                        model: row.model,
+                        index: row.index,
+                        active: row.index === activeIndex,
+                        selected: row.model.modelId === selectedId,
+                        onSelect: onSelect,
+                        onActivate: setActiveIndex,
+                        tagContext: tagContext,
+                        tagVariants: tagVariants,
+                        hideTagKinds: hideTagKinds?.filter((k)=>k === row.model.groupKey),
+                        renderMeta: renderRowMeta,
+                        renderActions: renderRowActions,
+                        dense: dense
+                    })
+                }, row.key);
+            })
+        })
+    });
+};
+export { GroupedOptionList, VirtualOptionList, isCollapsibleGroup, optionDomId };

package/dist/components/ui/{lockable-value-field/components/mode-menu-item.cjs → model-picker/primitives/PickerPopup.cjs}

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __webpack_require__ = {};
 (()=>{
     __webpack_require__.d = (exports1, definition)=>{
@@ -24,39 +25,39 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    ModeMenuItem: ()=>ModeMenuItem
+    PickerPopup: ()=>PickerPopup
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_dropdown_menu_cjs_namespaceObject = require("../../dropdown-menu.cjs");
+const external_popover_cjs_namespaceObject = require("../../popover.cjs");
 const index_cjs_namespaceObject = require("../../../../lib/index.cjs");
-function ModeMenuItem({ icon: Icon, label, description, active, onClick }) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuItem, {
-        className: "flex-col items-start gap-0.5 py-2",
-        onClick: onClick,
+const PickerPopup = ({ width, align = 'start', side = 'bottom', sideOffset = 6, header, footer, className, container, onKeyDown, onOpenAutoFocus, 'data-testid': dataTestId, children })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.PopoverContent, {
+        align: align,
+        className: (0, index_cjs_namespaceObject.cn)('flex flex-col overflow-hidden rounded-[10px] p-0 shadow-lg', className),
+        container: container,
+        "data-slot": "model-picker-popup",
+        "data-testid": dataTestId,
+        onKeyDown: onKeyDown,
+        onOpenAutoFocus: onOpenAutoFocus,
+        side: side,
+        sideOffset: sideOffset,
+        style: {
+            width: width ?? 'var(--radix-popover-trigger-width)'
+        },
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                className: "flex items-center gap-2",
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
-                        size: 13,
-                        className: active ? 'text-brand' : 'text-foreground-muted'
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                        className: (0, index_cjs_namespaceObject.cn)('text-xs font-medium', active ? 'text-brand' : 'text-foreground'),
-                        children: label
-                    })
-                ]
+            header,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "min-h-0 flex-1",
+                children: children
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                className: "pl-6 text-[11px] leading-4 text-foreground-subtle",
-                children: description
+            footer && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "border-t border-border bg-popover",
+                children: footer
             })
         ]
     });
-}
-exports.ModeMenuItem = __webpack_exports__.ModeMenuItem;
+exports.PickerPopup = __webpack_exports__.PickerPopup;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "ModeMenuItem"
+    "PickerPopup"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/components/ui/model-picker/primitives/PickerPopup.d.ts

@@ -0,0 +1,39 @@
+import type * as React from 'react';
+import { PopoverContent } from '../../popover';
+export interface PickerPopupProps {
+    /** Optional fixed width. Defaults to the trigger's width. */
+    width?: number | string;
+    align?: React.ComponentProps<typeof PopoverContent>['align'];
+    side?: React.ComponentProps<typeof PopoverContent>['side'];
+    sideOffset?: number;
+    /** Renders above the listbox (e.g. search input). */
+    header?: React.ReactNode;
+    /** Renders below the listbox (e.g. the "Use custom model" CTA). */
+    footer?: React.ReactNode;
+    /** Optional className forwarded to the content for host overrides. */
+    className?: string;
+    /**
+     * Portal target. Hosts rendering inside a shadow root or a VS Code
+     * webview must pass their container so the popup — and the CSS
+     * variables scoped to that root — resolve correctly.
+     */
+    container?: React.ComponentProps<typeof PopoverContent>['container'];
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    /**
+     * Keeps DOM focus on the search input instead of letting Radix move it
+     * to the content root on open — `aria-activedescendant` navigation
+     * depends on focus staying put.
+     */
+    onOpenAutoFocus?: (e: Event) => void;
+    'data-testid'?: string;
+    children: React.ReactNode;
+}
+/**
+ * Dropdown chrome for the ModelPicker: the popover surface plus its
+ * header/footer slots. Must be rendered inside a `<Popover>` — the
+ * trigger, open state and click-outside behaviour belong to Radix.
+ *
+ * Header and footer are slots so consumers can compose their own
+ * pickers without rewriting the popup structure.
+ */
+export declare const PickerPopup: React.FC<PickerPopupProps>;

package/dist/components/ui/model-picker/primitives/PickerPopup.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PopoverContent } from "../../popover.js";
+import { cn } from "../../../../lib/index.js";
+const PickerPopup = ({ width, align = 'start', side = 'bottom', sideOffset = 6, header, footer, className, container, onKeyDown, onOpenAutoFocus, 'data-testid': dataTestId, children })=>/*#__PURE__*/ jsxs(PopoverContent, {
+        align: align,
+        className: cn('flex flex-col overflow-hidden rounded-[10px] p-0 shadow-lg', className),
+        container: container,
+        "data-slot": "model-picker-popup",
+        "data-testid": dataTestId,
+        onKeyDown: onKeyDown,
+        onOpenAutoFocus: onOpenAutoFocus,
+        side: side,
+        sideOffset: sideOffset,
+        style: {
+            width: width ?? 'var(--radix-popover-trigger-width)'
+        },
+        children: [
+            header,
+            /*#__PURE__*/ jsx("div", {
+                className: "min-h-0 flex-1",
+                children: children
+            }),
+            footer && /*#__PURE__*/ jsx("div", {
+                className: "border-t border-border bg-popover",
+                children: footer
+            })
+        ]
+    });
+export { PickerPopup };

package/dist/components/ui/model-picker/primitives/PickerSearchInput.cjs

@@ -0,0 +1,77 @@
+"use strict";
+"use client";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    PickerSearchInput: ()=>PickerSearchInput
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const index_cjs_namespaceObject = require("../../../../lib/index.cjs");
+const PickerSearchInput = ({ value, onChange, onKeyDown, placeholder = 'Search models', 'aria-label': ariaLabel, activeDescendantId, inputRef, listboxId, dense, leading, trailing, className, 'data-testid': dataTestId })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('flex items-center gap-2 border-b border-border bg-popover', dense ? 'p-2.5' : 'p-3', className),
+        "data-slot": "model-picker-toolbar",
+        children: [
+            leading && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "flex shrink-0 items-center",
+                children: leading
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: (0, index_cjs_namespaceObject.cn)('flex min-w-0 flex-1 items-center gap-1.5 rounded-lg border border-border bg-popover px-2.5 transition-colors focus-within:border-ring', dense ? 'py-1' : 'py-1.5'),
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Search, {
+                        "aria-hidden": true,
+                        className: (0, index_cjs_namespaceObject.cn)('shrink-0 text-foreground-subtle', dense ? 'size-4' : 'size-[18px]')
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+                        "aria-activedescendant": activeDescendantId,
+                        "aria-autocomplete": "list",
+                        "aria-controls": listboxId,
+                        "aria-expanded": true,
+                        "aria-label": ariaLabel ?? placeholder,
+                        className: (0, index_cjs_namespaceObject.cn)('min-w-0 flex-1 bg-transparent text-foreground outline-none placeholder:text-foreground-subtle', dense ? 'text-xs' : 'text-sm'),
+                        "data-testid": dataTestId,
+                        onChange: (e)=>onChange(e.target.value),
+                        onKeyDown: onKeyDown,
+                        placeholder: placeholder,
+                        ref: inputRef,
+                        role: "combobox",
+                        value: value
+                    })
+                ]
+            }),
+            trailing && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "flex shrink-0 items-center",
+                children: trailing
+            })
+        ]
+    });
+exports.PickerSearchInput = __webpack_exports__.PickerSearchInput;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "PickerSearchInput"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/model-picker/primitives/PickerSearchInput.d.ts

@@ -0,0 +1,43 @@
+import type * as React from 'react';
+export interface PickerSearchInputProps {
+    value: string;
+    onChange: (next: string) => void;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    placeholder?: string;
+    /** Accessible name for the input. Defaults to the placeholder. */
+    'aria-label'?: string;
+    /**
+     * Pointer to the currently active option's element id. Forwarded to
+     * the input as `aria-activedescendant` so screen readers announce the
+     * highlighted row even though DOM focus stays on the input.
+     */
+    activeDescendantId?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+    listboxId?: string;
+    dense?: boolean;
+    /**
+     * Rendered to the left of the search box, on the same row. Use for an
+     * inline folder picker / scope chip so it shares chrome with the search
+     * field instead of sitting in a separate banner above it.
+     */
+    leading?: React.ReactNode;
+    /**
+     * Rendered to the right of the search box, on the same row. Use for
+     * tiny end-aligned controls like the group-by toggle.
+     */
+    trailing?: React.ReactNode;
+    /** Optional className forwarded to the outer wrapper for host overrides. */
+    className?: string;
+    'data-testid'?: string;
+}
+/**
+ * Toolbar row above the option list: three distinct controls side by
+ * side — [folder pill] [bordered search box] [group-by pills] — each
+ * with its own chrome.
+ *
+ * This is a plain input rather than a `CommandInput`: filtering,
+ * `activeIndex` and keyboard navigation all live in
+ * `useModelPickerState`, so cmdk's own search and roving focus would
+ * duplicate and fight them.
+ */
+export declare const PickerSearchInput: React.FC<PickerSearchInputProps>;

package/dist/components/ui/model-picker/primitives/PickerSearchInput.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Search } from "lucide-react";
+import { cn } from "../../../../lib/index.js";
+const PickerSearchInput = ({ value, onChange, onKeyDown, placeholder = 'Search models', 'aria-label': ariaLabel, activeDescendantId, inputRef, listboxId, dense, leading, trailing, className, 'data-testid': dataTestId })=>/*#__PURE__*/ jsxs("div", {
+        className: cn('flex items-center gap-2 border-b border-border bg-popover', dense ? 'p-2.5' : 'p-3', className),
+        "data-slot": "model-picker-toolbar",
+        children: [
+            leading && /*#__PURE__*/ jsx("div", {
+                className: "flex shrink-0 items-center",
+                children: leading
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: cn('flex min-w-0 flex-1 items-center gap-1.5 rounded-lg border border-border bg-popover px-2.5 transition-colors focus-within:border-ring', dense ? 'py-1' : 'py-1.5'),
+                children: [
+                    /*#__PURE__*/ jsx(Search, {
+                        "aria-hidden": true,
+                        className: cn('shrink-0 text-foreground-subtle', dense ? 'size-4' : 'size-[18px]')
+                    }),
+                    /*#__PURE__*/ jsx("input", {
+                        "aria-activedescendant": activeDescendantId,
+                        "aria-autocomplete": "list",
+                        "aria-controls": listboxId,
+                        "aria-expanded": true,
+                        "aria-label": ariaLabel ?? placeholder,
+                        className: cn('min-w-0 flex-1 bg-transparent text-foreground outline-none placeholder:text-foreground-subtle', dense ? 'text-xs' : 'text-sm'),
+                        "data-testid": dataTestId,
+                        onChange: (e)=>onChange(e.target.value),
+                        onKeyDown: onKeyDown,
+                        placeholder: placeholder,
+                        ref: inputRef,
+                        role: "combobox",
+                        value: value
+                    })
+                ]
+            }),
+            trailing && /*#__PURE__*/ jsx("div", {
+                className: "flex shrink-0 items-center",
+                children: trailing
+            })
+        ]
+    });
+export { PickerSearchInput };

package/dist/components/ui/model-picker/primitives/PickerTrigger.cjs

@@ -0,0 +1,112 @@
+"use strict";
+"use client";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    PickerTrigger: ()=>PickerTrigger_PickerTrigger
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../../../lib/index.cjs");
+const external_labels_cjs_namespaceObject = require("../labels.cjs");
+const external_ModelTagChip_cjs_namespaceObject = require("../ModelTagChip.cjs");
+const external_utils_cjs_namespaceObject = require("../utils.cjs");
+const PickerTrigger_PickerTrigger = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ id, selected, unknownValue, pendingValue, placeholder = 'Select a model', disabled, open, invalid, tagContext, tagVariants, extra, onClick, hideTagKinds, controlsId, describedById, required, className, 'data-testid': dataTestId, ...rest }, ref) {
+    const labels = tagContext?.labels ?? external_labels_cjs_namespaceObject.DEFAULT_MODEL_PICKER_LABELS;
+    const effectiveCtx = tagContext ?? {
+        labels
+    };
+    const inlineTags = selected ? (0, external_utils_cjs_namespaceObject.deriveModelTags)(selected, effectiveCtx).filter((t)=>!hideTagKinds?.includes(t.kind)) : [];
+    const primary = selected ? selected.displayName ?? selected.modelName : null;
+    const ownClick = onClick ? {
+        onClick
+    } : {};
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+        ...rest,
+        ...ownClick,
+        "aria-controls": open && controlsId ? controlsId : void 0,
+        "aria-describedby": describedById,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-invalid": invalid ? true : void 0,
+        "aria-required": required || void 0,
+        role: "combobox",
+        className: (0, index_cjs_namespaceObject.cn)('flex min-h-9 w-full cursor-pointer items-center justify-start gap-3 rounded-md border border-input bg-transparent px-3 py-1 text-left text-sm text-foreground transition-colors', 'focus:ring-2 focus:ring-ring focus:outline-none', 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none', 'disabled:cursor-not-allowed disabled:opacity-50', 'aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'future:h-10 future:gap-4 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:py-2 future:text-sm future:font-normal future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', className),
+        "data-slot": "model-picker-trigger",
+        "data-testid": dataTestId,
+        disabled: disabled,
+        id: id,
+        ref: ref,
+        type: "button",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "flex min-w-0 flex-1 flex-nowrap items-center gap-1.5",
+                children: selected ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "max-w-full truncate text-foreground",
+                            children: primary
+                        }),
+                        inlineTags.map((t)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: "flex shrink-0 items-center",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ModelTagChip_cjs_namespaceObject.ModelTagChip, {
+                                    disableTooltip: true,
+                                    tag: t,
+                                    variants: tagVariants
+                                })
+                            }, `${t.kind}-${t.label}`))
+                    ]
+                }) : pendingValue ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    className: "max-w-full truncate text-foreground",
+                    children: pendingValue
+                }) : unknownValue ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    className: "max-w-full truncate text-error",
+                    title: labels.unknownValueTooltip(unknownValue),
+                    children: unknownValue
+                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    className: "text-foreground-subtle",
+                    children: placeholder
+                })
+            }),
+            extra && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "flex shrink-0 items-center",
+                onClick: (e)=>e.stopPropagation(),
+                children: extra
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
+                "aria-hidden": true,
+                className: (0, index_cjs_namespaceObject.cn)('size-[18px] shrink-0 text-foreground-muted transition-transform duration-150', open && 'rotate-180')
+            })
+        ]
+    });
+});
+exports.PickerTrigger = __webpack_exports__.PickerTrigger;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "PickerTrigger"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});