@ctrl-ui/react 0.8.0

package/dist/ui/context-menu.js

@@ -0,0 +1,202 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinEffects, skinId } from "../skin.js";
+import { popupItemStructureClasses } from "../surface-variants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
+//#region src/ui/context-menu.tsx
+const popupClasses = "min-w-[10rem]";
+const itemClasses = cn("group/cmi relative", popupItemStructureClasses);
+function ContextMenu(props) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Root, { ...props });
+}
+function ContextMenuTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Trigger, {
+		"data-control-ui": "context-menu",
+		"data-control-family": "popup",
+		"data-popup-kind": "context-menu",
+		"data-slot": "trigger",
+		className,
+		...props
+	});
+}
+function ContextMenuPortal(props) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { ...props });
+}
+function ContextMenuGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Group, {
+		"data-control-ui": "context-menu",
+		"data-control-family": "popup",
+		"data-popup-kind": "context-menu",
+		"data-slot": "group",
+		className,
+		...props
+	});
+}
+function ContextMenuContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		className: "z-[80]",
+		children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
+			"data-control-ui": "context-menu",
+			"data-popup-kind": "context-menu",
+			"data-slot": "content",
+			"data-surface": "floating",
+			"data-control-family": "popup",
+			"data-popup-part": "list-surface",
+			className: cn(popupClasses, className),
+			...props,
+			children
+		})
+	}) });
+}
+function ContextMenuItem({ className, inset = false, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Item, {
+		"data-control-ui": "context-menu",
+		"data-popup-kind": "context-menu",
+		"data-slot": "item",
+		"data-control-family": "popup",
+		"data-popup-part": "item",
+		"data-inset": inset || void 0,
+		className: cn(itemClasses, className),
+		...props
+	});
+}
+function ContextMenuCheckboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
+		"data-control-ui": "context-menu",
+		"data-popup-kind": "context-menu",
+		"data-slot": "checkbox-item",
+		"data-control-family": "popup",
+		"data-popup-part": "item",
+		className: cn(itemClasses, className),
+		...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", {
+				viewBox: "0 0 12 12",
+				className: "size-3",
+				"aria-hidden": "true",
+				fill: "none",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M2.5 6.5 5 9l4.5-5",
+					stroke: "currentColor",
+					strokeWidth: "1.6",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			}) })
+		}), children]
+	});
+}
+function ContextMenuRadioGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.RadioGroup, {
+		"data-control-ui": "context-menu",
+		"data-control-family": "popup",
+		"data-popup-kind": "context-menu",
+		"data-slot": "radio-group",
+		className,
+		...props
+	});
+}
+function ContextMenuRadioItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
+		"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,
+		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", {
+				"data-control-ui": "context-menu",
+				"data-control-family": "popup",
+				"data-popup-kind": "context-menu",
+				"data-slot": "radio-indicator",
+				className: "block size-1.5"
+			}) })
+		}), children]
+	});
+}
+function ContextMenuLabel({ className, inset = false, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.GroupLabel, {
+		"data-control-ui": "context-menu",
+		"data-popup-kind": "context-menu",
+		"data-slot": "label",
+		"data-control-family": "popup",
+		"data-popup-part": "label",
+		"data-inset": inset || void 0,
+		className: cn(className),
+		...props
+	});
+}
+function ContextMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
+		"data-control-ui": "context-menu",
+		"data-popup-kind": "context-menu",
+		"data-slot": "separator",
+		"data-control-family": "popup",
+		"data-popup-part": "separator",
+		className: cn(className),
+		...props
+	});
+}
+function ContextMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "context-menu",
+		"data-popup-kind": "context-menu",
+		"data-slot": "shortcut",
+		"data-control-family": "popup",
+		"data-popup-part": "shortcut",
+		className: cn(className),
+		...props
+	});
+}
+function ContextMenuSub(props) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.SubmenuRoot, { ...props });
+}
+function ContextMenuSubTrigger({ className, inset = false, children, ...props }) {
+	return /* @__PURE__ */ jsxs(ContextMenu$1.SubmenuTrigger, {
+		"data-control-ui": "context-menu",
+		"data-popup-kind": "context-menu",
+		"data-slot": "sub-trigger",
+		"data-control-family": "popup",
+		"data-popup-part": "item",
+		"data-inset": inset || void 0,
+		className: cn(itemClasses, className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "context-menu",
+			"data-popup-kind": "context-menu",
+			"data-control-family": "popup",
+			"data-slot": "sub-trigger-indicator",
+			"aria-hidden": "true",
+			children: "›"
+		})]
+	});
+}
+function ContextMenuSubContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		className: "z-[80]",
+		sideOffset: -4,
+		alignOffset: -5,
+		children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
+			"data-control-ui": "context-menu",
+			"data-popup-kind": "context-menu",
+			"data-slot": "sub-content",
+			"data-surface": "floating",
+			"data-control-family": "popup",
+			"data-popup-part": "list-surface",
+			className: cn(popupClasses, className),
+			...props,
+			children
+		})
+	}) });
+}
+//#endregion
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };

