@povio/ui 0.0.8 → 0.0.9

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

@@ -0,0 +1,15 @@
+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/{src → dist}/components/status/Alert/Alert.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode, SVGProps } from 'react';
-import { AlertVariantProps } from '#ui/components/status/Alert/alert.cva';
+import { AlertVariantProps } from './alert.cva';
 export interface AlertProps extends AlertVariantProps {
     text: string;
     isLoading?: boolean;

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

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

@@ -0,0 +1,64 @@
+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/{src → dist}/components/status/Loader/Loader.d.ts

@@ -1,5 +1,5 @@
 import { SVGProps } from 'react';
-import { LoaderVariantProps } from '#ui/components/status/Loader/loader.cva';
+import { LoaderVariantProps } from './loader.cva';
 export interface LoaderProps extends LoaderVariantProps, SVGProps<SVGSVGElement> {
 }
 export declare const Loader: ({ size, className, ...props }: Omit<LoaderProps, "color">) => import("react/jsx-runtime").JSX.Element;

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

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

@@ -0,0 +1,27 @@
+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/{src → dist}/components/status/Toast/Toast.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode, SVGProps } from 'react';
-import { ToastVariantProps } from '#ui/components/status/Toast/toast.cva';
+import { ToastVariantProps } from './toast.cva';
 export interface ToastAction {
     text: string;
     onPress: () => void;

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

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

package/{src → dist}/components/status/Toast/toast.cva.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { ButtonVariantProps } from '#ui/components/buttons/Button/button.cva';
+import { ButtonVariantProps } from '../../buttons/Button/button.cva';
 export declare const toastContainer: (props?: ({
     position?: "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-center" | "top-center" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

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

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

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

@@ -0,0 +1,18 @@
+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 px-2 py-1-5 text-text-default-2", className),
+    style,
+    "data-rac": true,
+    children
+  }
+);
+export {
+  CellText
+};