@particle-network/ui-react 0.0.1

package/dist/utils/variants.js

@@ -0,0 +1,100 @@
+const solid = {
+    default: 'bg-background-200 text-foreground',
+    primary: 'bg-primary text-primary-foreground',
+    secondary: 'bg-background-200 text-foreground-300',
+    success: 'bg-success text-success-foreground',
+    warning: 'bg-warning text-warning-foreground',
+    danger: 'bg-danger text-danger-foreground',
+    foreground: 'bg-foreground text-background',
+    bullish: 'bg-bullish text-bullish-foreground',
+    bearish: 'bg-bearish text-bearish-foreground',
+    contrast: 'bg-foreground text-background'
+};
+const shadow = {
+    default: 'shadow-lg shadow-default/50 bg-default text-default-foreground',
+    primary: 'shadow-lg shadow-primary/40 bg-primary text-primary-foreground',
+    secondary: 'shadow-lg shadow-secondary/40 bg-secondary text-secondary-foreground',
+    success: 'shadow-lg shadow-success/40 bg-success text-success-foreground',
+    warning: 'shadow-lg shadow-warning/40 bg-warning text-warning-foreground',
+    danger: 'shadow-lg shadow-danger/40 bg-danger text-danger-foreground',
+    foreground: 'shadow-lg shadow-foreground/40 bg-foreground text-background',
+    bullish: 'shadow-lg shadow-bullish/40 bg-bullish text-foreground',
+    bearish: 'shadow-lg shadow-bearish/40 bg-bearish text-foreground'
+};
+const bordered = {
+    default: 'bg-transparent border-foreground-100 text-foreground',
+    primary: 'bg-transparent border-primary text-primary',
+    secondary: 'bg-transparent border-foreground-100 text-foreground-300',
+    success: 'bg-transparent border-success text-success',
+    warning: 'bg-transparent border-warning text-warning',
+    danger: 'bg-transparent border-danger text-danger',
+    foreground: 'bg-transparent border-foreground text-foreground',
+    bullish: 'bg-transparent border-bullish text-bullish',
+    bearish: 'bg-transparent border-bearish text-bearish'
+};
+const flat = {
+    default: 'bg-default/40 text-default-foreground',
+    primary: 'bg-primary/20 text-primary',
+    secondary: 'bg-default/40 text-foreground-300',
+    success: 'bg-success/20 text-success',
+    warning: 'bg-warning/20 text-warning',
+    danger: 'bg-danger/20 text-danger',
+    foreground: 'bg-foreground/10 text-foreground',
+    bullish: 'bg-bullish/20 text-bullish',
+    bearish: 'bg-bearish/20 text-bearish'
+};
+const faded = {
+    default: 'border-default bg-default-100 text-default-foreground',
+    primary: 'border-default bg-default-100 text-primary',
+    secondary: 'border-default bg-default-100 text-secondary',
+    success: 'border-default bg-default-100 text-success',
+    warning: 'border-default bg-default-100 text-warning',
+    danger: 'border-default bg-default-100 text-danger',
+    foreground: 'border-default bg-default-100 text-foreground',
+    bullish: 'border-bullish bg-bullish text-foreground',
+    bearish: 'border-bearish bg-bearish text-foreground'
+};
+const light = {
+    default: 'bg-transparent text-default-foreground',
+    primary: 'bg-transparent text-primary',
+    secondary: 'bg-transparent text-foreground-300',
+    success: 'bg-transparent text-success',
+    warning: 'bg-transparent text-warning',
+    danger: 'bg-transparent text-danger',
+    foreground: 'bg-transparent text-foreground',
+    bullish: 'bg-transparent text-bullish',
+    bearish: 'bg-transparent text-bearish'
+};
+const ghost = {
+    default: 'border-default text-default-foreground',
+    primary: 'border-primary text-primary',
+    secondary: 'border-foreground-100 text-foreground-300',
+    success: 'border-success text-success',
+    warning: 'border-warning text-warning',
+    danger: 'border-danger text-danger',
+    foreground: 'border-foreground text-foreground hover:!bg-foreground',
+    bullish: 'border-bullish text-foreground hover:!bg-bullish',
+    bearish: 'border-bearish text-foreground hover:!bg-bearish'
+};
+const variants_text = {
+    default: 'bg-transparent text-default-foreground',
+    primary: 'bg-transparent text-primary',
+    secondary: 'bg-transparent text-foreground-300',
+    success: 'bg-transparent text-success',
+    warning: 'bg-transparent text-warning',
+    danger: 'bg-transparent text-danger',
+    foreground: 'bg-transparent text-foreground',
+    bullish: 'bg-transparent text-bullish',
+    bearish: 'bg-transparent text-bearish'
+};
+const colorVariants = {
+    solid,
+    shadow,
+    bordered,
+    flat,
+    faded,
+    light,
+    ghost,
+    text: variants_text
+};
+export { colorVariants };

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@particle-network/ui-react",
+  "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",
+    "tailwind-preset.js"
+  ],
+  "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": {
+    "@heroui/react": "^2.8.2",
+    "@particle-network/eslint-config": "*",
+    "@particle-network/ui-shared": "*",
+    "@rsbuild/plugin-react": "^1.3.5",
+    "@rslib/core": "^0.12.3",
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "dependencies": {
+    "ahooks": "^3.9.4"
+  }
+}

