@povio/ui 2.1.13 → 2.1.15

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

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

@@ -1,60 +0,0 @@
-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-elevation-fill-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-elevation-fill-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-elevation-fill-error-1"]
-      }
-    },
-    defaultVariants: {
-      color: "default"
-    }
-  }
-);
-const tooltipTextCva = cva([], {
-  variants: {
-    color: {
-      default: ["text-text-inverted-3"],
-      error: ["text-text-error-inverted-1"]
-    }
-  },
-  defaultVariants: {
-    color: "default"
-  }
-});
-export {
-  tooltipCva,
-  tooltipPointerHorizontalCva,
-  tooltipPointerVerticalCva,
-  tooltipTextCva
-};

package/dist/components/segment/Segment.js

@@ -1,118 +0,0 @@
-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 { segmentCva } from "./segment.cva.js";
-import { UIStyle } from "../../config/uiStyle.context.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 uiStyle = UIStyle.useConfig();
-  const state = useToggleGroupState(props);
-  const { groupProps } = useToggleButtonGroup(props, state, buttonGroupRef);
-  const segmentCva$1 = uiStyle?.segment?.cva ?? segmentCva;
-  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: segmentCva$1({ ...props, 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

@@ -1,35 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { ToggleButton } from "react-aria-components";
-import { segmentItemCva } from "./segment.cva.js";
-import { Typography } from "../text/Typography/Typography.js";
-import { UIStyle } from "../../config/uiStyle.context.js";
-const SegmentItem = ({ label, icon, id, isDisabled, ...props }) => {
-  const IconComponent = icon;
-  const iconOnly = !!(icon && !label);
-  const uiStyle = UIStyle.useConfig();
-  const segmentItemCva$1 = uiStyle?.segment?.itemCva ?? segmentItemCva;
-  return /* @__PURE__ */ jsxs(
-    ToggleButton,
-    {
-      ...props,
-      id,
-      className: segmentItemCva$1({ iconOnly }),
-      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/dist/components/segment/segment.cva.js

@@ -1,35 +0,0 @@
-import { cva } from "class-variance-authority";
-const segmentCva = cva([
-  "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"
-]);
-const segmentItemCva = cva(
-  [
-    "flex items-center justify-center gap-segmented-control-gap-content-icon-to-text transition-all duration-200",
-    "border border-support-transparent-outline",
-    "py-segmented-control-height-segment",
-    "rounded-segmented-control-rounding-segment",
-    "text-interactive-subtle-secondary-on-idle",
-    "hover:border-interactive-subtle-secondary-hover hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
-    "pressed:border-interactive-subtle-secondary-pressed pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
-    "disabled:border-support-transparent-outline disabled:text-interactive-subtle-secondary-on-disabled",
-    "selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
-    "selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled"
-  ],
-  {
-    variants: {
-      iconOnly: {
-        true: "px-segmented-control-height-segment",
-        false: "px-segmented-control-side-segment"
-      }
-    },
-    defaultVariants: {
-      iconOnly: false
-    }
-  }
-);
-export {
-  segmentCva,
-  segmentItemCva
-};

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

@@ -1,75 +0,0 @@
-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/dist/components/shared/pagination/PaginationList.js

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

package/dist/components/shared/pagination/minWidth.cva.js

@@ -1,15 +0,0 @@
-import { cva } from "class-variance-authority";
-const minWidth = cva("", {
-  variants: {
-    size: {
-      xxs: ["min-w-button-width-min-width-xxs"],
-      xs: ["min-w-button-width-min-width-xs"],
-      s: ["min-w-button-width-min-width-s"],
-      m: ["min-w-button-width-min-width-m"],
-      l: ["min-w-button-width-min-width-l"]
-    }
-  }
-});
-export {
-  minWidth
-};