@povio/ui 2.1.14 → 2.1.16

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,65 +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: "none",
-          width: "hug",
-          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
-};

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

@@ -1,150 +0,0 @@
-import { cva } from "class-variance-authority";
-import { clsx } from "clsx";
-import { compoundMapper } from "../../../utils/compoundMapper.js";
-const toastContainer = cva("m-toast-gap-margin-mobile w-auto p-0 md:m-toast-gap-margin-desktop", {
-  variants: {
-    position: {
-      "bottom-right": "right-0 bottom-0",
-      "bottom-left": "bottom-0 left-0",
-      "top-right": "top-0 right-0",
-      "top-left": "top-0 left-0",
-      "bottom-center": "bottom-0",
-      "top-center": "top-0"
-    }
-  }
-});
-const toastWrapper = clsx("m-0! min-h-0 w-auto! max-w-toast bg-transparent! p-0! shadow-none!");
-const toast = cva(
-  "inline-flex w-auto flex-col items-center overflow-hidden rounded-toast-rounding-default shadow-4 md:flex-row",
-  {
-    variants: {
-      variant: {
-        outlined: "border bg-elevation-fill-default-1 text-text-default-1",
-        contained: "text-text-inverted-1"
-      },
-      color: {
-        neutral: "",
-        success: "",
-        warning: "",
-        error: ""
-      },
-      position: {
-        "bottom-right": "",
-        "bottom-left": "",
-        "bottom-center": "",
-        "top-right": "",
-        "top-left": "",
-        "top-center": ""
-      }
-    },
-    compoundVariants: [
-      {
-        position: ["bottom-right", "bottom-left", "bottom-center"],
-        className: "mt-toast-gap-margin-mobile md:mt-toast-gap-margin-desktop"
-      },
-      {
-        position: ["top-right", "top-left", "top-center"],
-        className: "mb-toast-gap-margin-mobile md:mb-toast-gap-margin-desktop"
-      },
-      {
-        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"
-    }
-  }
-);
-const buttonColorVariant = compoundMapper({
-  compoundVariants: [
-    {
-      variant: "outlined",
-      color: "neutral",
-      value: { color: "secondary" }
-    },
-    {
-      variant: "outlined",
-      color: "success",
-      value: { color: "success" }
-    },
-    {
-      variant: "outlined",
-      color: "warning",
-      value: { color: "warning" }
-    },
-    {
-      variant: "outlined",
-      color: "error",
-      value: { color: "error" }
-    },
-    {
-      variant: "contained",
-      color: "neutral",
-      value: { color: "primary", inverted: true }
-    },
-    {
-      variant: "contained",
-      color: "success",
-      value: { color: "success", inverted: true }
-    },
-    {
-      variant: "contained",
-      color: "warning",
-      value: { color: "warning", inverted: true }
-    },
-    {
-      variant: "contained",
-      color: "error",
-      value: { color: "error", inverted: true }
-    }
-  ],
-  defaultVariants: {
-    variant: "outlined",
-    color: "neutral"
-  },
-  default: { color: "secondary" }
-});
-export {
-  buttonColorVariant,
-  toast,
-  toastContainer,
-  toastWrapper
-};

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

@@ -1,94 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useCallback, useMemo } from "react";
-import { toast } from "react-toastify";
-import { Toast } from "./Toast.js";
-const useToast = () => {
-  const successToast = useCallback((params, options) => {
-    return toast.success(
-      /* @__PURE__ */ jsx(
-        Toast,
-        {
-          color: "success",
-          ...params
-        }
-      ),
-      {
-        ...options,
-        position: params.position,
-        data: {
-          variant: params.variant
-        }
-      }
-    );
-  }, []);
-  const errorToast = useCallback((params, options) => {
-    return toast.error(
-      /* @__PURE__ */ jsx(
-        Toast,
-        {
-          color: "error",
-          ...params
-        }
-      ),
-      {
-        ...options,
-        position: params.position,
-        data: {
-          variant: params.variant
-        }
-      }
-    );
-  }, []);
-  const warningToast = useCallback((params, options) => {
-    return toast.warning(
-      /* @__PURE__ */ jsx(
-        Toast,
-        {
-          color: "warning",
-          ...params
-        }
-      ),
-      {
-        ...options,
-        position: params.position,
-        data: {
-          variant: params.variant
-        }
-      }
-    );
-  }, []);
-  const neutralToast = useCallback((params, options) => {
-    return toast.info(
-      /* @__PURE__ */ jsx(
-        Toast,
-        {
-          color: "neutral",
-          ...params
-        }
-      ),
-      {
-        ...options,
-        position: params.position,
-        data: {
-          variant: params.variant
-        }
-      }
-    );
-  }, []);
-  const closeToast = useCallback((id) => {
-    toast.dismiss(id);
-  }, []);
-  return useMemo(
-    () => ({
-      successToast,
-      errorToast,
-      warningToast,
-      neutralToast,
-      closeToast
-    }),
-    [successToast, errorToast, warningToast, neutralToast, closeToast]
-  );
-};
-export {
-  useToast
-};

package/dist/components/status/shared/status.cva.js

