@ctrl-ui/react 0.8.13 → 0.8.15

package/dist/lib/audio-visualizer-levels.js

@@ -0,0 +1,37 @@
+//#region src/lib/audio-visualizer-levels.ts
+function audioVisualizerPointCount(points = 28) {
+	return Math.min(128, Math.max(1, Number.isFinite(points) ? Math.floor(points) : 28));
+}
+function normalizeAudioLevel(level) {
+	return Number.isFinite(level) ? Math.min(1, Math.max(0, level)) : 0;
+}
+function audioVisualizerHistory(levels, points, active = true) {
+	const count = audioVisualizerPointCount(points);
+	const start = Math.max(0, levels.length - count);
+	const padding = Math.max(0, count - levels.length);
+	return Array.from({ length: count }, (_, index) => ({
+		key: `bar-${index}`,
+		level: active && index >= padding ? normalizeAudioLevel(levels[start + index - padding] ?? 0) : 0
+	}));
+}
+function audioVisualizerBands(levels, points, active = true, mirrored = false) {
+	const count = audioVisualizerPointCount(points);
+	const bandCount = mirrored ? Math.ceil(count / 2) : count;
+	const bands = Array.from({ length: bandCount }, (_, index) => {
+		if (!active || levels.length === 0) return 0;
+		const start = index * levels.length / bandCount;
+		const end = (index + 1) * levels.length / bandCount;
+		let total = 0;
+		for (let sample = Math.floor(start); sample < Math.ceil(end); sample += 1) {
+			const weight = Math.min(end, sample + 1) - Math.max(start, sample);
+			total += normalizeAudioLevel(levels[sample] ?? 0) * weight;
+		}
+		return total / (end - start);
+	});
+	return Array.from({ length: count }, (_, index) => ({
+		key: `band-${index}`,
+		level: bands[mirrored ? Math.floor(Math.abs(index - (count - 1) / 2)) : index] ?? 0
+	}));
+}
+//#endregion
+export { audioVisualizerBands, audioVisualizerHistory, audioVisualizerPointCount, normalizeAudioLevel };

package/dist/lib/code-tokens.js

