@ctrl-ui/react 0.9.5 → 0.9.8

package/dist/tool-approval.js

@@ -0,0 +1,260 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { Button } from "./ui/button.js";
+import { LiveStatus } from "./ui/live-status.js";
+import { Badge } from "./ui/badge.js";
+import { Kbd } from "./ui/kbd.js";
+import { createContext, useContext, useEffect, useId, useRef } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ShieldAlert, X } from "lucide-react";
+//#region src/tool-approval.tsx
+const ToolApprovalContext = createContext(null);
+function useToolApprovalContext() {
+	const context = useContext(ToolApprovalContext);
+	if (!context) throw new Error("ToolApproval compound components must be rendered inside <ToolApproval>.");
+	return context;
+}
+const decisionAnnouncements = {
+	pending: "",
+	approved: "Action approved",
+	denied: "Action denied"
+};
+function ToolApproval({ state = "pending", risk = "medium", onApprove, onDeny, autoFocus = false, className, children, onKeyDown, ...props }) {
+	const titleId = useId();
+	const rootRef = useRef(null);
+	const isPending = state === "pending";
+	const approve = () => {
+		if (isPending) onApprove?.();
+	};
+	const deny = () => {
+		if (isPending) onDeny?.();
+	};
+	useEffect(() => {
+		if (autoFocus) rootRef.current?.focus();
+	}, [autoFocus]);
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || !isPending || event.nativeEvent.isComposing) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			deny();
+			return;
+		}
+		if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+			event.preventDefault();
+			approve();
+		}
+	}
+	return /* @__PURE__ */ jsx(ToolApprovalContext.Provider, {
+		value: {
+			state,
+			risk,
+			titleId,
+			approve,
+			deny
+		},
+		children: /* @__PURE__ */ jsxs("section", {
+			ref: rootRef,
+			"data-control-ui": "tool-approval",
+			"data-control-family": "tool-approval",
+			"data-slot": "root",
+			"data-state": state,
+			"data-risk": risk,
+			"aria-labelledby": titleId,
+			tabIndex: -1,
+			onKeyDown: handleKeyDown,
+			className: cn("relative w-full min-w-0", className),
+			...props,
+			children: [children, /* @__PURE__ */ jsx(LiveStatus, { message: decisionAnnouncements[state] })]
+		})
+	});
+}
+function ToolApprovalBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "tool-approval",
+		"data-control-family": "tool-approval",
+		"data-slot": "body",
+		className: cn("min-w-0", className),
+		...props
+	});
+}
+function ToolApprovalHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "tool-approval",
+		"data-control-family": "tool-approval",
+		"data-slot": "header",
+		className: cn("flex items-start gap-2", className),
+		...props
+	});
+}
+function ToolApprovalIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "tool-approval",
+		"data-control-family": "tool-approval",
+		"data-slot": "icon",
+		"aria-hidden": "true",
+		className: cn("inline-flex size-5 shrink-0 items-center justify-center [&_svg]:size-4", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ShieldAlert, {})
+	});
+}
+function ToolApprovalTitle({ render, className, ...props }) {
+	const { titleId } = useToolApprovalContext();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			id: titleId,
+			"data-control-ui": "tool-approval",
+			"data-control-family": "tool-approval",
+			"data-slot": "title",
+			className: cn("min-w-0 flex-1 font-medium", className)
+		}
+	});
+}
+const riskColors = {
+	low: "neutral",
+	medium: "yellow",
+	high: "red"
+};
+const riskLabels = {
+	low: "Low risk",
+	medium: "Medium risk",
+	high: "High risk"
+};
+function ToolApprovalRisk({ children, ...props }) {
+	const { state, risk } = useToolApprovalContext();
+	if (state !== "pending") return null;
+	return /* @__PURE__ */ jsx(Badge, {
+		"data-control-ui": "tool-approval",
+		"data-slot": "risk",
+		size: "sm",
+		color: riskColors[risk],
+		...props,
+		children: children ?? riskLabels[risk]
+	});
+}
+const decisionLabels = {
+	approved: "Approved",
+	denied: "Denied"
+};
+function ToolApprovalStatus({ className, children, ...props }) {
+	const { state } = useToolApprovalContext();
+	if (state === "pending") return null;
+	const StatusIcon = state === "approved" ? Check : X;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "tool-approval",
+		"data-control-family": "tool-approval",
+		"data-slot": "status",
+		className: cn("shrink-0", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-control-ui": "tool-approval",
+			"data-control-family": "tool-approval",
+			"data-slot": "status-icon",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(StatusIcon, { className: "size-3.5" })
+		}), children ?? decisionLabels[state]]
+	});
+}
+function ToolApprovalDescription({ className, ...props }) {
+	const { state } = useToolApprovalContext();
+	if (state !== "pending") return null;
+	return /* @__PURE__ */ jsx("p", {
+		"data-control-ui": "tool-approval",
+		"data-control-family": "tool-approval",
+		"data-slot": "description",
+		className,
+		...props
+	});
+}
+function ToolApprovalPreview({ className, ...props }) {
+	const { state } = useToolApprovalContext();
+	if (state !== "pending") return null;
+	return /* @__PURE__ */ jsx("dl", {
+		"data-control-ui": "tool-approval",
+		"data-control-family": "tool-approval",
+		"data-slot": "preview",
+		className: cn("min-w-0", className),
+		...props
+	});
+}
+function ToolApprovalField({ label, children, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "tool-approval",
+		"data-control-family": "tool-approval",
+		"data-slot": "field",
+		className,
+		...props,
+		children: [/* @__PURE__ */ jsx("dt", {
+			"data-control-ui": "tool-approval",
+			"data-control-family": "tool-approval",
+			"data-slot": "field-label",
+			children: label
+		}), /* @__PURE__ */ jsx("dd", {
+			"data-control-ui": "tool-approval",
+			"data-control-family": "tool-approval",
+			"data-slot": "field-value",
+			className: "min-w-0 break-words",
+			children
+		})]
+	});
+}
+function ToolApprovalFooter({ className, ...props }) {
+	const { state } = useToolApprovalContext();
+	if (state !== "pending") return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "tool-approval",
+		"data-control-family": "tool-approval",
+		"data-slot": "footer",
+		className,
+		...props
+	});
+}
+function ToolApprovalDeny({ children, onClick, ...props }) {
+	const { deny } = useToolApprovalContext();
+	function handleClick(event) {
+		onClick?.(event);
+		if (!event.defaultPrevented) deny();
+	}
+	return /* @__PURE__ */ jsx(Button, {
+		"data-control-ui": "tool-approval",
+		"data-slot": "deny",
+		type: "button",
+		variant: "quiet",
+		size: "xs",
+		"aria-keyshortcuts": "Escape",
+		onClick: handleClick,
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: ["Deny", /* @__PURE__ */ jsx(Kbd, {
+			"aria-hidden": "true",
+			children: "Esc"
+		})] })
+	});
+}
+function ToolApprovalApprove({ children, onClick, ...props }) {
+	const { approve } = useToolApprovalContext();
+	function handleClick(event) {
+		onClick?.(event);
+		if (!event.defaultPrevented) approve();
+	}
+	return /* @__PURE__ */ jsx(Button, {
+		"data-control-ui": "tool-approval",
+		"data-slot": "approve",
+		type: "button",
+		variant: "solid",
+		tone: "primary",
+		size: "xs",
+		"aria-keyshortcuts": "Meta+Enter Control+Enter",
+		onClick: handleClick,
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: ["Approve", /* @__PURE__ */ jsx(Kbd, {
+			"aria-hidden": "true",
+			children: "⌘⏎"
+		})] })
+	});
+}
+//#endregion
+export { ToolApproval, ToolApprovalApprove, ToolApprovalBody, ToolApprovalDeny, ToolApprovalDescription, ToolApprovalField, ToolApprovalFooter, ToolApprovalHeader, ToolApprovalIcon, ToolApprovalPreview, ToolApprovalRisk, ToolApprovalStatus, ToolApprovalTitle };

