@povio/ui 0.0.8 → 0.0.9

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

@@ -0,0 +1,133 @@
+import { cva } from "class-variance-authority";
+import { compoundMapper } from "../../../utils/compoundMapper.js";
+const labelBase = cva([], {
+  variants: {
+    as: {
+      default: ["flex items-start gap-1"],
+      filter: ["-translate-y-1/2 absolute top-1/2"],
+      inline: ["flex items-start gap-1"],
+      floating: [
+        "absolute transition-all duration-75",
+        "-translate-y-1/2 top-1/2",
+        "text-text-default-2 group-has-[input:disabled]/input-content:text-interactive-text-secondary-disabled",
+        "group-disabled/date-picker-content:text-interactive-text-secondary-disabled",
+        "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-focus/input-content:top-1 group-focus/input-content:translate-y-0",
+        "group-focus-within/input-content:top-1 group-focus-within/input-content:translate-y-0",
+        "group-has-[input:not(:placeholder-shown)]/input-content:top-1 group-has-[input:not(:placeholder-shown)]/input-content:translate-y-0",
+        // TextArea
+        "group-focus/text-area:top-1 group-focus/text-area:translate-y-0",
+        "group-focus-within/text-area:top-1 group-focus-within/text-area:translate-y-0",
+        "group-has-[textarea:not(:placeholder-shown)]/text-area:top-1 group-has-[textarea:not(:placeholder-shown)]/text-area:translate-y-0",
+        // TextEditor
+        "group-focus/text-editor:top-1 group-focus/text-editor:translate-y-0",
+        "group-focus-within/text-editor:top-1 group-focus-within/text-editor:translate-y-0",
+        "group-data-[is-filled=true]/text-editor:top-1 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

@@ -0,0 +1,11 @@
+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/{src → dist}/components/overlays/ActionModal/ActionModal.d.ts

@@ -1,5 +1,5 @@
-import { ButtonVariantProps } from '#ui/components/buttons/Button/button.cva';
-import { ModalProps } from '#ui/components/overlays/Modal/Modal';
+import { ButtonVariantProps } from '../../buttons/Button/button.cva';
+import { ModalProps } from '../Modal/Modal';
 interface ActionModalAction {
     label: string;
     onPress: () => void;

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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,261 @@
+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,
+            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

@@ -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/{src → dist}/components/overlays/Modal/Modal.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren, RefObject } from 'react';
-import { ModalVariantProps } from '#ui/components/overlays/Modal/modal.cva';
+import { ModalVariantProps } from './modal.cva';
 export interface ModalProps extends ModalVariantProps {
     isOpen: boolean;
     portalContainerRef?: RefObject<HTMLElement>;

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
+};