@igne-agency/react-web-ui 0.0.0-stage → 0.3.0

package/dist/components/photo-field/photo-input.d.ts

@@ -0,0 +1,63 @@
+import { type ReactNode } from "react";
+import { type FieldBlurHandler } from "../field/index.ts";
+/** What the circle shows until a photo is picked: a placeholder, or the stored photo. */
+export type PhotoInputPreviewProps = Readonly<{
+    /** Shown until a photo is picked, such as a placeholder. */
+    defaultPreview?: ReactNode;
+    /** Whether `defaultPreview` is a stored photo rather than a placeholder. */
+    hasStoredImage?: false;
+}> | Readonly<{
+    /** The stored photo, shown until another is picked. */
+    defaultPreview: NonNullable<ReactNode>;
+    /** Whether `defaultPreview` is a stored photo rather than a placeholder. */
+    hasStoredImage: true;
+}>;
+export type PhotoInputProps = PhotoInputPreviewProps & Readonly<{
+    /** The picked file, or nothing while the stored photo stands. */
+    value: File | undefined;
+    /** Called with a picked or dropped file, or with nothing once it is removed. */
+    onValueChange?: (file: File | undefined) => Promise<void> | void;
+    /** Mime types, wildcards or extensions the file dialog offers. @default ["image/*"] */
+    accept?: readonly string[];
+    /** The id of the label that names the control. */
+    labelledBy: string;
+    /** The ids of the description and error, joined. */
+    describedBy?: string;
+    /** Submits the picked file under this name. */
+    name?: string;
+    /** Shows the photo without letting it be changed. */
+    readOnly?: boolean;
+    invalid?: boolean;
+    /** Background work, such as an upload, is in flight. */
+    pending?: boolean;
+    onBlur?: FieldBlurHandler;
+    /** The picked photo's alternative text, such as "Preview". */
+    previewLabel: string;
+    /** What the control announces while a photo is set, such as "Photo set". */
+    photoSetLabel: string;
+    /** What the control announces while no photo is set, such as "No photo". */
+    noPhotoLabel: string;
+    /** Accessible name of the button that removes a picked photo, such as "Remove photo". */
+    removeLabel: string;
+}>;
+/**
+ * The bare photo picker: a circle showing the photo, which is itself the
+ * button that opens the file dialog and the target a file is dropped on. A
+ * picked photo can be removed with the button on the rim, or with Delete on
+ * the circle. Read-only, the circle stays focusable and opens nothing. It
+ * carries no name of its own, so an enclosing field names it. For the
+ * ordinary case, use `PhotoField`.
+ *
+ * @example
+ * <PhotoInput
+ * 	labelledBy={labelId}
+ * 	value={file}
+ * 	onValueChange={setFile}
+ * 	defaultPreview={<Avatar name={user.name} />}
+ * 	previewLabel="Preview"
+ * 	photoSetLabel="Photo set"
+ * 	noPhotoLabel="No photo"
+ * 	removeLabel="Remove photo"
+ * />
+ */
+export declare const PhotoInput: ({ value, onValueChange, defaultPreview, hasStoredImage, accept, labelledBy, describedBy, name, readOnly, invalid, pending, onBlur, previewLabel, photoSetLabel, noPhotoLabel, removeLabel, }: PhotoInputProps) => ReactNode;

package/dist/components/photo-field/photo-input.js

