@povio/ui 2.1.14 → 2.1.16

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

@@ -1,128 +0,0 @@
-import { cva } from "class-variance-authority";
-import { compoundMapper } from "../../../utils/compoundMapper.js";
-const labelBase = cva("text-text-default-1", {
-  variants: {
-    as: {
-      default: ["flex items-start gap-1"],
-      filter: ["absolute top-1/2 -translate-y-1/2"],
-      inline: ["flex items-start gap-1"],
-      floating: [
-        "pointer-events-none",
-        "absolute transition-all duration-75",
-        "top-1/2 -translate-y-1/2",
-        "text-text-default-2 group-has-[input:disabled]/input-content:text-interactive-text-secondary-disabled",
-        "group-disabled/date-picker-content:text-interactive-text-secondary-disabled",
-        "group-disabled/text-editor:text-interactive-text-secondary-disabled",
-        "group-has-[input:disabled]/select-content:text-interactive-text-secondary-disabled",
-        "group-has-[textarea:disabled]/text-area:text-interactive-text-secondary-disabled",
-        // TextArea default positioning
-        "group-data-[text-area]/text-area:top-5 group-data-[text-area]/text-area:translate-y-0",
-        // TextEditor default positioning
-        "group-data-[text-editor]/text-editor:top-5 group-data-[text-editor]/text-editor:left-2 group-data-[text-editor]/text-editor:translate-y-0",
-        // Text and Number Input
-        "group-has-[input:not(:placeholder-shown)]/input-content:top-floating-label-input-height-filled group-has-[input:not(:placeholder-shown)]/input-content:translate-y-0",
-        // TextArea
-        "group-has-[textarea:not(:placeholder-shown)]/text-area:top-floating-label-input-height-filled group-has-[textarea:not(:placeholder-shown)]/text-area:translate-y-0",
-        // TextEditor
-        "group-data-[is-filled=true]/text-editor:top-floating-label-input-height-filled group-data-[is-filled=true]/text-editor:translate-y-0",
-        // Date and Time Picker
-        "group-data-[has-selection]/date-picker-content:top-1 group-data-[has-selection]/date-picker-content:translate-y-0",
-        "group-focus-within/date-picker-content:top-1 group-focus-within/date-picker-content:translate-y-0",
-        // Select and Autocomplete
-        "group-data-[has-selection]/select-content:top-1 group-data-[has-selection]/select-content:translate-y-0",
-        "group-data-[searchable-focus-within]/select-content:top-1 group-data-[searchable-focus-within]/select-content:translate-y-0",
-        "group-data-[has-search]/select-content:top-1 group-data-[has-search]/select-content:translate-y-0",
-        // Text and Number Input
-        "group-has-[input:placeholder-shown]/input-content:text-text-default-3",
-        "group-has-[input:placeholder-shown]/input-content:!font-medium",
-        "group-has-[input:not(:placeholder-shown)]/input-content:!font-semibold",
-        "group-has-[input:not(:placeholder-shown)]/input-content:!text-label-3",
-        "group-has-[input:not(:placeholder-shown)]/input-content:text-text-default-1",
-        // "group-focus-within/input-content:!text-text-default-1",
-        // "group-focus-within/input-content:text-label-3",
-        // "group-has-[input:focus-within]/input-content:!font-semibold",
-        // TextArea
-        "group-has-[textarea:placeholder-shown]/text-area:text-text-default-3",
-        "group-has-[textarea:placeholder-shown]/text-area:!font-medium",
-        "group-has-[textarea:not(placeholder-shown)]/text-area:!font-semibold",
-        "group-has-[textarea:not(:placeholder-shown)]/text-area:!text-label-3",
-        "group-has-[textarea:not(placeholder-shown)]/text-area:text-text-default-1",
-        "group-focus-within/text-area:!text-text-default-1",
-        "group-focus-within/text-area:text-label-3",
-        "group-has-[textarea:focus-within]/text-area:!font-semibold",
-        // TextEditor
-        "group-has-[data-text-editor:placeholder-shown]/text-editor:text-text-default-3",
-        "group-has-[data-text-editor:placeholder-shown]/text-editor:!font-medium",
-        "group-data-[is-filled=true]/text-editor:!font-semibold",
-        "group-data-[is-filled=true]/text-editor:!text-label-3",
-        "group-data-[is-filled=true]/text-editor:text-text-default-1",
-        "group-focus-within/text-editor:!text-text-default-1",
-        "group-focus-within/text-editor:text-label-3",
-        "group-has-[data-text-editor:focus-within]/text-editor:!font-semibold",
-        // DatePicker, TimePicker focus-within
-        "group-data-[has-selection]/date-picker-content:!font-semibold",
-        "group-data-[has-selection]/date-picker-content:!text-label-3",
-        "group-data-[has-selection]/date-picker-content:text-text-default-1",
-        "group-focus-within/date-picker-content:!font-semibold",
-        "group-focus-within/date-picker-content:!text-label-3",
-        "group-focus-within/date-picker-content:text-text-default-1",
-        // Select focused state
-        "group-data-[has-selection]/select-content:!font-semibold",
-        "group-data-[has-selection]/select-content:!text-label-3",
-        "group-data-[has-selection]/select-content:text-text-default-1",
-        "group-data-[searchable-focus-within]/select-content:!font-semibold",
-        "group-data-[searchable-focus-within]/select-content:!text-label-3",
-        "group-data-[searchable-focus-within]/select-content:text-text-default-1",
-        "group-data-[has-search]/select-content:!font-semibold",
-        "group-data-[has-search]/select-content:!text-label-3",
-        "group-data-[has-search]/select-content:text-text-default-1"
-      ]
-    }
-  },
-  defaultVariants: {
-    as: "default"
-  }
-});
-const labelTypography = compoundMapper({
-  compoundVariants: [
-    {
-      as: "default",
-      value: {
-        size: "label-2",
-        variant: "prominent-1"
-      }
-    },
-    {
-      as: "filter",
-      value: {
-        size: "label-1",
-        variant: "default"
-      }
-    },
-    {
-      as: "inline",
-      value: {
-        size: "label-2",
-        variant: "prominent-1"
-      }
-    },
-    {
-      as: "floating",
-      value: {
-        size: "label-1",
-        variant: "default"
-      }
-    }
-  ],
-  default: {
-    size: "label-2",
-    variant: "prominent-1"
-  },
-  defaultVariants: {
-    as: "default"
-  }
-});
-export {
-  labelBase,
-  labelTypography
-};

