moduix 0.11.0 → 0.11.2

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,116 @@
+import { ChevronLeftIcon, ChevronRightIcon } from "../../icons/ui/Icons.js";
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import Pagination_module_default from "./Pagination.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useMemo } from "react";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/components/Pagination/Pagination.tsx
+function clampPage(page, count) {
+	return Math.min(Math.max(page, 1), count);
+}
+function range(start, end) {
+	return Array.from({ length: end - start + 1 }, (_, index) => start + index);
+}
+function usePagination({ count, page, siblingCount = 1, boundaryCount = 1 }) {
+	const safeCount = Math.max(0, Math.floor(count));
+	const safePage = safeCount === 0 ? 0 : clampPage(Math.floor(page), safeCount);
+	const safeSiblingCount = Math.max(0, Math.floor(siblingCount));
+	const safeBoundaryCount = Math.max(0, Math.floor(boundaryCount));
+	return {
+		items: useMemo(() => {
+			if (safeCount === 0) return [];
+			if (safeCount <= safeSiblingCount * 2 + 3 + safeBoundaryCount * 2) return range(1, safeCount);
+			const startPages = range(1, safeBoundaryCount);
+			const endPages = range(safeCount - safeBoundaryCount + 1, safeCount);
+			const siblingsStart = Math.max(Math.min(safePage - safeSiblingCount, safeCount - safeBoundaryCount - safeSiblingCount * 2 - 1), safeBoundaryCount + 2);
+			const siblingsEnd = Math.min(Math.max(safePage + safeSiblingCount, safeBoundaryCount + safeSiblingCount * 2 + 2), endPages[0] - 2);
+			return [
+				...startPages,
+				...siblingsStart > safeBoundaryCount + 2 ? ["ellipsis-start"] : safeBoundaryCount + 1 < safeCount - safeBoundaryCount ? [safeBoundaryCount + 1] : [],
+				...range(siblingsStart, siblingsEnd),
+				...siblingsEnd < safeCount - safeBoundaryCount - 1 ? ["ellipsis-end"] : safeCount - safeBoundaryCount > safeBoundaryCount ? [safeCount - safeBoundaryCount] : [],
+				...endPages
+			];
+		}, [
+			safeBoundaryCount,
+			safeCount,
+			safePage,
+			safeSiblingCount
+		]),
+		page: safePage,
+		canNextPage: safeCount > 0 && safePage < safeCount,
+		canPreviousPage: safePage > 1,
+		nextPage: safeCount === 0 ? 0 : Math.min(safePage + 1, safeCount),
+		previousPage: safePage <= 1 ? safePage : safePage - 1
+	};
+}
+const getPaginationRender = ({ href }) => {
+	if (href != null) return;
+	return /* @__PURE__ */ jsx("button", { type: "button" });
+};
+function Pagination({ "aria-label": ariaLabel = "Pagination", className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"data-slot": "pagination-root",
+		"aria-label": ariaLabel,
+		className: clsx(Pagination_module_default.root, className),
+		...props
+	});
+}
+function PaginationContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar.Root, {
+		"data-slot": "pagination-content",
+		className: mergeClassName(className, Pagination_module_default.content),
+		...props
+	});
+}
+function PaginationItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "pagination-item",
+		className: clsx(Pagination_module_default.item, className),
+		...props
+	});
+}
+function PaginationLink({ className, isActive, render, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar.Link, {
+		"data-slot": "pagination-link",
+		"aria-current": isActive ? "page" : void 0,
+		className: mergeClassName(className, Pagination_module_default.link, isActive && Pagination_module_default.linkActive),
+		render: render ?? getPaginationRender(props),
+		...props
+	});
+}
+function PaginationPrevious({ children, className, render, "aria-label": ariaLabel, ...props }) {
+	return /* @__PURE__ */ jsx(PaginationLink, {
+		"aria-label": children ? ariaLabel : ariaLabel ?? "Go to previous page",
+		className: mergeClassName(className, Pagination_module_default.previous, !children && Pagination_module_default.iconOnly),
+		render,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+	});
+}
+function PaginationNext({ children, className, render, "aria-label": ariaLabel, ...props }) {
+	return /* @__PURE__ */ jsx(PaginationLink, {
+		"aria-label": children ? ariaLabel : ariaLabel ?? "Go to next page",
+		className: mergeClassName(className, Pagination_module_default.next, !children && Pagination_module_default.iconOnly),
+		render,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {})
+	});
+}
+function PaginationEllipsis({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "pagination-ellipsis",
+		className: clsx(Pagination_module_default.ellipsis, className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			children: "..."
+		}), /* @__PURE__ */ jsx("span", {
+			className: Pagination_module_default.visuallyHidden,
+			children: "More pages"
+		})]
+	});
+}
+//#endregion
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, usePagination };

