rechta-ds 0.0.0

package/packages/ui/src/styles/globals.css

@@ -0,0 +1,220 @@
+@import url('https://fonts.googleapis.com/css2?family=Ruda:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ─── Dark theme (default) ───────────────────────────────────────────────── */
+:root,
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  /* Backgrounds */
+  --c-bg:           #000000;
+  --c-bg-subtle:    #090909;
+  --c-bg-muted:     #0F0F0F;
+  --c-bg-elevated:  #161616;
+  --c-bg-overlay:   #1E1E1E;
+  --c-bg-inverse:   #FFFFFC;
+
+  /* Surfaces */
+  --c-bg-surface:        #111111;
+  --c-bg-surface-raised: #1A1A1A;
+  --c-bg-surface-sunken: #080808;
+  --c-bg-surface-hover:  #222222;
+  --c-bg-surface-active: #2A2A2A;
+  --c-bg-surface-selected: #1C2E1C;
+
+  /* Borders */
+  --c-border-subtle:   #1E1E1E;
+  --c-border:          #2A2A2A;
+  --c-border-mid:      #333333;
+  --c-border-strong:   #444444;
+  --c-border-brand:    rgba(9,232,94,0.30);
+  --c-border-brand-hover: rgba(9,232,94,0.50);
+  --c-border-blue:     rgba(53,144,243,0.30);
+  --c-border-blue-hover: rgba(53,144,243,0.50);
+  --c-border-error:    rgba(239,68,68,0.50);
+  --c-border-error-hover: rgba(239,68,68,0.70);
+  --c-border-warning:  rgba(245,158,11,0.40);
+
+  /* Text */
+  --c-text:           #FFFFFC;
+  --c-text-2:         #B0B0AE;
+  --c-text-3:         #888886;
+  --c-text-muted:     #6E6E6C;
+  --c-text-disabled:  #555553;
+  --c-text-inverse:   #000000;
+  --c-text-brand:     #09E85E;
+  --c-text-brand-hover: #0CF568;
+  --c-text-blue:      #5BABFF;
+  --c-text-blue-hover:#7FC0FF;
+  --c-text-error:     #F87171;
+  --c-text-warning:   #FBBF24;
+  --c-text-success:   #09E85E;
+
+  /* Brand (malachite green) */
+  --c-brand:           #09E85E;
+  --c-brand-hover:     #0CF568;
+  --c-brand-active:    #07C44F;
+  --c-brand-focus:     rgba(9,232,94,0.25);
+  --c-brand-subtle:    rgba(9,232,94,0.08);
+  --c-brand-subtle-hover: rgba(9,232,94,0.14);
+  --c-brand-muted:     rgba(9,232,94,0.04);
+  --c-brand-emphasis:  #16C172;
+
+  /* Emerald */
+  --c-emerald:          #16C172;
+  --c-emerald-hover:    #1AD47F;
+  --c-emerald-active:   #0FAD63;
+  --c-emerald-focus:    rgba(22,193,114,0.25);
+  --c-emerald-subtle:   rgba(22,193,114,0.08);
+
+  /* Blue */
+  --c-blue:             #3590F3;
+  --c-blue-hover:       #4FA0FF;
+  --c-blue-active:      #2478D4;
+  --c-blue-focus:       rgba(53,144,243,0.25);
+  --c-blue-subtle:      rgba(53,144,243,0.08);
+
+  /* Status */
+  --c-status-success:    #09E85E;
+  --c-status-info:       #5BABFF;
+  --c-status-warning:    #FBBF24;
+  --c-status-error:      #F87171;
+  --c-status-success-bg: rgba(9,232,94,0.08);
+  --c-status-info-bg:    rgba(53,144,243,0.08);
+  --c-status-warning-bg: rgba(245,158,11,0.08);
+  --c-status-error-bg:   rgba(239,68,68,0.08);
+
+  /* Primitives */
+  --color-porcelain: #FFFFFC;
+  --color-black:     #000000;
+
+  /* Shadows (dark) */
+  --shadow-xs:  0 1px 2px rgba(0,0,0,0.5);
+  --shadow-sm:  0 1px 4px rgba(0,0,0,0.6);
+  --shadow-md:  0 4px 10px rgba(0,0,0,0.7);
+  --shadow-lg:  0 10px 24px rgba(0,0,0,0.75);
+  --shadow-xl:  0 20px 40px rgba(0,0,0,0.8);
+  --shadow-glow-brand:    0 0 20px rgba(9,232,94,0.28), 0 0 60px rgba(9,232,94,0.08);
+  --shadow-glow-brand-lg: 0 0 40px rgba(9,232,94,0.35), 0 0 80px rgba(9,232,94,0.12);
+  --shadow-glow-blue:     0 0 20px rgba(53,144,243,0.25), 0 0 50px rgba(53,144,243,0.07);
+
+  /* Border radius (matches tokens) */
+  --radius-none: 0px;
+  --radius-sm:   2px;
+  --radius-base: 4px;
+  --radius-md:   6px;
+  --radius-lg:   8px;
+  --radius-xl:   12px;
+  --radius-2xl:  16px;
+  --radius-3xl:  24px;
+  --radius-full: 9999px;
+
+  /* Typography */
+  --font-display: 'Ruda', sans-serif;
+  --font-sans:    'Inter', system-ui, sans-serif;
+  --font-mono:    'JetBrains Mono', monospace;
+}
+
+/* ─── Light theme ─────────────────────────────────────────────────────────── */
+[data-theme="light"] {
+  color-scheme: light;
+
+  --c-bg:           #FFFFFC;
+  --c-bg-subtle:    #F4F4F2;
+  --c-bg-muted:     #EBEBEA;
+  --c-bg-elevated:  #FFFFFF;
+  --c-bg-overlay:   #E0E0DE;
+  --c-bg-inverse:   #111110;
+
+  --c-bg-surface:        #F8F8F6;
+  --c-bg-surface-raised: #FFFFFF;
+  --c-bg-surface-sunken: #EBEBEA;
+  --c-bg-surface-hover:  #EFEFED;
+  --c-bg-surface-active: #E5E5E3;
+  --c-bg-surface-selected: #EDFFF5;
+
+  --c-border-subtle: #E8E8E6;
+  --c-border:        #D0D0CE;
+  --c-border-mid:    #BBBBBA;
+  --c-border-strong: #9A9A98;
+  --c-border-brand:  rgba(5,163,65,0.40);
+  --c-border-brand-hover: rgba(5,163,65,0.65);
+  --c-border-blue:   rgba(26,99,198,0.40);
+  --c-border-blue-hover: rgba(26,99,198,0.65);
+  --c-border-error:  rgba(196,29,29,0.45);
+  --c-border-error-hover: rgba(196,29,29,0.70);
+  --c-border-warning: rgba(146,87,10,0.40);
+
+  --c-text:           #111110;
+  --c-text-2:         #3A3A38;
+  --c-text-3:         #555553;
+  --c-text-muted:     #6E6E6C;
+  --c-text-disabled:  #9A9A98;
+  --c-text-inverse:   #FFFFFC;
+  --c-text-brand:     #047A2B;
+  --c-text-brand-hover: #038A30;
+  --c-text-blue:      #1A5EB8;
+  --c-text-blue-hover:#1553A8;
+  --c-text-error:     #C41D1D;
+  --c-text-warning:   #92570A;
+  --c-text-success:   #047A2B;
+
+  --c-brand:           #07C44F;
+  --c-brand-hover:     #09E85E;
+  --c-brand-active:    #05A341;
+  --c-brand-focus:     rgba(5,163,65,0.22);
+  --c-brand-subtle:    rgba(5,163,65,0.08);
+  --c-brand-subtle-hover: rgba(5,163,65,0.14);
+  --c-brand-muted:     rgba(5,163,65,0.04);
+  --c-brand-emphasis:  #0FAD63;
+
+  --c-emerald:          #0FAD63;
+  --c-emerald-hover:    #16C172;
+  --c-emerald-active:   #0A8F50;
+  --c-emerald-focus:    rgba(15,173,99,0.22);
+  --c-emerald-subtle:   rgba(15,173,99,0.08);
+
+  --c-blue:             #2572D6;
+  --c-blue-hover:       #3590F3;
+  --c-blue-active:      #1A5EB8;
+  --c-blue-focus:       rgba(26,94,184,0.22);
+  --c-blue-subtle:      rgba(26,94,184,0.08);
+
+  --c-status-success:    #047A2B;
+  --c-status-info:       #1A5EB8;
+  --c-status-warning:    #92570A;
+  --c-status-error:      #C41D1D;
+  --c-status-success-bg: rgba(5,163,65,0.08);
+  --c-status-info-bg:    rgba(26,94,184,0.08);
+  --c-status-warning-bg: rgba(146,87,10,0.08);
+  --c-status-error-bg:   rgba(196,29,29,0.08);
+
+  --shadow-xs:  0 1px 2px rgba(0,0,0,0.07);
+  --shadow-sm:  0 1px 4px rgba(0,0,0,0.10);
+  --shadow-md:  0 4px 10px rgba(0,0,0,0.12);
+  --shadow-lg:  0 10px 24px rgba(0,0,0,0.14);
+  --shadow-xl:  0 20px 40px rgba(0,0,0,0.18);
+  --shadow-glow-brand:    0 0 18px rgba(7,196,79,0.22), 0 0 50px rgba(7,196,79,0.06);
+  --shadow-glow-brand-lg: 0 0 32px rgba(7,196,79,0.30), 0 0 70px rgba(7,196,79,0.10);
+  --shadow-glow-blue:     0 0 18px rgba(37,114,214,0.20), 0 0 40px rgba(37,114,214,0.05);
+}
+
+/* ─── Base resets ─────────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; }
+
+body {
+  font-family: var(--font-sans);
+  background-color: var(--c-bg);
+  color: var(--c-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ─── Scrollbar (dark) ────────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--c-border-mid); border-radius: 9999px; }
+::-webkit-scrollbar-thumb:hover { background: var(--c-border-strong); }

package/packages/ui/tailwind.config.ts

@@ -0,0 +1,68 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  darkMode: ['class', '[data-theme="dark"]'],
+  content: ['./src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        // Brand — malachite green
+        brand: {
+          50:  '#EDFFF5',
+          100: '#C9FFE1',
+          200: '#63F5A8',
+          300: '#20F07A',
+          400: '#09E85E', // malachite — primary
+          450: '#0CF568',
+          500: '#07C44F',
+          550: '#16C172', // emerald
+          600: '#0FAD63',
+          700: '#0A8048',
+          800: '#055230',
+          900: '#022818',
+        },
+        // Porcelain (off-white)
+        porcelain: '#FFFFFC',
+        // Token-mapped (rely on CSS vars)
+        surface: 'var(--c-bg-surface)',
+        border: 'var(--c-border)',
+      },
+      fontFamily: {
+        display: ['Ruda', 'sans-serif'],
+        sans:    ['Inter', 'system-ui', 'sans-serif'],
+        mono:    ['JetBrains Mono', 'monospace'],
+      },
+      boxShadow: {
+        'glow-brand':    '0 0 20px rgba(9,232,94,0.28), 0 0 60px rgba(9,232,94,0.08)',
+        'glow-brand-lg': '0 0 40px rgba(9,232,94,0.35), 0 0 80px rgba(9,232,94,0.12)',
+        'glow-blue':     '0 0 20px rgba(53,144,243,0.25), 0 0 50px rgba(53,144,243,0.07)',
+      },
+      borderRadius: {
+        sm:   '2px',
+        base: '4px',
+        md:   '6px',
+        lg:   '8px',
+        xl:   '12px',
+        '2xl': '16px',
+        '3xl': '24px',
+      },
+      keyframes: {
+        'marquee-x': {
+          from: { transform: 'translateX(0)' },
+          to:   { transform: 'translateX(-50%)' },
+        },
+        shimmer: {
+          '0%':   { backgroundPosition: '-400px 0' },
+          '100%': { backgroundPosition: '400px 0' },
+        },
+      },
+      animation: {
+        'marquee-x': 'marquee-x 30s linear infinite',
+        shimmer:     'shimmer 1.5s ease-in-out infinite',
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;

package/packages/ui/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "baseUrl": ".",
+    "paths": {
+      "@rechta/tokens": ["../tokens/dist/index.d.ts"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "src/stories"]
+}

package/packages/ui/tsup.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: {
+    index:      'src/index.ts',
+    'atoms/index':     'src/components/atoms/index.ts',
+    'molecules/index': 'src/components/molecules/index.ts',
+    'organisms/index': 'src/components/organisms/index.ts',
+    'charts/index':    'src/components/charts/index.ts',
+  },
+  format: ['esm'],
+  dts: true,
+  splitting: true,
+  sourcemap: true,
+  clean: true,
+  treeshake: true,
+  external: ['react', 'react-dom'],
+  banner: {
+    js: '"use client";',
+  },
+  esbuildOptions(options) {
+    options.jsx = 'automatic';
+  },
+});

package/packages/ui/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@rechta/tokens': path.resolve(__dirname, '../tokens/dist/index.js'),
+    },
+  },
+  css: {
+    postcss: {
+      plugins: [],
+    },
+  },
+});

package/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - 'packages/*'

package/turbo.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "ui": "tui",
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "inputs": ["$TURBO_DEFAULT$", ".env*"],
+      "outputs": ["dist/**"]
+    },
+    "dev": {
+      "cache": false,
+      "persistent": true
+    },
+    "storybook": {
+      "cache": false,
+      "persistent": true
+    },
+    "build-storybook": {
+      "dependsOn": ["^build"],
+      "outputs": ["storybook-static/**"]
+    },
+    "lint": {
+      "dependsOn": ["^build"]
+    },
+    "test": {
+      "dependsOn": ["^build"],
+      "outputs": ["coverage/**"]
+    },
+    "clean": {
+      "cache": false
+    }
+  }
+}