boreal-ui 0.0.9010 → 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.
@@ -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
+ };
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Toolbar.css');;/* empty css */const e=require("./Toolbar-CO9Km-M4.cjs");exports.default=e.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;
@@ -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}}.toolbar_section>*: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_section>*: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}}}
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}}}
@@ -1,5 +1,5 @@
1
1
  import './Toolbar.css';/* empty css */
2
- import { T as a } from "./Toolbar-_dsHdL9o.js";
2
+ import { T as a } from "./Toolbar-mrvMlxNP.js";
3
3
  export {
4
4
  a as default
5
5
  };