@ctrl-ui/react 0.8.0

package/dist/ui/field.js

@@ -0,0 +1,166 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Separator } from "./separator.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Field as Field$1 } from "@base-ui/react/field";
+import { Fieldset } from "@base-ui/react/fieldset";
+//#region src/ui/field.tsx
+const fieldVariants = cva("group/field flex w-full", {
+	variants: { orientation: {
+		vertical: "flex-col items-start [&>[data-control-ui=field][data-slot=content]]:w-full [&>[data-control-ui=field][data-slot=control]]:w-full",
+		horizontal: "flex-row items-center [&>[data-control-ui=field][data-slot=label]]:flex-auto has-[>[data-control-ui=field][data-slot=content]]:items-start",
+		responsive: "flex-col items-start [&>[data-control-ui=field][data-slot=content]]:w-full [&>[data-control-ui=field][data-slot=control]]:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>[data-control-ui=field][data-slot=content]]:w-auto @md/field-group:[&>[data-control-ui=field][data-slot=control]]:w-auto @md/field-group:[&>[data-control-ui=field][data-slot=label]]:flex-auto @md/field-group:has-[>[data-control-ui=field][data-slot=content]]:items-start"
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+function Field({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx(Field$1.Root, {
+		"data-control-ui": "field",
+		"data-control-family": "field",
+		"data-field-kind": "field",
+		"data-slot": "root",
+		"data-orientation": orientation,
+		className: cn(fieldVariants({ orientation }), className),
+		...props
+	});
+}
+function FieldContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "field",
+		"data-control-family": "field",
+		"data-field-kind": "field",
+		"data-slot": "content",
+		className: cn("flex min-w-0 flex-1 flex-col", className),
+		...props
+	});
+}
+function FieldTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "field",
+		"data-control-family": "field",
+		"data-field-kind": "field",
+		"data-slot": "title",
+		className,
+		...props
+	});
+}
+function FieldLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field$1.Label, {
+		"data-control-ui": "field",
+		"data-control-family": "field",
+		"data-field-kind": "field",
+		"data-slot": "label",
+		className,
+		...props
+	});
+}
+function FieldControl({ className, render, ...props }) {
+	const classes = cn("w-full", className);
+	if (render !== void 0) return /* @__PURE__ */ jsx(Field$1.Control, {
+		"data-control-ui": "field",
+		"data-control-family": "field",
+		"data-field-kind": "field",
+		"data-slot": "control",
+		className: classes,
+		render,
+		...props
+	});
+	return /* @__PURE__ */ jsx(Field$1.Control, {
+		"data-control-ui": "field",
+		"data-control-family": "field",
+		"data-field-kind": "field",
+		"data-slot": "control",
+		"data-control": "true",
+		className: classes,
+		...props
+	});
+}
+function FieldDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field$1.Description, {
+		"data-control-ui": "field",
+		"data-control-family": "field",
+		"data-field-kind": "field",
+		"data-slot": "description",
+		className,
+		...props
+	});
+}
+function FieldError({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "field",
+		"data-control-family": "field",
+		"data-field-kind": "field",
+		"data-slot": "error-reserve",
+		className: "min-h-[1lh] text-caption",
+		children: /* @__PURE__ */ jsx(Field$1.Error, {
+			"data-control-ui": "field",
+			"data-control-family": "field",
+			"data-field-kind": "field",
+			"data-slot": "error",
+			className,
+			...props
+		})
+	});
+}
+function FieldGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "field",
+		"data-control-family": "field",
+		"data-field-kind": "field",
+		"data-slot": "group",
+		className: cn("group/field-group @container/field-group flex flex-col", className),
+		...props
+	});
+}
+function FieldSeparator({ children, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "field",
+		"data-control-family": "field",
+		"data-field-kind": "field",
+		"data-slot": "separator",
+		"data-content": children ? "true" : void 0,
+		className: cn("relative", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Separator, { className: children ? "absolute top-1/2" : void 0 }), children ? /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "field",
+			"data-control-family": "field",
+			"data-field-kind": "field",
+			"data-slot": "separator-content",
+			className: "relative block w-fit",
+			children
+		}) : null]
+	});
+}
+function FieldItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field$1.Item, {
+		"data-control-ui": "field",
+		"data-control-family": "field",
+		"data-field-kind": "field",
+		"data-slot": "item",
+		className: cn("flex items-center", className),
+		...props
+	});
+}
+function FieldSet({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Fieldset.Root, {
+		"data-control-ui": "field",
+		"data-control-family": "field",
+		"data-field-kind": "field",
+		"data-slot": "set",
+		className: cn("m-0 flex min-w-0 flex-col p-0", className),
+		...props
+	});
+}
+function FieldLegend({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Fieldset.Legend, {
+		"data-control-ui": "field",
+		"data-control-family": "field",
+		"data-field-kind": "field",
+		"data-slot": "legend",
+		className,
+		...props
+	});
+}
+//#endregion
+export { Field, FieldContent, FieldControl, FieldDescription, FieldError, FieldGroup, FieldItem, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

package/dist/ui/form.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from "react";
+//#region src/ui/form.d.ts
+type FormErrors = Record<string, string | string[]>;
+type FormProps = ComponentProps<"form"> & {
+  errors?: FormErrors;
+  validationMode?: "onSubmit" | "onBlur" | "onChange";
+};
+declare function Form({ className, ...props }: FormProps): import("react").JSX.Element;
+//#endregion
+export { Form, FormErrors, FormProps };

package/dist/ui/form.js

@@ -0,0 +1,17 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Form as Form$1 } from "@base-ui/react/form";
+//#region src/ui/form.tsx
+function Form({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Form$1, {
+		"data-control-ui": "form",
+		"data-control-family": "field",
+		"data-field-kind": "form",
+		"data-slot": "root",
+		className: cn("flex w-full flex-col", className),
+		...props
+	});
+}
+//#endregion
+export { Form };

