@cascivo/react 0.2.1 → 0.3.0

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 (5) hide show
  1. package/README.md +73 -5
  2. package/dist/index.d.ts +9 -1
  3. package/dist/index.js +22 -14
  4. package/package.json +8 -7
  5. 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>
package/dist/index.d.ts CHANGED
@@ -5,11 +5,18 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
5
5
  variant?: 'primary' | 'secondary' | 'ghost' | 'destructive';
6
6
  size?: 'sm' | 'md' | 'lg';
7
7
  loading?: boolean;
8
+ /**
9
+ * Render the single child element instead of a native `<button>` so the button
10
+ * styling lands on, e.g., a real `<a href>` (preserves middle-click / open-in-new-tab).
11
+ * The child owns its own content; the loading spinner is not rendered in this mode.
12
+ */
13
+ asChild?: boolean;
8
14
  }
9
15
  declare function Button({
10
16
  variant,
11
17
  size,
12
18
  loading,
19
+ asChild,
13
20
  className,
14
21
  disabled,
15
22
  children,
@@ -1242,7 +1249,8 @@ declare function AlertDialog({
1242
1249
  interface SheetProps {
1243
1250
  open: boolean;
1244
1251
  onClose: () => void;
1245
- title: string;
1252
+ /** Optional heading. Accepts rich nodes; when present it labels the dialog via `aria-labelledby`. */
1253
+ title?: ReactNode;
1246
1254
  children: ReactNode;
1247
1255
  side?: 'start' | 'end' | 'top' | 'bottom';
1248
1256
  }
package/dist/index.js CHANGED
@@ -22,19 +22,26 @@ function U({ size: e = "md", label: t, className: n, ...r }) {
22
22
  var W = { button: "_button_1l5my_2" };
23
23
  //#endregion
24
24
  //#region ../components/src/button/button.tsx
25
- function te({ variant: e = "primary", size: t = "md", loading: n = !1, className: r, disabled: i, children: a, ...o }) {
26
- return /* @__PURE__ */ N("button", {
25
+ function te({ variant: e = "primary", size: t = "md", loading: n = !1, asChild: r = !1, className: i, disabled: a, children: o, ...c }) {
26
+ let l = {
27
27
  "data-variant": e,
28
28
  "data-size": t,
29
29
  "data-state": n ? "loading" : "idle",
30
- className: u(W.button, r),
31
- disabled: i || n,
32
30
  "aria-busy": n || void 0,
33
- ...o,
31
+ className: u(W.button, i)
32
+ };
33
+ return r ? /* @__PURE__ */ M(s, {
34
+ ...l,
35
+ ...c,
36
+ children: o
37
+ }) : /* @__PURE__ */ N("button", {
38
+ ...l,
39
+ disabled: a || n,
40
+ ...c,
34
41
  children: [n && /* @__PURE__ */ M(U, {
35
42
  size: "sm",
36
43
  "aria-hidden": "true"
37
- }), /* @__PURE__ */ M("span", { children: a })]
44
+ }), /* @__PURE__ */ M("span", { children: o })]
38
45
  });
39
46
  }
40
47
  var G = {
@@ -3683,12 +3690,12 @@ var sr = {
3683
3690
  //#endregion
3684
3691
  //#region ../components/src/sheet/sheet.tsx
3685
3692
  function cr({ open: e, onClose: t, title: n, children: r, side: i = "end" }) {
3686
- let a = V(null), o = C(e);
3687
- o.value = e;
3688
- let s = V(t);
3689
- return s.current = t, w(() => {
3693
+ let a = V(null), o = B(), s = C(e);
3694
+ s.value = e;
3695
+ let c = V(t);
3696
+ return c.current = t, w(() => {
3690
3697
  let e = a.current;
3691
- if (e) if (o.value) try {
3698
+ if (e) if (s.value) try {
3692
3699
  e.showPopover();
3693
3700
  } catch {}
3694
3701
  else try {
@@ -3699,19 +3706,20 @@ function cr({ open: e, onClose: t, title: n, children: r, side: i = "end" }) {
3699
3706
  popover: "manual",
3700
3707
  role: "dialog",
3701
3708
  "aria-modal": "true",
3702
- "aria-label": n,
3709
+ "aria-labelledby": n == null ? void 0 : o,
3703
3710
  "data-state": e ? "open" : "closed",
3704
3711
  "data-side": i,
3705
3712
  className: sr.sheet,
3706
3713
  children: [/* @__PURE__ */ N("div", {
3707
3714
  className: sr.header,
3708
- children: [/* @__PURE__ */ M("span", {
3715
+ children: [n != null && /* @__PURE__ */ M("span", {
3716
+ id: o,
3709
3717
  className: sr.title,
3710
3718
  children: n
3711
3719
  }), /* @__PURE__ */ M("button", {
3712
3720
  type: "button",
3713
3721
  "aria-label": A(E.sheet.close),
3714
- onClick: () => s.current(),
3722
+ onClick: () => c.current(),
3715
3723
  className: sr.close,
3716
3724
  children: "✕"
3717
3725
  })]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cascivo/react",
3
- "version": "0.2.1",
3
+ "version": "0.3.0",
4
4
  "private": false,
5
5
  "description": "Prebuilt cascivo design system components — use without copying source",
6
6
  "keywords": [
@@ -13,13 +13,13 @@
13
13
  "signals",
14
14
  "ui"
15
15
  ],
16
- "homepage": "https://github.com/urbanisierung/cascivo/tree/main/packages/react#readme",
17
- "bugs": "https://github.com/urbanisierung/cascivo/issues",
16
+ "homepage": "https://github.com/cascivo/cascivo/tree/main/packages/react#readme",
17
+ "bugs": "https://github.com/cascivo/cascivo/issues",
18
18
  "license": "MIT",
19
19
  "author": "urbanisierung",
20
20
  "repository": {
21
21
  "type": "git",
22
- "url": "git+https://github.com/urbanisierung/cascivo.git",
22
+ "url": "git+https://github.com/cascivo/cascivo.git",
23
23
  "directory": "packages/react"
24
24
  },
25
25
  "files": [
@@ -36,15 +36,16 @@
36
36
  "import": "./dist/index.js",
37
37
  "default": "./dist/index.js"
38
38
  },
39
- "./styles.css": "./dist/cascivo.css"
39
+ "./styles.css": "./dist/cascivo.css",
40
+ "./package.json": "./package.json"
40
41
  },
41
42
  "publishConfig": {
42
43
  "access": "public",
43
44
  "provenance": true
44
45
  },
45
46
  "dependencies": {
46
- "@cascivo/core": "^0.1.1",
47
- "@cascivo/i18n": "^0.1.1"
47
+ "@cascivo/core": "^0.1.2",
48
+ "@cascivo/i18n": "^0.1.2"
48
49
  },
49
50
  "devDependencies": {
50
51
  "@testing-library/jest-dom": "^6.9.1",
package/readme.body.md CHANGED
@@ -4,6 +4,36 @@ want to customize component internals, use the copy-paste flow instead
4
4
  (`npx cascivo add <component>`); both consume the same tokens and themes, and
5
5
  can coexist in one project.
6
6
 
7
+ ## Install
8
+
9
+ ```sh
10
+ pnpm add @cascivo/react @cascivo/themes @preact/signals-react
11
+ ```
12
+
13
+ **Peer dependencies** (install them in your app): `react >=18`, `react-dom >=18`,
14
+ and `@preact/signals-react` — cascivo components are signal-driven, so the
15
+ signals runtime is required. `@cascivo/themes` is optional but recommended; it
16
+ supplies the tokens and themes the components read.
17
+
18
+ Charts live in a separate package — add [`@cascivo/charts`](https://github.com/cascivo/cascivo/tree/main/packages/charts)
19
+ for `LineChart`, `AreaChart`, `BarChart`, `Sparkline`, and more.
20
+
21
+ ### Framework setup (Next.js App Router)
22
+
23
+ In a Server Component file (e.g. `app/layout.tsx`), import the CSS once:
24
+
25
+ ```tsx
26
+ import '@cascivo/react/styles.css'
27
+ import '@cascivo/themes/all'
28
+ ```
29
+
30
+ Components ship with `'use client'` preserved in the bundle, so they work inside
31
+ RSC without any extra wrapper.
32
+
33
+ > **Note on the styles path:** the import specifier is `@cascivo/react/styles.css`,
34
+ > which the package's export map points at the dist file `cascivo.css`. Always
35
+ > import the `styles.css` specifier — never reference `cascivo.css` directly.
36
+
7
37
  ## Use
8
38
 
9
39
  ```tsx
@@ -63,12 +93,38 @@ declaration. Token names and aliases are documented in `TOKENS.md`.
63
93
  All components are client components (`'use client'` is preserved in the
64
94
  bundle), so the package works in Next.js App Router projects out of the box.
65
95
 
96
+ ## Guides
97
+
98
+ - [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).
99
+ - [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.
100
+ - [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.
101
+ - [Token reference](https://github.com/cascivo/cascivo/blob/main/docs/TOKENS.md) — every CSS custom property, canonical names, and aliases.
102
+
66
103
  ## Migrating from shadcn/ui?
67
104
 
68
- See [`MIGRATING-FROM-SHADCN.md`](https://github.com/urbanisierung/cascivo/blob/main/docs/MIGRATING-FROM-SHADCN.md)
105
+ See [`MIGRATING-FROM-SHADCN.md`](https://github.com/cascivo/cascivo/blob/main/docs/MIGRATING-FROM-SHADCN.md)
69
106
  for the variant/prop mapping (e.g. Button `default/outline` → `primary/secondary`,
70
107
  there is no `outline`) and the CSS-setup delta vs Tailwind.
71
108
 
109
+ ## Gotchas — naming collisions
110
+
111
+ A handful of exported component names shadow common DOM, browser, or Next.js
112
+ globals. When you import them, alias the import (or import the cascivo name
113
+ explicitly) to avoid clashing with the platform identifier:
114
+
115
+ | cascivo export | Collides with | Suggested alias |
116
+ | ---------------- | ----------------------------------------- | ---------------------------------------------------------- |
117
+ | `Image` | `next/image`, the DOM `Image` constructor | `import { Image as CascivoImage } from '@cascivo/react'` |
118
+ | `Link` | `next/link` | `import { Link as CascivoLink } from '@cascivo/react'` |
119
+ | `Header` | the `<header>` element / app headers | `import { Header as CascivoHeader } from '@cascivo/react'` |
120
+ | `Search` | various router/search helpers | `import { Search as CascivoSearch } from '@cascivo/react'` |
121
+ | `User`, `Status` | domain models in many apps | alias as needed |
122
+ | `Tag` | exported as the cascivo `Tag` chip | already namespaced — import directly |
123
+
124
+ Editor auto-import will sometimes pick the wrong `Image`/`Link`; if styles or
125
+ routing break after adding one of these, check that the import resolves to
126
+ `@cascivo/react`.
127
+
72
128
  <!-- COMPONENT_INDEX:START -->
73
129
 
74
130
  ## Component index