@ctrl-ui/react 0.8.20 → 0.9.0

package/dist/markdown-editor/toolbar.js

@@ -1,5 +1,6 @@
 "use client";
 import { Button } from "../ui/button.js";
+import { ScrollArea } from "../ui/scroll-area.js";
 import { Text } from "../ui/typography.js";
 import { ChatComposerAttachment, ChatComposerAttachments } from "../chat-composer-attachment.js";
 import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from "../ui/popover.js";
@@ -9,10 +10,11 @@ import { isEditorUrl } from "./extensions.js";
 import { markdownImageTypes } from "./uploads.js";
 import { Input } from "../ui/input.js";
 import { Toolbar, ToolbarButton, ToolbarSeparator } from "../ui/toolbar.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { Label } from "../ui/label.js";
 import { useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { BoldIcon, CodeIcon, Heading2Icon, ImageIcon, ItalicIcon, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, QuoteIcon, RedoIcon, SquareCodeIcon, StrikethroughIcon, UndoIcon } from "lucide-react";
+import { BoldIcon, ChevronDownIcon, CodeIcon, ImageIcon, ItalicIcon, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, QuoteIcon, RedoIcon, SquareCodeIcon, StrikethroughIcon, UndoIcon } from "lucide-react";
 import { useEditorState } from "@tiptap/react";
 //#region src/markdown-editor/toolbar.tsx
 function MarkdownEditorToolbar({ children }) {
@@ -24,7 +26,6 @@ function MarkdownEditorToolbar({ children }) {
 			italic: current?.isActive("italic"),
 			strike: current?.isActive("strike"),
 			code: current?.isActive("code"),
-			heading: current?.isActive("heading", { level: 2 }),
 			bulletList: current?.isActive("bulletList"),
 			orderedList: current?.isActive("orderedList"),
 			taskList: current?.isActive("taskList"),
@@ -59,12 +60,6 @@ function MarkdownEditorToolbar({ children }) {
 			active: state?.code,
 			run: () => editor?.chain().focus().toggleCode().run()
 		},
-		{
-			label: "Heading",
-			Icon: Heading2Icon,
-			active: state?.heading,
-			run: () => editor?.chain().focus().toggleHeading({ level: 2 }).run()
-		},
 		{
 			label: "Bullet list",
 			Icon: ListIcon,
@@ -96,53 +91,113 @@ function MarkdownEditorToolbar({ children }) {
 			run: () => editor?.chain().focus().toggleCodeBlock().run()
 		}
 	];
-	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Toolbar, {
-		"aria-label": "Markdown formatting",
-		chrome: "embedded",
-		className: "flex w-full flex-wrap",
-		children: [
-			actions.map(({ label, Icon, active, run }) => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-				render: /* @__PURE__ */ jsx(ToolbarButton, {
-					type: "button",
-					iconOnly: true,
-					"aria-label": label,
-					"aria-pressed": Boolean(active),
-					disabled: disabled || source || !editor,
-					onMouseDown: (event) => event.preventDefault(),
-					onClick: run
-				}),
-				children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" })
-			}), /* @__PURE__ */ jsx(TooltipContent, { children: label })] }, label)),
-			/* @__PURE__ */ jsx(MarkdownEditorLink, {}),
-			/* @__PURE__ */ jsx(MarkdownEditorImage, {}),
-			/* @__PURE__ */ jsx(ToolbarSeparator, {}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				type: "button",
-				iconOnly: true,
-				"aria-label": "Undo",
-				disabled: disabled || source || !state?.undo,
-				onClick: () => editor?.chain().focus().undo().run(),
-				children: /* @__PURE__ */ jsx(UndoIcon, { "aria-hidden": "true" })
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				type: "button",
-				iconOnly: true,
-				"aria-label": "Redo",
-				disabled: disabled || source || !state?.redo,
-				onClick: () => editor?.chain().focus().redo().run(),
-				children: /* @__PURE__ */ jsx(RedoIcon, { "aria-hidden": "true" })
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				type: "button",
-				"aria-pressed": source,
-				disabled: disabled || !editor || sourceRequired || uploads.length > 0,
-				onClick: () => setSource(!source),
-				children: "Markdown source"
-			}),
-			children
-		]
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "markdown-editor",
+		"data-control-family": "markdown-editor",
+		"data-slot": "toolbar",
+		children: /* @__PURE__ */ jsx(ScrollArea, {
+			lockAxis: "y",
+			mask: false,
+			blur: false,
+			children: /* @__PURE__ */ jsxs(Toolbar, {
+				"aria-label": "Markdown formatting",
+				chrome: "embedded",
+				className: "flex w-max min-w-full",
+				children: [
+					/* @__PURE__ */ jsx(MarkdownEditorHeading, {}),
+					/* @__PURE__ */ jsx(ToolbarSeparator, {}),
+					actions.map(({ label, Icon, active, run }) => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+						render: /* @__PURE__ */ jsx(ToolbarButton, {
+							type: "button",
+							iconOnly: true,
+							"aria-label": label,
+							"aria-pressed": Boolean(active),
+							disabled: disabled || source || !editor,
+							onMouseDown: (event) => event.preventDefault(),
+							onClick: run
+						}),
+						children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" })
+					}), /* @__PURE__ */ jsx(TooltipContent, { children: label })] }, label)),
+					/* @__PURE__ */ jsx(MarkdownEditorLink, {}),
+					/* @__PURE__ */ jsx(MarkdownEditorImage, {}),
+					/* @__PURE__ */ jsx(ToolbarSeparator, {}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						type: "button",
+						iconOnly: true,
+						"aria-label": "Undo",
+						disabled: disabled || source || !state?.undo,
+						onClick: () => editor?.chain().focus().undo().run(),
+						children: /* @__PURE__ */ jsx(UndoIcon, { "aria-hidden": "true" })
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						type: "button",
+						iconOnly: true,
+						"aria-label": "Redo",
+						disabled: disabled || source || !state?.redo,
+						onClick: () => editor?.chain().focus().redo().run(),
+						children: /* @__PURE__ */ jsx(RedoIcon, { "aria-hidden": "true" })
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						type: "button",
+						"aria-pressed": source,
+						disabled: disabled || !editor || sourceRequired || uploads.length > 0,
+						onClick: () => setSource(!source),
+						children: "Markdown source"
+					}),
+					children
+				]
+			})
+		})
 	}) });
 }
