@particle-network/ui-react 0.5.1-beta.8 → 0.6.0

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

@@ -50,8 +50,8 @@ const sizingPresets = [
 const bgClasses = {
     current: 'bg-current',
     transparent: 'bg-transparent',
-    default: 'bg-default',
-    pure: 'light:bg-white dark:bg-black',
+    bgDefault: 'bg-background',
+    bgPure: 'light:bg-white dark:bg-black',
     bg100: 'bg-background-100',
     bg200: 'bg-background-200',
     bg300: 'bg-background-300',
@@ -61,14 +61,14 @@ const bgClasses = {
     foreground: 'bg-foreground',
     secondary: 'bg-secondary',
     tertiary: 'bg-tertiary',
-    cursor: 'bg-cursor',
-    primary: 'bg-primary',
-    success: 'bg-success',
-    warning: 'bg-warning',
-    danger: 'bg-danger',
-    alert: 'bg-alert',
-    bullish: 'bg-bullish',
-    bearish: 'bg-bearish'
+    cursor: 'bg-cursor text-cursor-foreground',
+    primary: 'bg-primary text-primary-foreground',
+    success: 'bg-success text-success-foreground',
+    warning: 'bg-warning text-warning-foreground',
+    danger: 'bg-danger text-danger-foreground',
+    alert: 'bg-alert text-alert-foreground',
+    bullish: 'bg-bullish text-bullish-foreground',
+    bearish: 'bg-bearish text-bearish-foreground'
 };
 const colorClasses = {
     current: 'text-current',
@@ -76,15 +76,25 @@ const colorClasses = {
     divider: 'text-divider',
     foreground: 'text-foreground',
     secondary: 'text-secondary',
+    secondaryForeground: 'text-secondary-foreground',
     tertiary: 'text-tertiary',
+    tertiaryForeground: 'text-tertiary-foreground',
     cursor: 'text-cursor',
+    cursorForeground: 'text-cursor-foreground',
     primary: 'text-primary',
+    primaryForeground: 'text-primary-foreground',
     success: 'text-success',
+    successForeground: 'text-success-foreground',
     warning: 'text-warning',
+    warningForeground: 'text-warning-foreground',
     danger: 'text-danger',
+    dangerForeground: 'text-danger-foreground',
     alert: 'text-alert',
+    alertForeground: 'text-alert-foreground',
     bullish: 'text-bullish',
-    bearish: 'text-bearish'
+    bullishForeground: 'text-bullish-foreground',
+    bearish: 'text-bearish',
+    bearishForeground: 'text-bearish-foreground'
 };
 const borderColorClasses = {
     transparent: 'border-transparent',
@@ -207,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',
@@ -302,9 +308,9 @@ const boxVariants = tv({
         borderWidth: {
             none: 'border-none',
             '0.5': 'border-[0.5px]',
-            1: 'border-px',
+            1: 'border-[1px]',
             '1.5': 'border-[1.5px]',
-            2: 'border-2'
+            2: 'border-[2px]'
         },
         cursor: {
             auto: 'cursor-auto',

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

@@ -1,8 +1,7 @@
 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 Box = /*#__PURE__*/ forwardRef(({ as, position, top, right, bottom, left, start, end, inset, 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, borderColor, borderWidth, cursor, color, fontWeight, lineHeight, textAlign, style = {}, className, ...props }, ref)=>{
     const Component = as || 'div';
     const boxStyle = useMemo(()=>({
             width: 'number' == typeof w ? `${w}px` : void 0,
@@ -26,8 +25,15 @@ const Box = /*#__PURE__*/ forwardRef(({ as, position, display, aspect, overflow,
     return /*#__PURE__*/ jsx(Component, {
         ref: ref,
         style: boxStyle,
-        className: cn(boxVariants({
+        className: boxVariants({
             position,
+            top,
+            right,
+            bottom,
+            left,
+            start,
+            end,
+            inset,
             display,
             aspect,
             overflow,
@@ -77,12 +83,15 @@ const Box = /*#__PURE__*/ forwardRef(({ as, position, display, aspect, overflow,
             rounded,
             radius,
             borderStyle,
+            borderColor,
+            borderWidth,
             cursor,
             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,20 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { cn } from "@heroui/theme";
+import { forwardRef, useMemo } from "react";
 import { Box } from "../layout/index.js";
+import { WrapText } from "../WrapText/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, {
+const Text = /*#__PURE__*/ forwardRef(({ variant, className, h1, h2, h3, body1, body1Bold, body2, body2Bold, body3, body3Bold, caption1, caption1Bold, fontWeight, lineHeight, align, textAlign, wrapText, children, ...props }, ref)=>{
+    const content = useMemo(()=>wrapText ? /*#__PURE__*/ jsx(WrapText, {
+            children: children
+        }) : children, [
+        children,
+        wrapText
+    ]);
+    return /*#__PURE__*/ jsx(Box, {
         ref: ref,
         as: "span",
         textAlign: textAlign || align,
-        className: cn(textVariants({
+        className: textVariants({
             variant,
             h1,
             h2,
@@ -21,9 +28,12 @@ const Text = /*#__PURE__*/ forwardRef(({ variant, className, h1, h2, h3, body1,
             caption1,
             caption1Bold,
             fontWeight,
-            lineHeight
-        }), className),
-        ...props
-    }));
+            lineHeight,
+            className
+        }),
+        ...props,
+        children: content
+    });
+});
 Text.displayName = 'UX.Text';
 export { Text };

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

@@ -62,5 +62,6 @@ export interface TextProps extends BoxProps<HTMLSpanElement> {
      */
     caption1Bold?: boolean;
     align?: BoxProps['textAlign'];
+    wrapText?: boolean;
 }
 export {};

package/dist/hooks/useI18n.d.ts

@@ -40,12 +40,12 @@ export declare const useI18n: () => {
         readonly primary: "Primary";
         readonly bullish: "Positive";
         readonly bearish: "Negative";
-        readonly 'bg-default': "Background Primary";
-        readonly 'bg-200': "Background Quaternary";
-        readonly 'bg-300': "Background Tertiary";
-        readonly 'bg-400': "Background Secondary";
-        readonly cursor: "Selected";
-        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";
@@ -67,6 +67,10 @@ export declare const useI18n: () => {
         readonly on: "On";
         readonly off: "Off";
     };
+    readonly rangeInput: {
+        readonly min: "Min";
+        readonly max: "Max";
+    };
 } | {
     readonly table: {
         readonly emptyContent: "暂无数据";
@@ -109,10 +113,10 @@ export declare const useI18n: () => {
         readonly primary: "主要色";
         readonly bullish: "上涨色";
         readonly bearish: "下跌色";
-        readonly 'bg-default': "一级背景色";
-        readonly 'bg-200': "四级背景色";
-        readonly 'bg-300': "三级背景色";
-        readonly 'bg-400': "二级背景色";
+        readonly bgDefault: "一级背景色";
+        readonly bg200: "四级背景色";
+        readonly bg300: "三级背景色";
+        readonly bg400: "二级背景色";
         readonly cursor: "选中背景色";
         readonly overlay: "浮窗背景色";
         readonly default: "默认";
@@ -136,4 +140,8 @@ export declare const useI18n: () => {
         readonly on: "开";
         readonly off: "关";
     };
+    readonly rangeInput: {
+        readonly min: "最小";
+        readonly max: "最大";
+    };
 };

package/dist/hooks/useI18n.js

@@ -42,12 +42,12 @@ const en = {
         primary: 'Primary',
         bullish: 'Positive',
         bearish: 'Negative',
-        'bg-default': 'Background Primary',
-        'bg-200': 'Background Quaternary',
-        'bg-300': 'Background Tertiary',
-        'bg-400': 'Background Secondary',
-        cursor: 'Selected',
-        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',
@@ -68,6 +68,10 @@ const en = {
     switch: {
         on: 'On',
         off: 'Off'
+    },
+    rangeInput: {
+        min: 'Min',
+        max: 'Max'
     }
 };
 const zh = {
@@ -112,10 +116,10 @@ const zh = {
         primary: '主要色',
         bullish: '上涨色',
         bearish: '下跌色',
-        'bg-default': '一级背景色',
-        'bg-200': '四级背景色',
-        'bg-300': '三级背景色',
-        'bg-400': '二级背景色',
+        bgDefault: '一级背景色',
+        bg200: '四级背景色',
+        bg300: '三级背景色',
+        bg400: '二级背景色',
         cursor: '选中背景色',
         overlay: '浮窗背景色',
         default: '默认',
@@ -138,6 +142,10 @@ const zh = {
     switch: {
         on: '开',
         off: '关'
+    },
+    rangeInput: {
+        min: '最小',
+        max: '最大'
     }
 };
 const useI18n = ()=>{

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,250 @@
+import { clsx } from "clsx";
+import { extendTailwindMerge } 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 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 twMerge(clsx(inputs));
+}
+export { cn };

package/dist/utils/common.d.ts

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

package/dist/utils/common.js

@@ -0,0 +1,13 @@
+function objectEntries(obj) {
+    return Object.entries(obj);
+}
+function objectKeys(obj) {
+    return Object.keys(obj);
+}
+function objectValues(obj) {
+    return Object.values(obj);
+}
+function objectFromEntries(entries) {
+    return Object.fromEntries(entries);
+}
+export { objectEntries, objectFromEntries, objectKeys, objectValues };

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.5.1-beta.8",
+  "version": "0.6.0",
   "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.4",
-    "@particle-network/ui-shared": "0.4.1-beta.3"
+    "@particle-network/icons": "0.6.0",
+    "@particle-network/ui-shared": "0.5.0"
   },
   "scripts": {
     "build": "rslib build",