@mcp-b/react-components 0.12.0 → 0.14.0

package/dist/components/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CheckboxRootProps } from "@base-ui/react/checkbox";
+import { Checkbox as Checkbox$1, CheckboxRootProps } from "@base-ui/react/checkbox";
 
 //#region src/components/Checkbox.d.ts
 /**
@@ -24,12 +24,20 @@ interface CheckboxProps extends Omit<CheckboxRootProps, "className"> {
  *
  * @see {@link https://base-ui.com/react/components/checkbox | Base UI Checkbox}
  */
-declare function Checkbox({
+declare function CheckboxRoot({
   className,
   ref,
   ...props
 }: CheckboxProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
+declare function CheckboxIndicator({
+  children,
+  ...props
+}: Checkbox$1.Indicator.Props): React.JSX.Element;
+declare const Checkbox: {
+  Root: typeof CheckboxRoot;
+  Indicator: typeof CheckboxIndicator;
+};
 //#endregion
 export { Checkbox, CheckboxProps };

package/dist/components/Checkbox.js

@@ -29,19 +29,26 @@ function CheckIcon(props) {
 *
 * @see {@link https://base-ui.com/react/components/checkbox | Base UI Checkbox}
 */
-function Checkbox({ className = "", ref, ...props }) {
+function CheckboxRoot({ className = "", ref, ...props }) {
 	const classes = ["checkbox", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
 		ref,
 		"data-slot": "checkbox",
 		className: classes,
+		...props
+	});
+}
+function CheckboxIndicator({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
+		"data-slot": "checkbox-indicator",
+		className: "checkbox__indicator",
 		...props,
-		children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
-			"data-slot": "checkbox-indicator",
-			className: "checkbox__indicator",
-			children: /* @__PURE__ */ jsx(CheckIcon, {})
-		})
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
 	});
 }
+const Checkbox = {
+	Root: CheckboxRoot,
+	Indicator: CheckboxIndicator
+};
 //#endregion
 export { Checkbox };

package/dist/components/CheckboxGroup.d.ts

@@ -18,11 +18,11 @@ interface CheckboxGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof
  * // Basic usage
  * <CheckboxGroup defaultValue={['option1']}>
  *   <label>
- *     <Checkbox name="option1" />
+ *     <Checkbox.Root name="option1" ><Checkbox.Indicator /></Checkbox.Root>
  *     Option 1
  *   </label>
  *   <label>
- *     <Checkbox name="option2" />
+ *     <Checkbox.Root name="option2" ><Checkbox.Indicator /></Checkbox.Root>
  *     Option 2
  *   </label>
  * </CheckboxGroup>
@@ -35,11 +35,11 @@ interface CheckboxGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof
  *
  * <CheckboxGroup value={values} onValueChange={setValues}>
  *   <label>
- *     <Checkbox name="email" />
+ *     <Checkbox.Root name="email" ><Checkbox.Indicator /></Checkbox.Root>
  *     Email notifications
  *   </label>
  *   <label>
- *     <Checkbox name="sms" />
+ *     <Checkbox.Root name="sms" ><Checkbox.Indicator /></Checkbox.Root>
  *     SMS notifications
  *   </label>
  * </CheckboxGroup>
@@ -52,11 +52,11 @@ interface CheckboxGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof
  *   <Fieldset.Legend>Notifications</Fieldset.Legend>
  *   <CheckboxGroup defaultValue={['updates']}>
  *     <label>
- *       <Checkbox name="updates" />
+ *       <Checkbox.Root name="updates" ><Checkbox.Indicator /></Checkbox.Root>
  *       Product updates
  *     </label>
  *     <label>
- *       <Checkbox name="newsletter" />
+ *       <Checkbox.Root name="newsletter" ><Checkbox.Indicator /></Checkbox.Root>
  *       Newsletter
  *     </label>
  *   </CheckboxGroup>

package/dist/components/CheckboxGroup.js

@@ -11,11 +11,11 @@ import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group"
 * // Basic usage
 * <CheckboxGroup defaultValue={['option1']}>
 *   <label>
-*     <Checkbox name="option1" />
+*     <Checkbox.Root name="option1" ><Checkbox.Indicator /></Checkbox.Root>
 *     Option 1
 *   </label>
 *   <label>
-*     <Checkbox name="option2" />
+*     <Checkbox.Root name="option2" ><Checkbox.Indicator /></Checkbox.Root>
 *     Option 2
 *   </label>
 * </CheckboxGroup>
@@ -28,11 +28,11 @@ import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group"
 *
 * <CheckboxGroup value={values} onValueChange={setValues}>
 *   <label>
-*     <Checkbox name="email" />
+*     <Checkbox.Root name="email" ><Checkbox.Indicator /></Checkbox.Root>
 *     Email notifications
 *   </label>
 *   <label>
-*     <Checkbox name="sms" />
+*     <Checkbox.Root name="sms" ><Checkbox.Indicator /></Checkbox.Root>
 *     SMS notifications
 *   </label>
 * </CheckboxGroup>
@@ -45,11 +45,11 @@ import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group"
 *   <Fieldset.Legend>Notifications</Fieldset.Legend>
 *   <CheckboxGroup defaultValue={['updates']}>
 *     <label>
-*       <Checkbox name="updates" />
+*       <Checkbox.Root name="updates" ><Checkbox.Indicator /></Checkbox.Root>
 *       Product updates
 *     </label>
 *     <label>
-*       <Checkbox name="newsletter" />
+*       <Checkbox.Root name="newsletter" ><Checkbox.Indicator /></Checkbox.Root>
 *       Newsletter
 *     </label>
 *   </CheckboxGroup>

package/dist/components/CodeBlock.d.ts

@@ -1,2 +1,2 @@
-import { A as CodeBlockLanguage, C as CodeBlockLanguageSelectorValueProps, D as TokenizedCode, E as CodeBlockTitleProps, O as highlightCode, S as CodeBlockLanguageSelectorValue, T as CodeBlockTitle, _ as CodeBlockLanguageSelectorItem, a as CodeBlockContainerProps, b as CodeBlockLanguageSelectorTrigger, c as CodeBlockCopyButton, d as CodeBlockFilenameProps, f as CodeBlockHeader, g as CodeBlockLanguageSelectorContentProps, h as CodeBlockLanguageSelectorContent, i as CodeBlockContainer, k as CODE_BLOCK_LANGUAGES, l as CodeBlockCopyButtonProps, m as CodeBlockLanguageSelector, n as CodeBlockActions, o as CodeBlockContent, p as CodeBlockHeaderProps, r as CodeBlockActionsProps, s as CodeBlockContentProps, t as CodeBlock, u as CodeBlockFilename, v as CodeBlockLanguageSelectorItemProps, w as CodeBlockProps, x as CodeBlockLanguageSelectorTriggerProps, y as CodeBlockLanguageSelectorProps } from "../CodeBlock-CxQXv3C4.js";
+import { A as CodeBlockLanguage, C as CodeBlockLanguageSelectorValueProps, D as TokenizedCode, E as CodeBlockTitleProps, O as highlightCode, S as CodeBlockLanguageSelectorValue, T as CodeBlockTitle, _ as CodeBlockLanguageSelectorItem, a as CodeBlockContainerProps, b as CodeBlockLanguageSelectorTrigger, c as CodeBlockCopyButton, d as CodeBlockFilenameProps, f as CodeBlockHeader, g as CodeBlockLanguageSelectorContentProps, h as CodeBlockLanguageSelectorContent, i as CodeBlockContainer, k as CODE_BLOCK_LANGUAGES, l as CodeBlockCopyButtonProps, m as CodeBlockLanguageSelector, n as CodeBlockActions, o as CodeBlockContent, p as CodeBlockHeaderProps, r as CodeBlockActionsProps, s as CodeBlockContentProps, t as CodeBlock, u as CodeBlockFilename, v as CodeBlockLanguageSelectorItemProps, w as CodeBlockProps, x as CodeBlockLanguageSelectorTriggerProps, y as CodeBlockLanguageSelectorProps } from "../CodeBlock-DUh9WOGo.js";
 export { CODE_BLOCK_LANGUAGES, CodeBlock, CodeBlockActions, CodeBlockActionsProps, CodeBlockContainer, CodeBlockContainerProps, CodeBlockContent, CodeBlockContentProps, CodeBlockCopyButton, CodeBlockCopyButtonProps, CodeBlockFilename, CodeBlockFilenameProps, CodeBlockHeader, CodeBlockHeaderProps, type CodeBlockLanguage, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, CodeBlockLanguageSelectorContentProps, CodeBlockLanguageSelectorItem, CodeBlockLanguageSelectorItemProps, CodeBlockLanguageSelectorProps, CodeBlockLanguageSelectorTrigger, CodeBlockLanguageSelectorTriggerProps, CodeBlockLanguageSelectorValue, CodeBlockLanguageSelectorValueProps, CodeBlockProps, CodeBlockTitle, CodeBlockTitleProps, TokenizedCode, highlightCode };

package/dist/components/CodeBlock.js

@@ -1,2 +1,2 @@
-import { a as CodeBlockCopyButton, c as CodeBlockLanguageSelector, d as CodeBlockLanguageSelectorTrigger, f as CodeBlockLanguageSelectorValue, h as CODE_BLOCK_LANGUAGES, i as CodeBlockContent, l as CodeBlockLanguageSelectorContent, m as highlightCode, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock, u as CodeBlockLanguageSelectorItem } from "../CodeBlock-XNQOupQ3.js";
+import { a as CodeBlockCopyButton, c as CodeBlockLanguageSelector, d as CodeBlockLanguageSelectorTrigger, f as CodeBlockLanguageSelectorValue, h as CODE_BLOCK_LANGUAGES, i as CodeBlockContent, l as CodeBlockLanguageSelectorContent, m as highlightCode, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock, u as CodeBlockLanguageSelectorItem } from "../CodeBlock-BUFXG8HW.js";
 export { CODE_BLOCK_LANGUAGES, CodeBlock, CodeBlockActions, CodeBlockContainer, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockHeader, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, CodeBlockLanguageSelectorItem, CodeBlockLanguageSelectorTrigger, CodeBlockLanguageSelectorValue, CodeBlockTitle, highlightCode };

package/dist/components/CodexModelSelector.d.ts

@@ -1,28 +1,24 @@
+import { d as MenuProps } from "../Menu-Bgu-ufb5.js";
+import { CodexModel } from "../utils/codex-model-catalog.js";
 import * as React from "react";
 
 //#region src/components/CodexModelSelector.d.ts
-/** One server-supported value for a Codex response setting. */
-interface CodexModelSelectorSetting {
-  readonly id: string;
-  readonly label: string;
-  /** Optional explanation shown below the option, such as its usage impact. */
-  readonly description?: string;
-}
-interface CodexModelSelectorProps {
-  /** Model options allowed by the consuming app. Keep authentication and entitlement checks server-side. */
-  readonly models: readonly CodexModelSelectorSetting[];
-  /** Current model id used by the consuming app's AI SDK provider. */
-  readonly selectedModelId?: string | null;
-  /** Called only with an id from the app-provided catalog. */
-  readonly onSelectModel: (modelId: string) => void;
-  /** Server-supported reasoning effort values for the selected model. */
-  readonly effortOptions?: readonly CodexModelSelectorSetting[];
-  readonly selectedEffortId?: string | null;
-  readonly onSelectEffort?: (effortId: string) => void;
-  /** Server-supported response-speed values for the selected model. */
-  readonly speedOptions?: readonly CodexModelSelectorSetting[];
-  readonly selectedSpeedId?: string | null;
-  readonly onSelectSpeed?: (speedId: string) => void;
+type ModelId<ModelT extends CodexModel> = ModelT["id"];
+type ReasoningEffort<ModelT extends CodexModel> = ModelT["supportedReasoningEfforts"][number]["reasoningEffort"];
+type ServiceTier<ModelT extends CodexModel> = ModelT["serviceTiers"][number]["id"];
+interface CodexModelSelectorProps<ModelT extends CodexModel = CodexModel> {
+  /** Whole Codex app-server `model/list` entries allowed for this account. */
+  readonly models: readonly ModelT[];
+  /** Current Codex catalog id. Use the selected entry's `model` field for inference. */
+  readonly selectedModelId?: ModelId<ModelT> | null;
+  /** Called only with an id from the supplied Codex catalog. */
+  readonly onSelectModel: (modelId: ModelId<ModelT>) => void;
+  /** Current reasoning effort advertised by the selected model. */
+  readonly selectedEffortId?: ReasoningEffort<ModelT> | null;
+  readonly onSelectEffort?: (effortId: ReasoningEffort<ModelT>) => void;
+  /** Current service tier advertised by the selected model. */
+  readonly selectedSpeedId?: ServiceTier<ModelT> | null;
+  readonly onSelectSpeed?: (speedId: ServiceTier<ModelT> | null) => void;
   /** Restores all values to the consuming app's preferred defaults. */
   readonly onReset?: () => void;
   readonly disabled?: boolean;
@@ -31,7 +27,8 @@ interface CodexModelSelectorProps {
   readonly open?: boolean;
   /** Initial menu state for uncontrolled usage. */
   readonly defaultOpen?: boolean;
-  readonly onOpenChange?: (open: boolean) => void;
+  /** Receives Base UI's full open-change event details. */
+  readonly onOpenChange?: MenuProps["onOpenChange"];
   readonly "aria-label"?: string;
 }
 /**
@@ -41,14 +38,12 @@ interface CodexModelSelectorProps {
  * The consuming app supplies every selectable value. This component only
  * renders those values and never guesses model ids or account entitlements.
  */
-declare function CodexModelSelector({
+declare function CodexModelSelector<ModelT extends CodexModel>({
   models,
   selectedModelId,
   onSelectModel,
-  effortOptions,
   selectedEffortId,
   onSelectEffort,
-  speedOptions,
   selectedSpeedId,
   onSelectSpeed,
   onReset,
@@ -58,6 +53,6 @@ declare function CodexModelSelector({
   defaultOpen,
   onOpenChange,
   "aria-label": ariaLabel
-}: CodexModelSelectorProps): React.JSX.Element;
+}: CodexModelSelectorProps<ModelT>): React.JSX.Element;
 //#endregion
-export { CodexModelSelector, CodexModelSelectorProps, CodexModelSelectorSetting };
+export { CodexModelSelector, CodexModelSelectorProps };

package/dist/components/CodexModelSelector.js

@@ -1,9 +1,10 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { a as CheckIcon, c as ChevronRightIcon, k as RefreshIcon, o as ChevronDownIcon } from "../icons-D2Q5n5C1.js";
-import { MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuRoot, MenuSeparator, MenuSub, MenuSubContent, MenuSubmenuTrigger, MenuTrigger } from "./Menu.js";
-import * as React from "react";
+import { A as RefreshIcon, a as CheckIcon, c as ChevronRightIcon, o as ChevronDownIcon } from "../icons-Ba9THQKz.js";
+import { Menu } from "./Menu.js";
+import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/CodexModelSelector.tsx
+const defaultServiceTierValue = "codex-default-service-tier";
 /**
 * A compact Codex-style response settings picker: model, reasoning effort,
 * response speed, and reset are kept in one cascading menu.
@@ -11,103 +12,121 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * The consuming app supplies every selectable value. This component only
 * renders those values and never guesses model ids or account entitlements.
 */
-function CodexModelSelector({ models, selectedModelId = null, onSelectModel, effortOptions = [], selectedEffortId = null, onSelectEffort, speedOptions = [], selectedSpeedId = null, onSelectSpeed, onReset, disabled = false, className, open, defaultOpen, onOpenChange, "aria-label": ariaLabel = "Codex response settings" }) {
-	const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
-	const selectedModel = models.find((model) => model.id === selectedModelId);
-	const selectedEffort = effortOptions.find((option) => option.id === selectedEffortId);
+function CodexModelSelector({ models, selectedModelId = null, onSelectModel, selectedEffortId = null, onSelectEffort, selectedSpeedId = null, onSelectSpeed, onReset, disabled = false, className, open, defaultOpen, onOpenChange, "aria-label": ariaLabel = "Codex response settings" }) {
+	const visibleModels = models.filter((model) => !model.hidden);
+	const selectedModel = visibleModels.find((model) => model.id === selectedModelId);
+	const effortOptions = selectedModel?.supportedReasoningEfforts ?? [];
+	const speedOptions = getServiceTiers(selectedModel);
+	const selectedEffort = effortOptions.find((option) => option.reasoningEffort === selectedEffortId);
 	const selectedSpeed = speedOptions.find((option) => option.id === selectedSpeedId);
-	const currentOpen = open ?? internalOpen;
-	const handleOpenChange = React.useCallback((nextOpen) => {
-		if (open === void 0) setInternalOpen(nextOpen);
-		onOpenChange?.(nextOpen);
-	}, [onOpenChange, open]);
-	const handleSelectModel = React.useCallback((modelId) => {
-		onSelectModel(modelId);
-		handleOpenChange(false);
-	}, [handleOpenChange, onSelectModel]);
-	const handleSelectEffort = React.useCallback((effortId) => {
-		onSelectEffort?.(effortId);
-		handleOpenChange(false);
-	}, [handleOpenChange, onSelectEffort]);
-	const handleSelectSpeed = React.useCallback((speedId) => {
-		onSelectSpeed?.(speedId);
-		handleOpenChange(false);
-	}, [handleOpenChange, onSelectSpeed]);
-	const handleReset = React.useCallback(() => {
+	function handleSelectModel(modelId) {
+		const model = visibleModels.find((option) => option.id === modelId);
+		if (!model) return;
+		onSelectModel(model.id);
+	}
+	function handleSelectEffort(effortId) {
+		const effort = effortOptions.find((option) => option.reasoningEffort === effortId);
+		if (!effort) return;
+		onSelectEffort?.(effort.reasoningEffort);
+	}
+	function handleSelectSpeed(speedId) {
+		if (speedId === defaultServiceTierValue) {
+			onSelectSpeed?.(null);
+			return;
+		}
+		const speed = speedOptions.find((option) => option.id === speedId);
+		if (!speed) return;
+		onSelectSpeed?.(speed.id);
+	}
+	function handleReset() {
 		onReset?.();
-		handleOpenChange(false);
-	}, [handleOpenChange, onReset]);
-	return /* @__PURE__ */ jsxs(MenuRoot, {
-		open: currentOpen,
-		onOpenChange: handleOpenChange,
-		children: [/* @__PURE__ */ jsxs(MenuTrigger, {
+	}
+	return /* @__PURE__ */ jsxs(Menu.Root, {
+		open,
+		defaultOpen,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsxs(Menu.Trigger, {
 			unstyled: true,
 			className: cx("codex-model-selector__trigger", className),
 			disabled,
 			"aria-label": ariaLabel,
 			children: [/* @__PURE__ */ jsxs("span", {
 				className: "codex-model-selector__summary",
-				children: [/* @__PURE__ */ jsx("span", { children: selectedModel?.label ?? "Select model" }), selectedEffort ? /* @__PURE__ */ jsx("span", {
-					className: cx("codex-model-selector__summary-effort", selectedEffort.id === "ultra" && "codex-model-selector__summary-effort--ultra"),
-					children: selectedEffort.label
+				children: [/* @__PURE__ */ jsx("span", { children: selectedModel?.displayName ?? "Select model" }), selectedEffort ? /* @__PURE__ */ jsx("span", {
+					className: cx("codex-model-selector__summary-effort", selectedEffort.reasoningEffort === "ultra" && "codex-model-selector__summary-effort--ultra"),
+					children: formatSettingLabel(selectedEffort.reasoningEffort)
 				}) : null]
 			}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: "codex-model-selector__trigger-icon" })]
-		}), /* @__PURE__ */ jsxs(MenuContent, {
-			className: "codex-model-selector__menu",
+		}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 			side: "top",
 			align: "end",
-			children: [
-				/* @__PURE__ */ jsx(CodexModelSelectorSubmenu, {
-					label: "Model",
-					value: selectedModel?.label ?? "Select",
-					disabled: models.length === 0,
-					children: /* @__PURE__ */ jsx(MenuRadioGroup, {
-						value: selectedModelId ?? void 0,
-						onValueChange: handleSelectModel,
-						children: models.map((model) => /* @__PURE__ */ jsx(CodexModelSelectorRadioItem, {
-							value: model.id,
-							description: model.description,
-							children: model.label
-						}, model.id))
-					})
-				}),
-				effortOptions.length > 0 && onSelectEffort ? /* @__PURE__ */ jsx(CodexModelSelectorSubmenu, {
-					label: "Effort",
-					value: selectedEffort?.label ?? "Select",
-					children: /* @__PURE__ */ jsx(MenuRadioGroup, {
-						value: selectedEffortId ?? void 0,
-						onValueChange: handleSelectEffort,
-						children: effortOptions.map((option) => /* @__PURE__ */ jsx(CodexModelSelectorRadioItem, {
-							value: option.id,
-							description: option.description,
-							children: option.label
-						}, option.id))
-					})
-				}) : null,
-				speedOptions.length > 0 && onSelectSpeed ? /* @__PURE__ */ jsx(CodexModelSelectorSubmenu, {
-					label: "Speed",
-					value: selectedSpeed?.label ?? "Select",
-					children: /* @__PURE__ */ jsx(MenuRadioGroup, {
-						value: selectedSpeedId ?? void 0,
-						onValueChange: handleSelectSpeed,
-						children: speedOptions.map((option) => /* @__PURE__ */ jsx(CodexModelSelectorRadioItem, {
-							value: option.id,
-							description: option.description,
-							children: option.label
-						}, option.id))
-					})
-				}) : null,
-				onReset ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsxs(MenuItem, {
-					className: "codex-model-selector__reset",
-					onClick: handleReset,
-					children: ["Reset to default", /* @__PURE__ */ jsx(RefreshIcon, { className: "codex-model-selector__reset-icon" })]
-				})] }) : null
-			]
-		})]
+			children: /* @__PURE__ */ jsxs(Menu.Popup, {
+				className: "codex-model-selector__menu",
+				children: [
+					/* @__PURE__ */ jsx(CodexModelSelectorSubmenu, {
+						label: "Model",
+						value: selectedModel?.displayName ?? "Select",
+						disabled: visibleModels.length === 0,
+						children: /* @__PURE__ */ jsx(Menu.RadioGroup, {
+							value: selectedModelId ?? void 0,
+							onValueChange: handleSelectModel,
+							children: visibleModels.map((model) => /* @__PURE__ */ jsx(CodexModelSelectorRadioItem, {
+								value: model.id,
+								description: model.description,
+								children: model.displayName
+							}, model.id))
+						})
+					}),
+					effortOptions.length > 0 && onSelectEffort ? /* @__PURE__ */ jsx(CodexModelSelectorSubmenu, {
+						label: "Effort",
+						value: selectedEffort ? formatSettingLabel(selectedEffort.reasoningEffort) : "Select",
+						children: /* @__PURE__ */ jsx(Menu.RadioGroup, {
+							value: selectedEffortId ?? void 0,
+							onValueChange: handleSelectEffort,
+							children: effortOptions.map((option) => /* @__PURE__ */ jsx(CodexModelSelectorRadioItem, {
+								value: option.reasoningEffort,
+								description: option.description,
+								children: formatSettingLabel(option.reasoningEffort)
+							}, option.reasoningEffort))
+						})
+					}) : null,
+					speedOptions.length > 0 && onSelectSpeed ? /* @__PURE__ */ jsx(CodexModelSelectorSubmenu, {
+						label: "Speed",
+						value: selectedSpeed?.name ?? "Select",
+						children: /* @__PURE__ */ jsx(Menu.RadioGroup, {
+							value: selectedSpeedId ?? defaultServiceTierValue,
+							onValueChange: handleSelectSpeed,
+							children: speedOptions.map((option) => /* @__PURE__ */ jsx(CodexModelSelectorRadioItem, {
+								value: option.id ?? defaultServiceTierValue,
+								description: option.description,
+								children: option.name
+							}, option.id ?? defaultServiceTierValue))
+						})
+					}) : null,
+					onReset ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Menu.Separator, {}), /* @__PURE__ */ jsxs(Menu.Item, {
+						className: "codex-model-selector__reset",
+						onClick: handleReset,
+						children: ["Reset to default", /* @__PURE__ */ jsx(RefreshIcon, { className: "codex-model-selector__reset-icon" })]
+					})] }) : null
+				]
+			})
+		}) })]
 	});
 }
