@handled-ai/design-system 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -63
- package/dist/index.d.ts +978 -7
- package/dist/index.js +7202 -802
- package/dist/index.js.map +1 -1
- package/package.json +20 -20
package/README.md
CHANGED
|
@@ -1,56 +1,6 @@
|
|
|
1
|
-
# @handled
|
|
1
|
+
# @handled Design System
|
|
2
2
|
|
|
3
|
-
A shared design system built on [shadcn/ui](https://ui.shadcn.com)
|
|
4
|
-
|
|
5
|
-
## Install as npm package (recommended)
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install @handled-ai/design-system
|
|
9
|
-
# or
|
|
10
|
-
pnpm add @handled-ai/design-system
|
|
11
|
-
# or
|
|
12
|
-
yarn add @handled-ai/design-system
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
**Peer dependencies:** Install React and the UI primitives if not already present:
|
|
16
|
-
|
|
17
|
-
```bash
|
|
18
|
-
pnpm add react react-dom @radix-ui/react-slot @radix-ui/react-label radix-ui class-variance-authority clsx tailwind-merge lucide-react
|
|
19
|
-
# Optional, only if you use Chart / ActivityLog / MetricCard etc.:
|
|
20
|
-
pnpm add date-fns recharts zod
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
**Use in your app:**
|
|
24
|
-
|
|
25
|
-
```tsx
|
|
26
|
-
import { Button, Card, cn } from "@handled-ai/design-system"
|
|
27
|
-
|
|
28
|
-
export function MyPage() {
|
|
29
|
-
return (
|
|
30
|
-
<Card>
|
|
31
|
-
<Button>Click me</Button>
|
|
32
|
-
</Card>
|
|
33
|
-
)
|
|
34
|
-
}
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
**Tailwind:** Components use Tailwind classes. In your Tailwind config (or `postcss.config` for Tailwind v4), include the package in `content` so classes are not purged:
|
|
38
|
-
|
|
39
|
-
```js
|
|
40
|
-
// tailwind.config.js (v3) or postcss / @config (v4)
|
|
41
|
-
content: [
|
|
42
|
-
"./src/**/*.{js,ts,jsx,tsx}",
|
|
43
|
-
"./node_modules/@handled-ai/design-system/dist/**/*.js",
|
|
44
|
-
]
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
**Theme:** Define the same CSS variables in your app (e.g. in `globals.css`) so tokens like `--primary`, `--background`, `--radius` exist. You can copy the `:root` and `.dark` blocks from this repo’s `app/globals.css`, or use your own palette.
|
|
48
|
-
|
|
49
|
-
---
|
|
50
|
-
|
|
51
|
-
## Registry (copy-paste) usage
|
|
52
|
-
|
|
53
|
-
The project is also published as a custom shadcn registry. Components are copy-pasted into your repo via the `shadcn` CLI.
|
|
3
|
+
A shared design system built on [shadcn/ui](https://ui.shadcn.com), hosted as a custom shadcn registry. Components are customized shadcn primitives distributed via the `shadcn` CLI.
|
|
54
4
|
|
|
55
5
|
## What You Can View
|
|
56
6
|
|
|
@@ -59,7 +9,7 @@ When the app is running locally, there are two main experiences:
|
|
|
59
9
|
- **Component gallery:** `/`
|
|
60
10
|
Browse individual components and UX blocks rendered directly on the page.
|
|
61
11
|
- **Prototype view:** `/preview`
|
|
62
|
-
See the
|
|
12
|
+
See the Acme Co-style end-to-end product prototype (sidebar, inbox/work queue, detail view, insights dashboard, meetings, and coaching banner patterns).
|
|
63
13
|
|
|
64
14
|
If port `3000` is taken, Next.js will auto-pick another port (for example `3001`, `3002`, `3003`). Use whatever port appears in your terminal output.
|
|
65
15
|
|
|
@@ -136,16 +86,7 @@ pnpm run registry:build # Build registry JSON files
|
|
|
136
86
|
- `http://localhost:3000/preview` (or same active port): full prototype
|
|
137
87
|
- `http://localhost:3000/r/registry.json` (or same active port): built registry index
|
|
138
88
|
|
|
139
|
-
## Publishing
|
|
140
|
-
|
|
141
|
-
### Publishing to npm (public package)
|
|
142
|
-
|
|
143
|
-
1. Bump version in `package.json` (e.g. `0.1.1`).
|
|
144
|
-
2. Build the library: `pnpm run build:lib` (outputs to `dist/`).
|
|
145
|
-
3. Log in to npm: `npm login`.
|
|
146
|
-
4. Publish: `npm publish`. (Scoped package is public thanks to `"publishConfig": { "access": "public" }`.)
|
|
147
|
-
|
|
148
|
-
### Registry / Vercel
|
|
89
|
+
## Publishing Flow
|
|
149
90
|
|
|
150
91
|
1. Make component changes in `registry/new-york/ui/` (and app previews as needed).
|
|
151
92
|
2. Update `registry.json` entries.
|