@@ -1,62 +0,0 @@
-import { cva } from "class-variance-authority";
-const statusIcon = cva("size-6 shrink-0", {
-  variants: {
-    variant: {
-      outlined: "",
-      contained: "text-text-inverted-1"
-    },
-    color: {
-      neutral: "",
-      success: "",
-      warning: "",
-      error: ""
-    }
-  },
-  compoundVariants: [
-    {
-      variant: "outlined",
-      color: "neutral",
-      class: "text-text-default-2"
-    },
-    {
-      variant: "outlined",
-      color: "success",
-      class: "text-text-success-1"
-    },
-    {
-      variant: "outlined",
-      color: "warning",
-      class: "text-text-warning-1"
-    },
-    {
-      variant: "outlined",
-      color: "error",
-      class: "text-text-error-1"
-    }
-  ],
-  defaultVariants: {
-    variant: "outlined",
-    color: "neutral"
-  }
-});
-const statusSeparator = cva("h-px shrink-0 self-stretch md:h-auto md:w-px", {
-  variants: {
-    variant: {
-      outlined: "",
-      contained: "hidden"
-    },
-    color: {
-      neutral: "bg-elevation-outline-default-1",
-      success: "bg-elevation-outline-success-1",
-      warning: "bg-elevation-outline-warning-1",
-      error: "bg-elevation-outline-error-1"
-    }
-  },
-  defaultVariants: {
-    color: "neutral"
-  }
-});
-export {
-  statusIcon,
-  statusSeparator
-};

package/dist/components/table/CellText.js

@@ -1,18 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { Typography } from "../text/Typography/Typography.js";
-const CellText = ({ children, style, className }) => /* @__PURE__ */ jsx(
-  Typography,
-  {
-    variant: "default",
-    size: "label-1",
-    as: "span",
-    className: clsx("block overflow-hidden text-ellipsis text-text-default-2", className),
-    style,
-    "data-rac": true,
-    children
-  }
-);
-export {
-  CellText
-};

package/dist/components/table/ColumnConfig.js

@@ -1,124 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { Checkbox } from "../inputs/Checkbox/Checkbox.js";
-import { Modal } from "../overlays/Modal/Modal.js";
-import { Table } from "./Table.js";
-import { Typography } from "../text/Typography/Typography.js";
-import { ns } from "../../config/i18n.js";
-import { useTranslationMemo } from "../../hooks/useTranslationMemo.js";
-const VisibilityCell = ({ original, onToggle }) => /* @__PURE__ */ jsx(
-  Checkbox,
-  {
-    isSelected: original.visible,
-    onChange: () => onToggle(original.id),
-    hideLabel: true,
-    children: original.label
-  }
-);
-const getColumns = (t, handleToggleVisibility) => [
-  {
-    id: "name",
-    header: t(($) => $.ui.table.column, { ns }),
-    meta: {
-      width: "flex-1"
-    },
-    accessorKey: "label"
-  },
-  {
-    id: "visible",
-    header: t(($) => $.ui.table.show, { ns }),
-    meta: {
-      width: "w-20"
-    },
-    cell: ({ original }) => /* @__PURE__ */ jsx(
-      VisibilityCell,
-      {
-        original,
-        onToggle: handleToggleVisibility
-      }
-    )
-  }
-];
-function ColumnConfigModal({
-  isOpen,
-  onClose,
-  configColumns,
-  visibleColumns,
-  onVisibilityChange,
-  onOrderChange
-}) {
-  const { t } = useTranslation(ns);
-  const [data, setData] = useState([]);
-  useEffect(() => {
-    setData(
-      configColumns.map((column) => {
-        const columnId = column.id ?? column.accessorKey;
-        return {
-          id: columnId,
-          label: column.header,
-          visible: visibleColumns?.[columnId] ?? true
-        };
-      })
-    );
-  }, [configColumns, visibleColumns]);
-  const handleToggleVisibility = useCallback(
-    (columnId) => {
-      const newVisible = {
-        ...visibleColumns,
-        [columnId]: !visibleColumns[columnId]
-      };
-      onVisibilityChange(newVisible);
-    },
-    [visibleColumns, onVisibilityChange]
-  );
-  const getColumnsWithTranslation = useCallback(
-    (translateFn) => getColumns(translateFn, handleToggleVisibility),
-    [handleToggleVisibility]
-  );
-  const columns = useTranslationMemo(getColumnsWithTranslation);
-  const handleReorder = useCallback(
-    (reorderedItems) => {
-      setData(reorderedItems);
-      onOrderChange(reorderedItems.map((item) => item.id));
-    },
-    [onOrderChange]
-  );
-  if (!isOpen) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    Modal,
-    {
-      isOpen,
-      onClose,
-      showCloseIcon: true,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-4", children: [
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            as: "h2",
-            variant: "prominent-1",
-            size: "title-5",
-            children: t(($) => $.ui.table.configureColumns)
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "max-h-96 overflow-y-auto", children: /* @__PURE__ */ jsx(
-          Table,
-          {
-            items: data,
-            columns,
-            showCellBorder: true,
-            className: "w-full",
-            enableDragDrop: true,
-            getRowId: (row) => row.id,
-            onReorder: handleReorder
-          }
-        ) })
-      ] })
-    }
-  );
-}
-export {
-  ColumnConfigModal
-};

package/dist/components/table/HeaderText.js

@@ -1,15 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Typography } from "../text/Typography/Typography.js";
-const HeaderText = ({ children }) => /* @__PURE__ */ jsx(
-  Typography,
-  {
-    variant: "default",
-    size: "label-1",
-    as: "span",
-    className: "overflow-hidden text-ellipsis px-table-cell-content-side-m py-table-cell-content-height-m text-text-default-1",
-    children
-  }
-);
-export {
-  HeaderText
-};