open-index/open-npm huggingface dataset:
npm package: @matthewsreis/ui
Description: Matthews Reis UI component library
Latest version: 0.1.0

# @matthewsreis/ui

UI component library for the Matthews Reis design system. Publishes React components (and future framework targets) as a single scoped package with subpath exports.

## Installation

```bash
npm install @matthewsreis/ui
```

React 18 or later and react-dom are required as peer dependencies.

## Usage

```ts
import { Button } from '@matthewsreis/ui'
```

Framework-specific subpath (resolves to the same entry for React):

```ts
import { Button } from '@matthewsreis/ui/react'
```

## Exports

| Subpath | Framework | Status |
|---------|-----------|--------|
| `@matthewsreis/ui` | React (default) | Active |
| `@matthewsreis/ui/react` | React | Active |

## Directory structure

```
packages/ui/
├── src/
│   └── react/             # React components - add src/vue/, src/svelte/, etc. for other frameworks
│       ├── components/
│       │   └── button/
│       │       ├── Button.tsx
│       │       └── Button.test.tsx
│       └── index.ts       # React public API - export all components from here
├── test/
│   └── setup.ts           # Shared test setup (@testing-library/jest-dom/vitest)
├── dist/                  # Built output (not committed)
│   └── react/
│       ├── index.js       # ESM
│       ├── index.cjs      # CJS
│       └── index.d.ts     # Types
├── package.json
├── tsconfig.json
├── tsup.config.ts         # Globs src/*/index.ts - new frameworks are picked up automatically
└── vitest.config.ts
```

## Commands

Run from `packages/ui/` or from the workspace root (`npm/`) with `-r`:

```bash
# Build (ESM + CJS + types for all framework entries)
pnpm build

# Watch mode
pnpm dev

# Run tests
pnpm test
pnpm test:watch

# Lint
pnpm lint
```

## Adding a component

1. Create `src/react/components/<name>/<Name>.tsx`
2. Export it from `src/react/index.ts`
3. Add tests alongside the component in `<Name>.test.tsx`

## Adding a framework

1. Create `src/<framework>/index.ts` - the build picks it up automatically via the `src/*/index.ts` glob in `tsup.config.ts`
2. Add a subpath export entry to `package.json`:

   ```json
   "./<framework>": {
     "types": "./dist/<framework>/index.d.ts",
     "import": "./dist/<framework>/index.js",
     "require": "./dist/<framework>/index.cjs"
   }
   ```

3. Add peer dependencies for the new framework to `package.json` if needed
4. Add a changeset and open a PR

## Build output

`tsup.config.ts` globs `src/*/index.ts` and outputs each to `dist/<framework>/`:

```
dist/
└── react/
    ├── index.js    # ESM
    ├── index.cjs   # CJS
    └── index.d.ts  # Types
```

Adding `src/vue/index.ts` automatically produces `dist/vue/` on the next build.