@povio/ui 0.0.8 → 0.0.9

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

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

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

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { TooltipProps as AriaTooltipProps } from 'react-aria-components';
-import { TooltipVariantProps } from '#ui/components/overlays/Tooltip/tooltip.cva';
+import { TooltipVariantProps } from './tooltip.cva';
 export interface TooltipProps extends PropsWithChildren<AriaTooltipProps>, TooltipVariantProps {
     text: ReactNode;
     isDisabled?: boolean;

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

@@ -0,0 +1,70 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Fragment, useRef } from "react";
+import { useFocusable } from "react-aria";
+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 { tooltipCva, tooltipPointerHorizontalCva, tooltipPointerVerticalCva, tooltipTextCva } from "./tooltip.cva.js";
+import { Typography } from "../../text/Typography/Typography.js";
+const CustomTrigger = ({ children }) => {
+  const ref = useRef(null);
+  const { focusableProps } = useFocusable({}, ref);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...focusableProps,
+      tabIndex: 0,
+      children
+    }
+  );
+};
+const Tooltip = ({
+  children,
+  text,
+  isDisabled,
+  delay,
+  closeDelay,
+  color,
+  isNonInteractiveTrigger,
+  ...tooltipProps
+}) => {
+  const Trigger = isNonInteractiveTrigger ? CustomTrigger : Fragment;
+  return /* @__PURE__ */ jsxs(
+    TooltipTrigger,
+    {
+      delay: delay ?? 0,
+      closeDelay: closeDelay ?? 0,
+      isDisabled,
+      children: [
+        /* @__PURE__ */ jsx(Trigger, { children }),
+        /* @__PURE__ */ jsxs(
+          Tooltip$1,
+          {
+            className: tooltipCva({ color }),
+            ...tooltipProps,
+            offset: 13,
+            children: [
+              /* @__PURE__ */ jsxs(OverlayArrow, { children: [
+                /* @__PURE__ */ jsx(PointerHorizontalIcon, { className: tooltipPointerHorizontalCva({ color }) }),
+                /* @__PURE__ */ jsx(PointerVerticalIcon, { className: tooltipPointerVerticalCva({ color }) })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  size: "body-4",
+                  variant: "prominent-1",
+                  className: tooltipTextCva({ color }),
+                  children: text
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Tooltip
+};

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

@@ -0,0 +1,27 @@
+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
+};

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

@@ -0,0 +1,60 @@
+import { cva } from "class-variance-authority";
+const tooltipCva = cva(
+  ["group max-w-64 rounded-tooltip-rounding-default px-tooltip-side-default py-tooltip-height-default shadow-2"],
+  {
+    variants: {
+      color: {
+        default: ["bg-interactive-contained-secondary-idle"],
+        error: ["w-max bg-text-error-1"]
+      }
+    },
+    defaultVariants: {
+      color: "default"
+    }
+  }
+);
+const tooltipPointerHorizontalCva = cva(
+  ["h-2-5 w-5 group-placement-left:hidden group-placement-right:hidden group-placement-top:rotate-180"],
+  {
+    variants: {
+      color: {
+        default: ["text-interactive-contained-secondary-idle"],
+        error: ["text-text-error-1"]
+      }
+    },
+    defaultVariants: {
+      color: "default"
+    }
+  }
+);
+const tooltipPointerVerticalCva = cva(
+  ["h-5 w-2-5 group-placement-bottom:hidden group-placement-top:hidden group-placement-left:rotate-180"],
+  {
+    variants: {
+      color: {
+        default: ["text-interactive-contained-secondary-idle"],
+        error: ["text-text-error-1"]
+      }
+    },
+    defaultVariants: {
+      color: "default"
+    }
+  }
+);
+const tooltipTextCva = cva([], {
+  variants: {
+    color: {
+      default: ["text-text-inverted-3"],
+      error: ["text-interactive-text-secondary-idle-inverted"]
+    }
+  },
+  defaultVariants: {
+    color: "default"
+  }
+});
+export {
+  tooltipCva,
+  tooltipPointerHorizontalCva,
+  tooltipPointerVerticalCva,
+  tooltipTextCva
+};

package/dist/components/segment/Segment.js

@@ -0,0 +1,119 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { useRef, useMemo, Fragment } from "react";
+import { useToggleButtonGroup } from "react-aria";
+import { ToggleButtonGroup } from "react-aria-components";
+import { Controller } from "react-hook-form";
+import { useToggleGroupState } from "react-stately";
+import { FormField } from "../inputs/FormField/FormField.js";
+import { SegmentItem } from "./SegmentItem.js";
+const SegmentBase = ({
+  className,
+  items,
+  error,
+  onChange,
+  value,
+  defaultValue,
+  ...rest
+}) => {
+  const props = {
+    ...rest,
+    defaultSelectedKeys: defaultValue ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : void 0,
+    selectedKeys: value ? Array.isArray(value) ? value : [value] : void 0
+  };
+  const buttonGroupRef = useRef(null);
+  const state = useToggleGroupState(props);
+  const { groupProps } = useToggleButtonGroup(props, state, buttonGroupRef);
+  const formFieldProps = {
+    error,
+    label: "",
+    hideLabel: true,
+    isDisabled: props.isDisabled
+  };
+  const onSelectionChange = (keys) => {
+    if (props.selectionMode === "multiple") {
+      onChange?.(Array.from(keys.values()));
+    } else {
+      onChange?.(Array.from(keys.values())[0]);
+    }
+  };
+  const gridTemplateColumns = useMemo(() => {
+    return items.length > 2 ? Array.from({ length: items.length * 2 - 1 }, (_, i) => i % 2 === 0 ? "1fr" : "auto").join(" ") : `repeat(${items.length}, 1fr)`;
+  }, [items.length]);
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      ...formFieldProps,
+      className: clsx("relative w-full", className),
+      children: /* @__PURE__ */ jsx(
+        ToggleButtonGroup,
+        {
+          ...props,
+          ...groupProps,
+          ref: buttonGroupRef,
+          onSelectionChange,
+          className: clsx(
+            "group/segment grid w-fit items-center gap-segmented-control-side-segmented-control p-segmented-control-side-segmented-control",
+            "bg-elevation-fill-default-3",
+            "rounded-segmented-control-rounding-segmented-control",
+            className
+          ),
+          style: {
+            gridTemplateColumns
+          },
+          children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              SegmentItem,
+              {
+                ...item,
+                isDisabled: item.isDisabled || props.isDisabled,
+                isSelected: state.selectedKeys.has(item.id),
+                onPress: () => {
+                  state.toggleKey(item.id);
+                }
+              }
+            ),
+            index !== items.length - 1 && items.length > 2 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(
+                  "h-5 w-px rounded-2xl",
+                  !state.selectedKeys.has(item.id) && !state.selectedKeys.has(items[index + 1].id) && "bg-elevation-outline-default-1"
+                ),
+                children: /* @__PURE__ */ jsx("span", { className: "flex h-full w-px" })
+              }
+            )
+          ] }, item.id))
+        }
+      )
+    }
+  );
+};
+const Segment = (props) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formControl.control,
+        name: formControl.name,
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          SegmentBase,
+          {
+            ...innerProps,
+            ref: mergeRefs(ref, field.ref),
+            value: field.value,
+            onChange: field.onChange,
+            isDisabled: field.disabled || props.isDisabled,
+            error: props.error ?? error?.message
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(SegmentBase, { ...props });
+};
+export {
+  Segment
+};

