@cascivo/react 0.6.3 → 0.7.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 +14 -5
- package/dist/breadcrumb/breadcrumb.js +15 -15
- package/dist/card/card.css +1 -1
- package/dist/card/card.module.js +5 -5
- package/dist/data-table/data-table.css +1 -1
- package/dist/data-table/data-table.module.js +29 -29
- package/dist/dock/dock.js +21 -21
- package/dist/header/header.js +20 -20
- package/dist/index.d.ts +26 -1
- package/dist/layouts/src/columns/columns.css +1 -1
- package/dist/layouts/src/columns/columns.js +7 -3
- package/dist/layouts/src/columns/columns.module.js +4 -1
- package/dist/layouts/src/grid/grid.css +1 -1
- package/dist/layouts/src/grid/grid.js +6 -3
- package/dist/layouts/src/grid/grid.module.js +3 -2
- package/dist/navigation-menu/navigation-menu.js +54 -50
- package/dist/relative-time/relative-time.js +2 -1
- package/dist/search/search.css +1 -1
- package/dist/search/search.module.js +5 -5
- package/dist/shell-header/shell-header.js +63 -63
- package/dist/side-nav/side-nav.js +127 -120
- package/dist/styles.css +6 -6
- package/dist/switcher/switcher.js +13 -11
- package/dist/toast/toast.css +1 -1
- package/dist/toast/toast.module.js +7 -7
- package/dist/toc/use-toc-from-region.js +8 -7
- package/package.json +3 -3
- package/readme.body.md +13 -4
|
@@ -1,24 +1,26 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import e from "./switcher.module.js";
|
|
4
|
-
import { cn as t,
|
|
5
|
-
import { builtin as
|
|
6
|
-
import { jsx as
|
|
4
|
+
import { cn as t, getLinkComponent as n, useSignals as r } from "@cascivo/core";
|
|
5
|
+
import { builtin as i, t as a } from "@cascivo/i18n";
|
|
6
|
+
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
7
7
|
//#region ../components/src/switcher/switcher.tsx
|
|
8
|
-
function
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
function c({ items: c, label: l, className: u }) {
|
|
9
|
+
r();
|
|
10
|
+
let d = n();
|
|
11
|
+
return /* @__PURE__ */ o("ul", {
|
|
12
|
+
"aria-label": l ?? a(i.switcher.label),
|
|
13
|
+
className: t(e.switcher, u),
|
|
14
|
+
children: c.map((t, n) => "divider" in t ? /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o("span", {
|
|
13
15
|
role: "separator",
|
|
14
16
|
"aria-orientation": "horizontal",
|
|
15
17
|
className: e.divider
|
|
16
|
-
}) }, `divider-${n}`) : /* @__PURE__ */
|
|
18
|
+
}) }, `divider-${n}`) : /* @__PURE__ */ o("li", { children: /* @__PURE__ */ s(d, {
|
|
17
19
|
href: t.href,
|
|
18
20
|
"aria-current": t.active ? "page" : void 0,
|
|
19
21
|
"data-state": t.active ? "active" : void 0,
|
|
20
22
|
className: e.item,
|
|
21
|
-
children: [t.icon && /* @__PURE__ */
|
|
23
|
+
children: [t.icon && /* @__PURE__ */ o("span", {
|
|
22
24
|
className: e.icon,
|
|
23
25
|
"aria-hidden": "true",
|
|
24
26
|
children: t.icon
|
|
@@ -27,4 +29,4 @@ function s({ items: s, label: c, className: l }) {
|
|
|
27
29
|
});
|
|
28
30
|
}
|
|
29
31
|
//#endregion
|
|
30
|
-
export {
|
|
32
|
+
export { c as Switcher };
|
package/dist/toast/toast.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer cascivo.component{.
|
|
1
|
+
@layer cascivo.component{._viewport_cshyp_2{z-index:var(--cascivo-z-toast);gap:var(--cascivo-space-2);inline-size:min(24rem, calc(100vw - var(--cascivo-space-8)));pointer-events:none;flex-direction:column;display:flex;position:fixed;inset-block-end:var(--cascivo-space-4);inset-inline-end:var(--cascivo-space-4)}@media (width<=30rem){._viewport_cshyp_2{inset-inline:var(--cascivo-space-4);inline-size:auto}}._toast_cshyp_23{align-items:flex-start;gap:var(--cascivo-space-3);padding:var(--cascivo-space-4);max-inline-size:calc(min(28rem, 100vw) - var(--cascivo-space-4,1rem));background-color:var(--cascivo-color-surface-overlay);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-overlay);pointer-events:auto;opacity:1;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter);display:flex;translate:0}@starting-style{._toast_cshyp_23{opacity:0;translate:0 var(--cascivo-space-4)}}._toast_cshyp_23[data-state=dismissing],._toast_cshyp_23[data-state=gone]{opacity:0;translate:0 var(--cascivo-space-4);transition:opacity var(--cascivo-motion-exit), translate var(--cascivo-motion-exit)}._toast_cshyp_23[data-variant=success]{border-color:color-mix(in oklch, var(--cascivo-color-success) 35%, var(--cascivo-color-border))}._toast_cshyp_23[data-variant=success] ._icon_cshyp_62,._toast_cshyp_23[data-variant=success] ._title_cshyp_63{color:var(--cascivo-color-success)}._toast_cshyp_23[data-variant=warning]{border-color:color-mix(in oklch, var(--cascivo-color-warning) 35%, var(--cascivo-color-border))}._toast_cshyp_23[data-variant=warning] ._icon_cshyp_62,._toast_cshyp_23[data-variant=warning] ._title_cshyp_63{color:var(--cascivo-color-warning)}._toast_cshyp_23[data-variant=destructive]{border-color:color-mix(in oklch, var(--cascivo-color-destructive) 35%, var(--cascivo-color-border))}._toast_cshyp_23[data-variant=destructive] ._icon_cshyp_62,._toast_cshyp_23[data-variant=destructive] ._title_cshyp_63{color:var(--cascivo-color-destructive)}._body_cshyp_92{gap:var(--cascivo-space-1);flex-direction:column;flex:1;min-inline-size:0;display:flex}._title_cshyp_63{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-snug)}._description_cshyp_108{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-normal)}._close_cshyp_115{block-size:1.5rem;inline-size:1.5rem;font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-muted);border-radius:var(--cascivo-radius-control);cursor:pointer;transition:color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}._close_cshyp_115:hover{color:var(--cascivo-color-text)}._close_cshyp_115:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}}@media (forced-colors:active){._toast_cshyp_23{border:1px solid canvastext}._close_cshyp_115:focus-visible{outline-offset:2px;outline:2px solid highlight}}
|
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
import './toast.css';
|
|
4
4
|
var e = {
|
|
5
|
-
viewport: "
|
|
6
|
-
toast: "
|
|
7
|
-
icon: "
|
|
8
|
-
title: "
|
|
9
|
-
body: "
|
|
10
|
-
description: "
|
|
11
|
-
close: "
|
|
5
|
+
viewport: "_viewport_cshyp_2",
|
|
6
|
+
toast: "_toast_cshyp_23",
|
|
7
|
+
icon: "_icon_cshyp_62",
|
|
8
|
+
title: "_title_cshyp_63",
|
|
9
|
+
body: "_body_cshyp_92",
|
|
10
|
+
description: "_description_cshyp_108",
|
|
11
|
+
close: "_close_cshyp_115"
|
|
12
12
|
};
|
|
13
13
|
//#endregion
|
|
14
14
|
export { e as default };
|
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import { useSignal as e, useSignalEffect as t } from "@cascivo/core";
|
|
3
|
+
import { useSignal as e, useSignalEffect as t, useSignals as n } from "@cascivo/core";
|
|
4
4
|
//#region ../components/src/toc/use-toc-from-region.ts
|
|
5
|
-
function
|
|
6
|
-
|
|
5
|
+
function r(r, i = {}) {
|
|
6
|
+
n();
|
|
7
|
+
let a = i.selector ?? "h2, h3, h4", o = e([]);
|
|
7
8
|
return t(() => {
|
|
8
|
-
let e =
|
|
9
|
-
e && (
|
|
9
|
+
let e = r.current;
|
|
10
|
+
e && (o.value = Array.from(e.querySelectorAll(a)).filter((e) => e.id !== "").map((e) => ({
|
|
10
11
|
id: e.id,
|
|
11
12
|
label: e.textContent?.trim() ?? "",
|
|
12
13
|
level: Number(e.tagName.slice(1)) || 2
|
|
13
14
|
})));
|
|
14
|
-
}),
|
|
15
|
+
}), o;
|
|
15
16
|
}
|
|
16
17
|
//#endregion
|
|
17
|
-
export {
|
|
18
|
+
export { r as useTocFromRegion };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cascivo/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Prebuilt cascivo design system components — use without copying source",
|
|
6
6
|
"keywords": [
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"provenance": true
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@cascivo/core": "^0.
|
|
48
|
-
"@cascivo/i18n": "^0.2.
|
|
47
|
+
"@cascivo/core": "^0.4.0",
|
|
48
|
+
"@cascivo/i18n": "^0.2.7"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@testing-library/jest-dom": "^6.9.1",
|
package/readme.body.md
CHANGED
|
@@ -35,9 +35,18 @@ Components ship with `'use client'` preserved in the bundle, so they work inside
|
|
|
35
35
|
RSC without any extra wrapper.
|
|
36
36
|
|
|
37
37
|
> **No bundler? (CDN, import maps, plain `<link>`)** Import the aggregate sheet
|
|
38
|
-
> `@cascivo/react/styles.css` —
|
|
39
|
-
> With a bundler you don't need it; import it
|
|
40
|
-
> stylesheet over per-component tree-shaking
|
|
38
|
+
> `@cascivo/react/styles.css` — every component's CSS in one file (~273 KB /
|
|
39
|
+
> ~37 KB gzip, not tree-shaken). With a bundler (CSR) you don't need it; import it
|
|
40
|
+
> only if you prefer one explicit stylesheet over per-component tree-shaking, or
|
|
41
|
+
> for Vite SSR (below), where it is required.
|
|
42
|
+
|
|
43
|
+
> **Vite SSR / TanStack Start / Remix / workerd?** Those per-component `.css`
|
|
44
|
+
> imports need a bundler to resolve them; a bare server-side ESM loader throws
|
|
45
|
+
> `Unknown file extension ".css"`. Add `ssr: { noExternal: [/^@cascivo\//] }` (or
|
|
46
|
+
> the `cascivoSsr()` plugin from `@cascivo/vite-plugin`) and import
|
|
47
|
+
> `@cascivo/react/styles.css` once in your root entry. Full recipe:
|
|
48
|
+
> [USING-WITH-VITE-SSR.md](https://github.com/cascivo/cascivo/blob/main/docs/USING-WITH-VITE-SSR.md).
|
|
49
|
+
> Next.js App Router needs none of this.
|
|
41
50
|
|
|
42
51
|
## Use
|
|
43
52
|
|
|
@@ -335,7 +344,7 @@ routing break after adding one of these, check that the import resolves to
|
|
|
335
344
|
- **DashboardLayout** — Dashboard page layout with stats strip, main content area, and optional aside.
|
|
336
345
|
- **FeatureGrid** — Feature section — AutoGrid of items with optional title, description, and icon slots. Icons are optional; the grid works text-only. Replace demo content before shipping.
|
|
337
346
|
- **Flex** — Flex layout primitive for vertical or horizontal stacking with gap control.
|
|
338
|
-
- **Grid** — CSS grid layout primitive with responsive column collapsing.
|
|
347
|
+
- **Grid** — CSS grid layout primitive with responsive column collapsing. Establishes its own containment, so responsive `cols` adapt to the grid’s own slot width with no wrapper or container ancestor required.
|
|
339
348
|
- **Hero** — Page hero section — centered or split layout with eyebrow, title, description, actions and media slots. Replace demo content before shipping.
|
|
340
349
|
- **Indicator** — Positions an overlay element (badge, dot, count) at a corner of its child
|
|
341
350
|
- **Join** — Groups adjacent children into a seamless joined element by removing interior borders and radii
|