package/dist/components/Pagination/Pagination.module.js

@@ -0,0 +1,16 @@
+import './Pagination.css';
+//#region src/components/Pagination/Pagination.module.css
+var Pagination_module_default = {
+	"content": "Etg_Eq_content",
+	"ellipsis": "Etg_Eq_ellipsis",
+	"iconOnly": "Etg_Eq_iconOnly",
+	"item": "Etg_Eq_item",
+	"link": "Etg_Eq_link",
+	"linkActive": "Etg_Eq_linkActive",
+	"next": "Etg_Eq_next",
+	"previous": "Etg_Eq_previous",
+	"root": "Etg_Eq_root",
+	"visuallyHidden": "Etg_Eq_visuallyHidden"
+};
+//#endregion
+export { Pagination_module_default as default };

package/dist/components/Pagination/index.d.ts

@@ -1 +1 @@
-export { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis, usePagination, } from './Pagination';
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, usePagination } from "./Pagination.js";

package/dist/components/PasswordInput/PasswordInput.css

@@ -0,0 +1,19 @@
+@layer ui.components {
+  ._72aPqG_root {
+    width: var(--input-width, 100%);
+    max-width: var(--input-max-width, none);
+  }
+
+  ._72aPqG_input {
+    min-width: 0;
+  }
+
+  ._72aPqG_toggle {
+    --button-icon-size: var(--input-group-icon-size, 1rem);
+    color: var(--color-muted-foreground);
+  }
+
+  ._72aPqG_toggle[aria-pressed="true"] {
+    color: var(--color-foreground);
+  }
+}

package/dist/components/PasswordInput/PasswordInput.d.ts

@@ -1,14 +1,16 @@
-import { ComponentProps } from 'react';
-import { InputProps } from '../Input';
+import { InputProps } from "../Input/Input.js";
+import { ComponentProps } from "react";
+
+//#region src/components/PasswordInput/PasswordInput.d.ts
 type PasswordInputProps = Omit<InputProps, 'className' | 'type'> & {
-    className?: ComponentProps<'div'>['className'];
-    defaultVisible?: boolean;
-    onVisibleChange?: (visible: boolean) => void;
-    visibilityToggleLabels?: {
-        show: string;
-        hide: string;
-    };
+  className?: ComponentProps<'div'>['className'];
+  defaultVisible?: boolean;
+  onVisibleChange?: (visible: boolean) => void;
+  visibilityToggleLabels?: {
+    show: string;
+    hide: string;
+  };
 };
-declare const PasswordInput: import('react').ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
-export { PasswordInput };
-export type { PasswordInputProps };
+declare const PasswordInput: import("react").ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { PasswordInput, type PasswordInputProps };

package/dist/components/PasswordInput/PasswordInput.js

@@ -0,0 +1,47 @@
+import { EyeClosedIcon, EyeIcon } from "../../icons/ui/Icons.js";
+import { InputGroup, InputGroupButton, InputGroupInput } from "../InputGroup/InputGroup.js";
+import PasswordInput_module_default from "./PasswordInput.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef, useState } from "react";
+//#region src/components/PasswordInput/PasswordInput.tsx
+const DEFAULT_VISIBILITY_TOGGLE_LABELS = {
+	show: "Show password",
+	hide: "Hide password"
+};
+const PasswordInput = forwardRef(function PasswordInput({ className, defaultVisible = false, disabled, onVisibleChange, readOnly, size = "md", visibilityToggleLabels = DEFAULT_VISIBILITY_TOGGLE_LABELS, ...props }, ref) {
+	const [visible, setVisible] = useState(defaultVisible);
+	const handleToggleMouseDown = (event) => {
+		event.preventDefault();
+	};
+	const handleToggleClick = () => {
+		const nextVisible = !visible;
+		setVisible(nextVisible);
+		onVisibleChange?.(nextVisible);
+	};
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		"data-slot": "password-input-root",
+		className: clsx(PasswordInput_module_default.root, className),
+		size,
+		children: [/* @__PURE__ */ jsx(InputGroupInput, {
+			ref,
+			...props,
+			className: PasswordInput_module_default.input,
+			disabled,
+			readOnly,
+			size,
+			type: visible ? "text" : "password"
+		}), /* @__PURE__ */ jsx(InputGroupButton, {
+			"aria-label": visible ? visibilityToggleLabels.hide : visibilityToggleLabels.show,
+			"aria-pressed": visible,
+			className: PasswordInput_module_default.toggle,
+			"data-slot": "password-input-toggle",
+			disabled,
+			onClick: handleToggleClick,
+			onMouseDown: handleToggleMouseDown,
+			children: visible ? /* @__PURE__ */ jsx(EyeClosedIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
+		})]
+	});
+});
+//#endregion
+export { PasswordInput };