package/dist/ui/gradient-editor.d.ts

@@ -0,0 +1,47 @@
+import { ControlSize } from "../control-variants.js";
+import { GradientEditorKnobStyle } from "../knob-contracts/gradient-editor-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/gradient-editor.d.ts
+type GradientType = "linear" | "radial" | "conic";
+type GradientStop = {
+  id: string;
+  position: number;
+  color: string;
+};
+type GradientEditorProps = Omit<ComponentProps<"div">, "onChange" | "defaultValue"> & {
+  value?: string;
+  defaultStops?: GradientStop[];
+  defaultType?: GradientType;
+  defaultAngle?: number;
+  onValueChange?: (value: string) => void;
+} & {
+  style?: CSSProperties & GradientEditorKnobStyle;
+};
+type GradientEditorPreviewProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & GradientEditorKnobStyle;
+};
+type GradientEditorTrackProps = Omit<ComponentProps<"fieldset">, "style"> & {
+  style?: CSSProperties & GradientEditorKnobStyle;
+};
+type GradientEditorStopProps = Omit<ComponentProps<"button">, "style"> & {
+  stop: GradientStop;
+  style?: CSSProperties & GradientEditorKnobStyle;
+};
+type GradientEditorStopAddProps = Omit<ComponentProps<"button">, "onClick" | "style"> & {
+  style?: CSSProperties & GradientEditorKnobStyle;
+};
+type GradientEditorTypeSelectProps = {
+  size?: ControlSize;
+  className?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+};
+declare function GradientEditor({ defaultStops, defaultType, defaultAngle, onValueChange, className, children, value: _value, ...props }: GradientEditorProps): import("react").JSX.Element;
+declare function GradientEditorPreview({ className, style, "aria-label": ariaLabel, ...props }: GradientEditorPreviewProps): import("react").JSX.Element;
+declare function GradientEditorTrack({ className, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: GradientEditorTrackProps): import("react").JSX.Element;
+declare function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown, onFocus, onDoubleClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: GradientEditorStopProps): import("react").JSX.Element;
+declare function GradientEditorStopAdd({ className, children, ...props }: GradientEditorStopAddProps): import("react").JSX.Element;
+declare function GradientEditorStopColor(): import("react").JSX.Element | null;
+declare function GradientEditorTypeSelect({ size, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }: GradientEditorTypeSelectProps): import("react").JSX.Element;
+//#endregion
+export { GradientEditor, GradientEditorPreview, GradientEditorPreviewProps, GradientEditorProps, GradientEditorStop, GradientEditorStopAdd, GradientEditorStopAddProps, GradientEditorStopColor, GradientEditorStopProps, GradientEditorTrack, GradientEditorTrackProps, GradientEditorTypeSelect, GradientEditorTypeSelectProps, GradientStop, GradientType };