+function getServiceTiers(model) {
+	if (!model || model.serviceTiers.length === 0) return [];
+	return [{
+		id: null,
+		name: "Standard",
+		description: "Default speed"
+	}, ...model.serviceTiers];
+}
+function formatSettingLabel(value) {
+	if (value === "xhigh") return "Extra High";
+	return value.split(/[-_]/).filter(Boolean).map((word) => word[0].toUpperCase() + word.slice(1)).join(" ");
+}
 function CodexModelSelectorSubmenu({ label, value, disabled = false, children }) {
-	return /* @__PURE__ */ jsxs(MenuSub, { children: [/* @__PURE__ */ jsxs(MenuSubmenuTrigger, {
+	return /* @__PURE__ */ jsxs(Menu.SubmenuRoot, { children: [/* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
 		className: "codex-model-selector__submenu-trigger",
 		disabled,
 		children: [
@@ -118,18 +137,21 @@ function CodexModelSelectorSubmenu({ label, value, disabled = false, children })
 			}),
 			/* @__PURE__ */ jsx(ChevronRightIcon, { className: "codex-model-selector__submenu-icon" })
 		]
-	}), /* @__PURE__ */ jsx(MenuSubContent, {
-		className: cx("codex-model-selector__submenu", `codex-model-selector__submenu--${label.toLowerCase()}`),
+	}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 		side: "right",
 		align: "start",
-		children: /* @__PURE__ */ jsxs(MenuGroup, { children: [/* @__PURE__ */ jsx(MenuGroupLabel, {
-			className: "codex-model-selector__submenu-title",
-			children: label
-		}), children] })
-	})] });
+		sideOffset: 4,
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			className: cx("codex-model-selector__submenu", `codex-model-selector__submenu--${label.toLowerCase()}`),
+			children: /* @__PURE__ */ jsxs(Menu.Group, { children: [/* @__PURE__ */ jsx(Menu.GroupLabel, {
+				className: "codex-model-selector__submenu-title",
+				children: label
+			}), children] })
+		})
+	}) })] });
 }
 function CodexModelSelectorRadioItem({ children, description, ...props }) {
-	return /* @__PURE__ */ jsxs(MenuRadioItem, {
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
 		className: "codex-model-selector__option",
 		...props,
 		children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
@@ -138,7 +160,7 @@ function CodexModelSelectorRadioItem({ children, description, ...props }) {
 		}), description ? /* @__PURE__ */ jsx("span", {
 			className: "codex-model-selector__option-description",
 			children: description
-		}) : null] }), /* @__PURE__ */ jsx(MenuRadioItemIndicator, {
+		}) : null] }), /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
 			className: "codex-model-selector__option-indicator",
 			children: /* @__PURE__ */ jsx(CheckIcon, {})
 		})]