@@ -145,7 +145,10 @@ async function highlightToTokens(code, language) {
 	const key = `${lang}\n${code}`;
 	const cached = cacheGet(key);
 	if (cached !== void 0) return cached;
-	const { tokens } = (await getHighlighter()).codeToTokens(code, {
+	const highlighter = await getHighlighter();
+	const shared = cacheGet(key);
+	if (shared !== void 0) return shared;
+	const { tokens } = highlighter.codeToTokens(code, {
 		lang,
 		theme: CODE_THEME_NAME
 	});

package/dist/lib/popup-item-focus.d.ts

@@ -0,0 +1,7 @@
+import { PointerEvent } from "react";
+import { BaseUIEvent } from "@base-ui/react/types";
+//#region src/lib/popup-item-focus.d.ts
+export declare const popupItemFocusProps: {
+  onPointerLeave(event: BaseUIEvent<PointerEvent<HTMLElement>>): void;
+};
+//#endregion

package/dist/lib/popup-item-focus.js

@@ -0,0 +1,9 @@
+//#region src/lib/popup-item-focus.ts
+const popupItemFocusProps = { onPointerLeave(event) {
+	if (event.pointerType === "touch" || !(event.relatedTarget instanceof Element)) return;
+	const nextItem = event.relatedTarget.closest("[role=\"option\"], [role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]");
+	const list = event.currentTarget.closest("[role=\"listbox\"], [role=\"menu\"]");
+	if (nextItem && list && nextItem.closest("[role=\"listbox\"], [role=\"menu\"]") === list) event.preventBaseUIHandler();
+} };
+//#endregion
+export { popupItemFocusProps };

package/dist/model-switcher.d.ts

@@ -0,0 +1,23 @@
+import { SelectTriggerProps, SelectTriggerVariant } from "./ui/select.js";
+import { ReactNode } from "react";
+//#region src/model-switcher.d.ts
+export type ModelOption = {
+  value: string;
+  label: string;
+  hint?: ReactNode;
+  icon?: ReactNode;
+};
+export type ModelSwitcherProps = {
+  models: ModelOption[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  size?: "xs" | "sm";
+  variant?: SelectTriggerVariant;
+  className?: string;
+  label?: string;
+  style?: SelectTriggerProps["style"];
+};
+export declare function ModelSwitcher({ models, value, defaultValue, onValueChange, disabled, size, variant, className, label, style }: ModelSwitcherProps): import("react").JSX.Element;
+//#endregion

package/dist/model-switcher.js

@@ -0,0 +1,70 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/model-switcher.tsx
+function ModelSwitcher({ models, value, defaultValue, onValueChange, disabled, size = "sm", variant = "surface", className, label = "Model", style }) {
+	const fallback = defaultValue ?? models[0]?.value;
+	return /* @__PURE__ */ jsxs(Select, {
+		value,
+		defaultValue: fallback,
+		onValueChange,
+		disabled: disabled || models.length === 0,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			size,
+			variant,
+			className: cn("max-w-52", className),
+			style,
+			"aria-label": label,
+			children: /* @__PURE__ */ jsx("span", {
+				"data-control-ui": "model-switcher",
+				"data-control-family": "button",
+				"data-button-kind": "model-switcher",
+				"data-slot": "value",
+				className: "flex min-w-0 items-center",
+				children: /* @__PURE__ */ jsx(SelectValue, {
+					placeholder: label,
+					children: (current) => {
+						const model = models.find((option) => option.value === current);
+						return /* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0 items-center gap-1.5",
+							children: [model?.icon ? /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "flex shrink-0 [&_svg]:size-4",
+								children: model.icon
+							}) : null, /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								title: model?.label ?? label,
+								children: model?.label ?? label
+							})]
+						});
+					}
+				})
+			})
+		}), /* @__PURE__ */ jsx(SelectContent, { children: models.map((model) => /* @__PURE__ */ jsxs(SelectItem, {
+			value: model.value,
+			label: model.label,
+			children: [
+				model.icon ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "flex shrink-0 [&_svg]:size-4",
+					children: model.icon
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					title: model.label,
+					children: model.label
+				}),
+				model.hint ? /* @__PURE__ */ jsx("span", {
+					"data-control-ui": "model-switcher",
+					"data-control-family": "popup",
+					"data-popup-kind": "model-switcher",
+					"data-slot": "hint",
+					children: model.hint
+				}) : null
+			]
+		}, model.value)) })]
+	});
+}
+//#endregion
+export { ModelSwitcher };

package/dist/styles/code.css

@@ -13,7 +13,7 @@
   --code-token-comment: oklch(0.48 0.015 285);
   --code-token-keyword: oklch(0.53 0.2 18);
   --code-token-parameter: oklch(0.52 0.09 55);
-  --code-token-function: oklch(0.54 0.17 300);
+  --code-token-function: oklch(0.53 0.17 300);
   --code-token-punctuation: oklch(0.5 0.02 285);
   --code-token-link: oklch(0.5 0.15 250);
 

package/dist/styles/index.css

@@ -19,10 +19,11 @@
 @import "./recipes/sidebar-menu.css";
 @import "./recipes/sidebar-parts.css";
 @import "./recipes/app-shell-header.css";
-@import "./recipes/audio-visualizer.css";
-@import "./recipes/audio-recorder.css";
 @import "./recipes/field.css";
 @import "./recipes/field-parts.css";
+@import "./recipes/audio-device-select.css";
+@import "./recipes/audio-visualizer.css";
+@import "./recipes/audio-recorder.css";
 @import "./recipes/avatar.css";
 @import "./recipes/badge.css";
 @import "./recipes/breadcrumb.css";

package/dist/styles/recipes/audio-device-select.css

@@ -0,0 +1,15 @@
+@layer components {
+  :where([data-control-family="audio-device-select"][data-slot="root"]) {
+    --cui-audio-device-select-status-foreground: var(--muted-foreground);
+  }
+
+  :where([data-control-family="audio-device-select"][data-slot="status"]) {
+    color: var(--cui-audio-device-select-status-foreground);
+  }
+}
+
+@property --cui-audio-device-select-status-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/audio-visualizer.css

@@ -3,6 +3,8 @@
     --cui-audio-visualizer-radius: var(--radius-control);
     --cui-audio-visualizer-bar-background: oklch(from var(--primary) l c h / 0.8);
     --cui-audio-visualizer-bar-radius: var(--radius-control);
+    --cui-audio-visualizer-bar-size: calc(var(--spacing) * 1);
+    --cui-audio-visualizer-bar-gap: 1px;
     --cui-audio-visualizer-line-fill: oklch(from var(--primary) l c h / 0.18);
     --cui-audio-visualizer-line-stroke: oklch(from var(--primary) l c h / 0.8);
     --cui-audio-visualizer-baseline-stroke: oklch(from var(--border) l c h / 0.55);
@@ -24,7 +26,7 @@
   }
 
   :where([data-control-family="audio-visualizer"][data-slot="track"]) {
-    gap: 1px;
+    gap: var(--cui-audio-visualizer-bar-gap);
     opacity: 0.55;
     transition: opacity var(--duration-base) var(--ease-standard);
   }
@@ -34,7 +36,9 @@
   }
 
   :where([data-control-family="audio-visualizer"][data-slot="bar-track"]) {
-    inline-size: calc(var(--spacing) * 1);
+    inline-size: var(--cui-audio-visualizer-bar-size);
+    min-inline-size: 0;
+    flex-shrink: 1;
     transition:
       opacity var(--duration-base) var(--ease-emphasized),
       filter var(--duration-base) var(--ease-emphasized),
@@ -69,6 +73,97 @@
     stroke: var(--cui-audio-visualizer-line-stroke);
     transition: d var(--duration-base) var(--ease-standard);
   }
+
+  :where([data-control-family="audio-visualizer"][data-variant="bars"][data-active="true"] [data-slot="bar"]) {
+    transition: none;
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="line"]:not([data-active="true"]) [data-slot="waveform"]) {
+    opacity: 0;
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="line"]:not([data-active="true"]) [data-slot="baseline"]) {
+    stroke-dasharray: 1 4;
+    stroke-linecap: round;
+  }
+
+  :where([data-control-family="audio-visualizer"][data-slot="root"][data-variant="bar"]) {
+    --cui-audio-visualizer-bar-size: calc(var(--spacing) * 1.5);
+    --cui-audio-visualizer-bar-gap: calc(var(--spacing) * 0.75);
+    padding-block: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="bar"] [data-slot="track"]) {
+    display: flex;
+    block-size: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="bar"][data-align="start"] [data-slot="track"]) {
+    align-items: flex-start;
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="bar"][data-align="end"] [data-slot="track"]) {
+    align-items: flex-end;
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="bar"] [data-slot="bar"]) {
+    min-inline-size: 0;
+    max-inline-size: var(--cui-audio-visualizer-bar-size);
+    flex: 1;
+    transform-origin: center;
+    transition:
+      height var(--duration-fast) var(--ease-standard),
+      opacity var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="bar"][data-align="start"] [data-slot="bar"]) {
+    transform-origin: top;
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="bar"][data-align="end"] [data-slot="bar"]) {
+    transform-origin: bottom;
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="bar"][data-idle="pulse"]:not([data-active="true"]) [data-slot="bar"]) {
+    animation: cui-audio-bar-pulse calc(var(--duration-slow) * 4) var(--ease-standard) infinite;
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="bar"][data-idle="wave"]:not([data-active="true"]) [data-slot="bar"]),
+  :where([data-control-family="audio-visualizer"][data-variant="bar"][data-loading="true"] [data-slot="bar"]) {
+    animation: cui-audio-bar-pulse calc(var(--duration-slow) * 4) var(--ease-standard) infinite;
+    animation-delay: var(--_audio-visualizer-delay);
+  }
+
+  @keyframes cui-audio-bar-pulse {
+    0%,
+    100% {
+      transform: scaleY(1);
+    }
+    50% {
+      transform: scaleY(4);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-control-family="audio-visualizer"] [data-slot]) {
+      animation: none;
+      transition: none;
+    }
+  }
+}
+
+@property --cui-audio-visualizer-bar-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 4px;
+}
+
+@property --cui-audio-visualizer-bar-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1px;
 }
 
 @property --cui-audio-visualizer-radius {

package/dist/styles/recipes/popup-controls.css

@@ -81,6 +81,17 @@
     padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4) 0;
   }
 
