@povio/ui 2.1.27 → 2.1.29

package/dist/BottomSheet.js

@@ -1,4 +1,7 @@
 import { react_exports } from "./react.js";
+import { BottomSheetHeader } from "./BottomSheetHeader.js";
+import { UIConfig } from "./uiConfig.context.js";
+import { useStateAndRef } from "./useStateAndRef.js";
 import { DomUtils } from "./dom.utils.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -22,7 +25,12 @@ 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 = true, isScrollable = true, height = "full", label, portalContainerRef, children, footer, hideHeader, hideThumb: hideThumbProp, sheetMarginTop = 96, sheetMarginBottom = 128, closeDragThreshold: closeDragThresholdProp, closeVelocityThreshold: closeVelocityThresholdProp, shouldCloseOnInteractOutside, containerClassName, overlayClassName, headerTypography: headerTypographyProp }) => {
+	const uiConfig = UIConfig.useConfig();
+	const closeDragThreshold = closeDragThresholdProp ?? uiConfig.bottomSheet.closeDragThreshold;
+	const closeVelocityThreshold = closeVelocityThresholdProp ?? uiConfig.bottomSheet.closeVelocityThreshold;
+	const hideThumb = hideThumbProp ?? uiConfig.bottomSheet.hideThumb;
+	const headerTypography = headerTypographyProp ?? uiConfig.bottomSheet.headerTypography;
 	const viewport = useViewportSize();
 	const { sheetHeight, windowHeight } = useMemo(() => {
 		return {
@@ -31,19 +39,26 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 		};
 	}, [viewport.height, sheetMarginTop]);
 	const y = (0, react_exports.useMotionValue)(sheetHeight);
+	const dragControls = (0, react_exports.useDragControls)();
 	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,
@@ -67,12 +82,12 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 		ref: overlayRef,
 		shouldCloseOnInteractOutside,
 		children: [/* @__PURE__ */ jsx(react_exports.motion.div, {
-			className: "pointer-events-none absolute inset-0 bg-support-overlay",
+			className: clsx("pointer-events-none absolute inset-0 bg-support-overlay", overlayClassName),
 			animate: { opacity: 1 },
 			initial: { opacity: 0 },
 			exit: { opacity: 0 }
 		}), /* @__PURE__ */ jsx(MotionModal, {
-			isDismissable: true,
+			isDismissable,
 			className: clsx("pointer-events-none flex h-full w-full flex-col items-stretch justify-end outline-none will-change-transform"),
 			animate: {
 				y: 0,
@@ -98,6 +113,8 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 				minHeight: "100%"
 			},
 			drag: "y",
+			dragListener: false,
+			dragControls,
 			dragElastic: {
 				top: 0,
 				bottom: .5
@@ -118,12 +135,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 (0, react_exports.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",
@@ -142,10 +163,18 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 								ref: focusTrapRef,
 								tabIndex: -1
 							}),
-							/* @__PURE__ */ jsx("div", {
+							/* @__PURE__ */ jsxs("div", {
 								className: "flex max-h-full min-h-0 flex-col items-stretch",
 								ref: containerRef,
-								children: typeof children === "function" ? children(close) : children
+								children: [/* @__PURE__ */ jsx(BottomSheetHeader, {
+									label,
+									dragControls,
+									onClose: close,
+									isDismissable,
+									hideHeader,
+									hideThumb,
+									headerTypography
+								}), typeof children === "function" ? children(close) : children]
 							}),
 							/* @__PURE__ */ jsx("div", {
 								className: "shrink-0",
@@ -155,7 +184,10 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 						]
 					}),
 					footer && /* @__PURE__ */ jsx(react_exports.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/BottomSheetHeader.js

@@ -0,0 +1,36 @@
+import { CloseIcon } from "./Close.js";
+import { Typography } from "./Typography.js";
+import { ns } from "./i18n.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+const BottomSheetHeader = ({ label, dragControls, isDismissable, hideThumb, hideHeader, headerTypography, onClose }) => {
+	const { t } = useTranslation("ui");
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("pb-list-height-title-bottom", !isDismissable && "pt-list-height-title-top"),
+		children: [isDismissable && !hideThumb && /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 cursor-grab touch-none justify-center px-list-side-title pt-list-height-title-top pb-2-5",
+			onPointerDown: (e) => {
+				e.preventDefault();
+				dragControls?.start(e);
+			},
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx("div", { className: "h-1 w-16 shrink-0 rounded-full bg-elevation-fill-default-3" })
+		}), !hideHeader && /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-between px-list-side-title",
+			children: [/* @__PURE__ */ jsx(Typography, {
+				size: "label-2",
+				variant: "prominent-1",
+				...headerTypography,
+				children: label
+			}), onClose && isDismissable && /* @__PURE__ */ jsx(Button, {
+				onPress: onClose,
+				"aria-label": t(($) => $.ui.closeAlt),
+				className: "-m-2 shrink-0 p-2 text-interactive-text-secondary-idle focus-visible:outline-interactive-text-secondary-focus",
+				children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-6" })
+			})]
+		})]
+	});
+};
+export { BottomSheetHeader };

