@particle-network/ui-shared 0.0.1

package/dist/color.d.ts

@@ -0,0 +1,31 @@
+export type UXForegroundColor = 'default' | 'white' | 'foreground' | 'secondary' | 'tertiary' | 'primary' | 'success' | 'danger' | 'alert' | 'warning' | 'gold' | 'bullish' | 'bearish';
+export type UXBackgroundColor = 'bg-default' | 'bg-300' | 'bg-200' | 'bg-400' | 'divider' | 'transparent' | 'overlay';
+export type UXColor = UXForegroundColor | UXBackgroundColor;
+export interface DynamicColors {
+    bullish?: string;
+    bearish?: string;
+}
+export type ThemeColors = Record<UXColor, string>;
+export declare const colorMap: Record<'dark' | 'light', Record<UXColor, string>>;
+export declare const foregroundColorList: readonly ["primary", "default", "secondary", "tertiary", "success", "danger", "alert", "warning", "gold", "bullish", "bearish"];
+export declare const colorToCSSVariable: {
+    readonly default: "--heroui-foreground";
+    readonly foreground: "--heroui-foreground";
+    readonly secondary: "--heroui-foreground-300";
+    readonly white: "--color-white";
+    readonly tertiary: "--heroui-foreground-100";
+    readonly primary: "--heroui-primary";
+    readonly success: "--heroui-success";
+    readonly danger: "--heroui-danger";
+    readonly alert: "--heroui-alert";
+    readonly warning: "--heroui-warning";
+    readonly gold: "--heroui-gold";
+    readonly bullish: "--bullish-color";
+    readonly bearish: "--bearish-color";
+};
+export type ColorString = `#${string}`;
+export declare function hexColorToHSLValue(hex: ColorString): string;
+export declare function hexColorToHSL(hex: ColorString): string;
+export declare function hslToHex(hslStr: string): string;
+export declare const getHexColorFromCSSVariable: (color: UXForegroundColor) => string;
+export declare const setColorWithOpacity: (color: string, opacity: number) => string;

package/dist/color.js

@@ -0,0 +1,183 @@
+const colorMap = {
+    dark: {
+        default: '#FFFFFF',
+        white: '#FFFFFF',
+        foreground: '#FFFFFF',
+        secondary: '#A1A1AA',
+        tertiary: '#4E4E56',
+        primary: '#D745FF',
+        success: '#45B167',
+        danger: '#E84A5A',
+        alert: '#F57733',
+        warning: '#FF9821',
+        gold: '#FFB800',
+        bullish: '#FFAC34',
+        bearish: '#E84A5A',
+        'bg-default': '#000000',
+        'bg-200': '#1F1F23',
+        'bg-300': '#17171C',
+        'bg-400': '#0F0F0F',
+        overlay: '#17171C',
+        divider: '#282828',
+        transparent: 'transparent'
+    },
+    light: {
+        default: '#000000',
+        white: '#FFFFFF',
+        foreground: '#000000',
+        secondary: '#767A80',
+        tertiary: '#C0C0C9',
+        primary: '#D745FF',
+        success: '#2E9F4A',
+        danger: '#DE4A40',
+        alert: '#E65E16',
+        warning: '#FF9821',
+        gold: '#F38300',
+        bullish: '#FFAC34',
+        bearish: '#E84A5A',
+        'bg-default': '#FFFFFF',
+        'bg-200': '#E8E8ED',
+        'bg-300': '#F0F0F2',
+        'bg-400': '#F8F8FA',
+        overlay: '#FFFFFF',
+        divider: '#E0E0E6',
+        transparent: 'transparent'
+    }
+};
+const foregroundColorList = [
+    'primary',
+    'default',
+    'secondary',
+    'tertiary',
+    'success',
+    'danger',
+    'alert',
+    'warning',
+    'gold',
+    'bullish',
+    'bearish'
+];
+const colorToCSSVariable = {
+    default: '--heroui-foreground',
+    foreground: '--heroui-foreground',
+    secondary: '--heroui-foreground-300',
+    white: '--color-white',
+    tertiary: '--heroui-foreground-100',
+    primary: '--heroui-primary',
+    success: '--heroui-success',
+    danger: '--heroui-danger',
+    alert: '--heroui-alert',
+    warning: '--heroui-warning',
+    gold: '--heroui-gold',
+    bullish: '--bullish-color',
+    bearish: '--bearish-color'
+};
+function hexColorToHSLValue(hex) {
+    const hexWithoutHash = hex.replace('#', '');
+    const r = parseInt(hexWithoutHash.substring(0, 2), 16) / 255;
+    const g = parseInt(hexWithoutHash.substring(2, 4), 16) / 255;
+    const b = parseInt(hexWithoutHash.substring(4, 6), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max === min) {
+        h = 0;
+        s = 0;
+    } else {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch(max){
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+            default:
+                h = 0;
+                break;
+        }
+        h /= 6;
+    }
+    return `${Math.round(360 * h)}, ${Math.round(100 * s)}%, ${Math.round(100 * l)}%`;
+}
+function hexColorToHSL(hex) {
+    const value = hexColorToHSLValue(hex);
+    return `hsl(${value})`;
+}
+function hslToHex(hslStr) {
+    const hslMatch = hslStr.match(/(\d*\.?\d+)\s+(\d*\.?\d+)%?\s+(\d*\.?\d+)%?/);
+    if (!hslMatch) throw new Error('Invalid HSL format');
+    let h = parseFloat(hslMatch[1]);
+    let s = parseFloat(hslMatch[2]);
+    let l = parseFloat(hslMatch[3]);
+    h = h % 360 / 360;
+    s = Math.min(100, s) / 100;
+    l = Math.min(100, l) / 100;
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const x = c * (1 - Math.abs(6 * h % 2 - 1));
+    const m = l - c / 2;
+    let r, g, b;
+    if (h < 1 / 6) [r, g, b] = [
+        c,
+        x,
+        0
+    ];
+    else if (h < 2 / 6) [r, g, b] = [
+        x,
+        c,
+        0
+    ];
+    else if (h < 0.5) [r, g, b] = [
+        0,
+        c,
+        x
+    ];
+    else if (h < 4 / 6) [r, g, b] = [
+        0,
+        x,
+        c
+    ];
+    else if (h < 5 / 6) [r, g, b] = [
+        x,
+        0,
+        c
+    ];
+    else [r, g, b] = [
+        c,
+        0,
+        x
+    ];
+    const toHex = (n)=>Math.round((n + m) * 255).toString(16).padStart(2, '0');
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+}
+const getHexColorFromCSSVariable = (color)=>{
+    const rootStyles = getComputedStyle(document.documentElement);
+    const value = rootStyles.getPropertyValue(colorToCSSVariable[color]).trim();
+    if (!value) return '#000000';
+    return value.startsWith('#') ? value : hslToHex(value);
+};
+const setColorWithOpacity = (color, opacity)=>{
+    let r, g, b;
+    if (color.startsWith('#')) {
+        const hex = color.slice(1);
+        const bigint = parseInt(hex, 16);
+        r = bigint >> 16 & 255;
+        g = bigint >> 8 & 255;
+        b = 255 & bigint;
+    } else {
+        const rgbaMatch = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*\d*\.?\d+)?\)$/);
+        if (rgbaMatch) {
+            r = parseInt(rgbaMatch[1]);
+            g = parseInt(rgbaMatch[2]);
+            b = parseInt(rgbaMatch[3]);
+        } else throw new Error('Invalid color format');
+    }
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+export { colorMap, colorToCSSVariable, foregroundColorList, getHexColorFromCSSVariable, hexColorToHSL, hexColorToHSLValue, hslToHex, setColorWithOpacity };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './color';
+export * from './radius';
+export * from './size';
+export * from './spacing';
+export * from './theme';