package/dist/components/segment/SegmentItem.js

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { ToggleButton } from "react-aria-components";
+import { Typography } from "../text/Typography/Typography.js";
+const SegmentItem = ({ label, icon, id, isDisabled, ...props }) => {
+  const IconComponent = icon;
+  const iconOnly = icon && !label;
+  return /* @__PURE__ */ jsxs(
+    ToggleButton,
+    {
+      ...props,
+      id,
+      className: clsx(
+        "flex items-center justify-center gap-1 transition-all duration-200",
+        "border border-transparent",
+        "py-segmented-control-height-segment",
+        iconOnly ? "px-segmented-control-height-segment" : "px-segmented-control-side-segment py-segmented-control-height-segment",
+        "rounded-segmented-control-rounding-segment",
+        "hover:bg-interactive-subtle-secondary-hover",
+        "pressed:bg-interactive-subtle-secondary-pressed",
+        "selected:text-interactive-subtle-secondary-on-toggled-idle text-interactive-subtle-secondary-on-idle hover:text-interactive-subtle-secondary-on-hover",
+        "disabled:selected:text-interactive-subtle-secondary-on-toggled-disabled disabled:text-interactive-subtle-secondary-on-disabled",
+        "selected:bg-interactive-subtle-secondary-toggled-idle disabled:selected:bg-interactive-subtle-secondary-toggled-disabled"
+      ),
+      isDisabled,
+      children: [
+        icon && /* @__PURE__ */ jsx(IconComponent, { className: "size-6" }),
+        label && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            size: "label-2",
+            as: "span",
+            className: "overflow-hidden text-ellipsis text-center",
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  SegmentItem
+};

package/{src → dist}/components/segment/segment.types.d.ts

@@ -1,7 +1,7 @@
 import { FC, ReactElement, Ref, SVGProps } from 'react';
 import { Key, ToggleButtonGroupProps, ToggleButtonProps } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
-import { ControlProps } from '#ui/components/inputs/shared/form.types';
+import { ControlProps } from '../inputs/shared/form.types';
 export interface SegmentItem<TKey extends Key = Key> extends ToggleButtonProps {
     id: TKey;
     label?: string;

package/dist/components/shared/pagination/Pagination.js

@@ -0,0 +1,75 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+import { NumberInput } from "../../inputs/Input/NumberInput/NumberInput.js";
+import { Typography } from "../../text/Typography/Typography.js";
+import { ns } from "../../../config/i18n.js";
+import { PaginationList } from "./PaginationList.js";
+const Pagination = ({
+  size = "s",
+  variant = "subtle",
+  color = "secondary",
+  page,
+  totalItems,
+  totalPages,
+  pageSize,
+  hideText = true,
+  hideFirstLast = true,
+  hidePrevNext = false,
+  hideNumbers = false,
+  className,
+  onPageChange,
+  onPageSizeChange
+}) => {
+  const { t } = useTranslation(ns);
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      id: "pagination",
+      className: clsx("flex items-center gap-2", className),
+      children: [
+        totalItems > pageSize && /* @__PURE__ */ jsx(
+          PaginationList,
+          {
+            page,
+            size,
+            color,
+            variant,
+            hideText,
+            hideFirstLast,
+            hidePrevNext,
+            hideNumbers,
+            totalPages: totalPages ?? Math.ceil(totalItems / pageSize),
+            onPageChange
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "default",
+              size: "label-2",
+              as: "span",
+              className: "whitespace-nowrap text-text-default-1",
+              children: t(($) => $.ui.pagination.resultsPerPage)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              value: pageSize,
+              onChange: (value) => onPageSizeChange?.(Number(value)),
+              label: t(($) => $.ui.pagination.resultsPerPage),
+              hideLabel: true,
+              className: "w-min",
+              inputClassName: "min-w-12 !px-3 !py-0-5"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  Pagination
+};

package/{src → dist}/components/shared/pagination/PaginationList.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from '#ui/components/buttons/Button/Button';
+import { ButtonProps } from '../../buttons/Button/Button';
 export interface PaginationListProps {
     page: number;
     totalPages: number;

package/dist/components/shared/pagination/PaginationList.js

@@ -0,0 +1,145 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { ChevronLeftIcon } from "../../../assets/icons/ChevronLeft.js";
+import { ChevronRightIcon } from "../../../assets/icons/ChevronRight.js";
+import { ChevronsLeftIcon } from "../../../assets/icons/ChevronsLeft.js";
+import { ChevronsRightIcon } from "../../../assets/icons/ChevronsRight.js";
+import { Button } from "../../buttons/Button/Button.js";
+import { ns } from "../../../config/i18n.js";
+import { minWidth } from "./minWidth.cva.js";
+const PaginationList = ({
+  page,
+  totalPages,
+  size,
+  color,
+  variant,
+  hideText,
+  hideFirstLast,
+  hidePrevNext,
+  hideNumbers,
+  className,
+  onPageChange
+}) => {
+  const { t } = useTranslation(ns);
+  const isPrevDisabled = page <= 1;
+  const isNextDisabled = page >= totalPages;
+  const renderPageNumbers = useMemo(() => {
+    const pagesToShow = [];
+    pagesToShow.push(1);
+    if (page > 3) {
+      pagesToShow.push("ellipsis");
+    }
+    for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) {
+      pagesToShow.push(i);
+    }
+    if (page < totalPages - 2) {
+      pagesToShow.push("ellipsis");
+    }
+    if (totalPages > 1 && !pagesToShow.includes(totalPages)) {
+      pagesToShow.push(totalPages);
+    }
+    return pagesToShow.map((p, index) => {
+      if (p === "ellipsis") {
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant,
+            color,
+            size,
+            width: "fill",
+            className: clsx(minWidth({ size })),
+            children: "..."
+          },
+          `ellipsis-${index}`
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          width: "hug",
+          size,
+          variant,
+          color,
+          "data-selected": p === page ? true : void 0,
+          className: clsx(p.toString().length <= 2 && minWidth({ size })),
+          onPress: () => onPageChange?.(p),
+          children: p.toString()
+        },
+        `page-${p}`
+      );
+    });
+  }, [page, color, size, variant, totalPages, onPageChange]);
+  if (totalPages <= 1) {
+    return null;
+  }
+  const onNext = () => {
+    if (!isNextDisabled) {
+      onPageChange?.(page + 1);
+    }
+  };
+  const onPrevious = () => {
+    if (!isPrevDisabled) {
+      onPageChange?.(page - 1);
+    }
+  };
+  return /* @__PURE__ */ jsxs("nav", { className: clsx("flex items-center gap-pagination-button-to-button", className), children: [
+    !hideFirstLast && /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: () => onPageChange?.(1),
+        isDisabled: isPrevDisabled,
+        size,
+        color,
+        variant,
+        iconOnly: hideText,
+        icon: ChevronsLeftIcon,
+        children: t(($) => $.ui.pagination.firstBtn)
+      }
+    ),
+    !hidePrevNext && /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: onPrevious,
+        isDisabled: isPrevDisabled,
+        size,
+        color,
+        variant,
+        iconOnly: hideText,
+        icon: ChevronLeftIcon,
+        children: t(($) => $.ui.pagination.backBtn)
+      }
+    ),
+    !hideNumbers && renderPageNumbers,
+    !hidePrevNext && /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: onNext,
+        isDisabled: isNextDisabled,
+        size,
+        color,
+        variant,
+        iconOnly: hideText,
+        icon: ChevronRightIcon,
+        children: t(($) => $.ui.pagination.nextBtn)
+      }
+    ),
+    !hideFirstLast && /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: () => onPageChange?.(totalPages),
+        isDisabled: isNextDisabled,
+        size,
+        color,
+        variant,
+        iconOnly: hideText,
+        icon: ChevronsRightIcon,
+        children: t(($) => $.ui.pagination.lastBtn)
+      }
+    )
+  ] });
+};
+export {
+  PaginationList
+};