@particle-network/ui-react 0.5.1-beta.7 → 0.5.1-beta.9

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

@@ -1,6 +1,5 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
-import { cn } from "@heroui/theme";
 import { boxVariants } from "./box-theme.js";
 const Box = /*#__PURE__*/ forwardRef(({ as, position, display, aspect, overflow, zIndex, direction, items, justify, gap, wrap, self, fill, vertical, horizontal, center, grow, shrink, order, p, pt, pr, pb, pl, ps, pe, px, py, m, mt, mr, mb, ml, ms, me, mx, my, w, h, minW, maxW, minH, maxH, fullWidth, fullHeight, bg, opacity, shadow, rounded, radius, borderStyle, cursor, color, fontWeight, lineHeight, textAlign, style = {}, className, ...props }, ref)=>{
     const Component = as || 'div';
@@ -26,7 +25,7 @@ const Box = /*#__PURE__*/ forwardRef(({ as, position, display, aspect, overflow,
     return /*#__PURE__*/ jsx(Component, {
         ref: ref,
         style: boxStyle,
-        className: cn(boxVariants({
+        className: boxVariants({
             position,
             display,
             aspect,
@@ -81,8 +80,9 @@ const Box = /*#__PURE__*/ forwardRef(({ as, position, display, aspect, overflow,
             color: color,
             fontWeight,
             lineHeight,
-            textAlign
-        }), className),
+            textAlign,
+            className
+        }),
         ...props
     });
 });

package/dist/components/layout/Square.js

@@ -4,10 +4,8 @@ import { Center } from "./Center.js";
 const Square = /*#__PURE__*/ forwardRef(({ size, ...props }, ref)=>/*#__PURE__*/ jsx(Center, {
         ref: ref,
         shrink: 0,
-        style: {
-            width: `${size}px`,
-            height: `${size}px`
-        },
+        w: size,
+        aspect: "square",
         ...props
     }));
 Square.displayName = 'UX.Square';

package/dist/components/typography/Text.js

@@ -1,13 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { cn } from "@heroui/theme";
 import { Box } from "../layout/index.js";
 import { textVariants } from "./text-theme.js";
 const Text = /*#__PURE__*/ forwardRef(({ variant, className, h1, h2, h3, body1, body1Bold, body2, body2Bold, body3, body3Bold, caption1, caption1Bold, fontWeight, lineHeight, align, textAlign, ...props }, ref)=>/*#__PURE__*/ jsx(Box, {
         ref: ref,
         as: "span",
         textAlign: textAlign || align,
-        className: cn(textVariants({
+        className: textVariants({
             variant,
             h1,
             h2,
@@ -21,8 +20,9 @@ const Text = /*#__PURE__*/ forwardRef(({ variant, className, h1, h2, h3, body1,
             caption1,
             caption1Bold,
             fontWeight,
-            lineHeight
-        }), className),
+            lineHeight,
+            className
+        }),
         ...props
     }));
 Text.displayName = 'UX.Text';

package/dist/hooks/useI18n.d.ts

@@ -40,11 +40,12 @@ export declare const useI18n: () => {
         readonly primary: "Primary";
         readonly bullish: "Positive";
         readonly bearish: "Negative";
-        readonly 'bg-default': "Background";
-        readonly 'bg-200': "Background Quaternary";
-        readonly 'bg-300': "Background Tertiary";
-        readonly 'bg-400': "Background Secondary";
-        readonly overlay: "Overlay";
+        readonly bgDefault: "Background Primary";
+        readonly bg200: "Background Quaternary";
+        readonly bg300: "Background Tertiary";
+        readonly bg400: "Background Secondary";
+        readonly cursor: "Background Selected";
+        readonly overlay: "Background Overlay";
         readonly default: "Default";
         readonly foreground: "Text Primary";
         readonly secondary: "Text Secondary";
@@ -54,6 +55,7 @@ export declare const useI18n: () => {
         readonly danger: "Signal Red";
         readonly warning: "Signal Yellow";
         readonly alert: "Signal Orange";
+        readonly blue: "Signal Blue";
         readonly candleUp: "Body (up)";
         readonly candleDown: "Body (down)";
         readonly candleWickUp: "Wick (up)";
@@ -107,11 +109,12 @@ export declare const useI18n: () => {
         readonly primary: "主要色";
         readonly bullish: "上涨色";
         readonly bearish: "下跌色";
-        readonly 'bg-default': "一级背景色";
-        readonly 'bg-200': "四级背景色";
-        readonly 'bg-300': "三级背景色";
-        readonly 'bg-400': "二级背景色";
-        readonly overlay: "浮窗色";
+        readonly bgDefault: "一级背景色";
+        readonly bg200: "四级背景色";
+        readonly bg300: "三级背景色";
+        readonly bg400: "二级背景色";
+        readonly cursor: "选中背景色";
+        readonly overlay: "浮窗背景色";
         readonly default: "默认";
         readonly foreground: "一级文字色";
         readonly secondary: "二级文字色";
@@ -121,6 +124,7 @@ export declare const useI18n: () => {
         readonly danger: "红色信号";
         readonly warning: "黄色信号";
         readonly alert: "橙色信号";
+        readonly blue: "蓝色信号";
         readonly candleUp: "主体色 (上涨)";
         readonly candleDown: "主体色 (下跌)";
         readonly candleWickUp: "影线 (上涨)";

package/dist/hooks/useI18n.js

@@ -42,11 +42,12 @@ const en = {
         primary: 'Primary',
         bullish: 'Positive',
         bearish: 'Negative',
-        'bg-default': 'Background',
-        'bg-200': 'Background Quaternary',
-        'bg-300': 'Background Tertiary',
-        'bg-400': 'Background Secondary',
-        overlay: 'Overlay',
+        bgDefault: 'Background Primary',
+        bg200: 'Background Quaternary',
+        bg300: 'Background Tertiary',
+        bg400: 'Background Secondary',
+        cursor: 'Background Selected',
+        overlay: 'Background Overlay',
         default: 'Default',
         foreground: 'Text Primary',
         secondary: 'Text Secondary',
@@ -56,6 +57,7 @@ const en = {
         danger: 'Signal Red',
         warning: 'Signal Yellow',
         alert: 'Signal Orange',
+        blue: 'Signal Blue',
         candleUp: 'Body (up)',
         candleDown: 'Body (down)',
         candleWickUp: 'Wick (up)',
@@ -110,11 +112,12 @@ const zh = {
         primary: '主要色',
         bullish: '上涨色',
         bearish: '下跌色',
-        'bg-default': '一级背景色',
-        'bg-200': '四级背景色',
-        'bg-300': '三级背景色',
-        'bg-400': '二级背景色',
-        overlay: '浮窗色',
+        bgDefault: '一级背景色',
+        bg200: '四级背景色',
+        bg300: '三级背景色',
+        bg400: '二级背景色',
+        cursor: '选中背景色',
+        overlay: '浮窗背景色',
         default: '默认',
         foreground: '一级文字色',
         secondary: '二级文字色',
@@ -124,6 +127,7 @@ const zh = {
         danger: '红色信号',
         warning: '黄色信号',
         alert: '橙色信号',
+        blue: '蓝色信号',
         candleUp: '主体色 (上涨)',
         candleDown: '主体色 (下跌)',
         candleWickUp: '影线 (上涨)',

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/utils/cn.js

@@ -0,0 +1,258 @@
+import { clsx } from "clsx";
+import { extendTailwindMerge, twMerge } from "tailwind-merge";
+const COMMON_UNITS = [
+    'small',
+    'medium',
+    'large'
+];
+const FONT_SIZE = [
+    'xxs',
+    'tiny',
+    'caption1',
+    'body3',
+    'body2',
+    'body1',
+    'h4',
+    'h3',
+    'h2',
+    'h1'
+];
+const COMMON_SPACING = [
+    'xs',
+    'sm',
+    'md',
+    'lg'
+];
+const OPACITY = [
+    'disabled',
+    'hover'
+];
+const cn_twMerge = extendTailwindMerge({
+    extend: {
+        classGroups: {
+            'font-size': [
+                {
+                    text: [
+                        ...FONT_SIZE,
+                        ...COMMON_UNITS
+                    ]
+                }
+            ],
+            px: [
+                {
+                    px: COMMON_SPACING
+                }
+            ],
+            py: [
+                {
+                    py: COMMON_SPACING
+                }
+            ],
+            pt: [
+                {
+                    pt: COMMON_SPACING
+                }
+            ],
+            pb: [
+                {
+                    pb: COMMON_SPACING
+                }
+            ],
+            pl: [
+                {
+                    pl: COMMON_SPACING
+                }
+            ],
+            pr: [
+                {
+                    pr: COMMON_SPACING
+                }
+            ],
+            ps: [
+                {
+                    ps: COMMON_SPACING
+                }
+            ],
+            pe: [
+                {
+                    pe: COMMON_SPACING
+                }
+            ],
+            p: [
+                {
+                    p: COMMON_SPACING
+                }
+            ],
+            m: [
+                {
+                    m: COMMON_SPACING
+                }
+            ],
+            mx: [
+                {
+                    mx: COMMON_SPACING
+                }
+            ],
+            my: [
+                {
+                    my: COMMON_SPACING
+                }
+            ],
+            mt: [
+                {
+                    mt: COMMON_SPACING
+                }
+            ],
+            mb: [
+                {
+                    mb: COMMON_SPACING
+                }
+            ],
+            ml: [
+                {
+                    ml: COMMON_SPACING
+                }
+            ],
+            mr: [
+                {
+                    mr: COMMON_SPACING
+                }
+            ],
+            ms: [
+                {
+                    ms: COMMON_SPACING
+                }
+            ],
+            me: [
+                {
+                    me: COMMON_SPACING
+                }
+            ],
+            gap: [
+                {
+                    gap: COMMON_SPACING
+                }
+            ],
+            'gap-x': [
+                {
+                    'gap-x': COMMON_SPACING
+                }
+            ],
+            'gap-y': [
+                {
+                    'gap-y': COMMON_SPACING
+                }
+            ],
+            rounded: [
+                {
+                    rounded: COMMON_UNITS
+                }
+            ],
+            'rounded-s': [
+                {
+                    'rounded-s': COMMON_UNITS
+                }
+            ],
+            'rounded-e': [
+                {
+                    'rounded-e': COMMON_UNITS
+                }
+            ],
+            'rounded-t': [
+                {
+                    'rounded-t': COMMON_UNITS
+                }
+            ],
+            'rounded-r': [
+                {
+                    'rounded-r': COMMON_UNITS
+                }
+            ],
+            'rounded-b': [
+                {
+                    'rounded-b': COMMON_UNITS
+                }
+            ],
+            'rounded-l': [
+                {
+                    'rounded-l': COMMON_UNITS
+                }
+            ],
+            top: [
+                {
+                    top: COMMON_SPACING
+                }
+            ],
+            right: [
+                {
+                    right: COMMON_SPACING
+                }
+            ],
+            bottom: [
+                {
+                    bottom: COMMON_SPACING
+                }
+            ],
+            left: [
+                {
+                    left: COMMON_SPACING
+                }
+            ],
+            inset: [
+                {
+                    inset: COMMON_SPACING
+                }
+            ],
+            'inset-x': [
+                {
+                    'inset-x': COMMON_SPACING
+                }
+            ],
+            'inset-y': [
+                {
+                    'inset-y': COMMON_SPACING
+                }
+            ],
+            start: [
+                {
+                    start: COMMON_SPACING
+                }
+            ],
+            end: [
+                {
+                    end: COMMON_SPACING
+                }
+            ],
+            opacity: [
+                {
+                    opacity: OPACITY
+                }
+            ],
+            'border-w': [
+                {
+                    border: COMMON_UNITS
+                }
+            ],
+            shadow: [
+                {
+                    shadow: [
+                        'box',
+                        ...COMMON_UNITS
+                    ]
+                }
+            ]
+        }
+    }
+});
+function cn(...inputs) {
+    return cn_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/index.d.ts

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

package/dist/utils/index.js

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

package/dist/utils/input-classes.js

@@ -191,9 +191,9 @@ const inputClasses = {
                 'lg'
             ],
             class: {
-                inputWrapper: 'bg-background-200 text-tertiary font-medium',
+                inputWrapper: 'bg-background-200 text-foreground-100 font-medium',
                 label: 'font-medium',
-                input: '!outline-none placeholder:text-tertiary placeholder:font-medium font-medium text-foreground'
+                input: '!outline-none placeholder:text-foreground-100 placeholder:font-medium font-medium text-foreground'
             }
         },
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.5.1-beta.7",
+  "version": "0.5.1-beta.9",
   "type": "module",
   "exports": {
     ".": {
@@ -38,8 +38,8 @@
     "@rslib/core": "^0.12.3",
     "@types/react": "^19.1.10",
     "react": "^19.1.0",
-    "@particle-network/lintstaged-config": "0.1.0",
-    "@particle-network/eslint-config": "0.3.0"
+    "@particle-network/eslint-config": "0.3.0",
+    "@particle-network/lintstaged-config": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -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.3",
-    "@particle-network/ui-shared": "0.4.1-beta.2"
+    "@particle-network/ui-shared": "0.4.1-beta.4",
+    "@particle-network/icons": "0.5.1-beta.5"
   },
   "scripts": {
     "build": "rslib build",