@particle-network/ui-react 0.5.1-beta.10 → 0.5.1-beta.12

package/dist/components/UXThemeSwitch/theme-item.js

@@ -162,8 +162,7 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                         'custom' === id ? /*#__PURE__*/ jsxs(Fragment, {
                             children: [
                                 /*#__PURE__*/ jsx("g", {
-                                    "clip-path": "url(#paint0_angular_48986_280686_clip_path)",
-                                    "data-figma-skip-parse": "true",
+                                    clipPath: "url(#paint0_angular_48986_280686_clip_path)",
                                     children: /*#__PURE__*/ jsx("g", {
                                         transform: "matrix(0 0.011 -0.011 0 39 51)",
                                         children: /*#__PURE__*/ jsx("foreignObject", {
@@ -188,7 +187,7 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                                     r: "10.7583",
                                     "data-figma-gradient-fill": '{"type":"GRADIENT_ANGULAR","stops":[{"color":{"r":1.0,"g":0.0,"b":0.0,"a":1.0},"position":0.0},{"color":{"r":1.0,"g":0.52295231819152832,"b":0.0,"a":1.0},"position":0.15000000596046448},{"color":{"r":0.74555355310440063,"g":1.0,"b":0.0,"a":1.0},"position":0.32499998807907104},{"color":{"r":0.029410807415843010,"g":0.88352936506271362,"b":1.0,"a":1.0},"position":0.55500000715255737},{"color":{"r":0.14000000059604645,"g":0.0,"b":1.0,"a":1.0},"position":0.78500002622604370},{"color":{"r":0.67999994754791260,"g":0.0,"b":1.0,"a":1.0},"position":1.0}],"stopsVar":[{"color":{"r":1.0,"g":0.0,"b":0.0,"a":1.0},"position":0.0},{"color":{"r":1.0,"g":0.52295231819152832,"b":0.0,"a":1.0},"position":0.15000000596046448},{"color":{"r":0.74555355310440063,"g":1.0,"b":0.0,"a":1.0},"position":0.32499998807907104},{"color":{"r":0.029410807415843010,"g":0.88352936506271362,"b":1.0,"a":1.0},"position":0.55500000715255737},{"color":{"r":0.14000000059604645,"g":0.0,"b":1.0,"a":1.0},"position":0.78500002622604370},{"color":{"r":0.67999994754791260,"g":0.0,"b":1.0,"a":1.0},"position":1.0}],"transform":{"m00":1.3471115643134642e-15,"m01":-22.0,"m02":50.0,"m10":22.0,"m11":1.3471115643134642e-15,"m12":40.0},"opacity":1.0,"blendMode":"NORMAL","visible":true}',
                                     stroke: "#8B8EA1",
-                                    "stroke-width": "0.483303"
+                                    strokeWidth: "0.483303"
                                 }),
                                 /*#__PURE__*/ jsx("defs", {
                                     children: /*#__PURE__*/ jsx("clipPath", {
@@ -197,7 +196,7 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                                             cx: "39",
                                             cy: "51",
                                             r: "10.7583",
-                                            "stroke-width": "0.483303"
+                                            strokeWidth: "0.483303"
                                         })
                                     })
                                 })

package/dist/components/UXThemeSwitch/theme-switch.js

@@ -1,8 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useDisclosure } from "@heroui/use-disclosure";
 import { ChartColorSwitchIcon, CopyIcon } from "@particle-network/icons/web";
-import { DEFAULT_THEME_ID, themeData } from "@particle-network/ui-shared";
+import { themeData } from "@particle-network/ui-shared";
 import { useI18n } from "../../hooks/index.js";
 import { cn } from "../../utils/index.js";
 import { HStack, VStack } from "../layout/index.js";
@@ -34,25 +34,17 @@ const FONT_EXAMPLES = [
 ];
 const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, onClose, onOpenChange })=>{
     const i18n = useI18n();
-    const { theme: selectedTheme, customTheme: savedCustomTheme, setTheme, fontUrl, setFontUrl, fontName, fontLoadStatus, clearFontUrl } = useTheme();
+    const { theme: selectedTheme, customTheme: savedCustomTheme, setTheme, initTheme, fontUrl, setFontUrl, fontName, fontLoadStatus, clearFontUrl } = useTheme();
     const [isFontExampleOpen, setIsFontExampleOpen] = useState(false);
+    useEffect(()=>{
+        initTheme();
+    }, []);
     const Component = 'modal' === as ? UXModal : UXDrawer;
     const themes = useMemo(()=>themeData.filter((theme)=>!omitThemes.includes(theme.id)), [
         omitThemes
     ]);
     const handleThemeSelect = (theme)=>{
-        if ('custom' === theme.id) if (savedCustomTheme) setTheme(savedCustomTheme);
-        else {
-            const baseTheme = themeData.find((t)=>t.id === DEFAULT_THEME_ID) || themeData["0"];
-            const customTheme = {
-                ...theme,
-                baseThemeId: DEFAULT_THEME_ID,
-                colorScheme: baseTheme.colorScheme,
-                colorVariables: baseTheme.colorVariables
-            };
-            setTheme(customTheme);
-        }
-        else setTheme(theme);
+        'custom' === theme.id ? setTheme(savedCustomTheme) : setTheme(theme);
     };
     return /*#__PURE__*/ jsx(Component, {
         isOpen: isOpen,

package/dist/components/UXThemeSwitch/use-theme.d.ts

@@ -6,6 +6,7 @@ export declare const useTheme: () => {
     theme: ThemeItemType;
     customTheme: ThemeItemType;
     setTheme: (theme: ThemeItemType) => void;
+    initTheme: () => void;
     setCustomTheme: (customTheme: ThemeItemType) => void;
     fontUrl: string;
     setFontUrl: (link: string) => void;

package/dist/components/UXThemeSwitch/use-theme.js

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { useDebounceFn } from "ahooks";
 import { useThemeStore } from "./use-theme-store.js";
 import { applyFont, applyTheme, extractFontFamilyFromLink, preloadFonts } from "./utils.js";
@@ -42,16 +41,11 @@ const useTheme = ()=>{
     const { run: debouncedApplyFont } = useDebounceFn((customFontLink, themeFontName)=>applyFontWithStatus(customFontLink, themeFontName), {
         wait: 300
     });
-    useEffect(()=>{
+    const initTheme = ()=>{
         preloadFonts();
         applyTheme(theme);
         debouncedApplyFont(fontUrl, theme.fontName);
-    }, []);
-    useEffect(()=>{
-        applyTheme(theme);
-    }, [
-        theme
-    ]);
+    };
     const setTheme = (theme)=>{
         storeSetTheme(theme);
         applyTheme(theme);
@@ -71,6 +65,7 @@ const useTheme = ()=>{
         theme,
         customTheme,
         setTheme,
+        initTheme,
         setCustomTheme: storeSetCustomTheme,
         fontUrl,
         setFontUrl,

package/dist/components/UXThemeSwitch/utils.js

@@ -1,6 +1,7 @@
-import { hexColorToHSLValue, themeKeys } from "@particle-network/ui-shared";
+import { hexColorToHSLValue, themeData, themeKeys } from "@particle-network/ui-shared";
 import { readableColor } from "color2k";
 import { generateThemeColor } from "../../heroui/utils/colors.js";
+import { objectEntries } from "../../utils/index.js";
 import { DEFAULT_FONT_FAMILY, PRELOAD_FONTS_URL } from "./constants.js";
 const getCSSProperties = (theme)=>{
     const { colorVariables } = theme;
@@ -12,10 +13,17 @@ const getCSSProperties = (theme)=>{
             ]
         ],
         secondary: [
-            ...generateThemeColor(colorVariables.secondary, 'secondary', theme.colorScheme).cssVariables,
+            [
+                '--heroui-secondary',
+                colorVariables.secondary
+            ],
             [
                 '--heroui-foreground-300',
                 colorVariables.secondary
+            ],
+            [
+                '--heroui-secondary-foreground',
+                readableColor(colorVariables.secondary)
             ]
         ],
         tertiary: [
@@ -33,8 +41,26 @@ const getCSSProperties = (theme)=>{
             ]
         ],
         primary: generateThemeColor(colorVariables.primary, 'primary', theme.colorScheme).cssVariables,
-        success: generateThemeColor(colorVariables.success, 'success', theme.colorScheme).cssVariables,
-        danger: generateThemeColor(colorVariables.danger, 'danger', theme.colorScheme).cssVariables,
+        success: [
+            [
+                '--heroui-success',
+                colorVariables.success
+            ],
+            [
+                '--heroui-success-foreground',
+                readableColor(colorVariables.success)
+            ]
+        ],
+        danger: [
+            [
+                '--heroui-danger',
+                colorVariables.danger
+            ],
+            [
+                '--heroui-danger-foreground',
+                readableColor(colorVariables.danger)
+            ]
+        ],
         alert: [
             [
                 '--heroui-alert',
@@ -45,7 +71,16 @@ const getCSSProperties = (theme)=>{
                 readableColor(colorVariables.alert)
             ]
         ],
-        warning: generateThemeColor(colorVariables.warning, 'warning', theme.colorScheme).cssVariables,
+        warning: [
+            [
+                '--heroui-warning',
+                colorVariables.warning
+            ],
+            [
+                '--heroui-warning-foreground',
+                readableColor(colorVariables.warning)
+            ]
+        ],
         blue: [
             [
                 '--heroui-blue',
@@ -161,8 +196,11 @@ const setCSSProperty = (property, value)=>{
 };
 const applyCustomThemeColors = (theme)=>{
     if ('undefined' == typeof window) return;
+    const baseThemeColors = themeData.find((t)=>t.id === theme.baseThemeId).colorVariables;
+    const customThemeColors = theme.colorVariables;
     const cssProperties = getCSSProperties(theme);
-    Object.entries(cssProperties).forEach(([, value])=>{
+    objectEntries(cssProperties).forEach(([colorKey, value])=>{
+        if (baseThemeColors[colorKey] === customThemeColors[colorKey]) return;
         value.forEach(([variable, value])=>{
             setCSSProperty(variable, value);
         });

package/dist/components/layout/Box/box-theme.d.ts

@@ -231,15 +231,11 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         0: string;
         1: string;
-        2: string;
-        3: string;
     };
     shrink: {
         true: string;
         0: string;
         1: string;
-        2: string;
-        3: string;
     };
     order: {
         first: string;
@@ -971,15 +967,11 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         0: string;
         1: string;
-        2: string;
-        3: string;
     };
     shrink: {
         true: string;
         0: string;
         1: string;
-        2: string;
-        3: string;
     };
     order: {
         first: string;
@@ -1711,15 +1703,11 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         0: string;
         1: string;
-        2: string;
-        3: string;
     };
     shrink: {
         true: string;
         0: string;
         1: string;
-        2: string;
-        3: string;
     };
     order: {
         first: string;

package/dist/components/layout/Box/box-theme.js

@@ -217,16 +217,12 @@ const boxVariants = tv({
         grow: {
             true: 'grow',
             0: 'grow-0',
-            1: 'grow-1',
-            2: 'grow-2',
-            3: 'grow-3'
+            1: 'grow'
         },
         shrink: {
             true: 'shrink',
             0: 'shrink-0',
-            1: 'shrink-1',
-            2: 'shrink-2',
-            3: 'shrink-3'
+            1: 'shrink'
         },
         order: {
             first: 'order-first',

package/dist/utils/cn.js

@@ -1,5 +1,5 @@
 import { clsx } from "clsx";
-import { extendTailwindMerge, twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
 const COMMON_UNITS = [
     'small',
     'medium',
@@ -27,7 +27,7 @@ const OPACITY = [
     'disabled',
     'hover'
 ];
-const cn_twMerge = extendTailwindMerge({
+const twMerge = extendTailwindMerge({
     extend: {
         classGroups: {
             'font-size': [
@@ -245,14 +245,6 @@ const cn_twMerge = extendTailwindMerge({
     }
 });
 function cn(...inputs) {
-    return cn_twMerge(clsx(inputs));
+    return twMerge(clsx(inputs));
 }
-console.log(cn('text-red-500 text-brand text-h1'), '|', twMerge('text-red-500 text-brand text-h1'));
-console.log(cn('text-red-500 text-sm text-h1'), '|', twMerge('text-red-500 text-sm text-h1'));
-console.log(cn('px-2 px-md'), '|', twMerge('px-2 px-md'));
-console.log(cn('gap-2 gap-md'), '|', twMerge('gap-2 gap-md'));
-console.log(cn('rounded-sm rounded-small'), '|', twMerge('rounded-sm rounded-small'));
-console.log(cn('top-1 top-md'), '|', twMerge('top-1 top-md'));
-console.log(cn('opacity-0 opacity-disabled opacity-hover'), '|', twMerge('opacity-0 opacity-disabled opacity-hover'));
-console.log(cn('border-1 border-large'), '|', twMerge('border-1 border-large'));
 export { cn };

package/dist/utils/common.d.ts

@@ -0,0 +1 @@
+export declare function objectEntries<T extends object>(obj: T): [keyof T & string, T[keyof T & string]][];

package/dist/utils/common.js

@@ -0,0 +1,4 @@
+function objectEntries(obj) {
+    return Object.entries(obj);
+}
+export { objectEntries };

package/dist/utils/index.d.ts

@@ -1,5 +1,6 @@
 export { absoluteFullClasses, baseStyles, collapseAdjacentVariantBorders, dataFocusVisibleClasses, focusVisibleClasses, groupDataFocusVisibleClasses, hiddenInputClasses, ringClasses, translateCenterClasses, } from './classes';
 export { cn } from './cn';
+export { objectEntries } from './common';
 export * from './detect';
 export * from './input-classes';
 export { colorVariants } from './variants';

package/dist/utils/index.js

@@ -1,6 +1,7 @@
 import { absoluteFullClasses, baseStyles, collapseAdjacentVariantBorders, dataFocusVisibleClasses, focusVisibleClasses, groupDataFocusVisibleClasses, hiddenInputClasses, ringClasses, translateCenterClasses } from "./classes.js";
 import { cn } from "./cn.js";
+import { objectEntries } from "./common.js";
 import { colorVariants } from "./variants.js";
 export * from "./detect.js";
 export * from "./input-classes.js";
-export { absoluteFullClasses, baseStyles, cn, collapseAdjacentVariantBorders, colorVariants, dataFocusVisibleClasses, focusVisibleClasses, groupDataFocusVisibleClasses, hiddenInputClasses, ringClasses, translateCenterClasses };
+export { absoluteFullClasses, baseStyles, cn, collapseAdjacentVariantBorders, colorVariants, dataFocusVisibleClasses, focusVisibleClasses, groupDataFocusVisibleClasses, hiddenInputClasses, objectEntries, ringClasses, translateCenterClasses };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.5.1-beta.10",
+  "version": "0.5.1-beta.12",
   "type": "module",
   "exports": {
     ".": {
@@ -52,8 +52,8 @@
     "react-aria-components": "^1.14.0",
     "values.js": "^2.1.1",
     "zustand": "^5.0.8",
-    "@particle-network/icons": "0.5.1-beta.5",
-    "@particle-network/ui-shared": "0.4.1-beta.4"
+    "@particle-network/icons": "0.5.1-beta.6",
+    "@particle-network/ui-shared": "0.4.1-beta.5"
   },
   "scripts": {
     "build": "rslib build",