@tomny-dev/uzi 0.1.8 → 0.1.9-pr.2.2.1
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 +32 -3
- package/dist/index.cjs +600 -261
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +405 -45
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +75 -15
- package/dist/index.d.ts +75 -15
- package/dist/index.js +586 -251
- package/dist/index.js.map +1 -1
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -20,6 +20,23 @@ If you want the packaged component styles, import the exported stylesheet once i
|
|
|
20
20
|
@import "@tomny-dev/uzi/styles.css";
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
+
## Using With Coding Agents
|
|
24
|
+
|
|
25
|
+
Installing `@tomny-dev/uzi` in an app does not by itself cause Claude Code, Codex, or similar agents to prefer `uzi` components. You should add that policy to the consumer repo's agent guidance.
|
|
26
|
+
|
|
27
|
+
Recommended snippet for the consumer repo's `CLAUDE.md`, `AGENTS.md`, or equivalent:
|
|
28
|
+
|
|
29
|
+
```md
|
|
30
|
+
## UI Components
|
|
31
|
+
|
|
32
|
+
- Prefer `@tomny-dev/uzi` for shared UI primitives and layout components.
|
|
33
|
+
- Check `uzi` before creating new local primitives such as buttons, inputs, labels, cards, modals, selects, dropdown menus, alerts, shells, navigation, and theme controls.
|
|
34
|
+
- Only introduce a repo-local primitive when `uzi` lacks the required behavior or when the local file is intentionally app-specific composition.
|
|
35
|
+
- Keep imports consistent with the surrounding area of the codebase. If the repo already uses thin wrappers around `uzi`, follow that local pattern.
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
If you want agents to discover props and examples directly, also configure the `uzi` MCP server. See [`mcp/README.md`](./mcp/README.md).
|
|
39
|
+
|
|
23
40
|
## Themes
|
|
24
41
|
|
|
25
42
|
`uzi` ships with built-in light/dark tokens and a small accent palette layer.
|
|
@@ -68,6 +85,16 @@ Supported accent palettes:
|
|
|
68
85
|
- `amber`
|
|
69
86
|
- `rose`
|
|
70
87
|
|
|
88
|
+
## Component Philosophy
|
|
89
|
+
|
|
90
|
+
`uzi` is not meant to be a from-scratch accessibility framework.
|
|
91
|
+
|
|
92
|
+
- Use native HTML for simple form controls when the platform already gives the right behavior.
|
|
93
|
+
- Use Radix for interaction-heavy primitives such as menus, dialogs, popovers, toasts, and custom selects.
|
|
94
|
+
- Use `uzi` for the public component API, styling, tokens, and higher-level templates like `TopBar`, `SidebarNav`, and `AppShell`.
|
|
95
|
+
|
|
96
|
+
In practice, `uzi` should spend its complexity budget on reusable app scaffolding and cohesive design, not on rebuilding low-level widget behavior that Radix or the browser already solves.
|
|
97
|
+
|
|
71
98
|
## Components
|
|
72
99
|
|
|
73
100
|
| Component | Description |
|
|
@@ -78,16 +105,18 @@ Supported accent palettes:
|
|
|
78
105
|
| `Checkbox` | Checkbox form primitive |
|
|
79
106
|
| `Input` | Text input primitive |
|
|
80
107
|
| `Label` | Form label primitive |
|
|
108
|
+
| `MultiSelect` | Custom multi-option picker with checkbox-style menu |
|
|
81
109
|
| `Pill` | Inline badge/tag |
|
|
82
|
-
| `Modal` |
|
|
83
|
-
| `
|
|
110
|
+
| `Modal` | Radix-backed overlay dialog |
|
|
111
|
+
| `Select` | Styled Radix-based single-select field |
|
|
112
|
+
| `Dropdown` | Deprecated compatibility alias for Select |
|
|
84
113
|
| `DropdownMenu` | Radix-based action menu primitives |
|
|
85
114
|
| `AppShell` | Responsive layout with collapsible sidebar |
|
|
86
115
|
| `SidebarNav` | Sidebar navigation list |
|
|
87
116
|
| `TopBar` | Composable header shell for brand, nav triggers, and actions |
|
|
88
117
|
| `ThemeToggleButton` | Reusable light/dark toggle wired to `ThemeProvider` |
|
|
89
118
|
| `ThemeProvider` / `useTheme` | Light/dark + accent palette theming |
|
|
90
|
-
| `ToastProvider` / `useToast` |
|
|
119
|
+
| `ToastProvider` / `useToast` | Radix-backed toast notification system |
|
|
91
120
|
|
|
92
121
|
`TopBar` supports:
|
|
93
122
|
|