@@ -0,0 +1,327 @@
+import SvgPhotoCamera from "../../vendor/@material-design-icons/svg/outlined/photo_camera.js";
+import SvgClose from "../../vendor/@material-design-icons/svg/outlined/close.js";
+import { Button } from "../button/button.js";
+import { fieldStateAttributes } from "../field/field-state.js";
+import { Icon } from "../icon/icon.js";
+import photo_input_module_default from "./photo-input.module.js";
+import { c } from "react/compiler-runtime";
+import { useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/photo-field/photo-input.tsx
+var IMAGES = ["image/*"];
+/** Points an image at the file through an object URL, made once per file and revoked when the file changes or the image unmounts. */
+var usePreviewSource = (file) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== file) {
+		t0 = (image) => {
+			if (image === null || file === void 0) return;
+			const url = URL.createObjectURL(file);
+			image.src = url;
+			return () => URL.revokeObjectURL(url);
+		};
+		$[0] = file;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+/**
+* The bare photo picker: a circle showing the photo, which is itself the
+* button that opens the file dialog and the target a file is dropped on. A
+* picked photo can be removed with the button on the rim, or with Delete on
+* the circle. Read-only, the circle stays focusable and opens nothing. It
+* carries no name of its own, so an enclosing field names it. For the
+* ordinary case, use `PhotoField`.
+*
+* @example
+* <PhotoInput
+* 	labelledBy={labelId}
+* 	value={file}
+* 	onValueChange={setFile}
+* 	defaultPreview={<Avatar name={user.name} />}
+* 	previewLabel="Preview"
+* 	photoSetLabel="Photo set"
+* 	noPhotoLabel="No photo"
+* 	removeLabel="Remove photo"
+* />
+*/
+var PhotoInput = (t0) => {
+	const $ = c(67);
+	const { value, onValueChange, defaultPreview, hasStoredImage: t1, accept: t2, labelledBy, describedBy, name, readOnly: t3, invalid: t4, pending: t5, onBlur, previewLabel, photoSetLabel, noPhotoLabel, removeLabel } = t0;
+	const hasStoredImage = t1 === void 0 ? false : t1;
+	const accept = t2 === void 0 ? IMAGES : t2;
+	const readOnly = t3 === void 0 ? false : t3;
+	const invalid = t4 === void 0 ? false : t4;
+	const pending = t5 === void 0 ? false : t5;
+	const valueId = useId();
+	const well = useRef(null);
+	const picker = useRef(null);
+	const [dragOver, setDragOver] = useState(false);
+	const previewSource = usePreviewSource(value);
+	const filled = value !== void 0 || hasStoredImage;
+	let t6;
+	if ($[0] !== defaultPreview || $[1] !== previewLabel || $[2] !== previewSource || $[3] !== value) {
+		t6 = value === void 0 ? defaultPreview : /* @__PURE__ */ jsx("img", {
+			ref: previewSource,
+			alt: previewLabel
+		});
+		$[0] = defaultPreview;
+		$[1] = previewLabel;
+		$[2] = previewSource;
+		$[3] = value;
+		$[4] = t6;
+	} else t6 = $[4];
+	let t7;
+	if ($[5] !== t6) {
+		t7 = /* @__PURE__ */ jsx("span", {
+			className: photo_input_module_default.face,
+			children: t6
+		});
+		$[5] = t6;
+		$[6] = t7;
+	} else t7 = $[6];
+	const face = t7;
+	let t8;
+	if ($[7] !== describedBy || $[8] !== valueId) {
+		t8 = [valueId, describedBy].filter(_temp);
+		$[7] = describedBy;
+		$[8] = valueId;
+		$[9] = t8;
+	} else t8 = $[9];
+	const description = t8.join(" ");
+	const t9 = filled ? photoSetLabel : noPhotoLabel;
+	let t10;
+	if ($[10] !== t9 || $[11] !== valueId) {
+		t10 = /* @__PURE__ */ jsx("span", {
+			id: valueId,
+			className: photo_input_module_default.valueText,
+			children: t9
+		});
+		$[10] = t9;
+		$[11] = valueId;
+		$[12] = t10;
+	} else t10 = $[12];
+	const valueText = t10;
+	let t11;
+	if ($[13] !== onValueChange) {
+		t11 = async () => {
+			await onValueChange?.(void 0);
+			well.current?.focus();
+		};
+		$[13] = onValueChange;
+		$[14] = t11;
+	} else t11 = $[14];
+	const remove = t11;
+	if (readOnly) {
+		let t12;
+		if ($[15] !== filled || $[16] !== pending) {
+			t12 = fieldStateAttributes({
+				readonly: true,
+				filled,
+				pending
+			});
+			$[15] = filled;
+			$[16] = pending;
+			$[17] = t12;
+		} else t12 = $[17];
+		let t13;
+		if ($[18] !== description || $[19] !== face || $[20] !== labelledBy || $[21] !== onBlur || $[22] !== t12) {
+			t13 = /* @__PURE__ */ jsx("span", {
+				role: "img",
+				tabIndex: 0,
+				"aria-labelledby": labelledBy,
+				"aria-describedby": description,
+				className: photo_input_module_default.well,
+				onBlur,
+				...t12,
+				children: face
+			});
+			$[18] = description;
+			$[19] = face;
+			$[20] = labelledBy;
+			$[21] = onBlur;
+			$[22] = t12;
+			$[23] = t13;
+		} else t13 = $[23];
+		let t14;
+		if ($[24] !== t13 || $[25] !== valueText) {
+			t14 = /* @__PURE__ */ jsxs("div", {
+				className: photo_input_module_default.photoInput,
+				children: [t13, valueText]
+			});
+			$[24] = t13;
+			$[25] = valueText;
+			$[26] = t14;
+		} else t14 = $[26];
+		return t14;
+	}
+	const t12 = value === void 0 ? void 0 : "Delete";
+	let t13;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = () => picker.current?.click();
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== remove || $[29] !== value) {
+		t14 = (event) => {
+			if (event.key === "Delete" && value !== void 0) {
+				event.preventDefault();
+				remove();
+			}
+		};
+		$[28] = remove;
+		$[29] = value;
+		$[30] = t14;
+	} else t14 = $[30];
+	let t15;
+	let t16;
+	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = (event_0) => {
+			event_0.preventDefault();
+			setDragOver(true);
+		};
+		t16 = () => setDragOver(false);
+		$[31] = t15;
+		$[32] = t16;
+	} else {
+		t15 = $[31];
+		t16 = $[32];
+	}
+	let t17;
+	if ($[33] !== onValueChange) {
+		t17 = (event_1) => {
+			event_1.preventDefault();
+			setDragOver(false);
+			const file = event_1.dataTransfer.files[0];
+			if (file !== void 0) onValueChange?.(file);
+		};
+		$[33] = onValueChange;
+		$[34] = t17;
+	} else t17 = $[34];
+	const t18 = dragOver || void 0;
+	const t19 = invalid ? "invalid" : void 0;
+	let t20;
+	if ($[35] !== filled || $[36] !== pending || $[37] !== t19) {
+		t20 = fieldStateAttributes({
+			validity: t19,
+			filled,
+			pending
+		});
+		$[35] = filled;
+		$[36] = pending;
+		$[37] = t19;
+		$[38] = t20;
+	} else t20 = $[38];
+	let t21;
+	if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = /* @__PURE__ */ jsx("span", {
+			className: photo_input_module_default.badge,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(Icon, {
+				svg: SvgPhotoCamera,
+				label: ""
+			})
+		});
+		$[39] = t21;
+	} else t21 = $[39];
+	let t22;
+	if ($[40] !== description || $[41] !== face || $[42] !== labelledBy || $[43] !== onBlur || $[44] !== t12 || $[45] !== t14 || $[46] !== t17 || $[47] !== t18 || $[48] !== t20) {
+		t22 = /* @__PURE__ */ jsxs("button", {
+			ref: well,
+			type: "button",
+			"aria-labelledby": labelledBy,
+			"aria-describedby": description,
+			"aria-keyshortcuts": t12,
+			className: photo_input_module_default.well,
+			onClick: t13,
+			onBlur,
+			onKeyDown: t14,
+			onDragOver: t15,
+			onDragLeave: t16,
+			onDrop: t17,
+			"data-dragover": t18,
+			...t20,
+			children: [face, t21]
+		});
+		$[40] = description;
+		$[41] = face;
+		$[42] = labelledBy;
+		$[43] = onBlur;
+		$[44] = t12;
+		$[45] = t14;
+		$[46] = t17;
+		$[47] = t18;
+		$[48] = t20;
+		$[49] = t22;
+	} else t22 = $[49];
+	let t23;
+	if ($[50] !== remove || $[51] !== removeLabel || $[52] !== value) {
+		t23 = value !== void 0 && /* @__PURE__ */ jsx(Button, {
+			iconOnly: true,
+			icon: SvgClose,
+			label: removeLabel,
+			variant: "secondary",
+			className: photo_input_module_default.remove,
+			onClick: () => void remove()
+		});
+		$[50] = remove;
+		$[51] = removeLabel;
+		$[52] = value;
+		$[53] = t23;
+	} else t23 = $[53];
+	let t24;
+	if ($[54] !== accept) {
+		t24 = accept.join(",");
+		$[54] = accept;
+		$[55] = t24;
+	} else t24 = $[55];
+	let t25;
+	if ($[56] !== onValueChange) {
+		t25 = async (event_2) => {
+			const file_0 = event_2.target.files?.[0];
+			event_2.target.value = "";
+			if (file_0 !== void 0) await onValueChange?.(file_0);
+		};
+		$[56] = onValueChange;
+		$[57] = t25;
+	} else t25 = $[57];
+	let t26;
+	if ($[58] !== name || $[59] !== t24 || $[60] !== t25) {
+		t26 = /* @__PURE__ */ jsx("input", {
+			ref: picker,
+			type: "file",
+			name,
+			accept: t24,
+			tabIndex: -1,
+			"aria-hidden": "true",
+			className: photo_input_module_default.picker,
+			onChange: t25
+		});
+		$[58] = name;
+		$[59] = t24;
+		$[60] = t25;
+		$[61] = t26;
+	} else t26 = $[61];
+	let t27;
+	if ($[62] !== t22 || $[63] !== t23 || $[64] !== t26 || $[65] !== valueText) {
+		t27 = /* @__PURE__ */ jsxs("div", {
+			className: photo_input_module_default.photoInput,
+			children: [
+				t22,
+				t23,
+				t26,
+				valueText
+			]
+		});
+		$[62] = t22;
+		$[63] = t23;
+		$[64] = t26;
+		$[65] = valueText;
+		$[66] = t27;
+	} else t27 = $[66];
+	return t27;
+};
+function _temp(id) {
+	return id !== void 0;
+}
+export { PhotoInput };

