@cascivo/react 0.2.1 → 0.3.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.
Files changed (6) hide show
  1. package/README.md +73 -5
  2. package/dist/cascivo.css +1 -1
  3. package/dist/index.d.ts +42 -4
  4. package/dist/index.js +1078 -964
  5. package/package.json +8 -7
  6. package/readme.body.md +57 -1
package/README.md CHANGED
@@ -1,10 +1,20 @@
1
1
  <!-- generated by scripts/readme/generate.ts — edit readme.body.md, not this file -->
2
2
 
3
- # @cascivo/react
3
+ <div align="center">
4
+ <a href="https://cascivo.com"><img src="https://cascivo.com/favicon.svg" width="72" height="72" alt="cascivo logo"></a>
5
+ <h1>@cascivo/react</h1>
6
+ <p><strong>Prebuilt cascivo design system components — use without copying source</strong></p>
4
7
 
5
- > Prebuilt cascivo design system components — use without copying source
8
+ [![npm](https://img.shields.io/npm/v/%40cascivo%2Freact?style=flat-square&color=0079bf)](https://www.npmjs.com/package/@cascivo/react)
9
+ [![downloads](https://img.shields.io/npm/dm/%40cascivo%2Freact?style=flat-square&color=0079bf)](https://www.npmjs.com/package/@cascivo/react)
10
+ [![license](https://img.shields.io/npm/l/%40cascivo%2Freact?style=flat-square&color=0079bf)](https://github.com/cascivo/cascivo/blob/main/LICENSE)
11
+ ![types](https://img.shields.io/badge/types-included-0079bf?style=flat-square&logo=typescript&logoColor=white)
6
12
 
7
- [cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/urbanisierung/cascivo)
13
+ [npm](https://www.npmjs.com/package/@cascivo/react) · [cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/cascivo/cascivo)
14
+
15
+ </div>
16
+
17
+ ---
8
18
 
9
19
  Every cascivo component, prebuilt as a normal installable library — for users
10
20
  who just want to **use** the design system without owning the source. If you
@@ -12,6 +22,36 @@ want to customize component internals, use the copy-paste flow instead
12
22
  (`npx cascivo add <component>`); both consume the same tokens and themes, and
13
23
  can coexist in one project.
14
24
 
25
+ ## Install
26
+
27
+ ```sh
28
+ pnpm add @cascivo/react @cascivo/themes @preact/signals-react
29
+ ```
30
+
31
+ **Peer dependencies** (install them in your app): `react >=18`, `react-dom >=18`,
32
+ and `@preact/signals-react` — cascivo components are signal-driven, so the
33
+ signals runtime is required. `@cascivo/themes` is optional but recommended; it
34
+ supplies the tokens and themes the components read.
35
+
36
+ Charts live in a separate package — add [`@cascivo/charts`](https://github.com/cascivo/cascivo/tree/main/packages/charts)
37
+ for `LineChart`, `AreaChart`, `BarChart`, `Sparkline`, and more.
38
+
39
+ ### Framework setup (Next.js App Router)
40
+
41
+ In a Server Component file (e.g. `app/layout.tsx`), import the CSS once:
42
+
43
+ ```tsx
44
+ import '@cascivo/react/styles.css'
45
+ import '@cascivo/themes/all'
46
+ ```
47
+
48
+ Components ship with `'use client'` preserved in the bundle, so they work inside
49
+ RSC without any extra wrapper.
50
+
51
+ > **Note on the styles path:** the import specifier is `@cascivo/react/styles.css`,
52
+ > which the package's export map points at the dist file `cascivo.css`. Always
53
+ > import the `styles.css` specifier — never reference `cascivo.css` directly.
54
+
15
55
  ## Use
16
56
 
17
57
  ```tsx
@@ -71,12 +111,38 @@ declaration. Token names and aliases are documented in `TOKENS.md`.
71
111
  All components are client components (`'use client'` is preserved in the
72
112
  bundle), so the package works in Next.js App Router projects out of the box.
73
113
 
114
+ ## Guides
115
+
116
+ - [Theming & branding](https://github.com/cascivo/cascivo/blob/main/docs/THEMING.md) — match a brand by overriding tokens (layer cascade, the `data-theme` specificity footgun, per-role radius/control-height tokens, a starter theme).
117
+ - [Using cascivo with Preact](https://github.com/cascivo/cascivo/blob/main/docs/USING-WITH-PREACT.md) — `preact/compat` alias, tsconfig paths, peer deps, signals package. It works — this documents how.
118
+ - [Compatibility & support matrix](https://github.com/cascivo/cascivo/blob/main/docs/COMPATIBILITY.md) — frameworks, browsers, the build-tooling baseline, and which package versions go together.
119
+ - [Token reference](https://github.com/cascivo/cascivo/blob/main/docs/TOKENS.md) — every CSS custom property, canonical names, and aliases.
120
+
74
121
  ## Migrating from shadcn/ui?
75
122
 
76
- See [`MIGRATING-FROM-SHADCN.md`](https://github.com/urbanisierung/cascivo/blob/main/docs/MIGRATING-FROM-SHADCN.md)
123
+ See [`MIGRATING-FROM-SHADCN.md`](https://github.com/cascivo/cascivo/blob/main/docs/MIGRATING-FROM-SHADCN.md)
77
124
  for the variant/prop mapping (e.g. Button `default/outline` → `primary/secondary`,
78
125
  there is no `outline`) and the CSS-setup delta vs Tailwind.
79
126
 
127
+ ## Gotchas — naming collisions
128
+
129
+ A handful of exported component names shadow common DOM, browser, or Next.js
130
+ globals. When you import them, alias the import (or import the cascivo name
131
+ explicitly) to avoid clashing with the platform identifier:
132
+
133
+ | cascivo export | Collides with | Suggested alias |
134
+ | ---------------- | ----------------------------------------- | ---------------------------------------------------------- |
135
+ | `Image` | `next/image`, the DOM `Image` constructor | `import { Image as CascivoImage } from '@cascivo/react'` |
136
+ | `Link` | `next/link` | `import { Link as CascivoLink } from '@cascivo/react'` |
137
+ | `Header` | the `<header>` element / app headers | `import { Header as CascivoHeader } from '@cascivo/react'` |
138
+ | `Search` | various router/search helpers | `import { Search as CascivoSearch } from '@cascivo/react'` |
139
+ | `User`, `Status` | domain models in many apps | alias as needed |
140
+ | `Tag` | exported as the cascivo `Tag` chip | already namespaced — import directly |
141
+
142
+ Editor auto-import will sometimes pick the wrong `Image`/`Link`; if styles or
143
+ routing break after adding one of these, check that the import resolves to
144
+ `@cascivo/react`.
145
+
80
146
  <!-- COMPONENT_INDEX:START -->
81
147
 
82
148
  ## Component index
@@ -279,4 +345,6 @@ pnpm add @cascivo/react
279
345
 
280
346
  ---
281
347
 
282
- [cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/urbanisierung/cascivo) · AI agents: use [`@cascivo/mcp`](https://github.com/urbanisierung/cascivo/tree/main/packages/mcp) and [`registry.json`](https://github.com/urbanisierung/cascivo/blob/main/registry.json) · MIT
348
+ [cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/cascivo/cascivo) · AI agents: use [`@cascivo/mcp`](https://github.com/cascivo/cascivo/tree/main/packages/mcp) and [`registry.json`](https://github.com/cascivo/cascivo/blob/main/registry.json) · MIT
349
+
350
+ <div align="center"><a href="https://cascivo.com"><img src="https://cascivo.com/favicon.svg" width="28" height="28" alt="cascivo"></a></div>