boreal-ui 0.0.9009 → 0.0.9011
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/core/Timeline-Clmz_jZy.js +232 -0
- package/dist/core/Timeline-hihQCyEU.cjs +1 -0
- package/dist/core/Timeline.cjs.js +1 -1
- package/dist/core/Timeline.css +1 -1
- package/dist/core/Timeline.js +1 -1
- package/dist/core/Toolbar--LTon15g.cjs +1 -0
- package/dist/core/Toolbar-mrvMlxNP.js +225 -0
- package/dist/core/Toolbar.cjs.js +1 -1
- package/dist/core/Toolbar.css +1 -1
- package/dist/core/Toolbar.js +1 -1
- package/dist/core/index.cjs.js +3 -3
- package/dist/core/index.js +124 -27
- package/dist/generated-docs/Timeline.props.js +9 -0
- package/dist/generated-docs/Toolbar.props.js +88 -0
- package/dist/next/Timeline-DNSVIHzf.js +233 -0
- package/dist/next/Timeline.css +1 -1
- package/dist/next/Timeline.js +1 -1
- package/dist/next/Toolbar-DumI-Oia.js +225 -0
- package/dist/next/Toolbar.css +1 -1
- package/dist/next/Toolbar.js +1 -1
- package/dist/next/index.js +125 -28
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/components/Timeline/Timeline.types.d.ts +23 -0
- package/dist/types/components/Timeline/Timeline.types.d.ts.map +1 -1
- package/dist/types/components/Timeline/TimelineBase.d.ts +2 -4
- package/dist/types/components/Timeline/TimelineBase.d.ts.map +1 -1
- package/dist/types/components/Timeline/core/Timeline.d.ts.map +1 -1
- package/dist/types/components/Timeline/next/Timeline.d.ts.map +1 -1
- package/dist/types/components/Toolbar/Toolbar.types.d.ts +47 -0
- package/dist/types/components/Toolbar/Toolbar.types.d.ts.map +1 -1
- package/dist/types/components/Toolbar/ToolbarBase.d.ts.map +1 -1
- package/dist/types/components/Toolbar/core/Toolbar.d.ts.map +1 -1
- package/dist/types/generated-docs/Timeline.props.d.ts.map +1 -1
- package/dist/types/generated-docs/Toolbar.props.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/core/Timeline-B7u6cy-8.cjs +0 -1
- package/dist/core/Timeline-oCH1Y5jA.js +0 -191
- package/dist/core/Toolbar-CO9Km-M4.cjs +0 -1
- package/dist/core/Toolbar-_dsHdL9o.js +0 -155
- package/dist/next/Timeline-ItXw7e6h.js +0 -193
- package/dist/next/Toolbar-Bvi6HjNu.js +0 -155
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
import { jsx as t, jsxs as C, Fragment as R } from "react/jsx-runtime";
|
|
2
|
+
import { e as W } from "./propAliases-O-1wR3I5.js";
|
|
3
|
+
import './Timeline.css';/* empty css */
|
|
4
|
+
import { useMemo as u } from "react";
|
|
5
|
+
import { c as h } from "./classNames-Dz0_huu_.js";
|
|
6
|
+
import { c as y } from "./capitalize-D_pj4b3P.js";
|
|
7
|
+
import { g as x, e as E, b as H, a as J } from "./styleConfig-BoNVl5_r.js";
|
|
8
|
+
import { S as K } from "./Skeleton-BvV4DbqW.js";
|
|
9
|
+
const P = ({
|
|
10
|
+
width: l,
|
|
11
|
+
height: a,
|
|
12
|
+
className: i,
|
|
13
|
+
"data-testid": _,
|
|
14
|
+
"aria-hidden": c
|
|
15
|
+
}) => /* @__PURE__ */ t(
|
|
16
|
+
"div",
|
|
17
|
+
{
|
|
18
|
+
className: i,
|
|
19
|
+
style: { width: l, height: a },
|
|
20
|
+
"data-testid": _,
|
|
21
|
+
"aria-hidden": c
|
|
22
|
+
}
|
|
23
|
+
), I = ({
|
|
24
|
+
items: l,
|
|
25
|
+
orientation: a = "vertical",
|
|
26
|
+
loading: i = !1,
|
|
27
|
+
"aria-label": _ = "Timeline",
|
|
28
|
+
"aria-labelledby": c,
|
|
29
|
+
"aria-describedby": L,
|
|
30
|
+
role: z = "list",
|
|
31
|
+
theme: r = x(),
|
|
32
|
+
glass: o = E(),
|
|
33
|
+
rounding: b = H(),
|
|
34
|
+
shadow: m = J(),
|
|
35
|
+
classMap: e,
|
|
36
|
+
SkeletonComponent: D = P,
|
|
37
|
+
className: $,
|
|
38
|
+
"data-testid": j,
|
|
39
|
+
testId: v = j ?? "timeline",
|
|
40
|
+
...B
|
|
41
|
+
}) => {
|
|
42
|
+
const p = u(
|
|
43
|
+
() => h(
|
|
44
|
+
e.timeline,
|
|
45
|
+
e[a],
|
|
46
|
+
e[r],
|
|
47
|
+
o && e.glass,
|
|
48
|
+
i && e.loading,
|
|
49
|
+
$
|
|
50
|
+
),
|
|
51
|
+
[e, a, r, o, i, $]
|
|
52
|
+
), q = u(
|
|
53
|
+
() => h(
|
|
54
|
+
e.item,
|
|
55
|
+
e[a],
|
|
56
|
+
e[r],
|
|
57
|
+
o && e.glass,
|
|
58
|
+
i && e.loadingItem
|
|
59
|
+
),
|
|
60
|
+
[e, a, r, o, i]
|
|
61
|
+
), F = u(
|
|
62
|
+
() => h(
|
|
63
|
+
e.marker,
|
|
64
|
+
e[r],
|
|
65
|
+
e[a],
|
|
66
|
+
o && e.glass,
|
|
67
|
+
m && e[`shadow${y(m)}`]
|
|
68
|
+
),
|
|
69
|
+
[e, r, a, o, m]
|
|
70
|
+
), O = u(
|
|
71
|
+
() => h(
|
|
72
|
+
e.content,
|
|
73
|
+
e[a],
|
|
74
|
+
e[r],
|
|
75
|
+
o && e.glass,
|
|
76
|
+
i && e.loadingContent,
|
|
77
|
+
m && e[`shadow${y(m)}`],
|
|
78
|
+
b && e[`round${y(b)}`]
|
|
79
|
+
),
|
|
80
|
+
[e, a, r, o, i, m, b]
|
|
81
|
+
), A = l.length;
|
|
82
|
+
return /* @__PURE__ */ t(
|
|
83
|
+
"ul",
|
|
84
|
+
{
|
|
85
|
+
className: p,
|
|
86
|
+
"data-testid": v,
|
|
87
|
+
role: z,
|
|
88
|
+
"aria-label": c ? void 0 : _,
|
|
89
|
+
"aria-labelledby": c,
|
|
90
|
+
"aria-describedby": L,
|
|
91
|
+
"aria-busy": i || void 0,
|
|
92
|
+
...B,
|
|
93
|
+
children: l.map((d, s) => {
|
|
94
|
+
const f = d.icon, n = `${v}-item-${s}`, g = `${n}-title`, T = d.description ? `${n}-description` : void 0, k = d.date ? `${n}-date` : void 0, N = !!d.title;
|
|
95
|
+
let S;
|
|
96
|
+
if (d.date) {
|
|
97
|
+
const w = new Date(d.date);
|
|
98
|
+
isNaN(w.getTime()) || (S = w.toISOString());
|
|
99
|
+
}
|
|
100
|
+
const G = i ? void 0 : [k, T].filter(Boolean).join(" ") || void 0;
|
|
101
|
+
return /* @__PURE__ */ C(
|
|
102
|
+
"li",
|
|
103
|
+
{
|
|
104
|
+
className: q,
|
|
105
|
+
"data-testid": n,
|
|
106
|
+
"aria-labelledby": !i && N ? g : void 0,
|
|
107
|
+
"aria-label": i ? `Timeline item ${s + 1} loading` : N ? void 0 : `Timeline item ${s + 1}`,
|
|
108
|
+
"aria-describedby": G,
|
|
109
|
+
"aria-posinset": s + 1,
|
|
110
|
+
"aria-setsize": A,
|
|
111
|
+
children: [
|
|
112
|
+
/* @__PURE__ */ t(
|
|
113
|
+
"div",
|
|
114
|
+
{
|
|
115
|
+
className: F,
|
|
116
|
+
"data-testid": `${n}-marker`,
|
|
117
|
+
"aria-hidden": !0,
|
|
118
|
+
children: f ? /* @__PURE__ */ t(
|
|
119
|
+
"div",
|
|
120
|
+
{
|
|
121
|
+
className: e.icon,
|
|
122
|
+
"data-testid": `${n}-icon`,
|
|
123
|
+
"aria-hidden": !0,
|
|
124
|
+
children: /* @__PURE__ */ t(f, { "aria-hidden": !0 })
|
|
125
|
+
}
|
|
126
|
+
) : /* @__PURE__ */ t(
|
|
127
|
+
"div",
|
|
128
|
+
{
|
|
129
|
+
className: e.dot,
|
|
130
|
+
"data-testid": `${n}-dot`,
|
|
131
|
+
"aria-hidden": !0
|
|
132
|
+
}
|
|
133
|
+
)
|
|
134
|
+
}
|
|
135
|
+
),
|
|
136
|
+
/* @__PURE__ */ t(
|
|
137
|
+
"div",
|
|
138
|
+
{
|
|
139
|
+
className: O,
|
|
140
|
+
"data-testid": `${n}-content`,
|
|
141
|
+
children: i ? /* @__PURE__ */ t(
|
|
142
|
+
D,
|
|
143
|
+
{
|
|
144
|
+
width: "100%",
|
|
145
|
+
height: "100%",
|
|
146
|
+
className: e.skeleton,
|
|
147
|
+
"aria-hidden": !0,
|
|
148
|
+
"data-testid": `${n}-skeleton`
|
|
149
|
+
}
|
|
150
|
+
) : /* @__PURE__ */ C(R, { children: [
|
|
151
|
+
N && /* @__PURE__ */ t(
|
|
152
|
+
"h3",
|
|
153
|
+
{
|
|
154
|
+
id: g,
|
|
155
|
+
className: e.title,
|
|
156
|
+
"data-testid": `${n}-title`,
|
|
157
|
+
children: d.title
|
|
158
|
+
}
|
|
159
|
+
),
|
|
160
|
+
d.date && /* @__PURE__ */ t(
|
|
161
|
+
"p",
|
|
162
|
+
{
|
|
163
|
+
id: k,
|
|
164
|
+
className: e.date,
|
|
165
|
+
"data-testid": `${n}-date`,
|
|
166
|
+
children: /* @__PURE__ */ t("time", { dateTime: S, children: d.date })
|
|
167
|
+
}
|
|
168
|
+
),
|
|
169
|
+
d.description && /* @__PURE__ */ t(
|
|
170
|
+
"p",
|
|
171
|
+
{
|
|
172
|
+
id: T,
|
|
173
|
+
className: e.description,
|
|
174
|
+
"data-testid": `${n}-description`,
|
|
175
|
+
children: d.description
|
|
176
|
+
}
|
|
177
|
+
)
|
|
178
|
+
] })
|
|
179
|
+
}
|
|
180
|
+
)
|
|
181
|
+
]
|
|
182
|
+
},
|
|
183
|
+
s
|
|
184
|
+
);
|
|
185
|
+
})
|
|
186
|
+
}
|
|
187
|
+
);
|
|
188
|
+
};
|
|
189
|
+
I.displayName = "TimelineBase";
|
|
190
|
+
const Q = {
|
|
191
|
+
timeline: "timeline",
|
|
192
|
+
item: "timeline_item",
|
|
193
|
+
marker: "timeline_marker",
|
|
194
|
+
icon: "timeline_icon",
|
|
195
|
+
dot: "timeline_dot",
|
|
196
|
+
content: "timeline_content",
|
|
197
|
+
loading: "timeline_loading",
|
|
198
|
+
loadingItem: "timeline_itemLoading",
|
|
199
|
+
loadingContent: "timeline_contentLoading",
|
|
200
|
+
skeleton: "timeline_skeleton",
|
|
201
|
+
title: "timeline_title",
|
|
202
|
+
date: "timeline_date",
|
|
203
|
+
description: "timeline_description",
|
|
204
|
+
vertical: "timeline_vertical",
|
|
205
|
+
horizontal: "timeline_horizontal",
|
|
206
|
+
primary: "timeline_primary",
|
|
207
|
+
secondary: "timeline_secondary",
|
|
208
|
+
tertiary: "timeline_tertiary",
|
|
209
|
+
quaternary: "timeline_quaternary",
|
|
210
|
+
clear: "timeline_clear",
|
|
211
|
+
glass: "timeline_glass",
|
|
212
|
+
shadowNone: "timeline_shadow-None",
|
|
213
|
+
shadowLight: "timeline_shadow-Light",
|
|
214
|
+
shadowMedium: "timeline_shadow-Medium",
|
|
215
|
+
shadowStrong: "timeline_shadow-Strong",
|
|
216
|
+
shadowIntense: "timeline_shadow-Intense",
|
|
217
|
+
roundNone: "timeline_round-None",
|
|
218
|
+
roundSmall: "timeline_round-Small",
|
|
219
|
+
roundMedium: "timeline_round-Medium",
|
|
220
|
+
roundLarge: "timeline_round-Large"
|
|
221
|
+
}, U = (l) => /* @__PURE__ */ t(
|
|
222
|
+
I,
|
|
223
|
+
{
|
|
224
|
+
...l,
|
|
225
|
+
classMap: W(Q),
|
|
226
|
+
SkeletonComponent: K
|
|
227
|
+
}
|
|
228
|
+
);
|
|
229
|
+
U.displayName = "Timeline";
|
|
230
|
+
export {
|
|
231
|
+
U as T
|
|
232
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";require('./Timeline.css');const i=require("react/jsx-runtime"),W=require("./propAliases-CXU3EEm-.cjs");;/* empty css */const u=require("react"),h=require("./classNames-C7V3kfBj.cjs"),j=require("./capitalize-CnTiekgk.cjs"),_=require("./styleConfig-BeavGUyI.cjs"),E=require("./Skeleton-D6nKNXfL.cjs"),H=({width:o,height:a,className:t,"data-testid":N,"aria-hidden":c})=>i.jsx("div",{className:t,style:{width:o,height:a},"data-testid":N,"aria-hidden":c}),q=({items:o,orientation:a="vertical",loading:t=!1,"aria-label":N="Timeline","aria-labelledby":c,"aria-describedby":f,role:I="list",theme:r=_.getDefaultTheme(),glass:l=_.getDefaultGlass(),rounding:b=_.getDefaultRounding(),shadow:s=_.getDefaultShadow(),classMap:e,SkeletonComponent:z=H,className:$,"data-testid":L,testId:v=L??"timeline",...D})=>{const B=u.useMemo(()=>h.combineClassNames(e.timeline,e[a],e[r],l&&e.glass,t&&e.loading,$),[e,a,r,l,t,$]),R=u.useMemo(()=>h.combineClassNames(e.item,e[a],e[r],l&&e.glass,t&&e.loadingItem),[e,a,r,l,t]),A=u.useMemo(()=>h.combineClassNames(e.marker,e[r],e[a],l&&e.glass,s&&e[`shadow${j.capitalize(s)}`]),[e,r,a,l,s]),F=u.useMemo(()=>h.combineClassNames(e.content,e[a],e[r],l&&e.glass,t&&e.loadingContent,s&&e[`shadow${j.capitalize(s)}`],b&&e[`round${j.capitalize(b)}`]),[e,a,r,l,t,s,b]),O=o.length;return i.jsx("ul",{className:B,"data-testid":v,role:I,"aria-label":c?void 0:N,"aria-labelledby":c,"aria-describedby":f,"aria-busy":t||void 0,...D,children:o.map((d,m)=>{const g=d.icon,n=`${v}-item-${m}`,k=`${n}-title`,T=d.description?`${n}-description`:void 0,x=d.date?`${n}-date`:void 0,y=!!d.title;let C;if(d.date){const S=new Date(d.date);isNaN(S.getTime())||(C=S.toISOString())}const G=t?void 0:[x,T].filter(Boolean).join(" ")||void 0;return i.jsxs("li",{className:R,"data-testid":n,"aria-labelledby":!t&&y?k:void 0,"aria-label":t?`Timeline item ${m+1} loading`:y?void 0:`Timeline item ${m+1}`,"aria-describedby":G,"aria-posinset":m+1,"aria-setsize":O,children:[i.jsx("div",{className:A,"data-testid":`${n}-marker`,"aria-hidden":!0,children:g?i.jsx("div",{className:e.icon,"data-testid":`${n}-icon`,"aria-hidden":!0,children:i.jsx(g,{"aria-hidden":!0})}):i.jsx("div",{className:e.dot,"data-testid":`${n}-dot`,"aria-hidden":!0})}),i.jsx("div",{className:F,"data-testid":`${n}-content`,children:t?i.jsx(z,{width:"100%",height:"100%",className:e.skeleton,"aria-hidden":!0,"data-testid":`${n}-skeleton`}):i.jsxs(i.Fragment,{children:[y&&i.jsx("h3",{id:k,className:e.title,"data-testid":`${n}-title`,children:d.title}),d.date&&i.jsx("p",{id:x,className:e.date,"data-testid":`${n}-date`,children:i.jsx("time",{dateTime:C,children:d.date})}),d.description&&i.jsx("p",{id:T,className:e.description,"data-testid":`${n}-description`,children:d.description})]})})]},m)})})};q.displayName="TimelineBase";const J={timeline:"timeline",item:"timeline_item",marker:"timeline_marker",icon:"timeline_icon",dot:"timeline_dot",content:"timeline_content",loading:"timeline_loading",loadingItem:"timeline_itemLoading",loadingContent:"timeline_contentLoading",skeleton:"timeline_skeleton",title:"timeline_title",date:"timeline_date",description:"timeline_description",vertical:"timeline_vertical",horizontal:"timeline_horizontal",primary:"timeline_primary",secondary:"timeline_secondary",tertiary:"timeline_tertiary",quaternary:"timeline_quaternary",clear:"timeline_clear",glass:"timeline_glass",shadowNone:"timeline_shadow-None",shadowLight:"timeline_shadow-Light",shadowMedium:"timeline_shadow-Medium",shadowStrong:"timeline_shadow-Strong",shadowIntense:"timeline_shadow-Intense",roundNone:"timeline_round-None",roundSmall:"timeline_round-Small",roundMedium:"timeline_round-Medium",roundLarge:"timeline_round-Large"},w=o=>i.jsx(q,{...o,classMap:W.expandClassMap(J),SkeletonComponent:E.SkeletonLoader});w.displayName="Timeline";exports.Timeline=w;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Timeline.css');;/* empty css */const e=require("./Timeline-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Timeline.css');;/* empty css */const e=require("./Timeline-hihQCyEU.cjs");exports.default=e.Timeline;
|
package/dist/core/Timeline.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";@layer boreal-ui.reset,boreal-ui.base,boreal-ui.components,boreal-ui.overrides;@layer boreal-ui.components{.timeline{box-sizing:border-box;position:relative;display:flex;flex-direction:column;gap:0;width:100%;max-width:min(100%,600px);min-width:0;height:auto;padding-left:var(--spacing-md);background:transparent;color:inherit;font-family:var(--font-family-body);overflow:visible}@media(max-width:479.98px){.timeline{max-width:100%;padding-left:var(--spacing-sm)}}.timeline:focus-within{border-radius:var(--border-radius-sm);outline:2px solid var(--focus-outline-color, var(--primary-color));outline-offset:3px}.timeline_horizontal{flex-direction:row;align-items:stretch;width:100%;max-width:100%;min-width:0;padding-left:0;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:x proximity}.timeline_horizontal::-webkit-scrollbar-track{background-color:transparent!important}.timeline_item{box-sizing:border-box;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--spacing-sm);width:100%;max-width:100%;min-width:0;padding-bottom:var(--spacing-sm);text-align:start;scroll-snap-align:start}.timeline_item.timeline_horizontal{display:inline-grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);justify-items:center;align-items:start;flex:0 0 clamp(12rem,48cqi,18rem);width:clamp(12rem,48cqi,18rem);max-width:min(18rem,85vw);min-width:0;gap:var(--spacing-sm);padding-bottom:var(--spacing-xs);margin-bottom:2px;overflow:visible;text-align:center}.timeline_item:not(:last-child):after{content:"";position:absolute;left:14px;top:30px;width:2px;height:calc(100% - 22px);background-color:currentcolor}@media(max-width:319.98px){.timeline_item:not(:last-child):after{left:11px;top:24px}}@media(min-width:1024px){.timeline_item:not(:last-child):after{left:15px;top:32px}}.timeline_item.timeline_horizontal:not(:last-child):after{top:15px;left:calc(50% + 16px);width:calc(100% - 32px);height:2px}@media(max-width:319.98px){.timeline_item.timeline_horizontal:not(:last-child):after{left:calc(50% + 13px);width:calc(100% - 26px)}}@media(min-width:1024px){.timeline_item.timeline_horizontal:not(:last-child):after{left:calc(50% + 17px);width:calc(100% - 34px)}}.timeline_marker{box-sizing:border-box;z-index:1;display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:30px;height:30px;min-width:30px;min-height:30px;border-radius:var(--border-radius-round);background-color:var(--primary-color);color:inherit;font-family:var(--font-family-ui);font-size:var(--font-size-label);font-weight:var(--font-weight-label);line-height:1;transition:transform .3s ease-in-out}.timeline_marker:hover{transform:scale(1.05)}.timeline_marker:focus-visible{outline:2px solid var(--focus-outline-color, var(--primary-color));outline-offset:2px}.timeline_marker.timeline_horizontal{margin:0;overflow:visible}@media(max-width:319.98px){.timeline_marker{width:24px;height:24px;min-width:24px;min-height:24px;font-size:var(--font-size-caption)}}@media(min-width:1024px){.timeline_marker{width:32px;height:32px;min-width:32px;min-height:32px}}.timeline_dot{width:8px;height:8px;background-color:currentcolor;border-radius:50%}@media(max-width:319.98px){.timeline_dot{width:7px;height:7px}}@media(min-width:1024px){.timeline_dot{width:9px;height:9px}}.timeline_content{box-sizing:border-box;flex:1 1 auto;width:100%;max-width:100%;min-width:0;padding:var(--spacing-sm);overflow-wrap:anywhere;background:var(--background-color-lighter)}.timeline_content.timeline_horizontal{width:95%;max-width:95%;height:100%;min-width:0;overflow:visible}@media(max-width:319.98px){.timeline_content{padding:var(--spacing-sm)}}@media(min-width:1024px){.timeline_content{padding:var(--spacing-md)}}.timeline_title{max-width:100%;margin:0 0 var(--spacing-xs);color:inherit;font-family:var(--font-family-heading);font-size:var(--font-size-h6);font-weight:var(--font-weight-heading);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-heading);text-align:inherit;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}@media(max-width:319.98px){.timeline_title{font-size:var(--font-size-body)}}@media(min-width:1024px){.timeline_title{font-size:var(--font-size-h5)}}.timeline_date{max-width:100%;color:inherit;font-family:var(--font-family-ui);font-size:var(--font-size-caption);font-weight:var(--font-weight-label);line-height:var(--line-height-label);letter-spacing:var(--letter-spacing-label);opacity:.8;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}@media(min-width:1024px){.timeline_date{font-size:var(--font-size-label)}}.timeline_description{max-width:100%;margin:var(--spacing-xs) 0 0;color:inherit;font-family:var(--font-family-body);font-size:var(--font-size-body-sm);font-weight:var(--font-weight-body);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}@media(max-width:319.98px){.timeline_description{font-size:var(--font-size-caption)}}@media(min-width:1024px){.timeline_description{font-size:var(--font-size-body)}}.timeline_primary{--timeline-glass-bg: var(--primary-glass-background);--timeline-glass-hover-bg: var(--primary-glass-background-hover);--timeline-glass-border: var(--primary-glass-border);--timeline-glass-text: var(--text-color-primary)}.timeline_primary .timeline_item:not(:last-child):after{background-color:var(--primary-color)}.timeline_primary .timeline_marker{background-color:var(--primary-color);color:var(--text-color-primary)}.timeline_secondary{--timeline-glass-bg: var(--secondary-glass-background);--timeline-glass-hover-bg: var(--secondary-glass-background-hover);--timeline-glass-border: var(--secondary-glass-border);--timeline-glass-text: var(--text-color-secondary)}.timeline_secondary .timeline_item:not(:last-child):after{background-color:var(--secondary-color)}.timeline_secondary .timeline_marker{background-color:var(--secondary-color);color:var(--text-color-secondary)}.timeline_tertiary{--timeline-glass-bg: var(--tertiary-glass-background);--timeline-glass-hover-bg: var(--tertiary-glass-background-hover);--timeline-glass-border: var(--tertiary-glass-border);--timeline-glass-text: var(--text-color-tertiary)}.timeline_tertiary .timeline_item:not(:last-child):after{background-color:var(--tertiary-color)}.timeline_tertiary .timeline_marker{background-color:var(--tertiary-color);color:var(--text-color-tertiary)}.timeline_quaternary{--timeline-glass-bg: var(--quaternary-glass-background);--timeline-glass-hover-bg: var(--quaternary-glass-background-hover);--timeline-glass-border: var(--quaternary-glass-border);--timeline-glass-text: var(--text-color-quaternary)}.timeline_quaternary .timeline_item:not(:last-child):after{background-color:var(--quaternary-color)}.timeline_quaternary .timeline_marker{background-color:var(--quaternary-color);color:var(--text-color-quaternary)}.timeline_clear{--timeline-glass-bg: var(--clear-glass-background);--timeline-glass-hover-bg: var(--clear-glass-background-hover);--timeline-glass-border: var(--clear-glass-border);--timeline-glass-text: var(--text-color)}.timeline_clear .timeline_item:not(:last-child):after{background-color:var(--border-color)}.timeline_clear .timeline_marker{background-color:transparent;color:var(--text-color)}.timeline_success{--timeline-glass-bg: var(--success-glass-background);--timeline-glass-hover-bg: var(--success-glass-background-hover);--timeline-glass-border: var(--success-glass-border);--timeline-glass-text: var(--success-text-color)}.timeline_success .timeline_item:not(:last-child):after{background-color:var(--success-color)}.timeline_success .timeline_marker{background-color:var(--success-color);color:var(--success-text-color)}.timeline_error{--timeline-glass-bg: var(--error-glass-background);--timeline-glass-hover-bg: var(--error-glass-background-hover);--timeline-glass-border: var(--error-glass-border);--timeline-glass-text: var(--error-text-color)}.timeline_error .timeline_item:not(:last-child):after{background-color:var(--error-color)}.timeline_error .timeline_marker{background-color:var(--error-color);color:var(--error-text-color)}.timeline_warning{--timeline-glass-bg: var(--warning-glass-background);--timeline-glass-hover-bg: var(--warning-glass-background-hover);--timeline-glass-border: var(--warning-glass-border);--timeline-glass-text: var(--warning-text-color)}.timeline_warning .timeline_item:not(:last-child):after{background-color:var(--warning-color)}.timeline_warning .timeline_marker{background-color:var(--warning-color);color:var(--warning-text-color)}.timeline_info{--timeline-glass-bg: var(--info-glass-background);--timeline-glass-hover-bg: var(--info-glass-background-hover);--timeline-glass-border: var(--info-glass-border);--timeline-glass-text: var(--info-text-color)}.timeline_info .timeline_item:not(:last-child):after{background-color:var(--info-color)}.timeline_info .timeline_marker{background-color:var(--info-color);color:var(--info-text-color)}.timeline_glass.timeline_content,.timeline_glass.timeline_marker{background:var(--timeline-glass-bg, var(--glass-background));border:1px solid var(--timeline-glass-border, var(--glass-border-color));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));color:inherit}.timeline_round-None{border-radius:var(--border-radius-none)}.timeline_round-Small{border-radius:var(--border-radius-sm)}.timeline_round-Medium{border-radius:var(--border-radius-md)}.timeline_round-Large{border-radius:var(--border-radius-lg)}.timeline_round-Full{border-radius:var(--border-radius-full)}.timeline_shadow-None{box-shadow:var(--box-shadow-none)}.timeline_shadow-Light{box-shadow:var(--box-shadow-light)}.timeline_shadow-Medium{box-shadow:var(--box-shadow-medium)}.timeline_shadow-Strong{box-shadow:var(--box-shadow-heavy)}.timeline_shadow-Intense{box-shadow:var(--box-shadow-intense)}@media(prefers-reduced-motion:reduce){.timeline,.timeline *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.timeline_marker:hover{transform:none!important}}@media(hover:none){.timeline_marker{transition:none}.timeline_marker:hover{transform:none}}@media(forced-colors:active){.timeline{color:CanvasText}.timeline_content{background:Canvas;color:CanvasText;border:1px solid ButtonText;box-shadow:none}.timeline_item:not(:last-child):after{background:ButtonText!important}.timeline_marker{background:ButtonFace!important;color:ButtonText!important;border:1px solid ButtonText!important;box-shadow:none}.timeline_dot{background:ButtonText}.timeline_glass.timeline_content,.timeline_glass.timeline_marker{background:Canvas!important;border:1px solid ButtonText!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}}
|
|
1
|
+
@charset "UTF-8";@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes spin-3d{0%{transform:rotateX(0) rotateY(0)}to{transform:rotateX(360deg) rotateY(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes progress-grow{0%{width:0}to{width:100%}}@keyframes indeterminate-move{0%{transform:translate(-100%)}50%{transform:translate(0)}to{transform:translate(100%)}}@keyframes skeleton-loading{0%{transform:translate(-100%)}to{transform:translate(150%)}}@keyframes drawer-slide-in-right{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes drawer-slide-in-left{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes drawer-slide-in-top{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes drawer-slide-in-bottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes drawer-overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes bar-chart-grow{0%{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:scaleY(1)}}@keyframes donut-chart-draw{0%{opacity:0;transform:rotate(-8deg) scale(.96)}to{opacity:1;transform:rotate(0) scale(1)}}@keyframes line-chart-draw{0%{opacity:0;stroke-dasharray:1;stroke-dashoffset:1}to{opacity:1;stroke-dasharray:1;stroke-dashoffset:0}}@layer boreal-ui.reset,boreal-ui.base,boreal-ui.components,boreal-ui.overrides;@layer boreal-ui.components{.timeline{box-sizing:border-box;position:relative;display:flex;flex-direction:column;gap:0;width:100%;max-width:min(100%,600px);min-width:0;height:auto;padding-left:var(--spacing-md);background:transparent;color:inherit;font-family:var(--font-family-body);overflow:visible}@media(max-width:479.98px){.timeline{max-width:100%;padding-left:var(--spacing-sm)}}.timeline:focus-within{border-radius:var(--border-radius-sm);outline:2px solid var(--focus-outline-color, var(--primary-color));outline-offset:3px}.timeline_horizontal{flex-direction:row;align-items:stretch;width:100%;max-width:100%;min-width:0;padding-left:0;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:x proximity}.timeline_horizontal::-webkit-scrollbar-track{background-color:transparent!important}.timeline_item{box-sizing:border-box;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--spacing-sm);width:100%;max-width:100%;min-width:0;padding-bottom:var(--spacing-sm);text-align:start;scroll-snap-align:start}.timeline_item.timeline_horizontal{display:inline-grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);justify-items:center;align-items:start;flex:0 0 clamp(12rem,48cqi,18rem);width:clamp(12rem,48cqi,18rem);max-width:min(18rem,85vw);min-width:0;gap:var(--spacing-sm);padding-bottom:var(--spacing-xs);margin-bottom:2px;overflow:visible;text-align:center}.timeline_item:not(:last-child):after{content:"";position:absolute;left:14px;top:30px;width:2px;height:calc(100% - 22px);background-color:currentcolor}@media(max-width:319.98px){.timeline_item:not(:last-child):after{left:11px;top:24px}}@media(min-width:1024px){.timeline_item:not(:last-child):after{left:15px;top:32px}}.timeline_item.timeline_horizontal:not(:last-child):after{top:15px;left:calc(50% + 16px);width:calc(100% - 32px);height:2px}@media(max-width:319.98px){.timeline_item.timeline_horizontal:not(:last-child):after{left:calc(50% + 13px);width:calc(100% - 26px)}}@media(min-width:1024px){.timeline_item.timeline_horizontal:not(:last-child):after{left:calc(50% + 17px);width:calc(100% - 34px)}}.timeline_marker{box-sizing:border-box;z-index:1;display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:30px;height:30px;min-width:30px;min-height:30px;border-radius:var(--border-radius-round);background-color:var(--primary-color);color:inherit;font-family:var(--font-family-ui);font-size:var(--font-size-label);font-weight:var(--font-weight-label);line-height:1;transition:transform .3s ease-in-out}.timeline_marker:hover{transform:scale(1.05)}.timeline_marker:focus-visible{outline:2px solid var(--focus-outline-color, var(--primary-color));outline-offset:2px}.timeline_marker.timeline_horizontal{margin:0;overflow:visible}@media(max-width:319.98px){.timeline_marker{width:24px;height:24px;min-width:24px;min-height:24px;font-size:var(--font-size-caption)}}@media(min-width:1024px){.timeline_marker{width:32px;height:32px;min-width:32px;min-height:32px}}.timeline_dot{width:8px;height:8px;background-color:currentcolor;border-radius:50%}@media(max-width:319.98px){.timeline_dot{width:7px;height:7px}}@media(min-width:1024px){.timeline_dot{width:9px;height:9px}}.timeline_content{box-sizing:border-box;flex:1 1 auto;width:100%;max-width:100%;min-width:0;padding:var(--spacing-sm);overflow-wrap:anywhere;background:var(--background-color-lighter)}.timeline_content.timeline_horizontal{width:95%;max-width:95%;height:100%;min-width:0;overflow:visible}@media(max-width:319.98px){.timeline_content{padding:var(--spacing-sm)}}@media(min-width:1024px){.timeline_content{padding:var(--spacing-md)}}.timeline_title{max-width:100%;margin:0 0 var(--spacing-xs);color:inherit;font-family:var(--font-family-heading);font-size:var(--font-size-h6);font-weight:var(--font-weight-heading);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-heading);text-align:inherit;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}@media(max-width:319.98px){.timeline_title{font-size:var(--font-size-body)}}@media(min-width:1024px){.timeline_title{font-size:var(--font-size-h5)}}.timeline_date{max-width:100%;color:inherit;font-family:var(--font-family-ui);font-size:var(--font-size-caption);font-weight:var(--font-weight-label);line-height:var(--line-height-label);letter-spacing:var(--letter-spacing-label);opacity:.8;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}@media(min-width:1024px){.timeline_date{font-size:var(--font-size-label)}}.timeline_description{max-width:100%;margin:var(--spacing-xs) 0 0;color:inherit;font-family:var(--font-family-body);font-size:var(--font-size-body-sm);font-weight:var(--font-weight-body);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}@media(max-width:319.98px){.timeline_description{font-size:var(--font-size-caption)}}@media(min-width:1024px){.timeline_description{font-size:var(--font-size-body)}}.timeline_primary{--timeline-glass-bg: var(--primary-glass-background);--timeline-glass-hover-bg: var(--primary-glass-background-hover);--timeline-glass-border: var(--primary-glass-border);--timeline-glass-text: var(--text-color-primary)}.timeline_primary .timeline_item:not(:last-child):after{background-color:var(--primary-color)}.timeline_primary .timeline_marker{background-color:var(--primary-color);color:var(--text-color-primary)}.timeline_secondary{--timeline-glass-bg: var(--secondary-glass-background);--timeline-glass-hover-bg: var(--secondary-glass-background-hover);--timeline-glass-border: var(--secondary-glass-border);--timeline-glass-text: var(--text-color-secondary)}.timeline_secondary .timeline_item:not(:last-child):after{background-color:var(--secondary-color)}.timeline_secondary .timeline_marker{background-color:var(--secondary-color);color:var(--text-color-secondary)}.timeline_tertiary{--timeline-glass-bg: var(--tertiary-glass-background);--timeline-glass-hover-bg: var(--tertiary-glass-background-hover);--timeline-glass-border: var(--tertiary-glass-border);--timeline-glass-text: var(--text-color-tertiary)}.timeline_tertiary .timeline_item:not(:last-child):after{background-color:var(--tertiary-color)}.timeline_tertiary .timeline_marker{background-color:var(--tertiary-color);color:var(--text-color-tertiary)}.timeline_quaternary{--timeline-glass-bg: var(--quaternary-glass-background);--timeline-glass-hover-bg: var(--quaternary-glass-background-hover);--timeline-glass-border: var(--quaternary-glass-border);--timeline-glass-text: var(--text-color-quaternary)}.timeline_quaternary .timeline_item:not(:last-child):after{background-color:var(--quaternary-color)}.timeline_quaternary .timeline_marker{background-color:var(--quaternary-color);color:var(--text-color-quaternary)}.timeline_clear{--timeline-glass-bg: var(--clear-glass-background);--timeline-glass-hover-bg: var(--clear-glass-background-hover);--timeline-glass-border: var(--clear-glass-border);--timeline-glass-text: var(--text-color)}.timeline_clear .timeline_item:not(:last-child):after{background-color:var(--border-color)}.timeline_clear .timeline_marker{background-color:transparent;color:var(--text-color)}.timeline_success{--timeline-glass-bg: var(--success-glass-background);--timeline-glass-hover-bg: var(--success-glass-background-hover);--timeline-glass-border: var(--success-glass-border);--timeline-glass-text: var(--success-text-color)}.timeline_success .timeline_item:not(:last-child):after{background-color:var(--success-color)}.timeline_success .timeline_marker{background-color:var(--success-color);color:var(--success-text-color)}.timeline_error{--timeline-glass-bg: var(--error-glass-background);--timeline-glass-hover-bg: var(--error-glass-background-hover);--timeline-glass-border: var(--error-glass-border);--timeline-glass-text: var(--error-text-color)}.timeline_error .timeline_item:not(:last-child):after{background-color:var(--error-color)}.timeline_error .timeline_marker{background-color:var(--error-color);color:var(--error-text-color)}.timeline_warning{--timeline-glass-bg: var(--warning-glass-background);--timeline-glass-hover-bg: var(--warning-glass-background-hover);--timeline-glass-border: var(--warning-glass-border);--timeline-glass-text: var(--warning-text-color)}.timeline_warning .timeline_item:not(:last-child):after{background-color:var(--warning-color)}.timeline_warning .timeline_marker{background-color:var(--warning-color);color:var(--warning-text-color)}.timeline_info{--timeline-glass-bg: var(--info-glass-background);--timeline-glass-hover-bg: var(--info-glass-background-hover);--timeline-glass-border: var(--info-glass-border);--timeline-glass-text: var(--info-text-color)}.timeline_info .timeline_item:not(:last-child):after{background-color:var(--info-color)}.timeline_info .timeline_marker{background-color:var(--info-color);color:var(--info-text-color)}.timeline_glass.timeline_content,.timeline_glass.timeline_marker{background:var(--timeline-glass-bg, var(--glass-background));border:1px solid var(--timeline-glass-border, var(--glass-border-color));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));color:inherit}.timeline_round-None{border-radius:var(--border-radius-none)}.timeline_round-Small{border-radius:var(--border-radius-sm)}.timeline_round-Medium{border-radius:var(--border-radius-md)}.timeline_round-Large{border-radius:var(--border-radius-lg)}.timeline_round-Full{border-radius:var(--border-radius-full)}.timeline_shadow-None{box-shadow:var(--box-shadow-none)}.timeline_shadow-Light{box-shadow:var(--box-shadow-light)}.timeline_shadow-Medium{box-shadow:var(--box-shadow-medium)}.timeline_shadow-Strong{box-shadow:var(--box-shadow-heavy)}.timeline_shadow-Intense{box-shadow:var(--box-shadow-intense)}.timeline_loading{cursor:progress}.timeline_contentLoading{min-height:5.5rem;background:transparent;box-shadow:none}.timeline_horizontal.timeline_contentLoading{min-height:6rem}.timeline_skeleton{min-height:5.5rem;margin-top:-1rem}@media(prefers-reduced-motion:reduce){.timeline,.timeline *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.timeline_marker:hover{transform:none!important}}@media(hover:none){.timeline_marker{transition:none}.timeline_marker:hover{transform:none}}@media(forced-colors:active){.timeline{color:CanvasText}.timeline_content{background:Canvas;color:CanvasText;border:1px solid ButtonText;box-shadow:none}.timeline_item:not(:last-child):after{background:ButtonText!important}.timeline_marker{background:ButtonFace!important;color:ButtonText!important;border:1px solid ButtonText!important;box-shadow:none}.timeline_dot{background:ButtonText}.timeline_glass.timeline_content,.timeline_glass.timeline_marker{background:Canvas!important;border:1px solid ButtonText!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}}
|
package/dist/core/Timeline.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";require('./Toolbar.css');const t=require("react/jsx-runtime"),Q=require("./propAliases-CXU3EEm-.cjs");;/* empty css */const U=require("./Avatar-DbXwDynC.cjs"),V=require("react"),r=require("./classNames-C7V3kfBj.cjs"),u=require("./capitalize-CnTiekgk.cjs"),n=require("./styleConfig-BeavGUyI.cjs"),C=({title:i,titleId:_,left:N,center:f,right:x,avatar:o,theme:d=n.getDefaultTheme(),glass:l=n.getDefaultGlass(),attachment:b="static",shadow:s=n.getDefaultShadow(),rounding:c=n.getDefaultRounding(),className:m,titleClassName:y,leftClassName:S,centerClassName:T,rightClassName:j,leftSectionClassName:$,centerSectionClassName:q,rightSectionClassName:w,leftContentClassName:v,centerContentClassName:z,rightContentClassName:A,avatarWrapperClassName:k,avatarClassName:p,"data-testid":D,testId:a=D??"toolbar","aria-label":L="Toolbar","aria-labelledby":h,"aria-describedby":H,leftAriaLabel:R="Toolbar left section",centerAriaLabel:W="Toolbar center section",rightAriaLabel:B="Toolbar right section",AvatarComponent:G,classMap:e,headingLevel:E=1})=>{const F=`h${Math.min(6,Math.max(1,E))}`,J=V.useMemo(()=>r.combineClassNames(e.toolbar,e[d],l&&e.glass,e[b],m,s&&e[`shadow${u.capitalize(s)}`],c&&e[`round${u.capitalize(c)}`]),[e,d,l,b,m,s,c]),K=h?void 0:L,O=o&&!o.name&&!o.onClick&&!o["aria-label"]?!0:void 0,P=i?_??`${a}-title`:void 0;return t.jsxs("div",{className:J,role:"toolbar","aria-orientation":"horizontal","aria-label":K,"aria-labelledby":h,"aria-describedby":H,"data-testid":a,children:[t.jsx("div",{className:r.combineClassNames(e.section,e.leftSection,S,$),role:"group","aria-label":R,"data-testid":`${a}-left`,children:t.jsx("div",{className:r.combineClassNames(e.sectionContent,e.leftContent,v),"data-testid":`${a}-left-content`,children:N})}),t.jsx("div",{className:r.combineClassNames(e.section,e.centerSection,T,q),role:"group","aria-label":W,"data-testid":`${a}-center`,children:t.jsxs("div",{className:r.combineClassNames(e.sectionContent,e.centerContent,z),"data-testid":`${a}-center-content`,children:[i&&t.jsx(F,{id:P,className:r.combineClassNames(e.title,y),"data-testid":`${a}-title`,children:i}),f]})}),t.jsxs("div",{className:r.combineClassNames(e.section,e.rightSection,j,w),role:"group","aria-label":B,"data-testid":`${a}-right`,children:[t.jsx("div",{className:r.combineClassNames(e.sectionContent,e.rightContent,A),"data-testid":`${a}-right-content`,children:x}),o&&t.jsx("div",{className:r.combineClassNames(e.avatarWrapper,k),"data-testid":`${a}-avatar`,children:t.jsx(G,{className:p,name:o.name,src:o.src,size:o.size||"medium",shape:o.shape||"circle",theme:o.theme,outline:o.outline,glass:o.glass??l,onClick:o.onClick,"aria-label":o["aria-label"],"aria-hidden":O})})]})]})};C.displayName="ToolbarBase";const X={toolbar:"toolbar",glass:"toolbar_glass",fixed:"toolbar_fixed",sticky:"toolbar_sticky",static:"toolbar_static",section:"toolbar_section",leftSection:"toolbar_leftSection",centerSection:"toolbar_centerSection",rightSection:"toolbar_rightSection",sectionContent:"toolbar_sectionContent",leftContent:"toolbar_leftContent",centerContent:"toolbar_centerContent",rightContent:"toolbar_rightContent",title:"toolbar_title",avatarWrapper:"toolbar_avatarWrapper",primary:"toolbar_primary",secondary:"toolbar_secondary",tertiary:"toolbar_tertiary",quaternary:"toolbar_quaternary",clear:"toolbar_clear",shadowNone:"toolbar_shadow-None",shadowLight:"toolbar_shadow-Light",shadowMedium:"toolbar_shadow-Medium",shadowStrong:"toolbar_shadow-Strong",shadowIntense:"toolbar_shadow-Intense",roundNone:"toolbar_round-None",roundSmall:"toolbar_round-Small",roundMedium:"toolbar_round-Medium",roundLarge:"toolbar_round-Large"},g=i=>t.jsx(C,{...i,AvatarComponent:U.Avatar,classMap:Q.expandClassMap(X)});g.displayName="Toolbar";exports.Toolbar=g;
|
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
import { jsxs as s, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { e as P } from "./propAliases-O-1wR3I5.js";
|
|
3
|
+
import './Toolbar.css';/* empty css */
|
|
4
|
+
import { A as Q } from "./Avatar-Xujn4XIs.js";
|
|
5
|
+
import { useMemo as U } from "react";
|
|
6
|
+
import { c as r } from "./classNames-Dz0_huu_.js";
|
|
7
|
+
import { c as g } from "./capitalize-D_pj4b3P.js";
|
|
8
|
+
import { g as V, e as X, a as Y, b as Z } from "./styleConfig-BoNVl5_r.js";
|
|
9
|
+
const _ = ({
|
|
10
|
+
title: i,
|
|
11
|
+
titleId: u,
|
|
12
|
+
left: f,
|
|
13
|
+
center: C,
|
|
14
|
+
right: N,
|
|
15
|
+
avatar: e,
|
|
16
|
+
theme: c = V(),
|
|
17
|
+
glass: n = X(),
|
|
18
|
+
attachment: b = "static",
|
|
19
|
+
shadow: l = Y(),
|
|
20
|
+
rounding: d = Z(),
|
|
21
|
+
className: m,
|
|
22
|
+
titleClassName: y,
|
|
23
|
+
leftClassName: S,
|
|
24
|
+
centerClassName: T,
|
|
25
|
+
rightClassName: $,
|
|
26
|
+
leftSectionClassName: w,
|
|
27
|
+
centerSectionClassName: p,
|
|
28
|
+
rightSectionClassName: v,
|
|
29
|
+
leftContentClassName: x,
|
|
30
|
+
centerContentClassName: k,
|
|
31
|
+
rightContentClassName: A,
|
|
32
|
+
avatarWrapperClassName: z,
|
|
33
|
+
avatarClassName: D,
|
|
34
|
+
"data-testid": L,
|
|
35
|
+
testId: t = L ?? "toolbar",
|
|
36
|
+
"aria-label": H = "Toolbar",
|
|
37
|
+
"aria-labelledby": h,
|
|
38
|
+
"aria-describedby": W,
|
|
39
|
+
leftAriaLabel: j = "Toolbar left section",
|
|
40
|
+
centerAriaLabel: q = "Toolbar center section",
|
|
41
|
+
rightAriaLabel: B = "Toolbar right section",
|
|
42
|
+
AvatarComponent: G,
|
|
43
|
+
classMap: o,
|
|
44
|
+
headingLevel: R = 1
|
|
45
|
+
}) => {
|
|
46
|
+
const E = `h${Math.min(6, Math.max(1, R))}`, F = U(
|
|
47
|
+
() => r(
|
|
48
|
+
o.toolbar,
|
|
49
|
+
o[c],
|
|
50
|
+
n && o.glass,
|
|
51
|
+
o[b],
|
|
52
|
+
m,
|
|
53
|
+
l && o[`shadow${g(l)}`],
|
|
54
|
+
d && o[`round${g(d)}`]
|
|
55
|
+
),
|
|
56
|
+
[o, c, n, b, m, l, d]
|
|
57
|
+
), J = h ? void 0 : H, K = e && !e.name && !e.onClick && !e["aria-label"] ? !0 : void 0, O = i ? u ?? `${t}-title` : void 0;
|
|
58
|
+
return /* @__PURE__ */ s(
|
|
59
|
+
"div",
|
|
60
|
+
{
|
|
61
|
+
className: F,
|
|
62
|
+
role: "toolbar",
|
|
63
|
+
"aria-orientation": "horizontal",
|
|
64
|
+
"aria-label": J,
|
|
65
|
+
"aria-labelledby": h,
|
|
66
|
+
"aria-describedby": W,
|
|
67
|
+
"data-testid": t,
|
|
68
|
+
children: [
|
|
69
|
+
/* @__PURE__ */ a(
|
|
70
|
+
"div",
|
|
71
|
+
{
|
|
72
|
+
className: r(
|
|
73
|
+
o.section,
|
|
74
|
+
o.leftSection,
|
|
75
|
+
S,
|
|
76
|
+
w
|
|
77
|
+
),
|
|
78
|
+
role: "group",
|
|
79
|
+
"aria-label": j,
|
|
80
|
+
"data-testid": `${t}-left`,
|
|
81
|
+
children: /* @__PURE__ */ a(
|
|
82
|
+
"div",
|
|
83
|
+
{
|
|
84
|
+
className: r(
|
|
85
|
+
o.sectionContent,
|
|
86
|
+
o.leftContent,
|
|
87
|
+
x
|
|
88
|
+
),
|
|
89
|
+
"data-testid": `${t}-left-content`,
|
|
90
|
+
children: f
|
|
91
|
+
}
|
|
92
|
+
)
|
|
93
|
+
}
|
|
94
|
+
),
|
|
95
|
+
/* @__PURE__ */ a(
|
|
96
|
+
"div",
|
|
97
|
+
{
|
|
98
|
+
className: r(
|
|
99
|
+
o.section,
|
|
100
|
+
o.centerSection,
|
|
101
|
+
T,
|
|
102
|
+
p
|
|
103
|
+
),
|
|
104
|
+
role: "group",
|
|
105
|
+
"aria-label": q,
|
|
106
|
+
"data-testid": `${t}-center`,
|
|
107
|
+
children: /* @__PURE__ */ s(
|
|
108
|
+
"div",
|
|
109
|
+
{
|
|
110
|
+
className: r(
|
|
111
|
+
o.sectionContent,
|
|
112
|
+
o.centerContent,
|
|
113
|
+
k
|
|
114
|
+
),
|
|
115
|
+
"data-testid": `${t}-center-content`,
|
|
116
|
+
children: [
|
|
117
|
+
i && /* @__PURE__ */ a(
|
|
118
|
+
E,
|
|
119
|
+
{
|
|
120
|
+
id: O,
|
|
121
|
+
className: r(o.title, y),
|
|
122
|
+
"data-testid": `${t}-title`,
|
|
123
|
+
children: i
|
|
124
|
+
}
|
|
125
|
+
),
|
|
126
|
+
C
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
)
|
|
130
|
+
}
|
|
131
|
+
),
|
|
132
|
+
/* @__PURE__ */ s(
|
|
133
|
+
"div",
|
|
134
|
+
{
|
|
135
|
+
className: r(
|
|
136
|
+
o.section,
|
|
137
|
+
o.rightSection,
|
|
138
|
+
$,
|
|
139
|
+
v
|
|
140
|
+
),
|
|
141
|
+
role: "group",
|
|
142
|
+
"aria-label": B,
|
|
143
|
+
"data-testid": `${t}-right`,
|
|
144
|
+
children: [
|
|
145
|
+
/* @__PURE__ */ a(
|
|
146
|
+
"div",
|
|
147
|
+
{
|
|
148
|
+
className: r(
|
|
149
|
+
o.sectionContent,
|
|
150
|
+
o.rightContent,
|
|
151
|
+
A
|
|
152
|
+
),
|
|
153
|
+
"data-testid": `${t}-right-content`,
|
|
154
|
+
children: N
|
|
155
|
+
}
|
|
156
|
+
),
|
|
157
|
+
e && /* @__PURE__ */ a(
|
|
158
|
+
"div",
|
|
159
|
+
{
|
|
160
|
+
className: r(
|
|
161
|
+
o.avatarWrapper,
|
|
162
|
+
z
|
|
163
|
+
),
|
|
164
|
+
"data-testid": `${t}-avatar`,
|
|
165
|
+
children: /* @__PURE__ */ a(
|
|
166
|
+
G,
|
|
167
|
+
{
|
|
168
|
+
className: D,
|
|
169
|
+
name: e.name,
|
|
170
|
+
src: e.src,
|
|
171
|
+
size: e.size || "medium",
|
|
172
|
+
shape: e.shape || "circle",
|
|
173
|
+
theme: e.theme,
|
|
174
|
+
outline: e.outline,
|
|
175
|
+
glass: e.glass ?? n,
|
|
176
|
+
onClick: e.onClick,
|
|
177
|
+
"aria-label": e["aria-label"],
|
|
178
|
+
"aria-hidden": K
|
|
179
|
+
}
|
|
180
|
+
)
|
|
181
|
+
}
|
|
182
|
+
)
|
|
183
|
+
]
|
|
184
|
+
}
|
|
185
|
+
)
|
|
186
|
+
]
|
|
187
|
+
}
|
|
188
|
+
);
|
|
189
|
+
};
|
|
190
|
+
_.displayName = "ToolbarBase";
|
|
191
|
+
const I = {
|
|
192
|
+
toolbar: "toolbar",
|
|
193
|
+
glass: "toolbar_glass",
|
|
194
|
+
fixed: "toolbar_fixed",
|
|
195
|
+
sticky: "toolbar_sticky",
|
|
196
|
+
static: "toolbar_static",
|
|
197
|
+
section: "toolbar_section",
|
|
198
|
+
leftSection: "toolbar_leftSection",
|
|
199
|
+
centerSection: "toolbar_centerSection",
|
|
200
|
+
rightSection: "toolbar_rightSection",
|
|
201
|
+
sectionContent: "toolbar_sectionContent",
|
|
202
|
+
leftContent: "toolbar_leftContent",
|
|
203
|
+
centerContent: "toolbar_centerContent",
|
|
204
|
+
rightContent: "toolbar_rightContent",
|
|
205
|
+
title: "toolbar_title",
|
|
206
|
+
avatarWrapper: "toolbar_avatarWrapper",
|
|
207
|
+
primary: "toolbar_primary",
|
|
208
|
+
secondary: "toolbar_secondary",
|
|
209
|
+
tertiary: "toolbar_tertiary",
|
|
210
|
+
quaternary: "toolbar_quaternary",
|
|
211
|
+
clear: "toolbar_clear",
|
|
212
|
+
shadowNone: "toolbar_shadow-None",
|
|
213
|
+
shadowLight: "toolbar_shadow-Light",
|
|
214
|
+
shadowMedium: "toolbar_shadow-Medium",
|
|
215
|
+
shadowStrong: "toolbar_shadow-Strong",
|
|
216
|
+
shadowIntense: "toolbar_shadow-Intense",
|
|
217
|
+
roundNone: "toolbar_round-None",
|
|
218
|
+
roundSmall: "toolbar_round-Small",
|
|
219
|
+
roundMedium: "toolbar_round-Medium",
|
|
220
|
+
roundLarge: "toolbar_round-Large"
|
|
221
|
+
}, M = (i) => /* @__PURE__ */ a(_, { ...i, AvatarComponent: Q, classMap: P(I) });
|
|
222
|
+
M.displayName = "Toolbar";
|
|
223
|
+
export {
|
|
224
|
+
M as T
|
|
225
|
+
};
|
package/dist/core/Toolbar.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Toolbar.css');;/* empty css */const e=require("./Toolbar
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Toolbar.css');;/* empty css */const e=require("./Toolbar--LTon15g.cjs");exports.default=e.Toolbar;
|
package/dist/core/Toolbar.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";@layer boreal-ui.reset,boreal-ui.base,boreal-ui.components,boreal-ui.overrides;@layer boreal-ui.components{.toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;width:100%;min-width:200px;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--background-color-light);color:inherit;gap:var(--spacing-sm)}@media(max-width:319.98px){.toolbar{padding:var(--spacing-xs) var(--spacing-sm);gap:var(--spacing-xs)}}@media(min-width:1024px){.toolbar{padding:var(--spacing-md) var(--spacing-lg)}}.toolbar_primary{--toolbar-glass-bg: var(--primary-glass-background);--toolbar-glass-border: var(--primary-glass-border);--toolbar-glass-text: var(--text-color-primary);background-color:var(--primary-color);color:var(--text-color-primary)}.toolbar_secondary{--toolbar-glass-bg: var(--secondary-glass-background);--toolbar-glass-border: var(--secondary-glass-border);--toolbar-glass-text: var(--text-color-secondary);background-color:var(--secondary-color);color:var(--text-color-secondary)}.toolbar_tertiary{--toolbar-glass-bg: var(--tertiary-glass-background);--toolbar-glass-border: var(--tertiary-glass-border);--toolbar-glass-text: var(--text-color-tertiary);background-color:var(--tertiary-color);color:var(--text-color-tertiary)}.toolbar_quaternary{--toolbar-glass-bg: var(--quaternary-glass-background);--toolbar-glass-border: var(--quaternary-glass-border);--toolbar-glass-text: var(--text-color-quaternary);background-color:var(--quaternary-color);color:var(--text-color-quaternary)}.toolbar_clear{--toolbar-glass-bg: var(--clear-glass-background);--toolbar-glass-border: var(--clear-glass-border);--toolbar-glass-text: var(--text-color);background-color:transparent;color:var(--text-color)}.toolbar_glass{background:var(--toolbar-glass-bg, var(--glass-background));border:1px solid var(--toolbar-glass-border, var(--glass-border-color));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));color:inherit}.toolbar_static{position:static}.toolbar_fixed{position:fixed;top:0;left:0;right:0;z-index:var(--z-index-fixed, 1000)}.toolbar_sticky{position:sticky;top:0;z-index:var(--z-index-sticky, 999)}.toolbar_section{flex:1;display:flex;align-items:center;justify-content:center}.toolbar_section:first-child{justify-content:flex-start}.toolbar_section:last-child{justify-content:flex-end}@media(max-width:479.98px){.toolbar_section{width:100%;justify-content:space-between;margin-bottom:var(--spacing-xs)}.toolbar_section:last-child{margin-bottom:0}}.
|
|
1
|
+
@charset "UTF-8";@layer boreal-ui.reset,boreal-ui.base,boreal-ui.components,boreal-ui.overrides;@layer boreal-ui.components{.toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;width:100%;min-width:200px;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--background-color-light);color:inherit;gap:var(--spacing-sm)}@media(max-width:319.98px){.toolbar{padding:var(--spacing-xs) var(--spacing-sm);gap:var(--spacing-xs)}}@media(min-width:1024px){.toolbar{padding:var(--spacing-md) var(--spacing-lg)}}.toolbar_primary{--toolbar-glass-bg: var(--primary-glass-background);--toolbar-glass-border: var(--primary-glass-border);--toolbar-glass-text: var(--text-color-primary);background-color:var(--primary-color);color:var(--text-color-primary)}.toolbar_secondary{--toolbar-glass-bg: var(--secondary-glass-background);--toolbar-glass-border: var(--secondary-glass-border);--toolbar-glass-text: var(--text-color-secondary);background-color:var(--secondary-color);color:var(--text-color-secondary)}.toolbar_tertiary{--toolbar-glass-bg: var(--tertiary-glass-background);--toolbar-glass-border: var(--tertiary-glass-border);--toolbar-glass-text: var(--text-color-tertiary);background-color:var(--tertiary-color);color:var(--text-color-tertiary)}.toolbar_quaternary{--toolbar-glass-bg: var(--quaternary-glass-background);--toolbar-glass-border: var(--quaternary-glass-border);--toolbar-glass-text: var(--text-color-quaternary);background-color:var(--quaternary-color);color:var(--text-color-quaternary)}.toolbar_clear{--toolbar-glass-bg: var(--clear-glass-background);--toolbar-glass-border: var(--clear-glass-border);--toolbar-glass-text: var(--text-color);background-color:transparent;color:var(--text-color)}.toolbar_glass{background:var(--toolbar-glass-bg, var(--glass-background));border:1px solid var(--toolbar-glass-border, var(--glass-border-color));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));color:inherit}.toolbar_static{position:static}.toolbar_fixed{position:fixed;top:0;left:0;right:0;z-index:var(--z-index-fixed, 1000)}.toolbar_sticky{position:sticky;top:0;z-index:var(--z-index-sticky, 999)}.toolbar_section{flex:1;display:flex;align-items:center;justify-content:center}.toolbar_section:first-child{justify-content:flex-start}.toolbar_section:last-child{justify-content:flex-end}@media(max-width:479.98px){.toolbar_section{width:100%;justify-content:space-between;margin-bottom:var(--spacing-xs)}.toolbar_section:last-child{margin-bottom:0}}.toolbar_leftSection{justify-content:flex-start}.toolbar_centerSection{justify-content:center}.toolbar_rightSection{justify-content:flex-end}.toolbar_sectionContent{display:flex;align-items:center;min-width:0;max-width:100%;gap:var(--spacing-sm)}.toolbar_leftContent{justify-content:flex-start}.toolbar_centerContent{flex-direction:column;justify-content:center;text-align:center}.toolbar_rightContent{justify-content:flex-end}.toolbar_sectionContent>*:focus-visible{outline:2px solid var(--focus-outline-color, var(--primary-color));outline-offset:2px;border-radius:6px}.toolbar_title{margin:0;font-family:var(--font-family-heading);font-size:var(--font-size-h6);font-weight:var(--font-weight-heading);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-heading)}@media(max-width:479.98px){.toolbar_title{font-size:var(--font-size-body);margin-bottom:var(--spacing-xs)}}@media(min-width:1024px){.toolbar_title{font-size:var(--font-size-h5)}}.toolbar_avatarWrapper{margin-left:var(--spacing-sm)}@media(max-width:479.98px){.toolbar_avatarWrapper{margin-left:0;margin-top:var(--spacing-xs)}}.toolbar_round-None{border-bottom-right-radius:var(--border-radius-none);border-bottom-left-radius:var(--border-radius-none)}.toolbar_round-Small{border-bottom-right-radius:var(--border-radius-sm);border-bottom-left-radius:var(--border-radius-sm)}.toolbar_round-Medium{border-bottom-right-radius:var(--border-radius-md);border-bottom-left-radius:var(--border-radius-md)}.toolbar_round-Large{border-bottom-right-radius:var(--border-radius-lg);border-bottom-left-radius:var(--border-radius-lg)}.toolbar_round-Full{border-bottom-right-radius:var(--border-radius-full);border-bottom-left-radius:var(--border-radius-full)}.toolbar_shadow-None{box-shadow:var(--box-shadow-none)}.toolbar_shadow-Light{box-shadow:var(--box-shadow-light)}.toolbar_shadow-Medium{box-shadow:var(--box-shadow-medium)}.toolbar_shadow-Strong{box-shadow:var(--box-shadow-heavy)}.toolbar_shadow-Intense{box-shadow:var(--box-shadow-intense)}@media(prefers-reduced-motion:reduce){.toolbar,.toolbar *{transition:none!important}}@media(forced-colors:active){.toolbar{background:Canvas;color:CanvasText;border-bottom:1px solid ButtonText}.toolbar_sectionContent>*:focus-visible{outline:2px solid Highlight;outline-offset:2px}.toolbar.toolbar_glass{background:Canvas!important;border:1px solid ButtonText!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}}
|
package/dist/core/Toolbar.js
CHANGED