@evinvest/uikit 0.1.0

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@evinvest/uikit",
+  "version": "0.1.0",
+  "description": "Dep-light React UI kit: shadcn-semantics components with zero @radix-ui / cva, mirroring the ev::uikit Rust feature. Ships the shared design tokens.",
+  "license": "BlueOak-1.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/EV-invest/lib.git",
+    "directory": "ts/uikit"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles/tokens.css": "./styles/tokens.css"
+  },
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "files": [
+    "dist",
+    "styles"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "prepare": "tsup"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/node": "^22.10.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "jsdom": "^25.0.1",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8"
+  }
+}

package/styles/tokens.css

@@ -0,0 +1,106 @@
+/*
+ * Shared design tokens — the theme contract for the `ev::uikit` (Rust) and
+ * `@evinvest/uikit` (TypeScript) components. Import this file from any Tailwind v4
+ * entrypoint. Kept byte-for-byte in parity with `@evinvest/uikit`'s
+ * `styles/tokens.css`; change one, change the other.
+ *
+ * Structure:
+ *   @theme inline {}  — wires values into Tailwind utilities (processed by
+ *                       Tailwind v4; ignored as unknown at-rule by browsers)
+ *   :root {}          — raw CSS custom properties; work everywhere
+ */
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --font-sans: var(--font-inter), "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-serif: var(--font-playfair), "Playfair Display", ui-serif, Georgia, serif;
+  --font-mono: var(--font-inter), "Inter", ui-monospace, monospace;
+
+  /* shadcn semantic utilities */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* sidebar utilities (PC) */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /*
+   * Brand palette — navy-led institutional base + tiered Vietnam-inspired accents.
+   * Named by ROLE, not hue. Tier hierarchy:
+   *   t1 (Ha Long Teal)  — recurring workhorse: labels, nav, secondary numbers
+   *   t2 (Jungle Green)  — positive financial signals: yields, growth %, FDI
+   *   t3 (Rice Gold)     — headline return figures: IRR, ROI, appreciation
+   *   t4 (Lotus Pink)    — ≤1 per section; the punctuation jewel
+   */
+  --color-main-brand: #001e4e;
+  --color-main-black: #070d18;
+  --color-main-surface: #081020;
+  --color-main-card: #0c1626;
+  --color-main-mist: #e6e1d3;
+  --color-main-accent-t1: #2a9d8f;
+  --color-main-accent-t2: #2e9e5b;
+  --color-main-accent-t3: #f2c94c;
+  --color-main-accent-t4: #e58aae;
+}
+
+:root {
+  /* ── shadcn semantic tokens ──────────────────────────────────── */
+  --background: #070d18;
+  --foreground: white;
+  --card: #0c1626;
+  --card-foreground: white;
+  --popover: #0c1626;
+  --popover-foreground: white;
+  --primary: #001e4e;
+  --primary-foreground: #e6e1d3;
+  --secondary: #081020;
+  --secondary-foreground: white;
+  --muted: #16213a;
+  --muted-foreground: color-mix(in srgb, #e6e1d3 40%, transparent);
+  --accent: color-mix(in srgb, #e6e1d3 8%, transparent);
+  --accent-foreground: white;
+  --destructive: #da251d;
+  --destructive-foreground: #e6e1d3;
+  --border: color-mix(in srgb, #e6e1d3 10%, transparent);
+  --input: color-mix(in srgb, #e6e1d3 20%, transparent);
+  --ring: #2a9d8f;
+  --radius: 0.5rem;
+
+  /* ── sidebar (PC nav) ───────────────────────────────────────── */
+  --sidebar: #0c1626;
+  --sidebar-foreground: white;
+  --sidebar-primary: #001e4e;
+  --sidebar-primary-foreground: #e6e1d3;
+  --sidebar-accent: color-mix(in srgb, #e6e1d3 8%, transparent);
+  --sidebar-accent-foreground: white;
+  --sidebar-border: color-mix(in srgb, #e6e1d3 10%, transparent);
+  --sidebar-ring: #2a9d8f;
+  --sidebar-width: 14rem;
+}