package/dist/ui/dialog.d.ts

@@ -0,0 +1,38 @@
+import { OpenChangeEventDetails } from "../control-props.js";
+import { ButtonProps } from "./button.js";
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+//#region src/ui/dialog.d.ts
+type DialogProps = {
+  children?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
+};
+type DialogContentProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+} & {
+  showCloseButton?: boolean;
+};
+declare function Dialog(props: DialogProps): import("react").JSX.Element;
+declare function DialogTrigger({ className, ...props }: ComponentProps<typeof Dialog$1.Trigger> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+type DialogCloseProps = Omit<ComponentProps<typeof Dialog$1.Close>, "render"> & Pick<ButtonProps, "variant" | "size" | "tone" | "iconOnly">;
+declare function DialogClose({ className, children, variant, size, tone, iconOnly, ...props }: DialogCloseProps): import("react").JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: DialogContentProps): import("react").JSX.Element;
+declare function DialogHeader({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function DialogFooter({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function DialogTitle({ className, ...props }: ComponentProps<"h2"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function DialogDescription({ className, ...props }: ComponentProps<"p"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+//#endregion
+export { Dialog, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProps, DialogTitle, DialogTrigger };

package/dist/ui/dialog.js

@@ -0,0 +1,124 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinAdornment, skinEffects, skinId } from "../skin.js";
+import { Button } from "./button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+//#region src/ui/dialog.tsx
+function Dialog(props) {
+	return /* @__PURE__ */ jsx(Dialog$1.Root, { ...props });
+}
+function DialogTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
+		"data-control-ui": "dialog",
+		"data-popup-kind": "dialog",
+		"data-slot": "trigger",
+		className,
+		...props
+	});
+}
+function DialogClose({ className, children, variant = "surface", size = "sm", tone = "neutral", iconOnly, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Close, {
+		...props,
+		render: (renderProps) => /* @__PURE__ */ jsx(Button, {
+			...renderProps,
+			"data-popup-part": "close",
+			variant,
+			size,
+			tone,
+			iconOnly,
+			className: cn(renderProps.className, className),
+			children
+		})
+	});
+}
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
+	return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, {
+		"data-control-ui": "dialog",
+		"data-popup-kind": "dialog",
+		"data-slot": "backdrop",
+		"data-control-family": "popup",
+		"data-popup-part": "backdrop",
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		className: "fixed inset-0 z-[70]"
+	}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		"data-control-ui": "dialog",
+		"data-popup-kind": "dialog",
+		"data-slot": "content",
+		"data-control-family": "popup",
+		"data-popup-part": "surface",
+		"data-surface": "modal",
+		className: cn("fixed left-1/2 top-[12vh] z-[71] grid w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 p-0", className),
+		...props,
+		children: [
+			skinAdornment("dialog", "titlebar", {}),
+			children,
+			showCloseButton ? /* @__PURE__ */ jsxs(DialogClose, {
+				variant: "ghost",
+				size: "xs",
+				iconOnly: true,
+				className: "absolute right-3 top-3",
+				children: [/* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 16 16",
+					className: "size-4",
+					"aria-hidden": "true",
+					fill: "none",
+					children: /* @__PURE__ */ jsx("path", {
+						d: "M4 4 12 12M12 4 4 12",
+						stroke: "currentColor",
+						strokeWidth: "1.4",
+						strokeLinecap: "round"
+					})
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
+			}) : null
+		]
+	})] });
+}
+function DialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "dialog",
+		"data-control-family": "popup",
+		"data-popup-kind": "dialog",
+		"data-slot": "header",
+		className: cn("grid", className),
+		...props
+	});
+}
+function DialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "dialog",
+		"data-control-family": "popup",
+		"data-popup-kind": "dialog",
+		"data-slot": "footer",
+		className: cn("flex flex-col-reverse sm:flex-row sm:justify-end", className),
+		...props
+	});
+}
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Title, {
+		"data-control-ui": "dialog",
+		"data-control-family": "popup",
+		"data-popup-kind": "dialog",
+		"data-slot": "title",
+		className,
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Description, {
+		"data-control-ui": "dialog",
+		"data-control-family": "popup",
+		"data-popup-kind": "dialog",
+		"data-slot": "description",
+		className,
+		...props
+	});
+}
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };

package/dist/ui/dockable-panel-geometry.d.ts

@@ -0,0 +1,18 @@
+//#region src/ui/dockable-panel-geometry.d.ts
+type DockablePanelBounds = {
+  width: number;
+  height: number;
+};
+type DockablePanelSize = {
+  width: number;
+  height: number;
+};
+type DockablePanelPosition = {
+  x: number;
+  y: number;
+};
+declare function clampDockablePanelPosition(position: DockablePanelPosition, bounds: DockablePanelBounds, panel: DockablePanelSize, inset?: number): DockablePanelPosition;
+declare function dockablePanelSideAt(pointerX: number, width: number): "left" | "right";
+declare function oppositeDockablePanelSide(placement: "left" | "right"): "left" | "right";
+//#endregion
+export { DockablePanelBounds, DockablePanelPosition, DockablePanelSize, clampDockablePanelPosition, dockablePanelSideAt, oppositeDockablePanelSide };

