@maanlamp/react-web-ui 0.0.0-stage → 0.1.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"tsf-photo-field.d.ts","sourceRoot":"","sources":["../../../src/components/photo-field/tsf-photo-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACN,KAAK,mBAAmB,EAExB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAEN,KAAK,eAAe,EACpB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACpC,eAAe,EACf,MAAM,mBAAmB,GAAG,OAAO,GAAG,eAAe,CACrD,GACA,QAAQ,CAAC;IACR,wEAAwE;IACxE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;CACjD,CAAC,CAAC;AAEJ;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,gCAGvB,kBAAkB,KAAG,SAgBvB,CAAC"}

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 {...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();
+	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,2 @@
+export * from "./popover.tsx";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/popover/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

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_1oo44_3 {
+    --_popup-edge-padding: var(
+    	--popup-edge-padding,
+    	var(--sys-unit-16)
+    );
+  }
+  @property --_popup-edge-padding {
+    syntax: "<length>";
+    inherits: false;
+    initial-value: 0px;
+  }
+  ._positioner_1oo44_3 {
+    outline: none;
+    filter: var(--sys-elevation-1-filter);
+  }
+  ._visuallyHidden_1oo44_18 {
+    position: absolute;
+    overflow: hidden;
+    clip-path: inset(50%);
+    inline-size: 1px;
+    block-size: 1px;
+    white-space: nowrap;
+  }
+  ._popup_1oo44_26 {
+    box-sizing: border-box;
+    min-inline-size: min(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_1oo44_26 {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), transform var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._popup_1oo44_26[data-starting-style], ._popup_1oo44_26[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  ._arrow_1oo44_47 {
+    display: flex;
+  }
+  ._arrow_1oo44_47[data-side=top] {
+    bottom: -8px;
+    transform: rotate(180deg);
+  }
+  ._arrow_1oo44_47[data-side=bottom] {
+    top: -8px;
+  }
+  ._arrow_1oo44_47[data-side=left] {
+    right: -12px;
+    transform: rotate(90deg);
+  }
+  ._arrow_1oo44_47[data-side=right] {
+    left: -12px;
+    transform: rotate(-90deg);
+  }
+  ._arrowFill_1oo44_65 {
+    fill: var(--popover-surface, var(--sys-color-surface-overlay));
+  }
+  ._heading_1oo44_68 {
+    margin-block-end: var(--sys-unit-8);
+    color: var(--sys-color-text);
+    font: var(--sys-font-label-large);
+  }
+  ._rows_1oo44_73,
+  ._row_1oo44_73 {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    align-items: baseline;
+    gap: var(--sys-unit-3);
+  }
+  ._row_1oo44_73 {
+    padding-block: var(--sys-unit-2);
+  }
+  ._rows_1oo44_73 ._row_1oo44_73 {
+    display: contents;
+  }
+  ._rows_1oo44_73 ._rowLabel_1oo44_86,
+  ._rows_1oo44_73 ._rowValue_1oo44_87 {
+    padding-block: var(--sys-unit-2);
+  }
+  ._rowLabel_1oo44_86 {
+    color: var(--sys-color-text-muted);
+    font: var(--sys-font-body-medium);
+  }
+  ._rowValue_1oo44_87 {
+    color: var(--sys-color-text);
+    font: var(--sys-font-body-medium);
+  }
+  ._rowValue_1oo44_87[data-numeric] {
+    font-variant-numeric: tabular-nums;
+  }
+  ._skeletonText_1oo44_101 {
+    position: relative;
+    display: inline-block;
+  }
+  ._skeletonTextContent_1oo44_105 {
+    visibility: hidden;
+  }
+  ._skeletonTextOverlay_1oo44_108 {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline: 0;
+    transform: translateY(-50%);
+  }
+  ._headingSkeleton_1oo44_114 {
+    min-inline-size: 12ch;
+  }
+  ._valueSkeleton_1oo44_117 {
+    min-inline-size: 8ch;
+  }
+}

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

@@ -0,0 +1,73 @@
+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 Heading: ({ 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;
+    Heading: typeof Heading;
+    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 `Heading` 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.Heading>Rate breakdown</Popover.Heading>
+ *         <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 {};
+//# sourceMappingURL=popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAEhE,OAAO,EACN,KAAK,cAAc,EAEnB,KAAK,SAAS,EAEd,MAAM,OAAO,CAAC;AASf,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAC/C,OAAO,WAAW,CAAC,OAAO,CAC1B,GACA,QAAQ,CAAC;IACR,kGAAkG;IAClG,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC,CAAC;AAEJ,QAAA,MAAM,OAAO,oEAMV,mBAAmB,KAAG,SAaxB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACxC,cAAc,CAAC,OAAO,WAAW,CAAC,UAAU,CAAC,EAC7C,KAAK,CACL,CAAC;AAEF,QAAA,MAAM,UAAU,wCAIb,sBAAsB,KAAG,SAO3B,CAAC;AAmBF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAC7C,OAAO,WAAW,CAAC,KAAK,CACxB,GACA,CACG,QAAQ,CAAC;IACT,kEAAkE;IAClE,OAAO,EAAE,OAAO,CAAC;IACjB,kEAAkE;IAClE,YAAY,EAAE,MAAM,CAAC;CACpB,CAAC,GACF,QAAQ,CAAC;IACT,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC,CACJ,CAAC;AAEH,QAAA,MAAM,KAAK,6DAMR,iBAAiB,KAAG,SAqBtB,CAAC;AAEF,QAAA,MAAM,KAAK,4BAGR,cAAc,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC,KAAG,SAe7C,CAAC;AAEF,QAAA,MAAM,OAAO,sCAIV,cAAc,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC,KAAG,SAqB7C,CAAC;AAEF,QAAA,MAAM,IAAI,4BAGP,cAAc,CAAC,KAAK,CAAC,KAAG,SAK1B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACtC,+BAA+B;IAC/B,KAAK,EAAE,SAAS,CAAC;IACjB,wCAAwC;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH,QAAA,MAAM,GAAG,6CAKN,eAAe,KAAG,SAmBpB,CAAC;AAEF,KAAK,YAAY,GAAG,QAAQ,CAAC;IAC5B,IAAI,EAAE,OAAO,WAAW,CAAC,IAAI,CAAC;IAC9B,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,MAAM,EAAE,OAAO,WAAW,CAAC,MAAM,CAAC;IAClC,UAAU,EAAE,OAAO,UAAU,CAAC;IAC9B,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,GAAG,EAAE,OAAO,GAAG,CAAC;IAChB,WAAW,EAAE,OAAO,WAAW,CAAC,WAAW,CAAC;IAC5C,KAAK,EAAE,OAAO,WAAW,CAAC,KAAK,CAAC;IAChC,YAAY,EAAE,OAAO,WAAW,CAAC,YAAY,CAAC;CAC9C,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,OAAO,EAAE,YAarB,CAAC"}

package/dist/components/popover/popover.js

@@ -0,0 +1,434 @@
+import { useBusyPhase } from "../../lib/hooks/use-busy-phase.js";
+import { usePopupEdgePadding } from "../../lib/popup-edge-padding.js";
+import { useIntent } from "../../lib/use-intent.js";
+import { Skeleton } from "../skeleton/skeleton.js";
+import popover_module_default from "./popover.module.js";
+import { c } from "react/compiler-runtime";
+import { createContext, useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { Popover } from "@base-ui/react/popover";
+// src/components/popover/popover.tsx
+var LoadingContext = createContext(false);
+var Trigger = (t0) => {
+	const $ = c(14);
+	let onFocus;
+	let onIntent;
+	let onPointerEnter;
+	let onPointerLeave;
+	let props;
+	if ($[0] !== t0) {
+		({onIntent, onPointerEnter, onPointerLeave, onFocus, ...props} = t0);
+		$[0] = t0;
+		$[1] = onFocus;
+		$[2] = onIntent;
+		$[3] = onPointerEnter;
+		$[4] = onPointerLeave;
+		$[5] = props;
+	} else {
+		onFocus = $[1];
+		onIntent = $[2];
+		onPointerEnter = $[3];
+		onPointerLeave = $[4];
+		props = $[5];
+	}
+	const intent = useIntent(onIntent);
+	let t1;
+	if ($[6] !== intent || $[7] !== onFocus || $[8] !== onPointerEnter || $[9] !== onPointerLeave) {
+		t1 = mergeProps(intent, {
+			onPointerEnter,
+			onPointerLeave,
+			onFocus
+		});
+		$[6] = intent;
+		$[7] = onFocus;
+		$[8] = onPointerEnter;
+		$[9] = onPointerLeave;
+		$[10] = t1;
+	} else t1 = $[10];
+	let t2;
+	if ($[11] !== props || $[12] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Popover.Trigger, {
+			...props,
+			...t1
+		});
+		$[11] = props;
+		$[12] = t1;
+		$[13] = t2;
+	} else t2 = $[13];
+	return t2;
+};
+var Positioner = (t0) => {
+	const $ = c(11);
+	let className;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({sideOffset: t1, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+	}
+	const sideOffset = t1 === void 0 ? 12 : t1;
+	const t2 = usePopupEdgePadding();
+	let t3;
+	if ($[4] !== className) {
+		t3 = clsx(popover_module_default.positioner, className);
+		$[4] = className;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== props || $[7] !== sideOffset || $[8] !== t2 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Popover.Positioner, {
+			...t2,
+			sideOffset,
+			className: t3,
+			...props
+		});
+		$[6] = props;
+		$[7] = sideOffset;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+};
+var SkeletonText = (t0) => {
+	const $ = c(8);
+	const { children, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(popover_module_default.skeletonText, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: popover_module_default.skeletonTextContent,
+			children
+		});
+		$[2] = children;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Skeleton, { className: popover_module_default.skeletonTextOverlay });
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t1 || $[6] !== t2) {
+		t4 = /* @__PURE__ */ jsxs("span", {
+			className: t1,
+			children: [t2, t3]
+		});
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
+};
+var Popup = (t0) => {
+	const $ = c(21);
+	let children;
+	let className;
+	let loadingLabel;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({loading: t1, loadingLabel, className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = loadingLabel;
+		$[4] = props;
+		$[5] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		loadingLabel = $[3];
+		props = $[4];
+		t1 = $[5];
+	}
+	const loading = t1 === void 0 ? false : t1;
+	let t2;
+	if ($[6] !== loading) {
+		t2 = {
+			busy: loading,
+			busyAfter: 0
+		};
+		$[6] = loading;
+		$[7] = t2;
+	} else t2 = $[7];
+	const busy = useBusyPhase(t2) !== "fresh";
+	let t3;
+	if ($[8] !== className) {
+		t3 = clsx(popover_module_default.popup, className);
+		$[8] = className;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== busy || $[11] !== loadingLabel) {
+		t4 = busy ? /* @__PURE__ */ jsx("div", {
+			role: "status",
+			children: /* @__PURE__ */ jsx("span", {
+				className: popover_module_default.visuallyHidden,
+				children: loadingLabel
+			})
+		}) : null;
+		$[10] = busy;
+		$[11] = loadingLabel;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== busy || $[14] !== children) {
+		t5 = /* @__PURE__ */ jsx(LoadingContext, {
+			value: busy,
+			children
+		});
+		$[13] = busy;
+		$[14] = children;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== props || $[17] !== t3 || $[18] !== t4 || $[19] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Popover.Popup, {
+			className: t3,
+			...props,
+			children: [t4, t5]
+		});
+		$[16] = props;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+	} else t6 = $[20];
+	return t6;
+};
+var Arrow = (t0) => {
+	const $ = c(9);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(popover_module_default.arrow, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("svg", {
+			width: "16",
+			height: "8",
+			viewBox: "0 0 16 8",
+			overflow: "visible",
+			children: /* @__PURE__ */ jsx("path", {
+				className: popover_module_default.arrowFill,
+				d: "M0 9 V8 L8 0 L16 8 V9 Z"
+			})
+		});
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== props || $[7] !== t1) {
+		t3 = /* @__PURE__ */ jsx(Popover.Arrow, {
+			className: t1,
+			...props,
+			children: t2
+		});
+		$[6] = props;
+		$[7] = t1;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+};
+var Heading = (t0) => {
+	const $ = c(13);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	const loading = useContext(LoadingContext);
+	let t1;
+	if ($[4] !== className) {
+		t1 = clsx(popover_module_default.heading, className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== children || $[7] !== loading) {
+		t2 = loading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SkeletonText, {
+			className: popover_module_default.headingSkeleton,
+			children
+		}), /* @__PURE__ */ jsx("span", {
+			className: popover_module_default.visuallyHidden,
+			children
+		})] }) : children;
+		$[6] = children;
+		$[7] = loading;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== props || $[10] !== t1 || $[11] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Popover.Title, {
+			className: t1,
+			...props,
+			children: t2
+		});
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+	} else t3 = $[12];
+	return t3;
+};
+var Rows = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(popover_module_default.rows, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var Row = (t0) => {
+	const $ = c(15);
+	const { label, children, numeric, className } = t0;
+	const loading = useContext(LoadingContext);
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(popover_module_default.row, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== label) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: popover_module_default.rowLabel,
+			children: label
+		});
+		$[2] = label;
+		$[3] = t2;
+	} else t2 = $[3];
+	const t3 = numeric || void 0;
+	let t4;
+	if ($[4] !== children || $[5] !== label || $[6] !== loading) {
+		t4 = loading ? /* @__PURE__ */ jsx(SkeletonText, {
+			className: popover_module_default.valueSkeleton,
+			children: label
+		}) : children;
+		$[4] = children;
+		$[5] = label;
+		$[6] = loading;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t3 || $[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx("span", {
+			className: popover_module_default.rowValue,
+			"data-numeric": t3,
+			children: t4
+		});
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t1 || $[12] !== t2 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: t1,
+			children: [t2, t5]
+		});
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
+};
+/**
+* Rich light popover over base-ui's Popover. Adds a styled `Heading` 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.Heading>Rate breakdown</Popover.Heading>
+*         <Popover.Rows>
+*           <Popover.Row numeric label="Base">{rate.data?.base}</Popover.Row>
+*         </Popover.Rows>
+*       </Popover.Popup>
+*     </Popover.Positioner>
+*   </Popover.Portal>
+* </Popover.Root>
+*/
+var Popover$1 = {
+	Root: Popover.Root,
+	Trigger,
+	Portal: Popover.Portal,
+	Positioner,
+	Popup,
+	Arrow,
+	Heading,
+	Rows,
+	Row,
+	Description: Popover.Description,
+	Close: Popover.Close,
+	createHandle: Popover.createHandle
+};
+export { Popover$1 as Popover };