package/dist/index.js

@@ -0,0 +1,5 @@
+export * from "./color.js";
+export * from "./radius.js";
+export * from "./size.js";
+export * from "./spacing.js";
+export * from "./theme.js";

package/dist/radius.d.ts

@@ -0,0 +1,10 @@
+export type UXRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+export type RadiusType = UXRadius | number;
+export declare const radiusMap: Record<UXRadius, number>;
+export interface RadiusScale {
+    none: number;
+    sm: number;
+    md: number;
+    lg: number;
+    full: number;
+}

package/dist/radius.js

@@ -0,0 +1,8 @@
+const radiusMap = {
+    none: 0,
+    sm: 6,
+    md: 10,
+    lg: 14,
+    full: 9999
+};
+export { radiusMap };

package/dist/size.d.ts

@@ -0,0 +1,2 @@
+export type UXSize = 'sm' | 'md' | 'lg';
+export declare const sizeMap: Record<UXSize, number>;

package/dist/size.js

@@ -0,0 +1,6 @@
+const sizeMap = {
+    sm: 24,
+    md: 30,
+    lg: 44
+};
+export { sizeMap };

package/dist/spacing.d.ts

@@ -0,0 +1,4 @@
+export type UXSpacing = 'xs' | 'sm' | 'md' | 'lg';
+export type SpacingType = 'xs' | 'sm' | 'md' | 'lg' | number;
+export declare const spacingMap: Record<UXSpacing, number>;
+export type SpacingScale = Record<UXSpacing, number>;

package/dist/spacing.js

@@ -0,0 +1,7 @@
+const spacingMap = {
+    xs: 2,
+    sm: 6,
+    md: 10,
+    lg: 14
+};
+export { spacingMap };

package/dist/theme.d.ts

@@ -0,0 +1,6 @@
+type Theme = 'dark' | 'light';
+/**
+ * 监听主题变化（兼容 data-theme 和 class 两种方式）
+ */
+export declare function useTheme(): Theme;
+export {};

package/dist/theme.js

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+function getCurrentTheme() {
+    const html = document.documentElement;
+    if (html.hasAttribute('data-theme')) return 'dark' === html.getAttribute('data-theme') ? 'dark' : 'light';
+    return html.classList.contains('dark') ? 'dark' : 'light';
+}
+function useTheme() {
+    const [theme, setTheme] = useState(getCurrentTheme);
+    useEffect(()=>{
+        const observer = new MutationObserver(()=>{
+            const newTheme = getCurrentTheme();
+            if (newTheme !== theme) setTheme(newTheme);
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: [
+                'class',
+                'data-theme'
+            ]
+        });
+        return ()=>observer.disconnect();
+    }, [
+        theme
+    ]);
+    return theme;
+}
+export { useTheme };

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@particle-network/ui-shared",
+  "version": "0.0.1",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tailwind-preset": "./tailwind-preset.js"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch",
+    "type-check": "npx tsc --noEmit -p ./tsconfig.json",
+    "lint": "eslint . --no-error-on-unmatched-pattern --quiet",
+    "lint:fix": "eslint . --fix --no-error-on-unmatched-pattern --quiet",
+    "clean": "rm -rf .turbo node_modules dist"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "^1.3.5",
+    "@rslib/core": "^0.12.3",
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "typescript": "^5.8.3"
+  }
+}