@ctrl-ui/react 0.9.2 → 0.9.4

package/dist/audio-device-select.js

@@ -66,7 +66,7 @@ function AudioDeviceSelect({ devices, kind = "input", value, defaultValue, onVal
 			"data-control-ui": "audio-device-select",
 			"data-control-family": "audio-device-select",
 			"data-slot": "root",
-			className: cn("grid min-w-0 gap-2", className),
+			className: cn("grid min-w-0 grid-cols-[minmax(0,1fr)] gap-2", className),
 			children: /* @__PURE__ */ jsx(Select, {
 				value: current,
 				onValueChange: handleValueChange,

package/dist/blocks/coding-agent.d.ts

@@ -1,4 +1,6 @@
 import { ChatLayout } from "../chat-layout.js";
+import { SidebarProviderProps } from "../ui/sidebar-provider.js";
+import "../ui/sidebar.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/blocks/coding-agent.d.ts
 export type CodingAgentNavigationItem = {
@@ -19,7 +21,7 @@ export type CodingAgentProject = {
   tasks: readonly CodingAgentTask[];
   open?: boolean;
 };
-export type CodingAgentBlockProps = Omit<ComponentProps<"div">, "children"> & {
+export type CodingAgentBlockProps = Omit<ComponentProps<"div">, "children"> & Pick<SidebarProviderProps, "persistOpen" | "keyboardShortcut"> & {
   appName?: string;
   brand?: ReactNode;
   sidebarTop?: ReactNode;

package/dist/blocks/file-explorer.d.ts

@@ -1,7 +1,9 @@
+import { SidebarProviderProps } from "../ui/sidebar-provider.js";
+import "../ui/sidebar.js";
 import { FileExplorerBreadcrumb, FileExplorerColumn, FileExplorerEntry, FileExplorerEntryDetail, FileExplorerLocation, FileExplorerResolution, FileExplorerSearchResult } from "./file-explorer-data.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/blocks/file-explorer.d.ts
-export type FileExplorerBlockProps = Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange"> & {
+export type FileExplorerBlockProps = Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange"> & Pick<SidebarProviderProps, "persistOpen" | "keyboardShortcut"> & {
   locations: readonly FileExplorerLocation[];
   activeLocationId?: string;
   defaultActiveLocationId?: string;
@@ -27,6 +29,6 @@ export type FileExplorerBlockProps = Omit<ComponentProps<"div">, "children" | "d
   detailsLabel?: string;
   layout?: "viewport" | "contained";
 };
-export declare function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationId, selectedPath, defaultSelectedPath, searchValue, defaultSearchValue, onActiveLocationChange, onSelectedPathChange, onSearchValueChange, onOpenEntry, sidebarTop, sidebarFooter, headerActions, headerMenuItems, searchPlaceholder, searchLabel, clearSearchLabel, searchResultsLabel, searchStatusLabel, backLabel, moreActionsLabel, detailsLabel, layout, className, style, ...props }: FileExplorerBlockProps): import("react").JSX.Element;
+export declare function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationId, selectedPath, defaultSelectedPath, searchValue, defaultSearchValue, onActiveLocationChange, onSelectedPathChange, onSearchValueChange, onOpenEntry, sidebarTop, sidebarFooter, headerActions, headerMenuItems, searchPlaceholder, searchLabel, clearSearchLabel, searchResultsLabel, searchStatusLabel, backLabel, moreActionsLabel, detailsLabel, layout, persistOpen, keyboardShortcut, className, style, ...props }: FileExplorerBlockProps): import("react").JSX.Element;
 //#endregion
 export type { FileExplorerBreadcrumb, FileExplorerColumn, FileExplorerEntry, FileExplorerEntryDetail, FileExplorerLocation, FileExplorerResolution, FileExplorerSearchResult };

package/dist/blocks/file-explorer.js

@@ -23,7 +23,7 @@ function defaultSearchStatusLabel(count, query) {
 	if (count === 0) return `No results for “${query}”`;
 	return count === 1 ? "1 result" : `${count} results`;
 }
-function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationId, selectedPath, defaultSelectedPath = [], searchValue, defaultSearchValue = "", onActiveLocationChange, onSelectedPathChange, onSearchValueChange, onOpenEntry, sidebarTop, sidebarFooter, headerActions, headerMenuItems, searchPlaceholder = "Search files", searchLabel = "Search files", clearSearchLabel = "Clear search", searchResultsLabel = "Search results", searchStatusLabel = defaultSearchStatusLabel, backLabel = "Go back", moreActionsLabel = "More actions", detailsLabel = "Details", layout = "viewport", className, style, ...props }) {
+function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationId, selectedPath, defaultSelectedPath = [], searchValue, defaultSearchValue = "", onActiveLocationChange, onSelectedPathChange, onSearchValueChange, onOpenEntry, sidebarTop, sidebarFooter, headerActions, headerMenuItems, searchPlaceholder = "Search files", searchLabel = "Search files", clearSearchLabel = "Clear search", searchResultsLabel = "Search results", searchStatusLabel = defaultSearchStatusLabel, backLabel = "Go back", moreActionsLabel = "More actions", detailsLabel = "Details", layout = "viewport", persistOpen, keyboardShortcut, className, style, ...props }) {
 	const [internalLocationId, setInternalLocationId] = useState(defaultActiveLocationId ?? locations[0]?.id);
 	const [internalSelectedPath, setInternalSelectedPath] = useState(defaultSelectedPath);
 	const [internalSearchValue, setInternalSearchValue] = useState(defaultSearchValue);
@@ -68,6 +68,8 @@ function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationI
 	};
 	return /* @__PURE__ */ jsxs(SidebarProvider, {
 		layout,
+		persistOpen,
+		keyboardShortcut,
 		className: cn("bg-background text-foreground", !contained && "h-svh overflow-hidden", className),
 		style: providerStyle,
 		...props,

package/dist/blocks/settings.d.ts

@@ -1,8 +1,10 @@
 import { Button } from "../ui/button.js";
+import { SidebarProviderProps } from "../ui/sidebar-provider.js";
+import "../ui/sidebar.js";
 import { SettingDefinition, SettingsControlProps, SettingsPageDefinition, SettingsSectionDefinition } from "./settings-data.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/blocks/settings.d.ts
-export type SettingsBlockProps = Omit<ComponentProps<"div">, "children"> & {
+export type SettingsBlockProps = Omit<ComponentProps<"div">, "children"> & Pick<SidebarProviderProps, "persistOpen" | "keyboardShortcut"> & {
   pages: readonly SettingsPageDefinition[];
   activePageId?: string;
   defaultActivePageId?: string;

package/dist/knob-contracts/range-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/range-knobs.d.ts
-export declare const rangeKnobs: readonly ["--cui-range-level-warning-background", "--cui-range-level-clip-background", "--cui-range-level-size", "--cui-range-level-scale-foreground", "--cui-range-indeterminate-size", "--cui-range-track-radius", "--cui-range-track-background", "--cui-range-indicator-radius", "--cui-range-indicator-background", "--cui-range-thumb-radius", "--cui-range-thumb-background", "--cui-range-thumb-border-color", "--cui-range-thumb-shadow"];
+export declare const rangeKnobs: readonly ["--cui-range-level-warning-background", "--cui-range-level-clip-background", "--cui-range-level-muted-background", "--cui-range-level-size", "--cui-range-level-scale-foreground", "--cui-range-indeterminate-size", "--cui-range-track-radius", "--cui-range-track-background", "--cui-range-indicator-radius", "--cui-range-indicator-background", "--cui-range-thumb-radius", "--cui-range-thumb-background", "--cui-range-thumb-border-color", "--cui-range-thumb-shadow"];
 export type RangeKnobStyle = Partial<Record<(typeof rangeKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/range-knobs.js

@@ -2,6 +2,7 @@
 const rangeKnobs = [
 	"--cui-range-level-warning-background",
 	"--cui-range-level-clip-background",
+	"--cui-range-level-muted-background",
 	"--cui-range-level-size",
 	"--cui-range-level-scale-foreground",
 	"--cui-range-indeterminate-size",

package/dist/styles/recipes/range-level-meter.css

@@ -2,6 +2,7 @@
   :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="root"]) {
     --cui-range-level-warning-background: var(--warning);
     --cui-range-level-clip-background: var(--destructive);
+    --cui-range-level-muted-background: var(--muted-foreground);
     --cui-range-level-size: calc(var(--spacing) * 2);
     --cui-range-level-scale-foreground: var(--muted-foreground);
     --_range-level-peak-size: 2px;
@@ -96,6 +97,13 @@
     );
   }
 
+  :where(
+    [data-range-kind="level-meter"][data-slot="root"][data-muted]
+      [data-control-family="range"][data-range-kind="level-meter"]:is([data-slot="bar"], [data-slot="peak"])
+  ) {
+    background: var(--cui-range-level-muted-background);
+  }
+
   :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="bar"]) {
     clip-path: inset(0 calc((1 - var(--_range-level, 0)) * 100%) 0 0 round var(--cui-range-indicator-radius));
   }
@@ -145,6 +153,12 @@
   initial-value: transparent;
 }
 