package/dist/components/photo-field/photo-input.module.js

@@ -0,0 +1,18 @@
+import './photo-input.css';// src/components/photo-field/photo-input.module.scss
+var photoInput = "_photoInput_1q2zc_3";
+var well = "_well_1q2zc_7";
+var face = "_face_1q2zc_62";
+var badge = "_badge_1q2zc_84";
+var remove = "_remove_1q2zc_98";
+var picker = "_picker_1q2zc_104";
+var valueText = "_valueText_1q2zc_105";
+var photo_input_module_default = {
+	photoInput,
+	well,
+	face,
+	badge,
+	remove,
+	picker,
+	valueText
+};
+export { badge, photo_input_module_default as default, face, photoInput, picker, remove, valueText, well };

package/dist/components/photo-field/tsf-photo-field.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type PhotoFieldProps } from "./photo-field.tsx";
+import type { PhotoInputPreviewProps } from "./photo-input.tsx";
+export type TSFPhotoFieldProps = Omit<PhotoFieldProps, keyof ConnectedFieldProps | keyof PhotoInputPreviewProps | "value" | "onValueChange"> & PhotoInputPreviewProps & Readonly<{
+    /** Runs alongside the field's own change handling, for side effects. */
+    onValueChange?: (file: File | undefined) => void;
+}>;
+/**
+ * `PhotoField` bound to the TanStack Form field it renders in, reached as
+ * `field.PhotoField`. The field's value is the picked `File`, or nothing while
+ * the stored photo stands.
+ *
+ * @example
+ * <form.AppField name="photo">
+ * 	{field => <field.PhotoField label="Profile photo" optionalLabel="optional" hasStoredImage defaultPreview={<Avatar name={user.name} src={user.photo} />} {...photoCopy} />}
+ * </form.AppField>
+ */
+export declare const TSFPhotoField: ({ onValueChange, ...props }: TSFPhotoFieldProps) => ReactNode;