package/dist/ui/gradient-editor.js

@@ -0,0 +1,301 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { formatGradient } from "../lib/color.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+import { ColorPicker, ColorPickerAlpha, ColorPickerArea, ColorPickerContent, ColorPickerFormatSelect, ColorPickerHue, ColorPickerInput, ColorPickerTrigger } from "./color-picker.js";
+import { createContext, useContext, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/gradient-editor.tsx
+const DEFAULT_STOPS = [{
+	id: "stop-1",
+	position: 0,
+	color: "#7c3aed"
+}, {
+	id: "stop-2",
+	position: 1,
+	color: "#3b82f6"
+}];
+const isGradientType = (v) => v === "linear" || v === "radial" || v === "conic";
+const clamp01 = (n) => Math.min(1, Math.max(0, n));
+const GradientEditorContext = createContext(null);
+function useGradientEditor() {
+	const ctx = useContext(GradientEditorContext);
+	if (!ctx) throw new Error("GradientEditor parts must be rendered inside <GradientEditor>.");
+	return ctx;
+}
+function GradientEditor({ defaultStops = DEFAULT_STOPS, defaultType = "linear", defaultAngle = 90, onValueChange, className, children, value: _value, ...props }) {
+	const [stops, setStops] = useState(defaultStops);
+	const [type, setTypeState] = useState(defaultType);
+	const [angle] = useState(defaultAngle);
+	const [selectedId, setSelectedId] = useState(defaultStops[0]?.id ?? "stop-1");
+	const idCounter = useRef(defaultStops.length);
+	const trackRef = useRef(null);
+	const gradient = formatGradient(stops, type, angle);
+	function updateStops(nextStops) {
+		setStops(nextStops);
+		onValueChange?.(formatGradient(nextStops, type, angle));
+	}
+	const setStopColor = (id, color) => updateStops(stops.map((stop) => stop.id === id ? {
+		...stop,
+		color
+	} : stop));
+	const setStopPosition = (id, position) => updateStops(stops.map((stop) => stop.id === id ? {
+		...stop,
+		position: clamp01(position)
+	} : stop));
+	const addStop = (position) => {
+		idCounter.current += 1;
+		const id = `stop-${idCounter.current}`;
+		const near = [...stops].sort((a, b) => Math.abs(a.position - position) - Math.abs(b.position - position))[0];
+		updateStops([...stops, {
+			id,
+			position: clamp01(position),
+			color: near?.color ?? "#ffffff"
+		}]);
+		setSelectedId(id);
+	};
+	const removeStop = (id) => {
+		if (stops.length <= 2) return;
+		const nextStops = stops.filter((stop) => stop.id !== id);
+		updateStops(nextStops);
+		if (selectedId === id) setSelectedId(nextStops[0]?.id ?? selectedId);
+	};
+	const setType = (nextType) => {
+		setTypeState(nextType);
+		onValueChange?.(formatGradient(stops, nextType, angle));
+	};
+	const ctx = {
+		stops,
+		type,
+		angle,
+		selectedId,
+		gradient,
+		trackRef,
+		select: setSelectedId,
+		setStopColor,
+		setStopPosition,
+		addStop,
+		removeStop,
+		setType
+	};
+	return /* @__PURE__ */ jsx(GradientEditorContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "gradient-editor",
+			"data-control-family": "gradient-editor",
+			"data-slot": "root",
+			className: cn("grid", className),
+			...props,
+			children
+		})
+	});
+}
+function GradientEditorPreview({ className, style, "aria-label": ariaLabel = "Gradient preview", ...props }) {
+	const { gradient } = useGradientEditor();
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "gradient-editor",
+		"data-control-family": "gradient-editor",
+		"data-slot": "preview",
+		role: "img",
+		"aria-label": ariaLabel,
+		className: cn("w-full", className),
+		style: {
+			...style,
+			backgroundImage: gradient
+		},
+		...props
+	});
+}
+function GradientEditorTrack({ className, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+	const { stops, trackRef, addStop } = useGradientEditor();
+	const stripe = formatGradient(stops, "linear", 90);
+	return /* @__PURE__ */ jsx("fieldset", {
+		ref: trackRef,
+		"data-control-ui": "gradient-editor",
+		"data-control-family": "gradient-editor",
+		"data-slot": "track",
+		"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? "Gradient stops" : ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		className: cn("relative m-0 min-w-0 w-full cursor-copy p-0", className),
+		style: {
+			...style,
+			backgroundImage: stripe
+		},
+		onPointerDown: (event) => {
+			if (event.target !== event.currentTarget) return;
+			const rect = event.currentTarget.getBoundingClientRect();
+			addStop((event.clientX - rect.left) / rect.width);
+		},
+		...props,
+		children: children ?? stops.map((stop) => /* @__PURE__ */ jsx(GradientEditorStop, { stop }, stop.id))
+	});
+}
+function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown, onFocus, onDoubleClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+	const { stops, selectedId, select, setStopPosition, removeStop, trackRef } = useGradientEditor();
+	const selected = stop.id === selectedId;
+	const canRemove = stops.length > 2;
+	function handlePointerDown(event) {
+		onPointerDown?.(event);
+		if (event.defaultPrevented) return;
+		select(stop.id);
+		event.currentTarget.focus();
+		event.preventDefault();
+		const track = trackRef.current;
+		if (!track) return;
+		const move = (moveEvent) => {
+			const rect = track.getBoundingClientRect();
+			setStopPosition(stop.id, (moveEvent.clientX - rect.left) / rect.width);
+		};
+		const up = () => {
+			window.removeEventListener("pointermove", move);
+			window.removeEventListener("pointerup", up);
+			document.body.style.userSelect = "";
+		};
+		document.body.style.userSelect = "none";
+		window.addEventListener("pointermove", move);
+		window.addEventListener("pointerup", up);
+	}
+	function handleFocus(event) {
+		onFocus?.(event);
+		if (!event.defaultPrevented) select(stop.id);
+	}
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		const step = event.shiftKey ? .1 : .01;
+		switch (event.key) {
+			case "ArrowLeft":
+			case "ArrowDown":
+				event.preventDefault();
+				setStopPosition(stop.id, stop.position - step);
+				break;
+			case "ArrowRight":
+			case "ArrowUp":
+				event.preventDefault();
+				setStopPosition(stop.id, stop.position + step);
+				break;
+			case "PageDown":
+				event.preventDefault();
+				setStopPosition(stop.id, stop.position - .1);
+				break;
+			case "PageUp":
+				event.preventDefault();
+				setStopPosition(stop.id, stop.position + .1);
+				break;
+			case "Home":
+				event.preventDefault();
+				setStopPosition(stop.id, 0);
+				break;
+			case "End":
+				event.preventDefault();
+				setStopPosition(stop.id, 1);
+				break;
+			case "Backspace":
+			case "Delete":
+				if (!canRemove) return;
+				event.preventDefault();
+				removeStop(stop.id);
+		}
+	}
+	function handleDoubleClick(event) {
+		onDoubleClick?.(event);
+		if (!event.defaultPrevented) removeStop(stop.id);
+	}
+	const defaultLabel = `Gradient stop at ${Math.round(stop.position * 100)}%. Use arrow keys to move${canRemove ? ", Delete to remove" : ""}.`;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-control-ui": "gradient-editor",
+		"data-control-family": "gradient-editor",
+		"data-slot": "stop",
+		"data-selected": selected ? "true" : void 0,
+		"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? defaultLabel : ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		onPointerDown: handlePointerDown,
+		onFocus: handleFocus,
+		onKeyDown: handleKeyDown,
+		onDoubleClick: handleDoubleClick,
+		className: cn("-translate-x-1/2 absolute top-1/2 -translate-y-1/2 cursor-grab overflow-hidden active:cursor-grabbing", className),
+		style: {
+			...style,
+			left: `${stop.position * 100}%`,
+			backgroundColor: stop.color
+		},
+		...props
+	});
+}
+function GradientEditorStopAdd({ className, children, ...props }) {
+	const { addStop } = useGradientEditor();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-control-ui": "gradient-editor",
+		"data-control-family": "gradient-editor",
+		"data-slot": "stop-add",
+		"aria-label": "Add gradient stop",
+		onClick: () => addStop(.5),
+		className: cn("flex shrink-0 cursor-pointer items-center justify-center", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 16 16",
+			className: "size-3.5",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", { d: "M8 3v10M3 8h10" })
+		})
+	});
+}
+function GradientEditorStopColor() {
+	const { stops, selectedId, setStopColor } = useGradientEditor();
+	const selected = stops.find((s) => s.id === selectedId) ?? stops[0];
+	if (!selected) return null;
+	return /* @__PURE__ */ jsxs(ColorPicker, {
+		value: selected.color,
+		onValueChange: (color) => setStopColor(selected.id, color),
+		defaultFormat: "hex",
+		children: [/* @__PURE__ */ jsx(ColorPickerTrigger, {}), /* @__PURE__ */ jsxs(ColorPickerContent, { children: [
+			/* @__PURE__ */ jsx(ColorPickerArea, {}),
+			/* @__PURE__ */ jsx(ColorPickerHue, {}),
+			/* @__PURE__ */ jsx(ColorPickerAlpha, {}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-control-ui": "gradient-editor",
+				"data-control-family": "gradient-editor",
+				"data-slot": "value-row",
+				className: "flex",
+				children: [/* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), /* @__PURE__ */ jsx(ColorPickerInput, { className: "flex-1" })]
+			})
+		] })]
+	});
+}
+function GradientEditorTypeSelect({ size = "sm", className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) {
+	const { type, setType } = useGradientEditor();
+	return /* @__PURE__ */ jsxs(Select, {
+		value: type,
+		onValueChange: (value) => {
+			if (isGradientType(value)) setType(value);
+		},
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			size,
+			"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? "Gradient type" : ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			className,
+			children: /* @__PURE__ */ jsx(SelectValue, {})
+		}), /* @__PURE__ */ jsxs(SelectContent, { children: [
+			/* @__PURE__ */ jsx(SelectItem, {
+				value: "linear",
+				children: "Linear"
+			}),
+			/* @__PURE__ */ jsx(SelectItem, {
+				value: "radial",
+				children: "Radial"
+			}),
+			/* @__PURE__ */ jsx(SelectItem, {
+				value: "conic",
+				children: "Conic"
+			})
+		] })]
+	});
+}
+//#endregion
+export { GradientEditor, GradientEditorPreview, GradientEditorStop, GradientEditorStopAdd, GradientEditorStopColor, GradientEditorTrack, GradientEditorTypeSelect };

