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

package/dist/components/UXButton/button-theme.js

@@ -381,13 +381,13 @@ const button_theme_button = tv({
             isSelected: true,
             color: 'default',
             variant: 'solid',
-            class: 'bg-tertiary text-tertiary-foreground'
+            class: 'bg-cursor text-cursor-foreground'
         },
         {
             isSelected: true,
             color: 'secondary',
             variant: 'solid',
-            class: 'bg-tertiary text-tertiary-foreground'
+            class: 'bg-cursor text-cursor-foreground'
         },
         {
             isSelected: true,

package/dist/components/UXCheckbox/checkbox.extend.js

@@ -7,7 +7,7 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
                 wrapper: 'after:bg-primary after:text-primary-foreground text-primary-foreground'
             },
             secondary: {
-                wrapper: 'after:bg-tertiary after:text-tertiary-foreground text-tertiary-foreground'
+                wrapper: 'after:bg-cursor after:text-cursor-foreground text-cursor-foreground'
             },
             success: {
                 wrapper: 'after:bg-success after:text-success-foreground text-success-foreground'

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

@@ -5,7 +5,7 @@ export declare const UXInput: React.ForwardRefExoticComponent<(Omit<Omit<import(
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
     variant?: "flat" | "bordered" | undefined;
-    textAlign?: "center" | "left" | "right" | undefined;
+    textAlign?: "right" | "left" | "center" | undefined;
     isColorText?: boolean | undefined;
     color?: "secondary" | "primary" | "success" | "warning" | "danger" | "bullish" | "bearish" | "default" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
@@ -21,7 +21,7 @@ export declare const UXInput: React.ForwardRefExoticComponent<(Omit<Omit<import(
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
     variant?: "flat" | "bordered" | undefined;
-    textAlign?: "center" | "left" | "right" | undefined;
+    textAlign?: "right" | "left" | "center" | undefined;
     isColorText?: boolean | undefined;
     color?: "secondary" | "primary" | "success" | "warning" | "danger" | "bullish" | "bearish" | "default" | undefined;
     size?: "sm" | "md" | "lg" | undefined;

package/dist/components/UXInput/input.extend.d.ts

@@ -2,7 +2,7 @@ declare const ExtendedInput: import("react").ForwardRefExoticComponent<(Omit<imp
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
     variant?: "flat" | "bordered" | undefined;
-    textAlign?: "center" | "left" | "right" | undefined;
+    textAlign?: "right" | "left" | "center" | undefined;
     isColorText?: boolean | undefined;
     color?: "secondary" | "primary" | "success" | "warning" | "danger" | "bullish" | "bearish" | "default" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
@@ -18,7 +18,7 @@ declare const ExtendedInput: import("react").ForwardRefExoticComponent<(Omit<imp
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
     variant?: "flat" | "bordered" | undefined;
-    textAlign?: "center" | "left" | "right" | undefined;
+    textAlign?: "right" | "left" | "center" | undefined;
     isColorText?: boolean | undefined;
     color?: "secondary" | "primary" | "success" | "warning" | "danger" | "bullish" | "bearish" | "default" | undefined;
     size?: "sm" | "md" | "lg" | undefined;

package/dist/components/UXRadio/radio.extend.js

@@ -40,21 +40,21 @@ const ExtendedRadio = extendVariants(Radio, {
             sm: {
                 wrapper: 'w-2.5 h-2.5 border-small',
                 control: 'w-1.5 h-1.5',
-                labelWrapper: 'ml-sm',
+                labelWrapper: 'ms-1',
                 label: '!text-body3 font-medium',
                 description: 'text-tiny text-foreground-100'
             },
             md: {
                 wrapper: 'w-3 h-3 border-small',
                 control: 'w-1.5 h-1.5',
-                labelWrapper: 'ml-2',
+                labelWrapper: 'ms-1',
                 label: '!text-body2 font-medium',
                 description: 'text-tiny text-foreground-100'
             },
             lg: {
                 wrapper: 'w-[14px] h-[14px] border-small',
                 control: 'w-2 h-2',
-                labelWrapper: 'ml-2',
+                labelWrapper: 'ms-1',
                 label: '!text-body1 font-medium',
                 description: 'text-small text-foreground-100'
             }

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

@@ -16,7 +16,7 @@ export declare const UXTable: import("@heroui/system-rsc").InternalForwardRefRen
     isSelectable?: boolean | undefined;
     isMultiSelectable?: boolean | undefined;
     fullWidth?: boolean | undefined;
-    align?: "center" | "start" | "end" | undefined;
+    align?: "start" | "end" | "center" | undefined;
 }, "ref"> | Omit<import("@heroui/system-rsc").OmitCommonProps<Omit<Omit<any, "ref">, never>, keyof import("@heroui/table").TableProps<object>> & import("@heroui/table").TableProps<object> & {
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
@@ -32,6 +32,6 @@ export declare const UXTable: import("@heroui/system-rsc").InternalForwardRefRen
     isSelectable?: boolean | undefined;
     isMultiSelectable?: boolean | undefined;
     fullWidth?: boolean | undefined;
-    align?: "center" | "start" | "end" | undefined;
+    align?: "start" | "end" | "center" | undefined;
 }, "ref">) & React.RefAttributes<HTMLElement>, never>;
 export { TableBody as UXTableBody, TableCell as UXTableCell, TableColumn as UXTableColumn, TableHeader as UXTableHeader, TableRow as UXTableRow, } from '@heroui/table';

package/dist/components/UXTable/table.extend.d.ts

@@ -13,7 +13,7 @@ declare const ExtendedTable: import("react").ForwardRefExoticComponent<(Omit<imp
     isSelectable?: boolean | undefined;
     isMultiSelectable?: boolean | undefined;
     fullWidth?: boolean | undefined;
-    align?: "center" | "start" | "end" | undefined;
+    align?: "start" | "end" | "center" | undefined;
 }, "ref"> | Omit<import("@heroui/system-rsc").OmitCommonProps<Omit<Omit<any, "ref">, never>, keyof import("@heroui/table").TableProps<object>> & import("@heroui/table").TableProps<object> & {
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
@@ -29,6 +29,6 @@ declare const ExtendedTable: import("react").ForwardRefExoticComponent<(Omit<imp
     isSelectable?: boolean | undefined;
     isMultiSelectable?: boolean | undefined;
     fullWidth?: boolean | undefined;
-    align?: "center" | "start" | "end" | undefined;
+    align?: "start" | "end" | "center" | undefined;
 }, "ref">) & import("react").RefAttributes<HTMLElement>>;
 export default ExtendedTable;

package/dist/components/UXTabs/tabs.classes.js

@@ -252,9 +252,9 @@ const tabsClasses = {
             color: 'default',
             class: {
                 cursor: [
-                    'bg-tertiary dark:bg-tertiary'
+                    'bg-cursor dark:bg-cursor'
                 ],
-                tabContent: 'group-data-[selected=true]:text-tertiary-foreground'
+                tabContent: 'group-data-[selected=true]:text-cursor-foreground'
             }
         },
         {
@@ -264,9 +264,9 @@ const tabsClasses = {
             color: 'default',
             class: {
                 cursor: [
-                    'bg-tertiary'
+                    'bg-cursor'
                 ],
-                tabContent: 'group-data-[selected=true]:text-tertiary-foreground'
+                tabContent: 'group-data-[selected=true]:text-cursor-foreground'
             }
         },
         {

package/dist/components/UXThemeSwitch/custom-theme-config.js

@@ -21,6 +21,7 @@ const COLOR_CATEGORIES = {
         'bg-400',
         'bg-300',
         'bg-200',
+        'cursor',
         'overlay',
         'divider'
     ],
@@ -41,7 +42,8 @@ const COLOR_CATEGORIES = {
         'success',
         'danger',
         'warning',
-        'alert'
+        'alert',
+        'blue'
     ]
 };
 const CustomThemeConfig = ()=>{

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

@@ -24,7 +24,7 @@ const useThemeStore = create()(persist((set)=>({
             })
     }), {
     name: 'ux-preference-theme',
-    version: 0,
+    version: 1,
     storage: createJSONStorage(()=>'undefined' != typeof window ? window.localStorage : {}),
     partialize: (state)=>({
             theme: state.theme,

package/dist/components/UXThemeSwitch/utils.js

@@ -46,6 +46,16 @@ const getCSSProperties = (theme)=>{
             ]
         ],
         warning: generateThemeColor(colorVariables.warning, 'warning', theme.colorScheme).cssVariables,
+        blue: [
+            [
+                '--heroui-blue',
+                colorVariables.blue
+            ],
+            [
+                '--heroui-blue-foreground',
+                readableColor(colorVariables.blue)
+            ]
+        ],
         'bg-default': [
             [
                 '--heroui-background',
@@ -74,6 +84,16 @@ const getCSSProperties = (theme)=>{
                 colorVariables['bg-400']
             ]
         ],
+        cursor: [
+            [
+                '--heroui-cursor',
+                colorVariables.cursor
+            ],
+            [
+                '--heroui-cursor-foreground',
+                readableColor(colorVariables.cursor)
+            ]
+        ],
         overlay: [
             [
                 '--heroui-overlay',

package/dist/components/UXToast/index.js

@@ -37,14 +37,14 @@ const show = (props)=>{
     return addToast({
         classNames: {
             base: [
-                'bg-tertiary rounded-xl px-3.5 py-3 shadow-none border-none !w-fit max-w-[90vw] md:max-w-[400px] m-0',
+                'bg-cursor rounded-xl px-3.5 py-3 shadow-none border-none !w-fit max-w-[90vw] md:max-w-[400px] m-0',
                 !hideCloseButton && 'pr-12',
                 'flat' === variant && 'success' === type && 'bg-[#0E3728]',
                 'flat' === variant && 'error' === type && 'bg-[#501D1D]',
                 base
             ],
             description: [
-                'text-tertiary-foreground text-xs font-medium me-0 leading-4 line-clamp-4',
+                'text-cursor-foreground text-xs font-medium me-0 leading-4 line-clamp-4',
                 'flat' === variant && 'text-white',
                 hasLongWord(description) && 'break-all',
                 descriptionClassName
@@ -72,7 +72,7 @@ const show = (props)=>{
         icon: icon ?? getIcon(type),
         hideIcon: !icon && !getIcon(type),
         closeIcon: /*#__PURE__*/ jsx(CloseIcon, {
-            className: 'flat' === variant ? 'text-white' : 'text-tertiary-foreground'
+            className: 'flat' === variant ? 'text-white' : 'text-cursor-foreground'
         }),
         loadingComponent: /*#__PURE__*/ jsx(UXSpinner, {
             size: 18

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

@@ -9,6 +9,132 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         fixed: string;
         sticky: string;
     };
+    top: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    right: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    bottom: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    left: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    start: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    end: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    inset: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
     display: {
         flex: string;
         inlineFlex: string;
@@ -31,21 +157,21 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
     };
     zIndex: {
         auto: string;
-        '0': string;
-        '10': string;
-        '20': string;
-        '30': string;
-        '40': string;
-        '50': string;
-        '60': string;
-        '70': string;
-        '80': string;
-        '90': string;
-        '100': string;
+        0: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
     };
     direction: {
         row: string;
-        column: string;
+        col: string;
         'row-reverse': string;
         'col-reverse': string;
     };
@@ -493,6 +619,7 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         foreground: string;
         secondary: string;
         tertiary: string;
+        cursor: string;
         primary: string;
         success: string;
         warning: string;
@@ -548,6 +675,7 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         foreground: string;
         secondary: string;
         tertiary: string;
+        cursor: string;
         primary: string;
         success: string;
         warning: string;
@@ -578,6 +706,7 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         foreground: string;
         secondary: string;
         tertiary: string;
+        cursor: string;
         primary: string;
         success: string;
         warning: string;
@@ -602,7 +731,7 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         center: string;
         right: string;
     };
-}, undefined, "ux-box", {
+}, undefined, "ux-box-base", {
     position: {
         static: string;
         relative: string;
@@ -610,6 +739,132 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         fixed: string;
         sticky: string;
     };
+    top: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    right: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    bottom: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    left: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    start: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    end: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    inset: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
     display: {
         flex: string;
         inlineFlex: string;
@@ -632,21 +887,21 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
     };
     zIndex: {
         auto: string;
-        '0': string;
-        '10': string;
-        '20': string;
-        '30': string;
-        '40': string;
-        '50': string;
-        '60': string;
-        '70': string;
-        '80': string;
-        '90': string;
-        '100': string;
+        0: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
     };
     direction: {
         row: string;
-        column: string;
+        col: string;
         'row-reverse': string;
         'col-reverse': string;
     };
@@ -1094,6 +1349,7 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         foreground: string;
         secondary: string;
         tertiary: string;
+        cursor: string;
         primary: string;
         success: string;
         warning: string;
@@ -1149,6 +1405,7 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         foreground: string;
         secondary: string;
         tertiary: string;
+        cursor: string;
         primary: string;
         success: string;
         warning: string;
@@ -1179,6 +1436,7 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         foreground: string;
         secondary: string;
         tertiary: string;
+        cursor: string;
         primary: string;
         success: string;
         warning: string;
@@ -1211,6 +1469,132 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         fixed: string;
         sticky: string;
     };
+    top: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    right: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    bottom: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    left: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    start: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    end: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    inset: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
     display: {
         flex: string;
         inlineFlex: string;
@@ -1233,21 +1617,21 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
     };
     zIndex: {
         auto: string;
-        '0': string;
-        '10': string;
-        '20': string;
-        '30': string;
-        '40': string;
-        '50': string;
-        '60': string;
-        '70': string;
-        '80': string;
-        '90': string;
-        '100': string;
+        0: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
     };
     direction: {
         row: string;
-        column: string;
+        col: string;
         'row-reverse': string;
         'col-reverse': string;
     };
@@ -1695,6 +2079,7 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         foreground: string;
         secondary: string;
         tertiary: string;
+        cursor: string;
         primary: string;
         success: string;
         warning: string;
@@ -1750,6 +2135,7 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         foreground: string;
         secondary: string;
         tertiary: string;
+        cursor: string;
         primary: string;
         success: string;
         warning: string;
@@ -1780,6 +2166,7 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         foreground: string;
         secondary: string;
         tertiary: string;
+        cursor: string;
         primary: string;
         success: string;
         warning: string;
@@ -1804,5 +2191,5 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         center: string;
         right: string;
     };
-}, undefined, "ux-box", unknown, unknown, undefined>>;
+}, undefined, "ux-box-base", unknown, unknown, undefined>>;
 export type BoxVariants = VariantProps<typeof boxVariants>;

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

@@ -61,6 +61,7 @@ const bgClasses = {
     foreground: 'bg-foreground',
     secondary: 'bg-secondary',
     tertiary: 'bg-tertiary',
+    cursor: 'bg-cursor',
     primary: 'bg-primary',
     success: 'bg-success',
     warning: 'bg-warning',
@@ -76,6 +77,7 @@ const colorClasses = {
     foreground: 'text-foreground',
     secondary: 'text-secondary',
     tertiary: 'text-tertiary',
+    cursor: 'text-cursor',
     primary: 'text-primary',
     success: 'text-success',
     warning: 'text-warning',
@@ -90,6 +92,7 @@ const borderColorClasses = {
     foreground: 'border-foreground',
     secondary: 'border-secondary',
     tertiary: 'border-tertiary',
+    cursor: 'border-cursor',
     primary: 'border-primary',
     success: 'border-success',
     warning: 'border-warning',
@@ -110,7 +113,7 @@ const roundedClasses = {
     full: 'rounded-full'
 };
 const boxVariants = tv({
-    base: 'ux-box',
+    base: 'ux-box-base',
     variants: {
         position: {
             static: 'static',
@@ -119,6 +122,13 @@ const boxVariants = tv({
             fixed: 'fixed',
             sticky: 'sticky'
         },
+        top: spacingClasses('top'),
+        right: spacingClasses('right'),
+        bottom: spacingClasses('bottom'),
+        left: spacingClasses('left'),
+        start: spacingClasses('start'),
+        end: spacingClasses('end'),
+        inset: spacingClasses('inset'),
         display: {
             flex: 'flex',
             inlineFlex: 'inline-flex',
@@ -155,7 +165,7 @@ const boxVariants = tv({
         },
         direction: {
             row: 'flex-row',
-            column: 'flex-col',
+            col: 'flex-col',
             'row-reverse': 'flex-row-reverse',
             'col-reverse': 'flex-col-reverse'
         },

package/dist/hooks/useI18n.d.ts

@@ -40,10 +40,11 @@ export declare const useI18n: () => {
         readonly primary: "Primary";
         readonly bullish: "Positive";
         readonly bearish: "Negative";
-        readonly 'bg-default': "Background";
+        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 default: "Default";
         readonly foreground: "Text Primary";
@@ -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)";
@@ -111,7 +113,8 @@ export declare const useI18n: () => {
         readonly 'bg-200': "四级背景色";
         readonly 'bg-300': "三级背景色";
         readonly 'bg-400': "二级背景色";
-        readonly overlay: "浮窗色";
+        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,10 +42,11 @@ const en = {
         primary: 'Primary',
         bullish: 'Positive',
         bearish: 'Negative',
-        'bg-default': 'Background',
+        'bg-default': 'Background Primary',
         'bg-200': 'Background Quaternary',
         'bg-300': 'Background Tertiary',
         'bg-400': 'Background Secondary',
+        cursor: 'Selected',
         overlay: 'Overlay',
         default: 'Default',
         foreground: 'Text Primary',
@@ -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)',
@@ -114,7 +116,8 @@ const zh = {
         'bg-200': '四级背景色',
         'bg-300': '三级背景色',
         'bg-400': '二级背景色',
-        overlay: '浮窗色',
+        cursor: '选中背景色',
+        overlay: '浮窗背景色',
         default: '默认',
         foreground: '一级文字色',
         secondary: '二级文字色',
@@ -124,6 +127,7 @@ const zh = {
         danger: '红色信号',
         warning: '黄色信号',
         alert: '橙色信号',
+        blue: '蓝色信号',
         candleUp: '主体色 (上涨)',
         candleDown: '主体色 (下跌)',
         candleWickUp: '影线 (上涨)',

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

package/tailwind-preset.js

@@ -8,6 +8,8 @@ module.exports = {
     extend: {
       colors: {
         brand: '#D745FF',
+        blue: '#0ea5e9',
+        'blue-foreground': '#000000',
         'background-pure': 'var(--background-pure)',
       },
       gap: {
@@ -118,7 +120,7 @@ module.exports = {
               DEFAULT: '#000000',
             },
             foreground: {
-              100: '#4E4E56',
+              100: '#75757E',
               300: '#A1A1AA',
               500: '#FFFFFF',
               DEFAULT: '#FFFFFF',
@@ -145,6 +147,10 @@ module.exports = {
               foreground: '#000000',
             },
             tertiary: {
+              DEFAULT: '#75757E',
+              foreground: '#FFFFFF',
+            },
+            cursor: {
               DEFAULT: '#4E4E56',
               foreground: '#FFFFFF',
             },
@@ -197,7 +203,7 @@ module.exports = {
               DEFAULT: '#F8F8FA',
             },
             foreground: {
-              100: '#D8D8DE',
+              100: '#83878D',
               300: '#61656B',
               500: '#0C0C0F',
               DEFAULT: '#0C0C0F',
@@ -224,6 +230,10 @@ module.exports = {
               foreground: '#FFFFFF',
             },
             tertiary: {
+              DEFAULT: '#83878D',
+              foreground: '#000000',
+            },
+            cursor: {
               DEFAULT: '#D8D8DE',
               foreground: '#000000',
             },
@@ -276,7 +286,7 @@ module.exports = {
               DEFAULT: '#000000',
             },
             foreground: {
-              100: '#4E4E56',
+              100: '#75757E',
               300: '#A1A1AA',
               500: '#FFFFFF',
               DEFAULT: '#FFFFFF',
@@ -303,6 +313,10 @@ module.exports = {
               foreground: '#000000',
             },
             tertiary: {
+              DEFAULT: '#75757E',
+              foreground: '#FFFFFF',
+            },
+            cursor: {
               DEFAULT: '#4E4E56',
               foreground: '#FFFFFF',
             },
@@ -355,7 +369,7 @@ module.exports = {
               DEFAULT: '#F8F8FA',
             },
             foreground: {
-              100: '#D8D8DE',
+              100: '#83878D',
               300: '#61656B',
               500: '#000000',
               DEFAULT: '#000000',
@@ -382,6 +396,10 @@ module.exports = {
               foreground: '#FFFFFF',
             },
             tertiary: {
+              DEFAULT: '#83878D',
+              foreground: '#000000',
+            },
+            cursor: {
               DEFAULT: '#D8D8DE',
               foreground: '#000000',
             },
@@ -434,7 +452,7 @@ module.exports = {
               DEFAULT: '#100E11',
             },
             foreground: {
-              100: '#4E4E56',
+              100: '#888891',
               300: '#BBBBC4',
               500: '#FDFDFE',
               DEFAULT: '#FDFDFE',
@@ -461,6 +479,10 @@ module.exports = {
               foreground: '#000000',
             },
             tertiary: {
+              DEFAULT: '#888891',
+              foreground: '#FFFFFF',
+            },
+            cursor: {
               DEFAULT: '#4E4E56',
               foreground: '#FFFFFF',
             },
@@ -513,7 +535,7 @@ module.exports = {
               DEFAULT: '#F6F6F6',
             },
             foreground: {
-              100: '#CFCFD7',
+              100: '#7A7E84',
               300: '#55585C',
               500: '#000000',
               DEFAULT: '#000000',
@@ -540,6 +562,10 @@ module.exports = {
               foreground: '#FFFFFF',
             },
             tertiary: {
+              DEFAULT: '#7A7E84',
+              foreground: '#000000',
+            },
+            cursor: {
               DEFAULT: '#CFCFD7',
               foreground: '#000000',
             },
@@ -592,7 +618,7 @@ module.exports = {
               DEFAULT: '#0C0C0F',
             },
             foreground: {
-              100: '#5D6466',
+              100: '#757E80',
               300: '#C4CCCC',
               500: '#F0F5F5',
               DEFAULT: '#F0F5F5',
@@ -619,6 +645,10 @@ module.exports = {
               foreground: '#000000',
             },
             tertiary: {
+              DEFAULT: '#757E80',
+              foreground: '#FFFFFF',
+            },
+            cursor: {
               DEFAULT: '#5D6466',
               foreground: '#FFFFFF',
             },
@@ -671,7 +701,7 @@ module.exports = {
               DEFAULT: '#0C0C0F',
             },
             foreground: {
-              100: '#4A4D5E',
+              100: '#777A8C',
               300: '#C8C9D1',
               500: '#FCFCFC',
               DEFAULT: '#FCFCFC',
@@ -698,6 +728,10 @@ module.exports = {
               foreground: '#000000',
             },
             tertiary: {
+              DEFAULT: '#777A8C',
+              foreground: '#FFFFFF',
+            },
+            cursor: {
               DEFAULT: '#4A4D5E',
               foreground: '#FFFFFF',
             },
@@ -750,7 +784,7 @@ module.exports = {
               DEFAULT: '#0A1318',
             },
             foreground: {
-              100: '#5D6466',
+              100: '#949E9C',
               300: '#D1D4DC',
               500: '#F6FEFD',
               DEFAULT: '#F6FEFD',
@@ -777,6 +811,10 @@ module.exports = {
               foreground: '#000000',
             },
             tertiary: {
+              DEFAULT: '#949E9C',
+              foreground: '#FFFFFF',
+            },
+            cursor: {
               DEFAULT: '#5D6466',
               foreground: '#FFFFFF',
             },
@@ -829,7 +867,7 @@ module.exports = {
               DEFAULT: '#13121A',
             },
             foreground: {
-              100: '#54515E',
+              100: '#717373',
               300: '#999999',
               500: '#FFFFFF',
               DEFAULT: '#FFFFFF',
@@ -856,6 +894,10 @@ module.exports = {
               foreground: '#000000',
             },
             tertiary: {
+              DEFAULT: '#717373',
+              foreground: '#FFFFFF',
+            },
+            cursor: {
               DEFAULT: '#54515E',
               foreground: '#FFFFFF',
             },
@@ -908,7 +950,7 @@ module.exports = {
               DEFAULT: '#0B0E11',
             },
             foreground: {
-              100: '#444A56',
+              100: '#707A8A',
               300: '#929AA5',
               500: '#EAECEF',
               DEFAULT: '#EAECEF',
@@ -935,6 +977,10 @@ module.exports = {
               foreground: '#000000',
             },
             tertiary: {
+              DEFAULT: '#707A8A',
+              foreground: '#FFFFFF',
+            },
+            cursor: {
               DEFAULT: '#444A56',
               foreground: '#FFFFFF',
             },
@@ -987,7 +1033,7 @@ module.exports = {
               DEFAULT: '#09090B',
             },
             foreground: {
-              100: '#4B4D51',
+              100: '#686A6D',
               300: '#98989B',
               500: '#E9E9E9',
               DEFAULT: '#E9E9E9',
@@ -1014,6 +1060,10 @@ module.exports = {
               foreground: '#000000',
             },
             tertiary: {
+              DEFAULT: '#686A6D',
+              foreground: '#FFFFFF',
+            },
+            cursor: {
               DEFAULT: '#4B4D51',
               foreground: '#FFFFFF',
             },