package/dist/components/photo-field/tsf-photo-field.js

@@ -0,0 +1,56 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { PhotoField } from "./photo-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/photo-field/tsf-photo-field.tsx
+/**
+* `PhotoField` bound to the TanStack Form field it renders in, reached as
+* `field.PhotoField`. The field's value is the picked `File`, or nothing while
+* the stored photo stands.
+*
+* @example
+* <form.AppField name="photo">
+* 	{field => <field.PhotoField label="Profile photo" optionalLabel="optional" hasStoredImage defaultPreview={<Avatar name={user.name} src={user.photo} />} {...photoCopy} />}
+* </form.AppField>
+*/
+var TSFPhotoField = (t0) => {
+	const $ = c(11);
+	let onValueChange;
+	let props;
+	if ($[0] !== t0) {
+		({onValueChange, ...props} = t0);
+		$[0] = t0;
+		$[1] = onValueChange;
+		$[2] = props;
+	} else {
+		onValueChange = $[1];
+		props = $[2];
+	}
+	const { field, props: connected } = useConnectedField(props.label);
+	let t1;
+	if ($[3] !== field || $[4] !== onValueChange) {
+		t1 = (file) => {
+			field.handleChange(file);
+			onValueChange?.(file);
+		};
+		$[3] = field;
+		$[4] = onValueChange;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== connected || $[7] !== field.state.value || $[8] !== props || $[9] !== t1) {
+		t2 = /* @__PURE__ */ jsx(PhotoField, {
+			...props,
+			...connected,
+			value: field.state.value,
+			onValueChange: t1
+		});
+		$[6] = connected;
+		$[7] = field.state.value;
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t2;
+	} else t2 = $[10];
+	return t2;
+};
+export { TSFPhotoField };

