@bysages/solid 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 CHANGED
@@ -4,11 +4,11 @@
4
4
  ![npm downloads](https://img.shields.io/npm/dw/@bysages/solid)
5
5
  ![npm license](https://img.shields.io/npm/l/@bysages/solid)
6
6
 
7
- > By Sages Elements for Solid — 70+ accessible component families, headless by construction, dressed by the paper-and-ink style layer.
7
+ > By Sages Elements for Solid — 90+ accessible component families, headless by construction, dressed by the paper-and-ink style layer.
8
8
 
9
9
  ## Features
10
10
 
11
- - 🧩 **70+ families** — actions, forms, overlays, navigation, data, layout, and an AI conversation family on ai-sdk formats
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
@@ -33,13 +33,13 @@ bun add @bysages/solid @bysages/core
33
33
 
34
34
  ## Quick Start
35
35
 
36
- Import the token stylesheet once, theme the document, then use the components:
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
  // index.tsx
40
- import "@bysages/tokens/css";
41
41
  import { render } from "solid-js/web";
42
- import { applyTheme } from "@bysages/core";
42
+ import { applyTheme } from "@bysages/solid";
43
43
  import { Dialog } from "@bysages/solid";
44
44
 
45
45
  applyTheme({ mode: "system", accent: "ink" });