package/dist/ui/hover-card.d.ts

@@ -0,0 +1,25 @@
+import { OpenChangeEventDetails } from "../control-props.js";
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+import { PreviewCard } from "@base-ui/react/preview-card";
+//#region src/ui/hover-card.d.ts
+type HoverCardProps = {
+  children?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
+};
+type HoverCardContentProps = Omit<ComponentProps<"div"> & {
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+}, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+declare function HoverCard(props: HoverCardProps): import("react").JSX.Element;
+declare function HoverCardTrigger({ className, ...props }: ComponentProps<typeof PreviewCard.Trigger> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function HoverCardContent({ className, children, side, align, sideOffset, ...props }: HoverCardContentProps): import("react").JSX.Element;
+//#endregion
+export { HoverCard, HoverCardContent, HoverCardContentProps, HoverCardProps, HoverCardTrigger };

package/dist/ui/hover-card.js

@@ -0,0 +1,46 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinEffects, skinId } from "../skin.js";
+import { jsx } from "react/jsx-runtime";
+import { PreviewCard } from "@base-ui/react/preview-card";
+//#region src/ui/hover-card.tsx
+function HoverCard(props) {
+	return /* @__PURE__ */ jsx(PreviewCard.Root, { ...props });
+}
+function HoverCardTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(PreviewCard.Trigger, {
+		"data-control-ui": "hover-card",
+		"data-control-family": "popup",
+		"data-popup-kind": "hover-card",
+		"data-slot": "trigger",
+		className,
+		...props
+	});
+}
+function HoverCardContent({ className, children, side = "bottom", align = "center", sideOffset = 8, ...props }) {
+	return /* @__PURE__ */ jsx(PreviewCard.Portal, { children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+		"data-control-ui": "hover-card",
+		"data-popup-kind": "hover-card",
+		"data-control-family": "popup",
+		"data-slot": "positioner",
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		side,
+		align,
+		sideOffset,
+		className: "z-[80]",
+		children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+			"data-control-ui": "hover-card",
+			"data-popup-kind": "hover-card",
+			"data-control-family": "popup",
+			"data-slot": "content",
+			"data-surface": "floating",
+			"data-popup-part": "surface",
+			className: cn("w-64", className),
+			...props,
+			children
+		})
+	}) });
+}
+//#endregion
+export { HoverCard, HoverCardContent, HoverCardTrigger };

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

