@povio/ui 3.4.0-rc.9 → 4.0.0-rc.2

package/dist/NumberRangeInput-xjkniTH0.js

@@ -0,0 +1,428 @@
+import { t as UIConfig } from "./uiConfig.context-BvBsrMFI.js";
+import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { n as $41fb335299a4a39e$export$f5b8910cec6cf069 } from "./Input-BmIahisJ.js";
+import { a as $a3be900807531178$re_export$useLocale } from "./exports-DUKqxyno.js";
+import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
+import { n as $3d0ee518c6f3d04f$export$7f629e9dc1ecf37c, r as $cd2fa56213693c5e$export$23f548e970bdf099, t as getStaticNumberDisplayValue } from "./numberStatic.utils-DAI7Bef3.js";
+import { r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "./import-DDGNxVX8.js";
+import { t as FieldController } from "./form.binding-DLM7NA2s.js";
+import { r as FormFieldLabel, t as FormField } from "./FormField-BHPdCLEV.js";
+import { a as inputSizeDefinition, t as inputBaseDefinition } from "./input.cva-KYGD4Bdz.js";
+import { n as InputClear, t as TooltipWrapper } from "./TooltipWrapper-DYfZF2Ly.js";
+import { i as InputFrame, n as useStaticInputHandoff, t as getStaticInputFocusTarget } from "./useStaticInputHandoff-Denoy4V_.js";
+import { t as IntlUtils } from "./intl.utils-zwAFoZ0U.js";
+import { memo, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useFocusVisible, useFocusWithin, useHover } from "@react-aria/interactions";
+//#region src/components/inputs/Input/NumberRangeInput/NumberRangeField.tsx
+const NumberRangeValueField = ({ label, value, placeholder, isDisabled, isInvalid, isRequired, formatOptions, hideInnerLabels, autoFocusOnMount, isClearable, isClearableIfDisabled, className, onChange, onClear, onBlur, ...rest }) => {
+	const ui = UIConfig.useConfig();
+	const { locale } = $a3be900807531178$re_export$useLocale();
+	const { isFocusVisible } = useFocusVisible();
+	const inputRef = useRef(null);
+	const numberFieldRef = useRef(null);
+	useEffect(() => {
+		if (!autoFocusOnMount || isDisabled) return;
+		requestAnimationFrame(() => inputRef.current?.focus());
+	}, [autoFocusOnMount, isDisabled]);
+	const numberProps = {
+		...rest,
+		label,
+		value: value ?? NaN,
+		placeholder,
+		isDisabled,
+		isInvalid,
+		isRequired,
+		onChange,
+		onBlur: (e) => onBlur?.({ target: e.target }),
+		locale,
+		formatOptions: formatOptions ?? ui.numberField.formatOptions
+	};
+	const state = $3d0ee518c6f3d04f$export$7f629e9dc1ecf37c(numberProps);
+	const { labelProps, inputProps } = $cd2fa56213693c5e$export$23f548e970bdf099(numberProps, state, numberFieldRef);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0 flex-1",
+		children: [/* @__PURE__ */ jsx(FormFieldLabel, {
+			label,
+			labelProps,
+			isRequired,
+			isDisabled,
+			className: clsx(hideInnerLabels && "sr-only")
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-input-gap-trailing-elements",
+			children: [/* @__PURE__ */ jsx($41fb335299a4a39e$export$f5b8910cec6cf069, {
+				...inputProps,
+				ref: $a8ea2faf2ebe4d2f$re_export$mergeRefs(inputRef, numberFieldRef),
+				placeholder: inputProps.placeholder,
+				className: clsx("w-full min-w-0 bg-transparent outline-none", className),
+				onFocus: (e) => {
+					inputProps.onFocus?.(e);
+					if (isFocusVisible) e.target.select();
+				}
+			}), isClearable && (!isDisabled || isClearableIfDisabled === true) && /* @__PURE__ */ jsx(InputClear, {
+				onClear,
+				show: value !== null
+			})]
+		})]
+	});
+};
+const NumberRangeField = ({ ref, as, className, inputClassName, minInputClassName, maxInputClassName, inputBaseClassName, inputSizeClassName, formFieldProps, headerProps, rangeValue, effectiveError, minPlaceholder, maxPlaceholder, minLabel, maxLabel, hideInnerLabels, isDirty, isClearable, isClearableIfDisabled, autoFocusOnMount, isDisabled, isRequired, isEmpty, isHovered, isFocused, isFocusVisible, focusWithinProps, hoverProps, onRangeSideChange, onRangeSideClear, onBlur, onValueCommit, ...numberFieldProps }) => /* @__PURE__ */ jsx(TooltipWrapper, {
+	as,
+	error: effectiveError,
+	triggerTabIndex: as === "inline" ? -1 : void 0,
+	children: /* @__PURE__ */ jsx(FormField, {
+		...formFieldProps,
+		ref,
+		as,
+		className: clsx("group w-full", className),
+		tabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsx("div", {
+			className: clsx(inputBaseClassName, "group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2", inputClassName),
+			"data-rac": "",
+			"data-hovered": isHovered || void 0,
+			"data-disabled": isDisabled || void 0,
+			"data-is-disabled": isDisabled || void 0,
+			"data-invalid": !!effectiveError || void 0,
+			"data-is-empty": isEmpty || void 0,
+			"data-focus-within": isFocused || void 0,
+			"data-focus-visible": isFocused && isFocusVisible || void 0,
+			"data-has-selection": !isEmpty || void 0,
+			"data-is-dirty": isDirty || void 0,
+			"data-is-required": isRequired || void 0,
+			"data-is-filled": !isEmpty || void 0,
+			...focusWithinProps,
+			...hoverProps,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: clsx("flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", inputSizeClassName),
+				children: [
+					as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+						as,
+						...headerProps
+					}),
+					/* @__PURE__ */ jsx(NumberRangeValueField, {
+						...numberFieldProps,
+						label: minLabel,
+						placeholder: minPlaceholder,
+						value: rangeValue.min,
+						onChange: (nextValue) => {
+							onRangeSideChange("min", nextValue);
+						},
+						onBlur,
+						isDisabled,
+						isInvalid: !!effectiveError,
+						isRequired,
+						hideInnerLabels,
+						autoFocusOnMount,
+						isClearable,
+						isClearableIfDisabled,
+						onClear: () => {
+							onRangeSideClear("min");
+							onValueCommit?.();
+						},
+						className: minInputClassName
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: clsx("pointer-events-none shrink-0 select-none text-label-2 text-text-default-3", isDisabled && "text-interactive-text-secondary-disabled"),
+						children: "-"
+					}),
+					/* @__PURE__ */ jsx(NumberRangeValueField, {
+						...numberFieldProps,
+						label: maxLabel,
+						placeholder: maxPlaceholder,
+						value: rangeValue.max,
+						onChange: (nextValue) => {
+							onRangeSideChange("max", nextValue);
+						},
+						onBlur,
+						isDisabled,
+						isInvalid: !!effectiveError,
+						isRequired,
+						hideInnerLabels,
+						isClearable,
+						isClearableIfDisabled,
+						onClear: () => {
+							onRangeSideClear("max");
+							onValueCommit?.();
+						},
+						className: maxInputClassName
+					})
+				]
+			})
+		})
+	})
+});
+//#endregion
+//#region src/components/inputs/Input/NumberRangeInput/NumberRangeInput.tsx
+const EMPTY_RANGE = {
+	min: null,
+	max: null
+};
+const normalizeRangeValue = (value, minValue, maxValue) => {
+	if (value) return value;
+	return {
+		min: minValue ?? null,
+		max: maxValue ?? null
+	};
+};
+const NumberRangeInputBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, inputClassName, minInputClassName, maxInputClassName, value, minValue, maxValue, minPlaceholder = "Min", maxPlaceholder = "Max", minLabel = "Minimum", maxLabel = "Maximum", invalidRangeError = "Minimum cannot be greater than maximum", hideInnerLabels = true, isDirty, autoFocusOnMount, onChange, onMinChange, onMaxChange, onBlur, onValueCommit, isClearable: isClearableProps, isClearableIfDisabled, as: asProp, variant: variantProps, size: sizeProps, hideLabel: hideLabelProps, ...rest } = props;
+	const isClearable = isClearableProps ?? ui.input.isClearable;
+	const as = asProp ?? ui.input.as;
+	const variant = variantProps ?? ui.input.variant;
+	const size = sizeProps ?? ui.input.size;
+	const hideLabel = hideLabelProps ?? ui.input.hideLabel;
+	const rangeValue = normalizeRangeValue(value, minValue, maxValue);
+	const isEmpty = rangeValue.min === null && rangeValue.max === null;
+	const rangeError = rangeValue.min !== null && rangeValue.max !== null && rangeValue.min > rangeValue.max ? invalidRangeError : void 0;
+	const effectiveError = error || rangeError;
+	const { hoverProps, isHovered } = useHover({ isDisabled });
+	const { isFocusVisible } = useFocusVisible();
+	const [isFocused, setIsFocused] = useState(false);
+	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
+	const formFieldProps = {
+		error: effectiveError,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName
+	};
+	const updateRange = (side, nextValue) => {
+		const nextRange = {
+			...rangeValue,
+			[side]: nextValue
+		};
+		onChange?.(nextRange);
+		if (side === "min") onMinChange?.(nextValue);
+		else onMaxChange?.(nextValue);
+	};
+	const clearRangeSide = (side) => {
+		updateRange(side, null);
+		onBlur?.({ target: { value: "" } });
+	};
+	return /* @__PURE__ */ jsx(NumberRangeField, {
+		...rest,
+		ref,
+		as,
+		className,
+		inputClassName,
+		minInputClassName,
+		maxInputClassName,
+		inputBaseClassName: inputBaseCva({
+			variant,
+			as
+		}),
+		inputSizeClassName: inputSizeCva({
+			size,
+			as
+		}),
+		formFieldProps,
+		headerProps,
+		rangeValue,
+		effectiveError,
+		minPlaceholder,
+		maxPlaceholder,
+		minLabel,
+		maxLabel,
+		hideInnerLabels,
+		isDirty,
+		isClearable,
+		isClearableIfDisabled,
+		autoFocusOnMount,
+		isDisabled,
+		isRequired,
+		isEmpty,
+		isHovered,
+		isFocused,
+		isFocusVisible,
+		focusWithinProps,
+		hoverProps,
+		onRangeSideChange: updateRange,
+		onRangeSideClear: clearRangeSide,
+		onBlur,
+		onValueCommit
+	});
+};
+const NumberRangeInputInner = ({ renderStaticInput, isFormControlDisabled, ...props }) => {
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
+	const ui = UIConfig.useConfig();
+	const { locale } = $a3be900807531178$re_export$useLocale();
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
+	const inputRef = useRef(null);
+	const { renderRealInput } = useStaticInputHandoff({
+		inputRef,
+		renderInput,
+		setRenderInput,
+		getFocusTarget: (container, staticTarget, fromEnd) => {
+			if (staticTarget instanceof HTMLInputElement) {
+				const side = staticTarget.dataset.rangeSide;
+				if (side) return container.querySelectorAll("input")[side === "max" ? 1 : 0];
+			}
+			return getStaticInputFocusTarget(container, fromEnd);
+		}
+	});
+	if (!renderInput) {
+		const staticValue = normalizeRangeValue(props.value, props.minValue, props.maxValue);
+		const formatOptions = props.formatOptions ?? ui.numberField.formatOptions;
+		const formatter = IntlUtils.getNumberFormatter(locale, formatOptions);
+		const minDisplay = getStaticNumberDisplayValue(staticValue.min, formatter);
+		const maxDisplay = getStaticNumberDisplayValue(staticValue.max, formatter);
+		const hasValue = minDisplay !== null || maxDisplay !== null;
+		const rangeError = staticValue.min !== null && staticValue.max !== null && staticValue.min > staticValue.max ? props.invalidRangeError ?? "Minimum cannot be greater than maximum" : void 0;
+		const effectiveError = props.error || rangeError;
+		const as = props.as ?? ui.input.as;
+		const size = props.size ?? ui.input.size;
+		let isDisabled = !!props.isDisabled;
+		if (isFormControlDisabled) isDisabled = true;
+		const isClearable = props.isClearable ?? ui.input.isClearable;
+		const dataAttributes = {
+			dataIsEmpty: !hasValue,
+			dataIsFilled: hasValue,
+			dataIsDirty: props.isDirty,
+			dataIsRequired: props.isRequired,
+			dataIsDisabled: isDisabled,
+			dataDisabled: isDisabled,
+			dataInvalid: !!effectiveError,
+			dataHasSelection: hasValue
+		};
+		return /* @__PURE__ */ jsx(InputFrame, {
+			...props,
+			error: effectiveError,
+			isDisabled,
+			className: clsx("group w-full", as === "inline" && "h-full", props.className),
+			inputClassName: props.inputClassName,
+			contentClassName: "pr-0!",
+			trailingClassName: "py-0! pl-0!",
+			contentWrapperClassName: clsx("flex w-full items-center gap-input-gap-input-text-to-elements pr-0! py-0! px-0!", inputSizeCva({
+				size,
+				as
+			})),
+			dataAttributes,
+			onStaticInteract: renderRealInput,
+			isClearable: false,
+			labelPlacement: "content-wrapper",
+			children: ({ id, ...dataAttributeProps }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx(FormFieldLabel, {
+						label: props.minLabel ?? "Minimum",
+						isRequired: props.isRequired,
+						isDisabled,
+						className: clsx((props.hideInnerLabels ?? true) && "sr-only")
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-input-gap-trailing-elements",
+						children: [/* @__PURE__ */ jsx("input", {
+							id,
+							"data-range-side": "min",
+							readOnly: true,
+							disabled: isDisabled,
+							tabIndex: -1,
+							value: minDisplay ?? "",
+							placeholder: props.minPlaceholder ?? "Min",
+							className: clsx("w-full min-w-0 bg-transparent outline-none", props.minInputClassName),
+							...dataAttributeProps,
+							"data-rac": true
+						}), isClearable && (!isDisabled || props.isClearableIfDisabled === true) && /* @__PURE__ */ jsx(InputClear, {
+							onClear: () => {
+								props.onChange?.({
+									...staticValue,
+									min: null
+								});
+								props.onValueCommit?.();
+							},
+							show: staticValue.min !== null,
+							renderStatic: true
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "pointer-events-none shrink-0 select-none text-label-2 text-text-default-3",
+					children: "-"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx(FormFieldLabel, {
+						label: props.maxLabel ?? "Maximum",
+						isRequired: props.isRequired,
+						isDisabled,
+						className: clsx((props.hideInnerLabels ?? true) && "sr-only")
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-input-gap-trailing-elements",
+						children: [/* @__PURE__ */ jsx("input", {
+							id: `${id}-max`,
+							"data-range-side": "max",
+							readOnly: true,
+							disabled: isDisabled,
+							tabIndex: -1,
+							value: maxDisplay ?? "",
+							placeholder: props.maxPlaceholder ?? "Max",
+							className: clsx("w-full min-w-0 bg-transparent outline-none", props.maxInputClassName),
+							...dataAttributeProps,
+							"data-rac": true
+						}), isClearable && (!isDisabled || props.isClearableIfDisabled === true) && /* @__PURE__ */ jsx(InputClear, {
+							onClear: () => {
+								props.onChange?.({
+									...staticValue,
+									max: null
+								});
+								props.onValueCommit?.();
+							},
+							show: staticValue.max !== null,
+							renderStatic: true
+						})]
+					})]
+				})
+			] })
+		});
+	}
+	return /* @__PURE__ */ jsx(NumberRangeInputBase, {
+		...props,
+		ref: $a8ea2faf2ebe4d2f$re_export$mergeRefs(props.ref, inputRef)
+	});
+};
+const NumberRangeInputComponent = ({ renderStaticInput, ...props }) => {
+	if ("field" in props && props.field) {
+		const { field, ...innerProps } = props;
+		const controlWithOptions = field.form;
+		return /* @__PURE__ */ jsx(FieldController, {
+			control: field.form,
+			name: field.name,
+			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(NumberRangeInputInner, {
+				...innerProps,
+				value: field.value ?? EMPTY_RANGE,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				onValueCommit: field.onBlur,
+				isDisabled: field.disabled || !!controlWithOptions._options?.disabled || props.isDisabled,
+				isFormControlDisabled: !!controlWithOptions._options?.disabled,
+				error: props.error ?? error?.message,
+				renderStaticInput
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(NumberRangeInputInner, {
+		...props,
+		renderStaticInput
+	});
+};
+const NumberRangeInput = memo(NumberRangeInputComponent);
+//#endregion
+export { NumberRangeInput as t };

package/dist/OverlayArrow-BRnQo6-8.js

@@ -0,0 +1,33 @@
+import { n as $7230ffa83bc0c2cf$export$29f1550f4b0d4415, r as $7230ffa83bc0c2cf$export$4d86445c2cf5e3, s as $7230ffa83bc0c2cf$export$df3a06d6289f983e } from "./utils-D3gCeElo.js";
+import $ahdqC$react, { createContext, forwardRef } from "react";
+import { filterDOMProps } from "react-aria/filterDOMProps";
+//#region ../../node_modules/.bun/react-aria-components@1.20.0+67f6792bdf102c28/node_modules/react-aria-components/dist/private/OverlayArrow.mjs
+const $4fcfe18fac72dabd$export$2de4954e8ae13b9f = /*#__PURE__*/ createContext({ placement: "bottom" });
+const $4fcfe18fac72dabd$export$746d02f47f4d381 = /*#__PURE__*/ forwardRef(function OverlayArrow(props, ref) {
+	[props, ref] = $7230ffa83bc0c2cf$export$29f1550f4b0d4415(props, ref, $4fcfe18fac72dabd$export$2de4954e8ae13b9f);
+	let placement = props.placement;
+	let style = {
+		position: "absolute",
+		transform: placement === "top" || placement === "bottom" ? "translateX(-50%)" : "translateY(-50%)"
+	};
+	if (placement != null) style[placement] = "100%";
+	let renderProps = $7230ffa83bc0c2cf$export$4d86445c2cf5e3({
+		...props,
+		defaultClassName: "react-aria-OverlayArrow",
+		values: { placement }
+	});
+	if (renderProps.style) Object.keys(renderProps.style).forEach((key) => renderProps.style[key] === void 0 && delete renderProps.style[key]);
+	let DOMProps = filterDOMProps(props);
+	return /*#__PURE__*/ $ahdqC$react.createElement($7230ffa83bc0c2cf$export$df3a06d6289f983e.div, {
+		...DOMProps,
+		...renderProps,
+		style: {
+			...style,
+			...renderProps.style
+		},
+		ref,
+		"data-placement": placement
+	});
+});
+//#endregion
+export { $4fcfe18fac72dabd$export$746d02f47f4d381 as n, $4fcfe18fac72dabd$export$2de4954e8ae13b9f as t };

package/dist/Pagination-CumQED8X.d.ts

@@ -0,0 +1,12 @@
+import { n as PaginationListProps } from "./PaginationList-D79ApWLm.js";
+//#region src/components/shared/pagination/Pagination.d.ts
+interface PaginationProps extends Omit<PaginationListProps, "totalPages"> {
+  totalItems: number;
+  pageSize: number;
+  totalPages?: number;
+  className?: string;
+  onPageSizeChange?: (pageSize: number) => void;
+}
+declare const Pagination: ({ size, variant, color, page, totalItems, totalPages, pageSize, hideText, hideFirstLast, hidePrevNext, hideNumbers, className, onPageChange, onPageSizeChange }: PaginationProps) => import("react").JSX.Element;
+//#endregion
+export { PaginationProps as n, Pagination as t };

package/dist/PaginationList-D79ApWLm.d.ts

@@ -0,0 +1,18 @@
+import { i as ButtonProps } from "./Button-DTNjsGx5.js";
+//#region src/components/shared/pagination/PaginationList.d.ts
+interface PaginationListProps {
+  page: number;
+  totalPages: number;
+  hideText?: boolean;
+  hideFirstLast?: boolean;
+  hidePrevNext?: boolean;
+  hideNumbers?: boolean;
+  size?: Exclude<ButtonProps["size"], "none">;
+  color?: ButtonProps["color"];
+  variant?: ButtonProps["variant"];
+  className?: string;
+  onPageChange?: (page: number) => void;
+}
+declare const PaginationList: ({ page, totalPages, size, color, variant, hideText, hideFirstLast, hidePrevNext, hideNumbers, className, onPageChange }: PaginationListProps) => import("react").JSX.Element | null;
+//#endregion
+export { PaginationListProps as n, PaginationList as t };