@povio/ui 0.0.5 → 0.0.6

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.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const loaderWrapper: (props?: ({
+    size?: "default" | "l" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const loader: (props?: ({
+    size?: "default" | "l" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface LoaderVariantProps extends VariantProps<typeof 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/dist/components/status/Toast/Toast.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode, SVGProps } from 'react';
+import { ToastVariantProps } from '#ui/components/status/Toast/toast.cva';
+export interface ToastAction {
+    text: string;
+    onPress: () => void;
+}
+export interface ToastProps extends ToastVariantProps {
+    text: ReactNode;
+    isLoading?: boolean;
+    icon?: FC<SVGProps<SVGSVGElement>>;
+    actions?: ToastAction[];
+}
+export declare const Toast: ({ text, isLoading, actions, icon: Icon, ...props }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToastContainer: () => import("react/jsx-runtime").JSX.Element;

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/dist/components/status/Toast/toast.cva.d.ts

@@ -0,0 +1,18 @@
+import { VariantProps } from 'class-variance-authority';
+import { ButtonVariantProps } from '#ui/components/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;
+export declare const toastWrapper: string;
+export declare const toast: (props?: ({
+    variant?: "contained" | "outlined" | null | undefined;
+    color?: "success" | "warning" | "error" | "neutral" | null | undefined;
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-center" | "top-center" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ToastVariantProps extends VariantProps<typeof toast> {
+}
+export declare const buttonColorVariant: (props: {
+    color?: "success" | "warning" | "error" | "neutral" | null | undefined;
+    variant?: "contained" | "outlined" | null | undefined;
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-center" | "top-center" | null | undefined;
+}) => Pick<ButtonVariantProps, "color" | "inverted"> | undefined;

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

@@ -1,10 +1,7 @@
-import { type VariantProps, cva } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 import { clsx } from "clsx";
-
-import type { ButtonVariantProps } from "#ui/components/buttons/Button/button.cva";
-import { compoundMapper } from "#ui/utils/compoundMapper";
-
-export const toastContainer = cva("m-toast-gap-margin-mobile w-auto p-0 md:m-toast-gap-margin-desktop", {
+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",
@@ -12,26 +9,24 @@ export const toastContainer = cva("m-toast-gap-margin-mobile w-auto p-0 md:m-toa
       "top-right": "top-0 right-0",
       "top-left": "top-0 left-0",
       "bottom-center": "bottom-0",
-      "top-center": "top-0",
-    },
-  },
+      "top-center": "top-0"
+    }
+  }
 });
-
-export const toastWrapper = clsx("m-0! min-h-0 w-auto! max-w-toast bg-transparent! p-0! shadow-none!");
-
-export const toast = cva(
+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",
+        contained: "text-text-inverted-1"
       },
       color: {
         neutral: "",
         success: "",
         warning: "",
-        error: "",
+        error: ""
       },
       position: {
         "bottom-right": "",
@@ -39,116 +34,117 @@ export const toast = cva(
         "bottom-center": "",
         "top-right": "",
         "top-left": "",
-        "top-center": "",
-      },
+        "top-center": ""
+      }
     },
     compoundVariants: [
       {
         position: ["bottom-right", "bottom-left", "bottom-center"],
-        className: "mt-toast-gap-margin-mobile md:mt-toast-gap-margin-desktop",
+        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",
+        className: "mb-toast-gap-margin-mobile md:mb-toast-gap-margin-desktop"
       },
       {
         variant: "outlined",
         color: "neutral",
-        className: "border-elevation-outline-default-1",
+        className: "border-elevation-outline-default-1"
       },
       {
         variant: "outlined",
         color: "success",
-        className: "border-elevation-outline-success-1",
+        className: "border-elevation-outline-success-1"
       },
       {
         variant: "outlined",
         color: "warning",
-        className: "border-elevation-outline-warning-1",
+        className: "border-elevation-outline-warning-1"
       },
       {
         variant: "outlined",
         color: "error",
-        className: "border-elevation-outline-error-1",
+        className: "border-elevation-outline-error-1"
       },
       {
         variant: "contained",
         color: "neutral",
-        className: "bg-elevation-fill-inverted-1",
+        className: "bg-elevation-fill-inverted-1"
       },
       {
         variant: "contained",
         color: "success",
-        className: "bg-elevation-fill-success-1",
+        className: "bg-elevation-fill-success-1"
       },
       {
         variant: "contained",
         color: "warning",
-        className: "bg-elevation-fill-warning-1",
+        className: "bg-elevation-fill-warning-1"
       },
       {
         variant: "contained",
         color: "error",
-        className: "bg-elevation-fill-error-1",
-      },
+        className: "bg-elevation-fill-error-1"
+      }
     ],
     defaultVariants: {
       variant: "outlined",
-      color: "neutral",
-    },
-  },
+      color: "neutral"
+    }
+  }
 );
