@povio/ui 0.0.7 → 0.0.9

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

@@ -7,10 +7,10 @@ import { useTranslation } from "react-i18next";
 import useMeasure from "react-use-measure";
 import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
+import { SelectInputTags } from "./SelectInputTags.js";
 import { SelectContext } from "./select.context.js";
 import { InputClear } from "../../shared/InputClear.js";
-import { inputSize, inputBase } from "../../shared/input.cva.js";
-import { Tag } from "../../../text/Tag/Tag.js";
+import { inputSize, inputBase, inputSide } from "../../shared/input.cva.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { ns } from "../../../../config/i18n.js";
 import { UIStyle } from "../../../../config/uiStyle.context.js";
@@ -30,6 +30,7 @@ const SelectInput = ({
   inputClassName,
   fieldProps,
   headerProps,
+  selectedTagsType,
   onCloseComboBox,
   onBlur,
   ...props
@@ -37,6 +38,7 @@ const SelectInput = ({
   const uiStyle = UIStyle.useConfig();
   const inputSizeCva = uiStyle?.input?.sizeCva ?? inputSize;
   const inputBaseCva = uiStyle?.input?.baseCva ?? inputBase;
+  const inputSideCva = uiStyle?.input?.sideCva ?? inputSide;
   const { t } = useTranslation(ns);
   const state = use(ComboBoxStateContext);
   const { hoverProps, isHovered } = useHover({ isDisabled });
@@ -65,10 +67,11 @@ const SelectInput = ({
     if (as !== "filter") {
       return {};
     }
+    const paddingLeft = `calc(${isSearchable || showTags ? "1 * " : "2 * "}var(${inputSideCva({ size, type: "var" })}) + ${labelWidth}px)`;
     return {
-      paddingLeft: `calc(var(--spacing-input-side-default) + ${labelWidth}px + var(--spacing-2))`
+      paddingLeft
     };
-  }, [labelWidth, as]);
+  }, [labelWidth, as, size, isSearchable, showTags, inputSideCva]);
   const labelProps = useMemo(() => {
     const { labelProps: headerLabelProps } = headerProps ?? {};
     const isFilterOrFloating = as && ["filter", "floating"].includes(as);
@@ -98,7 +101,7 @@ const SelectInput = ({
         variant,
         as,
         ...props,
-        className: clsx("group/select-content !px-0 relative flex", isSearchable && "cursor-text", className)
+        className: clsx("group/select-content relative flex px-0!", isSearchable && "cursor-text", className)
       }),
       "data-rac": "",
       "data-disabled": isDisabled,
@@ -113,102 +116,93 @@ const SelectInput = ({
       ...hoverProps,
       ...focusWithinProps,
       children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx(
-              "relative flex flex-1 items-center truncate",
-              showTags && inputSizeCva({ size, ...props, className: "pr-2 pl-input-side-default" })
-            ),
-            children: [
-              as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(
-                FormFieldLabel,
-                {
-                  ref: labelContentRef,
-                  as,
-                  ...headerProps,
-                  labelProps
-                }
-              ),
-              (showTags || isSearchable) && /* @__PURE__ */ jsxs(
-                "div",
+        /* @__PURE__ */ jsxs("div", { className: clsx("relative flex flex-1 items-center truncate", showTags && inputSizeCva({ size, ...props })), children: [
+          as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(
+            FormFieldLabel,
+            {
+              ref: labelContentRef,
+              as,
+              ...headerProps,
+              labelProps
+            }
+          ),
+          (showTags || isSearchable) && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: clsx("flex flex-1 flex-wrap gap-2 truncate", !isSearchable && "pointer-events-none z-1"),
+              style,
+              children: [
+                showTags && /* @__PURE__ */ jsx(
+                  SelectInputTags,
+                  {
+                    selectedItems,
+                    isDisabled,
+                    selectedTagsType,
+                    onRemove
+                  }
+                ),
+                isSearchable && /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    placeholder,
+                    onBlur,
+                    className: clsx(
+                      "flex-1 bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled",
+                      !showTags && inputSizeCva({
+                        size,
+                        ...props,
+                        className: "rounded-input-rounding-default"
+                      }),
+                      inputClassName
+                    ),
+                    onKeyDown,
+                    ...fieldProps
+                  }
+                )
+              ]
+            }
+          ),
+          !isSearchable && /* @__PURE__ */ jsx(
+            Button,
+            {
+              isDisabled,
+              onPress: () => setIsOpen(!isOpen),
+              onBlur,
+              "data-type": "select-trigger",
+              className: inputSizeCva({
+                size,
+                ...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,
                 {
-                  className: clsx("flex flex-1 flex-wrap gap-2 truncate", !isSearchable && "pointer-events-none z-[1]"),
-                  style,
+                  size: "label-1",
+                  className: clsx(
+                    "truncate empty:before:inline-block empty:before:content-['']",
+                    isEmpty && "text-text-default-3"
+                  ),
                   children: [
-                    showTags && selectedItems.map((item) => /* @__PURE__ */ jsx(
-                      Tag,
-                      {
-                        dismissable: true,
-                        isDisabled,
-                        onDismiss: () => onRemove(item.id),
-                        excludeFromTabOrder: true,
-                        className: "z-[1]",
-                        children: item.label
-                      },
-                      item.id
-                    )),
-                    isSearchable && /* @__PURE__ */ jsx(
-                      Input,
-                      {
-                        placeholder,
-                        onBlur,
-                        className: clsx(
-                          "flex-1 bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled",
-                          !showTags && inputSizeCva({
-                            size,
-                            ...props,
-                            className: "rounded-input-rounding-default pl-input-side-default"
-                          }),
-                          inputClassName
-                        ),
-                        onKeyDown,
-                        ...fieldProps
-                      }
-                    )
+                    isEmpty && placeholder,
+                    !isEmpty && (showSelectionContent ? selectedItems[0].content : selectedItems[0].label)
                   ]
                 }
-              ),
-              !isSearchable && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  isDisabled,
-                  onPress: () => setIsOpen(!isOpen),
-                  onBlur,
-                  "data-type": "select-trigger",
-                  className: inputSizeCva({
-                    size,
-                    ...props,
-                    className: clsx(
-                      "w-full truncate pl-input-side-default text-start outline-none disabled:text-interactive-text-secondary-disabled",
-                      showTags && "absolute inset-0 z-0"
-                    )
-                  }),
-                  style,
-                  ...fieldProps,
-                  children: (isEmpty || !isMultiple) && /* @__PURE__ */ jsxs(
-                    Typography,
-                    {
-                      size: "label-1",
-                      className: "truncate empty:before:inline-block empty:before:content-['']",
-                      children: [
-                        isEmpty && placeholder,
-                        !isEmpty && (showSelectionContent ? selectedItems[0].content : selectedItems[0].label)
-                      ]
-                    }
-                  )
-                }
               )
-            ]
-          }
-        ),
+            }
+          )
+        ] }),
         showClearButton && /* @__PURE__ */ jsx(InputClear, { onClear }),
         !hideDropdownIcon && /* @__PURE__ */ jsx(
           Button,
           {
             excludeFromTabOrder: true,
             "aria-label": t(($) => isOpen ? $.ui.closeAlt : $.ui.openAlt),
-            className: "self-stretch pr-input-side-default pl-1-5 outline-none",
+            className: clsx("self-stretch pl-1-5 outline-none", inputSizeCva({ size })),
             isDisabled,
             onPress: () => {
               if (!isSearchable) {

package/dist/components/inputs/Selection/shared/SelectInputTags.d.ts

@@ -0,0 +1,11 @@
+import { Key } from 'react-aria-components';
+import { SelectBaseProps } from './SelectBase';
+import { SelectItem } from './select.types';
+interface SelectInputTagsProps {
+    selectedItems: SelectItem[];
+    isDisabled: SelectBaseProps["isDisabled"];
+    selectedTagsType: SelectBaseProps["selectedTagsType"];
+    onRemove: (id: Key) => void;
+}
+export declare const SelectInputTags: ({ selectedItems, isDisabled, selectedTagsType, onRemove }: SelectInputTagsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,22 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { Tag } from "../../../text/Tag/Tag.js";
+const SelectInputTags = ({ selectedItems, isDisabled, selectedTagsType, onRemove }) => {
+  if (selectedTagsType !== "tags") {
+    return /* @__PURE__ */ jsx("p", { children: selectedItems.map((item) => item.label).join(", ") });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: selectedItems.map((item) => /* @__PURE__ */ jsx(
+    Tag,
+    {
+      dismissable: true,
+      isDisabled,
+      onDismiss: () => onRemove(item.id),
+      excludeFromTabOrder: true,
+      className: "z-1",
+      children: item.label
+    },
+    item.id
+  )) });
+};
+export {
+  SelectInputTags
+};

package/dist/components/inputs/Selection/shared/SelectListBox.d.ts

@@ -1,9 +1,9 @@
 import { AriaListBoxProps } from 'react-aria';
 import { SelectBaseProps } from './SelectBase';
 import { SelectItem } from './select.types';
-export interface SelectListBoxProps extends Pick<SelectBaseProps, "label" | "newItemRender" | "onLoadMore" | "selectionMode" | "isSearchable">, Omit<AriaListBoxProps<SelectItem>, "children" | "aria-label" | "selectionMode" | "items" | "selectedKeys" | "onSelectionChange" | "escapeKeyBehavior" | "shouldSelectOnPressUp" | "label"> {
+export interface SelectListBoxProps extends Pick<SelectBaseProps, "label" | "newItemRender" | "onLoadMore" | "selectionMode" | "isSearchable" | "virtualizerOptions">, Omit<AriaListBoxProps<SelectItem>, "children" | "aria-label" | "selectionMode" | "items" | "selectedKeys" | "onSelectionChange" | "escapeKeyBehavior" | "shouldSelectOnPressUp" | "label"> {
     className?: string;
     isScrollable?: boolean;
     onClose?: () => void;
 }
-export declare const SelectListBox: ({ label, selectionMode, isSearchable, isScrollable, newItemRender, onLoadMore, className, onClose, ...props }: SelectListBoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectListBox: ({ label, selectionMode, isSearchable, isScrollable, virtualizerOptions, newItemRender, onLoadMore, className, onClose, ...props }: SelectListBoxProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { ListBox } from "react-aria-components";
+import { Virtualizer, ListLayout, ListBox } from "react-aria-components";
 import { SelectListBoxItem } from "./SelectListBoxItem.js";
 import { SelectListBoxItemSelectAll } from "./SelectListBoxItemSelectAll.js";
 import { SelectListBoxLoadingItem } from "./SelectListBoxLoadingItem.js";
@@ -11,6 +11,7 @@ const SelectListBox = ({
   selectionMode,
   isSearchable,
   isScrollable = true,
+  virtualizerOptions,
   newItemRender,
   onLoadMore,
   className,
@@ -43,52 +44,62 @@ const SelectListBox = ({
     }
   };
   return /* @__PURE__ */ jsx(
-    ListBox,
+    Virtualizer,
     {
-      ...props,
-      "aria-label": label,
-      selectionMode,
-      className: clsx(
-        "flex-1 outline-none",
-        isScrollable ? "overflow-y-auto overflow-x-hidden" : "overflow-hidden",
-        className
-      ),
-      items: listItems,
-      selectedKeys: selectedIds,
-      onSelectionChange,
-      escapeKeyBehavior: "none",
-      shouldSelectOnPressUp: true,
-      children: ({ isSelectAllItem, isNewItem, isLoadingItem, ...item }) => {
-        if (isSelectAllItem) {
-          return /* @__PURE__ */ jsx(
-            SelectListBoxItemSelectAll,
-            {
-              ...item
-            },
-            item.id
-          );
+      layout: ListLayout,
+      layoutOptions: {
+        estimatedRowHeight: 40,
+        ...virtualizerOptions
+      },
+      children: /* @__PURE__ */ jsx(
+        ListBox,
+        {
+          ...props,
+          "aria-label": label,
+          selectionMode,
+          className: clsx(
+            "flex-1 outline-none",
+            isScrollable ? "overflow-y-auto overflow-x-hidden" : "overflow-hidden",
+            className
+          ),
+          items: listItems,
+          selectedKeys: selectedIds,
+          onSelectionChange,
+          escapeKeyBehavior: "none",
+          shouldSelectOnPressUp: true,
+          children: ({ isSelectAllItem, isNewItem, isLoadingItem, ...item }) => {
+            if (isSelectAllItem) {
+              return /* @__PURE__ */ jsx(
+                SelectListBoxItemSelectAll,
+                {
+                  ...item
+                },
+                item.id
+              );
+            }
+            if (isLoadingItem) {
+              return /* @__PURE__ */ jsx(
+                SelectListBoxLoadingItem,
+                {
+                  ...item,
+                  onLoadMore
+                },
+                item.id
+              );
+            }
+            return /* @__PURE__ */ jsx(
+              SelectListBoxItem,
+              {
+                ...item,
+                isSearchable,
+                isNewItem,
+                newItemRender
+              },
+              item.id
+            );
+          }
         }
-        if (isLoadingItem) {
-          return /* @__PURE__ */ jsx(
-            SelectListBoxLoadingItem,
-            {
-              ...item,
-              onLoadMore
-            },
-            item.id
-          );
-        }
-        return /* @__PURE__ */ jsx(
-          SelectListBoxItem,
-          {
-            ...item,
-            isSearchable,
-            isNewItem,
-            newItemRender
-          },
-          item.id
-        );
-      }
+      )
     }
   );
 };

package/dist/components/inputs/Selection/shared/select.context.js

@@ -146,6 +146,7 @@ var SelectContext;
           setIsOpen(true);
         }
       },
+      // oxlint-disable-next-line exhaustive-deps
       [emitStateChanges, fieldState.value, isMultiple]
     );
     const onChange = useCallback(

package/dist/components/inputs/Selection/shared/select.types.d.ts

@@ -53,3 +53,11 @@ export interface SelectAsyncProps {
     hasLoadMore?: boolean;
     onLoadMore?: () => void;
 }
+export interface SelectVirtualizationProps {
+    virtualizerOptions?: {
+        rowHeight?: number;
+        estimatedRowHeight?: number;
+        padding?: number;
+        gap?: number;
+    };
+}

package/dist/components/inputs/shared/InputClear.d.ts

@@ -1,6 +1,8 @@
+import { CSSProperties } from 'react';
 interface InputClearProps {
     onClear: () => void;
     className?: string;
+    style?: CSSProperties;
 }
-export declare const InputClear: ({ onClear, className }: InputClearProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputClear: ({ onClear, className, style }: InputClearProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/shared/InputClear.js

@@ -4,20 +4,21 @@ import { useTranslation } from "react-i18next";
 import { CloseIcon } from "../../../assets/icons/Close.js";
 import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
 import { ns } from "../../../config/i18n.js";
-const InputClear = ({ onClear, className }) => {
+const InputClear = ({ onClear, className, style }) => {
   const { t } = useTranslation(ns);
   return /* @__PURE__ */ jsx(
     InlineIconButton,
     {
       color: "secondary",
       className: clsx(
-        "group-hover/date-picker-content:!flex group-hover/select-content:!flex hidden items-center group-focus-within:flex group-hover:flex",
+        "group-hover/date-picker-content:flex! group-hover/select-content:flex! hidden! items-center group-focus-within:flex group-hover:flex",
         className
       ),
       label: t(($) => $.ui.clearAlt),
       icon: CloseIcon,
       onPress: onClear,
-      excludeFromTabOrder: true
+      excludeFromTabOrder: true,
+      style
     }
   );
 };

package/dist/components/inputs/shared/input.cva.js

@@ -1,7 +1,8 @@
-import { cx, cva } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import { clsx } from "clsx";
 import { uiOutlineClass } from "../../outline.clsx.js";
 import { UIStyle } from "../../../config/uiStyle.context.js";
-const inputBase = cva([uiOutlineClass, "flex w-full"], {
+const inputBase = cva([uiOutlineClass, "flex w-full truncate"], {
   variants: {
     variant: {
       outlined: "",
@@ -12,8 +13,8 @@ const inputBase = cva([uiOutlineClass, "flex w-full"], {
       floating: "rounded-input-rounding-default",
       filter: "rounded-input-rounding-default",
       inline: [
-        "rounded-input-rounding-default",
-        "border border-transparent bg-transparent text-text-default-1",
+        "h-full",
+        "border-transparent border-b-0 bg-transparent text-text-default-1",
         "hover:border-input-outlined-outline-hover",
         "focus:border-input-outlined-outline-active",
         "invalid:border-input-outlined-outline-error",
@@ -27,10 +28,10 @@ const inputBase = cva([uiOutlineClass, "flex w-full"], {
       as: "default",
       className: [
         "border border-input-outlined-outline-idle border-solid bg-input-outlined-idle text-text-default-1",
-        "hover:border hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
-        "focus-within:border focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
-        "invalid:border invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
-        "disabled:border disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
+        "hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
+        "focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
+        "invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
+        "disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
         "placeholder:text-text-default-3",
         "focus-visible:outline-interactive-contained-primary-focus"
       ]
@@ -53,10 +54,10 @@ const inputBase = cva([uiOutlineClass, "flex w-full"], {
       as: "floating",
       className: [
         "border border-input-outlined-outline-idle border-solid bg-input-outlined-idle text-text-default-1",
-        "hover:border hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
-        "focus-within:border focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
-        "invalid:border invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
-        "disabled:border disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
+        "hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
+        "focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
+        "invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
+        "disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
         "placeholder:text-text-default-3",
         "focus-visible:outline-interactive-contained-primary-focus"
       ]
@@ -79,10 +80,10 @@ const inputBase = cva([uiOutlineClass, "flex w-full"], {
       as: "filter",
       className: [
         "border border-input-outlined-outline-idle border-solid bg-input-outlined-idle text-text-default-1",
-        "hover:border hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
-        "focus-within:border focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
-        "invalid:border invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
-        "disabled:border disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
+        "hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
+        "focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
+        "invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
+        "disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
         "placeholder:text-text-default-3",
         "focus-visible:outline-interactive-contained-primary-focus"
       ]
@@ -156,7 +157,7 @@ const useInputCva = () => {
   const inputBaseCva = uiStyle?.input?.baseCva ?? inputBase;
   const inputSizeCva = uiStyle?.input?.sizeCva ?? inputSize;
   return ({ className, ...rest }) => {
-    return cx(inputBaseCva(rest), inputSizeCva(rest), className);
+    return clsx(inputBaseCva(rest), inputSizeCva(rest), className);
   };
 };
 export {

package/dist/components/inputs/shared/label.cva.js

@@ -4,10 +4,10 @@ const labelBase = cva([], {
   variants: {
     as: {
       default: ["flex items-start gap-1"],
-      filter: ["-translate-y-1/2 absolute top-1/2 left-input-side-default"],
+      filter: ["-translate-y-1/2 absolute top-1/2"],
       inline: ["flex items-start gap-1"],
       floating: [
-        "absolute left-input-side-default transition-all duration-75",
+        "absolute transition-all duration-75",
         "-translate-y-1/2 top-1/2",
         "text-text-default-2 group-has-[input:disabled]/input-content:text-interactive-text-secondary-disabled",
         "group-disabled/date-picker-content:text-interactive-text-secondary-disabled",

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

@@ -108,6 +108,12 @@ const BottomSheetBase = ({
             drag: "y",
             dragElastic: 1,
             dragConstraints: overlayRef,
+            onUpdate: (latest) => {
+              if (!latest || !footerRef.current) {
+                return;
+              }
+              footerRef.current?.style.setProperty("--scroll-position", `${(latest.y || 0).toFixed(0)}px`);
+            },
             onDragStart: () => {
               if (document.activeElement && DomUtils.isKeyboardInput(document.activeElement)) {
                 focusTrapRef.current?.focus();
@@ -177,23 +183,22 @@ const BottomSheetBase = ({
                         /* @__PURE__ */ jsx("div", { className: "absolute top-full h-screen w-full bg-elevation-fill-default-1" })
                       ]
                     }
+                  ),
+                  footer && /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      ref: footerRef,
+                      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
+                    }
                   )
                 ] })
               }
             )
           }
-        ),
-        footer && /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            className: "absolute bottom-0 w-full bg-elevation-fill-default-2",
-            ref: footerRef,
-            animate: { y: 0 },
-            initial: { y: windowHeight },
-            exit: { y: windowHeight },
-            transition: staticTransition,
-            children: footer
-          }
         )
       ]
     }

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

@@ -1,9 +1,11 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { TooltipProps as AriaTooltipProps } from 'react-aria-components';
-export interface TooltipProps extends PropsWithChildren<AriaTooltipProps> {
+import { TooltipVariantProps } from './tooltip.cva';
+export interface TooltipProps extends PropsWithChildren<AriaTooltipProps>, TooltipVariantProps {
     text: ReactNode;
     isDisabled?: boolean;
     delay?: number;
     closeDelay?: number;
+    isNonInteractiveTrigger?: boolean;
 }
-export declare const Tooltip: ({ children, text, isDisabled, delay, closeDelay, ...tooltipProps }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ children, text, isDisabled, delay, closeDelay, color, isNonInteractiveTrigger, ...tooltipProps }: TooltipProps) => import("react/jsx-runtime").JSX.Element;