@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/ui/infinite-canvas.js

@@ -14,6 +14,10 @@ const DEFAULT_MIN_SCALE = .35;
 const DEFAULT_MAX_SCALE = 2.5;
 const KEYBOARD_PAN_STEP = 32;
 const GRID_SIZE = 24;
+const WHEEL_ZOOM_SPEED = .004;
+const MAX_WHEEL_ZOOM_DELTA = 50;
+const CANVAS_KEY_SHORTCUTS = "ArrowLeft ArrowRight ArrowUp ArrowDown + - 0";
+const NOTCHED_WHEEL_DELTA = 40;
 const KEYBOARD_PAN_DIRECTIONS = {
 	ArrowLeft: {
 		x: -1,
@@ -32,6 +36,14 @@ const KEYBOARD_PAN_DIRECTIONS = {
 		y: 1
 	}
 };
+const KEYBOARD_ZOOM_FACTORS = {
+	"+": 1.15,
+	"=": 1.15,
+	"-": 1 / 1.15
+};
+function keyboardPanStep(shiftKey) {
+	return shiftKey ? 96 : KEYBOARD_PAN_STEP;
+}
 const InfiniteCanvasContext = createContext(null);
 function clampScale(scale, minScale, maxScale) {
 	return Math.min(Math.max(scale, minScale), maxScale);
@@ -45,10 +57,13 @@ function zoomAroundPoint(transform, nextScale, point) {
 		scale: nextScale
 	};
 }
+function wheelDeltaMultiplier(event, viewportHeight) {
+	if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) return 16;
+	if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) return viewportHeight;
+	return 1;
+}
 function panFromWheel(transform, event, viewportHeight) {
-	let deltaMultiplier = 1;
-	if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) deltaMultiplier = 16;
-	else if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) deltaMultiplier = viewportHeight;
+	const deltaMultiplier = wheelDeltaMultiplier(event, viewportHeight);
 	const horizontalDelta = event.shiftKey && event.deltaX === 0 ? event.deltaY : event.deltaX;
 	const verticalDelta = event.shiftKey && event.deltaX === 0 ? 0 : event.deltaY;
 	return {
@@ -62,11 +77,12 @@ function useInfiniteCanvas() {
 	if (!context) throw new Error("useInfiniteCanvas must be used within InfiniteCanvas");
 	return context;
 }
-function InfiniteCanvas({ transform: controlledTransform, defaultTransform = DEFAULT_TRANSFORM, onTransformChange, minScale: minScaleProp = DEFAULT_MIN_SCALE, maxScale: maxScaleProp = DEFAULT_MAX_SCALE, className, children, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, onKeyDown, "aria-label": ariaLabel = "Infinite canvas", ...props }) {
+function InfiniteCanvas({ transform: controlledTransform, defaultTransform = DEFAULT_TRANSFORM, onTransformChange, minScale: minScaleProp = DEFAULT_MIN_SCALE, maxScale: maxScaleProp = DEFAULT_MAX_SCALE, className, children, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, onKeyDown, "aria-label": ariaLabel = "Infinite canvas", "aria-keyshortcuts": ariaKeyShortcuts, ...props }) {
 	const minScale = Math.max(.1, minScaleProp);
 	const maxScale = Math.max(minScale, maxScaleProp);
 	const [uncontrolledTransform, setUncontrolledTransform] = useState(defaultTransform);
 	const [panning, setPanning] = useState(false);
+	const [easing, setEasing] = useState(false);
 	const panRef = useRef(null);
 	const rootRef = useRef(null);
 	const transform = controlledTransform ?? uncontrolledTransform;
@@ -74,7 +90,8 @@ function InfiniteCanvas({ transform: controlledTransform, defaultTransform = DEF
 	useEffect(() => {
 		transformRef.current = transform;
 	}, [transform]);
-	function commitTransform(next, reason) {
+	function commitTransform(next, reason, eased = reason === "control" || reason === "keyboard") {
+		setEasing(eased);
 		const bounded = {
 			...next,
 			scale: clampScale(next.scale, minScale, maxScale)
@@ -152,7 +169,11 @@ function InfiniteCanvas({ transform: controlledTransform, defaultTransform = DEF
 				x: event.clientX - bounds.left,
 				y: event.clientY - bounds.top
 			};
-			commitTransform(zoomAroundPoint(currentTransform, clampScale(currentTransform.scale * Math.exp(-event.deltaY * .004), minScale, maxScale), point), "wheel");
+			const zoomDelta = event.deltaY * wheelDeltaMultiplier(event, root.clientHeight);
+			const boundedZoomDelta = Math.min(Math.max(zoomDelta, -50), MAX_WHEEL_ZOOM_DELTA);
+			const nextScale = clampScale(currentTransform.scale * Math.exp(-boundedZoomDelta * WHEEL_ZOOM_SPEED), minScale, maxScale);
+			const notchedWheel = Math.abs(zoomDelta) >= NOTCHED_WHEEL_DELTA;
+			commitTransform(zoomAroundPoint(currentTransform, nextScale, point), "wheel", notchedWheel);
 			return;
 		}
 		commitTransform(panFromWheel(currentTransform, event, root.clientHeight), "wheel");
@@ -164,23 +185,32 @@ function InfiniteCanvas({ transform: controlledTransform, defaultTransform = DEF
 		root.addEventListener("wheel", listener, { passive: false });
 		return () => root.removeEventListener("wheel", listener);
 	}, []);
-	function moveWithKeyboard(event) {
-		onKeyDown?.(event);
-		if (event.defaultPrevented) return;
-		const currentTransform = transformRef.current;
-		const direction = KEYBOARD_PAN_DIRECTIONS[event.key];
+	function applyKeyboardCommand(key, shiftKey) {
+		const direction = KEYBOARD_PAN_DIRECTIONS[key];
 		if (direction) {
-			const panStep = event.shiftKey ? 96 : KEYBOARD_PAN_STEP;
+			const currentTransform = transformRef.current;
+			const panStep = keyboardPanStep(shiftKey);
 			commitTransform({
 				...currentTransform,
 				x: currentTransform.x + direction.x * panStep,
 				y: currentTransform.y + direction.y * panStep
 			}, "keyboard");
-		} else if (event.key === "+" || event.key === "=") zoomBy(1.15, "keyboard");
-		else if (event.key === "-") zoomBy(1 / 1.15, "keyboard");
-		else if (event.key === "0") reset("keyboard");
-		else return;
-		event.preventDefault();
+			return true;
+		}
+		const zoomFactor = KEYBOARD_ZOOM_FACTORS[key];
+		if (zoomFactor) {
+			zoomBy(zoomFactor, "keyboard");
+			return true;
+		}
+		if (key !== "0") return false;
+		reset("keyboard");
+		return true;
+	}
+	function moveWithKeyboard(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || event.target !== event.currentTarget) return;
+		if (event.ctrlKey || event.metaKey || event.altKey) return;
+		if (applyKeyboardCommand(event.key, event.shiftKey)) event.preventDefault();
 	}
 	const context = {
 		transform,
@@ -203,9 +233,10 @@ function InfiniteCanvas({ transform: controlledTransform, defaultTransform = DEF
 			"data-control-family": "infinite-canvas",
 			"data-slot": "root",
 			"data-panning": panning || void 0,
+			"data-easing": easing || void 0,
 			"aria-label": ariaLabel,
 			role: "application",
-			"aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown + - 0",
+			"aria-keyshortcuts": ariaKeyShortcuts ? `${CANVAS_KEY_SHORTCUTS} ${ariaKeyShortcuts}` : CANVAS_KEY_SHORTCUTS,
 			tabIndex: 0,
 			className: cn("relative isolate overflow-hidden overscroll-contain touch-none select-none data-panning:cursor-grabbing", className),
 			style: canvasStyle,
@@ -233,6 +264,94 @@ function InfiniteCanvasContent({ className, style, ...props }) {
 		}
 	});
 }
+function InfiniteCanvasItem({ x, y, onPositionChange, movableItemLabel = "Movable item", className, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onKeyDown, ...props }) {
+	const { transform } = useInfiniteCanvas();
+	const dragRef = useRef(null);
+	const [dragging, setDragging] = useState(false);
+	function beginDrag(event) {
+		onPointerDown?.(event);
+		if (event.defaultPrevented || !onPositionChange || !event.isPrimary || event.button !== 0) return;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		dragRef.current = {
+			pointerId: event.pointerId,
+			startPointer: {
+				x: event.clientX,
+				y: event.clientY
+			},
+			startPosition: {
+				x,
+				y
+			}
+		};
+		setDragging(true);
+	}
+	function updateDrag(event) {
+		onPointerMove?.(event);
+		const drag = dragRef.current;
+		if (event.defaultPrevented || !drag || drag.pointerId !== event.pointerId) return;
+		onPositionChange?.({
+			x: drag.startPosition.x + (event.clientX - drag.startPointer.x) / transform.scale,
+			y: drag.startPosition.y + (event.clientY - drag.startPointer.y) / transform.scale
+		});
+	}
+	function finishDrag(event) {
+		if (dragRef.current?.pointerId !== event.pointerId) return;
+		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+		dragRef.current = null;
+		setDragging(false);
+	}
+	function endDrag(event) {
+		onPointerUp?.(event);
+		finishDrag(event);
+	}
+	function cancelDrag(event) {
+		onPointerCancel?.(event);
+		finishDrag(event);
+	}
+	function moveWithKeyboard(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || !onPositionChange || event.target !== event.currentTarget) return;
+		if (event.ctrlKey || event.metaKey || event.altKey) return;
+		const direction = KEYBOARD_PAN_DIRECTIONS[event.key];
+		if (!direction) return;
+		event.preventDefault();
+		const step = keyboardPanStep(event.shiftKey) / transform.scale;
+		onPositionChange({
+			x: x + direction.x * step,
+			y: y + direction.y * step
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		...onPositionChange ? {
+			role: "group",
+			"aria-roledescription": movableItemLabel,
+			"aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown",
+			tabIndex: 0,
+			onPointerDown: beginDrag,
+			onPointerMove: updateDrag,
+			onPointerUp: endDrag,
+			onPointerCancel: cancelDrag,
+			onKeyDown: moveWithKeyboard
+		} : {
+			onPointerDown,
+			onPointerMove,
+			onPointerUp,
+			onPointerCancel,
+			onKeyDown
+		},
+		...props,
+		"data-control-ui": "infinite-canvas",
+		"data-control-family": "infinite-canvas",
+		"data-slot": "item",
+		"data-dragging": dragging || void 0,
+		className: cn("absolute", onPositionChange && "cursor-grab touch-none data-dragging:cursor-grabbing", className),
+		style: {
+			...style,
+			left: x,
+			top: y
+		}
+	});
+}
 function InfiniteCanvasControls({ className, ...props }) {
 	const canvas = useInfiniteCanvas();
 	const percentage = Math.round(canvas.transform.scale * 100);
@@ -240,7 +359,7 @@ function InfiniteCanvasControls({ className, ...props }) {
 		"data-control-ui": "infinite-canvas",
 		"data-control-family": "infinite-canvas",
 		"data-slot": "controls",
-		className: cn("absolute right-3 bottom-3 z-40 flex items-center", className),
+		className: cn("absolute z-40 flex items-center", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx(Button, {
@@ -276,4 +395,4 @@ function InfiniteCanvasControls({ className, ...props }) {
 	});
 }
 //#endregion
-export { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasControls, useInfiniteCanvas };
+export { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasControls, InfiniteCanvasItem, useInfiniteCanvas };

package/dist/ui/input-group.d.ts

@@ -12,9 +12,7 @@ export type InputGroupProps = Omit<ComponentProps<"div">, "style"> & {
 export type InputGroupAddonProps = ComponentProps<"span"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-export declare function InputGroup({ size, className, render, children, ...props }: InputGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function useIsInsideInputGroup(): boolean;
+export declare function InputGroup({ size, className, render, children, ...props }: InputGroupProps): import("react").JSX.Element;
 export declare function InputGroupAddon({ className, ...props }: InputGroupAddonProps): import("react").JSX.Element;
-export declare function InputGroupInput({ className, ...props }: ComponentProps<"input"> & {
-  style?: CSSProperties & FieldKnobStyle;
-}): import("react").JSX.Element;
 //#endregion

package/dist/ui/input-group.js

@@ -1,11 +1,16 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { createContext, use } from "react";
 import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/input-group.tsx
+const InputGroupSurfaceContext = createContext(false);
+function useIsInsideInputGroup() {
+	return use(InputGroupSurfaceContext);
+}
 function InputGroup({ size = "md", className, render, children, ...props }) {
 	const classes = cn("flex min-w-0 w-full items-center overflow-hidden", className);
-	return useRender({
+	const group = useRender({
 		defaultTagName: "div",
 		render,
 		props: {
@@ -19,26 +24,20 @@ function InputGroup({ size = "md", className, render, children, ...props }) {
 			children
 		}
 	});
+	return /* @__PURE__ */ jsx(InputGroupSurfaceContext, {
+		value: true,
+		children: group
+	});
 }
 function InputGroupAddon({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
+		...props,
 		"data-control-ui": "input-group",
 		"data-control-family": "field",
 		"data-field-kind": "input-group",
 		"data-slot": "addon",
-		className: cn("inline-flex shrink-0 items-center", className),
-		...props
-	});
-}
-function InputGroupInput({ className, ...props }) {
-	return /* @__PURE__ */ jsx("input", {
-		"data-control-ui": "input-group",
-		"data-control-family": "field",
-		"data-field-kind": "input-group",
-		"data-slot": "input",
-		className: cn("h-full min-w-0 flex-1", className),
-		...props
+		className: cn("inline-flex shrink-0 items-center", className)
 	});
 }
 //#endregion
-export { InputGroup, InputGroupAddon, InputGroupInput };
+export { InputGroup, InputGroupAddon, useIsInsideInputGroup };

package/dist/ui/input-otp.d.ts

@@ -33,5 +33,5 @@ export type InputOTPSeparatorProps = ComponentProps<"div"> & {
 };
 export declare function InputOTPSlot({ index, length, className, ...props }: InputOTPSlotProps): import("react").JSX.Element;
 export declare function InputOTPSeparator({ className, ...props }: InputOTPSeparatorProps): import("react").JSX.Element;
-export declare function InputOTP({ length, separator, className, children, ...props }: InputOTPProps): import("react").JSX.Element;
+export declare function InputOTP({ length, separator, className, children, "aria-label": ariaLabel, ...props }: InputOTPProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/input-otp.js

@@ -1,17 +1,24 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { Fragment } from "react";
+import { Fragment, createContext, useContext, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { OTPField } from "@base-ui/react/otp-field";
 //#region src/ui/input-otp.tsx
+const InputOTPLabelContext = createContext(void 0);
+function slotAriaLabel(index, length) {
+	if (index === 0) return void 0;
+	return length ? `Character ${index + 1} of ${length}` : `Character ${index + 1}`;
+}
 function InputOTPSlot({ index, length, className, ...props }) {
+	const labelId = useContext(InputOTPLabelContext);
 	return /* @__PURE__ */ jsx(OTPField.Input, {
 		"data-control-ui": "input-otp",
 		"data-field-kind": "input-otp",
 		"data-slot": "slot",
 		"data-control-family": "field",
 		"data-control": "true",
-		"aria-label": length ? `Character ${index + 1} of ${length}` : `Character ${index + 1}`,
+		"aria-label": slotAriaLabel(index, length),
+		"aria-labelledby": index === 0 ? labelId : void 0,
 		className: cn("relative flex size-[var(--control-h-md)] items-center justify-center", className),
 		...props
 	});
@@ -26,19 +33,29 @@ function InputOTPSeparator({ className, ...props }) {
 		...props
 	});
 }
-function InputOTP({ length = 6, separator = false, className, children, ...props }) {
-	return /* @__PURE__ */ jsx(OTPField.Root, {
-		"data-control-ui": "input-otp",
-		"data-control-family": "field",
-		"data-field-kind": "input-otp",
-		"data-slot": "root",
-		length,
-		className: cn("flex items-center", className),
-		...props,
-		children: children ?? Array.from({ length }, (_, index) => `input-otp-slot-${index}`).map((slotKey, index) => /* @__PURE__ */ jsxs(Fragment, { children: [separator && index === Math.ceil(length / 2) ? /* @__PURE__ */ jsx(InputOTPSeparator, {}) : null, /* @__PURE__ */ jsx(InputOTPSlot, {
-			index,
-			length
-		})] }, slotKey))
+function InputOTP({ length = 6, separator = false, className, children, "aria-label": ariaLabel, ...props }) {
+	const labelId = useId();
+	const labelledBy = ariaLabel ? labelId : void 0;
+	return /* @__PURE__ */ jsxs(InputOTPLabelContext.Provider, {
+		value: labelledBy,
+		children: [ariaLabel ? /* @__PURE__ */ jsx("span", {
+			id: labelId,
+			hidden: true,
+			children: ariaLabel
+		}) : null, /* @__PURE__ */ jsx(OTPField.Root, {
+			"data-control-ui": "input-otp",
+			"data-control-family": "field",
+			"data-field-kind": "input-otp",
+			"data-slot": "root",
+			length,
+			"aria-labelledby": labelledBy,
+			className: cn("flex items-center", className),
+			...props,
+			children: children ?? Array.from({ length }, (_, index) => `input-otp-slot-${index}`).map((slotKey, index) => /* @__PURE__ */ jsxs(Fragment, { children: [separator && index === Math.ceil(length / 2) ? /* @__PURE__ */ jsx(InputOTPSeparator, {}) : null, /* @__PURE__ */ jsx(InputOTPSlot, {
+				index,
+				length
+			})] }, slotKey))
+		})]
 	});
 }
 //#endregion

package/dist/ui/input.js

@@ -1,17 +1,26 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { useIsInsideInputGroup } from "./input-group.js";
 import { jsx } from "react/jsx-runtime";
 import { Input as Input$1 } from "@base-ui/react/input";
 //#region src/ui/input.tsx
 function Input({ size = "md", className, ...props }) {
+	if (useIsInsideInputGroup()) return /* @__PURE__ */ jsx(Input$1, {
+		...props,
+		"data-control-ui": "input-group",
+		"data-control-family": "field",
+		"data-field-kind": "input-group",
+		"data-slot": "input",
+		className: cn("h-full min-w-0 flex-1", className)
+	});
 	return /* @__PURE__ */ jsx(Input$1, {
+		...props,
 		"data-control-ui": "input",
 		"data-slot": "root",
 		"data-control-family": "field",
 		"data-control": "true",
 		"data-size": size,
-		className: cn("w-full min-w-0", className),
-		...props
+		className: cn("w-full min-w-0", className)
 	});
 }
 //#endregion

package/dist/ui/item.d.ts

@@ -20,6 +20,7 @@ export type ItemMediaProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ItemKnobStyle;
 };
 export type ItemTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  render?: RenderProp<ComponentProps<"div">>;
   style?: CSSProperties & ItemKnobStyle;
 };
 export type ItemGroupProps = ComponentProps<"div"> & {
@@ -33,7 +34,7 @@ export declare function ItemMedia({ className, ...props }: ItemMediaProps): impo
 export declare function ItemContent({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & ItemKnobStyle;
 }): import("react").JSX.Element;
-export declare function ItemTitle({ className, ...props }: ItemTitleProps): import("react").JSX.Element;
+export declare function ItemTitle({ render, className, ...props }: ItemTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function ItemDescription({ className, ...props }: ItemDescriptionProps): import("react").JSX.Element;
 export declare function ItemActions({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & ItemKnobStyle;

package/dist/ui/item.js

@@ -61,13 +61,17 @@ function ItemContent({ className, ...props }) {
 		...props
 	});
 }
-function ItemTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-control-ui": "item",
-		"data-control-family": "item",
-		"data-slot": "title",
-		className: cn("flex w-fit items-center", className),
-		...props
+function ItemTitle({ render, className, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "item",
+			"data-control-family": "item",
+			"data-slot": "title",
+			className: cn("flex w-fit items-center", className)
+		}
 	});
 }
 function ItemDescription({ className, ...props }) {

package/dist/ui/live-status.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+//#region src/ui/live-status.d.ts
+export type LiveStatusProps = Omit<ComponentProps<"span">, "role" | "children"> & {
+  message: string;
+};
+export declare function LiveStatus({ message, className, ...props }: LiveStatusProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/live-status.js

@@ -0,0 +1,17 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/live-status.tsx
+function LiveStatus({ message, className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		role: "status",
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		"data-control-ui": "live-status",
+		"data-slot": "root",
+		className: cn("sr-only", className),
+		children: message
+	});
+}
+//#endregion
+export { LiveStatus };

package/dist/ui/markdown-elements.d.ts

@@ -17,6 +17,9 @@ export declare function MarkdownCode({ className, children, node: _node, ...prop
 export declare function MarkdownH1({ className, node: _node, ...props }: MarkdownElementProps<"h1">): JSX.Element;
 export declare function MarkdownH2({ className, node: _node, ...props }: MarkdownElementProps<"h2">): JSX.Element;
 export declare function MarkdownH3({ className, node: _node, ...props }: MarkdownElementProps<"h3">): JSX.Element;
+export declare function MarkdownH4({ className, node: _node, ...props }: MarkdownElementProps<"h4">): JSX.Element;
+export declare function MarkdownH5({ className, node: _node, ...props }: MarkdownElementProps<"h5">): JSX.Element;
+export declare function MarkdownH6({ className, node: _node, ...props }: MarkdownElementProps<"h6">): JSX.Element;
 export declare function MarkdownP({ className, node: _node, ...props }: MarkdownElementProps<"p">): JSX.Element;
 export declare function MarkdownUl({ className, node: _node, ...props }: MarkdownElementProps<"ul">): JSX.Element;
 export declare function MarkdownOl({ className, node: _node, ...props }: MarkdownElementProps<"ol">): JSX.Element;
@@ -35,6 +38,9 @@ export declare const markdownComponents: {
   h1: typeof MarkdownH1;
   h2: typeof MarkdownH2;
   h3: typeof MarkdownH3;
+  h4: typeof MarkdownH4;
+  h5: typeof MarkdownH5;
+  h6: typeof MarkdownH6;
   p: typeof MarkdownP;
   ul: typeof MarkdownUl;
   ol: typeof MarkdownOl;

package/dist/ui/markdown-elements.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { ScrollArea } from "./scroll-area.js";
 import { Code, CodeActions, CodeContent, CodeCopy, CodeHeader, CodeTitle } from "./code.js";
 import { CodeDiff } from "./code-diff.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -73,6 +74,33 @@ function MarkdownH3({ className, node: _node, ...props }) {
 		...props
 	});
 }
+function MarkdownH4({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("h4", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "h4",
+		className,
+		...props
+	});
+}
+function MarkdownH5({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("h5", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "h5",
+		className,
+		...props
+	});
+}
+function MarkdownH6({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("h6", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "h6",
+		className,
+		...props
+	});
+}
 function MarkdownP({ className, node: _node, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-control-ui": "markdown",
@@ -159,14 +187,16 @@ function MarkdownTable({ className, children, node: _node, ...props }) {
 		"data-control-ui": "markdown",
 		"data-control-family": "markdown",
 		"data-slot": "table-scroll",
-		className: "overflow-x-auto",
-		children: /* @__PURE__ */ jsx("table", {
-			"data-control-ui": "markdown",
-			"data-control-family": "markdown",
-			"data-slot": "table",
-			className: cn("w-full", className),
-			...props,
-			children
+		children: /* @__PURE__ */ jsx(ScrollArea, {
+			lockAxis: "y",
+			children: /* @__PURE__ */ jsx("table", {
+				"data-control-ui": "markdown",
+				"data-control-family": "markdown",
+				"data-slot": "table",
+				className: cn("w-full", className),
+				...props,
+				children
+			})
 		})
 	});
 }
@@ -194,6 +224,9 @@ const markdownComponents = {
 	h1: MarkdownH1,
 	h2: MarkdownH2,
 	h3: MarkdownH3,
+	h4: MarkdownH4,
+	h5: MarkdownH5,
+	h6: MarkdownH6,
 	p: MarkdownP,
 	ul: MarkdownUl,
 	ol: MarkdownOl,
@@ -208,4 +241,4 @@ const markdownComponents = {
 	td: MarkdownTd
 };
 //#endregion
-export { MarkdownA, MarkdownBlockquote, MarkdownCode, MarkdownEm, MarkdownH1, MarkdownH2, MarkdownH3, MarkdownHr, MarkdownInlineCode, MarkdownLi, MarkdownOl, MarkdownP, MarkdownPre, MarkdownStrong, MarkdownTable, MarkdownTd, MarkdownTh, MarkdownUl, markdownComponents };
+export { MarkdownA, MarkdownBlockquote, MarkdownCode, MarkdownEm, MarkdownH1, MarkdownH2, MarkdownH3, MarkdownH4, MarkdownH5, MarkdownH6, MarkdownHr, MarkdownInlineCode, MarkdownLi, MarkdownOl, MarkdownP, MarkdownPre, MarkdownStrong, MarkdownTable, MarkdownTd, MarkdownTh, MarkdownUl, markdownComponents };

package/dist/ui/menubar.js

@@ -43,7 +43,6 @@ function MenubarContent({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 		"data-skin": skin.id,
 		"data-effects": controlEffectsAttribute(skin.effects),
-		side: "bottom",
 		align: "start",
 		sideOffset: 6,
 		className: "z-(--z-popup)",
@@ -111,6 +110,7 @@ function MenubarShortcut({ className, ...props }) {
 		"data-slot": "shortcut",
 		"data-control-family": "popup",
 		"data-popup-part": "shortcut",
+		"aria-hidden": "true",
 		className: cn(className),
 		...props
 	});
@@ -133,6 +133,7 @@ function MenubarSubTrigger({ className, inset = false, children, ...props }) {
 			"data-popup-kind": "menubar",
 			"data-control-family": "popup",
 			"data-slot": "sub-trigger-indicator",
+			"data-icon-dir": "inline",
 			"aria-hidden": "true",
 			children: "›"
 		})]
@@ -143,7 +144,6 @@ function MenubarSubContent({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 		"data-skin": skin.id,
 		"data-effects": controlEffectsAttribute(skin.effects),
-		side: "right",
 		align: "start",
 		sideOffset: -4,
 		alignOffset: -5,

package/dist/ui/morphing-panel.js

@@ -13,6 +13,7 @@ function MorphingPanelTriggerElement({ triggerProps, open, render, className, ch
 		props: {
 			...triggerProps,
 			"data-control-ui": "morphing-panel",
+			"data-control-family": "morphing-panel",
 			"data-slot": "trigger",
 			"data-state": panelState,
 			className: cn(triggerProps.className, className),
@@ -55,7 +56,7 @@ function MorphingPanel({ collapsedSize, expandedSize, className, style, ...props
 }
 function MorphingPanelTrigger({ render, className, children, ...props }) {
 	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
-		className: "group/morphing-panel-trigger absolute top-0 right-0 z-10 flex cursor-pointer items-center justify-between data-[state=open]:top-2 data-[state=open]:right-2 data-[state=open]:justify-center [&>svg]:shrink-0",
+		className: "group/morphing-panel-trigger absolute top-0 end-0 z-10 flex cursor-pointer items-center justify-between data-[state=open]:top-2 data-[state=open]:end-2 data-[state=open]:justify-center [&>svg]:shrink-0",
 		...props,
 		render: (triggerProps, state) => /* @__PURE__ */ jsx(MorphingPanelTriggerElement, {
 			triggerProps,

package/dist/ui/native-select.d.ts

@@ -7,5 +7,5 @@ export type NativeSelectProps = Omit<Omit<ComponentProps<"select">, "size">, "st
 } & {
   size?: ControlSize;
 };
-export declare function NativeSelect({ size, className, children, ...props }: NativeSelectProps): import("react").JSX.Element;
+export declare function NativeSelect({ ref, id, name, value, defaultValue, disabled, autoFocus, size, className, children, ...props }: NativeSelectProps): import("react").JSX.Element;
 //#endregion