@usevyre/react 0.1.0 → 0.1.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 +101 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
# @usevyre/react
|
|
2
|
+
|
|
3
|
+
> React + TypeScript components for the useVyre design system — AI-native, accessible, zero runtime styling.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@usevyre/react)
|
|
6
|
+
[](../../LICENSE)
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @usevyre/tokens @usevyre/react
|
|
12
|
+
# or
|
|
13
|
+
pnpm add @usevyre/tokens @usevyre/react
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Setup
|
|
17
|
+
|
|
18
|
+
Import once at your app entry point:
|
|
19
|
+
|
|
20
|
+
```ts
|
|
21
|
+
// main.tsx
|
|
22
|
+
import "@usevyre/tokens/css"; // design tokens — required
|
|
23
|
+
import "@usevyre/react/styles"; // component styles — required
|
|
24
|
+
|
|
25
|
+
import { StrictMode } from "react";
|
|
26
|
+
import { createRoot } from "react-dom/client";
|
|
27
|
+
import { ToastProvider } from "@usevyre/react";
|
|
28
|
+
import App from "./App";
|
|
29
|
+
|
|
30
|
+
createRoot(document.getElementById("root")!).render(
|
|
31
|
+
<StrictMode>
|
|
32
|
+
<ToastProvider>
|
|
33
|
+
<App />
|
|
34
|
+
</ToastProvider>
|
|
35
|
+
</StrictMode>
|
|
36
|
+
);
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Usage
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import { Button, Badge, Card, CardHeader, CardBody, CardFooter } from "@usevyre/react";
|
|
43
|
+
|
|
44
|
+
export function ProfileCard() {
|
|
45
|
+
return (
|
|
46
|
+
<Card variant="elevated">
|
|
47
|
+
<CardHeader>
|
|
48
|
+
<Badge variant="success" dot>Active</Badge>
|
|
49
|
+
</CardHeader>
|
|
50
|
+
<CardBody>
|
|
51
|
+
<p>Ready to ship.</p>
|
|
52
|
+
</CardBody>
|
|
53
|
+
<CardFooter>
|
|
54
|
+
<Button variant="accent">Save changes</Button>
|
|
55
|
+
</CardFooter>
|
|
56
|
+
</Card>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Components
|
|
62
|
+
|
|
63
|
+
| Component | Description |
|
|
64
|
+
|-----------|-------------|
|
|
65
|
+
| `Button` | `primary · secondary · ghost · accent · teal · danger` |
|
|
66
|
+
| `Badge` | `default · accent · teal · success · warning · danger` |
|
|
67
|
+
| `Card` | `default · elevated · outlined · ghost · accent` |
|
|
68
|
+
| `Input` / `Textarea` / `Field` | Form inputs with label, hint, and validation states |
|
|
69
|
+
| `Modal` | Dialog overlay with focus trap |
|
|
70
|
+
| `Select` | Accessible dropdown with keyboard navigation |
|
|
71
|
+
| `Tabs` | WAI-ARIA tab navigation |
|
|
72
|
+
| `Toast` / `useToast` | Toast notifications via context |
|
|
73
|
+
| `Tooltip` | Hover/focus tooltip with placement options |
|
|
74
|
+
| `Accordion` | Collapsible sections |
|
|
75
|
+
| `Avatar` | User avatar with image fallback and status dot |
|
|
76
|
+
| `Checkbox` / `Switch` / `Slider` | Form controls |
|
|
77
|
+
| `Popover` / `DropdownMenu` | Floating UI panels |
|
|
78
|
+
| `Alert` / `AlertDialog` | Inline and blocking alerts |
|
|
79
|
+
| `Sheet` | Slide-in panel overlay |
|
|
80
|
+
| `Sidebar` / `AppLayout` | Full app shell layout |
|
|
81
|
+
| `Command` | Command palette with search |
|
|
82
|
+
| `Calendar` / `DatePicker` | Date selection |
|
|
83
|
+
| `Table` | Data table |
|
|
84
|
+
| `Breadcrumb` / `Pagination` | Navigation |
|
|
85
|
+
| `Skeleton` / `Progress` / `Separator` | Utility components |
|
|
86
|
+
| `Text` / `Heading` / `Lead` / `Code` | Typography |
|
|
87
|
+
|
|
88
|
+
Full component docs → [usevyre.com/docs/getting-started](https://usevyre.com/docs/getting-started)
|
|
89
|
+
|
|
90
|
+
## Peer dependencies
|
|
91
|
+
|
|
92
|
+
```json
|
|
93
|
+
{
|
|
94
|
+
"react": ">=18.0.0",
|
|
95
|
+
"react-dom": ">=18.0.0"
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## License
|
|
100
|
+
|
|
101
|
+
MIT © [Gapra](https://gapra.dev)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@usevyre/react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "useVyre React components — AI-native, accessible, zero-runtime styling",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design-system",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"ai-native",
|
|
10
10
|
"vyre"
|
|
11
11
|
],
|
|
12
|
-
"homepage": "https://usevyre.com/docs/
|
|
12
|
+
"homepage": "https://usevyre.com/docs/getting-started",
|
|
13
13
|
"repository": {
|
|
14
14
|
"type": "git",
|
|
15
15
|
"url": "https://github.com/gapra/usevyre"
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"vite": "^5.4.0"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@usevyre/tokens": "0.1.
|
|
46
|
+
"@usevyre/tokens": "0.1.1"
|
|
47
47
|
},
|
|
48
48
|
"scripts": {
|
|
49
49
|
"build": "vite build && tsc --project tsconfig.build.json",
|