package/dist/components/popover/index.d.ts

@@ -0,0 +1 @@
+export * from "./popover.tsx";

package/dist/components/popover/index.js

@@ -0,0 +1 @@
+export { Popover } from "./popover.js";

package/dist/components/popover/popover.css

@@ -0,0 +1,120 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._positioner_ixh47_3 {
+    --_popup-edge-padding: var(
+    	--popup-edge-padding,
+    	var(--sys-unit-16)
+    );
+  }
+  @property --_popup-edge-padding {
+    syntax: "<length>";
+    inherits: false;
+    initial-value: 0px;
+  }
+  ._positioner_ixh47_3 {
+    outline: none;
+    filter: var(--sys-elevation-1-filter);
+  }
+  ._visuallyHidden_ixh47_18 {
+    position: absolute;
+    overflow: hidden;
+    clip-path: inset(50%);
+    inline-size: 1px;
+    block-size: 1px;
+    white-space: nowrap;
+  }
+  ._popup_ixh47_26 {
+    box-sizing: border-box;
+    min-inline-size: min(var(--popover-min-inline-size, 22rem), var(--available-width));
+    max-inline-size: min(28rem, var(--available-width));
+    border: none;
+    border-radius: var(--popover-radius, var(--sys-radius-lg));
+    background: var(--popover-surface, var(--sys-color-surface-overlay));
+    padding: var(--popover-padding, var(--sys-unit-16));
+    color: var(--sys-color-text);
+    font: var(--sys-font-body-medium);
+    transform-origin: var(--transform-origin);
+  }
+  @media not (prefers-reduced-motion) {
+    ._popup_ixh47_26 {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), transform var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._popup_ixh47_26[data-starting-style], ._popup_ixh47_26[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  ._arrow_ixh47_47 {
+    display: flex;
+  }
+  ._arrow_ixh47_47[data-side=top] {
+    bottom: -8px;
+    transform: rotate(180deg);
+  }
+  ._arrow_ixh47_47[data-side=bottom] {
+    top: -8px;
+  }
+  ._arrow_ixh47_47[data-side=left] {
+    right: -12px;
+    transform: rotate(90deg);
+  }
+  ._arrow_ixh47_47[data-side=right] {
+    left: -12px;
+    transform: rotate(-90deg);
+  }
+  ._arrowFill_ixh47_65 {
+    fill: var(--popover-surface, var(--sys-color-surface-overlay));
+  }
+  ._title_ixh47_68 {
+    margin-block-end: var(--sys-unit-8);
+    color: var(--sys-color-text);
+    font: var(--sys-font-label-large);
+  }
+  ._rows_ixh47_73,
+  ._row_ixh47_73 {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    align-items: baseline;
+    gap: var(--sys-unit-3);
+  }
+  ._row_ixh47_73 {
+    padding-block: var(--sys-unit-2);
+  }
+  ._rows_ixh47_73 ._row_ixh47_73 {
+    display: contents;
+  }
+  ._rows_ixh47_73 ._rowLabel_ixh47_86,
+  ._rows_ixh47_73 ._rowValue_ixh47_87 {
+    padding-block: var(--sys-unit-2);
+  }
+  ._rowLabel_ixh47_86 {
+    color: var(--sys-color-text-muted);
+    font: var(--sys-font-body-medium);
+  }
+  ._rowValue_ixh47_87 {
+    color: var(--sys-color-text);
+    font: var(--sys-font-body-medium);
+  }
+  ._rowValue_ixh47_87[data-numeric] {
+    font-variant-numeric: tabular-nums;
+  }
+  ._skeletonText_ixh47_101 {
+    position: relative;
+    display: inline-block;
+  }
+  ._skeletonTextContent_ixh47_105 {
+    visibility: hidden;
+  }
+  ._skeletonTextOverlay_ixh47_108 {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline: 0;
+    transform: translateY(-50%);
+  }
+  ._titleSkeleton_ixh47_114 {
+    min-inline-size: 12ch;
+  }
+  ._valueSkeleton_ixh47_117 {
+    min-inline-size: 8ch;
+  }
+}

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,72 @@
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { type ComponentProps, type ReactNode } from "react";
+export type PopoverTriggerProps = ComponentProps<typeof BasePopover.Trigger> & Readonly<{
+    /** Called once a pointer rests on the trigger or it takes focus, to warm what the popup shows. */
+    onIntent?: () => void;
+}>;
+declare const Trigger: ({ onIntent, onPointerEnter, onPointerLeave, onFocus, ...props }: PopoverTriggerProps) => ReactNode;
+export type PopoverPositionerProps = Omit<ComponentProps<typeof BasePopover.Positioner>, "ref">;
+declare const Positioner: ({ sideOffset, className, ...props }: PopoverPositionerProps) => ReactNode;
+export type PopoverPopupProps = ComponentProps<typeof BasePopover.Popup> & (Readonly<{
+    /** Whether the content the popup describes is still in flight. */
+    loading: boolean;
+    /** Announced once while loading, in place of the placeholders. */
+    loadingLabel: string;
+}> | Readonly<{
+    loading?: undefined;
+    loadingLabel?: undefined;
+}>);
+declare const Popup: ({ loading, loadingLabel, className, children, ...props }: PopoverPopupProps) => ReactNode;
+declare const Arrow: ({ className, ...props }: ComponentProps<typeof BasePopover.Arrow>) => ReactNode;
+declare const Title: ({ className, children, ...props }: ComponentProps<typeof BasePopover.Title>) => ReactNode;
+declare const Rows: ({ className, ...props }: ComponentProps<"div">) => ReactNode;
+export type PopoverRowProps = Readonly<{
+    /** Left-aligned descriptor. */
+    label: ReactNode;
+    /** Value displayed beside the label. */
+    children: ReactNode;
+    /** Uses tabular figures for evenly spaced numbers. */
+    numeric?: boolean;
+    className?: string;
+}>;
+declare const Row: ({ label, children, numeric, className, }: PopoverRowProps) => ReactNode;
+type PopoverParts = Readonly<{
+    Root: typeof BasePopover.Root;
+    Trigger: typeof Trigger;
+    Portal: typeof BasePopover.Portal;
+    Positioner: typeof Positioner;
+    Popup: typeof Popup;
+    Arrow: typeof Arrow;
+    Title: typeof Title;
+    Rows: typeof Rows;
+    Row: typeof Row;
+    Description: typeof BasePopover.Description;
+    Close: typeof BasePopover.Close;
+    createHandle: typeof BasePopover.createHandle;
+}>;
+/**
+ * Rich light popover over base-ui's Popover. Adds a styled `Title` and a
+ * labelled `Row` slot (label on the left, value on the right) for cell-level
+ * composition explainers. The positioner keeps `--popup-edge-padding` from the
+ * viewport's edges.
+ *
+ * @example
+ * <Popover.Root>
+ *   <Popover.Trigger openOnHover onIntent={() => prefetchRate(id)}>
+ *     € 1.234,56
+ *   </Popover.Trigger>
+ *   <Popover.Portal>
+ *     <Popover.Positioner>
+ *       <Popover.Popup loading={rate.isPending} loadingLabel="Loading the rate">
+ *         <Popover.Arrow />
+ *         <Popover.Title>Rate breakdown</Popover.Title>
+ *         <Popover.Rows>
+ *           <Popover.Row numeric label="Base">{rate.data?.base}</Popover.Row>
+ *         </Popover.Rows>
+ *       </Popover.Popup>
+ *     </Popover.Positioner>
+ *   </Popover.Portal>
+ * </Popover.Root>
+ */
+export declare const Popover: PopoverParts;
+export {};