@uipath/apollo-wind 2.55.0 → 2.56.0

package/dist/components/ui/model-picker/ModelPicker.js

@@ -0,0 +1,451 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Plus } from "lucide-react";
+import react from "react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "../alert-dialog.js";
+import { FormField, FormFieldError, FormFieldLabel } from "../form-field.js";
+import { Popover, PopoverTrigger } from "../popover.js";
+import { Spinner } from "../spinner.js";
+import { cn } from "../../../lib/index.js";
+import { resolveLabels } from "./labels.js";
+import { FolderSwitcher } from "./primitives/FolderSwitcher.js";
+import { defaultRowActions } from "./primitives/ModelOptionRow.js";
+import { GroupedOptionList, VirtualOptionList, optionDomId } from "./primitives/OptionList.js";
+import { PickerPopup } from "./primitives/PickerPopup.js";
+import { PickerSearchInput } from "./primitives/PickerSearchInput.js";
+import { PickerTrigger } from "./primitives/PickerTrigger.js";
+import { useModelPickerState } from "./useModelPickerState.js";
+import { isByoModel, resolveHomeGeography } from "./utils.js";
+const AUTO_VIRTUALIZE_THRESHOLD = 120;
+const ModelPicker_ModelPicker = /*#__PURE__*/ react.forwardRef(function({ models, value, valueConnectionId, onChange, label, ariaLabel, required, placeholder, disabled, invalid, errorText, variant = 'searchable', groupBy = "subscription", allowGroupingChange = true, homeRegion, recommendedModelIds, previewModelIds, filter, badgesFor, customTagsFor, customTagVariants, canManageByo, onUseCustomModel, folders, folder: folderProp, onFolderChange, allFoldersLabel, loading, error, showGroupHeaders = true, popupContainer, onDeleteModel, onEditModel, labels: labelOverrides, slots, testId }, forwardedRef) {
+    const labels = react.useMemo(()=>resolveLabels(labelOverrides), [
+        labelOverrides
+    ]);
+    const defaultLabel = labels.fieldLabel;
+    const resolvedLabel = label ?? defaultLabel;
+    const labelHidden = null === label;
+    const resolvedPlaceholder = placeholder ?? labels.placeholder;
+    const initiallyCollapsedGroups = react.useMemo(()=>[], []);
+    const [internalFolder, setInternalFolder] = react.useState(null);
+    const folderIsControlled = void 0 !== folderProp;
+    const folder = folderIsControlled ? folderProp : internalFolder;
+    const handleFolderChange = react.useCallback((next)=>{
+        if (!folderIsControlled) setInternalFolder(next);
+        onFolderChange?.(next);
+    }, [
+        folderIsControlled,
+        onFolderChange
+    ]);
+    const catalog = models;
+    const effectiveLoading = loading ?? false;
+    const [pendingDelete, setPendingDelete] = react.useState(null);
+    const [deleteError, setDeleteError] = react.useState(null);
+    const pendingDeleteRef = react.useRef(null);
+    pendingDeleteRef.current = pendingDelete;
+    const deleteInFlight = react.useRef(false);
+    const handleDeleteModel = react.useMemo(()=>{
+        if (!onDeleteModel) return;
+        return (m)=>{
+            if (deleteInFlight.current) return;
+            setDeleteError(null);
+            setPendingDelete(m);
+        };
+    }, [
+        onDeleteModel
+    ]);
+    const confirmPendingDelete = react.useCallback(async ()=>{
+        const model = pendingDelete;
+        setPendingDelete(null);
+        if (!model || !onDeleteModel || deleteInFlight.current) return;
+        deleteInFlight.current = true;
+        try {
+            await onDeleteModel(model);
+        } catch (err) {
+            setDeleteError(err instanceof Error ? err : new Error(String(err)));
+        } finally{
+            deleteInFlight.current = false;
+        }
+    }, [
+        pendingDelete,
+        onDeleteModel
+    ]);
+    const effectiveError = error ?? null;
+    const effectiveModels = react.useMemo(()=>catalog.filter((m)=>!m.isBlockedByPolicy), [
+        catalog
+    ]);
+    const state = useModelPickerState({
+        models: effectiveModels,
+        value,
+        valueConnectionId,
+        onChange,
+        groupBy,
+        recommendedModelIds,
+        previewModelIds,
+        filter,
+        initiallyCollapsedGroups,
+        collapsibleGroups: showGroupHeaders,
+        labels
+    });
+    const { open, setOpen, query, setQuery, groupBy: activeGroupBy, setGroupBy, filtered, groupCounts, collapsedGroups, toggleGroup, selected, unknownValue, activeIndex, setActiveIndex, onSearchKeyDown, choose, id, triggerRef, searchRef, activeVisible } = state;
+    const listboxId = `${id}-listbox`;
+    const List = 'virtualized' === variant || filtered.length > AUTO_VIRTUALIZE_THRESHOLD ? VirtualOptionList : GroupedOptionList;
+    const handleTriggerRef = react.useCallback((node)=>{
+        triggerRef.current = node;
+        if ('function' == typeof forwardedRef) forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+    }, [
+        forwardedRef,
+        triggerRef
+    ]);
+    const closePopup = react.useCallback(()=>{
+        setOpen(false);
+        setDeleteError(null);
+    }, [
+        setOpen
+    ]);
+    const handleOpenChange = react.useCallback((next)=>{
+        if (next) return void setOpen(true);
+        if (pendingDeleteRef.current) return;
+        closePopup();
+    }, [
+        setOpen,
+        closePopup
+    ]);
+    const slotCtx = react.useMemo(()=>({
+            selected,
+            close: closePopup
+        }), [
+        selected,
+        closePopup
+    ]);
+    const effectiveCanManageByo = canManageByo ?? false;
+    const effectiveFolders = folders;
+    const listReady = !effectiveLoading && !effectiveError;
+    const handleSearchKeyDown = react.useCallback((e)=>{
+        if (!listReady) {
+            if ('Escape' === e.key) onSearchKeyDown(e);
+            else if ('Enter' === e.key || e.key.startsWith('Arrow')) e.preventDefault();
+            return;
+        }
+        const active = filtered[activeIndex];
+        if (active && activeVisible && effectiveCanManageByo && isByoModel(active)) {
+            if ('Enter' === e.key && e.shiftKey && onEditModel) {
+                e.preventDefault();
+                onEditModel(active);
+                return;
+            }
+            const field = e.currentTarget;
+            const nothingToDelete = field.selectionStart === field.value.length && field.selectionEnd === field.selectionStart;
+            if ('Delete' === e.key && nothingToDelete && handleDeleteModel) {
+                e.preventDefault();
+                handleDeleteModel(active);
+                return;
+            }
+        }
+        onSearchKeyDown(e);
+    }, [
+        listReady,
+        filtered,
+        activeIndex,
+        activeVisible,
+        effectiveCanManageByo,
+        onEditModel,
+        handleDeleteModel,
+        onSearchKeyDown
+    ]);
+    react.useEffect(()=>{
+        if ("u" < typeof process || 'production' === process.env.NODE_ENV || !effectiveFolders) return;
+        const seen = new Set();
+        for (const f of effectiveFolders){
+            if (seen.has(f.id)) return void console.warn(`[ModelPicker] Duplicate folder id "${f.id}" — folder selection will misbehave.`);
+            seen.add(f.id);
+        }
+    }, [
+        effectiveFolders
+    ]);
+    const homeGeography = resolveHomeGeography(homeRegion);
+    const tagContext = react.useMemo(()=>({
+            labels,
+            homeRegion: homeGeography,
+            recommendedModelIds,
+            previewModelIds,
+            badgesFor,
+            customTagsFor
+        }), [
+        labels,
+        homeGeography,
+        recommendedModelIds,
+        previewModelIds,
+        badgesFor,
+        customTagsFor
+    ]);
+    const renderRowActions = react.useMemo(()=>{
+        if (slots?.optionActions) return slots.optionActions;
+        if (!effectiveCanManageByo) return ()=>null;
+        if (!onEditModel && !handleDeleteModel) return ()=>null;
+        return (m)=>defaultRowActions(m, {
+                labels,
+                onEdit: onEditModel,
+                onDelete: handleDeleteModel
+            });
+    }, [
+        slots?.optionActions,
+        effectiveCanManageByo,
+        onEditModel,
+        handleDeleteModel,
+        labels
+    ]);
+    const footerNode = react.useMemo(()=>{
+        if (slots && 'popupFooter' in slots) return slots.popupFooter ? slots.popupFooter(slotCtx) : null;
+        if (!effectiveCanManageByo) return null;
+        const activate = onUseCustomModel;
+        return /*#__PURE__*/ jsx(UseCustomModelFooter, {
+            disabled: !activate,
+            labels: labels,
+            onActivate: ()=>{
+                activate?.();
+                closePopup();
+            }
+        });
+    }, [
+        slots,
+        effectiveCanManageByo,
+        onUseCustomModel,
+        slotCtx,
+        closePopup,
+        labels
+    ]);
+    const pendingValue = effectiveLoading && !selected && value ? value : null;
+    const errorMessage = errorText ?? effectiveError?.message;
+    return /*#__PURE__*/ jsxs(FormField, {
+        className: "w-full",
+        "data-slot": "model-picker",
+        "data-testid": testId,
+        children: [
+            !labelHidden && /*#__PURE__*/ jsx(FormFieldLabel, {
+                htmlFor: `${id}-trigger`,
+                required: required,
+                children: resolvedLabel
+            }),
+            /*#__PURE__*/ jsxs(Popover, {
+                onOpenChange: handleOpenChange,
+                open: open,
+                children: [
+                    /*#__PURE__*/ jsx(PopoverTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsx(PickerTrigger, {
+                            controlsId: listboxId,
+                            describedById: errorMessage ? `${id}-error` : void 0,
+                            disabled: disabled,
+                            extra: slots?.triggerExtra?.(selected),
+                            "aria-label": labelHidden ? ariaLabel ?? defaultLabel : void 0,
+                            id: `${id}-trigger`,
+                            invalid: !!invalid || !!effectiveError || !!unknownValue,
+                            open: open,
+                            pendingValue: pendingValue,
+                            placeholder: resolvedPlaceholder,
+                            ref: handleTriggerRef,
+                            required: required,
+                            selected: selected,
+                            tagContext: tagContext,
+                            tagVariants: customTagVariants,
+                            unknownValue: unknownValue
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(PickerPopup, {
+                        container: popupContainer,
+                        footer: footerNode,
+                        header: /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                slots?.popupHeader?.(),
+                                /*#__PURE__*/ jsx(PickerSearchInput, {
+                                    activeDescendantId: listReady && activeVisible && filtered[activeIndex] ? optionDomId(listboxId, filtered[activeIndex].modelId) : void 0,
+                                    inputRef: searchRef,
+                                    leading: slots?.searchLeading?.() ?? (effectiveFolders && effectiveFolders.length > 0 ? /*#__PURE__*/ jsx(FolderSwitcher, {
+                                        allFoldersLabel: allFoldersLabel ?? labels.allFolders,
+                                        container: popupContainer,
+                                        folders: effectiveFolders,
+                                        onChange: handleFolderChange,
+                                        value: folder ?? null
+                                    }) : void 0),
+                                    listboxId: listboxId,
+                                    onChange: (next)=>{
+                                        setQuery(next);
+                                        setActiveIndex(0);
+                                    },
+                                    onKeyDown: handleSearchKeyDown,
+                                    placeholder: labels.searchPlaceholder,
+                                    trailing: allowGroupingChange ? /*#__PURE__*/ jsx(GroupBySegmented, {
+                                        labels: labels,
+                                        onChange: setGroupBy,
+                                        value: activeGroupBy
+                                    }) : void 0,
+                                    value: query
+                                })
+                            ]
+                        }),
+                        onOpenAutoFocus: (e)=>{
+                            e.preventDefault();
+                            searchRef.current?.focus();
+                        },
+                        children: [
+                            effectiveLoading && /*#__PURE__*/ jsx("div", {
+                                "aria-label": labels.loading,
+                                "aria-live": "polite",
+                                className: "flex justify-center py-6 text-foreground-muted",
+                                role: "status",
+                                children: /*#__PURE__*/ jsx(Spinner, {
+                                    size: "sm"
+                                })
+                            }),
+                            effectiveError && !effectiveLoading && /*#__PURE__*/ jsx("div", {
+                                className: "px-4 py-4 text-center text-sm text-error",
+                                role: "alert",
+                                children: effectiveError.message
+                            }),
+                            deleteError && !effectiveError && /*#__PURE__*/ jsx("div", {
+                                className: "border-b border-border px-4 py-2 text-sm text-error",
+                                role: "alert",
+                                children: deleteError.message
+                            }),
+                            !effectiveLoading && !effectiveError && 0 === filtered.length && /*#__PURE__*/ jsx("div", {
+                                "aria-live": "polite",
+                                className: "py-6 text-center text-sm text-foreground-muted",
+                                role: "status",
+                                children: query.trim() ? labels.emptyNoMatch(query.trim()) : labels.emptyNoModels
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                "aria-atomic": "true",
+                                "aria-live": "polite",
+                                className: "sr-only",
+                                children: effectiveLoading || effectiveError || !(filtered.length > 0) ? '' : 1 === filtered.length ? labels.resultCount(filtered.length) : labels.resultCount(filtered.length)
+                            }),
+                            !effectiveLoading && !effectiveError && filtered.length > 0 && /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx(List, {
+                                        activeIndex: activeIndex,
+                                        "aria-label": labels.listboxLabel,
+                                        collapsedGroups: collapsedGroups,
+                                        groupCounts: groupCounts,
+                                        hideGroupHeaders: !showGroupHeaders || 'flat' === activeGroupBy,
+                                        id: listboxId,
+                                        onGroupToggle: toggleGroup,
+                                        onSelect: choose,
+                                        options: filtered,
+                                        renderRowActions: renderRowActions,
+                                        renderRowMeta: slots?.optionMeta,
+                                        selectedId: selected?.modelId ?? value ?? null,
+                                        setActiveIndex: setActiveIndex,
+                                        tagContext: tagContext,
+                                        tagVariants: customTagVariants
+                                    }),
+                                    slots?.listFooter?.(slotCtx)
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            errorMessage && /*#__PURE__*/ jsx(FormFieldError, {
+                id: `${id}-error`,
+                role: "alert",
+                children: errorMessage
+            }),
+            /*#__PURE__*/ jsx(AlertDialog, {
+                onOpenChange: (next)=>!next && setPendingDelete(null),
+                open: null !== pendingDelete,
+                children: /*#__PURE__*/ jsxs(AlertDialogContent, {
+                    container: popupContainer,
+                    onCloseAutoFocus: (e)=>{
+                        e.preventDefault();
+                        searchRef.current?.focus();
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxs(AlertDialogHeader, {
+                            children: [
+                                /*#__PURE__*/ jsx(AlertDialogTitle, {
+                                    children: labels.deleteConfirmTitle
+                                }),
+                                /*#__PURE__*/ jsx(AlertDialogDescription, {
+                                    children: labels.deleteConfirmMessage(pendingDelete ? pendingDelete.displayName ?? pendingDelete.modelName : '')
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs(AlertDialogFooter, {
+                            children: [
+                                /*#__PURE__*/ jsx(AlertDialogCancel, {
+                                    autoFocus: true,
+                                    children: labels.deleteConfirmCancel
+                                }),
+                                /*#__PURE__*/ jsx(AlertDialogAction, {
+                                    className: "bg-error-background text-error hover:bg-error-background/80",
+                                    onClick: confirmPendingDelete,
+                                    children: labels.deleteConfirmConfirm
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+});
+ModelPicker_ModelPicker.displayName = 'ModelPicker';
+const GroupBySegmented = ({ value, onChange, labels })=>{
+    const groupByOptions = [
+        {
+            key: "subscription",
+            label: labels.groupByCategory
+        },
+        {
+            key: 'vendor',
+            label: labels.groupByProvider
+        }
+    ];
+    return /*#__PURE__*/ jsx("div", {
+        "aria-label": labels.groupByAriaLabel,
+        className: "inline-flex gap-[3px] rounded-lg bg-surface-raised p-[3px]",
+        "data-slot": "model-picker-group-by",
+        role: "group",
+        children: groupByOptions.map((opt)=>{
+            const active = opt.key === value;
+            return /*#__PURE__*/ jsx("button", {
+                "aria-pressed": active,
+                className: cn('cursor-pointer rounded-md px-2.5 py-1.5 text-xs leading-tight font-semibold transition-colors', 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none', active ? 'bg-popover text-brand shadow-sm' : 'text-foreground-muted hover:bg-surface-hover'),
+                onClick: ()=>onChange(opt.key),
+                type: "button",
+                children: opt.label
+            }, opt.key);
+        })
+    });
+};
+const UseCustomModelFooter = ({ onActivate, disabled, labels })=>/*#__PURE__*/ jsxs("button", {
+        className: cn('flex w-full cursor-pointer items-center justify-start gap-3 px-4 py-3 text-left text-brand transition-colors', 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset', 'disabled:cursor-default', disabled ? 'opacity-55' : 'hover:bg-surface-hover'),
+        "data-slot": "model-picker-use-custom-model",
+        disabled: disabled,
+        onClick: disabled ? void 0 : onActivate,
+        title: disabled ? labels.useCustomModelDisabledHint : void 0,
+        type: "button",
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: "flex size-[30px] shrink-0 items-center justify-center rounded-lg bg-brand/10 text-brand",
+                children: /*#__PURE__*/ jsx(Plus, {
+                    className: "size-[18px]"
+                })
+            }),
+            /*#__PURE__*/ jsxs("span", {
+                className: "flex min-w-0 flex-col",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "text-sm leading-snug font-semibold",
+                        children: labels.useCustomModelTitle
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "text-xs leading-snug font-normal text-foreground-muted",
+                        children: labels.useCustomModelSubtitle
+                    })
+                ]
+            })
+        ]
+    });
+export { ModelPicker_ModelPicker as ModelPicker };

package/dist/components/ui/model-picker/ModelTagChip.cjs

@@ -0,0 +1,101 @@
+"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__, {
+    ModelTagChip: ()=>ModelTagChip
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_badge_cjs_namespaceObject = require("../badge.cjs");
+const external_tooltip_cjs_namespaceObject = require("../tooltip.cjs");
+const index_cjs_namespaceObject = require("../../../lib/index.cjs");
+const VARIANT_MAP = {
+    recommended: 'success-mini',
+    preview: 'info-mini',
+    deprecating: 'warning-mini',
+    substituted: 'warning-mini',
+    'out-of-region': 'error-mini',
+    custom: 'mini',
+    thinking: 'info-mini',
+    'cost-basic': 'mini',
+    'cost-standard': 'mini',
+    'cost-premium': 'mini'
+};
+const BADGE_VARIANT = {
+    mini: 'secondary',
+    'info-mini': 'info',
+    'success-mini': 'success',
+    'warning-mini': 'warning',
+    'error-mini': 'error'
+};
+const ICON_MAP = {
+    recommended: external_lucide_react_namespaceObject.CircleCheck,
+    preview: external_lucide_react_namespaceObject.FlaskConical,
+    deprecating: external_lucide_react_namespaceObject.TriangleAlert,
+    substituted: external_lucide_react_namespaceObject.Route,
+    'out-of-region': external_lucide_react_namespaceObject.GlobeLock
+};
+const ModelTagChip = ({ tag, variants, icons, disableTooltip })=>{
+    const variantToken = tag.variant ?? variants?.[tag.kind] ?? VARIANT_MAP[tag.kind] ?? 'mini';
+    const Icon = icons && tag.kind in icons ? icons[tag.kind] : ICON_MAP[tag.kind];
+    const chip = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_badge_cjs_namespaceObject.Badge, {
+        className: (0, index_cjs_namespaceObject.cn)('h-4 gap-0.5 border-transparent px-1.5 py-0 text-[10px] leading-4 font-semibold pointer-events-none', 'mini' === variantToken && 'bg-foreground/10', variantToken),
+        "data-slot": "model-picker-tag",
+        "data-tag-kind": tag.kind,
+        variant: BADGE_VARIANT[variantToken] ?? 'secondary',
+        children: [
+            Icon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
+                className: "size-3 shrink-0"
+            }) : null,
+            tag.label
+        ]
+    });
+    if (tag.tooltip && !disableTooltip) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipProvider, {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.Tooltip, {
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipTrigger, {
+                    asChild: true,
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "inline-flex max-w-full",
+                        children: chip
+                    })
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
+                    side: "top",
+                    children: tag.tooltip
+                })
+            ]
+        })
+    });
+    return chip;
+};
+exports.ModelTagChip = __webpack_exports__.ModelTagChip;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ModelTagChip"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/model-picker/ModelTagChip.d.ts

@@ -0,0 +1,29 @@
+import type * as React from 'react';
+import type { ModelTag } from './types';
+export interface ModelTagChipProps {
+    tag: ModelTag;
+    /**
+     * Optional product-supplied lookup for tag kinds the design system
+     * doesn't know about. Wins over the built-in map for matching keys.
+     * Use when `customTagsFor` introduces a new kind (e.g.
+     * `{ multimodal: 'info-mini', onprem: 'warning-mini' }`).
+     */
+    variants?: Record<string, string>;
+    /**
+     * Optional product-supplied icon lookup for custom tag kinds. Keys
+     * are tag kinds; values are components rendered as the leading icon.
+     * Pass `null` for a kind to suppress the icon on a built-in kind.
+     * Tags without an entry render without an icon.
+     */
+    icons?: Record<string, React.ComponentType<{
+        className?: string;
+    }> | null>;
+    /**
+     * Render the chip without its tooltip. The tooltip trigger is a button, so
+     * a chip shown inside another button — the picker's trigger — would nest
+     * one button in another, which is invalid HTML and breaks hit-testing. The
+     * row chips carry the same tooltips, so nothing is lost.
+     */
+    disableTooltip?: boolean;
+}
+export declare const ModelTagChip: React.FC<ModelTagChipProps>;

package/dist/components/ui/model-picker/ModelTagChip.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleCheck, FlaskConical, GlobeLock, Route, TriangleAlert } from "lucide-react";
+import { Badge } from "../badge.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip.js";
+import { cn } from "../../../lib/index.js";
+const VARIANT_MAP = {
+    recommended: 'success-mini',
+    preview: 'info-mini',
+    deprecating: 'warning-mini',
+    substituted: 'warning-mini',
+    'out-of-region': 'error-mini',
+    custom: 'mini',
+    thinking: 'info-mini',
+    'cost-basic': 'mini',
+    'cost-standard': 'mini',
+    'cost-premium': 'mini'
+};
+const BADGE_VARIANT = {
+    mini: 'secondary',
+    'info-mini': 'info',
+    'success-mini': 'success',
+    'warning-mini': 'warning',
+    'error-mini': 'error'
+};
+const ICON_MAP = {
+    recommended: CircleCheck,
+    preview: FlaskConical,
+    deprecating: TriangleAlert,
+    substituted: Route,
+    'out-of-region': GlobeLock
+};
+const ModelTagChip = ({ tag, variants, icons, disableTooltip })=>{
+    const variantToken = tag.variant ?? variants?.[tag.kind] ?? VARIANT_MAP[tag.kind] ?? 'mini';
+    const Icon = icons && tag.kind in icons ? icons[tag.kind] : ICON_MAP[tag.kind];
+    const chip = /*#__PURE__*/ jsxs(Badge, {
+        className: cn('h-4 gap-0.5 border-transparent px-1.5 py-0 text-[10px] leading-4 font-semibold pointer-events-none', 'mini' === variantToken && 'bg-foreground/10', variantToken),
+        "data-slot": "model-picker-tag",
+        "data-tag-kind": tag.kind,
+        variant: BADGE_VARIANT[variantToken] ?? 'secondary',
+        children: [
+            Icon ? /*#__PURE__*/ jsx(Icon, {
+                className: "size-3 shrink-0"
+            }) : null,
+            tag.label
+        ]
+    });
+    if (tag.tooltip && !disableTooltip) return /*#__PURE__*/ jsx(TooltipProvider, {
+        children: /*#__PURE__*/ jsxs(Tooltip, {
+            children: [
+                /*#__PURE__*/ jsx(TooltipTrigger, {
+                    asChild: true,
+                    children: /*#__PURE__*/ jsx("span", {
+                        className: "inline-flex max-w-full",
+                        children: chip
+                    })
+                }),
+                /*#__PURE__*/ jsx(TooltipContent, {
+                    side: "top",
+                    children: tag.tooltip
+                })
+            ]
+        })
+    });
+    return chip;
+};
+export { ModelTagChip };