@povio/ui 0.0.4 → 0.0.6

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

@@ -0,0 +1,21 @@
+import { ReactNode, RefObject } from 'react';
+type BottomSheetState = "closed" | "opening" | "opened" | "closing";
+interface BottomSheetBaseProps {
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    onStateChange?: (state: BottomSheetState) => void;
+    isDismissable?: boolean;
+    isScrollable?: boolean;
+    height?: "auto" | "full";
+    label?: string;
+    portalContainerRef?: RefObject<HTMLElement>;
+    children: ReactNode | ((close: () => void) => ReactNode);
+    footer?: ReactNode;
+    sheetMarginTop?: number;
+    sheetMarginBottom?: number;
+}
+export interface BottomSheetProps extends BottomSheetBaseProps {
+    trigger?: ReactNode;
+}
+export declare const BottomSheet: ({ isOpen, portalContainerRef, onOpenChange, trigger, children, ...rest }: BottomSheetProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,256 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useViewportSize, useResizeObserver } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { useState, useEffect, useMemo, useRef } from "react";
+import { DialogTrigger, Dialog, ModalOverlay, Modal } from "react-aria-components";
+import { DomUtils } from "../../../utils/dom.utils.js";
+import { useMotionValue, animate, AnimatePresence, motion } from "framer-motion";
+const MotionModal = motion.create(Modal);
+const MotionModalOverlay = motion.create(ModalOverlay);
+const inertiaTransition = {
+  type: "inertia",
+  bounceStiffness: 300,
+  bounceDamping: 40,
+  timeConstant: 300
+};
+const staticTransition = {
+  duration: 0.5,
+  ease: [0.32, 0.72, 0, 1]
+};
+const BottomSheetBase = ({
+  isOpen,
+  onOpenChange,
+  onStateChange,
+  isDismissable = false,
+  isScrollable = true,
+  height = "full",
+  label,
+  portalContainerRef,
+  children,
+  footer,
+  sheetMarginTop = 96,
+  sheetMarginBottom = 128
+}) => {
+  const viewport = useViewportSize();
+  const { sheetHeight, windowHeight } = useMemo(() => {
+    const sh = viewport.height - sheetMarginTop;
+    const wh = Math.max(window.innerHeight, viewport.height) - sheetMarginTop;
+    return { sheetHeight: sh, windowHeight: wh };
+  }, [viewport.height, sheetMarginTop]);
+  const y = useMotionValue(sheetHeight);
+  const closeVelocityRef = useRef(true);
+  const overlayRef = useRef(null);
+  const containerRef = useRef(null);
+  const dialogRef = useRef(null);
+  const footerRef = useRef(null);
+  const focusTrapRef = useRef(null);
+  const [footerHeight, setFooterHeight] = useState(0);
+  useResizeObserver({
+    ref: footerRef,
+    onResize: () => {
+      setFooterHeight(footerRef.current?.offsetHeight || 0);
+    }
+  });
+  const oldHeightRef = useRef(0);
+  useResizeObserver({
+    ref: dialogRef,
+    onResize: () => {
+      const rect = dialogRef.current?.getBoundingClientRect();
+      if (!rect || oldHeightRef.current === rect.height) {
+        return;
+      }
+      oldHeightRef.current = rect.height;
+      if (rect.bottom < viewport.height) {
+        y.stop();
+        animate(y, -(rect.height - viewport.height + sheetMarginTop));
+      }
+    }
+  });
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(
+    MotionModalOverlay,
+    {
+      isOpen: true,
+      UNSTABLE_portalContainer: portalContainerRef?.current,
+      className: "fixed top-0 left-0 z-10 w-screen",
+      onOpenChange,
+      isDismissable,
+      style: { height: viewport.height },
+      ref: overlayRef,
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "pointer-events-none absolute inset-0 bg-elevation-fill-default-3/80",
+            animate: { opacity: 1 },
+            initial: { opacity: 0 },
+            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"
+            ),
+            animate: { y: 0, opacity: 1 },
+            initial: { y: windowHeight, opacity: 1 },
+            exit: { y: windowHeight, opacity: 1 },
+            onAnimationComplete: (data) => {
+              onStateChange?.(data.y === 0 ? "opened" : "closed");
+            },
+            onAnimationStart: (data) => {
+              onStateChange?.(data.y === 0 ? "opening" : "closing");
+            },
+            transition: staticTransition,
+            style: { y, minHeight: "100%" },
+            drag: "y",
+            dragElastic: 1,
+            dragConstraints: overlayRef,
+            onDragStart: () => {
+              if (document.activeElement && DomUtils.isKeyboardInput(document.activeElement)) {
+                focusTrapRef.current?.focus();
+              }
+              y.animation?.stop();
+              closeVelocityRef.current = isScrollable ? y.get() >= -10 : true;
+              containerRef.current?.style.setProperty("pointer-events", "none");
+            },
+            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 {
+                  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",
+                ref: dialogRef,
+                "aria-label": label,
+                children: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: { minHeight: `${sheetMarginTop}px` },
+                      className: clsx("shrink-0", height === "auto" && "grow")
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: clsx(
+                        "pointer-events-auto relative flex min-h-0 flex-col items-stretch rounded-t-xl bg-elevation-fill-default-1",
+                        height === "full" && "flex-1"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: clsx(
+                              "absolute bottom-full left-0 w-full outline-none",
+                              isDismissable ? "h-0" : "h-screen"
+                            ),
+                            ref: focusTrapRef,
+                            tabIndex: -1
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: clsx("flex min-h-0 grow flex-col items-stretch", isScrollable ? "shrink-0" : "shrink"),
+                            ref: containerRef,
+                            children: typeof children === "function" ? children(close) : children
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "shrink-0",
+                            style: { height: `${footerHeight + sheetMarginBottom}px` }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("div", { className: "absolute top-full h-screen w-full bg-elevation-fill-default-1" })
+                      ]
+                    }
+                  )
+                ] })
+              }
+            )
+          }
+        ),
+        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
+          }
+        )
+      ]
+    }
+  ) });
+};
+const BottomSheet = ({
+  isOpen,
+  portalContainerRef,
+  onOpenChange,
+  trigger,
+  children,
+  ...rest
+}) => {
+  const [isSheetOpen, setIsSheetOpen] = useState(!!isOpen);
+  const hasTrigger = !!trigger;
+  useEffect(() => {
+    if (hasTrigger) {
+      setIsSheetOpen(!!isOpen);
+    }
+  }, [isOpen, hasTrigger]);
+  if (trigger) {
+    const handleOpenChange = (open) => {
+      setIsSheetOpen(open);
+      onOpenChange?.(open);
+    };
+    return /* @__PURE__ */ jsxs(
+      DialogTrigger,
+      {
+        isOpen: isSheetOpen,
+        onOpenChange: handleOpenChange,
+        children: [
+          trigger,
+          /* @__PURE__ */ jsx(
+            BottomSheetBase,
+            {
+              isOpen: isSheetOpen,
+              onOpenChange: handleOpenChange,
+              portalContainerRef,
+              ...rest,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    BottomSheetBase,
+    {
+      isOpen,
+      onOpenChange,
+      portalContainerRef,
+      ...rest,
+      children
+    }
+  );
+};
+export {
+  BottomSheet
+};

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

@@ -0,0 +1,13 @@
+import { ReactNode, RefObject } from 'react';
+export interface DrawerProps {
+    isOpen?: boolean;
+    portalContainerRef?: RefObject<HTMLElement>;
+    onOpenChange?: (isOpen: boolean) => void;
+    trigger?: ReactNode;
+    children: (close: () => void) => ReactNode;
+    isDismissable?: boolean;
+    overlayClassName?: string;
+    dialogClassName?: string;
+    className?: string;
+}
+export declare const Drawer: ({ isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/overlays/Drawer/Drawer.js

@@ -0,0 +1,84 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { DialogTrigger, ModalOverlay, Modal, Dialog } from "react-aria-components";
+import { modalOverlay } from "../Modal/modal.cva.js";
+const Drawer = ({
+  isOpen,
+  portalContainerRef,
+  onOpenChange,
+  trigger,
+  children,
+  isDismissable,
+  overlayClassName,
+  dialogClassName,
+  className
+}) => {
+  if (trigger) {
+    return /* @__PURE__ */ jsxs(
+      DialogTrigger,
+      {
+        isOpen,
+        onOpenChange,
+        children: [
+          trigger,
+          /* @__PURE__ */ jsx(
+            DrawerOverlay,
+            {
+              portalContainerRef,
+              isDismissable,
+              overlayClassName,
+              dialogClassName,
+              className,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    DrawerOverlay,
+    {
+      isOpen,
+      onOpenChange,
+      portalContainerRef,
+      isDismissable,
+      className,
+      children
+    }
+  );
+};
+const DrawerOverlay = ({
+  isOpen,
+  onOpenChange,
+  portalContainerRef,
+  children,
+  isDismissable,
+  overlayClassName,
+  dialogClassName,
+  className
+}) => {
+  return /* @__PURE__ */ jsx(
+    ModalOverlay,
+    {
+      isOpen,
+      onOpenChange,
+      UNSTABLE_portalContainer: portalContainerRef?.current,
+      className: clsx(modalOverlay(), overlayClassName),
+      isDismissable,
+      children: /* @__PURE__ */ jsx(
+        Modal,
+        {
+          className: clsx(
+            "fixed inset-y-0 right-0 z-10 w-fit entering:animate-drawer-enter-right exiting:animate-drawer-exit-right bg-elevation-fill-default-1",
+            className
+          ),
+          children: /* @__PURE__ */ jsx(Dialog, { className: clsx("outline-none", dialogClassName), children: ({ close }) => children(close) })
+        }
+      )
+    }
+  );
+};
+export {
+  Drawer
+};

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

@@ -0,0 +1,11 @@
+import { PropsWithChildren, RefObject } from 'react';
+import { ModalVariantProps } from '#ui/components/overlays/Modal/modal.cva';
+export interface ModalProps extends ModalVariantProps {
+    isOpen: boolean;
+    portalContainerRef?: RefObject<HTMLElement>;
+    onClose: () => void;
+    modalClassName?: string;
+    showCloseIcon?: boolean;
+    isDismissable?: boolean;
+}
+export declare const Modal: ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, showCloseIcon, isDismissable, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/overlays/Modal/Modal.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { ModalOverlay, Modal as Modal$1, Dialog } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+import { CloseIcon } from "../../../assets/icons/Close.js";
+import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
+import { modalOverlay, modalContent, modalMain } from "./modal.cva.js";
+import { ns } from "../../../config/i18n.js";
+const Modal = ({
+  isOpen,
+  portalContainerRef,
+  onClose,
+  aside,
+  children,
+  modalClassName,
+  showCloseIcon,
+  isDismissable = true
+}) => {
+  const { t } = useTranslation(ns);
+  return /* @__PURE__ */ jsx(
+    ModalOverlay,
+    {
+      UNSTABLE_portalContainer: portalContainerRef?.current,
+      className: modalOverlay({ aside }),
+      isDismissable,
+      isOpen,
+      shouldCloseOnInteractOutside: () => {
+        return !portalContainerRef?.current;
+      },
+      onOpenChange: (open) => {
+        if (!open) {
+          onClose();
+        }
+      },
+      children: /* @__PURE__ */ jsx(Modal$1, { className: clsx(modalMain({ aside })), children: /* @__PURE__ */ jsxs(Dialog, { className: modalContent({ aside, className: modalClassName }), children: [
+        showCloseIcon && /* @__PURE__ */ jsx(
+          InlineIconButton,
+          {
+            color: "secondary",
+            onPress: onClose,
+            icon: CloseIcon,
+            className: "absolute top-0 right-0 p-2",
+            label: t(($) => $.ui.modal.closeBtn)
+          }
+        ),
+        children
+      ] }) })
+    }
+  );
+};
+export {
+  Modal
+};

package/dist/components/overlays/Modal/modal.cva.d.ts

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+export interface ModalVariantProps extends VariantProps<typeof modalContent> {
+}
+export declare const modalContent: (props?: ({
+    aside?: "left" | "right" | "center" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const modalOverlay: (props?: ({
+    aside?: "left" | "right" | "center" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const modalMain: (props?: ({
+    aside?: "left" | "right" | "center" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/{src/components/overlays/Modal/modal.cva.ts → dist/components/overlays/Modal/modal.cva.js}

@@ -1,55 +1,53 @@
-import { type VariantProps, cva } from "class-variance-authority";
-
-// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
-export interface ModalVariantProps extends VariantProps<typeof modalContent> {}
-
-export const modalContent = cva(
+import { cva } from "class-variance-authority";
+const modalContent = cva(
   [
     "relative flex flex-col items-center gap-modal-gap-content px-modal-side-mobile py-modal-height-mobile md:px-modal-side-desktop md:py-modal-height-desktop",
     "w-fit max-w-full [&>*]:max-w-full",
     "border-elevation-outline-default-1 bg-elevation-fill-default-1 outline-none",
-    "pointer-events-auto",
+    "pointer-events-auto"
   ],
   {
     variants: {
       aside: {
         left: "h-screen rounded-none border-r",
         right: "h-screen rounded-none border-l",
-        center: "rounded-modal-rounding-default border",
-      },
+        center: "rounded-modal-rounding-default border"
+      }
     },
     defaultVariants: {
-      aside: "center",
-    },
-  },
+      aside: "center"
+    }
+  }
 );
-
-export const modalOverlay = cva(
+const modalOverlay = cva(
   ["fixed inset-0 z-10 flex h-(--visual-viewport-height) w-screen overflow-y-auto bg-elevation-fill-default-3/80"],
   {
     variants: {
       aside: {
         left: "p-0",
         right: "p-0",
-        center: "p-4",
-      },
+        center: "p-4"
+      }
     },
     defaultVariants: {
-      aside: "center",
-    },
-  },
+      aside: "center"
+    }
+  }
 );
-
-export const modalMain = cva(["pointer-events-none my-auto flex w-full"], {
+const modalMain = cva(["pointer-events-none my-auto flex w-full"], {
   variants: {
     aside: {
       left: "entering:animate-drawer-enter-left exiting:animate-drawer-exit-left justify-start",
       right: "entering:animate-drawer-enter-right exiting:animate-drawer-exit-right justify-end",
-      center: "justify-center",
-    },
+      center: "justify-center"
+    }
   },
   defaultVariants: {
-    aside: "center",
-  },
+    aside: "center"
+  }
 });
+export {
+  modalContent,
+  modalMain,
+  modalOverlay
+};

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

@@ -0,0 +1,10 @@
+import { ReactElement, ReactNode } from 'react';
+export interface ResponsivePopoverProps {
+    trigger: ReactElement;
+    children: ReactNode;
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    popoverClassName?: string;
+    sheetLabel: string;
+}
+export declare const ResponsivePopover: ({ trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel, }: ResponsivePopoverProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,71 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { DialogTrigger, Popover, Dialog } from "react-aria-components";
+import { FormFieldHeader } from "../../inputs/FormField/FormFieldHeader.js";
+import { FormFieldHeaderClose } from "../../inputs/FormField/FormFieldHeaderClose.js";
+import { BottomSheet } from "../BottomSheet/BottomSheet.js";
+import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
+const ResponsivePopover = ({
+  trigger,
+  isOpen,
+  onOpenChange,
+  children,
+  popoverClassName,
+  sheetLabel
+}) => {
+  const isDesktop = useBreakpoint("md");
+  if (!isDesktop) {
+    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", { className: "p-4", children })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    DialogTrigger,
+    {
+      isOpen,
+      onOpenChange,
+      children: [
+        trigger,
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            className: clsx("my-4 outline-none", popoverClassName),
+            offset: 0,
+            placement: "bottom start",
+            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"
+                ),
+                children
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ResponsivePopover
+};

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

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

package/dist/components/overlays/Tooltip/Tooltip.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { TooltipTrigger, Tooltip as Tooltip$1, OverlayArrow } from "react-aria-components";
+import { PointerHorizontalIcon } from "../../../assets/icons/PointerHorizontal.js";
+import { PointerVerticalIcon } from "../../../assets/icons/PointerVertical.js";
+import { Typography } from "../../text/Typography/Typography.js";
+const Tooltip = ({ children, text, isDisabled, delay, closeDelay, ...tooltipProps }) => {
+  return /* @__PURE__ */ jsxs(
+    TooltipTrigger,
+    {
+      delay: delay ?? 0,
+      closeDelay: closeDelay ?? 0,
+      isDisabled,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(
+          Tooltip$1,
+          {
+            className: "group max-w-64 rounded-tooltip-rounding-default bg-interactive-contained-secondary-idle px-tooltip-side-default py-tooltip-height-default shadow-2",
+            ...tooltipProps,
+            offset: 13,
+            children: [
+              /* @__PURE__ */ jsxs(OverlayArrow, { children: [
+                /* @__PURE__ */ jsx(PointerHorizontalIcon, { className: "h-2-5 w-5 text-interactive-contained-secondary-idle group-placement-left:hidden group-placement-right:hidden group-placement-top:rotate-180" }),
+                /* @__PURE__ */ jsx(PointerVerticalIcon, { className: "h-5 w-2-5 text-interactive-contained-secondary-idle group-placement-bottom:hidden group-placement-top:hidden group-placement-left:rotate-180" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  size: "body-4",
+                  variant: "prominent-1",
+                  className: "text-text-inverted-3",
+                  children: text
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Tooltip
+};

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

@@ -0,0 +1,7 @@
+import { JSX, Ref } from 'react';
+export interface TooltipEllipsisProps {
+    text: string;
+    children: (ref: Ref<HTMLHeadingElement> | undefined) => JSX.Element;
+    isDisabled?: boolean;
+}
+export declare const TooltipEllipsis: ({ text, children, isDisabled }: TooltipEllipsisProps) => import("react/jsx-runtime").JSX.Element;