package/tailwind-preset.js

@@ -0,0 +1,298 @@
+/* eslint-disable */
+const { heroui } = require('@heroui/theme');
+const plugin = require('tailwindcss/plugin');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      gap: {
+        xs: '0.125rem', // 2px
+        sm: '0.375rem', // 6px
+        md: '0.625rem', // 10px
+        lg: '0.875rem', // 14px
+      },
+      spacing: {
+        xs: '0.125rem', // 2px
+        sm: '0.375rem', // 6px
+        md: '0.625rem', // 10px
+        lg: '0.875rem', // 14px
+      },
+      boxShadow: {
+        box: '2px 2px 12px rgba(139, 142, 161, 0.15)',
+      },
+      animation: {
+        blink: 'blink 1s infinite',
+        'sprite-refresh': 'sprite-refresh 5s steps(270)',
+        lotterySlideUp: 'lotterySlideUp 7s linear infinite',
+      },
+      keyframes: {
+        lotterySlideUp: {
+          '0%': { transform: 'translateY(0)' },
+          '100%': { transform: 'translateY(-50%)' },
+        },
+        blink: {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0' },
+        },
+        'sprite-refresh': {
+          from: { backgroundPosition: '0 0' },
+          to: { backgroundPosition: '-13500px 0' },
+        },
+        slide: {
+          '0%': {
+            transform: 'translateX(1600px)',
+          },
+          '100%': {
+            transform: 'translateX(-800px)',
+          },
+        },
+      },
+      fontSize: {
+        xxs: [
+          '0.625rem',
+          {
+            // 10px
+            lineHeight: '0.75rem', // 12px
+          },
+        ],
+        /* 10px */
+        caption1: ['0.625rem', { lineHeight: '0.875rem' }],
+        /* 11px */
+        body3: ['0.6875rem', { lineHeight: '1rem' }],
+        /* 12px */
+        body2: ['0.75rem', { lineHeight: '1rem' }],
+        /* 14px */
+        body1: ['0.875rem', { lineHeight: '1.125rem' }],
+        /* 16px */
+        h4: ['1rem', { lineHeight: '1.25rem' }],
+        /* 18px */
+        h3: ['1.125rem', { lineHeight: '1.375rem' }],
+        /* 20px */
+        h2: ['1.25rem', { lineHeight: '1.5rem' }],
+        /* 24px */
+        h1: ['1.5rem', { lineHeight: '1.75rem' }],
+      },
+      colors: {
+        bullish: 'var(--bullish-color)',
+        'bullish-foreground': '#FFFFFF',
+        'bullish/10': 'hsla(var(--bullish-color-hsl), 0.1)',
+        'bullish/20': 'hsla(var(--bullish-color-hsl), 0.2)',
+        'bullish/30': 'hsla(var(--bullish-color-hsl), 0.3)',
+        'bullish/40': 'hsla(var(--bullish-color-hsl), 0.4)',
+        'bullish/50': 'hsla(var(--bullish-color-hsl), 0.5)',
+        'bullish/60': 'hsla(var(--bullish-color-hsl), 0.6)',
+        'bullish/70': 'hsla(var(--bullish-color-hsl), 0.7)',
+        'bullish/80': 'hsla(var(--bullish-color-hsl), 0.8)',
+        'bullish/90': 'hsla(var(--bullish-color-hsl), 0.9)',
+        bearish: 'var(--bearish-color)',
+        'bearish-foreground': '#FFFFFF',
+        'bearish/10': 'hsla(var(--bearish-color-hsl), 0.1)',
+        'bearish/20': 'hsla(var(--bearish-color-hsl), 0.2)',
+        'bearish/30': 'hsla(var(--bearish-color-hsl), 0.3)',
+        'bearish/40': 'hsla(var(--bearish-color-hsl), 0.4)',
+        'bearish/50': 'hsla(var(--bearish-color-hsl), 0.5)',
+        'bearish/60': 'hsla(var(--bearish-color-hsl), 0.6)',
+        'bearish/70': 'hsla(var(--bearish-color-hsl), 0.7)',
+        'bearish/80': 'hsla(var(--bearish-color-hsl), 0.8)',
+        'bearish/90': 'hsla(var(--bearish-color-hsl), 0.9)',
+      },
+    },
+  },
+  darkMode: 'class',
+  plugins: [
+    heroui({
+      addCommonColors: true,
+      defaultTheme: 'light',
+      defaultExtendTheme: 'light',
+      layout: {
+        radius: {
+          small: '6px', // rounded-small
+          medium: '10px', // rounded-medium
+          large: '14px', // rounded-large
+        },
+        // fontSize: {
+        //   tiny: '0.75rem', // 12px
+        //   small: '0.875rem', // 14px
+        //   medium: '1rem', // 16px
+        //   large: '1.125rem', // 18px
+        //   DEFAULT: '1rem', // 16px
+        // },
+        disabledOpacity: 0.4,
+        hoverOpacity: 0.7,
+      },
+      themes: {
+        light: {
+          colors: {
+            content1: {
+              DEFAULT: '#FFFFFF',
+            },
+            background: {
+              200: '#E8E8ED',
+              300: '#F0F0F2',
+              400: '#F8F8FA',
+              500: '#FFFFFF',
+              DEFAULT: '#FFFFFF',
+            },
+            foreground: {
+              100: '#C0C0C9',
+              300: '#767A80',
+              500: '#000000',
+              DEFAULT: '#000000',
+            },
+            default: {
+              DEFAULT: '#E8E8EB',
+              foreground: '#000000',
+            },
+            primary: {
+              900: '#362349',
+              700: '#4D2A86',
+              600: '#6A3AB8',
+              DEFAULT: '#D745FF', //主色
+              foreground: '#FFFFFF',
+            },
+            secondary: {
+              DEFAULT: '#E8E8EB',
+              foreground: '#000000',
+            },
+            success: {
+              DEFAULT: '#2E9F4A',
+              foreground: '#FFFFFF',
+            },
+            danger: {
+              DEFAULT: '#DE4A40',
+              foreground: '#FFFFFF',
+            },
+            warning: {
+              DEFAULT: '#FF9821',
+              foreground: '#FFFFFF',
+            },
+            focus: '#D745FF',
+            divider: '#E0E0E6',
+            alert: '#E65E16',
+            gold: '#F38300',
+          },
+        },
+        dark: {
+          colors: {
+            content1: {
+              DEFAULT: '#17171C',
+            },
+            background: {
+              200: '#1F1F23',
+              300: '#17171C',
+              400: '#0F0F0F',
+              500: '#000000',
+              DEFAULT: '#000000',
+            },
+            foreground: {
+              100: '#4E4E56',
+              300: '#A1A1AA',
+              500: '#FFFFFF',
+              DEFAULT: '#FFFFFF',
+            },
+            content1: {
+              DEFAULT: '#17171C',
+            },
+            default: {
+              DEFAULT: '#1F1F23',
+              foreground: '#FFFFFF',
+            },
+            primary: {
+              900: '#362349',
+              700: '#4D2A86',
+              600: '#6A3AB8',
+              DEFAULT: '#D745FF', //主色
+              foreground: '#FFFFFF',
+            },
+            secondary: {
+              DEFAULT: '#1F1F23',
+              foreground: '#FFFFFF',
+            },
+            success: {
+              DEFAULT: '#45B167',
+              foreground: '#FFFFFF',
+            },
+            danger: {
+              DEFAULT: '#E84A5A',
+              foreground: '#FFFFFF',
+            },
+            warning: {
+              DEFAULT: '#FF9821',
+              foreground: '#FFFFFF',
+            },
+            focus: '#D745FF',
+            divider: '#282828',
+            alert: '#F57733',
+            gold: '#FFB800',
+          },
+        },
+      },
+      function({ addVariant, addComponents }) {
+        addVariant('child', '& > *');
+        addVariant('child-hover', '& > *:hover');
+        // Height-based variants
+        addVariant('sh', '@media (min-height: 500px)');
+        addVariant('max-sh', '@media (max-height: 500px)');
+        addVariant('mh', '@media (min-height: 700px)');
+        addVariant('max-mh', '@media (max-height: 700px)');
+        addVariant('lh', '@media (min-height: 900px)');
+        addVariant('max-lh', '@media (max-height: 900px)');
+        addVariant('lh950', '@media (min-height: 950px)');
+        addVariant('max-lh950', '@media (max-height: 950px)');
+        addVariant('xh', '@media (min-height: 1100px)');
+        addVariant('max-xh', '@media (max-height: 1100px)');
+        addVariant('2xh', '@media (min-height: 1300px)');
+        addVariant('max-2xh', '@media (max-height: 1300px)');
+
+        // light mode variant
+        addVariant('light', '&:not(.dark *)');
+
+        // button styles
+        addComponents({
+          '.btn-lg': {
+            fontSize: '1.25rem !important',
+            lineHeight: '1.25rem !important',
+            borderRadius: '0.625rem !important',
+            height: '3.125rem !important', // 50px
+            fontWeight: '600 !important',
+            '@media (max-width: 640px)': {
+              height: '2.75rem !important', // Height for screens < 640px
+              fontSize: '1rem !important',
+              lineHeight: '1rem !important',
+              borderRadius: '500 !important',
+            },
+          },
+          '.btn-md': {
+            fontSize: '1rem !important',
+            lineHeight: '1rem !important',
+            borderRadius: '0.625rem !important',
+            height: '2.75rem !important', // 44px
+            fontWeight: '500 !important',
+          },
+          '.btn-sm': {
+            fontSize: '1rem !important',
+            lineHeight: '1rem !important',
+            borderRadius: '0.625rem !important',
+            height: '2.25rem !important', // 36px
+            fontWeight: '500 !important',
+          },
+        });
+      },
+    }),
+    plugin(function ({ addUtilities }) {
+      addUtilities({
+        '.no-scrollbar': {
+          /* Firefox */
+          'scrollbar-width': 'none',
+          /* IE/Edge */
+          '-ms-overflow-style': 'none',
+          /* Chrome/Safari */
+          '&::-webkit-scrollbar': {
+            display: 'none',
+          },
+        },
+      });
+    }),
+  ],
+};