package/dist/ui/alert-dialog.js

@@ -53,7 +53,7 @@ function AlertDialogContent({ className, children, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-part": "surface",
 		"data-surface": "modal",
-		className: cn("fixed left-1/2 top-[12vh] z-(--z-modal) grid w-[calc(100%-2rem)] max-w-md -translate-x-1/2", className),
+		className: cn("fixed left-1/2 top-[12vh] z-(--z-modal) grid w-[calc(100%-2rem)] -translate-x-1/2", className),
 		...props,
 		children
 	})] });

package/dist/ui/badge.js

@@ -27,7 +27,7 @@ function Badge({ variant = "default", size = "md", color, render, className, chi
 			"data-variant": variant,
 			"data-size": size,
 			"data-color": resolvedColor,
-			className: cn("inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap border font-medium [&>svg]:pointer-events-none [&>svg]:size-3", className),
+			className: cn("inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap [&>svg]:pointer-events-none [&>svg]:size-3", className),
 			children
 		}
 	});

package/dist/ui/calendar.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { useSkin } from "../skin-provider.js";
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { CaptionLabel, Day, DayPicker, Month, MonthCaption, MonthGrid, Months, Nav, Weekday } from "react-day-picker";
@@ -12,7 +13,8 @@ const chevronPathByOrientation = {
 	up: "M3 10 8 5.5 13 10",
 	down: "M3 6 8 10.5 13 6"
 };
