@bysages/react 0.0.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 +9 -9
- package/dist/index.d.mts +1108 -94
- package/dist/index.mjs +2523 -9752
- package/package.json +7 -3
package/README.md
CHANGED
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
> By Sages Elements for React —
|
|
7
|
+
> By Sages Elements for React — 90+ accessible component families, headless by construction, dressed by the paper-and-ink style layer. Ported from the Vue reference implementation, API for API.
|
|
8
8
|
|
|
9
9
|
## Features
|
|
10
10
|
|
|
11
|
-
- 🧩 **
|
|
11
|
+
- 🧩 **90+ families** — actions, forms, overlays, navigation, data, layout, and an AI conversation family on ai-sdk formats
|
|
12
12
|
- 🏛️ **Headless inside** — interaction, state, ARIA, and positioning come from proven headless state machines; wrappers add API narrowing and style injection, no DOM of their own
|
|
13
13
|
- 🎨 **Token-styled** — every visual value is a CSS custom property from `@bysages/core`; light/dark, accent pigments, contrast and density tiers are data, never hardcoded styles
|
|
14
14
|
- 📦 **Container-driven** — components respond to `@container`, not the viewport; the same component composes in a sidebar, a card, or a page
|
|
@@ -19,26 +19,26 @@
|
|
|
19
19
|
|
|
20
20
|
```bash
|
|
21
21
|
# pnpm
|
|
22
|
-
pnpm add @bysages/react
|
|
22
|
+
pnpm add @bysages/react
|
|
23
23
|
|
|
24
24
|
# npm
|
|
25
|
-
npm install @bysages/react
|
|
25
|
+
npm install @bysages/react
|
|
26
26
|
|
|
27
27
|
# yarn
|
|
28
|
-
yarn add @bysages/react
|
|
28
|
+
yarn add @bysages/react
|
|
29
29
|
|
|
30
30
|
# bun
|
|
31
|
-
bun add @bysages/react
|
|
31
|
+
bun add @bysages/react
|
|
32
32
|
```
|
|
33
33
|
|
|
34
34
|
## Quick Start
|
|
35
35
|
|
|
36
|
-
|
|
36
|
+
Theme the document, then use the components — the component import
|
|
37
|
+
carries the whole token layer in with it:
|
|
37
38
|
|
|
38
39
|
```tsx
|
|
39
40
|
// main.tsx
|
|
40
|
-
import "@bysages/
|
|
41
|
-
import { applyTheme } from "@bysages/core";
|
|
41
|
+
import { applyTheme } from "@bysages/react";
|
|
42
42
|
|
|
43
43
|
applyTheme({ mode: "system", accent: "ink" });
|
|
44
44
|
```
|