+function MarkdownEditorHeading() {
+	const { editor, disabled, source } = useMarkdownEditor();
+	const level = useEditorState({
+		editor,
+		selector: ({ editor: current }) => current?.isActive("heading") ? String(current.getAttributes("heading").level) : "paragraph"
+	});
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(ToolbarButton, {
+		type: "button",
+		"aria-label": "Text style",
+		disabled: disabled || source || !editor,
+		render: /* @__PURE__ */ jsx(DropdownMenuTrigger, {}),
+		children: [/* @__PURE__ */ jsx("span", { children: level && level !== "paragraph" ? `H${level}` : "Text" }), /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })]
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		finalFocus: () => editor?.view.dom ?? true,
+		children: /* @__PURE__ */ jsxs(DropdownMenuRadioGroup, {
+			value: level ?? "paragraph",
+			onValueChange: (value) => {
+				if (!editor || disabled || source) return;
+				const heading = [
+					1,
+					2,
+					3,
+					4,
+					5,
+					6
+				].find((item) => String(item) === value);
+				if (heading) editor.chain().focus().setHeading({ level: heading }).run();
+				else editor.chain().focus().setParagraph().run();
+			},
+			children: [/* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+				value: "paragraph",
+				closeOnClick: true,
+				children: "Paragraph"
+			}), [
+				1,
+				2,
+				3,
+				4,
+				5,
+				6
+			].map((item) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+				value: String(item),
+				closeOnClick: true,
+				children: ["Heading ", item]
+			}, item))]
+		})
+	})] });
+}
 function MarkdownEditorLink() {
 	const { editor, disabled, source } = useMarkdownEditor();
 	const [open, setOpen] = useState(false);
@@ -160,18 +215,20 @@ function MarkdownEditorLink() {
 			setOpen(next);
 			if (next) setUrl(editor?.getAttributes("link").href ?? "");
 		},
-		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-			disabled: disabled || source || !editor,
+		children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 			render: /* @__PURE__ */ jsx(ToolbarButton, {
 				type: "button",
 				iconOnly: true,
-				"aria-label": "Edit link"
+				"aria-label": "Edit link",
+				disabled: disabled || source || !editor,
+				render: /* @__PURE__ */ jsx(PopoverTrigger, {})
 			}),
 			children: /* @__PURE__ */ jsx(LinkIcon, { "aria-hidden": "true" })
-		}), /* @__PURE__ */ jsxs(PopoverContent, {
+		}), /* @__PURE__ */ jsx(TooltipContent, { children: "Edit link" })] }), /* @__PURE__ */ jsxs(PopoverContent, {
+			finalFocus: () => editor?.view.dom ?? true,
 			className: "grid gap-3",
 			onKeyDown: (event) => {
-				if (event.key === "Enter") {
+				if (event.key === "Enter" && event.target instanceof HTMLInputElement && !event.nativeEvent.isComposing) {
 					event.preventDefault();
 					event.stopPropagation();
 					apply();
@@ -233,18 +290,20 @@ function MarkdownEditorImage() {
 	return /* @__PURE__ */ jsxs(Popover, {
 		open,
 		onOpenChange: setOpen,
-		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-			disabled: disabled || source || !editor,
+		children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 			render: /* @__PURE__ */ jsx(ToolbarButton, {
 				type: "button",
 				iconOnly: true,
-				"aria-label": "Insert image"
+				"aria-label": "Insert image",
+				disabled: disabled || source || !editor,
+				render: /* @__PURE__ */ jsx(PopoverTrigger, {})
 			}),
 			children: /* @__PURE__ */ jsx(ImageIcon, { "aria-hidden": "true" })
-		}), /* @__PURE__ */ jsxs(PopoverContent, {
+		}), /* @__PURE__ */ jsx(TooltipContent, { children: "Insert image" })] }), /* @__PURE__ */ jsxs(PopoverContent, {
+			finalFocus: () => editor?.view.dom ?? true,
 			className: "grid gap-3",
 			onKeyDown: (event) => {
-				if (event.key === "Enter") {
+				if (event.key === "Enter" && event.target instanceof HTMLInputElement && !event.nativeEvent.isComposing) {
 					event.preventDefault();
 					event.stopPropagation();
 					insert();

package/dist/markdown-editor.js

@@ -73,11 +73,11 @@ function MarkdownEditor({ value, defaultValue = "", onValueChange, disabled = fa
 		handlers.current = imageUploads;
 	});
 	useEffect(() => {
-		if (!editor) return;
+		if (!editor || editor.isDestroyed) return;
 		editor.setEditable(!disabled, false);
 	}, [editor, disabled]);
 	useEffect(() => {
-		if (!editor) return;
+		if (!editor || editor.isDestroyed) return;
 		const externalReset = lastValue.current !== markdown;
 		if (externalReset) handlers.current?.cancelAll();
 		if (source) {
@@ -158,7 +158,7 @@ function MarkdownEditorContent({ label, placeholder, autoFocus = false, classNam
 		placeholder
 	]);
 	useEffect(() => {
-		if (editor && autoFocus && !source && !disabled) editor.commands.focus("end");
+		if (editor && !editor.isDestroyed && autoFocus && !source && !disabled) editor.commands.focus("end");
 	}, [
 		editor,
 		autoFocus,

package/dist/skin.d.ts

@@ -41,7 +41,6 @@ export type ControlUiSkin = {
   scrollAreaScrollbarVisibility?: "scroll" | "hover" | "always";
   scrollAreaScrollbarGutter?: "auto" | "stable";
   indicators?: SkinIndicators;
-  sidebarWidth?: string;
   effects?: ControlEffect[];
   adornments?: { [Scope in SkinAdornmentScope]?: { [Part in SkinAdornmentPart<Scope>]?: AdornmentEntry<SkinAdornmentContexts[Scope][Part]>; }; };
 };

package/dist/styles/index.css

@@ -33,6 +33,7 @@
 @import "./recipes/button-group.css";
 @import "./recipes/calendar.css";
 @import "./recipes/card.css";
+@import "./recipes/chart.css";
 @import "./recipes/chat-message.css";
 @import "./recipes/chat-message-edit.css";
 @import "./recipes/chat-message-social.css";
@@ -48,6 +49,7 @@
 @import "./recipes/color-picker.css";
 @import "./recipes/color-picker-details.css";
 @import "./recipes/color-picker-values.css";
+@import "./recipes/gradient-editor.css";
 @import "./recipes/empty.css";
 @import "./recipes/context.css";
 @import "./recipes/infinite-canvas.css";
@@ -64,13 +66,12 @@
 @import "./recipes/dynamic-notification.css";
 @import "./recipes/dynamic-notification-input.css";
 @import "./recipes/dynamic-notification-motion.css";
-@import "./recipes/emoji-picker.css";
 @import "./recipes/icon-picker.css";
 @import "./recipes/tabs.css";
 @import "./recipes/tabs-motion.css";
+@import "./recipes/emoji-picker.css";
 @import "./recipes/filter-bar.css";
 @import "./recipes/flow.css";
-@import "./recipes/gradient-editor.css";
 @import "./recipes/inline-attachment.css";
 @import "./recipes/source-badge.css";
 @import "./recipes/inline-citation.css";

package/dist/styles/recipes/action-bar.css

@@ -29,7 +29,7 @@
 @property --cui-action-bar-hidden-opacity {
   syntax: "<number>";
   inherits: true;
-  initial-value: 0;
+  initial-value: 1;
 }
 
 @property --cui-action-bar-visible-opacity {

package/dist/styles/recipes/activity.css

@@ -150,7 +150,7 @@
 }
 
 @property --cui-activity-code-radius {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }

package/dist/styles/recipes/alert.css

@@ -72,7 +72,7 @@
 }
 
 @property --cui-alert-background {
-  syntax: "*";
+  syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 }
@@ -86,7 +86,6 @@
 @property --cui-alert-shadow {
   syntax: "*";
   inherits: true;
-  initial-value: none;
 }
 
 @property --cui-alert-foreground {
@@ -108,43 +107,43 @@
 }
 
 @property --cui-alert-padding {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-alert-padding-inline {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-alert-gap {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-alert-icon-gap {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-alert-icon-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-alert-font-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-alert-description-gap {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
@@ -152,5 +151,5 @@
 @property --cui-alert-title-font-weight {
   syntax: "<number>";
   inherits: true;
-  initial-value: 500;
+  initial-value: 400;
 }

package/dist/styles/recipes/app-shell-header.css

@@ -13,13 +13,13 @@
 }
 
 @property --cui-app-shell-header-height {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-app-shell-header-padding-inline {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }

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

@@ -1,6 +1,7 @@
 @layer components {
   :where([data-control-ui="audio-recorder"][data-slot="root"]) {
-    --cui-audio-recorder-active-foreground: var(--foreground);
+    --cui-audio-recorder-recording-foreground: var(--foreground);
+    --cui-audio-recorder-recorded-foreground: var(--foreground);
     --cui-audio-recorder-foreground: var(--muted-foreground);
     --cui-audio-recorder-recording-ring-color: oklch(from var(--destructive) l c h / 0.25);
     --cui-audio-recorder-error-foreground: var(--destructive-text);
@@ -16,8 +17,12 @@
     gap: calc(var(--spacing) * 1);
   }
 
-  :where([data-control-ui="audio-recorder"][data-slot="root"]:is([data-state="recording"], [data-state="recorded"])) {
-    color: var(--cui-audio-recorder-active-foreground);
+  :where([data-control-ui="audio-recorder"][data-slot="root"][data-state="recording"]) {
+    color: var(--cui-audio-recorder-recording-foreground);
+  }
+
+  :where([data-control-ui="audio-recorder"][data-slot="root"][data-state="recorded"]) {
+    color: var(--cui-audio-recorder-recorded-foreground);
   }
 
   :where([data-control-ui="audio-recorder"][data-slot="trigger"][data-recorder-state="recording"]) {
@@ -89,7 +94,13 @@
   initial-value: transparent;
 }
 
-@property --cui-audio-recorder-active-foreground {
+@property --cui-audio-recorder-recording-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-audio-recorder-recorded-foreground {
   syntax: "<color>";
   inherits: true;
   initial-value: transparent;

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

@@ -155,15 +155,15 @@
 }
 
 @property --cui-audio-visualizer-bar-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
-  initial-value: 4px;
+  initial-value: 0px;
 }
 
 @property --cui-audio-visualizer-bar-gap {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
-  initial-value: 1px;
+  initial-value: 0px;
 }
 
 @property --cui-audio-visualizer-radius {

package/dist/styles/recipes/avatar.css

@@ -60,11 +60,11 @@
   }
 
   :where([data-control-family="avatar"][data-slot="badge"][data-status="online"]) {
-    --cui-avatar-badge-background: var(--success-text);
+    --cui-avatar-badge-background: var(--success);
   }
 
   :where([data-control-family="avatar"][data-slot="badge"][data-status="away"]) {
-    --cui-avatar-badge-background: var(--warning-text);
+    --cui-avatar-badge-background: var(--warning);
   }
 
   :where([data-control-family="avatar"][data-slot="badge"][data-status="busy"]) {
@@ -121,7 +121,7 @@
 }
 
 @property --cui-avatar-badge-ring-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }

package/dist/styles/recipes/badge.css

@@ -96,7 +96,7 @@
 }
 
 @property --cui-badge-background {
-  syntax: "*";
+  syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 }
@@ -114,7 +114,7 @@
 }
 
 @property --cui-badge-font-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }

package/dist/styles/recipes/button.css

@@ -220,7 +220,7 @@
 @property --cui-button-icon {
   syntax: "<length>";
   inherits: true;
-  initial-value: 16px;
+  initial-value: 0px;
 }
 
 @property --cui-button-height {
@@ -244,7 +244,7 @@
 @property --cui-button-font-size {
   syntax: "<length-percentage>";
   inherits: true;
-  initial-value: 1rem;
+  initial-value: 0px;
 }
 
 @property --cui-button-background {
@@ -319,13 +319,11 @@
 @property --cui-button-hover-shadow {
   syntax: "*";
   inherits: true;
-  initial-value: none;
 }
 
 @property --cui-button-press-shadow {
   syntax: "*";
   inherits: true;
-  initial-value: none;
 }
 
 @property --cui-button-active-shadow {
@@ -348,5 +346,4 @@
 @property --cui-button-open-shadow {
   syntax: "*";
   inherits: true;
-  initial-value: none;
 }

package/dist/styles/recipes/card.css

@@ -85,11 +85,9 @@
 @property --cui-card-shadow {
   syntax: "*";
   inherits: true;
-  initial-value: none;
 }
 
 @property --cui-card-backdrop-filter {
   syntax: "*";
   inherits: true;
-  initial-value: none;
 }