package/dist/components/Collapsible.d.ts

@@ -73,7 +73,6 @@ declare function CollapsiblePanel({
 }: CollapsiblePanelProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare const CollapsibleContent: typeof CollapsiblePanel;
 /**
  * A collapsible panel controlled by a button.
  * Useful for progressive disclosure of content.
@@ -117,11 +116,10 @@ declare const CollapsibleContent: typeof CollapsiblePanel;
  *
  * @see {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}
  */
-declare const Collapsible: typeof CollapsibleRoot & {
+declare const Collapsible: {
   Root: typeof CollapsibleRoot;
   Trigger: typeof CollapsibleTrigger;
   Panel: typeof CollapsiblePanel;
-  Content: typeof CollapsiblePanel;
 };
 //#endregion
-export { Collapsible, CollapsibleContent, CollapsiblePanel, CollapsiblePanelProps, CollapsibleRoot, CollapsibleRootProps, CollapsibleTrigger, CollapsibleTriggerProps };
+export { Collapsible, CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps };

package/dist/components/Collapsible.js

@@ -41,7 +41,11 @@ function CollapsibleTrigger({ className = "", unstyled = false, ref, ...props })
 * Supports CSS animations via `--collapsible-panel-height` variable.
 */
 function CollapsiblePanel({ className = "", unstyled = false, ref, ...props }) {
-	const classes = unstyled ? className : ["collapsible__panel", className].filter(Boolean).join(" ");
+	const classes = [
+		"base-ui-collapsible-panel",
+		!unstyled && "collapsible__panel",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Collapsible$1.Panel, {
 		ref,
 		"data-slot": "collapsible-content",
@@ -49,7 +53,6 @@ function CollapsiblePanel({ className = "", unstyled = false, ref, ...props }) {
 		...props
 	});
 }
-const CollapsibleContent = CollapsiblePanel;
 /**
 * A collapsible panel controlled by a button.
 * Useful for progressive disclosure of content.
@@ -93,11 +96,10 @@ const CollapsibleContent = CollapsiblePanel;
 *
 * @see {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}
 */
-const Collapsible = Object.assign(CollapsibleRoot, {
+const Collapsible = {
 	Root: CollapsibleRoot,
 	Trigger: CollapsibleTrigger,
-	Panel: CollapsiblePanel,
-	Content: CollapsibleContent
-});
+	Panel: CollapsiblePanel
+};
 //#endregion
-export { Collapsible, CollapsibleContent, CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger };
+export { Collapsible };

package/dist/components/Combobox.d.ts

@@ -1,2 +1,2 @@
-import { _ as ComboboxValue, a as ComboboxCollection, c as ComboboxGroup, d as ComboboxLabel, f as ComboboxList, g as ComboboxTrigger, h as ComboboxSeparator, i as ComboboxChipsInput, l as ComboboxInput, m as ComboboxPositioner, n as ComboboxChip, o as ComboboxContent, p as ComboboxPopup, r as ComboboxChips, s as ComboboxEmpty, t as Combobox, u as ComboboxItem, v as useComboboxAnchor } from "../Combobox-D9anamNr.js";
-export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPopup, ComboboxPositioner, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };
+import { n as useComboboxAnchor, t as Combobox } from "../Combobox-B9Fcd6q-.js";
+export { Combobox, useComboboxAnchor };