@povio/ui 0.0.6 → 0.0.8

package/dist/components/segment/Segment.js

@@ -1,113 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { mergeRefs } from "@react-aria/utils";
-import { clsx } from "clsx";
-import { useRef, 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]);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    FormField,
-    {
-      ...formFieldProps,
-      className: clsx("relative w-full", className),
-      children: /* @__PURE__ */ jsx(
-        ToggleButtonGroup,
-        {
-          ...props,
-          ...groupProps,
-          ref: buttonGroupRef,
-          onSelectionChange,
-          className: clsx(
-            "group/segment flex 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
-          ),
-          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,41 +0,0 @@
-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;
-  return /* @__PURE__ */ jsxs(
-    ToggleButton,
-    {
-      ...props,
-      id,
-      className: clsx(
-        "flex items-center justify-center gap-1 transition-all duration-200",
-        "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,
-          {
-            variant: props.isSelected ? "prominent-1" : "default",
-            size: "label-2",
-            as: "span",
-            className: "overflow-hidden text-ellipsis text-center",
-            children: label
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  SegmentItem
-};

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

package/dist/components/status/Alert/Alert.js

@@ -1,41 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { alert } from "./alert.cva.js";
-import { Loader } from "../Loader/Loader.js";
-import { statusIcon, statusSeparator } from "../shared/status.cva.js";
-import { Typography } from "../../text/Typography/Typography.js";
-import { UIStyle } from "../../../config/uiStyle.context.js";
-const Alert = ({
-  variant,
-  color,
-  text,
-  isLoading = false,
-  rightContent,
-  hasSeparator,
-  icon: Icon,
-  className
-}) => {
-  const uiStyle = UIStyle.useConfig();
-  const alertCva = uiStyle?.alert?.cva ?? alert;
-  const iconCva = uiStyle?.status?.iconCva ?? statusIcon;
-  const separatorCva = uiStyle?.status?.separatorCva ?? statusSeparator;
-  return /* @__PURE__ */ jsx("div", { className: alertCva({ variant, color, className }), children: /* @__PURE__ */ jsxs("div", { className: "flex w-auto flex-col items-center md:flex-row", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start gap-alert-gap-icon-to-text px-alert-side-default py-alert-height-content", children: [
-      isLoading && /* @__PURE__ */ jsx(
-        Loader,
-        {
-          size: "default",
-          className: "shrink-0"
-        }
-      ),
-      !isLoading && Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({ variant, color }) }),
-      /* @__PURE__ */ jsx(Typography, { size: "label-2", children: text })
-    ] }),
-    !!rightContent && /* @__PURE__ */ jsxs(Fragment, { children: [
-      hasSeparator && /* @__PURE__ */ jsx("div", { className: separatorCva({ variant, color }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex w-full shrink-0 flex-wrap items-center justify-end gap-alert-gap-action px-alert-side-default py-alert-height-actions-mobile md:w-auto md:justify-center md:py-alert-height-actions-desktop", children: rightContent })
-    ] })
-  ] }) });
-};
-export {
-  Alert
-};

package/dist/components/status/Alert/alert.cva.js

@@ -1,64 +0,0 @@
-import { cva } from "class-variance-authority";
-const alert = cva("min-h-0 overflow-hidden rounded-alert-rounding-default p-0", {
-  variants: {
-    variant: {
-      outlined: "border bg-elevation-fill-default-1 text-text-default-1",
-      contained: "text-text-inverted-1"
-    },
-    color: {
-      neutral: "",
-      success: "",
-      warning: "",
-      error: ""
-    }
-  },
-  compoundVariants: [
-    {
-      variant: "outlined",
-      color: "neutral",
-      className: "border-elevation-outline-default-1"
-    },
-    {
-      variant: "outlined",
-      color: "success",
-      className: "border-elevation-outline-success-1"
-    },
-    {
-      variant: "outlined",
-      color: "warning",
-      className: "border-elevation-outline-warning-1"
-    },
-    {
-      variant: "outlined",
-      color: "error",
-      className: "border-elevation-outline-error-1"
-    },
-    {
-      variant: "contained",
-      color: "neutral",
-      className: "bg-elevation-fill-inverted-1"
-    },
-    {
-      variant: "contained",
-      color: "success",
-      className: "bg-elevation-fill-success-1"
-    },
-    {
-      variant: "contained",
-      color: "warning",
-      className: "bg-elevation-fill-warning-1"
-    },
-    {
-      variant: "contained",
-      color: "error",
-      className: "bg-elevation-fill-error-1"
-    }
-  ],
-  defaultVariants: {
-    variant: "outlined",
-    color: "neutral"
-  }
-});
-export {
-  alert
-};

package/dist/components/status/Loader/Loader.js

@@ -1,37 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { loaderWrapper, loader } from "./loader.cva.js";
-const Loader = ({ size, className, ...props }) => {
-  return /* @__PURE__ */ jsx("div", { className: loaderWrapper({ size, className }), children: /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      className: loader({ size, className }),
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            className: "opacity-20",
-            cx: "12",
-            cy: "12",
-            r: "10",
-            stroke: "currentColor",
-            strokeWidth: "4"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            fill: "currentColor",
-            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          }
-        )
-      ]
-    }
-  ) });
-};
-export {
-  Loader
-};