package/dist/components/PasswordInput/PasswordInput.module.js

@@ -0,0 +1,9 @@
+import './PasswordInput.css';
+//#region src/components/PasswordInput/PasswordInput.module.css
+var PasswordInput_module_default = {
+	"input": "_72aPqG_input",
+	"root": "_72aPqG_root",
+	"toggle": "_72aPqG_toggle"
+};
+//#endregion
+export { PasswordInput_module_default as default };

package/dist/components/PasswordInput/index.d.ts

@@ -1,2 +1 @@
-export { PasswordInput } from './PasswordInput';
-export type { PasswordInputProps } from './PasswordInput';
+import { PasswordInput, PasswordInputProps } from "./PasswordInput.js";

package/dist/components/Popover/Popover.css

@@ -0,0 +1,200 @@
+@layer ui.components {
+  ._7iI68a_trigger, ._7iI68a_close {
+    box-sizing: border-box;
+    min-height: var(--popover-control-height, var(--size-lg));
+    padding: var(--popover-control-padding-y, .5rem) var(--popover-control-padding-x, .875rem);
+    border: var(--popover-control-border-width, var(--border-width-sm)) solid
+      var(--popover-control-border-color, var(--color-border));
+    border-radius: var(--popover-control-radius, var(--radius-md));
+    background-color: var(--popover-control-bg, var(--color-background));
+    color: var(--popover-control-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--popover-control-font-size, var(--text-md));
+    line-height: var(--popover-control-line-height, var(--line-height-text-md));
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--popover-transition, var(--transition-default)),
+      border-color var(--popover-transition, var(--transition-default)),
+      color var(--popover-transition, var(--transition-default));
+    outline: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--popover-control-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:active, &[data-popup-open] {
+      background-color: var(--popover-control-bg-active, var(--popover-control-bg-hover, var(--color-accent)));
+    }
+
+    &:focus-visible {
+      outline: var(--popover-focus-ring-width, var(--popover-control-border-width, var(--border-width-sm)))
+        solid var(--popover-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--popover-focus-ring-width, var(--popover-control-border-width, var(--border-width-sm))) *
+          -1);
+    }
+
+    &[data-disabled], &[disabled] {
+      pointer-events: none;
+      opacity: var(--popover-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  ._7iI68a_backdrop {
+    z-index: var(--z-backdrop);
+    background-color: var(--popover-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
+    min-height: 100dvh;
+    backdrop-filter: var(--backdrop-filter, blur(var(--popover-backdrop-blur, 4px)));
+    transition: opacity var(--popover-backdrop-transition, var(--transition-default)),
+      backdrop-filter var(--popover-backdrop-transition, var(--transition-default));
+    position: fixed;
+    inset: 0;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      backdrop-filter: none;
+    }
+  }
+
+  ._7iI68a_positioner {
+    z-index: var(--z-popup);
+    width: var(--positioner-width);
+    height: var(--positioner-height);
+    max-width: var(--available-width);
+    outline: 0;
+  }
+
+  ._7iI68a_popup {
+    box-sizing: border-box;
+    width: var(--popup-width, var(--popover-width, auto));
+    height: var(--popup-height, var(--popover-height, auto));
+    min-width: min(var(--popover-min-width, 16rem), var(--available-width));
+    max-width: min(var(--popover-max-width, 28rem), var(--available-width));
+    max-height: min(var(--popover-max-height, 24rem), var(--available-height, 100dvh));
+    padding: var(--popover-padding-y, 1rem) var(--popover-padding-x, 1rem);
+    border-radius: var(--popover-radius, var(--radius-md));
+    background-color: var(--popover-bg, var(--color-popover));
+    color: var(--popover-color, var(--color-popover-foreground));
+    outline: var(--popover-border-width, var(--border-width-sm)) solid
+      var(--popover-border-color, var(--color-border));
+    box-shadow: var(--popover-shadow, var(--shadow-lg));
+    transform-origin: var(--transform-origin);
+    transition: transform var(--popover-transition, .15s),
+      opacity var(--popover-transition, .15s);
+    border: 0;
+    overflow: visible;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      transform: scale(var(--popover-scale, var(--scale-popup)));
+    }
+  }
+
+  ._7iI68a_viewport {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: clip;
+
+    & > [data-current], & > [data-previous] {
+      width: var(--popup-width, auto);
+      transition: translate var(--popover-viewport-transition, .22s),
+        opacity var(--popover-viewport-transition, .22s);
+    }
+
+    & > [data-current] {
+      opacity: 1;
+      translate: 0;
+    }
+
+    &[data-activation-direction~="left"] > [data-current][data-starting-style], &[data-activation-direction~="right"] > [data-previous][data-ending-style] {
+      opacity: 0;
+      translate: calc(var(--popover-viewport-offset, 1rem) * -1) 0;
+    }
+
+    &[data-activation-direction~="right"] > [data-current][data-starting-style], &[data-activation-direction~="left"] > [data-previous][data-ending-style] {
+      opacity: 0;
+      translate: var(--popover-viewport-offset, 1rem) 0;
+    }
+  }
+
+  ._7iI68a_arrow {
+    color: var(--popover-bg, var(--color-popover));
+    display: flex;
+
+    &[data-side="top"] {
+      bottom: calc(var(--popover-arrow-size, 8px) * -1);
+      rotate: 180deg;
+    }
+
+    &[data-side="bottom"] {
+      top: calc(var(--popover-arrow-size, 8px) * -1);
+    }
+
+    &[data-side="left"] {
+      right: calc(var(--popover-arrow-inline-offset, 13px) * -1);
+      rotate: 90deg;
+    }
+
+    &[data-side="right"] {
+      left: calc(var(--popover-arrow-inline-offset, 13px) * -1);
+      rotate: -90deg;
+    }
+  }
+
+  ._7iI68a_arrowSvg {
+    width: var(--popover-arrow-width, 1.25rem);
+    height: var(--popover-arrow-height, .625rem);
+    display: block;
+    overflow: visible;
+  }
+
+  ._7iI68a_arrowFill {
+    fill: currentColor;
+  }
+
+  ._7iI68a_arrowOuterStroke {
+    fill: var(--popover-arrow-stroke-color, var(--popover-border-color, var(--color-border)));
+  }
+
+  ._7iI68a_arrowInnerStroke {
+    fill: var(--popover-bg, var(--color-popover));
+  }
+
+  ._7iI68a_title {
+    color: var(--popover-title-color, var(--popover-color, var(--color-popover-foreground)));
+    font-size: var(--popover-title-font-size, var(--text-md));
+    font-weight: var(--popover-title-font-weight, var(--weight-semibold));
+    line-height: var(--popover-title-line-height, var(--line-height-text-md));
+    margin: 0;
+  }
+
+  ._7iI68a_description {
+    margin: var(--popover-description-margin, 0);
+    color: var(--popover-description-color, var(--color-muted-foreground));
+    font-size: var(--popover-description-font-size, var(--text-sm));
+    line-height: var(--popover-description-line-height, var(--line-height-text-sm));
+  }
+
+  ._7iI68a_header {
+    gap: var(--popover-header-gap, var(--spacing-1));
+    display: grid;
+  }
+
+  ._7iI68a_body {
+    margin: var(--popover-body-margin, 0);
+  }
+
+  ._7iI68a_footer {
+    align-items: center;
+    justify-content: var(--popover-footer-justify, flex-end);
+    gap: var(--popover-footer-gap, var(--spacing-2));
+    margin: var(--popover-footer-margin, var(--spacing-3) 0 0);
+    display: flex;
+  }
+}

