@povio/ui 0.0.6 → 0.0.8

package/dist/components/overlays/ActionModal/ActionModal.js

@@ -1,80 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { Button } from "../../buttons/Button/Button.js";
-import { Modal } from "../Modal/Modal.js";
-import { Typography } from "../../text/Typography/Typography.js";
-const textAlignClassMap = {
-  left: "text-left",
-  center: "text-center",
-  right: "text-right"
-};
-const ActionModal = ({
-  heading,
-  description,
-  primaryAction,
-  secondaryAction,
-  buttonSize = "m",
-  textAlign = "left",
-  modalClassName,
-  ...modalProps
-}) => {
-  const textAlignClass = textAlignClassMap[textAlign];
-  return /* @__PURE__ */ jsxs(
-    Modal,
-    {
-      modalClassName: clsx("w-modal", modalClassName),
-      ...modalProps,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-modal-gap-text", children: [
-          /* @__PURE__ */ jsx(
-            Typography,
-            {
-              size: "title-5",
-              variant: "prominent-1",
-              as: "h2",
-              className: textAlignClass,
-              children: heading
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Typography,
-            {
-              size: "body-3",
-              className: textAlignClass,
-              children: description
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-wrap gap-modal-gap-buttons pt-1", children: [
-          secondaryAction && /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: secondaryAction?.variant ?? "contained",
-              size: buttonSize,
-              color: secondaryAction?.color ?? "secondary",
-              width: "fill",
-              onPress: secondaryAction?.onPress,
-              className: clsx("min-w-40 flex-1 shrink-0", secondaryAction?.className),
-              children: secondaryAction?.label
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: primaryAction?.variant ?? "contained",
-              size: buttonSize,
-              color: primaryAction?.color ?? "primary",
-              width: "fill",
-              onPress: primaryAction.onPress,
-              className: clsx("min-w-40 flex-1 shrink-0", primaryAction?.className),
-              children: primaryAction.label
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-export {
-  ActionModal
-};

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

@@ -1,256 +0,0 @@
-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.js

@@ -1,84 +0,0 @@
-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.js

@@ -1,53 +0,0 @@
-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.js

@@ -1,53 +0,0 @@
-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"
-  ],
-  {
-    variants: {
-      aside: {
-        left: "h-screen rounded-none border-r",
-        right: "h-screen rounded-none border-l",
-        center: "rounded-modal-rounding-default border"
-      }
-    },
-    defaultVariants: {
-      aside: "center"
-    }
-  }
-);
-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"
-      }
-    },
-    defaultVariants: {
-      aside: "center"
-    }
-  }
-);
-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"
-    }
-  },
-  defaultVariants: {
-    aside: "center"
-  }
-});
-export {
-  modalContent,
-  modalMain,
-  modalOverlay
-};

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

@@ -1,71 +0,0 @@
-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.js

@@ -1,44 +0,0 @@
-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.js

@@ -1,27 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { Tooltip } from "./Tooltip.js";
-const TooltipEllipsis = ({ text, children, isDisabled }) => {
-  const [isEllipsisActive, setIsEllipsisActive] = useState(false);
-  const onContentRef = (ref) => {
-    if (ref) {
-      setIsEllipsisActive(ref.offsetWidth < ref.scrollWidth);
-    }
-  };
-  const content = children(onContentRef);
-  if (isEllipsisActive && !isDisabled) {
-    return /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        text,
-        placement: "bottom",
-        isDisabled,
-        children: content
-      }
-    );
-  }
-  return content;
-};
-export {
-  TooltipEllipsis
-};