@particle-network/ui-react 0.3.0-beta.8 → 0.3.0-beta.9

package/dist/components/UXSpinner/spinner.js

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "@heroui/theme";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
+import { colorToClassName } from "@particle-network/ui-shared";
 import { Square } from "../layout/index.js";
 import { SpinnerIcon } from "./SpinnerIcon.js";
 const UXSpinner = ({ size = 18, color = 'primary', duration = 1000, className, style, ...restProps })=>{
     const [currentIndex, setCurrentIndex] = useState(0);
     const animationRef = useRef(null);
-    const actualColor = 'currentColor' === color ? 'currentColor' : getHexColorFromCSSVariable(color);
+    const iconClassName = 'currentColor' === color ? void 0 : colorToClassName[color];
     useEffect(()=>{
         const stepDuration = duration / 12;
         const animate = ()=>{
@@ -29,9 +29,7 @@ const UXSpinner = ({ size = 18, color = 'primary', duration = 1000, className, s
         children: /*#__PURE__*/ jsx(SpinnerIcon, {
             width: size,
             height: size,
-            style: {
-                color: actualColor
-            },
+            className: iconClassName,
             currentIndex: currentIndex
         })
     });

package/dist/components/UXToast/index.d.ts

@@ -1 +1,16 @@
-export * from '@heroui/toast';
+import type { ToastProps } from '@heroui/toast';
+export type UXToastType = 'success' | 'error' | 'loading';
+export type UXToastProps = Partial<ToastProps> & {
+    type: UXToastType;
+};
+export declare const UXToastProvider: () => import("react/jsx-runtime").JSX.Element;
+export declare const UXToast: {
+    success: (message: string, props?: Partial<ToastProps>) => string | null;
+    error: (message: string, props?: Partial<ToastProps>) => string | null;
+    loading: (message: string, props?: Partial<ToastProps>) => string | null;
+    show: (props?: Partial<ToastProps> & {
+        type: UXToastType;
+    }) => string | null;
+    closeAll: () => void;
+    closeToast: (key: string) => void;
+};

package/dist/components/UXToast/index.js

@@ -1 +1,91 @@
-export * from "@heroui/toast";
+import { jsx } from "react/jsx-runtime";
+import { ToastProvider, addToast, closeAll, closeToast } from "@heroui/toast";
+import CircleCheckIcon from "@particle-network/icons/web/CircleCheckIcon";
+import CircleCloseIcon from "@particle-network/icons/web/CircleCloseIcon";
+import CloseIcon from "@particle-network/icons/web/CloseIcon";
+import { UXSpinner } from "../UXSpinner/index.js";
+const UXToastProvider = ()=>/*#__PURE__*/ jsx(ToastProvider, {
+        placement: "top-center",
+        maxVisibleToasts: 5,
+        toastOffset: 40,
+        toastProps: {
+            timeout: 4000
+        }
+    });
+const getIcon = (type)=>{
+    if ('success' === type) return /*#__PURE__*/ jsx(CircleCheckIcon, {
+        size: 18
+    });
+    if ('error' === type) return /*#__PURE__*/ jsx(CircleCloseIcon, {
+        size: 18
+    });
+    if ('loading' === type) return /*#__PURE__*/ jsx(UXSpinner, {
+        size: 18
+    });
+    return null;
+};
+const show = (props)=>{
+    const { type, hideCloseButton, variant, classNames, ...toastProps } = props ?? {};
+    return addToast({
+        classNames: {
+            base: [
+                'bg-tertiary rounded-xl px-3.5 py-3 shadow-none !w-fit max-w-[350px]',
+                !hideCloseButton && 'pr-12',
+                'flat' === variant && 'success' === type && 'bg-[#0E3728]',
+                'flat' === variant && 'error' === type && 'bg-[#501D1D]'
+            ],
+            description: [
+                'text-foreground text-xs font-medium me-0 leading-4',
+                'flat' === variant && 'text-white'
+            ],
+            icon: [
+                'shrink-0 h-5 w-5',
+                'success' === type && 'text-success',
+                'error' === type && 'text-danger',
+                'loading' === type && 'text-primary'
+            ],
+            loadingComponent: [
+                'text-primary h-5 w-5'
+            ],
+            content: [
+                'gap-x-2.5'
+            ],
+            closeButton: [
+                'absolute right-3 top-1/2 -translate-y-1/2',
+                hideCloseButton ? 'opacity-0' : 'opacity-100'
+            ],
+            ...classNames
+        },
+        icon: getIcon(type),
+        closeIcon: /*#__PURE__*/ jsx(CloseIcon, {
+            className: 'flat' === variant ? 'text-white' : 'text-foreground'
+        }),
+        loadingComponent: /*#__PURE__*/ jsx(UXSpinner, {
+            size: 18
+        }),
+        timeout: 'loading' === type ? 1 / 0 : 4000,
+        ...toastProps
+    });
+};
+const UXToast = {
+    success: (message, props)=>show({
+            type: 'success',
+            description: message,
+            ...props
+        }),
+    error: (message, props)=>show({
+            type: 'error',
+            description: message,
+            ...props
+        }),
+    loading: (message, props)=>show({
+            type: 'loading',
+            description: message,
+            timeout: 1 / 0,
+            ...props
+        }),
+    show,
+    closeAll: closeAll,
+    closeToast: closeToast
+};
+export { UXToast, UXToastProvider };

package/dist/components/typography/Text.js

@@ -4,7 +4,10 @@ import { cn } from "@heroui/theme";
 import { textClasses } from "./Text.type.js";
 const Text = /*#__PURE__*/ forwardRef(({ variant = 'body2Bold', fontWeight, color, lineHeight, align, className, h1, h2, h3, body1, body1Bold, body2, body2Bold, body3, body3Bold, caption1, caption1Bold, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
         ref: ref,
-        className: cn(textClasses.variant[variant], h1 && textClasses.variant.h1, h2 && textClasses.variant.h2, h3 && textClasses.variant.h3, body1 && textClasses.variant.body1, body1Bold && textClasses.variant.body1Bold, body2 && textClasses.variant.body2, body2Bold && textClasses.variant.body2Bold, body3 && textClasses.variant.body3, body3Bold && textClasses.variant.body3Bold, caption1 && textClasses.variant.caption1, caption1Bold && textClasses.variant.caption1Bold, textClasses.fontWeight[fontWeight], textClasses.color[color], textClasses.lineHeight[lineHeight], textClasses.align[align], className),
+        style: {
+            color: color?.startsWith('#') ? color : void 0
+        },
+        className: cn(textClasses.variant[variant], h1 && textClasses.variant.h1, h2 && textClasses.variant.h2, h3 && textClasses.variant.h3, body1 && textClasses.variant.body1, body1Bold && textClasses.variant.body1Bold, body2 && textClasses.variant.body2, body2Bold && textClasses.variant.body2Bold, body3 && textClasses.variant.body3, body3Bold && textClasses.variant.body3Bold, caption1 && textClasses.variant.caption1, caption1Bold && textClasses.variant.caption1Bold, textClasses.fontWeight[fontWeight], !color?.startsWith('#') && textClasses.color[color], textClasses.lineHeight[lineHeight], textClasses.align[align], className),
         ...props
     }));
 Text.displayName = 'UX.Text';

package/dist/components/typography/Text.type.d.ts

@@ -89,7 +89,7 @@ export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
      * | warning    | #FF9821   | #FF9821   |
      * | gold       | #FFB800   | #F38300   |
      */
-    color?: UXForegroundColor;
+    color?: UXForegroundColor | `#${string}`;
     lineHeight?: TextLineHeight;
     align?: TextAlign;
 }

package/dist/utils/input-classes.js

@@ -41,7 +41,7 @@ const inputClasses = {
         color: {
             default: {
                 inputWrapper: 'caret-foreground',
-                input: 'text-foreground-100'
+                input: 'text-foreground'
             },
             primary: {
                 inputWrapper: 'caret-primary',
@@ -49,7 +49,7 @@ const inputClasses = {
             },
             secondary: {
                 inputWrapper: 'caret-foreground',
-                input: 'text-foreground-300'
+                input: 'text-secondary'
             },
             success: {
                 inputWrapper: 'caret-success',
@@ -185,9 +185,9 @@ const inputClasses = {
                 'lg'
             ],
             class: {
-                inputWrapper: 'bg-background-200 text-foreground-100 font-medium',
+                inputWrapper: 'bg-background-200 text-tertiary font-medium',
                 label: 'font-medium',
-                input: '!outline-none placeholder:text-foreground-100 placeholder:font-medium font-medium text-foreground'
+                input: '!outline-none placeholder:text-tertiary dark:placeholder:text-tertiary placeholder:font-medium font-medium text-foreground'
             }
         },
         {
@@ -195,7 +195,7 @@ const inputClasses = {
             color: 'default',
             isInvalid: false,
             class: {
-                inputWrapper: 'group-data-[focus=true]:border-foreground-100'
+                inputWrapper: 'group-data-[focus=true]:border-foreground'
             }
         },
         {
@@ -211,7 +211,7 @@ const inputClasses = {
             color: 'secondary',
             isInvalid: false,
             class: {
-                inputWrapper: 'group-data-[focus=true]:border-foreground-300'
+                inputWrapper: 'group-data-[focus=true]:border-secondary'
             }
         },
         {
@@ -260,9 +260,9 @@ const inputClasses = {
             isInvalid: false,
             class: {
                 inputWrapper: [
-                    'border-foreground-100',
-                    'data-[hover=true]:border-foreground-100',
-                    'group-data-[focus=true]:border-foreground-100'
+                    'border-foreground',
+                    'data-[hover=true]:border-foreground',
+                    'group-data-[focus=true]:border-foreground'
                 ]
             }
         },
@@ -284,9 +284,9 @@ const inputClasses = {
             isInvalid: false,
             class: {
                 inputWrapper: [
-                    'border-foreground-300',
+                    'border-secondary',
                     'data-[hover=true]:bg-background-200/70',
-                    'group-data-[focus=true]:border-foreground-300'
+                    'group-data-[focus=true]:border-secondary'
                 ]
             }
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.3.0-beta.8",
+  "version": "0.3.0-beta.9",
   "type": "module",
   "exports": {
     ".": {
@@ -48,7 +48,8 @@
   },
   "dependencies": {
     "ahooks": "^3.9.4",
-    "@particle-network/ui-shared": "0.2.0-beta.2"
+    "@particle-network/ui-shared": "0.2.0-beta.3",
+    "@particle-network/icons": "0.3.0-beta.6"
   },
   "scripts": {
     "build": "rslib build",