package/dist/components/Popover/Popover.d.ts

@@ -1,23 +1,80 @@
-import { ComponentProps } from 'react';
-import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
-type PopoverPositionerProps = Pick<PopoverPrimitive.Positioner.Props, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'arrowPadding' | 'collisionAvoidance' | 'collisionBoundary' | 'collisionPadding'>;
-type PopoverContentProps = PopoverPrimitive.Popup.Props & PopoverPositionerProps & {
-    showArrow?: boolean;
+import { ComponentProps } from "react";
+import { Popover } from "@base-ui/react/popover";
+
+//#region src/components/Popover/Popover.d.ts
+type PopoverPositionerProps = Pick<Popover.Positioner.Props, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'arrowPadding' | 'collisionAvoidance' | 'collisionBoundary' | 'collisionPadding'>;
+type PopoverContentProps = Popover.Popup.Props & PopoverPositionerProps & {
+  showArrow?: boolean;
 };
-declare const Popover: typeof PopoverPrimitive.Root;
-declare const createPopoverHandle: typeof PopoverPrimitive.createHandle;
-declare function PopoverTrigger({ className, render, ...props }: PopoverPrimitive.Trigger.Props): import("react").JSX.Element;
-declare function PopoverPortal({ className, ...props }: PopoverPrimitive.Portal.Props): import("react").JSX.Element;
-declare function PopoverBackdrop({ className, ...props }: PopoverPrimitive.Backdrop.Props): import("react").JSX.Element;
-declare function PopoverPositioner({ className, ...props }: PopoverPrimitive.Positioner.Props): import("react").JSX.Element;
-declare function PopoverPopup({ className, ...props }: PopoverPrimitive.Popup.Props): import("react").JSX.Element;
-declare function PopoverViewport({ className, ...props }: PopoverPrimitive.Viewport.Props): import("react").JSX.Element;
-declare function PopoverArrow({ className, children, ...props }: PopoverPrimitive.Arrow.Props): import("react").JSX.Element;
-declare function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props): import("react").JSX.Element;
-declare function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props): import("react").JSX.Element;
-declare function PopoverHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function PopoverBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function PopoverFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function PopoverClose({ className, ...props }: PopoverPrimitive.Close.Props): import("react").JSX.Element;
-declare function PopoverContent({ className, children, showArrow, side, sideOffset, align, alignOffset, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, ...popupProps }: PopoverContentProps): import("react").JSX.Element;
-export { Popover, createPopoverHandle, PopoverTrigger, PopoverPortal, PopoverBackdrop, PopoverPositioner, PopoverPopup, PopoverViewport, PopoverArrow, PopoverTitle, PopoverDescription, PopoverHeader, PopoverBody, PopoverFooter, PopoverClose, PopoverContent, };
+declare const Popover$1: typeof Popover.Root;
+declare const createPopoverHandle: typeof Popover.createHandle;
+declare function PopoverTrigger({
+  className,
+  render,
+  ...props
+}: Popover.Trigger.Props): import("react").JSX.Element;
+declare function PopoverPortal({
+  className,
+  ...props
+}: Popover.Portal.Props): import("react").JSX.Element;
+declare function PopoverBackdrop({
+  className,
+  ...props
+}: Popover.Backdrop.Props): import("react").JSX.Element;
+declare function PopoverPositioner({
+  className,
+  ...props
+}: Popover.Positioner.Props): import("react").JSX.Element;
+declare function PopoverPopup({
+  className,
+  ...props
+}: Popover.Popup.Props): import("react").JSX.Element;
+declare function PopoverViewport({
+  className,
+  ...props
+}: Popover.Viewport.Props): import("react").JSX.Element;
+declare function PopoverArrow({
+  className,
+  children,
+  ...props
+}: Popover.Arrow.Props): import("react").JSX.Element;
+declare function PopoverTitle({
+  className,
+  ...props
+}: Popover.Title.Props): import("react").JSX.Element;
+declare function PopoverDescription({
+  className,
+  ...props
+}: Popover.Description.Props): import("react").JSX.Element;
+declare function PopoverHeader({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function PopoverBody({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function PopoverFooter({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function PopoverClose({
+  className,
+  ...props
+}: Popover.Close.Props): import("react").JSX.Element;
+declare function PopoverContent({
+  className,
+  children,
+  showArrow,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  arrowPadding,
+  collisionAvoidance,
+  collisionBoundary,
+  collisionPadding,
+  ...popupProps
+}: PopoverContentProps): import("react").JSX.Element;
+//#endregion
+export { Popover$1 as Popover, PopoverArrow, PopoverBackdrop, PopoverBody, PopoverClose, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, PopoverViewport, createPopoverHandle };