@povio/ui 2.1.19 → 2.1.21

package/README.md

@@ -32,7 +32,7 @@ This is required for buttons to behave as expected. It is based on [Tailwind Upg
 In order for Tailwind to also compile classes for @povio/ui package, you need to include @source directive in Tailwind config.
 In your globals.css add (make sure path is correct):
 ```css
-@source "../../node-modules/@povio/ui/dist";
+@source "../../../../node_modules/@povio/ui/dist";
 ```
 
 ### React Aria

package/dist/BottomSheet.js

@@ -22,7 +22,7 @@ var staticTransition = {
 		1
 	]
 };
-var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = false, isScrollable = true, height = "full", label, portalContainerRef, children, footer, sheetMarginTop = 96, sheetMarginBottom = 128, shouldCloseOnInteractOutside }) => {
+var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = false, isScrollable = true, height = "full", label, portalContainerRef, children, footer, sheetMarginTop = 96, sheetMarginBottom = 128, shouldCloseOnInteractOutside, containerClassName }) => {
 	const viewport = useViewportSize();
 	const { sheetHeight, windowHeight } = useMemo(() => {
 		return {
@@ -60,7 +60,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 	return /* @__PURE__ */ jsx(react_exports.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(MotionModalOverlay, {
 		isOpen: true,
 		UNSTABLE_portalContainer: portalContainerRef?.current,
-		className: "fixed top-0 left-0 z-10 w-screen",
+		className: clsx("fixed top-0 left-0 z-10 w-screen", containerClassName),
 		onOpenChange,
 		isDismissable,
 		style: { height: viewport.height },
@@ -73,7 +73,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 			exit: { opacity: 0 }
 		}), /* @__PURE__ */ jsx(MotionModal, {
 			isDismissable: true,
-			className: clsx("pointer-events-none flex w-full flex-col items-stretch justify-end outline-none will-change-transform", isScrollable ? "h-auto" : "h-full"),
+			className: clsx("pointer-events-none flex h-full w-full flex-col items-stretch justify-end outline-none will-change-transform"),
 			animate: {
 				y: 0,
 				opacity: 1
@@ -143,13 +143,13 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 								tabIndex: -1
 							}),
 							/* @__PURE__ */ jsx("div", {
-								className: clsx("flex min-h-0 grow flex-col items-stretch", isScrollable ? "shrink-0" : "shrink"),
+								className: "flex max-h-full min-h-0 flex-col items-stretch",
 								ref: containerRef,
 								children: typeof children === "function" ? children(close) : children
 							}),
 							/* @__PURE__ */ jsx("div", {
 								className: "shrink-0",
-								style: { height: `${footerHeight + sheetMarginBottom}px` }
+								style: { height: `${footerHeight + (isScrollable ? 0 : sheetMarginBottom)}px` }
 							}),
 							/* @__PURE__ */ jsx("div", { className: "absolute top-full h-screen w-full bg-elevation-fill-default-1" })
 						]

package/dist/DatePickerInput.js

@@ -34,6 +34,7 @@ const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, butto
 	const endDateFieldRef = useRef(null);
 	const containerRef = useRef(null);
 	const [labelContentRef, { width: labelWidth }] = useMeasure();
+	const [trailingContentRef, { width: trailingWidth }] = useMeasure();
 	useImperativeHandle(ref, () => ({
 		clear: () => {
 			dateFieldRef.current?.clearField();
@@ -66,12 +67,19 @@ const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, butto
 	};
 	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
 	const style = useMemo(() => {
-		return { paddingLeft: as === "filter" ? `calc(var(${inputSideCva({
-			size,
-			type: "var"
-		})}) + ${labelWidth}px)` : "0px" };
+		return {
+			paddingLeft: as === "filter" ? `calc(var(${inputSideCva({
+				size,
+				type: "var"
+			})}) + ${labelWidth}px)` : "0px",
+			paddingRight: `calc(var(${inputSideCva({
+				size,
+				type: "var"
+			})}) + ${trailingWidth}px)`
+		};
 	}, [
 		labelWidth,
+		trailingWidth,
 		as,
 		size,
 		inputSideCva
@@ -86,6 +94,7 @@ const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, butto
 			className: clsx("group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2")
 		}),
 		"data-rac": "",
+		"data-datetime-input": "",
 		"data-hovered": isHovered || void 0,
 		"data-disabled": isDisabled || void 0,
 		"data-invalid": isInvalid || void 0,
@@ -144,7 +153,11 @@ const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, butto
 				})] })] })
 			]
 		})] }), /* @__PURE__ */ jsxs("div", {
-			className: "relative z-1 flex items-center gap-2",
+			ref: trailingContentRef,
+			className: clsx("absolute top-1/2 flex -translate-y-1/2 items-center gap-2", inputSideCva({
+				size,
+				type: "right"
+			})),
 			children: [isClearable && canClear && /* @__PURE__ */ jsx(InputClear, { onClear }), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
 				label: "",
 				color: "secondary",

package/dist/DateTimeDialog.js

@@ -32,7 +32,7 @@ const DateTimeDialog = ({ hideSidebar, children, footer, sidebar, label, isOpen,
 		isOpen,
 		onOpenChange,
 		sheetMarginBottom: 0,
-		isScrollable: false,
+		isScrollable: true,
 		height: "auto",
 		isDismissable: true,
 		children: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/InfiniteTable.js

@@ -4,7 +4,7 @@ import { Table } from "./Table.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 const InfiniteTable = ({ hasNextPage, isFetchingNextPage = false, fetchNextPage,...rest }) => {
-	const { setRef } = useIntersectionObserver({
+	const { ref } = useIntersectionObserver({
 		onIntersection: useCallback(() => {
 			if (!isFetchingNextPage && hasNextPage) fetchNextPage();
 		}, [
@@ -17,12 +17,7 @@ const InfiniteTable = ({ hasNextPage, isFetchingNextPage = false, fetchNextPage,
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col",
 		children: [/* @__PURE__ */ jsx(Table, { ...rest }), (hasNextPage || isFetchingNextPage) && /* @__PURE__ */ jsx("div", {
-			ref: (ref) => {
-				setRef(ref);
-				return () => {
-					setRef(null);
-				};
-			},
+			ref,
 			className: "flex justify-center py-4",
 			children: /* @__PURE__ */ jsx(Loader, {})
 		})]

package/dist/InputContent.js

@@ -38,7 +38,7 @@ const InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, un
 		inputSideCva
 	]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("group/input-content relative", { "h-full": as === "inline" }),
+		className: clsx("group/input-content relative", as === "inline" && "h-full"),
 		children: [
 			as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
 				ref: labelContentRef,

package/dist/SelectInput.js

@@ -7,7 +7,7 @@ import { ns } from "./i18n.js";
 import { InputClear } from "./InputClear.js";
 import { SelectInputTags } from "./SelectInputTags.js";
 import { SelectContext } from "./select.context.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button, ComboBoxStateContext, Input } from "react-aria-components";
 import { use, useMemo, useState } from "react";
@@ -83,11 +83,13 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 		"data-has-search": fieldState.searchValue !== "" || void 0,
 		"data-invalid": isInvalid || void 0,
 		"data-is-empty": isEmpty || void 0,
+		"data-select-input": "",
 		...hoverProps,
 		...focusWithinProps,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: clsx("relative flex flex-1 items-center truncate", showTags && inputSizeCva({
+					as,
 					size,
 					...props
 				})),
@@ -108,9 +110,10 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 							selectedTagsType,
 							onRemove
 						}), isSearchable && /* @__PURE__ */ jsx(Input, {
-							placeholder,
+							placeholder: as === "floating" ? void 0 : placeholder,
 							onBlur,
 							className: clsx("w-full flex-1 bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", !showTags && inputSizeCva({
+								as,
 								size,
 								...props,
 								className: "rounded-input-rounding-default"
@@ -119,23 +122,24 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 							...fieldProps
 						})]
 					}),
-					!isSearchable && /* @__PURE__ */ jsx(Button, {
+					!isSearchable && /* @__PURE__ */ jsxs(Button, {
 						isDisabled,
 						onPress: () => setIsOpen(!isOpen),
 						onBlur,
 						"data-type": "select-trigger",
 						className: inputSizeCva({
 							size,
+							as,
 							...props,
 							className: clsx("w-full truncate text-start outline-none disabled:text-interactive-text-secondary-disabled", showTags && "absolute inset-0 z-0")
 						}),
 						style,
 						...fieldProps,
-						children: (isEmpty || !isMultiple) && /* @__PURE__ */ jsxs(Typography, {
+						children: [(as === "floating" && isEmpty || isMultiple && !isEmpty) && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }), (isEmpty || !isMultiple) && (as !== "floating" || !isEmpty) && /* @__PURE__ */ jsxs(Typography, {
 							size: "label-1",
 							className: clsx("truncate empty:before:inline-block empty:before:content-['']", isEmpty && "text-text-default-3"),
 							children: [isEmpty && placeholder, !isEmpty && (showSelectionContent ? selectedItems[0].content : selectedItems[0].label)]
-						})
+						})]
 					})
 				]
 			}),

package/dist/SelectListBox.js

@@ -48,7 +48,7 @@ const SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true
 			...props,
 			"aria-label": label,
 			selectionMode,
-			className: clsx("flex-1 outline-none [&>div:last-child>*]:border-b-0", isScrollable ? "overflow-y-auto overflow-x-hidden" : "overflow-hidden", className),
+			className: clsx("flex-1 outline-none [&>div:last-child>*]:border-b-0", isScrollable ? "max-h-full overflow-y-auto overflow-x-hidden" : "overflow-hidden", className),
 			items: listItems,
 			selectedKeys: selectedIds,
 			onSelectionChange,
@@ -61,7 +61,7 @@ const SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true
 		...props,
 		"aria-label": label,
 		selectionMode,
-		className: clsx("flex-1 outline-none [&>div:last-child]:border-b-0", isScrollable ? "overflow-y-auto overflow-x-hidden" : "overflow-hidden", className),
+		className: clsx("flex-1 outline-none [&>div:last-child]:border-b-0", isScrollable ? "max-h-full overflow-y-auto overflow-x-hidden" : "overflow-hidden", className),
 		items: listItems,
 		selectedKeys: selectedIds,
 		onSelectionChange,

package/dist/SelectListBoxLoadingItem.js

@@ -10,7 +10,7 @@ import { useTranslation } from "react-i18next";
 const SelectListBoxLoadingItem = ({ id, label, onLoadMore }) => {
 	const { t } = useTranslation("ui");
 	const { isDebouncing, isLoading, hasLoadMore } = SelectContext.useSelect();
-	const { setRef } = useIntersectionObserver({
+	const { ref } = useIntersectionObserver({
 		onIntersection: useCallback(() => {
 			if (!isDebouncing && !isLoading && hasLoadMore) onLoadMore?.();
 		}, [
@@ -27,12 +27,7 @@ const SelectListBoxLoadingItem = ({ id, label, onLoadMore }) => {
 		isDisabled: true,
 		className: selectListBoxItemClass,
 		children: /* @__PURE__ */ jsx("div", {
-			ref: (ref) => {
-				setRef(ref);
-				return () => {
-					setRef(null);
-				};
-			},
+			ref,
 			className: "flex flex-1 justify-center text-interactive-text-primary-idle",
 			children: /* @__PURE__ */ jsx(Loader, {})
 		})

package/dist/SelectMobile.js

@@ -83,7 +83,7 @@ const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, contai
 				footer: isMultiple && /* @__PURE__ */ jsx(SelectListBoxSelectionBar, {}),
 				isDismissable: true,
 				children: (close) => /* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col",
+					className: "flex max-h-full flex-col overflow-hidden",
 					children: [isSearchable ? /* @__PURE__ */ jsx(TextInput, {
 						ref: searchInputRef,
 						label,
@@ -96,12 +96,12 @@ const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, contai
 					}) : /* @__PURE__ */ jsx(FormFieldHeader, {
 						label,
 						rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
-						className: "!mb-1-5 px-4 pt-3"
+						className: "mb-1-5! px-4 pt-3"
 					}), /* @__PURE__ */ jsx(SelectListBox, {
 						...props,
 						autoFocus: !isSearchable,
-						isScrollable: false,
-						onClose: close
+						onClose: close,
+						isScrollable: true
 					})]
 				})
 			})]

package/dist/Table.js

@@ -2,6 +2,7 @@ import { ChevronDownIcon } from "./ChevronDown.js";
 import { ChevronUpIcon } from "./ChevronUp.js";
 import { UIStyle } from "./uiStyle.context.js";
 import { InlineIconButton } from "./InlineIconButton.js";
+import { useIntersectionObserver } from "./useIntersectionObserver.js";
 import { CellText } from "./CellText.js";
 import { DragIcon } from "./Drag.js";
 import { HeaderText } from "./HeaderText.js";
@@ -93,22 +94,27 @@ const Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, clas
 		internalSelectedRows
 	]);
 	const baseColumns = useMemo(() => typeof columns === "function" ? columns(i18next.t) : columns, [columns]);
+	const tableColumns = useMemo(() => {
+		if (enableDragDrop && getRowId) return [{
+			id: "drag-handle",
+			header: "",
+			meta: { width: "w-12" },
+			cell: AutoDragHandleCell,
+			enableSorting: false
+		}, ...baseColumns];
+		return baseColumns;
+	}, [
+		baseColumns,
+		enableDragDrop,
+		getRowId
+	]);
+	const [isSticky, setIsSticky] = useState(false);
+	const { ref: stickyRef } = useIntersectionObserver({ onIntersectionChange: useCallback((entry) => {
+		setIsSticky(entry.intersectionRatio < 1);
+	}, []) });
 	const table = useReactTable({
 		data,
-		columns: useMemo(() => {
-			if (enableDragDrop && getRowId) return [{
-				id: "drag-handle",
-				header: "",
-				meta: { width: "w-12" },
-				cell: AutoDragHandleCell,
-				enableSorting: false
-			}, ...baseColumns];
-			return baseColumns;
-		}, [
-			baseColumns,
-			enableDragDrop,
-			getRowId
-		]),
+		columns: tableColumns,
 		state: {
 			sorting,
 			columnOrder,
@@ -165,9 +171,13 @@ const Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, clas
 	const tableElement = /* @__PURE__ */ jsxs("table", {
 		className: clsx("w-full", className),
 		...listeners,
-		children: [/* @__PURE__ */ jsx("thead", {
-			className: "sticky top-0 z-10 bg-elevation-fill-default-1 shadow-2",
-			children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", {
+		children: [/* @__PURE__ */ jsxs("thead", {
+			className: "group/table-head sticky top-0 z-10 data-is-sticky:shadow-2",
+			"data-is-sticky": isSticky || void 0,
+			children: [/* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", {
+				ref: stickyRef,
+				className: "-mt-px block"
+			}) }), table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", {
 				className: clsx(tableHeadRowCva({})),
 				children: headerGroup.headers.filter((header) => {
 					if (isAnyRowSelected && header.index > 0) return false;
@@ -196,7 +206,7 @@ const Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, clas
 						})
 					}, header.id);
 				})
-			}, headerGroup.id))
+			}, headerGroup.id))]
 		}), /* @__PURE__ */ jsx("tbody", {
 			ref,
 			className: "relative",

package/dist/TextInput.js

@@ -70,7 +70,7 @@ var TextInputBase = (props) => {
 			...formFieldProps,
 			as,
 			labelProps,
-			className: clsx("group w-full", { "h-full": as === "inline" }, className),
+			className: clsx("group w-full", as === "inline" && "h-full", className),
 			tabIndex: as === "inline" ? -1 : void 0,
 			children: /* @__PURE__ */ jsx(InputContent, {
 				...inputContentProps,

package/dist/TimePickerInput.js

@@ -20,14 +20,22 @@ const TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isIn
 	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
 	const { isFocusVisible } = useFocusVisible();
 	const [labelContentRef, { width: labelWidth }] = useMeasure();
+	const [trailingContentRef, { width: trailingWidth }] = useMeasure();
 	const hidePlaceholder = as === "floating" && !state.value && !isFocused;
 	const style = useMemo(() => {
-		return { paddingLeft: as === "filter" ? `calc(var(${inputSideCva({
-			size,
-			type: "var"
-		})}) + ${labelWidth}px)` : "0px" };
+		return {
+			paddingLeft: as === "filter" ? `calc(var(${inputSideCva({
+				size,
+				type: "var"
+			})}) + ${labelWidth}px)` : "0px",
+			paddingRight: `calc(var(${inputSideCva({
+				size,
+				type: "var"
+			})}) + ${trailingWidth}px)`
+		};
 	}, [
 		labelWidth,
+		trailingWidth,
 		as,
 		size,
 		inputSideCva
@@ -43,6 +51,7 @@ const TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isIn
 			className: clsx("group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2")
 		}),
 		"data-rac": "",
+		"data-datetime-input": "",
 		"data-hovered": isHovered || void 0,
 		"data-disabled": isDisabled || void 0,
 		"data-invalid": isInvalid || void 0,
@@ -78,7 +87,11 @@ const TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isIn
 				})
 			})
 		] }), /* @__PURE__ */ jsxs("div", {
-			className: clsx("relative z-1 flex items-center gap-2", as === "floating" && "-mt-4"),
+			ref: trailingContentRef,
+			className: clsx("absolute top-1/2 flex -translate-y-1/2 items-center gap-2", inputSideCva({
+				size,
+				type: "right"
+			})),
 			children: [isClearable && canClear && /* @__PURE__ */ jsx(InputClear, { onClear: () => state.setValue(null) }), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
 				label: "",
 				color: "secondary",

package/dist/components/inputs/shared/input.cva.d.ts

@@ -8,6 +8,7 @@ export interface InputBaseProps extends VariantProps<typeof inputBase> {
 }
 export declare const inputSize: (props?: ({
     size?: "default" | "small" | "extra-small" | "large" | null | undefined;
+    as?: "default" | "filter" | "inline" | "floating" | null | undefined;
 } & ClassProp) | undefined) => string;
 export interface InputSizeProps extends VariantProps<typeof inputSize> {
 }

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

@@ -14,6 +14,7 @@ interface BottomSheetBaseProps {
     sheetMarginTop?: number;
     sheetMarginBottom?: number;
     shouldCloseOnInteractOutside?: () => boolean;
+    containerClassName?: string;
 }
 export interface BottomSheetProps extends BottomSheetBaseProps {
     trigger?: ReactNode;

package/dist/hooks/useIntersectionObserver.d.ts

@@ -1,7 +1,8 @@
 type UseIntersectionObserverProps = {
     onIntersection?: () => void;
+    onIntersectionChange?: (entry: IntersectionObserverEntry) => void;
 } & IntersectionObserverInit;
-export declare const useIntersectionObserver: ({ onIntersection, root, rootMargin, threshold, }: UseIntersectionObserverProps) => {
-    setRef: import('react').Dispatch<import('react').SetStateAction<Element | null>>;
+export declare const useIntersectionObserver: <T extends HTMLElement>({ onIntersection, onIntersectionChange, root, rootMargin, threshold, }: UseIntersectionObserverProps) => {
+    ref: import('react').RefObject<T | null>;
 };
 export {};

package/dist/input.cva.js

@@ -10,12 +10,7 @@ const inputBase = cva([uiOutlineClass, "flex w-full truncate"], {
 		},
 		as: {
 			default: "rounded-input-rounding-default",
-			floating: [
-				"rounded-input-rounding-default",
-				"py-floating-label-input-height-empty!",
-				"group-has-[input:not(:placeholder-shown)]/input-content:pb-floating-label-input-height-filled!",
-				"group-has-[input:not(:placeholder-shown)]/input-content:pt-[calc(var(--spacing-input-height-default)+14px)]!"
-			],
+			floating: "rounded-input-rounding-default",
 			filter: "rounded-input-rounding-default",
 			inline: [
 				"h-full",
@@ -113,13 +108,77 @@ const inputBase = cva([uiOutlineClass, "flex w-full truncate"], {
 	}
 });
 const inputSize = cva("", {
-	variants: { size: {
-		"extra-small": "px-input-side-default py-input-height-default text-label-1",
-		small: "px-input-side-default py-input-height-default text-label-1",
-		default: "px-input-side-default py-input-height-default text-label-1",
-		large: "px-input-side-default py-input-height-default text-label-1"
-	} },
-	defaultVariants: { size: "default" }
+	variants: {
+		size: {
+			"extra-small": "text-label-1",
+			small: "text-label-1",
+			default: "text-label-1",
+			large: "text-label-1"
+		},
+		as: {
+			default: "",
+			floating: [
+				"px-input-side-default",
+				"py-floating-label-input-height-empty!",
+				"group-has-[input:not(:placeholder-shown)]/input-content:pb-floating-label-input-height-filled!",
+				"group-has-[input:not(:placeholder-shown)]/input-content:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--text-label-3--line-height)*var(--text-label-3))]!",
+				"group-has-[input:not(:placeholder-shown)]/select-content:pb-floating-label-input-height-filled!",
+				"group-has-[input:not(:placeholder-shown)]/select-content:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--text-label-3--line-height)*var(--text-label-3))]!",
+				"group-data-[has-selection]/select-content:pb-floating-label-input-height-filled!",
+				"group-data-[has-selection]/select-content:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--text-label-3--line-height)*var(--text-label-3))]!",
+				"group-data-[has-search]/select-content:pb-floating-label-input-height-filled!",
+				"group-data-[has-search]/select-content:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--text-label-3--line-height)*var(--text-label-3))]!",
+				"data-[datetime-input]:data-[has-selection]:pb-floating-label-input-height-filled!",
+				"data-[datetime-input]:data-[has-selection]:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--text-label-3--line-height)*var(--text-label-3))]!",
+				"data-[datetime-input]:data-[focus-within]:pb-floating-label-input-height-filled!",
+				"data-[datetime-input]:data-[focus-within]:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--text-label-3--line-height)*var(--text-label-3))]!"
+			],
+			filter: "",
+			inline: ""
+		}
+	},
+	compoundVariants: [
+		{
+			as: [
+				"default",
+				"filter",
+				"inline"
+			],
+			size: "extra-small",
+			className: "px-input-side-default py-input-height-default text-label-1"
+		},
+		{
+			as: [
+				"default",
+				"filter",
+				"inline"
+			],
+			size: "small",
+			className: "px-input-side-default py-input-height-default text-label-1"
+		},
+		{
+			as: [
+				"default",
+				"filter",
+				"inline"
+			],
+			size: "default",
+			className: "px-input-side-default py-input-height-default text-label-1"
+		},
+		{
+			as: [
+				"default",
+				"filter",
+				"inline"
+			],
+			size: "large",
+			className: "px-input-side-default py-input-height-default text-label-1"
+		}
+	],
+	defaultVariants: {
+		size: "default",
+		as: "default"
+	}
 });
 const inputSide = cva("", {
 	variants: {

package/dist/label.cva.js

@@ -1,64 +1,52 @@
 import { compoundMapper } from "./compoundMapper.js";
 import { cva } from "class-variance-authority";
-const labelBase = cva("text-text-default-1", {
+const labelBase = cva("", {
 	variants: { as: {
-		default: ["flex items-start gap-1"],
-		filter: ["absolute top-1/2 -translate-y-1/2"],
-		inline: ["flex items-start gap-1"],
+		default: ["flex items-start gap-1 text-text-default-1"],
+		filter: ["absolute top-1/2 -translate-y-1/2 text-text-default-1"],
+		inline: ["flex items-start gap-1 text-text-default-1"],
 		floating: [
 			"pointer-events-none",
 			"absolute transition-all duration-75",
 			"top-1/2 -translate-y-1/2",
-			"text-text-default-2 group-has-[input:disabled]/input-content:text-interactive-text-secondary-disabled",
+			"text-text-default-3 group-has-[input:disabled]/input-content:text-interactive-text-secondary-disabled",
 			"group-disabled/date-picker-content:text-interactive-text-secondary-disabled",
 			"group-disabled/text-editor:text-interactive-text-secondary-disabled",
 			"group-has-[input:disabled]/select-content:text-interactive-text-secondary-disabled",
 			"group-has-[textarea:disabled]/text-area:text-interactive-text-secondary-disabled",
-			"group-data-[text-area]/text-area:top-5 group-data-[text-area]/text-area:translate-y-0",
-			"group-data-[text-editor]/text-editor:top-5 group-data-[text-editor]/text-editor:left-2 group-data-[text-editor]/text-editor:translate-y-0",
+			"group-data-[text-area]/text-area:top-floating-label-input-height-empty group-data-[text-area]/text-area:translate-y-0",
+			"group-data-[text-editor]/text-editor:top-floating-label-input-height-empty group-data-[text-editor]/text-editor:left-input-side-default group-data-[text-editor]/text-editor:translate-y-0",
 			"group-has-[input:not(:placeholder-shown)]/input-content:top-floating-label-input-height-filled group-has-[input:not(:placeholder-shown)]/input-content:translate-y-0",
-			"group-has-[textarea:not(:placeholder-shown)]/text-area:top-floating-label-input-height-filled group-has-[textarea:not(:placeholder-shown)]/text-area:translate-y-0",
-			"group-data-[is-filled=true]/text-editor:top-floating-label-input-height-filled group-data-[is-filled=true]/text-editor:translate-y-0",
+			"group-has-[textarea:not(:placeholder-shown)]/text-area:hidden",
+			"group-has-[textarea:placeholder-shown]/text-area:text-text-default-3",
+			"group-has-[textarea:placeholder-shown]/text-area:font-medium!",
+			"group-data-[is-filled=true]/text-editor:hidden",
+			"group-has-[data-text-editor:placeholder-shown]/text-editor:text-text-default-3",
+			"group-has-[data-text-editor:placeholder-shown]/text-editor:font-medium!",
 			"group-data-[has-selection]/date-picker-content:top-1 group-data-[has-selection]/date-picker-content:translate-y-0",
 			"group-focus-within/date-picker-content:top-1 group-focus-within/date-picker-content:translate-y-0",
 			"group-data-[has-selection]/select-content:top-1 group-data-[has-selection]/select-content:translate-y-0",
 			"group-data-[searchable-focus-within]/select-content:top-1 group-data-[searchable-focus-within]/select-content:translate-y-0",
 			"group-data-[has-search]/select-content:top-1 group-data-[has-search]/select-content:translate-y-0",
 			"group-has-[input:placeholder-shown]/input-content:text-text-default-3",
-			"group-has-[input:placeholder-shown]/input-content:!font-medium",
-			"group-has-[input:not(:placeholder-shown)]/input-content:!font-semibold",
-			"group-has-[input:not(:placeholder-shown)]/input-content:!text-label-3",
+			"group-has-[input:placeholder-shown]/input-content:font-medium!",
+			"group-has-[input:not(:placeholder-shown)]/input-content:font-semibold!",
+			"group-has-[input:not(:placeholder-shown)]/input-content:text-label-3!",
 			"group-has-[input:not(:placeholder-shown)]/input-content:text-text-default-1",
-			"group-has-[textarea:placeholder-shown]/text-area:text-text-default-3",
-			"group-has-[textarea:placeholder-shown]/text-area:!font-medium",
-			"group-has-[textarea:not(placeholder-shown)]/text-area:!font-semibold",
-			"group-has-[textarea:not(:placeholder-shown)]/text-area:!text-label-3",
-			"group-has-[textarea:not(placeholder-shown)]/text-area:text-text-default-1",
-			"group-focus-within/text-area:!text-text-default-1",
-			"group-focus-within/text-area:text-label-3",
-			"group-has-[textarea:focus-within]/text-area:!font-semibold",
-			"group-has-[data-text-editor:placeholder-shown]/text-editor:text-text-default-3",
-			"group-has-[data-text-editor:placeholder-shown]/text-editor:!font-medium",
-			"group-data-[is-filled=true]/text-editor:!font-semibold",
-			"group-data-[is-filled=true]/text-editor:!text-label-3",
-			"group-data-[is-filled=true]/text-editor:text-text-default-1",
-			"group-focus-within/text-editor:!text-text-default-1",
-			"group-focus-within/text-editor:text-label-3",
-			"group-has-[data-text-editor:focus-within]/text-editor:!font-semibold",
-			"group-data-[has-selection]/date-picker-content:!font-semibold",
-			"group-data-[has-selection]/date-picker-content:!text-label-3",
+			"group-data-[has-selection]/date-picker-content:font-semibold!",
+			"group-data-[has-selection]/date-picker-content:text-label-3!",
 			"group-data-[has-selection]/date-picker-content:text-text-default-1",
-			"group-focus-within/date-picker-content:!font-semibold",
-			"group-focus-within/date-picker-content:!text-label-3",
+			"group-focus-within/date-picker-content:font-semibold!",
+			"group-focus-within/date-picker-content:text-label-3!",
 			"group-focus-within/date-picker-content:text-text-default-1",
-			"group-data-[has-selection]/select-content:!font-semibold",
-			"group-data-[has-selection]/select-content:!text-label-3",
+			"group-data-[has-selection]/select-content:font-semibold!",
+			"group-data-[has-selection]/select-content:text-label-3!",
 			"group-data-[has-selection]/select-content:text-text-default-1",
-			"group-data-[searchable-focus-within]/select-content:!font-semibold",
-			"group-data-[searchable-focus-within]/select-content:!text-label-3",
+			"group-data-[searchable-focus-within]/select-content:font-semibold!",
+			"group-data-[searchable-focus-within]/select-content:text-label-3!",
 			"group-data-[searchable-focus-within]/select-content:text-text-default-1",
-			"group-data-[has-search]/select-content:!font-semibold",
-			"group-data-[has-search]/select-content:!text-label-3",
+			"group-data-[has-search]/select-content:font-semibold!",
+			"group-data-[has-search]/select-content:text-label-3!",
 			"group-data-[has-search]/select-content:text-text-default-1"
 		]
 	} },

package/dist/table.cva.js

@@ -12,7 +12,7 @@ const tableRow = cva([
 	odd: "odd:bg-elevation-fill-inverted-4/5"
 } } });
 const tableHeadRow = cva(["h-8 w-full"]);
-const tableHeadData = cva(["border-b border-b-elevation-outline-default-1 border-solid bg-elevation-fill-default-1 px-table-header-cell-container-side-default py-table-header-cell-container-height-default text-left"], {
+const tableHeadData = cva(["border-b border-b-elevation-outline-default-1 border-solid bg-elevation-fill-default-1 px-table-header-cell-container-side-default py-table-header-cell-container-height-default text-left", "group-data-[is-sticky=true]/table-head:bg-elevation-fill-default-1"], {
 	variants: { hasRightBorder: {
 		true: "border-l border-l-elevation-outline-default-1 border-solid",
 		false: ""

package/dist/useIntersectionObserver.js

@@ -1,23 +1,23 @@
-import { useEffect, useState } from "react";
-const useIntersectionObserver = ({ onIntersection, root, rootMargin, threshold }) => {
-	const [ref, setRef] = useState(null);
+import { useEffect, useRef } from "react";
+const useIntersectionObserver = ({ onIntersection, onIntersectionChange, root, rootMargin, threshold }) => {
+	const ref = useRef(null);
 	useEffect(() => {
 		const observer = new IntersectionObserver((entries) => {
 			if (entries.some((entry) => entry.isIntersecting)) onIntersection?.();
+			onIntersectionChange?.(entries[0]);
 		}, {
 			root,
 			rootMargin,
 			threshold
 		});
-		if (ref) observer.observe(ref);
+		if (ref.current) observer.observe(ref.current);
 		return () => observer.disconnect();
 	}, [
 		ref,
 		root,
-		rootMargin,
-		threshold,
-		onIntersection
+		onIntersection,
+		onIntersectionChange
 	]);
-	return { setRef };
+	return { ref };
 };
 export { useIntersectionObserver };

package/package.json

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