@povio/ui 0.0.6 → 0.0.8

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,83 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useCallback } from "react";
-import { toast } from "react-toastify";
-import { Toast } from "./Toast.js";
-const useToast = () => {
-  const successToast = useCallback((params) => {
-    toast.success(
-      /* @__PURE__ */ jsx(
-        Toast,
-        {
-          color: "success",
-          ...params
-        }
-      ),
-      {
-        position: params.position,
-        data: {
-          variant: params.variant
-        }
-      }
-    );
-  }, []);
-  const errorToast = useCallback((params) => {
-    toast.error(
-      /* @__PURE__ */ jsx(
-        Toast,
-        {
-          color: "error",
-          ...params
-        }
-      ),
-      {
-        position: params.position,
-        data: {
-          variant: params.variant
-        }
-      }
-    );
-  }, []);
-  const warningToast = useCallback((params) => {
-    toast.warning(
-      /* @__PURE__ */ jsx(
-        Toast,
-        {
-          color: "warning",
-          ...params
-        }
-      ),
-      {
-        position: params.position,
-        data: {
-          variant: params.variant
-        }
-      }
-    );
-  }, []);
-  const neutralToast = useCallback((params) => {
-    toast.info(
-      /* @__PURE__ */ jsx(
-        Toast,
-        {
-          color: "neutral",
-          ...params
-        }
-      ),
-      {
-        position: params.position,
-        data: {
-          variant: params.variant
-        }
-      }
-    );
-  }, []);
-  return {
-    successToast,
-    errorToast,
-    warningToast,
-    neutralToast
-  };
-};
-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-2",
-    as: "span",
-    className: clsx("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-2",
-    as: "span",
-    className: "overflow-hidden text-ellipsis text-text-default-1",
-    children
-  }
-);
-export {
-  HeaderText
-};

package/dist/components/table/InfiniteTable.js

@@ -1,40 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useCallback } from "react";
-import { Loader } from "../status/Loader/Loader.js";
-import { useIntersectionObserver } from "../../hooks/useIntersectionObserver.js";
-import { Table } from "./Table.js";
-const InfiniteTable = ({
-  hasNextPage,
-  isFetchingNextPage = false,
-  fetchNextPage,
-  ...rest
-}) => {
-  const handleLoadMore = useCallback(() => {
-    if (!isFetchingNextPage && hasNextPage) {
-      fetchNextPage();
-    }
-  }, [isFetchingNextPage, hasNextPage, fetchNextPage]);
-  const { setRef } = useIntersectionObserver({
-    onIntersection: handleLoadMore,
-    rootMargin: "100px"
-  });
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsx(Table, { ...rest }),
-    (hasNextPage || isFetchingNextPage) && /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: (ref) => {
-          setRef(ref);
-          return () => {
-            setRef(null);
-          };
-        },
-        className: "flex justify-center py-4",
-        children: /* @__PURE__ */ jsx(Loader, {})
-      }
-    )
-  ] });
-};
-export {
-  InfiniteTable
-};

package/dist/components/table/PaginatedTable.js

@@ -1,33 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Pagination } from "../shared/pagination/Pagination.js";
-import { Table } from "./Table.js";
-const PaginatedTable = ({
-  pagination,
-  setPagination,
-  items,
-  totalItems,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsx(
-      Table,
-      {
-        ...rest,
-        items: items ?? []
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Pagination,
-      {
-        page: pagination.pageIndex,
-        pageSize: pagination.pageSize,
-        totalItems: totalItems ?? 0,
-        onPageChange: (page) => setPagination({ ...pagination, pageIndex: page }),
-        onPageSizeChange: (pageSize) => setPagination({ ...pagination, pageSize, pageIndex: 1 })
-      }
-    )
-  ] });
-};
-export {
-  PaginatedTable
-};