package/dist/components/outline.clsx.js

@@ -1,11 +0,0 @@
-import { clsx } from "clsx";
-const uiOutlineClass = clsx(
-  "focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2"
-);
-const uiGroupOutlineClass = clsx(
-  "group-focus:outline-none group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-solid group-focus-visible:outline-offset-2"
-);
-export {
-  uiGroupOutlineClass,
-  uiOutlineClass
-};

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: clsx("text-text-default-1", textAlignClass),
-              children: heading
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Typography,
-            {
-              size: "body-3",
-              className: clsx("text-text-default-1", 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,261 +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-support-overlay",
-            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,
-            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();
-              }
-              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,
-                    {
-                      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
-                    }
-                  )
-                ] })
-              }
-            )
-          }
-        )
-      ]
-    }
-  ) });
-};
-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,64 +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 { modalMain, modalContent, modalOverlay } from "./modal.cva.js";
-import { ns } from "../../../config/i18n.js";
-import { UIStyle } from "../../../config/uiStyle.context.js";
-const Modal = ({
-  isOpen,
-  portalContainerRef,
-  onClose,
-  aside,
-  children,
-  modalClassName,
-  closeIconClassName,
-  overlayClassName,
-  showCloseIcon,
-  isDismissable = true
-}) => {
-  const { t } = useTranslation(ns);
-  const uiStyle = UIStyle.useConfig();
-  const modalMainCva = uiStyle?.modal?.mainCva ?? modalMain;
-  const modalContentCva = uiStyle?.modal?.contentCva ?? modalContent;
-  const modalOverlayCva = uiStyle?.modal?.overlayCva ?? modalOverlay;
-  return /* @__PURE__ */ jsx(
-    ModalOverlay,
-    {
-      UNSTABLE_portalContainer: portalContainerRef?.current,
-      className: modalOverlayCva({ aside, className: overlayClassName }),
-      isDismissable,
-      isOpen,
-      shouldCloseOnInteractOutside: () => {
-        return !portalContainerRef?.current;
-      },
-      onOpenChange: (open) => {
-        if (!open) {
-          onClose();
-        }
-      },
-      children: /* @__PURE__ */ jsx(Modal$1, { className: modalMainCva({ aside }), children: /* @__PURE__ */ jsxs(Dialog, { className: modalContentCva({ aside, className: modalClassName }), children: [
-        showCloseIcon && /* @__PURE__ */ jsx(
-          InlineIconButton,
-          {
-            color: "secondary",
-            onPress: onClose,
-            icon: CloseIcon,
-            className: clsx(
-              "absolute top-0 right-0 p-modal-gap-desktop-modal-close-icon-top-right",
-              closeIconClassName
-            ),
-            label: t(($) => $.ui.modal.closeBtn),
-            disableTooltip: true
-          }
-        ),
-        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-support-overlay"],
-  {
-    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
-};