+  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="body"]),
+  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="body"]) {
+    gap: calc(var(--spacing) * 4);
+    padding-inline: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="body"]:not(:has(~ [data-slot="footer"]))),
+  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="body"]:not(:has(~ [data-slot="footer"]))) {
+    padding-block-end: calc(var(--spacing) * 4);
+  }
+
   :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="footer"]),
   :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="footer"]) {
     gap: calc(var(--spacing) * 2);

package/dist/styles/recipes/popup-motion.css

@@ -1,3 +1,9 @@
+@property --_popover-viewport-height {
+  syntax: "<length> | auto";
+  inherits: false;
+  initial-value: auto;
+}
+
 @layer components {
   :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="viewport"]) {
     block-size: var(--_popover-viewport-height, auto);

package/dist/styles/recipes/tabs-motion.css

@@ -42,58 +42,68 @@
       translate: 0 100%;
     }
 
-    :where(
-        [data-control-family="tabs"][data-slot="root"]:has(> [data-slot="panel"][data-starting-style])
-          > [data-slot="panel"][inert][data-ending-style]
-      ) {
-      translate: 0 0;
-      transition: none;
-    }
-
     :where([data-control-family="tabs"][data-slot="panel"][data-slide="panel"][data-starting-style]) {
       transition: none;
     }
 
