@cascivo/react 0.13.1 → 0.14.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.
- package/dist/index.d.ts +31 -0
- package/dist/node/shell-header/shell-header.js +21 -18
- package/dist/node/shell-header/shell-header.module.js +20 -19
- package/dist/node/timeline/timeline.js +23 -16
- package/dist/node/timeline/timeline.module.js +7 -7
- package/dist/shell-header/shell-header.css +1 -1
- package/dist/shell-header/shell-header.js +21 -18
- package/dist/shell-header/shell-header.module.js +20 -19
- package/dist/styles.css +2 -2
- package/dist/timeline/timeline.css +1 -1
- package/dist/timeline/timeline.js +23 -16
- package/dist/timeline/timeline.module.js +7 -7
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -2543,6 +2543,20 @@ interface ShellHeaderLabels {
|
|
|
2543
2543
|
interface ShellHeaderProps {
|
|
2544
2544
|
brand?: ShellHeaderBrand | ReactNode;
|
|
2545
2545
|
nav?: ShellHeaderNavItem[];
|
|
2546
|
+
/**
|
|
2547
|
+
* Free-form content between the nav and the right-hand cluster, in a wrapper that
|
|
2548
|
+
* takes the header's spare width.
|
|
2549
|
+
*
|
|
2550
|
+
* This is where a command-palette / search trigger belongs — a wide, low-contrast
|
|
2551
|
+
* button naming what it searches and showing its chord. Without a slot here the only
|
|
2552
|
+
* remaining position is `end`, which sits after the spacer and so can neither centre
|
|
2553
|
+
* nor grow; reaching the right spot otherwise means selecting the brand's hashed
|
|
2554
|
+
* CSS-module class, which breaks whenever the internal nesting changes.
|
|
2555
|
+
*
|
|
2556
|
+
* `nav` cannot express it (links and menus only) and `actions` cannot (icon buttons
|
|
2557
|
+
* with an `aria-label`, no text, no flex).
|
|
2558
|
+
*/
|
|
2559
|
+
center?: ReactNode;
|
|
2546
2560
|
actions?: ShellHeaderAction[];
|
|
2547
2561
|
end?: ReactNode;
|
|
2548
2562
|
onMenuClick?: (() => void) | undefined;
|
|
@@ -2554,6 +2568,7 @@ interface ShellHeaderProps {
|
|
|
2554
2568
|
declare function ShellHeader({
|
|
2555
2569
|
brand,
|
|
2556
2570
|
nav,
|
|
2571
|
+
center,
|
|
2557
2572
|
actions,
|
|
2558
2573
|
end,
|
|
2559
2574
|
onMenuClick,
|
|
@@ -3671,6 +3686,22 @@ interface TimelineItem {
|
|
|
3671
3686
|
* and `Steps` with no translation.
|
|
3672
3687
|
*/
|
|
3673
3688
|
status?: ProgressInput;
|
|
3689
|
+
/**
|
|
3690
|
+
* What *kind* of entry this is, as a marker colour — independent of `status`, and
|
|
3691
|
+
* overriding it on the marker when set.
|
|
3692
|
+
*
|
|
3693
|
+
* `status` answers "where is this in the sequence", which is the right question for a
|
|
3694
|
+
* tracker (order placed → shipped → delivered). In an activity feed every entry is
|
|
3695
|
+
* equally done, and what separates them is what produced them: an automated alert, a
|
|
3696
|
+
* human note, a system event. Colouring those by progress renders them identically, so
|
|
3697
|
+
* the fastest signal on the page is thrown away. Takes the catalog-wide `Tone`
|
|
3698
|
+
* vocabulary (`neutral | info | success | warning | danger`, plus the `error` /
|
|
3699
|
+
* `destructive` / `default` aliases).
|
|
3700
|
+
*
|
|
3701
|
+
* Tone is not a substitute for text: it is not perceivable without colour vision, so
|
|
3702
|
+
* keep whatever the tone means also present in `title` or `description`.
|
|
3703
|
+
*/
|
|
3704
|
+
tone?: ToneInput;
|
|
3674
3705
|
}
|
|
3675
3706
|
interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
|
|
3676
3707
|
items: TimelineItem[];
|
|
@@ -76,24 +76,24 @@ function p({ item: n }) {
|
|
|
76
76
|
})]
|
|
77
77
|
});
|
|
78
78
|
}
|
|
79
|
-
function m({ brand: e, nav: i,
|
|
79
|
+
function m({ brand: e, nav: i, center: a, actions: m, end: h, onMenuClick: g, menuExpanded: _, skipToContentHref: v = "#cascade-main", labels: y, className: b }) {
|
|
80
80
|
o();
|
|
81
|
-
let
|
|
81
|
+
let x = r(), S = y?.nav ?? c(s.shellHeader.nav), C = _ ? y?.closeMenu ?? c(s.shellHeader.closeMenu) : y?.openMenu ?? c(s.shellHeader.openMenu);
|
|
82
82
|
return /* @__PURE__ */ u("header", {
|
|
83
83
|
role: "banner",
|
|
84
|
-
className: n(t.header,
|
|
84
|
+
className: n(t.header, b),
|
|
85
85
|
children: [
|
|
86
|
-
|
|
87
|
-
href:
|
|
86
|
+
v !== !1 && /* @__PURE__ */ l("a", {
|
|
87
|
+
href: v,
|
|
88
88
|
className: t.skipLink,
|
|
89
|
-
children:
|
|
89
|
+
children: y?.skipToContent ?? c(s.shellHeader.skipToContent)
|
|
90
90
|
}),
|
|
91
|
-
|
|
91
|
+
g && /* @__PURE__ */ l("button", {
|
|
92
92
|
type: "button",
|
|
93
|
-
"aria-label":
|
|
94
|
-
"aria-expanded":
|
|
93
|
+
"aria-label": C,
|
|
94
|
+
"aria-expanded": _ ?? !1,
|
|
95
95
|
className: t.menuButton,
|
|
96
|
-
onClick:
|
|
96
|
+
onClick: g,
|
|
97
97
|
children: /* @__PURE__ */ l("svg", {
|
|
98
98
|
viewBox: "0 0 16 16",
|
|
99
99
|
width: "16",
|
|
@@ -107,7 +107,7 @@ function m({ brand: e, nav: i, actions: a, end: m, onMenuClick: h, menuExpanded:
|
|
|
107
107
|
})
|
|
108
108
|
})
|
|
109
109
|
}),
|
|
110
|
-
e != null && (d(e) ? /* @__PURE__ */ u(
|
|
110
|
+
e != null && (d(e) ? /* @__PURE__ */ u(x, {
|
|
111
111
|
href: e.href ?? "/",
|
|
112
112
|
"aria-label": [e.prefix, e.name].filter(Boolean).join(" "),
|
|
113
113
|
className: t.brand,
|
|
@@ -123,11 +123,11 @@ function m({ brand: e, nav: i, actions: a, end: m, onMenuClick: h, menuExpanded:
|
|
|
123
123
|
children: e
|
|
124
124
|
})),
|
|
125
125
|
i && i.length > 0 && /* @__PURE__ */ l("nav", {
|
|
126
|
-
"aria-label":
|
|
126
|
+
"aria-label": S,
|
|
127
127
|
className: t.nav,
|
|
128
128
|
children: /* @__PURE__ */ l("ul", {
|
|
129
129
|
className: t.navList,
|
|
130
|
-
children: i.map((e, n) => f(e) ? /* @__PURE__ */ l(p, { item: e }, e.id ?? `${n}-${e.label}`) : /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(
|
|
130
|
+
children: i.map((e, n) => f(e) ? /* @__PURE__ */ l(p, { item: e }, e.id ?? `${n}-${e.label}`) : /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(x, {
|
|
131
131
|
href: e.href,
|
|
132
132
|
"aria-current": e.active ? "page" : void 0,
|
|
133
133
|
"data-state": e.active ? "active" : void 0,
|
|
@@ -137,10 +137,13 @@ function m({ brand: e, nav: i, actions: a, end: m, onMenuClick: h, menuExpanded:
|
|
|
137
137
|
}) }, e.id ?? `${n}-${e.href}`))
|
|
138
138
|
})
|
|
139
139
|
}),
|
|
140
|
-
/* @__PURE__ */ l("div", {
|
|
141
|
-
|
|
140
|
+
a ? /* @__PURE__ */ l("div", {
|
|
141
|
+
className: t.center,
|
|
142
|
+
children: a
|
|
143
|
+
}) : /* @__PURE__ */ l("div", { className: t.spacer }),
|
|
144
|
+
m && m.length > 0 && /* @__PURE__ */ l("div", {
|
|
142
145
|
className: t.actions,
|
|
143
|
-
children:
|
|
146
|
+
children: m.map((e) => /* @__PURE__ */ l("button", {
|
|
144
147
|
type: "button",
|
|
145
148
|
"aria-label": e.label,
|
|
146
149
|
"aria-pressed": e.active ?? !1,
|
|
@@ -155,9 +158,9 @@ function m({ brand: e, nav: i, actions: a, end: m, onMenuClick: h, menuExpanded:
|
|
|
155
158
|
})
|
|
156
159
|
}, e.id))
|
|
157
160
|
}),
|
|
158
|
-
|
|
161
|
+
h && /* @__PURE__ */ l("div", {
|
|
159
162
|
className: t.end,
|
|
160
|
-
children:
|
|
163
|
+
children: h
|
|
161
164
|
})
|
|
162
165
|
]
|
|
163
166
|
});
|
|
@@ -1,25 +1,26 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
var e = {
|
|
4
|
-
header: "
|
|
5
|
-
skipLink: "
|
|
6
|
-
menuButton: "
|
|
7
|
-
brand: "
|
|
8
|
-
brandPrefix: "
|
|
9
|
-
brandName: "
|
|
10
|
-
nav: "
|
|
11
|
-
navList: "
|
|
12
|
-
navLink: "
|
|
13
|
-
navMenuWrapper: "
|
|
14
|
-
navMenuTrigger: "
|
|
15
|
-
chevron: "
|
|
16
|
-
navMenuPanel: "
|
|
17
|
-
navMenuItem: "
|
|
18
|
-
spacer: "
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
4
|
+
header: "_header_6njjo_2",
|
|
5
|
+
skipLink: "_skipLink_6njjo_14",
|
|
6
|
+
menuButton: "_menuButton_6njjo_36",
|
|
7
|
+
brand: "_brand_6njjo_59",
|
|
8
|
+
brandPrefix: "_brandPrefix_6njjo_69",
|
|
9
|
+
brandName: "_brandName_6njjo_73",
|
|
10
|
+
nav: "_nav_6njjo_77",
|
|
11
|
+
navList: "_navList_6njjo_81",
|
|
12
|
+
navLink: "_navLink_6njjo_90",
|
|
13
|
+
navMenuWrapper: "_navMenuWrapper_6njjo_119",
|
|
14
|
+
navMenuTrigger: "_navMenuTrigger_6njjo_124",
|
|
15
|
+
chevron: "_chevron_6njjo_156",
|
|
16
|
+
navMenuPanel: "_navMenuPanel_6njjo_164",
|
|
17
|
+
navMenuItem: "_navMenuItem_6njjo_197",
|
|
18
|
+
spacer: "_spacer_6njjo_219",
|
|
19
|
+
center: "_center_6njjo_226",
|
|
20
|
+
actions: "_actions_6njjo_235",
|
|
21
|
+
action: "_action_6njjo_235",
|
|
22
|
+
actionIcon: "_actionIcon_6njjo_269",
|
|
23
|
+
end: "_end_6njjo_277"
|
|
23
24
|
};
|
|
24
25
|
//#endregion
|
|
25
26
|
export { e as default };
|
|
@@ -1,40 +1,47 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import e from "./timeline.module.js";
|
|
4
|
-
import { cn as t, normalizeProgress as n } from "@cascivo/core";
|
|
5
|
-
import { jsx as
|
|
4
|
+
import { cn as t, normalizeProgress as n, normalizeTone as r } from "@cascivo/core";
|
|
5
|
+
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
6
6
|
//#region ../components/src/timeline/timeline.tsx
|
|
7
|
-
var
|
|
7
|
+
var o = {
|
|
8
8
|
pending: "upcoming",
|
|
9
9
|
active: "current",
|
|
10
10
|
complete: "complete",
|
|
11
11
|
error: "current"
|
|
12
|
+
}, s = {
|
|
13
|
+
neutral: "neutral",
|
|
14
|
+
info: "info",
|
|
15
|
+
success: "success",
|
|
16
|
+
warning: "warning",
|
|
17
|
+
danger: "danger"
|
|
12
18
|
};
|
|
13
|
-
function
|
|
14
|
-
return /* @__PURE__ */
|
|
15
|
-
"data-orientation":
|
|
16
|
-
className: t(e.list,
|
|
17
|
-
...
|
|
18
|
-
children:
|
|
19
|
-
"data-status":
|
|
19
|
+
function c({ items: c, orientation: l = "vertical", className: u, ...d }) {
|
|
20
|
+
return /* @__PURE__ */ i("ol", {
|
|
21
|
+
"data-orientation": l,
|
|
22
|
+
className: t(e.list, u),
|
|
23
|
+
...d,
|
|
24
|
+
children: c.map((t) => /* @__PURE__ */ a("li", {
|
|
25
|
+
"data-status": o[n(t.status ?? "pending")] ?? "upcoming",
|
|
26
|
+
"data-tone": t.tone ? s[r(t.tone)] ?? t.tone : void 0,
|
|
20
27
|
"aria-current": n(t.status ?? "pending") === "active" ? "step" : void 0,
|
|
21
28
|
className: e.item,
|
|
22
|
-
children: [/* @__PURE__ */
|
|
29
|
+
children: [/* @__PURE__ */ i("span", {
|
|
23
30
|
className: e.marker,
|
|
24
31
|
"aria-hidden": "true",
|
|
25
32
|
children: t.icon
|
|
26
|
-
}), /* @__PURE__ */
|
|
33
|
+
}), /* @__PURE__ */ a("div", {
|
|
27
34
|
className: e.content,
|
|
28
35
|
children: [
|
|
29
|
-
/* @__PURE__ */
|
|
36
|
+
/* @__PURE__ */ i("div", {
|
|
30
37
|
className: e.title,
|
|
31
38
|
children: t.title
|
|
32
39
|
}),
|
|
33
|
-
t.time ? /* @__PURE__ */
|
|
40
|
+
t.time ? /* @__PURE__ */ i("time", {
|
|
34
41
|
className: e.time,
|
|
35
42
|
children: t.time
|
|
36
43
|
}) : null,
|
|
37
|
-
t.description ? /* @__PURE__ */
|
|
44
|
+
t.description ? /* @__PURE__ */ i("div", {
|
|
38
45
|
className: e.description,
|
|
39
46
|
children: t.description
|
|
40
47
|
}) : null
|
|
@@ -44,4 +51,4 @@ function o({ items: o, orientation: s = "vertical", className: c, ...l }) {
|
|
|
44
51
|
});
|
|
45
52
|
}
|
|
46
53
|
//#endregion
|
|
47
|
-
export {
|
|
54
|
+
export { c as Timeline };
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
var e = {
|
|
4
|
-
list: "
|
|
5
|
-
item: "
|
|
6
|
-
marker: "
|
|
7
|
-
content: "
|
|
8
|
-
title: "
|
|
9
|
-
time: "
|
|
10
|
-
description: "
|
|
4
|
+
list: "_list_xfuv2_2",
|
|
5
|
+
item: "_item_xfuv2_21",
|
|
6
|
+
marker: "_marker_xfuv2_63",
|
|
7
|
+
content: "_content_xfuv2_129",
|
|
8
|
+
title: "_title_xfuv2_136",
|
|
9
|
+
time: "_time_xfuv2_143",
|
|
10
|
+
description: "_description_xfuv2_148"
|
|
11
11
|
};
|
|
12
12
|
//#endregion
|
|
13
13
|
export { e as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer cascivo.component{.
|
|
1
|
+
@layer cascivo.component{._header_6njjo_2{align-items:center;gap:var(--cascivo-space-2);block-size:var(--cascivo-shell-header-block-size);padding-inline:var(--cascivo-space-3);background:var(--cascivo-color-surface);border-block-end:1px solid var(--cascivo-color-border);font-family:var(--cascivo-font-sans);display:flex;position:relative}._skipLink_6njjo_14{z-index:100;padding:var(--cascivo-space-2) var(--cascivo-space-3);background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-control);color:var(--cascivo-color-text);font-size:var(--cascivo-text-sm);clip-path:inset(50%);text-decoration:none;position:absolute;inset-block-start:var(--cascivo-space-2);inset-inline-start:var(--cascivo-space-2)}._skipLink_6njjo_14:focus-visible{clip-path:none;box-shadow:var(--cascivo-focus-ring);outline:none}._menuButton_6njjo_36{border-radius:var(--cascivo-radius-control);block-size:2.5rem;inline-size:2.5rem;color:var(--cascivo-color-text);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}._menuButton_6njjo_36:hover{background:var(--cascivo-color-bg-subtle)}._menuButton_6njjo_36:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._brand_6njjo_59{align-items:baseline;gap:var(--cascivo-space-1);color:var(--cascivo-color-text);white-space:nowrap;font-size:var(--cascivo-text-sm);text-decoration:none;display:inline-flex}._brandPrefix_6njjo_69{font-weight:var(--cascivo-font-normal)}._brandName_6njjo_73{font-weight:var(--cascivo-font-semibold)}._nav_6njjo_77{min-inline-size:0}._navList_6njjo_81{align-items:center;gap:var(--cascivo-space-1);margin:0;padding:0;list-style:none;display:flex}._navLink_6njjo_90{padding-inline:var(--cascivo-space-3);padding-block:var(--cascivo-space-2);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);white-space:nowrap;border-radius:var(--cascivo-radius-control);transition:color var(--cascivo-duration-150) var(--cascivo-ease-out);align-items:center;text-decoration:none;display:inline-flex}._navLink_6njjo_90:hover{color:var(--cascivo-color-text);background:var(--cascivo-color-bg-subtle)}._navLink_6njjo_90:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._navLink_6njjo_90[data-state=active]{color:var(--cascivo-color-text);font-weight:var(--cascivo-font-semibold);background:var(--cascivo-color-bg-subtle)}._navMenuWrapper_6njjo_119{list-style:none;position:relative}._navMenuTrigger_6njjo_124{align-items:center;gap:var(--cascivo-space-1);padding-inline:var(--cascivo-space-3);padding-block:var(--cascivo-space-2);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);border-radius:var(--cascivo-radius-control);cursor:pointer;white-space:nowrap;transition:color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;display:inline-flex}._navMenuTrigger_6njjo_124:hover{color:var(--cascivo-color-text);background:var(--cascivo-color-bg-subtle)}._navMenuTrigger_6njjo_124:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._navMenuTrigger_6njjo_124[data-state=active]{color:var(--cascivo-color-text);font-weight:var(--cascivo-font-semibold);background:var(--cascivo-color-bg-subtle)}._chevron_6njjo_156{transition:transform var(--cascivo-duration-150) var(--cascivo-ease-out)}[aria-expanded=true] ._chevron_6njjo_156{transform:rotate(180deg)}._navMenuPanel_6njjo_164{position-anchor:var(--cascivo-popover-anchor,inherit);margin:var(--cascivo-space-1) 0 0;padding:var(--cascivo-space-1);background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-control);min-inline-size:12rem;box-shadow:var(--cascivo-shadow-md);transition:translate var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;list-style:none;position:fixed;inset-block-start:anchor(end);inset-inline-start:anchor(start);translate:0}@starting-style{._navMenuPanel_6njjo_164{translate:0 -.5rem}}._navMenuPanel_6njjo_164[data-state=closed]{transition:translate var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete;translate:0 -.5rem}._navMenuItem_6njjo_197{padding-inline:var(--cascivo-space-3);padding-block:var(--cascivo-space-2);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);border-radius:var(--cascivo-radius-item);white-space:nowrap;text-decoration:none;display:block}._navMenuItem_6njjo_197:hover,._navMenuItem_6njjo_197:focus-visible{background:var(--cascivo-color-bg-subtle);outline:none}._navMenuItem_6njjo_197[data-state=active]{background:var(--cascivo-color-active-bg);font-weight:var(--cascivo-font-medium)}._spacer_6njjo_219{flex:1}._center_6njjo_226{min-inline-size:0;padding-inline:var(--cascivo-space-2);flex:1;justify-content:center;align-items:center;display:flex}._actions_6njjo_235{align-items:center;gap:var(--cascivo-space-1);display:flex}._action_6njjo_235{border:none;block-size:2.5rem;inline-size:2.5rem;color:var(--cascivo-color-text);cursor:pointer;border-radius:var(--cascivo-radius-control);background:0 0;border-block-end:2px solid #0000;justify-content:center;align-items:center;display:inline-flex}._action_6njjo_235:hover{background:var(--cascivo-color-bg-subtle)}._action_6njjo_235:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._action_6njjo_235[data-state=active]{border-block-end-color:var(--cascivo-color-accent);background:var(--cascivo-color-bg-subtle)}._actionIcon_6njjo_269{justify-content:center;align-items:center;block-size:1.25rem;inline-size:1.25rem;display:inline-flex}._end_6njjo_277{align-items:center;gap:var(--cascivo-space-2);padding-inline-start:var(--cascivo-space-2);display:flex}}
|
|
@@ -76,24 +76,24 @@ function p({ item: n }) {
|
|
|
76
76
|
})]
|
|
77
77
|
});
|
|
78
78
|
}
|
|
79
|
-
function m({ brand: e, nav: i,
|
|
79
|
+
function m({ brand: e, nav: i, center: a, actions: m, end: h, onMenuClick: g, menuExpanded: _, skipToContentHref: v = "#cascade-main", labels: y, className: b }) {
|
|
80
80
|
o();
|
|
81
|
-
let
|
|
81
|
+
let x = r(), S = y?.nav ?? c(s.shellHeader.nav), C = _ ? y?.closeMenu ?? c(s.shellHeader.closeMenu) : y?.openMenu ?? c(s.shellHeader.openMenu);
|
|
82
82
|
return /* @__PURE__ */ u("header", {
|
|
83
83
|
role: "banner",
|
|
84
|
-
className: n(t.header,
|
|
84
|
+
className: n(t.header, b),
|
|
85
85
|
children: [
|
|
86
|
-
|
|
87
|
-
href:
|
|
86
|
+
v !== !1 && /* @__PURE__ */ l("a", {
|
|
87
|
+
href: v,
|
|
88
88
|
className: t.skipLink,
|
|
89
|
-
children:
|
|
89
|
+
children: y?.skipToContent ?? c(s.shellHeader.skipToContent)
|
|
90
90
|
}),
|
|
91
|
-
|
|
91
|
+
g && /* @__PURE__ */ l("button", {
|
|
92
92
|
type: "button",
|
|
93
|
-
"aria-label":
|
|
94
|
-
"aria-expanded":
|
|
93
|
+
"aria-label": C,
|
|
94
|
+
"aria-expanded": _ ?? !1,
|
|
95
95
|
className: t.menuButton,
|
|
96
|
-
onClick:
|
|
96
|
+
onClick: g,
|
|
97
97
|
children: /* @__PURE__ */ l("svg", {
|
|
98
98
|
viewBox: "0 0 16 16",
|
|
99
99
|
width: "16",
|
|
@@ -107,7 +107,7 @@ function m({ brand: e, nav: i, actions: a, end: m, onMenuClick: h, menuExpanded:
|
|
|
107
107
|
})
|
|
108
108
|
})
|
|
109
109
|
}),
|
|
110
|
-
e != null && (d(e) ? /* @__PURE__ */ u(
|
|
110
|
+
e != null && (d(e) ? /* @__PURE__ */ u(x, {
|
|
111
111
|
href: e.href ?? "/",
|
|
112
112
|
"aria-label": [e.prefix, e.name].filter(Boolean).join(" "),
|
|
113
113
|
className: t.brand,
|
|
@@ -123,11 +123,11 @@ function m({ brand: e, nav: i, actions: a, end: m, onMenuClick: h, menuExpanded:
|
|
|
123
123
|
children: e
|
|
124
124
|
})),
|
|
125
125
|
i && i.length > 0 && /* @__PURE__ */ l("nav", {
|
|
126
|
-
"aria-label":
|
|
126
|
+
"aria-label": S,
|
|
127
127
|
className: t.nav,
|
|
128
128
|
children: /* @__PURE__ */ l("ul", {
|
|
129
129
|
className: t.navList,
|
|
130
|
-
children: i.map((e, n) => f(e) ? /* @__PURE__ */ l(p, { item: e }, e.id ?? `${n}-${e.label}`) : /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(
|
|
130
|
+
children: i.map((e, n) => f(e) ? /* @__PURE__ */ l(p, { item: e }, e.id ?? `${n}-${e.label}`) : /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(x, {
|
|
131
131
|
href: e.href,
|
|
132
132
|
"aria-current": e.active ? "page" : void 0,
|
|
133
133
|
"data-state": e.active ? "active" : void 0,
|
|
@@ -137,10 +137,13 @@ function m({ brand: e, nav: i, actions: a, end: m, onMenuClick: h, menuExpanded:
|
|
|
137
137
|
}) }, e.id ?? `${n}-${e.href}`))
|
|
138
138
|
})
|
|
139
139
|
}),
|
|
140
|
-
/* @__PURE__ */ l("div", {
|
|
141
|
-
|
|
140
|
+
a ? /* @__PURE__ */ l("div", {
|
|
141
|
+
className: t.center,
|
|
142
|
+
children: a
|
|
143
|
+
}) : /* @__PURE__ */ l("div", { className: t.spacer }),
|
|
144
|
+
m && m.length > 0 && /* @__PURE__ */ l("div", {
|
|
142
145
|
className: t.actions,
|
|
143
|
-
children:
|
|
146
|
+
children: m.map((e) => /* @__PURE__ */ l("button", {
|
|
144
147
|
type: "button",
|
|
145
148
|
"aria-label": e.label,
|
|
146
149
|
"aria-pressed": e.active ?? !1,
|
|
@@ -155,9 +158,9 @@ function m({ brand: e, nav: i, actions: a, end: m, onMenuClick: h, menuExpanded:
|
|
|
155
158
|
})
|
|
156
159
|
}, e.id))
|
|
157
160
|
}),
|
|
158
|
-
|
|
161
|
+
h && /* @__PURE__ */ l("div", {
|
|
159
162
|
className: t.end,
|
|
160
|
-
children:
|
|
163
|
+
children: h
|
|
161
164
|
})
|
|
162
165
|
]
|
|
163
166
|
});
|
|
@@ -2,25 +2,26 @@
|
|
|
2
2
|
|
|
3
3
|
import './shell-header.css';
|
|
4
4
|
var e = {
|
|
5
|
-
header: "
|
|
6
|
-
skipLink: "
|
|
7
|
-
menuButton: "
|
|
8
|
-
brand: "
|
|
9
|
-
brandPrefix: "
|
|
10
|
-
brandName: "
|
|
11
|
-
nav: "
|
|
12
|
-
navList: "
|
|
13
|
-
navLink: "
|
|
14
|
-
navMenuWrapper: "
|
|
15
|
-
navMenuTrigger: "
|
|
16
|
-
chevron: "
|
|
17
|
-
navMenuPanel: "
|
|
18
|
-
navMenuItem: "
|
|
19
|
-
spacer: "
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
5
|
+
header: "_header_6njjo_2",
|
|
6
|
+
skipLink: "_skipLink_6njjo_14",
|
|
7
|
+
menuButton: "_menuButton_6njjo_36",
|
|
8
|
+
brand: "_brand_6njjo_59",
|
|
9
|
+
brandPrefix: "_brandPrefix_6njjo_69",
|
|
10
|
+
brandName: "_brandName_6njjo_73",
|
|
11
|
+
nav: "_nav_6njjo_77",
|
|
12
|
+
navList: "_navList_6njjo_81",
|
|
13
|
+
navLink: "_navLink_6njjo_90",
|
|
14
|
+
navMenuWrapper: "_navMenuWrapper_6njjo_119",
|
|
15
|
+
navMenuTrigger: "_navMenuTrigger_6njjo_124",
|
|
16
|
+
chevron: "_chevron_6njjo_156",
|
|
17
|
+
navMenuPanel: "_navMenuPanel_6njjo_164",
|
|
18
|
+
navMenuItem: "_navMenuItem_6njjo_197",
|
|
19
|
+
spacer: "_spacer_6njjo_219",
|
|
20
|
+
center: "_center_6njjo_226",
|
|
21
|
+
actions: "_actions_6njjo_235",
|
|
22
|
+
action: "_action_6njjo_235",
|
|
23
|
+
actionIcon: "_actionIcon_6njjo_269",
|
|
24
|
+
end: "_end_6njjo_277"
|
|
24
25
|
};
|
|
25
26
|
//#endregion
|
|
26
27
|
export { e as default };
|
package/dist/styles.css
CHANGED
|
@@ -1066,7 +1066,7 @@
|
|
|
1066
1066
|
/*$vite$:1*/
|
|
1067
1067
|
@layer cascivo.component{._sheet_gx7nz_2{background:var(--cascivo-color-surface);box-shadow:var(--cascivo-shadow-overlay);border:none;flex-direction:column;margin:0;padding:0;position:fixed}._sheet_gx7nz_2:popover-open{display:flex}._sheet_gx7nz_2{transition:translate var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete}._sheet_gx7nz_2[data-state=closed]{transition:translate var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete}._sheet_gx7nz_2[data-side=end]{border-inline-start:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay) 0 0 var(--cascivo-radius-overlay);width:min(24rem,90vw);height:100%;inset-block:0;inset-inline-end:0;translate:100%}._sheet_gx7nz_2[data-side=end][data-state=open]{translate:0}@starting-style{._sheet_gx7nz_2[data-side=end][data-state=open]{translate:100%}}._sheet_gx7nz_2[data-side=start]{border-inline-end:1px solid var(--cascivo-color-border);border-radius:0 var(--cascivo-radius-overlay) var(--cascivo-radius-overlay) 0;width:min(24rem,90vw);height:100%;inset-block:0;inset-inline-start:0;translate:-100%}._sheet_gx7nz_2[data-side=start][data-state=open]{translate:0}@starting-style{._sheet_gx7nz_2[data-side=start][data-state=open]{translate:-100%}}._sheet_gx7nz_2[data-side=top]{border-block-end:1px solid var(--cascivo-color-border);border-radius:0 0 var(--cascivo-radius-overlay) var(--cascivo-radius-overlay);width:100%;height:auto;max-height:80vh;inset-block-start:0;inset-inline:0;translate:0 -100%}._sheet_gx7nz_2[data-side=top][data-state=open]{translate:0}@starting-style{._sheet_gx7nz_2[data-side=top][data-state=open]{translate:0 -100%}}._sheet_gx7nz_2[data-side=bottom]{border-block-start:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay) var(--cascivo-radius-overlay) 0 0;width:100%;height:auto;max-height:80vh;inset-block-end:0;inset-inline:0;translate:0 100%}._sheet_gx7nz_2[data-side=bottom][data-state=open]{translate:0}@starting-style{._sheet_gx7nz_2[data-side=bottom][data-state=open]{translate:0 100%}}._sheet_gx7nz_2::backdrop{opacity:1;transition:opacity var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;background-color:#0006}@starting-style{._sheet_gx7nz_2::backdrop{opacity:0}}._sheet_gx7nz_2[data-state=closed]::backdrop{opacity:0;transition:opacity var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete}._header_gx7nz_141{padding:var(--cascivo-space-4) var(--cascivo-space-6);border-block-end:1px solid var(--cascivo-color-border);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}._title_gx7nz_150{font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text)}._close_gx7nz_156{width:2rem;height:2rem;font-size:var(--cascivo-text-sm);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-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}._close_gx7nz_156:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._close_gx7nz_156:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._body_gx7nz_184{gap:var(--cascivo-dialog-body-gap,var(--cascivo-space-5));padding:var(--cascivo-space-6);flex-direction:column;flex:1;display:flex;overflow-y:auto}}
|
|
1068
1068
|
/*$vite$:1*/
|
|
1069
|
-
@layer cascivo.component{.
|
|
1069
|
+
@layer cascivo.component{._header_6njjo_2{align-items:center;gap:var(--cascivo-space-2);block-size:var(--cascivo-shell-header-block-size);padding-inline:var(--cascivo-space-3);background:var(--cascivo-color-surface);border-block-end:1px solid var(--cascivo-color-border);font-family:var(--cascivo-font-sans);display:flex;position:relative}._skipLink_6njjo_14{z-index:100;padding:var(--cascivo-space-2) var(--cascivo-space-3);background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-control);color:var(--cascivo-color-text);font-size:var(--cascivo-text-sm);clip-path:inset(50%);text-decoration:none;position:absolute;inset-block-start:var(--cascivo-space-2);inset-inline-start:var(--cascivo-space-2)}._skipLink_6njjo_14:focus-visible{clip-path:none;box-shadow:var(--cascivo-focus-ring);outline:none}._menuButton_6njjo_36{border-radius:var(--cascivo-radius-control);block-size:2.5rem;inline-size:2.5rem;color:var(--cascivo-color-text);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}._menuButton_6njjo_36:hover{background:var(--cascivo-color-bg-subtle)}._menuButton_6njjo_36:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._brand_6njjo_59{align-items:baseline;gap:var(--cascivo-space-1);color:var(--cascivo-color-text);white-space:nowrap;font-size:var(--cascivo-text-sm);text-decoration:none;display:inline-flex}._brandPrefix_6njjo_69{font-weight:var(--cascivo-font-normal)}._brandName_6njjo_73{font-weight:var(--cascivo-font-semibold)}._nav_6njjo_77{min-inline-size:0}._navList_6njjo_81{align-items:center;gap:var(--cascivo-space-1);margin:0;padding:0;list-style:none;display:flex}._navLink_6njjo_90{padding-inline:var(--cascivo-space-3);padding-block:var(--cascivo-space-2);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);white-space:nowrap;border-radius:var(--cascivo-radius-control);transition:color var(--cascivo-duration-150) var(--cascivo-ease-out);align-items:center;text-decoration:none;display:inline-flex}._navLink_6njjo_90:hover{color:var(--cascivo-color-text);background:var(--cascivo-color-bg-subtle)}._navLink_6njjo_90:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._navLink_6njjo_90[data-state=active]{color:var(--cascivo-color-text);font-weight:var(--cascivo-font-semibold);background:var(--cascivo-color-bg-subtle)}._navMenuWrapper_6njjo_119{list-style:none;position:relative}._navMenuTrigger_6njjo_124{align-items:center;gap:var(--cascivo-space-1);padding-inline:var(--cascivo-space-3);padding-block:var(--cascivo-space-2);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);border-radius:var(--cascivo-radius-control);cursor:pointer;white-space:nowrap;transition:color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;display:inline-flex}._navMenuTrigger_6njjo_124:hover{color:var(--cascivo-color-text);background:var(--cascivo-color-bg-subtle)}._navMenuTrigger_6njjo_124:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._navMenuTrigger_6njjo_124[data-state=active]{color:var(--cascivo-color-text);font-weight:var(--cascivo-font-semibold);background:var(--cascivo-color-bg-subtle)}._chevron_6njjo_156{transition:transform var(--cascivo-duration-150) var(--cascivo-ease-out)}[aria-expanded=true] ._chevron_6njjo_156{transform:rotate(180deg)}._navMenuPanel_6njjo_164{position-anchor:var(--cascivo-popover-anchor,inherit);margin:var(--cascivo-space-1) 0 0;padding:var(--cascivo-space-1);background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-control);min-inline-size:12rem;box-shadow:var(--cascivo-shadow-md);transition:translate var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;list-style:none;position:fixed;inset-block-start:anchor(end);inset-inline-start:anchor(start);translate:0}@starting-style{._navMenuPanel_6njjo_164{translate:0 -.5rem}}._navMenuPanel_6njjo_164[data-state=closed]{transition:translate var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete;translate:0 -.5rem}._navMenuItem_6njjo_197{padding-inline:var(--cascivo-space-3);padding-block:var(--cascivo-space-2);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);border-radius:var(--cascivo-radius-item);white-space:nowrap;text-decoration:none;display:block}._navMenuItem_6njjo_197:hover,._navMenuItem_6njjo_197:focus-visible{background:var(--cascivo-color-bg-subtle);outline:none}._navMenuItem_6njjo_197[data-state=active]{background:var(--cascivo-color-active-bg);font-weight:var(--cascivo-font-medium)}._spacer_6njjo_219{flex:1}._center_6njjo_226{min-inline-size:0;padding-inline:var(--cascivo-space-2);flex:1;justify-content:center;align-items:center;display:flex}._actions_6njjo_235{align-items:center;gap:var(--cascivo-space-1);display:flex}._action_6njjo_235{border:none;block-size:2.5rem;inline-size:2.5rem;color:var(--cascivo-color-text);cursor:pointer;border-radius:var(--cascivo-radius-control);background:0 0;border-block-end:2px solid #0000;justify-content:center;align-items:center;display:inline-flex}._action_6njjo_235:hover{background:var(--cascivo-color-bg-subtle)}._action_6njjo_235:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._action_6njjo_235[data-state=active]{border-block-end-color:var(--cascivo-color-accent);background:var(--cascivo-color-bg-subtle)}._actionIcon_6njjo_269{justify-content:center;align-items:center;block-size:1.25rem;inline-size:1.25rem;display:inline-flex}._end_6njjo_277{align-items:center;gap:var(--cascivo-space-2);padding-inline-start:var(--cascivo-space-2);display:flex}}
|
|
1070
1070
|
/*$vite$:1*/
|
|
1071
1071
|
@layer cascivo.component{._sideNav_1v53b_2{box-sizing:border-box;inline-size:var(--cascivo-sidenav-inline-size,16rem);block-size:100%;max-block-size:100%;padding:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);background-color:var(--cascivo-sidenav-bg,var(--cascivo-color-surface));border-inline-end:1px solid var(--cascivo-color-border);transition:inline-size var(--cascivo-motion-emphasis);flex-direction:column;display:flex;overflow:hidden auto}._sideNav_1v53b_2[data-state=collapsed]{inline-size:var(--cascivo-sidenav-rail-inline-size,4rem)}._sideNav_1v53b_2[data-state=collapsed] ._label_1v53b_24[data-rail-hidden],._sideNav_1v53b_2[data-state=collapsed] ._trailing_1v53b_25[data-rail-hidden],._sideNav_1v53b_2[data-state=collapsed] ._groupIndicator_1v53b_29{display:none}._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]{position:relative}._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:hover,._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:focus-within{inline-size:var(--cascivo-sidenav-inline-size,16rem);z-index:10;box-shadow:var(--cascivo-shadow-md);position:absolute;inset-block:0}:is(._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:hover,._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:focus-within) ._label_1v53b_24[data-rail-hidden],:is(._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:hover,._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:focus-within) ._trailing_1v53b_25[data-rail-hidden]{display:initial}:is(._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:hover,._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:focus-within) ._link_1v53b_50,:is(._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:hover,._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:focus-within) ._groupTrigger_1v53b_51{padding-inline:var(--cascivo-space-3);justify-content:flex-start}:is(._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:hover,._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:focus-within) ._groupIndicator_1v53b_29{display:initial}:is(._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:hover,._sideNav_1v53b_2[data-expand-on-hover][data-state=collapsed]:focus-within) ._fallbackIcon_1v53b_60{display:none}._list_1v53b_67,._sublistInner_1v53b_68,._groupItems_1v53b_69{gap:var(--cascivo-space-1);padding:0;padding-inline:var(--cascivo-space-2);flex-direction:column;margin:0;list-style:none;display:flex}._group_1v53b_29{display:contents}._group_1v53b_29+._group_1v53b_29>._groupLabel_1v53b_84,._group_1v53b_29+._group_1v53b_29>._groupItems_1v53b_69:first-child{border-block-start:1px solid var(--cascivo-color-border);margin-block-start:var(--cascivo-space-4);padding-block-start:var(--cascivo-space-3)}._groupLabel_1v53b_84{padding-inline:var(--cascivo-space-3);padding-block:var(--cascivo-space-2) var(--cascivo-space-1);font-size:var(--cascivo-text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--cascivo-color-foreground-muted);margin:0;font-weight:600}._link_1v53b_50,._groupTrigger_1v53b_51{align-items:center;gap:var(--cascivo-space-2);inline-size:100%;padding-block:var(--cascivo-space-2);padding-inline:var(--cascivo-space-2);font-family:inherit;font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-tight);text-align:start;white-space:nowrap;color:var(--cascivo-color-text-subtle);border-radius:var(--cascivo-radius-item);cursor:pointer;transition:color var(--cascivo-duration-150) var(--cascivo-ease-out), background-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;text-decoration:none;display:flex;position:relative}:is(._link_1v53b_50,._groupTrigger_1v53b_51):hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}:is(._link_1v53b_50,._groupTrigger_1v53b_51):focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._link_1v53b_50[data-state=active]{color:var(--cascivo-color-text);font-weight:var(--cascivo-font-medium);background-color:var(--cascivo-color-accent-subtle)}._link_1v53b_50[data-state=active]:before{content:"";inset-block:var(--cascivo-radius-item);background:var(--cascivo-color-accent);border-radius:var(--cascivo-radius-full);inline-size:2px;position:absolute;inset-inline-start:0}._link_1v53b_50[data-tone=danger]{color:var(--cascivo-color-destructive)}._link_1v53b_50[data-tone=warning]{color:var(--cascivo-color-warning)}._link_1v53b_50[data-tone=success]{color:var(--cascivo-color-success)}._link_1v53b_50:disabled,._link_1v53b_50[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}._trailing_1v53b_25{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-subtle);flex-shrink:0;align-items:center;margin-inline-start:auto;display:inline-flex}._checkMark_1v53b_185{color:var(--cascivo-color-accent);flex-shrink:0;margin-inline-start:auto}._icon_1v53b_191{inline-size:var(--cascivo-space-4);block-size:var(--cascivo-space-4);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}._fallbackIcon_1v53b_60{background:var(--cascivo-color-bg-subtle);block-size:1.25rem;inline-size:1.25rem;font-size:.6875rem;font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}._label_1v53b_24{text-overflow:ellipsis;overflow:hidden}._groupIndicator_1v53b_29{transition:rotate var(--cascivo-motion-emphasis);flex-shrink:0;margin-inline-start:auto}._groupTrigger_1v53b_51[data-state=open] ._groupIndicator_1v53b_29{rotate:180deg}._sublist_1v53b_68{visibility:hidden;transition:grid-template-rows var(--cascivo-motion-exit), visibility var(--cascivo-motion-exit);grid-template-rows:0fr;display:grid}._sublist_1v53b_68[data-state=open]{visibility:visible;transition:grid-template-rows var(--cascivo-motion-enter), visibility var(--cascivo-motion-enter);grid-template-rows:1fr}._sublistInner_1v53b_68{min-block-size:0;overflow:hidden}._sublink_1v53b_251{padding-inline-start:calc(var(--cascivo-space-3) + var(--cascivo-space-4) + var(--cascivo-space-2))}._sublink_1v53b_251[data-selected]{color:var(--cascivo-color-text);font-weight:var(--cascivo-font-medium)}._subSeparator_1v53b_263{block-size:1px;margin-block:var(--cascivo-space-1);margin-inline:var(--cascivo-space-3);background:var(--cascivo-color-border)}._subGroupLabel_1v53b_270{padding-inline-start:calc(var(--cascivo-space-3) + var(--cascivo-space-4) + var(--cascivo-space-2));padding-block:var(--cascivo-space-1);font-size:var(--cascivo-text-xs);font-weight:var(--cascivo-font-semibold);letter-spacing:.05em;text-transform:uppercase;color:var(--cascivo-color-text-subtle)}._header_1v53b_282{padding-block:var(--cascivo-space-2);padding-inline:var(--cascivo-space-2);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle)}._footer_1v53b_289{padding-block:var(--cascivo-space-2);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle)}._customItem_1v53b_296{padding-block:var(--cascivo-space-2);padding-inline:var(--cascivo-space-2)}._collapseToggle_1v53b_301{padding-block:var(--cascivo-space-2);color:var(--cascivo-color-text-subtle);border-radius:var(--cascivo-radius-control);cursor:pointer;transition:color var(--cascivo-duration-150) var(--cascivo-ease-out), background-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;justify-content:center;align-items:center;margin-block-start:auto;display:flex}._collapseToggle_1v53b_301:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._collapseToggle_1v53b_301:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._collapseIcon_1v53b_327{transition:rotate var(--cascivo-motion-emphasis)}._sideNav_1v53b_2[data-state=collapsed] ._collapseIcon_1v53b_327{rotate:180deg}._railFlyout_1v53b_336{min-inline-size:11rem;padding:var(--cascivo-space-1);background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-md);margin:0;position:absolute;inset-block-start:anchor(start);inset-inline-start:anchor(end)}._railFlyout_1v53b_336:popover-open{flex-direction:column;gap:2px;display:flex}@starting-style{._railFlyout_1v53b_336:popover-open{opacity:0;translate:-4px}}._railFlyout_1v53b_336{transition:opacity var(--cascivo-duration-150) var(--cascivo-ease-out), translate var(--cascivo-duration-150) var(--cascivo-ease-out), display var(--cascivo-duration-150) var(--cascivo-ease-out) allow-discrete, overlay var(--cascivo-duration-150) var(--cascivo-ease-out) allow-discrete}._railFlyoutCaption_1v53b_368{padding-block:var(--cascivo-space-1);padding-inline:var(--cascivo-space-3);font-size:var(--cascivo-text-xs);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text-subtle);text-transform:uppercase;letter-spacing:.05em}._flyoutItem_1v53b_378{border-inline-start:none;padding-inline-start:var(--cascivo-space-3)}._flyoutSeparator_1v53b_383{block-size:1px;margin-block:var(--cascivo-space-1);margin-inline:var(--cascivo-space-2);background:var(--cascivo-color-border)}}
|
|
1072
1072
|
/*$vite$:1*/
|
|
@@ -1108,7 +1108,7 @@
|
|
|
1108
1108
|
/*$vite$:1*/
|
|
1109
1109
|
@layer cascivo.component{._wrapper_auxoq_2{gap:var(--cascivo-space-1);min-inline-size:0;font-family:var(--cascivo-font-sans);flex-direction:column;display:flex}._wrapper_auxoq_2[data-size=sm]{--_height:2rem;--_font:var(--cascivo-text-sm);--_px:var(--cascivo-space-3)}._wrapper_auxoq_2[data-size=md]{--_height:2.5rem;--_font:var(--cascivo-text-sm);--_px:var(--cascivo-space-4)}._wrapper_auxoq_2[data-size=lg]{--_height:3rem;--_font:var(--cascivo-text-base);--_px:var(--cascivo-space-4)}._label_auxoq_29{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-snug)}._input_auxoq_36{block-size:var(--_height,2.5rem);padding-inline:var(--_px,var(--cascivo-space-4));font-family:var(--cascivo-font-sans);font-size:var(--_font,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}._input_auxoq_36:hover:not(:disabled):not(:focus-visible){border-color:var(--cascivo-color-border-strong)}._input_auxoq_36:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._input_auxoq_36:disabled{opacity:.5;cursor:not-allowed;background-color:var(--cascivo-color-bg-subtle)}._wrapper_auxoq_2[data-state=error] ._input_auxoq_36{border-color:var(--cascivo-color-danger)}._error_auxoq_70{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-danger)}._hint_auxoq_75{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-muted)}}
|
|
1110
1110
|
/*$vite$:1*/
|
|
1111
|
-
@layer cascivo.component{.
|
|
1111
|
+
@layer cascivo.component{._list_xfuv2_2{--_marker-size:.875rem;--_track:var(--cascivo-color-border);font-family:var(--cascivo-font-sans);color:var(--cascivo-color-text);margin:0;padding:0;list-style:none;display:flex}._list_xfuv2_2[data-orientation=vertical]{flex-direction:column}._list_xfuv2_2[data-orientation=horizontal]{flex-direction:row}._item_xfuv2_21{gap:var(--cascivo-space-3);display:flex;position:relative}._list_xfuv2_2[data-orientation=vertical] ._item_xfuv2_21{flex-direction:row;padding-block-end:var(--cascivo-space-5)}._list_xfuv2_2[data-orientation=horizontal] ._item_xfuv2_21{flex-direction:column;flex:1;padding-inline-end:var(--cascivo-space-5)}._list_xfuv2_2[data-orientation=vertical] ._item_xfuv2_21:before{content:"";inline-size:1px;block-size:calc(100% - var(--_marker-size));background-color:var(--_track);position:absolute;inset-block-start:var(--_marker-size);inset-inline-start:calc(var(--_marker-size) / 2)}._list_xfuv2_2[data-orientation=horizontal] ._item_xfuv2_21:before{content:"";block-size:1px;inline-size:calc(100% - var(--_marker-size));background-color:var(--_track);position:absolute;inset-block-start:calc(var(--_marker-size) / 2);inset-inline-start:var(--_marker-size)}._item_xfuv2_21:last-child:before{display:none}._marker_xfuv2_63{inline-size:var(--_marker-size);block-size:var(--_marker-size);border-radius:var(--cascivo-radius-full);font-size:var(--cascivo-text-xs);border:2px solid var(--cascivo-color-border);background-color:var(--cascivo-color-surface);box-sizing:border-box;flex:none;justify-content:center;align-items:center;line-height:1;display:inline-flex}._item_xfuv2_21[data-status=complete] ._marker_xfuv2_63{border-color:var(--cascivo-color-success);background-color:var(--cascivo-color-success);color:var(--cascivo-color-success-foreground)}._item_xfuv2_21[data-status=current] ._marker_xfuv2_63{border-color:var(--cascivo-color-primary);background-color:var(--cascivo-color-primary);color:var(--cascivo-color-primary-fg)}._item_xfuv2_21[data-status=upcoming] ._marker_xfuv2_63{border-color:var(--cascivo-color-border-strong);background-color:var(--cascivo-color-surface);color:var(--cascivo-color-text-subtle)}._item_xfuv2_21[data-tone=neutral] ._marker_xfuv2_63{border-color:var(--cascivo-color-border-strong);background-color:var(--cascivo-color-border-strong);color:var(--cascivo-color-text-on-accent)}._item_xfuv2_21[data-tone=info] ._marker_xfuv2_63{border-color:var(--cascivo-color-info);background-color:var(--cascivo-color-info);color:var(--cascivo-color-info-foreground)}._item_xfuv2_21[data-tone=success] ._marker_xfuv2_63{border-color:var(--cascivo-color-success);background-color:var(--cascivo-color-success);color:var(--cascivo-color-success-foreground)}._item_xfuv2_21[data-tone=warning] ._marker_xfuv2_63{border-color:var(--cascivo-color-warning);background-color:var(--cascivo-color-warning);color:var(--cascivo-color-warning-foreground)}._item_xfuv2_21[data-tone=danger] ._marker_xfuv2_63{border-color:var(--cascivo-color-destructive);background-color:var(--cascivo-color-destructive);color:var(--cascivo-color-destructive-foreground)}._content_xfuv2_129{gap:var(--cascivo-space-1);flex-direction:column;padding-block-start:calc((var(--_marker-size) - 1rem) / 2);display:flex}._title_xfuv2_136{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-semibold);line-height:var(--cascivo-leading-tight);color:var(--cascivo-color-text)}._time_xfuv2_143{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-subtle)}._description_xfuv2_148{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-normal)}}@media (forced-colors:active){._marker_xfuv2_63{border:2px solid canvastext}._item_xfuv2_21[data-status=current] ._marker_xfuv2_63{background-color:highlight;border-color:highlight}}
|
|
1112
1112
|
/*$vite$:1*/
|
|
1113
1113
|
@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}}
|
|
1114
1114
|
/*$vite$:1*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer cascivo.component{.
|
|
1
|
+
@layer cascivo.component{._list_xfuv2_2{--_marker-size:.875rem;--_track:var(--cascivo-color-border);font-family:var(--cascivo-font-sans);color:var(--cascivo-color-text);margin:0;padding:0;list-style:none;display:flex}._list_xfuv2_2[data-orientation=vertical]{flex-direction:column}._list_xfuv2_2[data-orientation=horizontal]{flex-direction:row}._item_xfuv2_21{gap:var(--cascivo-space-3);display:flex;position:relative}._list_xfuv2_2[data-orientation=vertical] ._item_xfuv2_21{flex-direction:row;padding-block-end:var(--cascivo-space-5)}._list_xfuv2_2[data-orientation=horizontal] ._item_xfuv2_21{flex-direction:column;flex:1;padding-inline-end:var(--cascivo-space-5)}._list_xfuv2_2[data-orientation=vertical] ._item_xfuv2_21:before{content:"";inline-size:1px;block-size:calc(100% - var(--_marker-size));background-color:var(--_track);position:absolute;inset-block-start:var(--_marker-size);inset-inline-start:calc(var(--_marker-size) / 2)}._list_xfuv2_2[data-orientation=horizontal] ._item_xfuv2_21:before{content:"";block-size:1px;inline-size:calc(100% - var(--_marker-size));background-color:var(--_track);position:absolute;inset-block-start:calc(var(--_marker-size) / 2);inset-inline-start:var(--_marker-size)}._item_xfuv2_21:last-child:before{display:none}._marker_xfuv2_63{inline-size:var(--_marker-size);block-size:var(--_marker-size);border-radius:var(--cascivo-radius-full);font-size:var(--cascivo-text-xs);border:2px solid var(--cascivo-color-border);background-color:var(--cascivo-color-surface);box-sizing:border-box;flex:none;justify-content:center;align-items:center;line-height:1;display:inline-flex}._item_xfuv2_21[data-status=complete] ._marker_xfuv2_63{border-color:var(--cascivo-color-success);background-color:var(--cascivo-color-success);color:var(--cascivo-color-success-foreground)}._item_xfuv2_21[data-status=current] ._marker_xfuv2_63{border-color:var(--cascivo-color-primary);background-color:var(--cascivo-color-primary);color:var(--cascivo-color-primary-fg)}._item_xfuv2_21[data-status=upcoming] ._marker_xfuv2_63{border-color:var(--cascivo-color-border-strong);background-color:var(--cascivo-color-surface);color:var(--cascivo-color-text-subtle)}._item_xfuv2_21[data-tone=neutral] ._marker_xfuv2_63{border-color:var(--cascivo-color-border-strong);background-color:var(--cascivo-color-border-strong);color:var(--cascivo-color-text-on-accent)}._item_xfuv2_21[data-tone=info] ._marker_xfuv2_63{border-color:var(--cascivo-color-info);background-color:var(--cascivo-color-info);color:var(--cascivo-color-info-foreground)}._item_xfuv2_21[data-tone=success] ._marker_xfuv2_63{border-color:var(--cascivo-color-success);background-color:var(--cascivo-color-success);color:var(--cascivo-color-success-foreground)}._item_xfuv2_21[data-tone=warning] ._marker_xfuv2_63{border-color:var(--cascivo-color-warning);background-color:var(--cascivo-color-warning);color:var(--cascivo-color-warning-foreground)}._item_xfuv2_21[data-tone=danger] ._marker_xfuv2_63{border-color:var(--cascivo-color-destructive);background-color:var(--cascivo-color-destructive);color:var(--cascivo-color-destructive-foreground)}._content_xfuv2_129{gap:var(--cascivo-space-1);flex-direction:column;padding-block-start:calc((var(--_marker-size) - 1rem) / 2);display:flex}._title_xfuv2_136{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-semibold);line-height:var(--cascivo-leading-tight);color:var(--cascivo-color-text)}._time_xfuv2_143{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-subtle)}._description_xfuv2_148{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-normal)}}@media (forced-colors:active){._marker_xfuv2_63{border:2px solid canvastext}._item_xfuv2_21[data-status=current] ._marker_xfuv2_63{background-color:highlight;border-color:highlight}}
|
|
@@ -1,40 +1,47 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import e from "./timeline.module.js";
|
|
4
|
-
import { cn as t, normalizeProgress as n } from "@cascivo/core";
|
|
5
|
-
import { jsx as
|
|
4
|
+
import { cn as t, normalizeProgress as n, normalizeTone as r } from "@cascivo/core";
|
|
5
|
+
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
6
6
|
//#region ../components/src/timeline/timeline.tsx
|
|
7
|
-
var
|
|
7
|
+
var o = {
|
|
8
8
|
pending: "upcoming",
|
|
9
9
|
active: "current",
|
|
10
10
|
complete: "complete",
|
|
11
11
|
error: "current"
|
|
12
|
+
}, s = {
|
|
13
|
+
neutral: "neutral",
|
|
14
|
+
info: "info",
|
|
15
|
+
success: "success",
|
|
16
|
+
warning: "warning",
|
|
17
|
+
danger: "danger"
|
|
12
18
|
};
|
|
13
|
-
function
|
|
14
|
-
return /* @__PURE__ */
|
|
15
|
-
"data-orientation":
|
|
16
|
-
className: t(e.list,
|
|
17
|
-
...
|
|
18
|
-
children:
|
|
19
|
-
"data-status":
|
|
19
|
+
function c({ items: c, orientation: l = "vertical", className: u, ...d }) {
|
|
20
|
+
return /* @__PURE__ */ i("ol", {
|
|
21
|
+
"data-orientation": l,
|
|
22
|
+
className: t(e.list, u),
|
|
23
|
+
...d,
|
|
24
|
+
children: c.map((t) => /* @__PURE__ */ a("li", {
|
|
25
|
+
"data-status": o[n(t.status ?? "pending")] ?? "upcoming",
|
|
26
|
+
"data-tone": t.tone ? s[r(t.tone)] ?? t.tone : void 0,
|
|
20
27
|
"aria-current": n(t.status ?? "pending") === "active" ? "step" : void 0,
|
|
21
28
|
className: e.item,
|
|
22
|
-
children: [/* @__PURE__ */
|
|
29
|
+
children: [/* @__PURE__ */ i("span", {
|
|
23
30
|
className: e.marker,
|
|
24
31
|
"aria-hidden": "true",
|
|
25
32
|
children: t.icon
|
|
26
|
-
}), /* @__PURE__ */
|
|
33
|
+
}), /* @__PURE__ */ a("div", {
|
|
27
34
|
className: e.content,
|
|
28
35
|
children: [
|
|
29
|
-
/* @__PURE__ */
|
|
36
|
+
/* @__PURE__ */ i("div", {
|
|
30
37
|
className: e.title,
|
|
31
38
|
children: t.title
|
|
32
39
|
}),
|
|
33
|
-
t.time ? /* @__PURE__ */
|
|
40
|
+
t.time ? /* @__PURE__ */ i("time", {
|
|
34
41
|
className: e.time,
|
|
35
42
|
children: t.time
|
|
36
43
|
}) : null,
|
|
37
|
-
t.description ? /* @__PURE__ */
|
|
44
|
+
t.description ? /* @__PURE__ */ i("div", {
|
|
38
45
|
className: e.description,
|
|
39
46
|
children: t.description
|
|
40
47
|
}) : null
|
|
@@ -44,4 +51,4 @@ function o({ items: o, orientation: s = "vertical", className: c, ...l }) {
|
|
|
44
51
|
});
|
|
45
52
|
}
|
|
46
53
|
//#endregion
|
|
47
|
-
export {
|
|
54
|
+
export { c as Timeline };
|
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
import './timeline.css';
|
|
4
4
|
var e = {
|
|
5
|
-
list: "
|
|
6
|
-
item: "
|
|
7
|
-
marker: "
|
|
8
|
-
content: "
|
|
9
|
-
title: "
|
|
10
|
-
time: "
|
|
11
|
-
description: "
|
|
5
|
+
list: "_list_xfuv2_2",
|
|
6
|
+
item: "_item_xfuv2_21",
|
|
7
|
+
marker: "_marker_xfuv2_63",
|
|
8
|
+
content: "_content_xfuv2_129",
|
|
9
|
+
title: "_title_xfuv2_136",
|
|
10
|
+
time: "_time_xfuv2_143",
|
|
11
|
+
description: "_description_xfuv2_148"
|
|
12
12
|
};
|
|
13
13
|
//#endregion
|
|
14
14
|
export { e as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cascivo/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.14.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Prebuilt cascivo design system components — use without copying source. @cascivo/themes installs with it; pair with @cascivo/charts (data-viz) and @cascivo/icons. Docs offline: npx @cascivo/docs",
|
|
6
6
|
"keywords": [
|