@mcp-b/react-components 0.6.5 → 0.7.1

package/dist/components/ModelSelector.js

@@ -1,306 +1,2 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { k as SearchIcon, o as ChevronDownIcon } from "../icons-BCNawx-T.js";
-import { Button } from "./Button.js";
-import { Dialog, DialogBackdrop, DialogPopup, DialogPortal, DialogTitle, DialogTrigger } from "./Dialog.js";
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/_internal/provider-logos.tsx
-function Svg({ children, size = 16, ...props }) {
-	return /* @__PURE__ */ jsx("svg", {
-		width: size,
-		height: size,
-		viewBox: "0 0 24 24",
-		fill: "currentColor",
-		xmlns: "http://www.w3.org/2000/svg",
-		"aria-hidden": "true",
-		focusable: "false",
-		...props,
-		children
-	});
-}
-const OpenAILogo = (props) => /* @__PURE__ */ jsx(Svg, {
-	...props,
-	children: /* @__PURE__ */ jsx("path", { d: "M22.28 9.81a5.99 5.99 0 0 0-.52-4.91 6.05 6.05 0 0 0-6.52-2.9A6.05 6.05 0 0 0 10.58 0a6.05 6.05 0 0 0-5.77 4.18 5.99 5.99 0 0 0-4 2.9 6.05 6.05 0 0 0 .74 7.09 5.99 5.99 0 0 0 .52 4.91 6.05 6.05 0 0 0 6.52 2.9A5.99 5.99 0 0 0 13.25 24a6.05 6.05 0 0 0 5.77-4.19 5.99 5.99 0 0 0 4-2.9 6.05 6.05 0 0 0-.74-7.1ZM13.25 22.44a4.48 4.48 0 0 1-2.88-1.04l.14-.08 4.79-2.76a.78.78 0 0 0 .39-.68v-6.75l2.02 1.17c.02 0 .04.03.04.05v5.58a4.5 4.5 0 0 1-4.5 4.5ZM3.57 18.3a4.5 4.5 0 0 1-.54-3.03l.14.09 4.79 2.76a.78.78 0 0 0 .78 0l5.85-3.37v2.33c0 .02 0 .04-.03.06L9.72 19.94a4.5 4.5 0 0 1-6.15-1.64ZM2.31 7.88a4.48 4.48 0 0 1 2.35-1.97v5.69a.78.78 0 0 0 .39.67l5.83 3.36-2.02 1.17a.07.07 0 0 1-.07 0l-4.83-2.8A4.5 4.5 0 0 1 2.3 7.9Zm16.64 3.87L13.1 8.37l2.02-1.17c.02 0 .05-.01.07 0l4.83 2.8a4.5 4.5 0 0 1-.67 8.11V12.4a.77.77 0 0 0-.4-.66Zm2-3.03-.14-.09-4.78-2.78a.78.78 0 0 0-.79 0L9.4 9.25V6.92c0-.02 0-.04.02-.05l4.83-2.79a4.5 4.5 0 0 1 6.68 4.66Zm-12.68 4.17-2.02-1.17a.07.07 0 0 1-.04-.06V6.1a4.5 4.5 0 0 1 7.38-3.45l-.14.08L8.66 5.5a.78.78 0 0 0-.4.68v6.74Zm1.1-2.36 2.6-1.5 2.61 1.5v3l-2.6 1.5-2.6-1.5Z" })
-});
-const AnthropicLogo = (props) => /* @__PURE__ */ jsxs(Svg, {
-	...props,
-	children: [/* @__PURE__ */ jsx("path", { d: "M13.83 4H17.3L24 20h-3.47l-1.37-3.52h-7L10.82 20H7.36ZM13.25 13.58h4.8l-2.4-6.15Z" }), /* @__PURE__ */ jsx("path", { d: "M0 4h3.47l6.7 16H6.7Z" })]
-});
-const GoogleLogo = (props) => /* @__PURE__ */ jsx(Svg, {
-	...props,
-	children: /* @__PURE__ */ jsx("path", { d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 0 1 5.34 2.05l-2.2 2.2A5 5 0 1 0 17 12.6h-5v-2.6h7.9A8 8 0 0 1 12 20 8 8 0 0 1 12 4Z" })
-});
-const MetaLogo = (props) => /* @__PURE__ */ jsx(Svg, {
-	...props,
-	children: /* @__PURE__ */ jsx("path", { d: "M2 12.5c0-3.5 1.8-6.5 4.4-6.5 1.8 0 3.2 1.3 4.9 3.8 2.2 3.2 3.3 5 4.6 5 1 0 1.5-.8 1.5-2.3 0-2.1-1-4.3-2.7-4.3-1 0-2 .6-3.2 2l-1.3-1.7C11.5 6.8 12.9 6 14.5 6c3 0 5.5 3.3 5.5 7 0 3.3-1.6 5-3.8 5-2.3 0-3.6-1.6-6-5.3C8.9 10.4 8 9.2 6.8 9.2 5.4 9.2 4.3 10.6 4.3 13c0 1.8.5 3 1.3 3 .6 0 1.1-.3 1.8-1.1l1.3 1.7C7.6 17.6 6.3 18 5.3 18 3.3 18 2 16 2 12.5Z" })
-});
-const KimiLogo = (props) => /* @__PURE__ */ jsxs(Svg, {
-	...props,
-	children: [/* @__PURE__ */ jsx("circle", {
-		cx: "12",
-		cy: "12",
-		r: "9.5",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "1.5"
-	}), /* @__PURE__ */ jsx("path", {
-		d: "M8 7.5v9M8 12l4.5-4.5M8 12l5 4.5M14 7.5h2.5v9H14z",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "1.5",
-		strokeLinecap: "round",
-		strokeLinejoin: "round"
-	})]
-});
-const FallbackLogo = (props) => /* @__PURE__ */ jsx(Svg, {
-	...props,
-	children: /* @__PURE__ */ jsx("circle", {
-		cx: "12",
-		cy: "12",
-		r: "3"
-	})
-});
-/**
-* Resolves a provider string to its logo component.
-* Unknown providers get a neutral dot fallback.
-*/
-function ProviderLogo({ provider, ...props }) {
-	switch (provider.toLowerCase()) {
-		case "openai": return /* @__PURE__ */ jsx(OpenAILogo, { ...props });
-		case "anthropic": return /* @__PURE__ */ jsx(AnthropicLogo, { ...props });
-		case "google": return /* @__PURE__ */ jsx(GoogleLogo, { ...props });
-		case "meta": return /* @__PURE__ */ jsx(MetaLogo, { ...props });
-		case "kimi": return /* @__PURE__ */ jsx(KimiLogo, { ...props });
-		default: return /* @__PURE__ */ jsx(FallbackLogo, { ...props });
-	}
-}
-//#endregion
-//#region src/components/ModelSelector.tsx
-const ModelSelectorContext = React.createContext(null);
-function useModelSelectorContext() {
-	const ctx = React.useContext(ModelSelectorContext);
-	if (!ctx) throw new Error("ModelSelector subcomponents must be used inside <ModelSelector>.");
-	return ctx;
-}
-/**
-* A searchable model picker. Click the trigger to open a dialog containing a
-* search input and a grouped list of available models.
-*
-* Built internally for AI model selection. Use it when users choose one model
-* from a grouped provider list. Do not use it as a general command palette or
-* multiselect; use Combobox or a dedicated component for that.
-*
-* Sigvelo changes: composes the design-system Dialog and Button, filters item
-* children locally, and maps provider logos plus listbox styling to Sigvelo
-* CSS tokens.
-*
-* The dialog owns focus while open, the list uses `role="listbox"`, and items
-* use `role="option"` with `aria-selected`. Styling consumes surface, border,
-* spacing, radius, focus, and typography tokens. Add provider/item affordances
-* here when they need to be shared.
-*
-* @example
-* ```tsx
-* <ModelSelector>
-*   <ModelSelectorTrigger>
-*     <ModelSelectorLogo provider="anthropic" />
-*     <ModelSelectorName>Claude Opus 4.6</ModelSelectorName>
-*   </ModelSelectorTrigger>
-*   <ModelSelectorContent>
-*     <ModelSelectorDialog>
-*       <ModelSelectorInput placeholder="Search models…" />
-*       <ModelSelectorList>
-*         <ModelSelectorGroup label="Anthropic">
-*           <ModelSelectorItem value="claude-opus-4-6" onSelect={…}>
-*             <ModelSelectorLogo provider="anthropic" />
-*             <ModelSelectorName>Claude Opus 4.6</ModelSelectorName>
-*           </ModelSelectorItem>
-*         </ModelSelectorGroup>
-*       </ModelSelectorList>
-*     </ModelSelectorDialog>
-*   </ModelSelectorContent>
-* </ModelSelector>
-* ```
-*/
-function ModelSelector({ open, defaultOpen = false, onOpenChange, children, className, ref, ...props }) {
-	const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
-	const [query, setQuery] = React.useState("");
-	const isControlled = open !== void 0;
-	const currentOpen = isControlled ? open : internalOpen;
-	const handleOpenChange = React.useCallback((next) => {
-		if (!isControlled) setInternalOpen(next);
-		onOpenChange?.(next);
-		if (!next) setQuery("");
-	}, [isControlled, onOpenChange]);
-	const onSelectItem = React.useCallback(() => {
-		handleOpenChange(false);
-	}, [handleOpenChange]);
-	const ctxValue = React.useMemo(() => ({
-		query,
-		setQuery,
-		onSelectItem
-	}), [query, onSelectItem]);
-	return /* @__PURE__ */ jsx(ModelSelectorContext.Provider, {
-		value: ctxValue,
-		children: /* @__PURE__ */ jsx("div", {
-			ref,
-			className: cx("model-selector", className),
-			...props,
-			children: /* @__PURE__ */ jsx(Dialog, {
-				open: currentOpen,
-				onOpenChange: handleOpenChange,
-				children
-			})
-		})
-	});
-}
-function ModelSelectorTrigger({ className, children, ...props }) {
-	return /* @__PURE__ */ jsx(DialogTrigger, { render: /* @__PURE__ */ jsxs(Button, {
-		variant: "outline",
-		color: "neutral",
-		className: cx("model-selector__trigger", className),
-		...props,
-		children: [children, /* @__PURE__ */ jsx("span", {
-			className: "model-selector__trigger-chevron",
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
-		})]
-	}) });
-}
-function ModelSelectorContent({ children, title = "Model Selector", ...props }) {
-	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, {}), /* @__PURE__ */ jsxs(DialogPopup, {
-		...props,
-		children: [/* @__PURE__ */ jsx(DialogTitle, {
-			className: "model-selector__title",
-			children: title
-		}), children]
-	})] });
-}
-function ModelSelectorDialog({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("model-selector__dialog", className),
-		...props,
-		children
-	});
-}
-function ModelSelectorInput({ className, placeholder = "Search models…", ref, ...props }) {
-	const { query, setQuery } = useModelSelectorContext();
-	return /* @__PURE__ */ jsxs("div", {
-		className: "model-selector__search",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "model-selector__search-icon",
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ jsx(SearchIcon, {})
-		}), /* @__PURE__ */ jsx("input", {
-			ref,
-			type: "search",
-			value: query,
-			onChange: (e) => setQuery(e.target.value),
-			placeholder,
-			className: cx("model-selector__input", className),
-			autoFocus: true,
-			...props
-		})]
-	});
-}
-function ModelSelectorList({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		role: "listbox",
-		className: cx("model-selector__list", className),
-		...props,
-		children
-	});
-}
-function ModelSelectorGroup({ className, label, children, ref, ...props }) {
-	const { query } = useModelSelectorContext();
-	const childArray = React.Children.toArray(children).filter((child) => React.isValidElement(child));
-	const q = query.trim().toLowerCase();
-	const filtered = q ? childArray.filter((child) => {
-		const value = String(child.props.value ?? "").toLowerCase();
-		const keywords = String(child.props.keywords ?? "").toLowerCase();
-		return value.includes(q) || keywords.includes(q);
-	}) : childArray;
-	if (filtered.length === 0) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		role: "group",
-		"aria-label": label,
-		className: cx("model-selector__group", className),
-		...props,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "model-selector__group-label",
-			children: label
-		}), filtered]
-	});
-}
-function ModelSelectorItem({ className, value, keywords, selected, onSelect, children, onClick, ref, ...props }) {
-	const { onSelectItem } = useModelSelectorContext();
-	const handleClick = (e) => {
-		onSelect?.(value);
-		onSelectItem();
-		onClick?.(e);
-	};
-	return /* @__PURE__ */ jsx("button", {
-		ref,
-		type: "button",
-		role: "option",
-		"aria-selected": selected,
-		"data-selected": selected ? "" : void 0,
-		className: cx("model-selector__item", className),
-		onClick: handleClick,
-		...props,
-		children
-	});
-}
-function ModelSelectorEmpty({ className, children = "No models found", ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("model-selector__empty", className),
-		...props,
-		children
-	});
-}
-function ModelSelectorSeparator({ className, ref, ...props }) {
-	return /* @__PURE__ */ jsx("hr", {
-		ref,
-		className: cx("model-selector__separator", className),
-		...props
-	});
-}
-function ModelSelectorLogo({ className, provider, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
-		className: cx("model-selector__logo", className),
-		children: /* @__PURE__ */ jsx(ProviderLogo, {
-			provider,
-			...props
-		})
-	});
-}
-function ModelSelectorLogoGroup({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("model-selector__logo-group", className),
-		...props,
-		children
-	});
-}
-function ModelSelectorName({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
-		ref,
-		className: cx("model-selector__name", className),
-		...props,
-		children
-	});
-}
-function ModelSelectorShortcut({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx("kbd", {
-		ref,
-		className: cx("model-selector__shortcut", className),
-		...props,
-		children
-	});
-}
-//#endregion
+import { a as ModelSelectorGroup, c as ModelSelectorList, d as ModelSelectorName, f as ModelSelectorSeparator, i as ModelSelectorEmpty, l as ModelSelectorLogo, m as ModelSelectorTrigger, n as ModelSelectorContent, o as ModelSelectorInput, p as ModelSelectorShortcut, r as ModelSelectorDialog, s as ModelSelectorItem, t as ModelSelector, u as ModelSelectorLogoGroup } from "../ModelSelector-MQvK-pNb.js";
 export { ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorShortcut, ModelSelectorTrigger };

package/dist/components/NavigationMenu.js

@@ -1,4 +1,4 @@
-import { o as ChevronDownIcon } from "../icons-BCNawx-T.js";
+import { o as ChevronDownIcon } from "../icons-BAlTbWWP.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";