-function Calendar({ className, showOutsideDays = true, style, ...props }) {
+function Calendar({ className, showOutsideDays, style, ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "calendar",
 		"data-control-family": "calendar",
@@ -20,7 +22,7 @@ function Calendar({ className, showOutsideDays = true, style, ...props }) {
 		className: cn("w-fit", className),
 		style,
 		children: /* @__PURE__ */ jsx(DayPicker, {
-			showOutsideDays,
+			showOutsideDays: showOutsideDays ?? skin.calendarShowOutsideDays ?? true,
 			components: {
 				Chevron: CalendarChevron,
 				Months: CalendarMonths,
@@ -111,12 +113,15 @@ function CalendarWeekday({ className, ...props }) {
 		...props
 	});
 }
-function CalendarDay({ className, ...props }) {
+function CalendarDay({ className, day, ...props }) {
+	const dayOfWeek = day.date.getDay();
 	return /* @__PURE__ */ jsx(Day, {
 		"data-control-ui": "calendar",
 		"data-control-family": "calendar",
 		"data-slot": "day-cell",
-		className: cn("p-0 align-middle", className),
+		"data-weekend": dayOfWeek === 0 || dayOfWeek === 6 ? true : void 0,
+		className: cn("align-middle", className),
+		day,
 		...props
 	});
 }

package/dist/ui/card.d.ts

@@ -3,10 +3,12 @@ import { CardKnobStyle } from "../knob-contracts/card-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/card.d.ts
 export type CardVariant = "default" | "sectioned";
+export type CardSize = "default" | "sm";
 export type CardProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & CardKnobStyle;
 } & {
   variant?: CardVariant;
+  size?: CardSize;
 };
 export type CardHeaderProps = ComponentProps<"div"> & {
   style?: CSSProperties & CardKnobStyle;
@@ -27,7 +29,7 @@ export type CardContentProps = ComponentProps<"div"> & {
 export type CardFooterProps = ComponentProps<"div"> & {
   style?: CSSProperties & CardKnobStyle;
 };
-export declare function Card({ variant, className, ...props }: CardProps): import("react").JSX.Element;
+export declare function Card({ variant, size, className, ...props }: CardProps): import("react").JSX.Element;
 export declare function CardHeader({ className, ...props }: CardHeaderProps): import("react").JSX.Element;
 export declare function CardTitle({ render, ...props }: CardTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function CardDescription({ className, ...props }: CardDescriptionProps): import("react").JSX.Element;

package/dist/ui/card.js

@@ -3,13 +3,14 @@ import { cn } from "../lib/cn.js";
 import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/card.tsx
-function Card({ variant = "default", className, ...props }) {
+function Card({ variant = "default", size = "default", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "card",
 		"data-control-family": "card",
 		"data-slot": "root",
 		"data-surface": "panel",
 		"data-variant": variant,
+		"data-size": size,
 		className: cn("flex flex-col", className),
 		...props
 	});

package/dist/ui/code.js

@@ -3,6 +3,7 @@ import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.js";
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
 import { LiveStatus } from "./live-status.js";
+import { Swap, SwapItem } from "./swap.js";
 import { ScrollArea } from "./scroll-area.js";
 import { highlightToTokens } from "../lib/code-tokens.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
@@ -99,9 +100,18 @@ function CodeCopy({ value, copiedLabel, copiedAriaLabel = "Copied to clipboard",
 		className,
 		...props,
 		onClick: handleCopy,
-		children: status === "copied" ? copied : children ?? /* @__PURE__ */ jsx(CopyIcon, {
-			"aria-hidden": "true",
-			className: "size-3.5"
+		children: /* @__PURE__ */ jsxs(Swap, {
+			value: status === "copied" ? "copied" : "idle",
+			children: [/* @__PURE__ */ jsx(SwapItem, {
+				value: "idle",
+				children: children ?? /* @__PURE__ */ jsx(CopyIcon, {
+					"aria-hidden": "true",
+					className: "size-3.5"
+				})
+			}), /* @__PURE__ */ jsx(SwapItem, {
+				value: "copied",
+				children: copied
+			})]
 		})
 	});
 	if (!isIconOnly) return /* @__PURE__ */ jsxs(Fragment$1, { children: [button, liveStatus] });

package/dist/ui/command.js

@@ -61,6 +61,7 @@ function CommandInput({ className, ...props }) {
 		"data-slot": "input-wrapper",
 		"data-control-family": "popup",
 		"data-control": "true",
+		"data-focus-ring": "none",
 		"data-size": "lg",
 		className: "flex items-center",
 		children: [/* @__PURE__ */ jsxs("svg", {

package/dist/ui/dialog.js

@@ -54,7 +54,7 @@ function DialogContent({ className, children, showCloseButton = true, closeLabel
 		"data-control-family": "popup",
 		"data-popup-part": "surface",
 		"data-surface": "modal",
-		className: cn("fixed left-1/2 top-[12vh] z-(--z-modal) grid w-[calc(100%-2rem)] max-w-lg -translate-x-1/2", className),
+		className: cn("fixed left-1/2 top-[12vh] z-(--z-modal) grid w-[calc(100%-2rem)] -translate-x-1/2", className),
 		...props,
 		children: [
 			skinAdornment(skin, "dialog", "titlebar", {}),

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

@@ -35,7 +35,7 @@ export type DropdownMenuLabelProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
 export declare function DropdownMenu({ children, ...props }: DropdownMenuProps): import("react").JSX.Element;
-export declare function DropdownMenuTrigger({ size, iconOnly, variant, className, children, disabled, ...props }: DropdownMenuTriggerProps): import("react").JSX.Element;
+export declare function DropdownMenuTrigger({ size, iconOnly, variant, className, ...props }: DropdownMenuTriggerProps): import("react").JSX.Element;
 export declare function DropdownMenuContent({ className, children, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, collisionAvoidance, ...props }: DropdownMenuContentProps): import("react").JSX.Element;
 export declare function DropdownMenuItem({ className, ...props }: DropdownMenuItemProps): import("react").JSX.Element;
 export declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): import("react").JSX.Element;

package/dist/ui/dropdown-menu.js

@@ -4,6 +4,7 @@ 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 { isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { Menu } from "@base-ui/react/menu";
@@ -15,21 +16,37 @@ function DropdownMenu({ children, ...props }) {
 		children
 	});
 }
-function DropdownMenuTrigger({ size = "sm", iconOnly = false, variant = "surface", className, children, disabled, ...props }) {
+function explicitAppearance({ size, variant, iconOnly }) {
+	const attributes = {};
+	if (size) attributes["data-size"] = size;
+	if (variant) attributes["data-variant"] = variant;
+	if (iconOnly) attributes["data-icon-only"] = "true";
+	return attributes;
+}
+function DropdownMenuTrigger({ size, iconOnly, variant, className, ...props }) {
+	if (props.render !== void 0 && !(isValidElement(props.render) && typeof props.render.type === "string")) return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-control-ui": "dropdown-menu",
+		"data-slot": "trigger",
+		...explicitAppearance({
+			size,
+			variant,
+			iconOnly
+		}),
+		className,
+		...props
+	});
 	return /* @__PURE__ */ jsx(Menu.Trigger, {
 		"data-control-ui": "dropdown-menu",
 		"data-control-family": "button",
 		"data-slot": "trigger",
 		"data-control": "true",
-		"data-size": size,
+		"data-size": size ?? "sm",
 		"data-icon-only": iconOnly ? "true" : void 0,
-		"data-variant": variant,
+		"data-variant": variant ?? "surface",
 		"data-tone": "neutral",
 		"data-shape": "default",
 		className: cn("relative isolate inline-flex shrink-0 items-center justify-center overflow-visible", className),
-		disabled,
-		...props,
-		children
+		...props
 	});
 }
 function DropdownMenuContent({ className, children, side, sideOffset = 6, align = "start", alignOffset, collisionBoundary, collisionPadding, collisionAvoidance, ...props }) {

package/dist/ui/dropzone.js

@@ -1,12 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "./item.js";
 import { DropzoneErrorCode, formatDropzoneFileSize } from "../lib/dropzone-validation.js";
 import { useDropzone } from "../hooks/use-dropzone.js";
-import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "./item.js";
 import { createContext, useContext, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CircleAlert, CloudUpload, FileIcon, LoaderCircle, Search, XIcon } from "lucide-react";
+import { CircleAlertIcon, CloudUpload, FileIcon, LoaderCircle, Search, XIcon } from "lucide-react";
 //#region src/ui/dropzone.tsx
 const DropzoneContext = createContext(null);
 const DropzoneFocusContext = createContext(null);
@@ -300,7 +300,7 @@ function DropzoneFeedback({ state }) {
 		icon = /* @__PURE__ */ jsx(CloudUpload, { "aria-hidden": "true" });
 		message = "Release to add files.";
 	} else if (state === "reject") {
-		icon = /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": "true" });
+		icon = /* @__PURE__ */ jsx(CircleAlertIcon, { "aria-hidden": "true" });
 		message = "Some files are not accepted.";
 	} else if (state === "unknown") {
 		icon = /* @__PURE__ */ jsx(Search, { "aria-hidden": "true" });
@@ -341,19 +341,18 @@ function DefaultFile({ file }) {
 		]
 	});
 }
+const rejectedItemStyle = {
+	"--cui-item-media-foreground": "var(--destructive-text)",
+	"--cui-item-description-foreground": "var(--destructive-text)"
+};
 function DefaultRejection({ rejection }) {
 	return /* @__PURE__ */ jsxs(Item, {
 		variant: "muted",
-		children: [/* @__PURE__ */ jsx(ItemMedia, {
-			"data-dropzone-invalid": "",
-			children: /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": "true" })
-		}), /* @__PURE__ */ jsxs(ItemContent, { children: [/* @__PURE__ */ jsx(ItemTitle, {
+		style: rejectedItemStyle,
+		children: [/* @__PURE__ */ jsx(ItemMedia, { children: /* @__PURE__ */ jsx(CircleAlertIcon, { "aria-hidden": "true" }) }), /* @__PURE__ */ jsxs(ItemContent, { children: [/* @__PURE__ */ jsx(ItemTitle, {
 			className: "wrap-anywhere",
 			children: rejection.file.name
-		}), rejection.errors.map((error) => /* @__PURE__ */ jsx(ItemDescription, {
-			"data-dropzone-invalid": "",
-			children: error.message
-		}, `${error.code}-${error.message}`))] })]
+		}), rejection.errors.map((error) => /* @__PURE__ */ jsx(ItemDescription, { children: error.message }, `${error.code}-${error.message}`))] })]
 	});
 }
 function getDropzoneStatusMessage(context) {

package/dist/ui/field.d.ts

@@ -31,7 +31,9 @@ export type FieldErrorProps = Omit<ComponentProps<"div">, "style"> & {
   match?: FieldErrorMatch;
   style?: CSSProperties & FieldKnobStyle;
 };
+export type FieldGroupVariant = "default" | "card";
 export type FieldGroupProps = ComponentProps<"div"> & {
+  variant?: FieldGroupVariant;
   style?: CSSProperties & FieldKnobStyle;
 };
 export type FieldSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
@@ -44,7 +46,9 @@ export type FieldItemProps = ComponentProps<"div"> & {
 export type FieldSetProps = Omit<ComponentProps<"fieldset">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
+export type FieldLegendVariant = "default" | "section";
 export type FieldLegendProps = Omit<ComponentProps<"div">, "style"> & {
+  variant?: FieldLegendVariant;
   style?: CSSProperties & FieldKnobStyle;
 };
 export declare function Field({ className, orientation, ...props }: FieldProps): import("react").JSX.Element;
@@ -55,9 +59,9 @@ type RefinedFieldControlProps = FieldControlProps & Pick<ComponentProps<typeof F
 export declare function FieldControl({ className, render, ...props }: RefinedFieldControlProps): import("react").JSX.Element;
 export declare function FieldDescription({ className, ...props }: FieldDescriptionProps): import("react").JSX.Element;
 export declare function FieldError({ className, ...props }: FieldErrorProps): import("react").JSX.Element;
-export declare function FieldGroup({ className, ...props }: FieldGroupProps): import("react").JSX.Element;
+export declare function FieldGroup({ className, variant, ...props }: FieldGroupProps): import("react").JSX.Element;
 export declare function FieldSeparator({ children, className, ...props }: FieldSeparatorProps): import("react").JSX.Element;
 export declare function FieldItem({ className, ...props }: FieldItemProps): import("react").JSX.Element;
 export declare function FieldSet({ className, ...props }: FieldSetProps): import("react").JSX.Element;
-export declare function FieldLegend({ className, ...props }: FieldLegendProps): import("react").JSX.Element;
+export declare function FieldLegend({ className, variant, ...props }: FieldLegendProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/field.js

@@ -103,12 +103,13 @@ function FieldError({ className, ...props }) {
 		})
 	});
 }
-function FieldGroup({ className, ...props }) {
+function FieldGroup({ className, variant = "default", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "field",
 		"data-control-family": "field",
 		"data-field-kind": "field",
 		"data-slot": "group",
+		"data-variant": variant,
 		className: cn("group/field-group @container/field-group flex flex-col", className),
 		...props
 	});
@@ -152,12 +153,13 @@ function FieldSet({ className, ...props }) {
 		...props
 	});
 }
-function FieldLegend({ className, ...props }) {
+function FieldLegend({ className, variant = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Fieldset.Legend, {
 		"data-control-ui": "field",
 		"data-control-family": "field",
 		"data-field-kind": "field",
 		"data-slot": "legend",
+		"data-variant": variant,
 		className,
 		...props
 	});

package/dist/ui/infinite-canvas.d.ts

@@ -1,31 +1,24 @@
+import { Button } from "./button.js";
 import { InfiniteCanvasKnobStyle } from "../knob-contracts/infinite-canvas-knobs.js";
+import { InfiniteCanvasBounds, InfiniteCanvasPoint, InfiniteCanvasTransform } from "../lib/infinite-canvas-camera.js";
+import { InfiniteCanvasCamera, InfiniteCanvasFitOptions, InfiniteCanvasMoveDetails, InfiniteCanvasMoveOptions, InfiniteCanvasMoveReason, InfiniteCanvasRevealOptions, InfiniteCanvasTransformUpdate, InfiniteCanvasZoomOptions } from "../lib/infinite-canvas-camera-store.js";
+import { InfiniteCanvasPanOnDrag } from "../lib/infinite-canvas-navigation.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/infinite-canvas.d.ts
-export type InfiniteCanvasTransform = {
-  x: number;
-  y: number;
-  scale: number;
-};
-export type InfiniteCanvasMoveReason = "pointer" | "wheel" | "keyboard" | "control";
-export type InfiniteCanvasMoveDetails = {
-  reason: InfiniteCanvasMoveReason;
-};
-export type InfiniteCanvasProps = Omit<ComponentProps<"section">, "onChange" | "onWheel" | "ref" | "style"> & {
+export type InfiniteCanvasProps = Omit<ComponentProps<"section">, "onChange" | "onWheel" | "style"> & {
   transform?: InfiniteCanvasTransform;
   defaultTransform?: InfiniteCanvasTransform;
   onTransformChange?: (transform: InfiniteCanvasTransform, details: InfiniteCanvasMoveDetails) => void;
   minScale?: number;
   maxScale?: number;
+  panOnDrag?: InfiniteCanvasPanOnDrag;
+  keyboardNavigation?: boolean;
   onWheel?: (event: WheelEvent) => void;
   style?: CSSProperties & InfiniteCanvasKnobStyle;
 };
-export type InfiniteCanvasContentProps = ComponentProps<"div"> & {
+export type InfiniteCanvasContentProps = Omit<ComponentProps<"div">, "ref" | "style"> & {
   style?: CSSProperties & InfiniteCanvasKnobStyle;
 };
-export type InfiniteCanvasPoint = {
-  x: number;
-  y: number;
-};
 export type InfiniteCanvasItemProps = Omit<ComponentProps<"div">, "style"> & {
   x: number;
   y: number;
@@ -33,19 +26,23 @@ export type InfiniteCanvasItemProps = Omit<ComponentProps<"div">, "style"> & {
   movableItemLabel?: string;
   style?: CSSProperties & InfiniteCanvasKnobStyle;
 };
+export type InfiniteCanvasItemHandleProps = ComponentProps<typeof Button> & {
+  onPositionChange: (position: InfiniteCanvasPoint) => void;
+};
 export type InfiniteCanvasControlsProps = Omit<ComponentProps<"div">, "children" | "style"> & {
   style?: CSSProperties & InfiniteCanvasKnobStyle;
 };
-type InfiniteCanvasContextValue = {
-  transform: InfiniteCanvasTransform;
+export type InfiniteCanvasContextValue = InfiniteCanvasCamera & {
   minScale: number;
   maxScale: number;
-  reset: (reason: InfiniteCanvasMoveReason) => void;
-  zoomBy: (factor: number, reason: InfiniteCanvasMoveReason) => void;
 };
 export declare function useInfiniteCanvas(): InfiniteCanvasContextValue;
-export declare function InfiniteCanvas({ transform: controlledTransform, defaultTransform, onTransformChange, minScale: minScaleProp, maxScale: maxScaleProp, className, children, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, onKeyDown, "aria-label": ariaLabel, "aria-keyshortcuts": ariaKeyShortcuts, ...props }: InfiniteCanvasProps): import("react").JSX.Element;
+export declare function useInfiniteCanvasTransform(): InfiniteCanvasTransform;
+export declare function useInfiniteCanvasTransform<Selected>(select: (transform: InfiniteCanvasTransform) => Selected): Selected;
+export declare function InfiniteCanvas({ transform, defaultTransform, onTransformChange, minScale: minScaleProp, maxScale: maxScaleProp, panOnDrag, keyboardNavigation, ref, className, children, style, onPointerDown, onWheel, onKeyDown, "aria-label": ariaLabel, "aria-keyshortcuts": ariaKeyShortcuts, ...props }: InfiniteCanvasProps): import("react").JSX.Element;
 export declare function InfiniteCanvasContent({ className, style, ...props }: InfiniteCanvasContentProps): import("react").JSX.Element;
-export declare function InfiniteCanvasItem({ x, y, onPositionChange, movableItemLabel, className, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onKeyDown, ...props }: InfiniteCanvasItemProps): import("react").JSX.Element;
+export declare function InfiniteCanvasItem({ x, y, onPositionChange, movableItemLabel, className, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, ...props }: InfiniteCanvasItemProps): import("react").JSX.Element;
+export declare function InfiniteCanvasItemHandle({ onPositionChange, className, children, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, "aria-label": ariaLabel, ...props }: InfiniteCanvasItemHandleProps): import("react").JSX.Element;
 export declare function InfiniteCanvasControls({ className, ...props }: InfiniteCanvasControlsProps): import("react").JSX.Element;
-//#endregion
+//#endregion
+export type { InfiniteCanvasBounds, InfiniteCanvasCamera, InfiniteCanvasFitOptions, InfiniteCanvasMoveDetails, InfiniteCanvasMoveOptions, InfiniteCanvasMoveReason, InfiniteCanvasPanOnDrag, InfiniteCanvasPoint, InfiniteCanvasRevealOptions, InfiniteCanvasTransform, InfiniteCanvasTransformUpdate, InfiniteCanvasZoomOptions };