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

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 Title = (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.title, 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.titleSkeleton,
+			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 `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>
+*/
+var Popover$1 = {
+	Root: Popover.Root,
+	Trigger,
+	Portal: Popover.Portal,
+	Positioner,
+	Popup,
+	Arrow,
+	Title,
+	Rows,
+	Row,
+	Description: Popover.Description,
+	Close: Popover.Close,
+	createHandle: Popover.createHandle
+};
+export { Popover$1 as Popover };

package/dist/components/popover/popover.module.js

@@ -0,0 +1,34 @@
+import './popover.css';// src/components/popover/popover.module.scss
+var positioner = "_positioner_ixh47_3";
+var visuallyHidden = "_visuallyHidden_ixh47_18";
+var popup = "_popup_ixh47_26";
+var arrow = "_arrow_ixh47_47";
+var arrowFill = "_arrowFill_ixh47_65";
+var title = "_title_ixh47_68";
+var rows = "_rows_ixh47_73";
+var row = "_row_ixh47_73";
+var rowLabel = "_rowLabel_ixh47_86";
+var rowValue = "_rowValue_ixh47_87";
+var skeletonText = "_skeletonText_ixh47_101";
+var skeletonTextContent = "_skeletonTextContent_ixh47_105";
+var skeletonTextOverlay = "_skeletonTextOverlay_ixh47_108";
+var titleSkeleton = "_titleSkeleton_ixh47_114";
+var valueSkeleton = "_valueSkeleton_ixh47_117";
+var popover_module_default = {
+	positioner,
+	visuallyHidden,
+	popup,
+	arrow,
+	arrowFill,
+	title,
+	rows,
+	row,
+	rowLabel,
+	rowValue,
+	skeletonText,
+	skeletonTextContent,
+	skeletonTextOverlay,
+	titleSkeleton,
+	valueSkeleton
+};
+export { arrow, arrowFill, popover_module_default as default, popup, positioner, row, rowLabel, rowValue, rows, skeletonText, skeletonTextContent, skeletonTextOverlay, title, titleSkeleton, valueSkeleton, visuallyHidden };

package/dist/components/radio-group-field/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./radio-group.tsx";
+export * from "./radio-group-field.tsx";
+export * from "./tsf-radio-group-field.tsx";

package/dist/components/radio-group-field/index.js

@@ -0,0 +1,4 @@
+import { RadioGroup } from "./radio-group.js";
+import { RadioGroupField } from "./radio-group-field.js";
+import { TSFRadioGroupField } from "./tsf-radio-group-field.js";
+export { RadioGroup, RadioGroupField, TSFRadioGroupField };

package/dist/components/radio-group-field/radio-group-field.d.ts

@@ -0,0 +1,26 @@
+import type { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import type { ReactNode } from "react";
+import { type FieldBlurHandler, type FieldProps, type ChoiceOption } from "../field/index.ts";
+export type RadioGroupFieldProps = FieldProps & Pick<BaseRadioGroup.Props<string | null>, "value" | "defaultValue" | "onValueChange" | "disabled" | "readOnly"> & Readonly<{
+    /** The mutually exclusive choices, in the order they read. */
+    options: readonly ChoiceOption[];
+    onBlur?: FieldBlurHandler;
+    /** The form field's name. */
+    name?: string;
+    /** Applied to the fieldset, so callers can size the group. */
+    className?: string;
+}>;
+/**
+ * The assembled radio group: a fieldset named by its label, holding one radio
+ * per option, then the description and the error.
+ *
+ * @example
+ * <RadioGroupField
+ * 	label="Kind"
+ * 	optionalLabel="optional"
+ * 	options={[{ label: "Direct", value: "direct" }]}
+ * 	value={kind}
+ * 	onValueChange={setKind}
+ * />
+ */
+export declare const RadioGroupField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, options, className, value, defaultValue, onValueChange, onBlur, name, disabled, readOnly, }: RadioGroupFieldProps) => ReactNode;

package/dist/components/radio-group-field/radio-group-field.js

@@ -0,0 +1,128 @@
+import { detachHiddenInput } from "../field/hidden-input.js";
+import { RadioGroup } from "./radio-group.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/radio-group-field/radio-group-field.tsx
+/**
+* The assembled radio group: a fieldset named by its label, holding one radio
+* per option, then the description and the error.
+*
+* @example
+* <RadioGroupField
+* 	label="Kind"
+* 	optionalLabel="optional"
+* 	options={[{ label: "Direct", value: "direct" }]}
+* 	value={kind}
+* 	onValueChange={setKind}
+* />
+*/
+var RadioGroupField = (t0) => {
+	const $ = c(36);
+	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, options, className, value, defaultValue, onValueChange, onBlur, name, disabled, readOnly } = t0;
+	const ids = RadioGroup.useIds();
+	const t1 = value !== void 0 && value !== null && value !== "";
+	let t2;
+	if ($[0] !== label || $[1] !== optionalLabel || $[2] !== requiredness) {
+		t2 = /* @__PURE__ */ jsx(RadioGroup.Legend, {
+			requiredness,
+			optionalLabel,
+			children: label
+		});
+		$[0] = label;
+		$[1] = optionalLabel;
+		$[2] = requiredness;
+		$[3] = t2;
+	} else t2 = $[3];
+	const t3 = name ?? ids.controlId;
+	const t4 = ids.controlId;
+	const t5 = requiredness === "required";
+	let t6;
+	if ($[4] !== options) {
+		t6 = options.map(_temp);
+		$[4] = options;
+		$[5] = t6;
+	} else t6 = $[5];
+	let t7;
+	if ($[6] !== defaultValue || $[7] !== disabled || $[8] !== ids.controlId || $[9] !== onBlur || $[10] !== onValueChange || $[11] !== readOnly || $[12] !== t3 || $[13] !== t5 || $[14] !== t6 || $[15] !== value) {
+		t7 = /* @__PURE__ */ jsx(RadioGroup.Group, {
+			value,
+			defaultValue,
+			onValueChange,
+			onBlur,
+			name: t3,
+			inputRef: detachHiddenInput,
+			id: t4,
+			disabled,
+			readOnly,
+			required: t5,
+			children: t6
+		});
+		$[6] = defaultValue;
+		$[7] = disabled;
+		$[8] = ids.controlId;
+		$[9] = onBlur;
+		$[10] = onValueChange;
+		$[11] = readOnly;
+		$[12] = t3;
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = value;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== description) {
+		t8 = /* @__PURE__ */ jsx(RadioGroup.Description, { children: description });
+		$[17] = description;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== errors) {
+		t9 = /* @__PURE__ */ jsx(RadioGroup.Error, { children: errors });
+		$[19] = errors;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== className || $[22] !== dirty || $[23] !== disabled || $[24] !== errors || $[25] !== name || $[26] !== pending || $[27] !== readOnly || $[28] !== requiredness || $[29] !== t1 || $[30] !== t2 || $[31] !== t7 || $[32] !== t8 || $[33] !== t9 || $[34] !== touched) {
+		t10 = /* @__PURE__ */ jsxs(RadioGroup.Root, {
+			name,
+			className,
+			disabled,
+			readOnly,
+			errors,
+			requiredness,
+			dirty,
+			touched,
+			pending,
+			filled: t1,
+			children: [
+				t2,
+				t7,
+				t8,
+				t9
+			]
+		});
+		$[21] = className;
+		$[22] = dirty;
+		$[23] = disabled;
+		$[24] = errors;
+		$[25] = name;
+		$[26] = pending;
+		$[27] = readOnly;
+		$[28] = requiredness;
+		$[29] = t1;
+		$[30] = t2;
+		$[31] = t7;
+		$[32] = t8;
+		$[33] = t9;
+		$[34] = touched;
+		$[35] = t10;
+	} else t10 = $[35];
+	return t10;
+};
+function _temp(option) {
+	return /* @__PURE__ */ jsxs(RadioGroup.Item, {
+		disabled: option.disabled,
+		children: [/* @__PURE__ */ jsx(RadioGroup.Radio, { value: option.value }), option.label]
+	}, option.value);
+}
+export { RadioGroupField };