package/dist/Calendar2.js

@@ -10,6 +10,30 @@ import { useCalendar } from "@react-aria/calendar";
 const Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply, onMonthYearChange,...props }) => {
 	const [toggleState, setToggleState] = useState(null);
 	const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(props.calendarProps, props.state);
+	const handleHeaderMonthNavigation = (months) => {
+		if (toggleState) return;
+		if (!onMonthYearChange) return;
+		const focusedDate = props.state.focusedDate;
+		if (months === -1) {
+			onMonthYearChange(focusedDate.subtract({ months: 1 }));
+			return;
+		}
+		onMonthYearChange(focusedDate.add({ months: 1 }));
+	};
+	const headerPrevButtonProps = {
+		...prevButtonProps,
+		onPress: (event) => {
+			prevButtonProps.onPress?.(event);
+			handleHeaderMonthNavigation(-1);
+		}
+	};
+	const headerNextButtonProps = {
+		...nextButtonProps,
+		onPress: (event) => {
+			nextButtonProps.onPress?.(event);
+			handleHeaderMonthNavigation(1);
+		}
+	};
 	const handleDateChange = () => {
 		if (includesTime && !datePickerState.value) setToggleState("time");
 		else onApply();
@@ -41,8 +65,8 @@ const Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply
 		children: [/* @__PURE__ */ jsx(CalendarHeader, {
 			calendarState: props.state,
 			datePickerState,
-			prevButtonProps,
-			nextButtonProps,
+			prevButtonProps: headerPrevButtonProps,
+			nextButtonProps: headerNextButtonProps,
 			includesTime,
 			hourCycle,
 			toggleState,

package/dist/CalendarSelectHeader.js

@@ -9,8 +9,8 @@ import { ns } from "./i18n.js";
 import { Select } from "./Select.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { useDateFormatter } from "@react-aria/i18n";
 import { useTranslation } from "react-i18next";
+import { useDateFormatter } from "@react-aria/i18n";
 const CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, isNextMonthDisabled, isNextYearDisabled, offset = { months: 0 }, onNavigate, maxDate, minDate }) => {
 	const { t } = useTranslation("ui");
 	const displayDate = state.visibleRange.start.add(offset);

package/dist/CheckContent.js

@@ -6,6 +6,7 @@ const CheckContent = ({ children, className,...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx$1((UIStyle.useConfig()?.typography?.cva ?? typography)({
 			size: "label-1",
+			sizeMobile: "label-1",
 			variant: "default",
 			...props.typography,
 			className: "text-text-default-2"

package/dist/Checkbox.js

@@ -1,8 +1,8 @@
 import { UIStyle } from "./uiStyle.context.js";
+import { UIConfig } from "./uiConfig.context.js";
 import { checkboxIndicatorClass, checkboxTypography } from "./checkbox.cva.js";
 import { FormFieldError } from "./FormFieldError.js";
 import { CheckContent } from "./CheckContent.js";
-import { UIConfig } from "./uiConfig.context.js";
 import { CheckboxCheckmark } from "./CheckboxCheckmark2.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -24,7 +24,7 @@ var CheckboxBase = (props) => {
 		"aria-errormessage": error || void 0,
 		"data-is-dirty": props.isDirty || void 0,
 		"data-is-required": props.isRequired || void 0,
-		className: clsx(checkboxIndicatorClass, className),
+		className: clsx("relative", checkboxIndicatorClass, className),
 		children: [/* @__PURE__ */ jsx(CheckboxCheckmark, {
 			variant,
 			...rest

package/dist/ColorPickerDropdown.js

@@ -1,6 +1,8 @@
 import { ArrowDropDownIcon } from "./ArrowDropDown.js";
+import { UIStyle } from "./uiStyle.context.js";
 import { Typography } from "./Typography.js";
 import { useInputCva } from "./input.cva.js";
+import { popover } from "./popover.cva.js";
 import { ColorPicker } from "./ColorPicker.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -8,6 +10,7 @@ import { Button, Dialog, DialogTrigger, Popover } from "react-aria-components";
 import { useState } from "react";
 const ColorPickerDropdown = ({ colors, value, onChange, isDisabled, children }) => {
 	const inputCva = useInputCva();
+	const popoverCva = UIStyle.useConfig()?.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/ColumnConfig.js

@@ -1,6 +1,6 @@
 import { Typography } from "./Typography.js";
-import { Checkbox } from "./Checkbox.js";
 import { ns } from "./i18n.js";
+import { Checkbox } from "./Checkbox.js";
 import { Modal } from "./Modal.js";
 import { Table } from "./Table.js";
 import { useTranslationMemo } from "./useTranslationMemo.js";

package/dist/DatePicker.js

@@ -18,7 +18,7 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 var PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
 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, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange,...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, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange,...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -139,7 +139,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/DatePickerInput.js

@@ -16,7 +16,7 @@ import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "rea
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
 import useMeasure from "react-use-measure";
-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 inputCva = useInputCva();
 	const inputSideCva = UIStyle.useConfig()?.input?.sideCva ?? inputSide;
 	const [canClear, setCanClear] = useState(false);
@@ -91,7 +91,7 @@ const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, butto
 			as,
 			size,
 			...props,
-			className: clsx("group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2")
+			className: clsx("group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2", className)
 		}),
 		"data-rac": "",
 		"data-datetime-input": "",

package/dist/DateRangePicker.js

@@ -1,6 +1,6 @@
 import { Typography } from "./Typography.js";
-import { UIConfig } from "./uiConfig.context.js";
 import { ns } from "./i18n.js";
+import { UIConfig } from "./uiConfig.context.js";
 import { DatePickerInput } from "./DatePickerInput.js";
 import { DateTimeDialog } from "./DateTimeDialog.js";
 import { DateTimeDialogFooter } from "./DateTimeDialogFooter.js";
@@ -14,16 +14,16 @@ import { Button } from "react-aria-components";
 import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { useDateRangePicker, useLocale as useLocale$1 } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
+import { useTranslation } from "react-i18next";
 import { Controller } from "react-hook-form";
 import { CalendarDate, createCalendar, endOfMonth, endOfWeek, endOfYear, getLocalTimeZone, startOfMonth, startOfWeek, startOfYear, toCalendarDate, today } from "@internationalized/date";
 import { DateTime } from "luxon";
 import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
-import { useTranslation } from "react-i18next";
 var PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
 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() {
@@ -484,6 +484,7 @@ var DateRangePickerBase = (props) => {
 				isDirty,
 				disableManualEntry,
 				placeholder,
+				className: inputClassName,
 				onOpenDropdown: () => state.toggle()
 			}), /* @__PURE__ */ jsx(DateTimeDialog, {
 				hideSidebar,

package/dist/DateTimeDialog.js

@@ -1,10 +1,12 @@
+import { UIStyle } from "./uiStyle.context.js";
 import { BottomSheet } from "./BottomSheet.js";
 import { useBreakpoint } from "./useBreakpoint.js";
-import { FormFieldHeader } from "./FormFieldHeader.js";
-import { FormFieldHeaderClose } from "./FormFieldHeaderClose.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { popover } from "./popover.cva.js";
+import { 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.useConfig()?.popover?.cva ?? popover;
 	if (useBreakpoint("md")) {
 		if (!isOpen) return null;
 		return /* @__PURE__ */ jsx(Popover, {
@@ -17,7 +19,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]
@@ -26,7 +28,7 @@ const DateTimeDialog = ({ hideSidebar, children, footer, sidebar, label, isOpen,
 			})
 		});
 	}
-	return /* @__PURE__ */ jsx(BottomSheet, {
+	return /* @__PURE__ */ jsxs(BottomSheet, {
 		label,
 		footer,
 		isOpen,
@@ -35,15 +37,7 @@ const DateTimeDialog = ({ hideSidebar, children, footer, sidebar, label, isOpen,
 		isScrollable: true,
 		height: "auto",
 		isDismissable: true,
-		children: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [
-			/* @__PURE__ */ jsx(FormFieldHeader, {
-				label,
-				className: "mb-8! shrink-0 px-4 pt-3",
-				rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close })
-			}),
-			children,
-			!hideSidebar && sidebar
-		] })
+		children: [children, !hideSidebar && sidebar]
 	});
 };
 export { DateTimeDialog };

package/dist/DateTimeDialogFooter.js

@@ -1,5 +1,5 @@
-import { TextButton } from "./TextButton.js";
 import { ns } from "./i18n.js";
+import { TextButton } from "./TextButton.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";

package/dist/DateTimePicker.js

@@ -16,7 +16,7 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 var PLACEHOLDER_VALUE = new CalendarDateTime(2024, 1, 1);
 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, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange,...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, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange,...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -164,7 +164,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/FileUpload.js

@@ -1,5 +1,5 @@
-import { UIConfig } from "./uiConfig.context.js";
 import { ns } from "./i18n.js";
+import { UIConfig } from "./uiConfig.context.js";
 import { FormField } from "./FormField.js";
 import { FileUtils } from "./file.utils.js";
 import { FileCardList } from "./FileCardList.js";
@@ -11,8 +11,8 @@ import { clsx } from "clsx";
 import { DropZone } from "react-aria-components";
 import { useCallback, useState } from "react";
 import { mergeRefs, useLabels } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { Controller } from "react-hook-form";
 var FileUploadBase = (props) => {
 	const { t } = useTranslation("ui");
 	const { ref: _ref, label, tooltipText, variant = "vertical", as = "button", helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, allowsMultiple = false, hideLabel, acceptedFileTypes, clearOnSuccess, emptyText = t(($) => $.ui.fileUpload.emptyText), uploadText = t(($) => $.ui.fileUpload.uploadText), browseText = t(($) => $.ui.fileUpload.browse), fileUpload, fileRemove, children, listRenderer, onInvalidFileType,...rest } = props;

package/dist/FileUploadContentError.js

@@ -2,8 +2,8 @@ import { CloseIcon } from "./Close.js";
 import { Typography } from "./Typography.js";
 import { Button as Button$1 } from "./Button.js";
 import { InlineIconButton } from "./InlineIconButton.js";
-import { TextButton } from "./TextButton.js";
 import { ns } from "./i18n.js";
+import { TextButton } from "./TextButton.js";
 import { WarningFilledIcon } from "./WarningFilled.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";

package/dist/FileUploadContentFilled.js

@@ -2,8 +2,8 @@ import { CloseIcon } from "./Close.js";
 import { Typography } from "./Typography.js";
 import { Button as Button$1 } from "./Button.js";
 import { InlineIconButton } from "./InlineIconButton.js";
-import { TextButton } from "./TextButton.js";
 import { ns } from "./i18n.js";
+import { TextButton } from "./TextButton.js";
 import { FileUtils } from "./file.utils.js";
 import { CheckCircleIcon } from "./CheckCircle.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/FormFieldLabel.js

@@ -16,6 +16,7 @@ const FormFieldLabel = ({ ref, as, label, isRequired, isDisabled, labelProps, si
 			ref,
 			as: "span",
 			size: "label-2",
+			sizeMobile: "label-2",
 			variant: "prominent-1",
 			...labelTypographyMap({ as }),
 			className: clsx(labelBaseCva({ as }), as && ["filter", "floating"].includes(as) && inputSideCva({

package/dist/InputUploadContent.js

@@ -1,9 +1,9 @@
 import { UIStyle } from "./uiStyle.context.js";
 import { Typography } from "./Typography.js";
 import { Button as Button$1 } from "./Button.js";
+import { ns } from "./i18n.js";
 import { TextButton } from "./TextButton.js";
 import { inputSize } from "./input.cva.js";
-import { ns } from "./i18n.js";
 import { UploadIcon } from "./Upload.js";
 import { inputUploadButton, inputUploadDropZone } from "./inputUploadButton.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/MenuMobile.js

@@ -44,6 +44,7 @@ const MenuMobile = ({ trigger, items, onAction,...props }) => {
 		onOpenChange: setIsOpen,
 		trigger,
 		isDismissable: true,
+		hideHeader: true,
 		children: () => /* @__PURE__ */ jsxs(Fragment, { children: [activeItem && /* @__PURE__ */ jsxs(Button, {
 			className: clsx(menuItemCva$1({
 				...props,

package/dist/RadioGroup.js

@@ -1,10 +1,10 @@
 import { UIStyle } from "./uiStyle.context.js";
-import { CheckContent } from "./CheckContent.js";
 import { UIConfig } from "./uiConfig.context.js";
+import { CheckContent } from "./CheckContent.js";
 import { FormField } from "./FormField.js";
 import { radio, radioIndicatorClass, radioTypography } from "./radio.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx$1 from "clsx";
+import { clsx } from "clsx";
 import { Radio, RadioGroup } from "react-aria-components";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
@@ -37,10 +37,10 @@ var RadioGroupBase = (props) => {
 		children: /* @__PURE__ */ jsx(FormField, {
 			...formFieldProps,
 			children: /* @__PURE__ */ jsx("div", {
-				className: clsx$1("flex flex-col", inputClassName),
+				className: clsx("flex flex-col", inputClassName),
 				children: options.map((option) => /* @__PURE__ */ jsxs(Radio, {
 					value: option.value,
-					className: radioIndicatorClass,
+					className: clsx("relative", radioIndicatorClass),
 					children: [/* @__PURE__ */ jsx("div", { className: radioCva({
 						variant,
 						...rest

package/dist/ResponsivePopover.js

@@ -1,25 +1,23 @@
+import { UIStyle } from "./uiStyle.context.js";
 import { BottomSheet } from "./BottomSheet.js";
 import { useBreakpoint } from "./useBreakpoint.js";
-import { FormFieldHeader } from "./FormFieldHeader.js";
-import { FormFieldHeaderClose } from "./FormFieldHeaderClose.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { popover } from "./popover.cva.js";
+import { 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.useConfig()?.popover?.cva ?? popover;
 	if (!useBreakpoint("md")) return /* @__PURE__ */ jsx(BottomSheet, {
 		isOpen,
 		onOpenChange,
 		trigger,
 		height: "auto",
 		isDismissable: true,
-		children: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FormFieldHeader, {
-			label: sheetLabel,
-			rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
-			className: "px-4 pt-3"
-		}), /* @__PURE__ */ jsx("div", {
+		label: sheetLabel,
+		children: /* @__PURE__ */ jsx("div", {
 			className: "p-4",
 			children
-		})] })
+		})
 	});
 	return /* @__PURE__ */ jsxs(DialogTrigger, {
 		isOpen,
@@ -31,7 +29,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/Segment.js

@@ -10,7 +10,7 @@ import { useToggleButtonGroup } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 import { useToggleGroupState } from "react-stately";
-var SegmentBase = ({ className, items, error, onChange, value, defaultValue,...rest }) => {
+var SegmentBase = ({ className, items, error, onChange, value, defaultValue, segmentItemClassName,...rest }) => {
 	const props = {
 		...rest,
 		defaultSelectedKeys: defaultValue ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : void 0,
@@ -49,6 +49,7 @@ var SegmentBase = ({ className, items, error, onChange, value, defaultValue,...r
 			style: { gridTemplateColumns },
 			children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SegmentItem, {
 				...item,
+				className: clsx(item.className, segmentItemClassName),
 				isDisabled: item.isDisabled || props.isDisabled,
 				isSelected: state.selectedKeys.has(item.id),
 				onPress: () => {

package/dist/SegmentItem.js

@@ -3,14 +3,17 @@ import { Typography } from "./Typography.js";
 import { segmentItemCva } from "./segment.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ToggleButton } from "react-aria-components";
-const SegmentItem = ({ label, icon, id, isDisabled,...props }) => {
+const SegmentItem = ({ label, icon, id, isDisabled, className,...props }) => {
 	const IconComponent = icon;
 	const iconOnly = !!(icon && !label);
 	const segmentItemCva$1 = UIStyle.useConfig()?.segment?.itemCva ?? segmentItemCva;
 	return /* @__PURE__ */ jsxs(ToggleButton, {
 		...props,
 		id,
-		className: segmentItemCva$1({ iconOnly }),
+		className: segmentItemCva$1({
+			iconOnly,
+			className
+		}),
 		isDisabled,
 		children: [icon && /* @__PURE__ */ jsx(IconComponent, { className: "size-6" }), label && /* @__PURE__ */ jsx(Typography, {
 			size: "label-2",

package/dist/SelectBase.js

@@ -1,5 +1,5 @@
-import { useBreakpoint } from "./useBreakpoint.js";
 import { UIConfig } from "./uiConfig.context.js";
+import { useBreakpoint } from "./useBreakpoint.js";
 import { SelectContext } from "./select.context.js";
 import { SelectDesktop } from "./SelectDesktop.js";
 import { SelectMobile } from "./SelectMobile.js";

package/dist/SelectDesktop.js

@@ -1,3 +1,5 @@
+import { UIStyle } from "./uiStyle.context.js";
+import { popover } from "./popover.cva.js";
 import { FormField } from "./FormField.js";
 import { TooltipWrapper } from "./TooltipWrapper.js";
 import { SelectAllItemId } from "./useSelectItems.js";
@@ -13,6 +15,7 @@ import { mergeRefs } from "@react-aria/utils";
 import useMeasure from "react-use-measure";
 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.useConfig()?.popover?.cva ?? popover;
 	const formFieldProps = {
 		error,
 		label,
@@ -137,7 +140,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/SelectInput.js

@@ -1,9 +1,9 @@
 import { ArrowDropDownIcon } from "./ArrowDropDown.js";
 import { UIStyle } from "./uiStyle.context.js";
 import { Typography } from "./Typography.js";
+import { ns } from "./i18n.js";
 import { inputBase, inputSide, inputSize } from "./input.cva.js";
 import { FormFieldLabel } from "./FormFieldLabel.js";
-import { ns } from "./i18n.js";
 import { InputClear } from "./InputClear.js";
 import { SelectInputTags } from "./SelectInputTags.js";
 import { SelectContext } from "./select.context.js";
@@ -12,8 +12,8 @@ import { clsx } from "clsx";
 import { Button, ComboBoxStateContext, Input } from "react-aria-components";
 import { use, useMemo, useState } from "react";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
-import useMeasure from "react-use-measure";
 import { useTranslation } from "react-i18next";
+import useMeasure from "react-use-measure";
 const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, onCloseComboBox, onBlur,...props }) => {
 	const uiStyle = UIStyle.useConfig();
 	const inputSizeCva = uiStyle?.input?.sizeCva ?? inputSize;

package/dist/SelectListBoxItem.js

@@ -1,5 +1,5 @@
-import { CheckboxCheckmark } from "./CheckboxCheckmark2.js";
 import { ns } from "./i18n.js";
+import { CheckboxCheckmark } from "./CheckboxCheckmark2.js";
 import { SelectContext } from "./select.context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";

package/dist/SelectListBoxItemSelectAll.js

@@ -1,5 +1,5 @@
-import { CheckboxCheckmark } from "./CheckboxCheckmark2.js";
 import { ns } from "./i18n.js";
+import { CheckboxCheckmark } from "./CheckboxCheckmark2.js";
 import { SelectContext } from "./select.context.js";
 import { selectListBoxItemClass } from "./SelectListBoxItem.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/SelectListBoxSelectionBar.js

@@ -1,5 +1,5 @@
-import { TextButton } from "./TextButton.js";
 import { ns } from "./i18n.js";
+import { TextButton } from "./TextButton.js";
 import { SelectContext } from "./select.context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";

package/dist/SelectMobile.js

@@ -1,10 +1,10 @@
 import { BottomSheet } from "./BottomSheet.js";
 import { FormFieldHeader } from "./FormFieldHeader.js";
-import { FormFieldHeaderClose } from "./FormFieldHeaderClose.js";
 import { FormField } from "./FormField.js";
 import { SelectContext } from "./select.context.js";
 import { SelectInput } from "./SelectInput.js";
 import { SelectListBox } from "./SelectListBox.js";
+import { FormFieldHeaderClose } from "./FormFieldHeaderClose.js";
 import { TextInput } from "./TextInput.js";
 import { SelectListBoxSelectionBar } from "./SelectListBoxSelectionBar.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/Toggle.js

@@ -1,7 +1,7 @@
 import { UIStyle } from "./uiStyle.context.js";
+import { UIConfig } from "./uiConfig.context.js";
 import { FormFieldError } from "./FormFieldError.js";
 import { CheckContent } from "./CheckContent.js";
-import { UIConfig } from "./uiConfig.context.js";
 import { toggle, toggleTypography } from "./toggle.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";

package/dist/checkbox.cva.js

@@ -35,6 +35,7 @@ const checkbox = cva([
 const checkboxIndicatorClass = "group flex items-center gap-2";
 const checkboxTypography = compoundMapper({ default: {
 	size: "label-1",
+	sizeMobile: "label-1",
 	variant: "default"
 } });
 const checkboxIcon = cva(["absolute hidden size-3"], {

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

@@ -1,6 +1,6 @@
-import { Key, ReactElement } from 'react';
+import { ReactElement } from 'react';
 import { Placement } from 'react-aria';
-import { MenuItemProps } from 'react-aria-components';
+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 {
     label: string;

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

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

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/DateTimePicker/DateTimePicker.d.ts

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

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/overlays/BottomSheet/BottomSheet.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode, RefObject } from 'react';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 type BottomSheetState = "closed" | "opening" | "opened" | "closing";
 interface BottomSheetBaseProps {
     isOpen?: boolean;
@@ -6,6 +7,8 @@ interface BottomSheetBaseProps {
     onStateChange?: (state: BottomSheetState) => void;
     isDismissable?: boolean;
     isScrollable?: boolean;
+    hideHeader?: boolean;
+    hideThumb?: boolean;
     height?: "auto" | "full";
     label?: string;
     portalContainerRef?: RefObject<HTMLElement>;
@@ -13,8 +16,14 @@ 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;
+    overlayClassName?: string;
+    headerTypography?: TypographyVariantProps;
 }
 export interface BottomSheetProps extends BottomSheetBaseProps {
     trigger?: ReactNode;

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

@@ -0,0 +1,13 @@
+import { DragControls } from 'motion/react';
+import { ReactNode } from 'react';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
+export interface BottomSheetHeaderProps {
+    label?: ReactNode;
+    isDismissable?: boolean;
+    dragControls?: DragControls;
+    hideHeader?: boolean;
+    hideThumb?: boolean;
+    headerTypography?: TypographyVariantProps;
+    onClose?: () => void;
+}
+export declare const BottomSheetHeader: ({ label, dragControls, isDismissable, hideThumb, hideHeader, headerTypography, onClose, }: BottomSheetHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/segment/SegmentItem.d.ts

@@ -1,2 +1,2 @@
 import { SegmentItem as SegmentItemProps } from './segment.types';
-export declare const SegmentItem: ({ label, icon, id, isDisabled, ...props }: SegmentItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentItem: ({ label, icon, id, isDisabled, className, ...props }: SegmentItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/segment/segment.types.d.ts

@@ -30,6 +30,7 @@ export type SegmentProps<TKey extends Key = Key> = Omit<ToggleButtonGroupProps &
     ref?: Ref<HTMLElement>;
     items: SegmentItem<TKey>[];
     className?: string;
+    segmentItemClassName?: string;
     error?: string;
 } & GroupedSegmentProps<TKey>;
 export type ControlledSegmentProps<TFieldValues extends FieldValues, TKey extends Key = Key> = SegmentProps<TKey> & GroupedSegmentControlProps<TFieldValues, TKey>;

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/config/uiConfig.context.d.ts

@@ -8,6 +8,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>;
@@ -22,6 +23,7 @@ export declare namespace UIConfig {
         slider: Pick<SliderProps, "minValue" | "maxValue">;
         dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros" | "disableManualEntry" | "shouldUpdateDateOnMonthYearChange">;
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
+        bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold" | "hideThumb" | "headerTypography">;
     }
     interface ProviderProps {
         config?: Partial<Options>;

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

@@ -11,6 +11,7 @@ import { MenuCvaVariantProps, MenuItemVariantProps, MenuPopoverVariantProps, Men
 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';
@@ -101,6 +102,9 @@ export declare namespace UIStyle {
             cva?: Cva<SegmentVariantProps>;
             itemCva?: Cva<SegmentItemVariantProps>;
         };
+        popover: {
+            cva?: Cva<PopoverVariantProps>;
+        };
     }
     interface ProviderProps {
         config?: Partial<Options>;

package/dist/index.js

@@ -50,6 +50,12 @@ import { InlineIconButton } from "./InlineIconButton.js";
 import { PillButton } from "./PillButton.js";
 import { MenuItem } from "./MenuItem.js";
 import { MenuPopover } from "./MenuPopover.js";
+import { ns, resources } from "./i18n.js";
+import { ObjectUtils } from "./object.utils.js";
+import { isEqual } from "./isEqual.js";
+import { useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo } from "./useDeepCompare.js";
+import { UIConfig } from "./uiConfig.context.js";
+import { useStateAndRef } from "./useStateAndRef.js";
 import { DomUtils } from "./dom.utils.js";
 import { BottomSheet } from "./BottomSheet.js";
 import { useBreakpoint } from "./useBreakpoint.js";
@@ -57,14 +63,9 @@ import { Menu } from "./Menu2.js";
 import { SplitButton } from "./SplitButton.js";
 import { TextButton } from "./TextButton.js";
 import { ToggleButton } from "./ToggleButton.js";
-import { ObjectUtils } from "./object.utils.js";
-import { isEqual } from "./isEqual.js";
-import { useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo } from "./useDeepCompare.js";
-import { UIConfig } from "./uiConfig.context.js";
 import { Checkbox } from "./Checkbox.js";
 import { useLongPressRepeat } from "./useLongPressRepeat.js";
 import { useScrollableListBox } from "./useScrollableListBox.js";
-import { ns, resources } from "./i18n.js";
 import { FormField } from "./FormField.js";
 import { DateTimeUtils } from "./date-time.utils.js";
 import { DatePicker } from "./DatePicker.js";
@@ -126,7 +127,6 @@ import { useForm } from "./useForm.js";
 import { useFormAutosave } from "./useFormAutosave.js";
 import { usePagination } from "./usePagination.js";
 import { useSorting } from "./useSorting.js";
-import { useStateAndRef } from "./useStateAndRef.js";
 import { useTableColumnConfig } from "./useTableColumnConfig.js";
 import { ArrayUtils } from "./array.utils.js";
 import { QueriesUtils } from "./queries.utils.js";

package/dist/label.cva.js

@@ -58,6 +58,7 @@ const labelTypography = compoundMapper({
 			as: "default",
 			value: {
 				size: "label-2",
+				sizeMobile: "label-2",
 				variant: "prominent-1"
 			}
 		},
@@ -65,6 +66,7 @@ const labelTypography = compoundMapper({
 			as: "filter",
 			value: {
 				size: "label-1",
+				sizeMobile: "label-1",
 				variant: "default"
 			}
 		},
@@ -72,6 +74,7 @@ const labelTypography = compoundMapper({
 			as: "inline",
 			value: {
 				size: "label-2",
+				sizeMobile: "label-2",
 				variant: "prominent-1"
 			}
 		},
@@ -79,12 +82,14 @@ const labelTypography = compoundMapper({
 			as: "floating",
 			value: {
 				size: "label-1",
+				sizeMobile: "label-1",
 				variant: "default"
 			}
 		}
 	],
 	default: {
 		size: "label-2",
+		sizeMobile: "label-2",
 		variant: "prominent-1"
 	},
 	defaultVariants: { as: "default" }

package/dist/popover.cva.js

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

package/dist/radio.cva.js

@@ -37,6 +37,7 @@ const radio = cva([
 const radioIndicatorClass = "group flex items-center gap-2";
 const radioTypography = compoundMapper({ default: {
 	size: "label-1",
+	sizeMobile: "label-1",
 	variant: "default"
 } });
 export { radio, radioIndicatorClass, radioTypography };

package/dist/toggle.cva.js

@@ -22,6 +22,7 @@ const toggle = cva(["h-6 w-10 rounded-full before:m-0-5 before:block before:aspe
 });
 const toggleTypography = compoundMapper({ default: {
 	size: "label-1",
+	sizeMobile: "label-1",
 	variant: "default"
 } });
 export { toggle, toggleTypography };

package/dist/uiConfig.context.js

@@ -44,6 +44,15 @@ let UIConfig;
 				variant: "prominent-1"
 			},
 			descriptionTypography: { size: "body-3" }
+		},
+		bottomSheet: {
+			closeDragThreshold: 100,
+			closeVelocityThreshold: 200,
+			hideThumb: false,
+			headerTypography: {
+				size: "label-2",
+				variant: "prominent-1"
+			}
 		}
 	};
 	const Context = createContext(DEFAULT_CONFIG);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.1.27",
+  "version": "2.1.29",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",