@refineui/react 0.0.1 → 0.0.2
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 +103 -0
- package/dist/spec/contract-index.json +1 -1
- package/dist/spec/token-trace-v2.json +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
# @refineui/react
|
|
2
|
+
|
|
3
|
+
Accessible React components for [RefineUI](https://ui.pelagornis.com) — composed from `@refineui/tokens`, shipped with a machine-readable component contract.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @refineui/react @refineui/tokens
|
|
9
|
+
yarn add @refineui/react @refineui/tokens
|
|
10
|
+
pnpm add @refineui/react @refineui/tokens
|
|
11
|
+
bun add @refineui/react @refineui/tokens
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
React 18+ and `react-dom` 18+ are required as peers.
|
|
15
|
+
|
|
16
|
+
## Stylesheet
|
|
17
|
+
|
|
18
|
+
Load token CSS, system icons, and component interaction styles once at the app root:
|
|
19
|
+
|
|
20
|
+
```css
|
|
21
|
+
@import "@refineui/tokens/tailwind.css";
|
|
22
|
+
@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";
|
|
23
|
+
@import "@refineui/react/refineui.css";
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
Or in JS:
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import "@refineui/react/refineui.css";
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
`refineui.css` carries the pseudo-state layer (`:hover`, `:focus-visible`, `data-state`), so components render unstyled interactions without it.
|
|
33
|
+
|
|
34
|
+
## Usage
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import { Button, Card, Input } from "@refineui/react";
|
|
38
|
+
|
|
39
|
+
export function Example() {
|
|
40
|
+
return (
|
|
41
|
+
<Card>
|
|
42
|
+
<Input placeholder="Email" type="email" />
|
|
43
|
+
<Button variant="primary" type="button">
|
|
44
|
+
Continue
|
|
45
|
+
</Button>
|
|
46
|
+
</Card>
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
Subcomponents compose explicitly — there are no convenience props such as `title`, `items`, or `actions`:
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
import {
|
|
55
|
+
Alert,
|
|
56
|
+
AlertBody,
|
|
57
|
+
AlertDescription,
|
|
58
|
+
AlertIcon,
|
|
59
|
+
AlertRow,
|
|
60
|
+
AlertTitle,
|
|
61
|
+
} from "@refineui/react";
|
|
62
|
+
|
|
63
|
+
<Alert variant="warning">
|
|
64
|
+
<AlertRow>
|
|
65
|
+
<AlertIcon />
|
|
66
|
+
<AlertBody>
|
|
67
|
+
<AlertTitle>Storage almost full</AlertTitle>
|
|
68
|
+
<AlertDescription>Free up space to keep syncing.</AlertDescription>
|
|
69
|
+
</AlertBody>
|
|
70
|
+
</AlertRow>
|
|
71
|
+
</Alert>;
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Component Spec
|
|
75
|
+
|
|
76
|
+
Every component ships a behavior contract — anatomy, variants, states, DOM attributes, accessibility, keyboard, focus, and layout direction:
|
|
77
|
+
|
|
78
|
+
```
|
|
79
|
+
spec/manifest.json # catalog of all component specs
|
|
80
|
+
spec/components/*.json # one contract per component
|
|
81
|
+
spec/schema/*.json # JSON Schema for the contract shape
|
|
82
|
+
dist/spec/contract-index.json
|
|
83
|
+
dist/spec/token-trace-v2.json
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
These files are what [`@refineui/doctor`](https://www.npmjs.com/package/@refineui/doctor) validates against and what [`@refineui/mcp`](https://www.npmjs.com/package/@refineui/mcp) serves to agents. See `spec/README.md` for the contract layer status.
|
|
87
|
+
|
|
88
|
+
## Conventions
|
|
89
|
+
|
|
90
|
+
- Root elements carry `data-refineui`; component states carry `data-state`.
|
|
91
|
+
- Color, spacing, radius, stroke, typography, shadow, z-index, and motion come from tokens only.
|
|
92
|
+
- Focus rings use `:focus-visible` with `--refineui-focus-ring-*`.
|
|
93
|
+
- Motion collapses under `prefers-reduced-motion`; forced-colors mode maps to system colors.
|
|
94
|
+
- Layout uses logical properties (`ps`/`pe`/`ms`/`me`) so RTL works without overrides.
|
|
95
|
+
|
|
96
|
+
## Development
|
|
97
|
+
|
|
98
|
+
```bash
|
|
99
|
+
bun run build # utilities → tokens → tsup → refineui.css → component spec
|
|
100
|
+
bun run dev # tsup --watch
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
Docs: [ui.pelagornis.com/components](https://ui.pelagornis.com/components/) · AI context: [`llm.txt`](https://ui.pelagornis.com/llm.txt)
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"contractLayer": "component-spec",
|
|
4
4
|
"contractLayerVersion": "1.1",
|
|
5
5
|
"status": "catalog",
|
|
6
|
-
"generatedAt": "2026-09-
|
|
6
|
+
"generatedAt": "2026-09-08T17:24:33.830Z",
|
|
7
7
|
"role": "Behavior and DOM contracts — source of truth for Doctor, MCP, and Docs",
|
|
8
8
|
"files": {
|
|
9
9
|
"manifest": "./manifest.json",
|