@povio/ui 2.2.3 → 2.2.5

package/dist/components/Menu/Menu.d.ts

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react';
+import { Placement } from 'react-aria';
 import { Key, MenuItemProps } from 'react-aria-components';
 import { MenuCvaVariantProps, MenuItemVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps } from './menu.cva';
 export interface MenuItem extends Omit<MenuItemProps, "aria-label" | "textValue" | "children">, MenuItemVariantProps, MenuCvaVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps {
@@ -10,6 +11,7 @@ export interface MenuProps {
     trigger: ReactElement;
     items: MenuItem[];
     closeDelay?: number;
+    placement?: Placement;
     onAction?: (key: Key, e: any) => void;
 }
 export declare const Menu: (props: MenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/DateTime/DatePicker/DatePicker.d.ts

@@ -15,6 +15,7 @@ interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Da
     isDirty?: boolean;
     disableManualEntry?: boolean;
     placeholder?: string;
+    inputClassName?: string;
 }
 export interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
     value?: string | null;

package/dist/components/inputs/DateTime/DatePicker/DatePicker.js

@@ -17,7 +17,7 @@ import { DateTime } from "luxon";
 import { useCalendarState, useDatePickerState } from "react-stately";
 var DatePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, placeholder, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -126,7 +126,8 @@ var DatePickerBase = (props) => {
 				headerProps,
 				todayIcon,
 				onOpenDropdown: () => state.toggle(),
-				placeholder
+				placeholder,
+				className: inputClassName
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts

@@ -17,6 +17,7 @@ interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Om
     isDirty?: boolean;
     disableManualEntry?: boolean;
     placeholder?: string;
+    inputClassName?: string;
 }
 export interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
     value?: {

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js

@@ -22,7 +22,7 @@ import { useTranslation } from "react-i18next";
 var DateRangePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const { t } = useTranslation();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, hideSidebar, placeholder, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
 	const [validationRangeError, setValidationRangeError] = useState();
 	const datePickerInputRef = useRef(null);
 	const dateRangePickerRef = useMemo(() => ({ get current() {
@@ -477,6 +477,7 @@ var DateRangePickerBase = (props) => {
 				isDirty,
 				disableManualEntry,
 				placeholder,
+				className: inputClassName,
 				onOpenDropdown: () => state.toggle()
 			}), /* @__PURE__ */ jsx(DateTimeDialog, {
 				hideSidebar,

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.d.ts

@@ -15,6 +15,7 @@ interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omi
     isDirty?: boolean;
     disableManualEntry?: boolean;
     placeholder?: string;
+    inputClassName?: string;
 }
 export interface DateTimePickerProps extends Omit<DateTimePickerBaseProps, "value" | "onChange"> {
     value?: string | null;

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js

@@ -15,7 +15,7 @@ import { Time, createCalendar, getLocalTimeZone, now, toCalendarDateTime, today
 import { useCalendarState, useDatePickerState } from "react-stately";
 var DateTimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, isTimeOptional, placeholder, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -147,7 +147,8 @@ var DateTimePickerBase = (props) => {
 				isRequired,
 				disableManualEntry,
 				placeholder,
-				onOpenDropdown: () => state.toggle()
+				onOpenDropdown: () => state.toggle(),
+				className: inputClassName
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,

package/dist/components/inputs/DateTime/shared/DatePickerInput.d.ts

@@ -23,7 +23,8 @@ interface DatePickerInputProps extends InputVariantProps {
     isRequired?: boolean;
     disableManualEntry?: boolean;
     placeholder?: string;
+    className?: string;
     onOpenDropdown?: () => void;
 }
-export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, onOpenDropdown, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/DateTime/shared/DatePickerInput.js

@@ -15,7 +15,7 @@ import { useCallback, useImperativeHandle, useRef, useState } from "react";
 import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
-const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, onOpenDropdown, ...props }) => {
+const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, ...props }) => {
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const [canClear, setCanClear] = useState(false);
@@ -65,12 +65,11 @@ const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, butto
 	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
 	return /* @__PURE__ */ jsxs("div", {
 		ref: containerRef,
-		className: inputBaseCva({
+		className: clsx(inputBaseCva({
 			variant,
 			as,
-			...props,
-			className: clsx("group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2")
-		}),
+			...props
+		}), "group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2", className),
 		"data-rac": "",
 		"data-datetime-input": "",
 		"data-hovered": isHovered || void 0,

package/dist/components/inputs/DateTime/shared/DateTimeDialog.js

@@ -1,10 +1,14 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { BottomSheet } from "../../../overlays/BottomSheet/BottomSheet.js";
 import { useBreakpoint } from "../../../../hooks/useBreakpoint.js";
 import { FormFieldHeader } from "../../FormField/FormFieldHeader.js";
 import { FormFieldHeaderClose } from "../../FormField/FormFieldHeaderClose.js";
+import { popover } from "../../../shared/popover.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
 import { Dialog, Popover } from "react-aria-components";
 const DateTimeDialog = ({ hideSidebar, children, footer, sidebar, label, isOpen, triggerRef, dialogProps, onOpenChange }) => {
+	const popoverCva = UIStyle.useCva("popover.cva", popover);
 	if (useBreakpoint("md")) {
 		if (!isOpen) return null;
 		return /* @__PURE__ */ jsx(Popover, {
@@ -17,7 +21,7 @@ const DateTimeDialog = ({ hideSidebar, children, footer, sidebar, label, isOpen,
 				className: "outline-none!",
 				"aria-label": label,
 				children: /* @__PURE__ */ jsxs("div", {
-					className: "flex overflow-hidden rounded-input-rounding-default border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1 shadow-5",
+					className: clsx$1(popoverCva({}), "flex overflow-hidden"),
 					children: [!hideSidebar && sidebar, /* @__PURE__ */ jsxs("div", {
 						className: "flex flex-1 flex-col justify-between",
 						children: [children, footer]
@@ -38,7 +42,7 @@ const DateTimeDialog = ({ hideSidebar, children, footer, sidebar, label, isOpen,
 		children: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(FormFieldHeader, {
 				label,
-				className: "mb-8! shrink-0 px-4 pt-3",
+				className: "mb-list-height-title-bottom! shrink-0 px-4 pt-3",
 				rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close })
 			}),
 			children,

package/dist/components/inputs/File/shared/fileUpload.cva.js

@@ -1,6 +1,6 @@
 import { clsx } from "clsx";
 import { cva } from "class-variance-authority";
-const fileUploadDropZoneBase = cva(["relative w-full rounded-input-rounding-default"], {
+const fileUploadDropZoneBase = cva(["relative w-full rounded-file-upload-container-rounding-default"], {
 	variants: {
 		variant: {
 			vertical: ["flex-col justify-center"],

package/dist/components/inputs/Selection/shared/SelectDesktop.js

@@ -1,3 +1,5 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { popover } from "../../../shared/popover.cva.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { SelectAllItemId } from "./useSelectItems.js";
@@ -12,6 +14,7 @@ import { useLabel, usePreventScroll } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
 	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, isLoading, as, size, collapseAfter, selectedTagsType } = props;
+	const popoverCva = UIStyle.useCva("popover.cva", popover);
 	const formFieldProps = {
 		error,
 		label,
@@ -148,7 +151,7 @@ const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, i
 					offset: 0,
 					children: /* @__PURE__ */ jsx(SelectListBox, {
 						...props,
-						className: "max-h-80! rounded-list-rounding-dropdown border border-elevation-outline-default-1 bg-elevation-fill-default-1 shadow-5 [scrollbar-width:thin]",
+						className: clsx(popoverCva({}), "max-h-80! [scrollbar-width:thin]"),
 						autoFocus: !isSearchable
 					})
 				})]

package/dist/components/inputs/TextEditor/Toolbar/ColorPickerDropdown.js

@@ -1,6 +1,8 @@
 import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { useInputCva } from "../../shared/input.cva.js";
+import { popover } from "../../../shared/popover.cva.js";
 import { ColorPicker } from "./ColorPicker.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -8,6 +10,7 @@ import { useState } from "react";
 import { Button, Dialog, DialogTrigger, Popover } from "react-aria-components";
 const ColorPickerDropdown = ({ colors, value, onChange, isDisabled, children }) => {
 	const inputCva = useInputCva();
+	const popoverCva = UIStyle.useCva("popover.cva", popover);
 	const [isOpen, setIsOpen] = useState(false);
 	const handleChange = (color) => {
 		onChange(color);
@@ -37,7 +40,7 @@ const ColorPickerDropdown = ({ colors, value, onChange, isDisabled, children })
 			children: /* @__PURE__ */ jsx(Dialog, {
 				className: "outline-none",
 				children: /* @__PURE__ */ jsx("div", {
-					className: clsx("flex justify-center overflow-hidden p-2 shadow-5 outline-none", "rounded-input-rounding-default border border-elevation-outline-default-1 bg-elevation-fill-default-1"),
+					className: clsx(popoverCva({}), "flex justify-center overflow-hidden p-2"),
 					children: /* @__PURE__ */ jsx(ColorPicker, {
 						colors,
 						value,

package/dist/components/overlays/BottomSheet/BottomSheet.d.ts

@@ -13,6 +13,10 @@ interface BottomSheetBaseProps {
     footer?: ReactNode;
     sheetMarginTop?: number;
     sheetMarginBottom?: number;
+    /** Min downward drag distance (px) to allow close on release. Increase to require a longer drag. */
+    closeDragThreshold?: number;
+    /** Min downward velocity to close on flick. Increase to require a more intentional swipe. */
+    closeVelocityThreshold?: number;
     shouldCloseOnInteractOutside?: () => boolean;
     containerClassName?: string;
 }

package/dist/components/overlays/BottomSheet/BottomSheet.js

@@ -1,10 +1,12 @@
-import { motion, react_exports } from "../../../node_modules/.pnpm/motion@12.23.28_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/motion/dist/es/react.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { useStateAndRef } from "../../../hooks/useStateAndRef.js";
 import { DomUtils } from "../../../utils/dom.utils.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
 import { useResizeObserver, useViewportSize } from "@react-aria/utils";
+import { AnimatePresence, animate, motion, useMotionValue } from "motion/react";
 var MotionModal = motion.create(Modal);
 var MotionModalOverlay = motion.create(ModalOverlay);
 var inertiaTransition = {
@@ -22,7 +24,10 @@ var staticTransition = {
 		1
 	]
 };
-var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = false, isScrollable = true, height = "full", label, portalContainerRef, children, footer, sheetMarginTop = 96, sheetMarginBottom = 128, shouldCloseOnInteractOutside, containerClassName }) => {
+var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = false, isScrollable = true, height = "full", label, portalContainerRef, children, footer, sheetMarginTop = 96, sheetMarginBottom = 128, closeDragThreshold: closeDragThresholdProp, closeVelocityThreshold: closeVelocityThresholdProp, shouldCloseOnInteractOutside, containerClassName }) => {
+	const uiConfig = UIConfig.useConfig();
+	const closeDragThreshold = closeDragThresholdProp ?? uiConfig.bottomSheet.closeDragThreshold;
+	const closeVelocityThreshold = closeVelocityThresholdProp ?? uiConfig.bottomSheet.closeVelocityThreshold;
 	const viewport = useViewportSize();
 	const { sheetHeight, windowHeight } = useMemo(() => {
 		return {
@@ -30,20 +35,26 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 			windowHeight: Math.max(window.innerHeight, viewport.height) - sheetMarginTop
 		};
 	}, [viewport.height, sheetMarginTop]);
-	const y = (0, react_exports.useMotionValue)(sheetHeight);
+	const y = useMotionValue(sheetHeight);
 	const closeVelocityRef = useRef(true);
 	const overlayRef = useRef(null);
 	const containerRef = useRef(null);
 	const dialogRef = useRef(null);
-	const footerRef = useRef(null);
 	const focusTrapRef = useRef(null);
+	const [footerElement, footerRef, setFooterElement] = useStateAndRef(null);
 	const [footerHeight, setFooterHeight] = useState(0);
-	useResizeObserver({
-		ref: footerRef,
-		onResize: () => {
-			setFooterHeight(footerRef.current?.offsetHeight || 0);
-		}
-	});
+	useEffect(() => {
+		if (!footerElement) return;
+		const onResize = () => {
+			setFooterHeight(footerElement.offsetHeight || 0);
+		};
+		onResize();
+		const observer = new ResizeObserver(onResize);
+		observer.observe(footerElement);
+		return () => {
+			observer.disconnect();
+		};
+	}, [footerElement]);
 	const oldHeightRef = useRef(0);
 	useResizeObserver({
 		ref: dialogRef,
@@ -53,11 +64,11 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 			oldHeightRef.current = rect.height;
 			if (y.get() < 0) {
 				y.stop();
-				(0, react_exports.animate)(y, 0);
+				animate(y, 0);
 			}
 		}
 	});
-	return /* @__PURE__ */ jsx(react_exports.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(MotionModalOverlay, {
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(MotionModalOverlay, {
 		isOpen: true,
 		UNSTABLE_portalContainer: portalContainerRef?.current,
 		className: clsx("fixed top-0 left-0 z-10 w-screen", containerClassName),
@@ -118,12 +129,16 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 			},
 			onDragEnd: (e, { velocity }) => {
 				containerRef.current?.style.removeProperty("pointer-events");
-				if (y.get() > 0) if (closeVelocityRef.current && velocity.y > 10 || y.get() > 200) onOpenChange?.(false);
-				else (0, react_exports.animate)(y, 0, {
-					...inertiaTransition,
-					min: 0,
-					max: 0
-				});
+				const yValue = y.get();
+				if (yValue > 0) {
+					const dragPastThreshold = yValue > closeDragThreshold;
+					if (closeVelocityRef.current && velocity.y > closeVelocityThreshold || dragPastThreshold) onOpenChange?.(false);
+					else animate(y, 0, {
+						...inertiaTransition,
+						min: 0,
+						max: 0
+					});
+				}
 			},
 			children: /* @__PURE__ */ jsx(Dialog, {
 				className: "relative flex min-h-0 flex-1 flex-col items-stretch outline-none",
@@ -155,7 +170,10 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 						]
 					}),
 					footer && /* @__PURE__ */ jsx(motion.div, {
-						ref: footerRef,
+						animate: { opacity: 1 },
+						initial: { opacity: 0 },
+						exit: { opacity: 0 },
+						ref: setFooterElement,
 						className: clsx("pointer-events-auto absolute z-50 w-full bg-elevation-fill-default-2", "top-(--visual-viewport-height) left-0 translate-y-[calc(-100%-var(--scroll-position,0px))]"),
 						children: footer
 					})

package/dist/components/overlays/ResponsivePopover/ResponsivePopover.js

@@ -1,11 +1,14 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
 import { BottomSheet } from "../BottomSheet/BottomSheet.js";
 import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
 import { FormFieldHeader } from "../../inputs/FormField/FormFieldHeader.js";
 import { FormFieldHeaderClose } from "../../inputs/FormField/FormFieldHeaderClose.js";
+import { popover } from "../../shared/popover.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, DialogTrigger, Popover } from "react-aria-components";
 const ResponsivePopover = ({ trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel }) => {
+	const popoverCva = UIStyle.useCva("popover.cva", popover);
 	if (!useBreakpoint("md")) return /* @__PURE__ */ jsx(BottomSheet, {
 		isOpen,
 		onOpenChange,
@@ -31,7 +34,7 @@ const ResponsivePopover = ({ trigger, isOpen, onOpenChange, children, popoverCla
 			children: /* @__PURE__ */ jsx(Dialog, {
 				className: "outline-none",
 				children: /* @__PURE__ */ jsx("div", {
-					className: clsx("overflow-hidden p-2 shadow-5 outline-none", "rounded-s border border-elevation-outline-default-1 bg-elevation-fill-default-1"),
+					className: clsx(popoverCva({}), "overflow-hidden p-2"),
 					children
 				})
 			})

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

@@ -0,0 +1,4 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const popover: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export interface PopoverVariantProps extends VariantProps<typeof popover> {
+}

package/dist/components/shared/popover.cva.js

@@ -0,0 +1,3 @@
+import { cva } from "class-variance-authority";
+const popover = cva("rounded-list-rounding-dropdown border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1 shadow-5 outline-none");
+export { popover };

package/dist/config/uiConfig.context.d.ts

@@ -9,6 +9,7 @@ import { SelectBaseProps } from '../components/inputs/Selection/shared/SelectBas
 import { SliderProps } from '../components/inputs/Slider/Slider';
 import { ToggleProps } from '../components/inputs/Toggle/Toggle';
 import { ActionModalProps } from '../components/overlays/ActionModal/ActionModal';
+import { BottomSheetProps } from '../components/overlays/BottomSheet/BottomSheet';
 export declare namespace UIConfig {
     type DeepRequired<T> = {
         [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
@@ -24,6 +25,7 @@ export declare namespace UIConfig {
         slider: Pick<SliderProps, "minValue" | "maxValue">;
         dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros" | "disableManualEntry">;
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
+        bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold">;
     }
     interface ProviderProps {
         config?: Partial<Options>;

package/dist/config/uiConfig.context.js

@@ -47,6 +47,10 @@ let UIConfig;
 				variant: "prominent-1"
 			},
 			descriptionTypography: { size: "body-3" }
+		},
+		bottomSheet: {
+			closeDragThreshold: 100,
+			closeVelocityThreshold: 200
 		}
 	};
 	const Context = createContext(DEFAULT_CONFIG);

package/dist/config/uiStyle.context.d.ts

@@ -14,6 +14,7 @@ import { StepperIconVariantProps, StepperItemVariantProps, StepperNumberVariantP
 import { ModalVariantProps } from '../components/overlays/Modal/modal.cva';
 import { TooltipPointerHorizontalVariantProps, TooltipPointerVerticalVariantProps, TooltipTextVariantProps, TooltipVariantProps } from '../components/overlays/Tooltip/tooltip.cva';
 import { SegmentItemVariantProps, SegmentVariantProps } from '../components/segment/segment.cva';
+import { PopoverVariantProps } from '../components/shared/popover.cva';
 import { AlertVariantProps } from '../components/status/Alert/alert.cva';
 import { ToastVariantProps } from '../components/status/Toast/toast.cva';
 import { TableDataVariantProps, TableHeadDataVariantProps, TableHeadRowVariantProps, TableRowVariantProps } from '../components/table/table.cva';
@@ -135,6 +136,9 @@ export declare namespace UIStyle {
             chevronCva?: Cva<BreadcrumbChevronVariantProps>;
             iconCva?: Cva<BreadcrumbIconVariantProps>;
         };
+        popover: {
+            cva?: Cva<PopoverVariantProps>;
+        };
     }
     interface ProviderProps {
         config?: Partial<Options>;

package/dist/index.js

@@ -55,6 +55,7 @@ import { Button } from "./components/buttons/Button/Button.js";
 import { IconButton } from "./components/buttons/IconButton/IconButton.js";
 import { InlineIconButton } from "./components/buttons/InlineIconButton/InlineIconButton.js";
 import { PillButton } from "./components/buttons/PillButton/PillButton.js";
+import { useStateAndRef } from "./hooks/useStateAndRef.js";
 import { DomUtils } from "./utils/dom.utils.js";
 import { BottomSheet } from "./components/overlays/BottomSheet/BottomSheet.js";
 import { useBreakpoint } from "./hooks/useBreakpoint.js";
@@ -130,7 +131,6 @@ import { useForm } from "./hooks/useForm.js";
 import { useFormAutosave } from "./hooks/useFormAutosave.js";
 import { usePagination } from "./hooks/usePagination.js";
 import { useSorting } from "./hooks/useSorting.js";
-import { useStateAndRef } from "./hooks/useStateAndRef.js";
 import { useTableColumnConfig } from "./hooks/useTableColumnConfig.js";
 import { ArrayUtils } from "./utils/array.utils.js";
 import { QueriesUtils } from "./utils/queries.utils.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.2.3",
+  "version": "2.2.5",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,24 +15,6 @@
   ],
   "homepage": "https://povio.com",
   "license": "UNLICENSED",
-  "peerDependencies": {
-    "@casl/ability": "^6.7.3",
-    "@casl/react": "^5.0.0",
-    "@tiptap/core": "^3.19.0",
-    "@tiptap/extension-color": "^3.19.0",
-    "@tiptap/extension-heading": "^3.19.0",
-    "@tiptap/extension-highlight": "^3.19.0",
-    "@tiptap/extension-link": "^3.19.0",
-    "@tiptap/extension-placeholder": "^3.19.0",
-    "@tiptap/extension-text-align": "^3.19.0",
-    "@tiptap/extension-text-style": "^3.19.0",
-    "@tiptap/extension-underline": "^3.19.0",
-    "@tiptap/pm": "^3.19.0",
-    "@tiptap/react": "^3.19.0",
-    "@tiptap/starter-kit": "^3.19.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
-  },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
@@ -68,5 +50,61 @@
     "tailwindcss": "^4.1.18",
     "tailwindcss-react-aria-components": "^2.0.1",
     "zod": "^4.3.5"
+  },
+  "peerDependencies": {
+    "@casl/ability": "^6.7.3",
+    "@casl/react": "^5.0.0",
+    "@tiptap/core": "^3.19.0",
+    "@tiptap/extension-color": "^3.19.0",
+    "@tiptap/extension-heading": "^3.19.0",
+    "@tiptap/extension-highlight": "^3.19.0",
+    "@tiptap/extension-link": "^3.19.0",
+    "@tiptap/extension-placeholder": "^3.19.0",
+    "@tiptap/extension-text-align": "^3.19.0",
+    "@tiptap/extension-text-style": "^3.19.0",
+    "@tiptap/extension-underline": "^3.19.0",
+    "@tiptap/pm": "^3.19.0",
+    "@tiptap/react": "^3.19.0",
+    "@tiptap/starter-kit": "^3.19.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@tiptap/core": {
+      "optional": true
+    },
+    "@tiptap/extension-color": {
+      "optional": true
+    },
+    "@tiptap/extension-heading": {
+      "optional": true
+    },
+    "@tiptap/extension-highlight": {
+      "optional": true
+    },
+    "@tiptap/extension-link": {
+      "optional": true
+    },
+    "@tiptap/extension-placeholder": {
+      "optional": true
+    },
+    "@tiptap/extension-text-align": {
+      "optional": true
+    },
+    "@tiptap/extension-text-style": {
+      "optional": true
+    },
+    "@tiptap/extension-underline": {
+      "optional": true
+    },
+    "@tiptap/pm": {
+      "optional": true
+    },
+    "@tiptap/react": {
+      "optional": true
+    },
+    "@tiptap/starter-kit": {
+      "optional": true
+    }
   }
 }

package/dist/_virtual/rolldown:runtime.js

@@ -1,31 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (all, symbols) => {
-	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
-	if (symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
-	return target;
-};
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __reExport = (target, mod, secondTarget, symbols) => {
-	if (symbols) {
-		__defProp(target, Symbol.toStringTag, { value: "Module" });
-		secondTarget && __defProp(secondTarget, Symbol.toStringTag, { value: "Module" });
-	}
-	__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default");
-};
-export { __export, __reExport };

package/dist/node_modules/.pnpm/motion@12.23.28_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/motion/dist/es/react.js

@@ -1,10 +0,0 @@
-import { __export, __reExport } from "../../../../../../../_virtual/rolldown:runtime.js";
-import { m, motion } from "framer-motion";
-export * from "framer-motion";
-var react_exports = /* @__PURE__ */ __export({
-	m: () => m,
-	motion: () => motion
-}, 1);
-import * as import_framer_motion from "framer-motion";
-__reExport(react_exports, import_framer_motion, void 0, 1);
-export { motion, react_exports };