@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
package/README.md
CHANGED
|
@@ -53,9 +53,18 @@ Components ship with `'use client'` preserved in the bundle, so they work inside
|
|
|
53
53
|
RSC without any extra wrapper.
|
|
54
54
|
|
|
55
55
|
> **No bundler? (CDN, import maps, plain `<link>`)** Import the aggregate sheet
|
|
56
|
-
> `@cascivo/react/styles.css` —
|
|
57
|
-
> With a bundler you don't need it; import it
|
|
58
|
-
> stylesheet over per-component tree-shaking
|
|
56
|
+
> `@cascivo/react/styles.css` — every component's CSS in one file (~273 KB /
|
|
57
|
+
> ~37 KB gzip, not tree-shaken). With a bundler (CSR) you don't need it; import it
|
|
58
|
+
> only if you prefer one explicit stylesheet over per-component tree-shaking, or
|
|
59
|
+
> for Vite SSR (below), where it is required.
|
|
60
|
+
|
|
61
|
+
> **Vite SSR / TanStack Start / Remix / workerd?** Those per-component `.css`
|
|
62
|
+
> imports need a bundler to resolve them; a bare server-side ESM loader throws
|
|
63
|
+
> `Unknown file extension ".css"`. Add `ssr: { noExternal: [/^@cascivo\//] }` (or
|
|
64
|
+
> the `cascivoSsr()` plugin from `@cascivo/vite-plugin`) and import
|
|
65
|
+
> `@cascivo/react/styles.css` once in your root entry. Full recipe:
|
|
66
|
+
> [USING-WITH-VITE-SSR.md](https://github.com/cascivo/cascivo/blob/main/docs/USING-WITH-VITE-SSR.md).
|
|
67
|
+
> Next.js App Router needs none of this.
|
|
59
68
|
|
|
60
69
|
## Use
|
|
61
70
|
|
|
@@ -353,7 +362,7 @@ routing break after adding one of these, check that the import resolves to
|
|
|
353
362
|
- **DashboardLayout** — Dashboard page layout with stats strip, main content area, and optional aside.
|
|
354
363
|
- **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.
|
|
355
364
|
- **Flex** — Flex layout primitive for vertical or horizontal stacking with gap control.
|
|
356
|
-
- **Grid** — CSS grid layout primitive with responsive column collapsing.
|
|
365
|
+
- **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.
|
|
357
366
|
- **Hero** — Page hero section — centered or split layout with eyebrow, title, description, actions and media slots. Replace demo content before shipping.
|
|
358
367
|
- **Indicator** — Positions an overlay element (badge, dot, count) at a corner of its child
|
|
359
368
|
- **Join** — Groups adjacent children into a seamless joined element by removing interior borders and radii
|
|
@@ -419,6 +428,6 @@ pnpm add @cascivo/react
|
|
|
419
428
|
|
|
420
429
|
---
|
|
421
430
|
|
|
422
|
-
[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
|
|
431
|
+
[cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/cascivo/cascivo) · AI agents: read [`llms.txt`](https://cascivo.com/llms.txt) (install steps + component index, plain text) or 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
|
|
423
432
|
|
|
424
433
|
<div align="center"><a href="https://cascivo.com"><img src="https://cascivo.com/favicon.svg" width="28" height="28" alt="cascivo"></a></div>
|
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import e from "./breadcrumb.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 } from "react/jsx-runtime";
|
|
7
7
|
//#region ../components/src/breadcrumb/breadcrumb.tsx
|
|
8
|
-
function
|
|
9
|
-
|
|
10
|
-
let
|
|
11
|
-
return
|
|
12
|
-
|
|
8
|
+
function s({ items: s, maxVisible: c, className: l, ariaLabel: u }) {
|
|
9
|
+
r();
|
|
10
|
+
let d = n(), f = u ?? a(i.breadcrumb.nav), p = s, m = s[0];
|
|
11
|
+
return m !== void 0 && c !== void 0 && s.length > c && (p = [
|
|
12
|
+
m,
|
|
13
13
|
{ label: "…" },
|
|
14
|
-
...
|
|
15
|
-
]), /* @__PURE__ */
|
|
16
|
-
"aria-label":
|
|
17
|
-
className: t(e.breadcrumb,
|
|
18
|
-
children: /* @__PURE__ */
|
|
14
|
+
...s.slice(s.length - (c - 2))
|
|
15
|
+
]), /* @__PURE__ */ o("nav", {
|
|
16
|
+
"aria-label": f,
|
|
17
|
+
className: t(e.breadcrumb, l),
|
|
18
|
+
children: /* @__PURE__ */ o("ol", { children: p.map((e, t) => /* @__PURE__ */ o("li", { children: t === p.length - 1 ? /* @__PURE__ */ o("span", {
|
|
19
19
|
"aria-current": "page",
|
|
20
20
|
children: e.label
|
|
21
|
-
}) : e.href === void 0 ? /* @__PURE__ */
|
|
21
|
+
}) : e.href === void 0 ? /* @__PURE__ */ o("span", { children: e.label }) : /* @__PURE__ */ o(d, {
|
|
22
22
|
href: e.href,
|
|
23
23
|
children: e.label
|
|
24
24
|
}) }, `${t}-${e.label}`)) })
|
|
25
25
|
});
|
|
26
26
|
}
|
|
27
27
|
//#endregion
|
|
28
|
-
export {
|
|
28
|
+
export { s as Breadcrumb };
|
package/dist/card/card.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer cascivo.component{.
|
|
1
|
+
@layer cascivo.component{._card_16415_2{background-color:var(--cascivo-color-surface);border-radius:var(--cascivo-radius-surface);padding:var(--_card-p,0);overflow:hidden}._card_16415_2[data-padding=none]{--_card-p:0}._card_16415_2[data-padding=sm]{--_card-p:var(--cascivo-space-4)}._card_16415_2[data-padding=md]{--_card-p:var(--cascivo-space-6)}._card_16415_2[data-padding=lg]{--_card-p:var(--cascivo-space-8)}._card_16415_2[data-variant=default]{border:1px solid var(--cascivo-color-border)}._card_16415_2[data-variant=outlined]{border:1.5px solid var(--cascivo-color-border-strong)}._card_16415_2[data-variant=elevated]{box-shadow:var(--cascivo-shadow-md);border:none}._header_16415_35{padding:var(--_card-p,var(--cascivo-space-6));gap:var(--cascivo-space-1);flex-direction:column;min-inline-size:0;padding-block-end:0;display:flex}._title_16415_46{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-tight);margin:0}._content_16415_55{padding:var(--_card-p,var(--cascivo-space-6));color:var(--cascivo-color-text-subtle);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-relaxed)}._footer_16415_63{padding:var(--_card-p,var(--cascivo-space-6));align-items:center;gap:var(--cascivo-space-2);min-inline-size:0;padding-block-start:0;display:flex}._footer_16415_63>*{min-inline-size:0}}
|
package/dist/card/card.module.js
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
import './card.css';
|
|
4
4
|
var e = {
|
|
5
|
-
card: "
|
|
6
|
-
header: "
|
|
7
|
-
title: "
|
|
8
|
-
content: "
|
|
9
|
-
footer: "
|
|
5
|
+
card: "_card_16415_2",
|
|
6
|
+
header: "_header_16415_35",
|
|
7
|
+
title: "_title_16415_46",
|
|
8
|
+
content: "_content_16415_55",
|
|
9
|
+
footer: "_footer_16415_63"
|
|
10
10
|
};
|
|
11
11
|
//#endregion
|
|
12
12
|
export { e as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer cascivo.component{.
|
|
1
|
+
@layer cascivo.component{._root_jwjfs_2{--_row-height:3rem;font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-surface);background-color:var(--cascivo-color-surface);flex-direction:column;display:flex;overflow:hidden}._root_jwjfs_2[data-density=compact]{--_row-height:2.25rem}._root_jwjfs_2[data-density=normal]{--_row-height:3rem}._root_jwjfs_2[data-density=relaxed]{--_row-height:3.75rem}._toolbar_jwjfs_26{justify-content:space-between;align-items:flex-end;gap:var(--cascivo-space-4);padding:var(--cascivo-space-3) var(--cascivo-space-4);border-block-end:1px solid var(--cascivo-color-border);display:flex}._heading_jwjfs_35{gap:var(--cascivo-space-1);flex-direction:column;display:flex}._title_jwjfs_41{font-size:var(--cascivo-text-base);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text)}._description_jwjfs_47{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle)}._search_jwjfs_52{appearance:none;height:2rem;min-inline-size:14rem;padding-inline:var(--cascivo-space-3);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);outline:none}._search_jwjfs_52:hover:not(:focus){border-color:var(--cascivo-color-border-strong)}._search_jwjfs_52:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._batchBar_jwjfs_79{justify-content:space-between;align-items:center;gap:var(--cascivo-space-4);padding:var(--cascivo-space-2) var(--cascivo-space-4);background-color:var(--cascivo-color-bg-subtle);border-block-end:1px solid var(--cascivo-color-border);display:flex}._batchCount_jwjfs_89{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text)}._batchActions_jwjfs_95{gap:var(--cascivo-space-2);display:flex}._scroller_jwjfs_101{max-block-size:var(--cascivo-data-table-max-height,none);overflow:auto}._scrollerVirtualized_jwjfs_106{block-size:var(--cascivo-data-table-height,400px);max-block-size:none;overflow:auto}._table_jwjfs_112{border-collapse:collapse;table-layout:auto;inline-size:100%}._root_jwjfs_2[data-paginated=true] ._table_jwjfs_112{table-layout:fixed}._table_jwjfs_112 thead th{padding-block:var(--cascivo-space-2);padding-inline:var(--cascivo-data-table-cell-gap,var(--cascivo-space-4));text-align:start;font-weight:var(--cascivo-font-semibold);font-size:var(--cascivo-text-xs);text-transform:uppercase;letter-spacing:var(--cascivo-tracking-wide);color:var(--cascivo-color-text-subtle);background-color:var(--cascivo-color-bg-subtle);border-block-end:1px solid var(--cascivo-color-border);white-space:nowrap}._table_jwjfs_112 thead th[data-align=end]{text-align:end}._table_jwjfs_112 td{padding-block:0;padding-inline:var(--cascivo-data-table-cell-gap,var(--cascivo-space-4));block-size:var(--_row-height);vertical-align:middle;border-block-end:1px solid var(--cascivo-color-border);color:var(--cascivo-color-text);overflow-wrap:anywhere}._table_jwjfs_112 td[data-align=end]{text-align:end}._table_jwjfs_112 tbody tr[data-filler-row] td{border-block-end:none}._root_jwjfs_2[data-sticky-header=true] ._table_jwjfs_112 thead th{z-index:var(--cascivo-z-raised,10);background-color:var(--cascivo-color-surface);position:sticky;inset-block-start:0}._root_jwjfs_2[data-zebra=true] ._table_jwjfs_112 tbody tr:nth-child(2n of ._row_jwjfs_172){background-color:var(--cascivo-color-bg-subtle)}._controlCol_jwjfs_178{inline-size:3rem}._controlCell_jwjfs_182{text-align:center;padding-inline:var(--cascivo-space-2)}._sortButton_jwjfs_188{align-items:center;gap:var(--cascivo-space-1);font-family:inherit;font-size:inherit;font-weight:inherit;text-transform:inherit;letter-spacing:inherit;color:inherit;cursor:pointer;background:0 0;border:none;outline:none;padding:0;display:inline-flex}._sortButton_jwjfs_188:focus-visible{text-decoration:underline}._sortButton_jwjfs_188:after{content:"↕";opacity:.4;font-size:.75em}._sortButton_jwjfs_188[data-state=ascending]:after{content:"↑";opacity:.9}._sortButton_jwjfs_188[data-state=descending]:after{content:"↓";opacity:.9}._row_jwjfs_172{content-visibility:auto;contain-intrinsic-size:auto var(--_row-height,3rem)}._row_jwjfs_172[data-state=selected] td{background-color:color-mix(in srgb, var(--cascivo-color-accent) 8%, transparent)}._emptyCell_jwjfs_236{padding:var(--cascivo-space-8) var(--cascivo-space-4);text-align:center;color:var(--cascivo-color-text-muted)}._expansionRow_jwjfs_243[data-state=closed]{display:none}._expansionGrid_jwjfs_249{overflow:hidden}._expansionInner_jwjfs_253{padding:var(--cascivo-space-4)}._expandButton_jwjfs_258{cursor:pointer;block-size:1.5rem;inline-size:1.5rem;color:var(--cascivo-color-text-muted);border-radius:var(--cascivo-radius-control);background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:inline-flex}._expandButton_jwjfs_258:focus-visible{box-shadow:0 0 0 2px var(--cascivo-color-accent)}._expandButton_jwjfs_258:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._chevron_jwjfs_281{block-size:.75rem;inline-size:.75rem;transition:transform var(--cascivo-duration-150) var(--cascivo-ease-out);border-block-end:2px solid;border-inline-end:2px solid;display:block;transform:rotate(45deg)}._expandButton_jwjfs_258[data-state=open] ._chevron_jwjfs_281{transform:rotate(-135deg)}._shimmer_jwjfs_296{background-color:var(--cascivo-color-bg-subtle);border-radius:var(--cascivo-radius-indicator);block-size:.875rem;inline-size:80%;display:block;position:relative;overflow:hidden}._shimmer_jwjfs_296:after{content:"";background:linear-gradient(90deg, transparent, var(--cascivo-color-surface), transparent);animation:_shimmer_jwjfs_296 var(--cascivo-duration-500,.5s) var(--cascivo-ease-in-out,ease-in-out) infinite;position:absolute;inset:0;translate:-100%}@keyframes _shimmer_jwjfs_296{to{translate:100%}}._footer_jwjfs_323{justify-content:flex-end;align-items:center;gap:var(--cascivo-space-4);padding:var(--cascivo-space-3) var(--cascivo-space-4);border-block-start:1px solid var(--cascivo-color-border);font-size:var(--cascivo-text-sm);display:flex}._pageSize_jwjfs_333{align-items:center;gap:var(--cascivo-space-2);color:var(--cascivo-color-text-muted);display:flex}._pageSize_jwjfs_333 select{appearance:none;height:2rem;padding-inline:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);cursor:pointer;outline:none}._pageSize_jwjfs_333 select:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._range_jwjfs_359{color:var(--cascivo-color-text-muted);white-space:nowrap}._pageButtons_jwjfs_364{gap:var(--cascivo-space-1);display:flex}._pageButton_jwjfs_364{border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-control);cursor:pointer;block-size:2rem;inline-size:2rem;color:var(--cascivo-color-text);font-size:var(--cascivo-text-base);transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out), border-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;outline:none;justify-content:center;align-items:center;display:inline-flex}._pageButton_jwjfs_364:hover:not(:disabled){background-color:var(--cascivo-color-bg-subtle);border-color:var(--cascivo-color-border-strong)}._pageButton_jwjfs_364:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._pageButton_jwjfs_364:disabled{color:var(--cascivo-color-text-muted);cursor:not-allowed}._srOnly_jwjfs_405{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}}
|
|
@@ -2,35 +2,35 @@
|
|
|
2
2
|
|
|
3
3
|
import './data-table.css';
|
|
4
4
|
var e = {
|
|
5
|
-
root: "
|
|
6
|
-
toolbar: "
|
|
7
|
-
heading: "
|
|
8
|
-
title: "
|
|
9
|
-
description: "
|
|
10
|
-
search: "
|
|
11
|
-
batchBar: "
|
|
12
|
-
batchCount: "
|
|
13
|
-
batchActions: "
|
|
14
|
-
scroller: "
|
|
15
|
-
scrollerVirtualized: "
|
|
16
|
-
table: "
|
|
17
|
-
row: "
|
|
18
|
-
controlCol: "
|
|
19
|
-
controlCell: "
|
|
20
|
-
sortButton: "
|
|
21
|
-
emptyCell: "
|
|
22
|
-
expansionRow: "
|
|
23
|
-
expansionGrid: "
|
|
24
|
-
expansionInner: "
|
|
25
|
-
expandButton: "
|
|
26
|
-
chevron: "
|
|
27
|
-
shimmer: "
|
|
28
|
-
footer: "
|
|
29
|
-
pageSize: "
|
|
30
|
-
range: "
|
|
31
|
-
pageButtons: "
|
|
32
|
-
pageButton: "
|
|
33
|
-
srOnly: "
|
|
5
|
+
root: "_root_jwjfs_2",
|
|
6
|
+
toolbar: "_toolbar_jwjfs_26",
|
|
7
|
+
heading: "_heading_jwjfs_35",
|
|
8
|
+
title: "_title_jwjfs_41",
|
|
9
|
+
description: "_description_jwjfs_47",
|
|
10
|
+
search: "_search_jwjfs_52",
|
|
11
|
+
batchBar: "_batchBar_jwjfs_79",
|
|
12
|
+
batchCount: "_batchCount_jwjfs_89",
|
|
13
|
+
batchActions: "_batchActions_jwjfs_95",
|
|
14
|
+
scroller: "_scroller_jwjfs_101",
|
|
15
|
+
scrollerVirtualized: "_scrollerVirtualized_jwjfs_106",
|
|
16
|
+
table: "_table_jwjfs_112",
|
|
17
|
+
row: "_row_jwjfs_172",
|
|
18
|
+
controlCol: "_controlCol_jwjfs_178",
|
|
19
|
+
controlCell: "_controlCell_jwjfs_182",
|
|
20
|
+
sortButton: "_sortButton_jwjfs_188",
|
|
21
|
+
emptyCell: "_emptyCell_jwjfs_236",
|
|
22
|
+
expansionRow: "_expansionRow_jwjfs_243",
|
|
23
|
+
expansionGrid: "_expansionGrid_jwjfs_249",
|
|
24
|
+
expansionInner: "_expansionInner_jwjfs_253",
|
|
25
|
+
expandButton: "_expandButton_jwjfs_258",
|
|
26
|
+
chevron: "_chevron_jwjfs_281",
|
|
27
|
+
shimmer: "_shimmer_jwjfs_296",
|
|
28
|
+
footer: "_footer_jwjfs_323",
|
|
29
|
+
pageSize: "_pageSize_jwjfs_333",
|
|
30
|
+
range: "_range_jwjfs_359",
|
|
31
|
+
pageButtons: "_pageButtons_jwjfs_364",
|
|
32
|
+
pageButton: "_pageButton_jwjfs_364",
|
|
33
|
+
srOnly: "_srOnly_jwjfs_405"
|
|
34
34
|
};
|
|
35
35
|
//#endregion
|
|
36
36
|
export { e as default };
|
package/dist/dock/dock.js
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import e from "./dock.module.js";
|
|
4
|
-
import {
|
|
5
|
-
import { builtin as
|
|
6
|
-
import { jsx as
|
|
4
|
+
import { getLinkComponent as t, useSignals as n } from "@cascivo/core";
|
|
5
|
+
import { builtin as r, t as i } from "@cascivo/i18n";
|
|
6
|
+
import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
7
7
|
//#region ../components/src/dock/dock.tsx
|
|
8
|
-
function
|
|
9
|
-
return
|
|
10
|
-
"aria-label":
|
|
11
|
-
className: [e.dock,
|
|
12
|
-
children:
|
|
13
|
-
let
|
|
14
|
-
return /* @__PURE__ */
|
|
8
|
+
function s({ items: s, activeIndex: c, className: l, ariaLabel: u }) {
|
|
9
|
+
return n(), /* @__PURE__ */ a("nav", {
|
|
10
|
+
"aria-label": u ?? i(r.dock.nav),
|
|
11
|
+
className: [e.dock, l].filter(Boolean).join(" "),
|
|
12
|
+
children: s.map((n, r) => {
|
|
13
|
+
let i = r === c;
|
|
14
|
+
return /* @__PURE__ */ o(n.href ? t() : "button", {
|
|
15
15
|
className: e.item,
|
|
16
|
-
"data-active":
|
|
17
|
-
"aria-current":
|
|
18
|
-
...
|
|
19
|
-
type:
|
|
20
|
-
onClick:
|
|
21
|
-
children: [/* @__PURE__ */
|
|
16
|
+
"data-active": i || void 0,
|
|
17
|
+
"aria-current": i ? "page" : void 0,
|
|
18
|
+
...n.href ? { href: n.href } : {},
|
|
19
|
+
type: n.href ? void 0 : "button",
|
|
20
|
+
onClick: n.onClick,
|
|
21
|
+
children: [/* @__PURE__ */ a("span", {
|
|
22
22
|
className: e.icon,
|
|
23
23
|
"aria-hidden": "true",
|
|
24
|
-
children:
|
|
25
|
-
}), /* @__PURE__ */
|
|
24
|
+
children: n.icon
|
|
25
|
+
}), /* @__PURE__ */ a("span", {
|
|
26
26
|
className: e.label,
|
|
27
|
-
children:
|
|
27
|
+
children: n.label
|
|
28
28
|
})]
|
|
29
|
-
},
|
|
29
|
+
}, r);
|
|
30
30
|
})
|
|
31
31
|
});
|
|
32
32
|
}
|
|
33
33
|
//#endregion
|
|
34
|
-
export {
|
|
34
|
+
export { s as Dock };
|
package/dist/header/header.js
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import e from "./header.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/header/header.tsx
|
|
8
|
-
function
|
|
9
|
-
|
|
10
|
-
let
|
|
11
|
-
return /* @__PURE__ */
|
|
8
|
+
function c({ brand: c, links: l, actions: u, sticky: d = !1, labels: f, className: p, ...m }) {
|
|
9
|
+
r();
|
|
10
|
+
let h = n(), g = f?.nav ?? a(i.header.nav);
|
|
11
|
+
return /* @__PURE__ */ s("header", {
|
|
12
12
|
role: "banner",
|
|
13
|
-
"data-sticky":
|
|
14
|
-
className: t(e.header,
|
|
15
|
-
...
|
|
13
|
+
"data-sticky": d || void 0,
|
|
14
|
+
className: t(e.header, p),
|
|
15
|
+
...m,
|
|
16
16
|
children: [
|
|
17
|
-
|
|
17
|
+
c && /* @__PURE__ */ o("div", {
|
|
18
18
|
className: e.brand,
|
|
19
|
-
children:
|
|
19
|
+
children: c
|
|
20
20
|
}),
|
|
21
|
-
|
|
22
|
-
"aria-label":
|
|
21
|
+
l && l.length > 0 && /* @__PURE__ */ o("nav", {
|
|
22
|
+
"aria-label": g,
|
|
23
23
|
className: e.nav,
|
|
24
|
-
children: /* @__PURE__ */
|
|
24
|
+
children: /* @__PURE__ */ o("ul", {
|
|
25
25
|
className: e.list,
|
|
26
|
-
children:
|
|
26
|
+
children: l.map((t, n) => /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(h, {
|
|
27
27
|
href: t.href,
|
|
28
28
|
"aria-current": t.active ? "page" : void 0,
|
|
29
29
|
"data-state": t.active ? "active" : void 0,
|
|
@@ -32,13 +32,13 @@ function s({ brand: s, links: c, actions: l, sticky: u = !1, labels: d, classNam
|
|
|
32
32
|
}) }, t.id ?? `${n}-${t.href}`))
|
|
33
33
|
})
|
|
34
34
|
}),
|
|
35
|
-
/* @__PURE__ */
|
|
36
|
-
|
|
35
|
+
/* @__PURE__ */ o("div", { className: e.spacer }),
|
|
36
|
+
u && /* @__PURE__ */ o("div", {
|
|
37
37
|
className: e.actions,
|
|
38
|
-
children:
|
|
38
|
+
children: u
|
|
39
39
|
})
|
|
40
40
|
]
|
|
41
41
|
});
|
|
42
42
|
}
|
|
43
43
|
//#endregion
|
|
44
|
-
export {
|
|
44
|
+
export { c as Header };
|
package/dist/index.d.ts
CHANGED
|
@@ -634,6 +634,22 @@ declare function Header({
|
|
|
634
634
|
...props
|
|
635
635
|
}: HeaderProps): import("react").JSX.Element;
|
|
636
636
|
type SideNavTone = 'default' | 'danger' | 'warning' | 'success';
|
|
637
|
+
/**
|
|
638
|
+
* The anchor props cascivo computes for a nav item — the exact bag it spreads onto
|
|
639
|
+
* the link element. Passed to a `render` hatch so a custom link (e.g. a router
|
|
640
|
+
* `<Link>`) can carry the same active-state and accessibility attributes.
|
|
641
|
+
*/
|
|
642
|
+
interface SideNavLinkProps {
|
|
643
|
+
href?: string | undefined;
|
|
644
|
+
className?: string | undefined;
|
|
645
|
+
'aria-current'?: 'page' | undefined;
|
|
646
|
+
'aria-label'?: string | undefined;
|
|
647
|
+
'aria-disabled'?: boolean | undefined;
|
|
648
|
+
'data-state'?: 'active' | undefined;
|
|
649
|
+
'data-tone'?: Exclude<SideNavTone, 'default'> | undefined;
|
|
650
|
+
tabIndex?: number | undefined;
|
|
651
|
+
onClick: (e: MouseEvent<HTMLAnchorElement>) => void;
|
|
652
|
+
}
|
|
637
653
|
/** A selectable/navigable sub-item (link when `href` is set, action when `onSelect` is set). */
|
|
638
654
|
interface SideNavLinkSubItem {
|
|
639
655
|
/** Stable React key. Provide when `label`/`href` may repeat (e.g. placeholder `#` links). */
|
|
@@ -672,9 +688,17 @@ interface SideNavItem {
|
|
|
672
688
|
/**
|
|
673
689
|
* Escape hatch: render arbitrary content inside the item's shell so it inherits
|
|
674
690
|
* alignment and the collapse context. When set, the item's own fields are ignored.
|
|
691
|
+
*
|
|
692
|
+
* `children` is the computed icon + label + trailing node (so a custom link keeps
|
|
693
|
+
* the default layout), and `linkProps` is the anchor prop bag cascivo would spread
|
|
694
|
+
* onto the `<a>` (including active-state and a11y attributes) — spread it onto your
|
|
695
|
+
* router `<Link>` to preserve them. For a global router integration prefer
|
|
696
|
+
* `setLinkComponent` from `@cascivo/core` over a per-item hatch.
|
|
675
697
|
*/
|
|
676
698
|
render?: (ctx: {
|
|
677
699
|
collapsed: boolean;
|
|
700
|
+
children: ReactNode;
|
|
701
|
+
linkProps: SideNavLinkProps;
|
|
678
702
|
}) => ReactNode;
|
|
679
703
|
}
|
|
680
704
|
interface SideNavGroup {
|
|
@@ -3280,6 +3304,7 @@ declare function Columns({
|
|
|
3280
3304
|
gap,
|
|
3281
3305
|
className,
|
|
3282
3306
|
style,
|
|
3307
|
+
children,
|
|
3283
3308
|
...props
|
|
3284
3309
|
}: ColumnsProps): import("react").JSX.Element;
|
|
3285
3310
|
interface CenterProps extends HTMLAttributes<HTMLDivElement> {
|
|
@@ -3395,4 +3420,4 @@ declare function themePreloadScript(options?: {
|
|
|
3395
3420
|
attribute?: string;
|
|
3396
3421
|
defaultTheme?: string;
|
|
3397
3422
|
}): string;
|
|
3398
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionItemProps, AccordionProps, AccordionTrigger, ActionSheet, ActionSheetAction, ActionSheetProps, Alert, AlertDialog, AlertDialogLabels, AlertDialogProps, AlertProps, AppShell, AppShellProps, AspectRatio, AspectRatioProps, AutoGrid, AutoGridProps, Avatar, AvatarGroup, AvatarGroupLabels, AvatarGroupProps, AvatarProps, Badge, BadgeProps, Blockquote, BlockquoteProps, BottomSheet, BottomSheetProps, Breadcrumb, BreadcrumbItem, BreadcrumbProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Calendar, CalendarLabels, CalendarProps, Card, CardContent, CardContentProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps, Carousel, CarouselLabels, CarouselProps, Center, CenterProps, ChatBubble, ChatBubbleProps, ChatBubbleSide, Checkbox, CheckboxCard, CheckboxCardProps, CheckboxProps, Code, type CodeLang, CodeProps, CodeSnippet, CodeSnippetProps, Collapsible, CollapsibleProps, ColorPicker, ColorPickerLabels, ColorPickerProps, Column, Columns, ColumnsProps, Combobox, ComboboxLabels, ComboboxOption, ComboboxProps, CommandAction, CommandGroup, CommandItem, CommandMenu, CommandMenuProps, CommandPage, CommandScope, CommandStatus, Comparison, ComparisonProps, ContainedList, ContainedListItem, ContainedListItemProps, ContainedListProps, ContextMenu, ContextMenuItem, ContextMenuItemProps, ContextMenuProps, CopyButton, CopyButtonProps, DataList, DataListItem, DataListProps, DataTable, DataTableLabels, DataTableProps, DatePicker, DatePickerLabels, DatePickerProps, DateRange, DateRangePicker, DateRangePickerLabels, DateRangePickerProps, DateRangePreset, Dock, DockItem, DockProps, Drawer, DrawerProps, Dropdown, DropdownItem, DropdownProps, Editable, EditableProps, EmptyState, EmptyStateProps, ErrorBoundary, Fab, FabAction, FabProps, Field, FieldProps, FileUploader, FileUploaderLabels, FileUploaderProps, Filter, FilterOption, FilterProps, FilterVariant, Flex, FlexProps, FocusScope, Form, FormConfig, FormProps, FormStore, FuzzyMatch, Grid, GridAlign, GridItem, GridItemProps, GridProps, Header, HeaderLabels, HeaderLink, HeaderPanel, HeaderPanelLabels, HeaderPanelProps, HeaderProps, Heading, HeadingLevel, HeadingProps, HeadingSize, HoverCard, HoverCardContent, HoverCardContentProps, HoverCardProps, HoverCardTrigger, HoverCardTriggerProps, IconButton, IconButtonProps, Image, ImageProps, Indicator, IndicatorPlacement, IndicatorProps, InlineLoading, InlineLoadingProps, InlineLoadingStatus, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, InputProps, Item, ItemActions, ItemActionsProps, ItemContent, ItemContentProps, ItemDescription, ItemDescriptionProps, ItemMedia, ItemMediaProps, ItemProps, ItemTitle, ItemTitleProps, Join, JoinOrientation, JoinProps, Kbd, KbdProps, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, LogLevel, LogLine, LogViewer, LogViewerLabels, LogViewerProps, Menu, MenuButton, MenuButtonItem, MenuButtonProps, MenuItem, MenuItemProps, MenuProps, MenuSeparator, MenuTrigger, MenuTriggerProps, Menubar, MenubarItem, MenubarMenu, MenubarProps, Modal, ModalProps, MultiSelect, MultiSelectLabels, MultiSelectOption, MultiSelectProps, NativeSelect, NativeSelectOption, NativeSelectProps, NavigationMenu, NavigationMenuItem, NavigationMenuProps, Notification, NotificationProps, NotificationVariant, NumberInput, NumberInputProps, OtpInput, OtpInputProps, OverflowMenu, OverflowMenuItem, OverflowMenuProps, Pagination, PaginationLabels, PaginationProps, PasswordInput, PasswordInputLabels, PasswordInputProps, Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps, Portal, Progress, ProgressBar, ProgressBarProps, ProgressCircle, ProgressCircleProps, ProgressIndicator, ProgressIndicatorProps, ProgressProps, ProgressSize, ProgressStep, ProgressVariant, Prose, ProseProps, PullToRefresh, PullToRefreshProps, QrCode, QrCodeProps, RadialProgress, RadialProgressProps, RadialProgressSize, RadialProgressVariant, Radio, RadioCard, RadioCardGroup, RadioCardGroupProps, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, RatingGroup, RatingGroupLabels, RatingGroupProps, RelativeTime, RelativeTimeProps, Resizable, ResizableProps, Responsive, ScrollArea, ScrollAreaProps, Search, SearchProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectOption, SelectProps, Separator, SeparatorProps, Sheet, SheetProps, ShellHeader, ShellHeaderAction, ShellHeaderBrand, ShellHeaderLabels, ShellHeaderNavItem, ShellHeaderNavLink, ShellHeaderNavMenu, ShellHeaderNavMenuItem, ShellHeaderProps, SideNav, SideNavGroup, SideNavItem, SideNavLinkSubItem, SideNavProps, SideNavSubItem, SideNavTone, Skeleton, SkeletonProps, SkipNavLink, SkipNavLinkProps, SkipNavTarget, SkipNavTargetProps, Slider, SliderProps, SortDirection, SortState, Spacer, SpacerProps, Spinner, SpinnerProps, Stack, StackProps, type StandardSchemaV1, Stat, StatProps, Status, StatusProps, Step, StepState, Steps, StepsProps, StructuredList, StructuredListItem, StructuredListProps, SuspenseBoundary, Swap, SwapMode, SwapProps, SwipeAction, SwipeItem, SwipeItemProps, Switcher, SwitcherEntry, SwitcherLink, SwitcherProps, Tabs, TabsContent, TabsContentProps, TabsList, TabsProps, TabsTrigger, TabsTriggerProps, Tag$1 as Tag, TagProps, TagsInput, TagsInputProps, Text, TextProps, Textarea, TextareaProps, ThemeProvider, type ThemeProviderProps, Tile, TileProps, TimePicker, TimePickerProps, Timeline, TimelineItem, TimelineProps, ToastOptions, ToastProvider, ToastVariant, Toc, TocItem, TocProps, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupProps, ToggleProps, Toggletip, ToggletipPlacement, ToggletipProps, Tooltip, TooltipProps, TreeNode, TreeView, TreeViewProps, UploaderFile, type UsePopoverOptions, type UsePopoverReturn, type UseTocFromRegionOptions, User, UserProps, VisuallyHidden, VisuallyHiddenProps, createForm, dismissAllToasts, fuzzyMatch, fuzzyScore, setTheme, themePreloadScript, treeViewMessages, useForm, usePopover, useTheme, useToast, useTocFromRegion };
|
|
3423
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionItemProps, AccordionProps, AccordionTrigger, ActionSheet, ActionSheetAction, ActionSheetProps, Alert, AlertDialog, AlertDialogLabels, AlertDialogProps, AlertProps, AppShell, AppShellProps, AspectRatio, AspectRatioProps, AutoGrid, AutoGridProps, Avatar, AvatarGroup, AvatarGroupLabels, AvatarGroupProps, AvatarProps, Badge, BadgeProps, Blockquote, BlockquoteProps, BottomSheet, BottomSheetProps, Breadcrumb, BreadcrumbItem, BreadcrumbProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Calendar, CalendarLabels, CalendarProps, Card, CardContent, CardContentProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps, Carousel, CarouselLabels, CarouselProps, Center, CenterProps, ChatBubble, ChatBubbleProps, ChatBubbleSide, Checkbox, CheckboxCard, CheckboxCardProps, CheckboxProps, Code, type CodeLang, CodeProps, CodeSnippet, CodeSnippetProps, Collapsible, CollapsibleProps, ColorPicker, ColorPickerLabels, ColorPickerProps, Column, Columns, ColumnsProps, Combobox, ComboboxLabels, ComboboxOption, ComboboxProps, CommandAction, CommandGroup, CommandItem, CommandMenu, CommandMenuProps, CommandPage, CommandScope, CommandStatus, Comparison, ComparisonProps, ContainedList, ContainedListItem, ContainedListItemProps, ContainedListProps, ContextMenu, ContextMenuItem, ContextMenuItemProps, ContextMenuProps, CopyButton, CopyButtonProps, DataList, DataListItem, DataListProps, DataTable, DataTableLabels, DataTableProps, DatePicker, DatePickerLabels, DatePickerProps, DateRange, DateRangePicker, DateRangePickerLabels, DateRangePickerProps, DateRangePreset, Dock, DockItem, DockProps, Drawer, DrawerProps, Dropdown, DropdownItem, DropdownProps, Editable, EditableProps, EmptyState, EmptyStateProps, ErrorBoundary, Fab, FabAction, FabProps, Field, FieldProps, FileUploader, FileUploaderLabels, FileUploaderProps, Filter, FilterOption, FilterProps, FilterVariant, Flex, FlexProps, FocusScope, Form, FormConfig, FormProps, FormStore, FuzzyMatch, Grid, GridAlign, GridItem, GridItemProps, GridProps, Header, HeaderLabels, HeaderLink, HeaderPanel, HeaderPanelLabels, HeaderPanelProps, HeaderProps, Heading, HeadingLevel, HeadingProps, HeadingSize, HoverCard, HoverCardContent, HoverCardContentProps, HoverCardProps, HoverCardTrigger, HoverCardTriggerProps, IconButton, IconButtonProps, Image, ImageProps, Indicator, IndicatorPlacement, IndicatorProps, InlineLoading, InlineLoadingProps, InlineLoadingStatus, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, InputProps, Item, ItemActions, ItemActionsProps, ItemContent, ItemContentProps, ItemDescription, ItemDescriptionProps, ItemMedia, ItemMediaProps, ItemProps, ItemTitle, ItemTitleProps, Join, JoinOrientation, JoinProps, Kbd, KbdProps, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, LogLevel, LogLine, LogViewer, LogViewerLabels, LogViewerProps, Menu, MenuButton, MenuButtonItem, MenuButtonProps, MenuItem, MenuItemProps, MenuProps, MenuSeparator, MenuTrigger, MenuTriggerProps, Menubar, MenubarItem, MenubarMenu, MenubarProps, Modal, ModalProps, MultiSelect, MultiSelectLabels, MultiSelectOption, MultiSelectProps, NativeSelect, NativeSelectOption, NativeSelectProps, NavigationMenu, NavigationMenuItem, NavigationMenuProps, Notification, NotificationProps, NotificationVariant, NumberInput, NumberInputProps, OtpInput, OtpInputProps, OverflowMenu, OverflowMenuItem, OverflowMenuProps, Pagination, PaginationLabels, PaginationProps, PasswordInput, PasswordInputLabels, PasswordInputProps, Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps, Portal, Progress, ProgressBar, ProgressBarProps, ProgressCircle, ProgressCircleProps, ProgressIndicator, ProgressIndicatorProps, ProgressProps, ProgressSize, ProgressStep, ProgressVariant, Prose, ProseProps, PullToRefresh, PullToRefreshProps, QrCode, QrCodeProps, RadialProgress, RadialProgressProps, RadialProgressSize, RadialProgressVariant, Radio, RadioCard, RadioCardGroup, RadioCardGroupProps, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, RatingGroup, RatingGroupLabels, RatingGroupProps, RelativeTime, RelativeTimeProps, Resizable, ResizableProps, Responsive, ScrollArea, ScrollAreaProps, Search, SearchProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectOption, SelectProps, Separator, SeparatorProps, Sheet, SheetProps, ShellHeader, ShellHeaderAction, ShellHeaderBrand, ShellHeaderLabels, ShellHeaderNavItem, ShellHeaderNavLink, ShellHeaderNavMenu, ShellHeaderNavMenuItem, ShellHeaderProps, SideNav, SideNavGroup, SideNavItem, SideNavLinkProps, SideNavLinkSubItem, SideNavProps, SideNavSubItem, SideNavTone, Skeleton, SkeletonProps, SkipNavLink, SkipNavLinkProps, SkipNavTarget, SkipNavTargetProps, Slider, SliderProps, SortDirection, SortState, Spacer, SpacerProps, Spinner, SpinnerProps, Stack, StackProps, type StandardSchemaV1, Stat, StatProps, Status, StatusProps, Step, StepState, Steps, StepsProps, StructuredList, StructuredListItem, StructuredListProps, SuspenseBoundary, Swap, SwapMode, SwapProps, SwipeAction, SwipeItem, SwipeItemProps, Switcher, SwitcherEntry, SwitcherLink, SwitcherProps, Tabs, TabsContent, TabsContentProps, TabsList, TabsProps, TabsTrigger, TabsTriggerProps, Tag$1 as Tag, TagProps, TagsInput, TagsInputProps, Text, TextProps, Textarea, TextareaProps, ThemeProvider, type ThemeProviderProps, Tile, TileProps, TimePicker, TimePickerProps, Timeline, TimelineItem, TimelineProps, ToastOptions, ToastProvider, ToastVariant, Toc, TocItem, TocProps, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupProps, ToggleProps, Toggletip, ToggletipPlacement, ToggletipProps, Tooltip, TooltipProps, TreeNode, TreeView, TreeViewProps, UploaderFile, type UsePopoverOptions, type UsePopoverReturn, type UseTocFromRegionOptions, User, UserProps, VisuallyHidden, VisuallyHiddenProps, createForm, dismissAllToasts, fuzzyMatch, fuzzyScore, setTheme, themePreloadScript, treeViewMessages, useForm, usePopover, useTheme, useToast, useTocFromRegion };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer cascivo.component{.
|
|
1
|
+
@layer cascivo.component{._columns-container_1efih_2{display:grid;container-type:inline-size}._columns_1efih_2{grid-template-columns:repeat(var(--_cols,2), minmax(0, 1fr));gap:var(--_gap,var(--cascivo-space-4));min-inline-size:0;display:grid}@container (width<=40rem){._columns_1efih_2{grid-template-columns:1fr}}}
|
|
@@ -4,15 +4,19 @@ import e from "./columns.module.js";
|
|
|
4
4
|
import { cn as t } from "@cascivo/core";
|
|
5
5
|
import { jsx as n } from "react/jsx-runtime";
|
|
6
6
|
//#region ../layouts/src/columns/columns.tsx
|
|
7
|
-
function r({ count: r = 2, gap: i = 4, className: a, style: o,
|
|
7
|
+
function r({ count: r = 2, gap: i = 4, className: a, style: o, children: s, ...c }) {
|
|
8
8
|
return /* @__PURE__ */ n("div", {
|
|
9
|
-
className: t(e
|
|
9
|
+
className: t(e["columns-container"], a),
|
|
10
10
|
style: {
|
|
11
11
|
"--_cols": String(r),
|
|
12
12
|
"--_gap": `var(--cascivo-space-${i})`,
|
|
13
13
|
...o
|
|
14
14
|
},
|
|
15
|
-
...
|
|
15
|
+
...c,
|
|
16
|
+
children: /* @__PURE__ */ n("div", {
|
|
17
|
+
className: e.columns,
|
|
18
|
+
children: s
|
|
19
|
+
})
|
|
16
20
|
});
|
|
17
21
|
}
|
|
18
22
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer cascivo.component{.
|
|
1
|
+
@layer cascivo.component{._grid-container_qly9o_5{display:grid;container-type:inline-size}._grid_qly9o_2{grid-template-columns:repeat(var(--_grid-cols,12), minmax(0, 1fr));gap:var(--_grid-gap,var(--cascivo-space-4));align-items:var(--_grid-align,stretch);justify-items:var(--_grid-justify,stretch);min-inline-size:0;display:grid;container-type:inline-size}@container (width<=40rem){._grid_qly9o_2:not([data-responsive]){grid-template-columns:1fr}}@container (width>=30rem){._grid_qly9o_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-sm,var(--_grid-cols,12)), minmax(0, 1fr))}}@container (width>=40rem){._grid_qly9o_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-md,var(--_grid-cols-sm,var(--_grid-cols,12))), minmax(0, 1fr))}}@container (width>=64rem){._grid_qly9o_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-lg,var(--_grid-cols-md,var(--_grid-cols-sm,var(--_grid-cols,12)))), minmax(0, 1fr))}}@container (width>=80rem){._grid_qly9o_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-xl,var(--_grid-cols-lg,var(--_grid-cols-md,var(--_grid-cols-sm,var(--_grid-cols,12))))), minmax(0, 1fr))}}._grid-item_qly9o_55{grid-column:span var(--_span,1)}@container (width>=30rem){._grid-item_qly9o_55[data-responsive]{grid-column:span var(--_span-sm,var(--_span,1))}}@container (width>=40rem){._grid-item_qly9o_55[data-responsive]{grid-column:span var(--_span-md,var(--_span-sm,var(--_span,1)))}}@container (width>=64rem){._grid-item_qly9o_55[data-responsive]{grid-column:span var(--_span-lg,var(--_span-md,var(--_span-sm,var(--_span,1))))}}@container (width>=80rem){._grid-item_qly9o_55[data-responsive]{grid-column:span var(--_span-xl,var(--_span-lg,var(--_span-md,var(--_span-sm,var(--_span,1)))))}}}
|
|
@@ -25,8 +25,7 @@ function i(e, t) {
|
|
|
25
25
|
}
|
|
26
26
|
function a({ cols: a = 12, gap: o = 4, align: s, justify: c, className: l, style: u, children: d, ...f }) {
|
|
27
27
|
return /* @__PURE__ */ n("div", {
|
|
28
|
-
className: t(e
|
|
29
|
-
"data-responsive": r(a) ? "" : void 0,
|
|
28
|
+
className: t(e["grid-container"], l),
|
|
30
29
|
style: {
|
|
31
30
|
...i("--_grid-cols", a),
|
|
32
31
|
"--_grid-gap": `var(--cascivo-space-${o})`,
|
|
@@ -35,7 +34,11 @@ function a({ cols: a = 12, gap: o = 4, align: s, justify: c, className: l, style
|
|
|
35
34
|
...u
|
|
36
35
|
},
|
|
37
36
|
...f,
|
|
38
|
-
children:
|
|
37
|
+
children: /* @__PURE__ */ n("div", {
|
|
38
|
+
className: e.grid,
|
|
39
|
+
"data-responsive": r(a) ? "" : void 0,
|
|
40
|
+
children: d
|
|
41
|
+
})
|
|
39
42
|
});
|
|
40
43
|
}
|
|
41
44
|
function o({ span: a, className: o, style: s, ...c }) {
|