package/dist/components/status/Loader/loader.cva.js

@@ -1,27 +0,0 @@
-import { cva } from "class-variance-authority";
-const loaderWrapper = cva("flex items-center justify-center", {
-  variants: {
-    size: {
-      default: "size-6",
-      l: "size-16"
-    }
-  },
-  defaultVariants: {
-    size: "default"
-  }
-});
-const loader = cva("animate-loader-spin", {
-  variants: {
-    size: {
-      default: "size-3-5",
-      l: "size-8"
-    }
-  },
-  defaultVariants: {
-    size: "default"
-  }
-});
-export {
-  loader,
-  loaderWrapper
-};

package/dist/components/status/Toast/Toast.js

@@ -1,64 +0,0 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { ToastContainer as ToastContainer$1 } from "react-toastify";
-import { Button } from "../../buttons/Button/Button.js";
-import { Loader } from "../Loader/Loader.js";
-import { statusIcon, statusSeparator } from "../shared/status.cva.js";
-import { toast, buttonColorVariant, toastWrapper, toastContainer } from "./toast.cva.js";
-import { Typography } from "../../text/Typography/Typography.js";
-import { UIStyle } from "../../../config/uiStyle.context.js";
-const Toast = ({ text, isLoading = false, actions = [], icon: Icon, ...props }) => {
-  const uiStyle = UIStyle.useConfig();
-  const toastCva = uiStyle?.toast?.cva ?? toast;
-  const buttonColor = uiStyle?.toast?.buttonColor ?? buttonColorVariant;
-  const iconCva = uiStyle?.status?.iconCva ?? statusIcon;
-  const separatorCva = uiStyle?.status?.separatorCva ?? statusSeparator;
-  return /* @__PURE__ */ jsxs("div", { className: toastCva({ ...props }), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-toast-gap-icon-to-text px-toast-side-default py-toast-height-content", children: [
-      isLoading && /* @__PURE__ */ jsx(
-        Loader,
-        {
-          size: "default",
-          className: "shrink-0"
-        }
-      ),
-      !isLoading && Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({ ...props }) }),
-      /* @__PURE__ */ jsx(Typography, { size: "label-2", children: text })
-    ] }),
-    actions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: separatorCva({ ...props }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex w-full shrink-0 flex-wrap items-center justify-end gap-toast-gap-action px-toast-side-default py-toast-height-actions-mobile md:w-auto md:justify-center md:py-toast-height-actions-desktop", children: actions.map(({ text: buttonText, onPress }) => /* @__PURE__ */ jsx(
-        Button,
-        {
-          onPress,
-          ...buttonColor({ ...props }),
-          variant: "text",
-          size: "xs",
-          children: buttonText
-        },
-        buttonText
-      )) })
-    ] })
-  ] });
-};
-const ToastContainer = () => {
-  return /* @__PURE__ */ jsx(
-    ToastContainer$1,
-    {
-      className: (params) => {
-        return toastContainer({
-          position: params?.position,
-          className: params?.defaultClassName
-        });
-      },
-      toastClassName: toastWrapper,
-      autoClose: 2500,
-      icon: false,
-      closeButton: false,
-      hideProgressBar: true
-    }
-  );
-};
-export {
-  Toast,
-  ToastContainer
-};