-    :where([data-control-family="tabs"][data-slot="root"][data-slide-starting] > [data-slot="panel"][data-slide="panel"]) {
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide-starting][data-slide="panel"]) {
       transition: none;
     }
 
-    :where([data-control-family="tabs"][data-slot="root"][data-slide-starting] > [data-slot="panel"][inert]) {
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide-starting][inert]) {
       translate: 0 0;
     }
 
-    :where(
-        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
-          > [data-slot="panel"]:not([inert])[data-activation-direction="right"]
-      ) {
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide-starting]:not([inert])[data-activation-direction="right"]) {
       translate: 100% 0;
     }
 
-    :where(
-        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
-          > [data-slot="panel"]:not([inert])[data-activation-direction="left"]
-      ) {
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide-starting]:not([inert])[data-activation-direction="left"]) {
       translate: -100% 0;
     }
 
-    :where(
-        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
-          > [data-slot="panel"]:not([inert])[data-activation-direction="down"]
-      ) {
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide-starting]:not([inert])[data-activation-direction="down"]) {
       translate: 0 100%;
     }
 
-    :where(
-        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
-          > [data-slot="panel"]:not([inert])[data-activation-direction="up"]
-      ) {
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide-starting]:not([inert])[data-activation-direction="up"]) {
       translate: 0 -100%;
     }
 
     @supports (height: calc-size(auto, size)) {
-      :where([data-control-family="tabs"][data-slot="root"][data-slide-starting] > [data-slot="panel"][data-slide="panel"]:not([inert])) {
-        height: var(--aui-slide-prev-height, calc-size(auto, size));
+      :where([data-control-family="tabs"][data-slot="panel"][data-slide-starting][data-slide="panel"]:not([inert])) {
+        height: var(--_tabs-prev-height);
       }
     }
   }
 }
+
+@property --_tabs-prev-height {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --_tabs-panel-top {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --_tabs-panel-left {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --_tabs-panel-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --_tabs-panel-height {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}

package/dist/styles/recipes/tabs.css

@@ -183,6 +183,7 @@
   }
 
   :where([data-control-family="tabs"][data-slot="panel"]) {
+    min-height: 0;
     outline-style: none;
   }
 

package/dist/styles/theme.css

@@ -638,6 +638,18 @@
     -moz-osx-font-smoothing: grayscale;
   }
 
+  html {
+    background-color: var(--background);
+  }
+
+  :root:has([data-app-shell]:not([data-scroll="page"])) {
+    overscroll-behavior: none;
+  }
+
+  :root:has([data-control-family="sidebar"][data-slot="wrapper"] [data-control-family="sidebar"][data-variant="inset"][data-state]) {
+    background-color: var(--sidebar);
+  }
+
   :where(
     [data-control-family]:is(
       a[href],
@@ -832,3 +844,34 @@
     }
   }
 }
+
+/* Measured panel and list dimensions are consumed locally. */
+@property --collapsible-panel-height {
+  syntax: "<length> | auto";
+  inherits: false;
+  initial-value: auto;
+}
+
+@property --collapsible-panel-width {
+  syntax: "<length> | auto";
+  inherits: false;
+  initial-value: auto;
+}
+
+@property --accordion-panel-height {
+  syntax: "<length> | auto";
+  inherits: false;
+  initial-value: auto;
+}
+
+@property --accordion-panel-width {
+  syntax: "<length> | auto";
+  inherits: false;
+  initial-value: auto;
+}
+
+@property --cmdk-list-height {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}

package/dist/ui/alert-dialog.d.ts

@@ -23,6 +23,9 @@ export declare function AlertDialogContent({ className, children, ...props }: Al
 export declare function AlertDialogHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
+export declare function AlertDialogBody({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
 export declare function AlertDialogFooter({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;

package/dist/ui/alert-dialog.js

@@ -68,6 +68,16 @@ function AlertDialogHeader({ className, ...props }) {
 		...props
 	});
 }
+function AlertDialogBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "alert-dialog",
+		"data-control-family": "popup",
+		"data-popup-kind": "alert-dialog",
+		"data-slot": "body",
+		className: cn("grid", className),
+		...props
+	});
+}
 function AlertDialogFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "alert-dialog",