package/dist/ui/dockable-panel-geometry.js

@@ -0,0 +1,17 @@
+//#region src/ui/dockable-panel-geometry.ts
+function clampDockablePanelPosition(position, bounds, panel, inset = 12) {
+	const maxX = Math.max(inset, bounds.width - panel.width - inset);
+	const maxY = Math.max(inset, bounds.height - panel.height - inset);
+	return {
+		x: Math.min(Math.max(position.x, inset), maxX),
+		y: Math.min(Math.max(position.y, inset), maxY)
+	};
+}
+function dockablePanelSideAt(pointerX, width) {
+	return pointerX < width / 2 ? "left" : "right";
+}
+function oppositeDockablePanelSide(placement) {
+	return placement === "left" ? "right" : "left";
+}
+//#endregion
+export { clampDockablePanelPosition, dockablePanelSideAt, oppositeDockablePanelSide };

package/dist/ui/dockable-panel.d.ts

@@ -0,0 +1,58 @@
+import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
+import { DockablePanelKnobStyle } from "../knob-contracts/dockable-panel-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/ui/dockable-panel.d.ts
+type DockablePanelPlacement = "left" | "right";
+type DockablePanelProps = Omit<ComponentProps<"aside">, "onChange" | "ref" | "style"> & {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  placement?: DockablePanelPlacement;
+  defaultPlacement?: DockablePanelPlacement;
+  onPlacementChange?: (placement: DockablePanelPlacement) => void;
+  style?: CSSProperties & DockablePanelKnobStyle;
+};
+type DockablePanelHeaderProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & DockablePanelKnobStyle;
+};
+type DockablePanelDragHandleProps = Omit<ComponentProps<"button">, "style"> & {
+  style?: CSSProperties & DockablePanelKnobStyle;
+};
+type DockablePanelTitleProps = Omit<ComponentProps<"h2">, "style"> & {
+  style?: CSSProperties & DockablePanelKnobStyle;
+};
+type DockablePanelActionsProps = ComponentProps<"div"> & {
+  style?: CSSProperties & DockablePanelKnobStyle;
+};
+type DockablePanelToggleProps = Omit<Omit<ComponentProps<"button">, "children"> & {
+  children?: ReactNode;
+}, "style"> & {
+  style?: CSSProperties & ButtonKnobStyle;
+};
+type DockablePanelDockProps = Omit<Omit<ComponentProps<"button">, "children"> & {
+  placement: DockablePanelPlacement;
+  children?: ReactNode;
+}, "style"> & {
+  style?: CSSProperties & ButtonKnobStyle;
+};
+type DockablePanelCloseProps = Omit<Omit<ComponentProps<"button">, "children"> & {
+  children?: ReactNode;
+}, "style"> & {
+  style?: CSSProperties & ButtonKnobStyle;
+};
+type DockablePanelContentPadding = "default" | "none";
+type DockablePanelContentProps = ComponentProps<"div"> & {
+  padding?: DockablePanelContentPadding;
+  style?: CSSProperties & DockablePanelKnobStyle;
+};
+declare function DockablePanel({ open: openProp, defaultOpen, onOpenChange, placement: placementProp, defaultPlacement, onPlacementChange, className, style, children, "aria-label": ariaLabel, ...props }: DockablePanelProps): import("react").JSX.Element | null;
+declare function DockablePanelHeader({ className, ...props }: DockablePanelHeaderProps): import("react").JSX.Element;
+declare function DockablePanelDragHandle({ className, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, children, ...props }: DockablePanelDragHandleProps): import("react").JSX.Element;
+declare function DockablePanelTitle({ className, ...props }: DockablePanelTitleProps): import("react").JSX.Element;
+declare function DockablePanelActions({ className, ...props }: DockablePanelActionsProps): import("react").JSX.Element;
+declare function DockablePanelToggle({ className, children, "aria-label": ariaLabel, onClick, ...props }: DockablePanelToggleProps): import("react").JSX.Element | null;
+declare function DockablePanelDock({ placement: nextPlacement, className, children, "aria-label": ariaLabel, onClick, ...props }: DockablePanelDockProps): import("react").JSX.Element | null;
+declare function DockablePanelClose({ className, children, "aria-label": ariaLabel, onClick, ...props }: DockablePanelCloseProps): import("react").JSX.Element;
+declare function DockablePanelContent({ padding, className, ...props }: DockablePanelContentProps): import("react").JSX.Element;
+//#endregion
+export { DockablePanel, DockablePanelActions, DockablePanelActionsProps, DockablePanelClose, DockablePanelCloseProps, DockablePanelContent, DockablePanelContentPadding, DockablePanelContentProps, DockablePanelDock, DockablePanelDockProps, DockablePanelDragHandle, DockablePanelDragHandleProps, DockablePanelHeader, DockablePanelHeaderProps, DockablePanelPlacement, DockablePanelProps, DockablePanelTitle, DockablePanelTitleProps, DockablePanelToggle, DockablePanelToggleProps };