@@ -0,0 +1,40 @@
+import { InfiniteCanvasKnobStyle } from "../knob-contracts/infinite-canvas-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/infinite-canvas.d.ts
+type InfiniteCanvasTransform = {
+  x: number;
+  y: number;
+  scale: number;
+};
+type InfiniteCanvasMoveReason = "pointer" | "wheel" | "keyboard" | "control";
+type InfiniteCanvasMoveDetails = {
+  reason: InfiniteCanvasMoveReason;
+};
+type InfiniteCanvasProps = Omit<ComponentProps<"section">, "onChange" | "onWheel" | "ref" | "style"> & {
+  transform?: InfiniteCanvasTransform;
+  defaultTransform?: InfiniteCanvasTransform;
+  onTransformChange?: (transform: InfiniteCanvasTransform, details: InfiniteCanvasMoveDetails) => void;
+  minScale?: number;
+  maxScale?: number;
+  onWheel?: (event: WheelEvent) => void;
+  style?: CSSProperties & InfiniteCanvasKnobStyle;
+};
+type InfiniteCanvasContentProps = ComponentProps<"div"> & {
+  style?: CSSProperties & InfiniteCanvasKnobStyle;
+};
+type InfiniteCanvasControlsProps = Omit<ComponentProps<"div">, "children" | "style"> & {
+  style?: CSSProperties & InfiniteCanvasKnobStyle;
+};
+type InfiniteCanvasContextValue = {
+  transform: InfiniteCanvasTransform;
+  minScale: number;
+  maxScale: number;
+  reset: (reason: InfiniteCanvasMoveReason) => void;
+  zoomBy: (factor: number, reason: InfiniteCanvasMoveReason) => void;
+};
+declare function useInfiniteCanvas(): InfiniteCanvasContextValue;
+declare function InfiniteCanvas({ transform: controlledTransform, defaultTransform, onTransformChange, minScale: minScaleProp, maxScale: maxScaleProp, className, children, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, onKeyDown, "aria-label": ariaLabel, ...props }: InfiniteCanvasProps): import("react").JSX.Element;
+declare function InfiniteCanvasContent({ className, style, ...props }: InfiniteCanvasContentProps): import("react").JSX.Element;
+declare function InfiniteCanvasControls({ className, ...props }: InfiniteCanvasControlsProps): import("react").JSX.Element;
+//#endregion
+export { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasContentProps, InfiniteCanvasControls, InfiniteCanvasControlsProps, InfiniteCanvasMoveDetails, InfiniteCanvasMoveReason, InfiniteCanvasProps, InfiniteCanvasTransform, useInfiniteCanvas };