+@property --cui-range-level-muted-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
 @property --cui-range-level-size {
   syntax: "<length-percentage>";
   inherits: true;

package/dist/ui/channel-strip.js

@@ -6,6 +6,7 @@ import { jsx } from "react/jsx-runtime";
 const ChannelStripTitleIdContext = createContext(null);
 function Mixer({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
+		role: "group",
 		"data-control-ui": "channel-strip",
 		"data-control-family": "channel-strip",
 		"data-slot": "mixer",
@@ -41,12 +42,12 @@ function ChannelStripHeader({ className, ...props }) {
 function ChannelStripTitle({ className, ...props }) {
 	const titleId = use(ChannelStripTitleIdContext);
 	return /* @__PURE__ */ jsx("span", {
-		id: titleId ?? void 0,
 		"data-control-ui": "channel-strip",
 		"data-control-family": "channel-strip",
 		"data-slot": "title",
 		className: cn("min-w-0 flex-1 truncate text-caption", className),
-		...props
+		...props,
+		id: titleId ?? void 0
 	});
 }
 function ChannelStripActions({ className, ...props }) {

package/dist/ui/level-meter.d.ts

@@ -12,6 +12,7 @@ export type LevelMeterProps = Omit<ComponentProps<"div">, "style"> & {
   maxDb?: number;
   warningDb?: number;
   clipDb?: number;
+  muted?: boolean;
   orientation?: LevelMeterOrientation;
   style?: CSSProperties & RangeKnobStyle;
 };
@@ -28,7 +29,7 @@ export type LevelMeterScaleProps = Omit<ComponentProps<"div">, "style" | "childr
   ticks?: readonly number[];
   style?: CSSProperties & RangeKnobStyle;
 };
-export declare function LevelMeter({ value, source, minDb, maxDb, warningDb, clipDb, orientation, className, style, children, ref, ...props }: LevelMeterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function LevelMeter({ value, source, minDb, maxDb, warningDb, clipDb, muted, orientation, className, style, children, ref, ...props }: LevelMeterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function LevelMeterTrack({ className, ...props }: LevelMeterTrackProps): import("react").JSX.Element;
 export declare function LevelMeterBar({ className, ...props }: LevelMeterBarProps): import("react").JSX.Element;
 export declare function LevelMeterPeak({ className, ...props }: LevelMeterPeakProps): import("react").JSX.Element;

package/dist/ui/level-meter.js

@@ -77,7 +77,7 @@ function createLevelMeterPainter() {
 		}
 	};
 }
-function LevelMeter({ value, source, minDb = -60, maxDb = 0, warningDb = -18, clipDb = -6, orientation = "horizontal", className, style, children, ref, ...props }) {
+function LevelMeter({ value, source, minDb = -60, maxDb = 0, warningDb = -18, clipDb = -6, muted = false, orientation = "horizontal", className, style, children, ref, ...props }) {
 	const [painter] = useState(createLevelMeterPainter);
 	const rootRef = useRef(null);
 	const labelled = Boolean(props["aria-label"] || props["aria-labelledby"]);
@@ -130,6 +130,7 @@ function LevelMeter({ value, source, minDb = -60, maxDb = 0, warningDb = -18, cl
 			"data-range-kind": "level-meter",
 			"data-slot": "root",
 			"data-orientation": orientation,
+			"data-muted": muted || void 0,
 			className: cn("grid", className),
 			style: zoneStyle,
 			children: /* @__PURE__ */ jsx(LevelMeterScaleContext, {

package/dist/ui/toggle.js

@@ -76,7 +76,7 @@ function ToggleGroup({ className, orientation = "horizontal", indicator, childre
 			"data-orientation": orientation,
 			"data-track": resolvedIndicator,
 			orientation,
-			className: cn(buttonTrackStructureClasses, "inline-flex items-center data-[track=hover]:gap-0", orientation === "vertical" && "flex-col", className),
+			className: cn(buttonTrackStructureClasses, "inline-flex items-center", orientation === "vertical" && "flex-col", className),
 			...props,
 			children: [children, tracksHover ? /* @__PURE__ */ jsx(TrackHighlight, { className: "z-0" }) : null]
 		})

package/package.json

@@ -1,7 +1,25 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.9.2",
-  "description": "Control UI components, blocks, and primitives with neutral defaults and consumer-owned themes.",
+  "version": "0.9.4",
+  "description": "100+ React components for Tailwind CSS and shadcn/ui: pickers, trees, editors, canvases, app templates, and AI chat surfaces, with neutral defaults and consumer-owned themes.",
+  "keywords": [
+    "react",
+    "react-components",
+    "component-library",
+    "ui-components",
+    "shadcn",
+    "shadcn-ui",
+    "tailwindcss",
+    "design-system",
+    "base-ui",
+    "nextjs",
+    "color-picker",
+    "emoji-picker",
+    "tree-view",
+    "markdown-editor",
+    "ai-chat",
+    "chat-ui"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",