welcome-ui 10.0.7 → 10.0.8
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/Window.css +1 -1
- package/dist/Window.js +75 -75
- package/package.json +1 -1
package/dist/Window.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.
|
|
1
|
+
@layer components{._root_1r7a4_2{border-style:solid;background-color:var(--window-body-color-background-default);border-width:var(--window-border-width);border-color:var(--window-color-border-default);border-radius:var(--radius-lg);box-shadow:var(--elevation-10);overflow:hidden}._header_1r7a4_11{display:flex;align-items:center;justify-content:space-between;background-color:var(--window-header-color-background);min-height:var(--window-header-size-min-height);border-bottom:var(--window-border-width) solid;border-color:var(--window-color-border-default);padding-inline:var(--window-header-padding-inline-xs);padding-block:var(--window-header-padding-block-xs);gap:var(--window-header-gap-content);border-top-left-radius:var(--window-border-radius);border-top-right-radius:var(--window-border-radius)}._header-title_1r7a4_25{display:flex;flex:1;justify-content:center;text-align:center}._header-tabs_1r7a4_31{display:flex;gap:var(--spacing-sm)}._header-tab-item_1r7a4_35{cursor:pointer;display:flex;align-items:center;justify-content:center;transition-property:border-color,background-color,box-shadow;transition-timing-function:ease-in-out;border-radius:var(--radius-md);border-width:var(--window-header-tab-border-width-active);gap:var(--spacing-xs);padding-block:var(--spacing-xs);padding-inline:var(--spacing-sm);transition-duration:var(--duration-fast);border-color:var(--windowTabItemBorderColor, transparent);background-color:var(--windowTabItemBackgroundColor, transparent);color:var(--windowTabItemColor, var(--window-header-tab-color-text-default))}._header-tab-item_1r7a4_35:hover{--windowTabItemBackgroundColor: var(--window-header-tab-color-background-hover);--windowTabItemColor: var(--window-header-tab-color-text-hover)}._header-tab-item_1r7a4_35[aria-selected=true]{--windowTabItemBorderColor: var(--color-border-brand-primary);--windowTabItemBackgroundColor: var(--window-header-tab-color-background-active);--windowTabItemColor: var(--window-header-tab-color-text-active)}._header-tab-item_1r7a4_35[aria-disabled=true]{cursor:not-allowed;--windowTabItemColor: var(--button-color-text-secondary-main-disabled);background:repeating-linear-gradient(-45deg,transparent,transparent 2.4px,color-mix(in srgb,var(--color-neutral-50) 12%,transparent) 2.4px,color-mix(in srgb,var(--color-neutral-50) 12%,transparent) 4.3px),var(--button-color-background-secondary-main-disabled)}._header-action-button_1r7a4_69{cursor:pointer;display:flex;justify-content:center;align-items:center;transition-property:border-color,background-color,box-shadow;transition-timing-function:ease-in-out;transition-duration:var(--duration-fast);width:var(--window-header-action-size-container);height:var(--window-header-action-size-container);border-radius:var(--window-header-action-border-radius);outline:transparent solid var(--border-width-md);background-color:var(--windowButtonBackgroundColor, var(--window-header-action-color-background-close-default))}._header-action-button_1r7a4_69 svg{color:var(--windowButtonIconColor, var(--window-header-action-color-icon-common-default))}._header-action-button_1r7a4_69[data-focus-visible],._header-action-button_1r7a4_69:focus-visible{outline-width:var(--button-border-width-focused);outline-color:var(--button-color-border-focused)}._header-action-button_1r7a4_69:hover{--windowButtonBackgroundColor: var(--window-header-action-color-background-common-hover);--windowButtonIconColor: var(--window-header-action-color-icon-common-hover)}._header-action-button_1r7a4_69:active{--windowButtonBackgroundColor: var(--window-header-action-color-background-common-pressed);--windowButtonIconColor: var(--window-header-action-color-icon-common-pressed)}._header-close-button_1r7a4_100{border:1px solid var(--windowHeaderCloseButtonBorderColor, var(--window-header-action-color-border-close-default));--windowButtonIconColor: var(--window-header-action-color-icon-close-default)}._header-close-button_1r7a4_100:hover{background-color:var(--window-header-action-color-background-close-hover);--windowHeaderCloseButtonBorderColor: var( --window-header-action-color-background-close-hover );--windowButtonIconColor: var(--window-header-action-color-icon-close-hover)}._header-close-button_1r7a4_100:active{background-color:var(--window-header-action-color-background-close-pressed);--windowHeaderCloseButtonBorderColor: var( --window-header-action-color-background-close-pressed );--windowButtonIconColor: var(--window-header-action-color-icon-close-pressed)}._header-actions_1r7a4_118{display:flex;gap:var(--window-header-gap-content)}._tab-panel_1r7a4_122[hidden]{display:none}._media_1r7a4_125,._box-text_1r7a4_126{margin-block:var(--window-body-padding-block-xs);margin-inline:var(--window-body-padding-inline-xs)}._media_1r7a4_125 :first-child{border-radius:var(--window-border-radius);max-width:100%;height:auto}._box-text_1r7a4_126{border-radius:var(--window-border-radius);background-color:var(--color-background-warm-primary);padding-block:var(--window-body-padding-block-sm);padding-inline:var(--window-body-padding-inline-sm)}._size-xl_1r7a4_141{padding-block:var(--window-body-padding-block-xl);padding-inline:var(--window-body-padding-inline-xl)}._size-lg_1r7a4_145{padding-block:var(--window-body-padding-block-lg);padding-inline:var(--window-body-padding-inline-lg)}._size-md_1r7a4_149{padding-block:var(--window-body-padding-block-md);padding-inline:var(--window-body-padding-inline-md)}._size-sm_1r7a4_153{padding-block:var(--window-body-padding-block-sm);padding-inline:var(--window-body-padding-inline-sm)}._size-xs_1r7a4_157{padding-block:var(--window-body-padding-block-xs);padding-inline:var(--window-body-padding-inline-xs)}}
|
package/dist/Window.js
CHANGED
|
@@ -1,79 +1,79 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import './Window.css';
|
|
3
|
-
import { jsx as
|
|
3
|
+
import { jsx as r, jsxs as _ } from "react/jsx-runtime";
|
|
4
4
|
import { c as d } from "./index-PAaZGbyz.js";
|
|
5
5
|
import { f as b } from "./forwardRefWithAs-8eP3ZN15.js";
|
|
6
|
-
import { forwardRef as l, useState as
|
|
7
|
-
import { T, a as
|
|
6
|
+
import { forwardRef as l, useState as W } from "react";
|
|
7
|
+
import { T as v, a as $, b as B } from "./tab-panel-Bs1vehNH.js";
|
|
8
8
|
import { Icon as m } from "./Icon.js";
|
|
9
|
-
import { Text as
|
|
10
|
-
const
|
|
11
|
-
root:
|
|
12
|
-
header:
|
|
13
|
-
"header-title": "_header-
|
|
14
|
-
"header-tabs": "_header-
|
|
15
|
-
"header-tab-item": "_header-tab-
|
|
16
|
-
"header-action-button": "_header-action-
|
|
17
|
-
"header-close-button": "_header-close-
|
|
18
|
-
"header-actions": "_header-
|
|
19
|
-
"tab-panel": "_tab-
|
|
20
|
-
media:
|
|
21
|
-
"box-text": "_box-
|
|
22
|
-
"size-xl": "_size-
|
|
23
|
-
"size-lg": "_size-
|
|
24
|
-
"size-md": "_size-
|
|
25
|
-
"size-sm": "_size-
|
|
26
|
-
"size-xs": "_size-
|
|
27
|
-
},
|
|
28
|
-
({ children: t, className: a, size: e = "md", ...s },
|
|
9
|
+
import { Text as h } from "./Text.js";
|
|
10
|
+
const g = "_root_1r7a4_2", j = "_header_1r7a4_11", A = "_media_1r7a4_125", c = {
|
|
11
|
+
root: g,
|
|
12
|
+
header: j,
|
|
13
|
+
"header-title": "_header-title_1r7a4_25",
|
|
14
|
+
"header-tabs": "_header-tabs_1r7a4_31",
|
|
15
|
+
"header-tab-item": "_header-tab-item_1r7a4_35",
|
|
16
|
+
"header-action-button": "_header-action-button_1r7a4_69",
|
|
17
|
+
"header-close-button": "_header-close-button_1r7a4_100",
|
|
18
|
+
"header-actions": "_header-actions_1r7a4_118",
|
|
19
|
+
"tab-panel": "_tab-panel_1r7a4_122",
|
|
20
|
+
media: A,
|
|
21
|
+
"box-text": "_box-text_1r7a4_126",
|
|
22
|
+
"size-xl": "_size-xl_1r7a4_141",
|
|
23
|
+
"size-lg": "_size-lg_1r7a4_145",
|
|
24
|
+
"size-md": "_size-md_1r7a4_149",
|
|
25
|
+
"size-sm": "_size-sm_1r7a4_153",
|
|
26
|
+
"size-xs": "_size-xs_1r7a4_157"
|
|
27
|
+
}, H = d(c), u = l(
|
|
28
|
+
({ children: t, className: a, size: e = "md", ...s }, o) => /* @__PURE__ */ r("div", { className: H("body", `size-${e}`, a), ref: o, ...s, children: t })
|
|
29
29
|
);
|
|
30
|
-
|
|
31
|
-
const
|
|
32
|
-
({ children: t, className: a, ...e }, s) => /* @__PURE__ */
|
|
30
|
+
u.displayName = "Window.Body";
|
|
31
|
+
const P = d(c), x = l(
|
|
32
|
+
({ children: t, className: a, ...e }, s) => /* @__PURE__ */ r("div", { className: P("box-text", a), ref: s, ...e, children: t })
|
|
33
33
|
);
|
|
34
|
-
|
|
35
|
-
const
|
|
34
|
+
x.displayName = "Window.BoxText";
|
|
35
|
+
const n = d(c), p = ({
|
|
36
36
|
"aria-label": t,
|
|
37
37
|
className: a,
|
|
38
38
|
icon: e,
|
|
39
39
|
onClick: s,
|
|
40
|
-
...
|
|
41
|
-
}) => /* @__PURE__ */
|
|
40
|
+
...o
|
|
41
|
+
}) => /* @__PURE__ */ r(
|
|
42
42
|
"button",
|
|
43
43
|
{
|
|
44
44
|
"aria-label": t,
|
|
45
|
-
className:
|
|
45
|
+
className: n("header-action-button", a),
|
|
46
46
|
onClick: s,
|
|
47
47
|
type: "button",
|
|
48
|
-
...
|
|
49
|
-
children: /* @__PURE__ */
|
|
48
|
+
...o,
|
|
49
|
+
children: /* @__PURE__ */ r(m, { name: e })
|
|
50
50
|
}
|
|
51
|
-
),
|
|
51
|
+
), w = ({
|
|
52
52
|
as: t,
|
|
53
53
|
className: a,
|
|
54
54
|
onClick: e
|
|
55
|
-
}) => /* @__PURE__ */
|
|
56
|
-
|
|
55
|
+
}) => /* @__PURE__ */ r(
|
|
56
|
+
p,
|
|
57
57
|
{
|
|
58
58
|
"aria-label": "Close window",
|
|
59
59
|
as: t,
|
|
60
|
-
className:
|
|
60
|
+
className: n("header-close-button", a),
|
|
61
61
|
icon: "times",
|
|
62
62
|
onClick: e
|
|
63
63
|
}
|
|
64
|
-
),
|
|
65
|
-
({ as: t, children: a, icon: e, id: s, store:
|
|
66
|
-
|
|
64
|
+
), R = ({ children: t, store: a }) => /* @__PURE__ */ r($, { className: n("header-tabs"), store: a, children: t }), k = b(
|
|
65
|
+
({ as: t, children: a, icon: e, id: s, store: o, ...i }, T) => /* @__PURE__ */ _(
|
|
66
|
+
v,
|
|
67
67
|
{
|
|
68
|
-
className:
|
|
68
|
+
className: n("header-tab-item"),
|
|
69
69
|
id: s,
|
|
70
|
-
ref:
|
|
71
|
-
render: t ? /* @__PURE__ */
|
|
72
|
-
store:
|
|
70
|
+
ref: T,
|
|
71
|
+
render: t ? /* @__PURE__ */ r(t, {}) : void 0,
|
|
72
|
+
store: o,
|
|
73
73
|
...i,
|
|
74
74
|
children: [
|
|
75
|
-
e ? /* @__PURE__ */
|
|
76
|
-
/* @__PURE__ */
|
|
75
|
+
e ? /* @__PURE__ */ r(m, { name: e }) : null,
|
|
76
|
+
/* @__PURE__ */ r(h, { variant: "label-sm", children: a })
|
|
77
77
|
]
|
|
78
78
|
},
|
|
79
79
|
s
|
|
@@ -82,56 +82,56 @@ const r = d(c), x = ({
|
|
|
82
82
|
const s = () => {
|
|
83
83
|
e == null || e();
|
|
84
84
|
};
|
|
85
|
-
return /* @__PURE__ */ _("div", { className:
|
|
85
|
+
return /* @__PURE__ */ _("div", { className: n("header-actions"), children: [
|
|
86
86
|
t,
|
|
87
|
-
a ? /* @__PURE__ */
|
|
87
|
+
a ? /* @__PURE__ */ r(w, { onClick: s }) : null
|
|
88
88
|
] });
|
|
89
89
|
}, L = ({ isExpandable: t = !1, onExpandChange: a }) => {
|
|
90
|
-
const [e, s] =
|
|
90
|
+
const [e, s] = W(!1), o = () => {
|
|
91
91
|
const i = !e;
|
|
92
92
|
s(i), a == null || a(i);
|
|
93
93
|
};
|
|
94
|
-
return /* @__PURE__ */
|
|
94
|
+
return /* @__PURE__ */ r("div", { className: n("header-actions"), children: t ? /* @__PURE__ */ r(
|
|
95
95
|
"button",
|
|
96
96
|
{
|
|
97
97
|
"aria-expanded": e,
|
|
98
98
|
"aria-label": e ? "Collapse window" : "Expand window",
|
|
99
|
-
className:
|
|
100
|
-
onClick:
|
|
99
|
+
className: n("header-action-button"),
|
|
100
|
+
onClick: o,
|
|
101
101
|
type: "button",
|
|
102
|
-
children: /* @__PURE__ */
|
|
102
|
+
children: /* @__PURE__ */ r(m, { name: e ? "compress-alt" : "arrow-resize-diagonal" })
|
|
103
103
|
}
|
|
104
104
|
) : null });
|
|
105
|
-
}, M = ({ as: t, className: a, title: e }) => /* @__PURE__ */
|
|
106
|
-
({ children: t, className: a, ...e }, s) => /* @__PURE__ */
|
|
105
|
+
}, M = ({ as: t, className: a, title: e }) => /* @__PURE__ */ r(h, { as: t, className: n("header-title", a), variant: "body-md-strong", children: e }), N = l(
|
|
106
|
+
({ children: t, className: a, ...e }, s) => /* @__PURE__ */ r("header", { className: n("header", a), ref: s, ...e, children: t })
|
|
107
107
|
);
|
|
108
|
-
|
|
109
|
-
const O = Object.assign(
|
|
110
|
-
Button:
|
|
111
|
-
CloseButton:
|
|
108
|
+
N.displayName = "Window.Header";
|
|
109
|
+
const O = Object.assign(N, {
|
|
110
|
+
Button: p,
|
|
111
|
+
CloseButton: w,
|
|
112
112
|
LeftActions: L,
|
|
113
113
|
RightActions: I,
|
|
114
|
-
Tab:
|
|
115
|
-
Tabs:
|
|
114
|
+
Tab: k,
|
|
115
|
+
Tabs: R,
|
|
116
116
|
Title: M
|
|
117
|
-
}), S = d(c),
|
|
118
|
-
({ children: t, className: a, ...e }, s) => /* @__PURE__ */
|
|
117
|
+
}), S = d(c), f = l(
|
|
118
|
+
({ children: t, className: a, ...e }, s) => /* @__PURE__ */ r("div", { className: S("media", a), ref: s, ...e, children: t })
|
|
119
119
|
);
|
|
120
|
-
|
|
121
|
-
const E = d(c),
|
|
122
|
-
({ children: t, store: a, tabId: e, ...s },
|
|
120
|
+
f.displayName = "Window.Media";
|
|
121
|
+
const E = d(c), y = l(
|
|
122
|
+
({ children: t, store: a, tabId: e, ...s }, o) => /* @__PURE__ */ r(B, { className: E("tab-panel"), ref: o, store: a, tabId: e, ...s, children: t })
|
|
123
123
|
);
|
|
124
|
-
|
|
125
|
-
const q = d(c),
|
|
126
|
-
({ as: t = "div", children: a, className: e, role: s = "region", ...
|
|
124
|
+
y.displayName = "Window.TabPanel";
|
|
125
|
+
const q = d(c), z = b(
|
|
126
|
+
({ as: t = "div", children: a, className: e, role: s = "region", ...o }, i) => /* @__PURE__ */ r(t, { className: q("root", e), ref: i, role: s, ...o, children: a })
|
|
127
127
|
);
|
|
128
|
-
|
|
129
|
-
const V = Object.assign(
|
|
130
|
-
Body:
|
|
131
|
-
BoxText:
|
|
128
|
+
z.displayName = "Window";
|
|
129
|
+
const V = Object.assign(z, {
|
|
130
|
+
Body: u,
|
|
131
|
+
BoxText: x,
|
|
132
132
|
Header: O,
|
|
133
|
-
Media:
|
|
134
|
-
TabPanel:
|
|
133
|
+
Media: f,
|
|
134
|
+
TabPanel: y
|
|
135
135
|
});
|
|
136
136
|
export {
|
|
137
137
|
V as Window
|