-
-// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
-export interface ToastVariantProps extends VariantProps<typeof toast> {}
-
-export const buttonColorVariant = compoundMapper<Pick<ButtonVariantProps, "color" | "inverted">, ToastVariantProps>({
+const buttonColorVariant = compoundMapper({
   compoundVariants: [
     {
       variant: "outlined",
       color: "neutral",
-      value: { color: "secondary" },
+      value: { color: "secondary" }
     },
     {
       variant: "outlined",
       color: "success",
-      value: { color: "success" },
+      value: { color: "success" }
     },
     {
       variant: "outlined",
       color: "warning",
-      value: { color: "warning" },
+      value: { color: "warning" }
     },
     {
       variant: "outlined",
       color: "error",
-      value: { color: "error" },
+      value: { color: "error" }
     },
     {
       variant: "contained",
       color: "neutral",
-      value: { color: "primary", inverted: true },
+      value: { color: "primary", inverted: true }
     },
     {
       variant: "contained",
       color: "success",
-      value: { color: "success", inverted: true },
+      value: { color: "success", inverted: true }
     },
     {
       variant: "contained",
       color: "warning",
-      value: { color: "warning", inverted: true },
+      value: { color: "warning", inverted: true }
     },
     {
       variant: "contained",
       color: "error",
-      value: { color: "error", inverted: true },
-    },
+      value: { color: "error", inverted: true }
+    }
   ],
   defaultVariants: {
     variant: "outlined",
-    color: "neutral",
+    color: "neutral"
   },
-  default: { color: "secondary" },
+  default: { color: "secondary" }
 });
+export {
+  buttonColorVariant,
+  toast,
+  toastContainer,
+  toastWrapper
+};

package/dist/components/status/Toast/useToast.d.ts

@@ -0,0 +1,12 @@
+import { ToastPosition } from 'react-toastify';
+import { ToastProps } from './Toast';
+type IShowToast = Omit<ToastProps, "color"> & {
+    position?: ToastPosition;
+};
+export declare const useToast: () => {
+    successToast: (params: IShowToast) => void;
+    errorToast: (params: IShowToast) => void;
+    warningToast: (params: IShowToast) => void;
+    neutralToast: (params: IShowToast) => void;
+};
+export {};

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.d.ts

@@ -0,0 +1,8 @@
+export declare const statusIcon: (props?: ({
+    variant?: "contained" | "outlined" | null | undefined;
+    color?: "success" | "warning" | "error" | "neutral" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const statusSeparator: (props?: ({
+    variant?: "contained" | "outlined" | null | undefined;
+    color?: "success" | "warning" | "error" | "neutral" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/{src/components/status/shared/status.cva.ts → dist/components/status/shared/status.cva.js}

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

package/dist/components/table/CellText.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+export interface CellTextProps {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const CellText: FC<CellTextProps>;

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-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.d.ts

@@ -0,0 +1,10 @@
+import { ColumnDef, ColumnOrderState, VisibilityState } from '@tanstack/react-table';
+export interface ColumnConfigModalProps<TData, TValue> {
+    isOpen: boolean;
+    onClose: () => void;
+    configColumns: ColumnDef<TData, TValue>[];
+    visibleColumns: VisibilityState;
+    onVisibilityChange: (visibleColumns: VisibilityState) => void;
+    onOrderChange: (columnOrder: ColumnOrderState) => void;
+}
+export declare function ColumnConfigModal<TData, TValue>({ isOpen, onClose, configColumns, visibleColumns, onVisibilityChange, onOrderChange, }: ColumnConfigModalProps<TData, TValue>): import("react/jsx-runtime").JSX.Element | null;