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

package/dist/components/ProgressWrapper/index.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useRef } from "react";
-import { cn } from "@heroui/theme";
 import { radiusMap } from "@particle-network/ui-shared";
 import { useSize } from "ahooks";
+import { cn } from "../../utils/index.js";
 import { Center } from "../layout/index.js";
 import { useThemeColor } from "../UXThemeSwitch/use-theme-color.js";
 const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', strokeWidth = 1, color = 'primary', children, svgClassName, ...restProps })=>{

package/dist/components/UXColorPicker/color-input.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
 import { ColorField, Input } from "react-aria-components";
-import { cn } from "@heroui/theme";
+import { cn } from "../../utils/index.js";
 const inputClassName = 'w-full h-[30px] rounded-small border-none bg-background-200 px-2.5 text-tiny text-foreground focus:outline-none focus:ring-1 focus:ring-foreground text-center';
 const ColorInput = (props)=>/*#__PURE__*/ jsx(ColorField, {
         ...props,

package/dist/components/UXColorPicker/color-picker.js

@@ -2,9 +2,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ColorArea, ColorPicker, ColorSlider, ColorSwatch, ColorThumb, SliderTrack, parseColor } from "react-aria-components";
-import { cn } from "@heroui/theme";
 import ColorPickerIcon from "@particle-network/icons/web/ColorPickerIcon";
 import RefreshCcwIcon from "@particle-network/icons/web/RefreshCcwIcon";
+import { cn } from "../../utils/index.js";
 import { HStack } from "../layout/index.js";
 import { UXButton } from "../UXButton/index.js";
 import { UXPopover, UXPopoverContent, UXPopoverTrigger } from "../UXPopover/index.js";
@@ -13,7 +13,7 @@ import { ColorFields } from "./color-fields.js";
 import { ColorInput } from "./color-input.js";
 import { normalizeColor } from "./utils.js";
 const UXColorPicker = ({ className, isDisabled, placement = 'bottom-start', value, defaultValue, onChange, onChangeEnd, onValueChange, onValueChangeEnd, isChanged, onReset })=>{
-    const { 'bg-200': bg200 } = useThemeColor();
+    const { bg200: bg200 } = useThemeColor();
     const isControlled = void 0 !== value;
     const [pickerKey, setPickerKey] = useState(0);
     const [isInputFocused, setIsInputFocused] = useState(false);

package/dist/components/UXCopy/index.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import react from "react";
-import { cn } from "@heroui/theme";
 import CopyIcon from "@particle-network/icons/web/CopyIcon";
 import copy_to_clipboard from "copy-to-clipboard";
 import { useI18n } from "../../hooks/useI18n.js";
+import { cn } from "../../utils/index.js";
 import { toast } from "../UXToast/index.js";
 import { UXTooltip } from "../UXTooltip/index.js";
 import { shortAddress } from "./utils.js";

package/dist/components/UXEmpty/index.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { forwardRef } from "@heroui/system";
-import { cn } from "@heroui/theme";
 import EmptyIcon from "@particle-network/icons/web/EmptyIcon";
 import { useI18n } from "../../hooks/useI18n.js";
+import { cn } from "../../utils/index.js";
 import { VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
 const UXEmpty = forwardRef((props, ref)=>{

package/dist/components/UXHint/index.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { cn } from "@heroui/theme";
 import CircleQuestionIcon from "@particle-network/icons/web/CircleQuestionIcon";
 import { Center, UXPopover, UXPopoverContent, UXPopoverTrigger, UXTooltip } from "../index.js";
+import { cn } from "../../utils/index.js";
 const UXHint = (props)=>{
     const { content, children, buttonClassName, iconClassName, triggerType = 'hover', ...restProps } = props;
     const renderTriggerContent = ()=>/*#__PURE__*/ jsx(Center, {

package/dist/components/UXSlider/use-slider.js

@@ -2,11 +2,11 @@ import { useCallback, useMemo, useRef } from "react";
 import { filterDOMProps, useDOMRef } from "@heroui/react-utils";
 import { mergeProps, objectToDeps, warn } from "@heroui/shared-utils";
 import { mapPropsVariants, useProviderContext } from "@heroui/system";
-import { cn } from "@heroui/theme";
 import { useLocale, useNumberFormatter } from "@react-aria/i18n";
 import { useHover } from "@react-aria/interactions";
 import { useSlider } from "@react-aria/slider";
 import { useSliderState } from "@react-stately/slider";
+import { cn } from "../../utils/index.js";
 import { slider } from "./slider-theme.js";
 function use_slider_useSlider(originalProps) {
     const globalContext = useProviderContext();

package/dist/components/UXSpinner/spinner.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { cn } from "@heroui/theme";
+import { cn } from "../../utils/index.js";
 import { Square } from "../layout/index.js";
 import { SpinnerIcon } from "./SpinnerIcon.js";
 const UXSpinner = ({ size = 18, duration = 400, className, iconClassName, style, ...restProps })=>{

package/dist/components/UXSwitch/switch.extend.js

@@ -48,9 +48,9 @@ const ExtendedSwitch = extendVariants(Switch, {
         },
         size: {
             sm: {
-                wrapper: 'w-5 h-3 px-0.5',
+                wrapper: 'w-5 h-3 px-0.5 bg-cursor',
                 thumb: [
-                    'w-2 h-2 text-tiny',
+                    'w-2 h-2 text-tiny shadow-none',
                     'group-data-[selected=true]:ms-2'
                 ],
                 endContent: 'text-tiny',
@@ -58,9 +58,9 @@ const ExtendedSwitch = extendVariants(Switch, {
                 label: 'text-body3 font-medium ms-sm'
             },
             md: {
-                wrapper: 'w-6 h-3.5 px-[3px]',
+                wrapper: 'w-6 h-3.5 px-[3px] bg-cursor',
                 thumb: [
-                    'w-2.5 h-2.5 text-small',
+                    'w-2.5 h-2.5 text-small shadow-none',
                     'group-data-[selected=true]:ms-2'
                 ],
                 endContent: 'text-small',
@@ -68,9 +68,9 @@ const ExtendedSwitch = extendVariants(Switch, {
                 label: 'text-body3 font-medium ms-sm'
             },
             lg: {
-                wrapper: 'w-[34px] h-5 px-[3px]',
+                wrapper: 'w-[34px] h-5 px-[3px] bg-cursor',
                 thumb: [
-                    'w-3.5 h-3.5 text-medium',
+                    'w-3.5 h-3.5 text-medium shadow-none',
                     'group-data-[selected=true]:ms-3.5'
                 ],
                 endContent: 'text-medium',

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

@@ -17,10 +17,10 @@ const COLOR_CATEGORIES = {
         'bearish'
     ],
     background: [
-        'bg-default',
-        'bg-400',
-        'bg-300',
-        'bg-200',
+        'bgDefault',
+        'bg400',
+        'bg300',
+        'bg200',
         'cursor',
         'overlay',
         'divider'

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

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { cn } from "@heroui/theme";
 import { useLang } from "../../hooks/index.js";
+import { cn } from "../../utils/index.js";
 import { VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
 import { useTheme } from "./use-theme.js";
@@ -57,7 +57,7 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                                 fill: "currentColor",
                                 className: "text-background",
                                 style: {
-                                    color: 'custom' === id ? customColors['bg-default'] : void 0
+                                    color: 'custom' === id ? customColors.bgDefault : void 0
                                 }
                             })
                         }),
@@ -72,7 +72,7 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                                 fill: "currentColor",
                                 className: "text-background",
                                 style: {
-                                    color: 'custom' === id ? customColors['bg-default'] : void 0
+                                    color: 'custom' === id ? customColors.bgDefault : void 0
                                 }
                             })
                         }),

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

@@ -1,10 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-import { cn } from "@heroui/theme";
 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 { useI18n } from "../../hooks/index.js";
+import { cn } from "../../utils/index.js";
 import { HStack, VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
 import { UXButton } from "../UXButton/index.js";

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

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

package/dist/components/UXThemeSwitch/utils.js

@@ -56,32 +56,32 @@ const getCSSProperties = (theme)=>{
                 readableColor(colorVariables.blue)
             ]
         ],
-        'bg-default': [
+        bgDefault: [
             [
                 '--heroui-background',
-                colorVariables['bg-default']
+                colorVariables.bgDefault
             ],
             [
                 '--heroui-background-500',
-                colorVariables['bg-default']
+                colorVariables.bgDefault
             ]
         ],
-        'bg-200': [
+        bg200: [
             [
                 '--heroui-background-200',
-                colorVariables['bg-200']
+                colorVariables.bg200
             ]
         ],
-        'bg-300': [
+        bg300: [
             [
                 '--heroui-background-300',
-                colorVariables['bg-300']
+                colorVariables.bg300
             ]
         ],
-        'bg-400': [
+        bg400: [
             [
                 '--heroui-background-400',
-                colorVariables['bg-400']
+                colorVariables.bg400
             ]
         ],
         cursor: [

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

@@ -608,8 +608,8 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
     bg: {
         current: string;
         transparent: string;
-        default: string;
-        pure: string;
+        bgDefault: string;
+        bgPure: string;
         bg100: string;
         bg200: string;
         bg300: string;
@@ -705,15 +705,25 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         divider: string;
         foreground: string;
         secondary: string;
+        secondaryForeground: string;
         tertiary: string;
+        tertiaryForeground: string;
         cursor: string;
+        cursorForeground: string;
         primary: string;
+        primaryForeground: string;
         success: string;
+        successForeground: string;
         warning: string;
+        warningForeground: string;
         danger: string;
+        dangerForeground: string;
         alert: string;
+        alertForeground: string;
         bullish: string;
+        bullishForeground: string;
         bearish: string;
+        bearishForeground: string;
     };
     fontWeight: {
         normal: string;
@@ -1338,8 +1348,8 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
     bg: {
         current: string;
         transparent: string;
-        default: string;
-        pure: string;
+        bgDefault: string;
+        bgPure: string;
         bg100: string;
         bg200: string;
         bg300: string;
@@ -1435,15 +1445,25 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         divider: string;
         foreground: string;
         secondary: string;
+        secondaryForeground: string;
         tertiary: string;
+        tertiaryForeground: string;
         cursor: string;
+        cursorForeground: string;
         primary: string;
+        primaryForeground: string;
         success: string;
+        successForeground: string;
         warning: string;
+        warningForeground: string;
         danger: string;
+        dangerForeground: string;
         alert: string;
+        alertForeground: string;
         bullish: string;
+        bullishForeground: string;
         bearish: string;
+        bearishForeground: string;
     };
     fontWeight: {
         normal: string;
@@ -2068,8 +2088,8 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
     bg: {
         current: string;
         transparent: string;
-        default: string;
-        pure: string;
+        bgDefault: string;
+        bgPure: string;
         bg100: string;
         bg200: string;
         bg300: string;
@@ -2165,15 +2185,25 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         divider: string;
         foreground: string;
         secondary: string;
+        secondaryForeground: string;
         tertiary: string;
+        tertiaryForeground: string;
         cursor: string;
+        cursorForeground: string;
         primary: string;
+        primaryForeground: string;
         success: string;
+        successForeground: string;
         warning: string;
+        warningForeground: string;
         danger: string;
+        dangerForeground: string;
         alert: string;
+        alertForeground: string;
         bullish: string;
+        bullishForeground: string;
         bearish: string;
+        bearishForeground: string;
     };
     fontWeight: {
         normal: string;

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',

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,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";
@@ -109,10 +109,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: "默认";

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',
@@ -112,10 +112,10 @@ const zh = {
         primary: '主要色',
         bullish: '上涨色',
         bearish: '下跌色',
-        'bg-default': '一级背景色',
-        'bg-200': '四级背景色',
-        'bg-300': '三级背景色',
-        'bg-400': '二级背景色',
+        bgDefault: '一级背景色',
+        bg200: '四级背景色',
+        bg300: '三级背景色',
+        bg400: '二级背景色',
         cursor: '选中背景色',
         overlay: '浮窗背景色',
         default: '默认',

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

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

package/tailwind-preset.js

@@ -148,7 +148,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#75757E',
-              foreground: '#FFFFFF',
+              foreground: '#000000',
             },
             cursor: {
               DEFAULT: '#4E4E56',
@@ -231,7 +231,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#83878D',
-              foreground: '#000000',
+              foreground: '#FFFFFF',
             },
             cursor: {
               DEFAULT: '#D8D8DE',
@@ -314,7 +314,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#75757E',
-              foreground: '#FFFFFF',
+              foreground: '#000000',
             },
             cursor: {
               DEFAULT: '#4E4E56',
@@ -397,7 +397,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#83878D',
-              foreground: '#000000',
+              foreground: '#FFFFFF',
             },
             cursor: {
               DEFAULT: '#D8D8DE',
@@ -480,7 +480,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#888891',
-              foreground: '#FFFFFF',
+              foreground: '#000000',
             },
             cursor: {
               DEFAULT: '#4E4E56',
@@ -563,7 +563,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#7A7E84',
-              foreground: '#000000',
+              foreground: '#FFFFFF',
             },
             cursor: {
               DEFAULT: '#CFCFD7',
@@ -646,7 +646,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#757E80',
-              foreground: '#FFFFFF',
+              foreground: '#000000',
             },
             cursor: {
               DEFAULT: '#5D6466',
@@ -729,7 +729,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#777A8C',
-              foreground: '#FFFFFF',
+              foreground: '#000000',
             },
             cursor: {
               DEFAULT: '#4A4D5E',
@@ -812,7 +812,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#949E9C',
-              foreground: '#FFFFFF',
+              foreground: '#000000',
             },
             cursor: {
               DEFAULT: '#5D6466',
@@ -895,7 +895,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#717373',
-              foreground: '#FFFFFF',
+              foreground: '#000000',
             },
             cursor: {
               DEFAULT: '#54515E',
@@ -978,7 +978,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#707A8A',
-              foreground: '#FFFFFF',
+              foreground: '#000000',
             },
             cursor: {
               DEFAULT: '#444A56',
@@ -1061,7 +1061,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#686A6D',
-              foreground: '#FFFFFF',
+              foreground: '#000000',
             },
             cursor: {
               DEFAULT: '#4B4D51',