@wealthx/ui 0.0.0 → 0.0.1

package/README.md

@@ -0,0 +1,124 @@
+# @wealthx/ui
+
+UI components and design system theme for WealthX. Built on [MUI (Material UI)](https://mui.com/) with a tenant-based color system, typography tokens, and CSS variables.
+
+## Installation
+
+```bash
+yarn add @wealthx/ui @mui/material @emotion/react @emotion/styled react react-dom
+```
+
+**Peer dependencies:** `react` and `react-dom` (^18.3.1). MUI packages are listed as dependencies; ensure your app satisfies them or install as needed.
+
+## Quick start
+
+Wrap your app with `ThemeProvider` and use design system components:
+
+```tsx
+import { ThemeProvider } from "@wealthx/ui/theme";
+import { Button } from "@wealthx/ui/button";
+
+function App() {
+  return (
+    <ThemeProvider primary="#33FF99" secondary="#162029">
+      <Button variant="contained" color="primary">
+        Primary action
+      </Button>
+    </ThemeProvider>
+  );
+}
+```
+
+`ThemeProvider` applies the MUI theme and injects design-system CSS variables. `primary` and `secondary` are optional; omit them to use the default brand colors.
+
+## Exports
+
+| Specifier           | Description                          |
+|---------------------|--------------------------------------|
+| `@wealthx/ui/button` | Button component (MUI Button wrapper) |
+| `@wealthx/ui/theme` | Theme provider, theme factory, tokens, typography, utilities |
+
+## Theme
+
+### ThemeProvider
+
+Provides the MUI theme and design-system CSS variables. Use it once at the root (e.g. `App`).
+
+```tsx
+import { ThemeProvider } from "@wealthx/ui/theme";
+
+<ThemeProvider
+  primary="#33FF99"   // optional; tenant primary
+  secondary="#162029" // optional; tenant secondary
+  injectCssVariables={true} // default: inject :root CSS variables
+>
+  {children}
+</ThemeProvider>
+```
+
+### createDesignTheme
+
+Build an MUI theme with the design system palette (e.g. for custom providers or testing):
+
+```tsx
+import { createDesignTheme } from "@wealthx/ui/theme";
+
+const theme = createDesignTheme({ primary: "#33FF99", secondary: "#162029" });
+```
+
+### CSS variables
+
+When using `ThemeProvider`, the library injects CSS variables such as:
+
+- **Brand:** `--color-brand-primary`, `--color-brand-secondary`
+- **Text:** `--color-text-primary`, `--color-text-secondary`, `--color-text-disabled`, `--color-text-inverse`
+- **Background:** `--color-background-primary`, `--color-background-secondary`, `--color-background-tertiary`, `--color-background-elevated`
+- **Borders:** `--color-border-default`, `--color-border-focus`, `--color-border-error`
+- **Primary scale:** `--primary-50` … `--primary-900` (derived from `primary`)
+
+Use them in your styles or MUI `sx` (e.g. `color: "var(--color-text-primary)"`).
+
+### Tokens and utilities
+
+From `@wealthx/ui/theme` you can also use:
+
+- **Colors:** `FOUNDATION_COLORS`, `GRAY_SCALE`, `ACCENTS`, `CHART_COLORS`, `OPACITY_UTILITY`
+- **Typography:** `TYPOGRAPHY`, `getTypographyCssVars`, `getResponsiveFontOverrides`, `VIEWPORT_LABELS`, `VIEWPORT_MAX_WIDTH`, etc.
+- **Utils:** `getContrastText`, `hexToRgb`, `rgba`, `getLuminance`, `buildOpacityScale`, and related helpers
+
+## Components
+
+### Button
+
+MUI `Button` re-exported for consistent use with the design theme. Supports all MUI Button props (`variant`, `color`, `size`, `disabled`, `loading`, `startIcon`, `endIcon`, etc.).
+
+```tsx
+import { Button } from "@wealthx/ui/button";
+
+<Button variant="contained" color="primary">Save</Button>
+<Button variant="outlined" color="secondary" startIcon={<SendIcon />}>Send</Button>
+```
+
+## Building
+
+From the repo root:
+
+```bash
+yarn build
+```
+
+This compiles the package with [tsup](https://tsup.egoist.dev/) into `dist/` (ESM and CJS). Types are emitted (`.d.ts` / `.d.mts`).
+
+## Documentation
+
+The design system is documented in Storybook in the `apps/docs` app. From the repo root:
+
+```bash
+yarn dev
+```
+
+Then open the Storybook URL (e.g. `http://localhost:6006`) for components, colors, and typography.
+
+## License
+
+MIT

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@wealthx/ui",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "sideEffects": false,
   "license": "MIT",
   "exports": {
     "./button": {
-      "types": "./src/button.tsx",
+      "types": "./dist/button.d.ts",
       "import": "./dist/button.mjs",
       "require": "./dist/button.js"
     },
     "./theme": {
-      "types": "./src/theme/index.ts",
-      "import": "./dist/theme.mjs",
-      "require": "./dist/theme.js"
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.mjs",
+      "require": "./dist/theme/index.js"
     }
   },
   "scripts": {