@@ -99,4 +109,4 @@ function AlertDialogDescription({ className, ...props }) {
 	});
 }
 //#endregion
-export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger };
+export { AlertDialog, AlertDialogBody, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger };

package/dist/ui/autocomplete.d.ts

@@ -1,7 +1,7 @@
 import { OpenChangeEventDetails } from "../control-props.js";
 import { ControlSize } from "../control-variants.js";
-import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/autocomplete.d.ts
 export type AutocompleteProps<Value = string> = {

package/dist/ui/color-picker.js

@@ -3,12 +3,12 @@ import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { Input } from "./input.js";
 import { useColorArea } from "../hooks/use-color-area.js";
 import { formatColor, getChannels, hsvaToRgba, parseColor, pointToHueSat, pointToSaturationValue, setChannel } from "../lib/color.js";
 import { TARGET_RATIO, contrastOf, fixColorForContrast, formatContrastRatio, nextFixLevel, wcagLevels } from "../lib/contrast.js";
 import { NumberField, NumberFieldGroup, NumberFieldInput } from "./number-field.js";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { createContext, useContext, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";

package/dist/ui/combobox.d.ts

@@ -1,6 +1,6 @@
 import { ControlSize } from "../control-variants.js";
-import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
 //#region src/ui/combobox.d.ts

package/dist/ui/context-menu.d.ts

@@ -75,7 +75,7 @@ export declare function ContextMenuContent({ className, children, ...props }: Co
 export declare function ContextMenuItem({ className, inset, ...props }: ContextMenuItemProps): import("react").JSX.Element;
 export declare function ContextMenuCheckboxItem({ className, children, ...props }: ContextMenuCheckboxItemProps): import("react").JSX.Element;
 export declare function ContextMenuRadioGroup<TValue extends string = string>({ className, ...props }: ContextMenuRadioGroupProps<TValue>): import("react").JSX.Element;
-export declare function ContextMenuRadioItem({ className, children, ...props }: ContextMenuRadioItemProps): import("react").JSX.Element;
+export declare function ContextMenuRadioItem({ className, children, value, ...props }: ContextMenuRadioItemProps): import("react").JSX.Element;
 export declare function ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps): import("react").JSX.Element;
 export declare function ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps): import("react").JSX.Element;
 export declare function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps): import("react").JSX.Element;

package/dist/ui/context-menu.js

@@ -2,8 +2,10 @@
 import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
+import { popupItemFocusProps } from "../lib/popup-item-focus.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
 //#region src/ui/context-menu.tsx
 const popupClasses = "min-w-[10rem]";
@@ -63,7 +65,7 @@ function ContextMenuItem({ className, inset = false, ...props }) {
 		"data-popup-part": "item",
 		"data-inset": inset || void 0,
 		className: cn(itemClasses, className),
-		...props
+		...mergeProps(popupItemFocusProps, props)
 	});
 }
 function ContextMenuCheckboxItem({ className, children, ...props }) {
@@ -74,7 +76,7 @@ function ContextMenuCheckboxItem({ className, children, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-part": "item",
 		className: cn(itemClasses, className),
-		...props,
+		...mergeProps(popupItemFocusProps, props),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute start-2 flex size-4 items-center justify-center",
 			children: /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx("svg", {
@@ -103,15 +105,16 @@ function ContextMenuRadioGroup({ className, ...props }) {
 		...props
 	});
 }
-function ContextMenuRadioItem({ className, children, ...props }) {
+function ContextMenuRadioItem({ className, children, value, ...props }) {
 	return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
+		value,
 		"data-control-ui": "context-menu",
 		"data-popup-kind": "context-menu",
 		"data-slot": "radio-item",
 		"data-control-family": "popup",
 		"data-popup-part": "item",
 		className: cn(itemClasses, className),
-		...props,
+		...mergeProps(popupItemFocusProps, props),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute start-2 flex size-4 items-center justify-center",
 			children: /* @__PURE__ */ jsx(ContextMenu$1.RadioItemIndicator, { children: /* @__PURE__ */ jsx("span", {

package/dist/ui/dialog.d.ts

@@ -27,6 +27,9 @@ export declare function DialogContent({ className, children, showCloseButton, cl
 export declare function DialogHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
+export declare function DialogBody({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
 export declare function DialogFooter({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;