welcome-ui 10.0.3 → 10.0.4-alpha.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/Drawer.css +1 -1
- package/dist/Drawer.js +103 -103
- package/dist/Stepper.js +50 -50
- package/dist/types/components/Stepper/types.d.ts +1 -0
- package/package.json +1 -1
package/dist/Drawer.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{._asset-drawer_4vnol_3{overflow:hidden;border-top-left-radius:var(--border-radius-2xl);border-top-right-radius:var(--border-radius-2xl);top:auto!important}._asset-drawer_4vnol_3[class*=root]{height:calc(100% - 3rem)}._content-wrapper_4vnol_14{height:100%;margin-top:var(--spacing-xl);overflow-y:auto;width:100%}@media screen and (min-width: 736px){._content-wrapper_4vnol_14{margin-top:var(--spacing-3xl)}}._content-max-width_4vnol_25{flex:1;margin:0 auto;width:100%;max-width:var(--assetDrawerContentMaxWidth, 51.25rem)}._content_4vnol_14{--assetDrawerContentPadding: 0 var(--spacing-md) var(--spacing-xl);padding:var(--assetDrawerContentPadding)}@media screen and (min-width: 736px){._content_4vnol_14{--assetDrawerContentPadding: 0 var(--spacing-xl) var(--spacing-3xl)}}._asset-drawer-header_4vnol_40{display:flex;flex-direction:column;gap:var(--spacing-xl);justify-content:space-between;background-color:var(--color-background-neutral-inverse-fixed);margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-md);position:sticky;top:0;z-index:1}@media screen and (min-width: 736px){._asset-drawer-header_4vnol_40{align-items:center;flex-direction:row}}._back-button_4vnol_58{align-items:center;display:flex;gap:var(--spacing-md)}@media screen and (min-width: 736px){._back-button_4vnol_58{gap:var(--spacing-xl)}}._title_4vnol_68{display:flex;flex-direction:column;gap:var(--spacing-xxs)}._icon-block_4vnol_73{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--border-radius-sm);background-color:var(--color-background-warm-primary);transition:background-color var(--duration-medium);--iconBlockSize: var(--size-icon-2xl);width:var(--iconBlockSize);height:var(--iconBlockSize)}._icon-block_4vnol_73._size-md_4vnol_85{--iconBlockSize: var(--size-icon-2xl)}._icon-block_4vnol_73._size-sm_4vnol_88{--iconBlockSize: var(--size-icon-xl)}}@layer components{.
|
|
1
|
+
@layer components{._asset-drawer_4vnol_3{overflow:hidden;border-top-left-radius:var(--border-radius-2xl);border-top-right-radius:var(--border-radius-2xl);top:auto!important}._asset-drawer_4vnol_3[class*=root]{height:calc(100% - 3rem)}._content-wrapper_4vnol_14{height:100%;margin-top:var(--spacing-xl);overflow-y:auto;width:100%}@media screen and (min-width: 736px){._content-wrapper_4vnol_14{margin-top:var(--spacing-3xl)}}._content-max-width_4vnol_25{flex:1;margin:0 auto;width:100%;max-width:var(--assetDrawerContentMaxWidth, 51.25rem)}._content_4vnol_14{--assetDrawerContentPadding: 0 var(--spacing-md) var(--spacing-xl);padding:var(--assetDrawerContentPadding)}@media screen and (min-width: 736px){._content_4vnol_14{--assetDrawerContentPadding: 0 var(--spacing-xl) var(--spacing-3xl)}}._asset-drawer-header_4vnol_40{display:flex;flex-direction:column;gap:var(--spacing-xl);justify-content:space-between;background-color:var(--color-background-neutral-inverse-fixed);margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-md);position:sticky;top:0;z-index:1}@media screen and (min-width: 736px){._asset-drawer-header_4vnol_40{align-items:center;flex-direction:row}}._back-button_4vnol_58{align-items:center;display:flex;gap:var(--spacing-md)}@media screen and (min-width: 736px){._back-button_4vnol_58{gap:var(--spacing-xl)}}._title_4vnol_68{display:flex;flex-direction:column;gap:var(--spacing-xxs)}._icon-block_4vnol_73{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--border-radius-sm);background-color:var(--color-background-warm-primary);transition:background-color var(--duration-medium);--iconBlockSize: var(--size-icon-2xl);width:var(--iconBlockSize);height:var(--iconBlockSize)}._icon-block_4vnol_73._size-md_4vnol_85{--iconBlockSize: var(--size-icon-2xl)}._icon-block_4vnol_73._size-sm_4vnol_88{--iconBlockSize: var(--size-icon-xl)}}@layer components{._root_uc9ud_3{background-color:var(--drawer-body-color-background-default);border:var(--drawer-border-width) solid var(--drawer-color-border-default);box-shadow:var(--elevation-10);z-index:999;position:fixed;display:flex;flex-direction:column;opacity:0;transition:var(--duration-medium);max-width:100%;--drawerLeft: 0;--drawerRight: 0;--drawerTop: 0;--drawerBottom: 0;--drawerHeight: calc(100% - var(--spacing-md) * 2);--drawerWidth: calc(100% - var(--spacing-md) * 2);--drawerTransform: translate(0, 0);left:var(--drawerLeft);right:var(--drawerRight);top:var(--drawerTop);bottom:var(--drawerBottom);width:var(--drawerWidth);height:var(--drawerHeight);transform:var(--drawerTransform)}@media screen and (max-width: 736px){._root_uc9ud_3{--drawerTransform: translate(0, 0);left:0;right:0;top:0;bottom:0;width:100%;height:100%;margin:0;border-radius:0;transform:var(--drawerTransform)}}._root_uc9ud_3:has(>header) ._drawer-close_uc9ud_47{display:none}@media screen and (min-width: 736px){._root_uc9ud_3{border-radius:var(--drawer-border-radius);margin:var(--spacing-md)}}._root_uc9ud_3._placement-bottom_uc9ud_56{--drawerTop: calc(100% - var(--drawerHeight) - var(--spacing-md) * 2);--drawerTransform: translate(0, 100%)}._root_uc9ud_3._placement-left_uc9ud_60{--drawerRight: calc(100% - var(--drawerWidth) - var(--spacing-md) * 2);--drawerTransform: translate(-100%, 0)}._root_uc9ud_3._placement-right_uc9ud_64{--drawerLeft: calc(100% - var(--drawerWidth) - var(--spacing-md) * 2);--drawerTransform: translate(100%, 0)}._root_uc9ud_3._placement-top_uc9ud_68{--drawerBottom: calc(100% - var(--drawerHeight) - var(--spacing-md) * 2);--drawerTransform: translate(0, -100%)}._root_uc9ud_3._placement-top_uc9ud_68._size-sm_uc9ud_72,._root_uc9ud_3._placement-bottom_uc9ud_56._size-sm_uc9ud_72{--drawerHeight: 25rem}._root_uc9ud_3._placement-top_uc9ud_68._size-md_uc9ud_75,._root_uc9ud_3._placement-bottom_uc9ud_56._size-md_uc9ud_75{--drawerHeight: 34.375rem}._root_uc9ud_3._placement-top_uc9ud_68._size-lg_uc9ud_78,._root_uc9ud_3._placement-bottom_uc9ud_56._size-lg_uc9ud_78{--drawerHeight: 42.5rem}._root_uc9ud_3._placement-left_uc9ud_60._size-sm_uc9ud_72,._root_uc9ud_3._placement-right_uc9ud_64._size-sm_uc9ud_72{--drawerWidth: 25rem}._root_uc9ud_3._placement-left_uc9ud_60._size-md_uc9ud_75,._root_uc9ud_3._placement-right_uc9ud_64._size-md_uc9ud_75{--drawerWidth: 34.375rem}._root_uc9ud_3._placement-left_uc9ud_60._size-lg_uc9ud_78,._root_uc9ud_3._placement-right_uc9ud_64._size-lg_uc9ud_78{--drawerWidth: 42.5rem}._root_uc9ud_3[data-enter]{opacity:1;--drawerTransform: translate(0, 0)}._root_uc9ud_3._fullscreen_uc9ud_94{top:0;left:0;width:calc(100% - var(--spacing-md) * 2);height:calc(100% - var(--spacing-md) * 2)}._root_uc9ud_3._fullscreen_uc9ud_94._placement-left_uc9ud_60:not([data-enter]){--drawerTransform: translate(-100%, 0)}._root_uc9ud_3._fullscreen_uc9ud_94._placement-right_uc9ud_64:not([data-enter]){--drawerTransform: translate(100%, 0)}._root_uc9ud_3._fullscreen_uc9ud_94._placement-top_uc9ud_68:not([data-enter]){--drawerTransform: translate(0, -100%)}._root_uc9ud_3._fullscreen_uc9ud_94._placement-bottom_uc9ud_56:not([data-enter]){--drawerTransform: translate(0, 100%)}._root_uc9ud_3._fullscreen_uc9ud_94 ._media_uc9ud_112{display:flex;align-items:center;justify-content:center}._root_uc9ud_3._fullscreen_uc9ud_94 ._media_uc9ud_112 :first-child{max-height:calc(100vh - 37px - var(--spacing-xxl) * 2);width:auto;height:auto}._backdrop_uc9ud_122{background-color:var(--color-background-transparent-black-subtle);z-index:999;position:fixed;top:0;right:0;left:0;bottom:0;opacity:0;transition:opacity .15s ease-in-out}._backdrop_uc9ud_122._drawer-hide-on-interact-outside_uc9ud_133{cursor:pointer}._backdrop_uc9ud_122[data-enter]{opacity:1}._content_uc9ud_139{flex:1;padding:var(--spacing-xxl);overflow-y:auto}._content-header_uc9ud_144{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}._content-header-subtitle_uc9ud_150{color:var(--modal-color-text-body);margin-bottom:var(--spacing-md)}._footer_uc9ud_154{bottom:0;position:sticky;z-index:1;width:100%;background-color:var(--drawer-body-color-background-default);padding:var(--spacing-xl);display:flex;flex-wrap:wrap;gap:var(--spacing-md)}._variant-right_uc9ud_165{justify-content:flex-end;align-items:center}._variant-full_uc9ud_169 button,._variant-full_uc9ud_169 a{flex:1}._title_uc9ud_173{display:flex;align-items:center;justify-content:space-between;position:sticky;z-index:1;top:0;width:100%;background-color:var(--drawer-body-color-background-default);margin:0;padding:var(--spacing-xl) var(--spacing-5xl) var(--spacing-xl) var(--spacing-xl)}._drawer-close_uc9ud_47{position:absolute;right:var(--spacing-xs);top:var(--spacing-xs);z-index:10}}
|
package/dist/Drawer.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import './Drawer.css';
|
|
3
|
-
import { jsx as e, jsxs as d, Fragment as
|
|
4
|
-
import { D as
|
|
5
|
-
import { u as
|
|
3
|
+
import { jsx as e, jsxs as d, Fragment as S } from "react/jsx-runtime";
|
|
4
|
+
import { D as q } from "./2S4Q4M35-CzDcLRQb.js";
|
|
5
|
+
import { u as ye } from "./2S4Q4M35-CzDcLRQb.js";
|
|
6
6
|
import { useCallback as g, forwardRef as h } from "react";
|
|
7
|
-
import { Window as
|
|
7
|
+
import { Window as i } from "./Window.js";
|
|
8
8
|
import { c as o } from "./index-PAaZGbyz.js";
|
|
9
|
-
import { f as
|
|
9
|
+
import { f as B } from "./forwardRefWithAs-8eP3ZN15.js";
|
|
10
10
|
import { Button as R } from "./Button.js";
|
|
11
|
-
import { Icon as
|
|
12
|
-
import { Text as
|
|
11
|
+
import { Icon as $ } from "./Icon.js";
|
|
12
|
+
import { Text as y } from "./Text.js";
|
|
13
13
|
import { D as Z } from "./C2LT7CSX-B3kzKaLP.js";
|
|
14
14
|
import { D as J } from "./GYHYTZZN-DHSdjG7J.js";
|
|
15
|
-
const K = "_content_4vnol_14", L = "_title_4vnol_68",
|
|
15
|
+
const K = "_content_4vnol_14", L = "_title_4vnol_68", k = {
|
|
16
16
|
"asset-drawer": "_asset-drawer_4vnol_3",
|
|
17
17
|
"content-wrapper": "_content-wrapper_4vnol_14",
|
|
18
18
|
"content-max-width": "_content-max-width_4vnol_25",
|
|
@@ -23,17 +23,17 @@ const K = "_content_4vnol_14", L = "_title_4vnol_68", $ = {
|
|
|
23
23
|
"icon-block": "_icon-block_4vnol_73",
|
|
24
24
|
"size-md": "_size-md_4vnol_85",
|
|
25
25
|
"size-sm": "_size-sm_4vnol_88"
|
|
26
|
-
}, w = o(
|
|
26
|
+
}, w = o(k), W = B(
|
|
27
27
|
({
|
|
28
28
|
children: t,
|
|
29
29
|
className: r,
|
|
30
30
|
getPersistentElements: a,
|
|
31
31
|
hideOnInteractOutside: s = !0,
|
|
32
32
|
maxWidth: n,
|
|
33
|
-
store:
|
|
34
|
-
...
|
|
35
|
-
},
|
|
36
|
-
const
|
|
33
|
+
store: c,
|
|
34
|
+
...u
|
|
35
|
+
}, _) => {
|
|
36
|
+
const l = g(
|
|
37
37
|
() => Array.from(
|
|
38
38
|
a ? a() : document.querySelectorAll("[data-wui-persistent]")
|
|
39
39
|
),
|
|
@@ -41,25 +41,25 @@ const K = "_content_4vnol_14", L = "_title_4vnol_68", $ = {
|
|
|
41
41
|
), v = g(
|
|
42
42
|
(b) => {
|
|
43
43
|
if (!s) return !1;
|
|
44
|
-
const
|
|
45
|
-
return !
|
|
46
|
-
(x) => x.contains(
|
|
44
|
+
const p = b.target;
|
|
45
|
+
return !l().some(
|
|
46
|
+
(x) => x.contains(p)
|
|
47
47
|
);
|
|
48
48
|
},
|
|
49
|
-
[
|
|
49
|
+
[l, s]
|
|
50
50
|
), N = typeof n == "number" ? `${n}px` : n;
|
|
51
51
|
return /* @__PURE__ */ e(
|
|
52
|
-
|
|
52
|
+
le,
|
|
53
53
|
{
|
|
54
54
|
autoFocusOnShow: !1,
|
|
55
55
|
className: w("asset-drawer", r),
|
|
56
|
-
getPersistentElements:
|
|
56
|
+
getPersistentElements: l,
|
|
57
57
|
hideOnInteractOutside: v,
|
|
58
58
|
placement: "bottom",
|
|
59
|
-
ref:
|
|
60
|
-
store:
|
|
59
|
+
ref: _,
|
|
60
|
+
store: c,
|
|
61
61
|
withBackdrop: !0,
|
|
62
|
-
...
|
|
62
|
+
...u,
|
|
63
63
|
children: /* @__PURE__ */ e("div", { className: w("content-wrapper"), children: /* @__PURE__ */ e(
|
|
64
64
|
"div",
|
|
65
65
|
{
|
|
@@ -72,50 +72,50 @@ const K = "_content_4vnol_14", L = "_title_4vnol_68", $ = {
|
|
|
72
72
|
);
|
|
73
73
|
}
|
|
74
74
|
);
|
|
75
|
-
|
|
76
|
-
const Q = o(
|
|
77
|
-
|
|
78
|
-
const f = o(
|
|
75
|
+
W.displayName = "AssetDrawer";
|
|
76
|
+
const Q = o(k), U = { md: "lg", sm: "md" }, F = ({ iconName: t, size: r = "md" }) => /* @__PURE__ */ e("div", { className: Q("icon-block", `size-${r}`), children: /* @__PURE__ */ e($, { className: "text-neutral-90", name: t, size: U[r] }) });
|
|
77
|
+
F.displayName = "AssetDrawer.IconBlock";
|
|
78
|
+
const f = o(k), H = ({
|
|
79
79
|
action: t,
|
|
80
80
|
className: r,
|
|
81
81
|
iconName: a,
|
|
82
82
|
onBackButtonClick: s,
|
|
83
83
|
subtitle: n,
|
|
84
|
-
title:
|
|
84
|
+
title: c
|
|
85
85
|
}) => /* @__PURE__ */ d("div", { className: f("asset-drawer-header", r), children: [
|
|
86
86
|
/* @__PURE__ */ d("div", { className: f("back-button"), children: [
|
|
87
|
-
!!s && /* @__PURE__ */ e(R, { onClick: s, variant: "tertiary", children: /* @__PURE__ */ e(
|
|
88
|
-
!!a && /* @__PURE__ */ e(
|
|
87
|
+
!!s && /* @__PURE__ */ e(R, { onClick: s, variant: "tertiary", children: /* @__PURE__ */ e($, { name: "arrow-left" }) }),
|
|
88
|
+
!!a && /* @__PURE__ */ e(F, { iconName: a }),
|
|
89
89
|
/* @__PURE__ */ d("div", { className: f("title"), children: [
|
|
90
|
-
/* @__PURE__ */ e(
|
|
90
|
+
/* @__PURE__ */ e(y, { as: "h3", className: "pr-xl", variant: "heading-lg", children: c }),
|
|
91
91
|
n
|
|
92
92
|
] })
|
|
93
93
|
] }),
|
|
94
94
|
t ? /* @__PURE__ */ e("div", { className: f("actions"), children: t }) : null
|
|
95
95
|
] });
|
|
96
|
-
|
|
97
|
-
const V = "
|
|
96
|
+
H.displayName = "AssetDrawer.Header";
|
|
97
|
+
const V = "_root_uc9ud_3", X = "_fullscreen_uc9ud_94", Y = "_media_uc9ud_112", G = "_backdrop_uc9ud_122", ee = "_content_uc9ud_139", te = "_footer_uc9ud_154", re = "_title_uc9ud_173", m = {
|
|
98
98
|
root: V,
|
|
99
|
-
"drawer-close": "_drawer-
|
|
100
|
-
"placement-bottom": "_placement-
|
|
101
|
-
"placement-left": "_placement-
|
|
102
|
-
"placement-right": "_placement-
|
|
103
|
-
"placement-top": "_placement-
|
|
104
|
-
"size-sm": "_size-
|
|
105
|
-
"size-md": "_size-
|
|
106
|
-
"size-lg": "_size-
|
|
99
|
+
"drawer-close": "_drawer-close_uc9ud_47",
|
|
100
|
+
"placement-bottom": "_placement-bottom_uc9ud_56",
|
|
101
|
+
"placement-left": "_placement-left_uc9ud_60",
|
|
102
|
+
"placement-right": "_placement-right_uc9ud_64",
|
|
103
|
+
"placement-top": "_placement-top_uc9ud_68",
|
|
104
|
+
"size-sm": "_size-sm_uc9ud_72",
|
|
105
|
+
"size-md": "_size-md_uc9ud_75",
|
|
106
|
+
"size-lg": "_size-lg_uc9ud_78",
|
|
107
107
|
fullscreen: X,
|
|
108
108
|
media: Y,
|
|
109
109
|
backdrop: G,
|
|
110
|
-
"drawer-hide-on-interact-outside": "_drawer-hide-on-interact-
|
|
110
|
+
"drawer-hide-on-interact-outside": "_drawer-hide-on-interact-outside_uc9ud_133",
|
|
111
111
|
content: ee,
|
|
112
|
-
"content-header": "_content-
|
|
113
|
-
"content-header-subtitle": "_content-header-
|
|
112
|
+
"content-header": "_content-header_uc9ud_144",
|
|
113
|
+
"content-header-subtitle": "_content-header-subtitle_uc9ud_150",
|
|
114
114
|
footer: te,
|
|
115
|
-
"variant-right": "_variant-
|
|
116
|
-
"variant-full": "_variant-
|
|
115
|
+
"variant-right": "_variant-right_uc9ud_165",
|
|
116
|
+
"variant-full": "_variant-full_uc9ud_169",
|
|
117
117
|
title: re
|
|
118
|
-
}, ae = o(m),
|
|
118
|
+
}, ae = o(m), z = h(
|
|
119
119
|
({ hideOnInteractOutside: t = !0, ...r }, a) => /* @__PURE__ */ e(
|
|
120
120
|
"div",
|
|
121
121
|
{
|
|
@@ -125,12 +125,12 @@ const V = "_root_dqip3_3", X = "_fullscreen_dqip3_95", Y = "_media_dqip3_113", G
|
|
|
125
125
|
}
|
|
126
126
|
)
|
|
127
127
|
);
|
|
128
|
-
|
|
129
|
-
const se = o(m),
|
|
128
|
+
z.displayName = "Drawer.Backdrop";
|
|
129
|
+
const se = o(m), T = ({ className: t }) => /* @__PURE__ */ e(
|
|
130
130
|
Z,
|
|
131
131
|
{
|
|
132
132
|
render: (r) => /* @__PURE__ */ e(
|
|
133
|
-
|
|
133
|
+
i.Header.CloseButton,
|
|
134
134
|
{
|
|
135
135
|
"aria-label": "Close",
|
|
136
136
|
className: se("drawer-close", t),
|
|
@@ -139,30 +139,30 @@ const se = o(m), z = ({ className: t }) => /* @__PURE__ */ e(
|
|
|
139
139
|
)
|
|
140
140
|
}
|
|
141
141
|
);
|
|
142
|
-
|
|
143
|
-
const D = o(m),
|
|
144
|
-
({ children: t, className: r, iconName: a, subtitle: s, title: n, ...
|
|
145
|
-
const
|
|
146
|
-
return /* @__PURE__ */ d("div", { className: D("content", r), ref:
|
|
147
|
-
|
|
148
|
-
a ? /* @__PURE__ */ e(
|
|
149
|
-
n ? /* @__PURE__ */ e(
|
|
142
|
+
T.displayName = "Drawer.Close";
|
|
143
|
+
const D = o(m), I = h(
|
|
144
|
+
({ children: t, className: r, iconName: a, subtitle: s, title: n, ...c }, u) => {
|
|
145
|
+
const _ = !!(a || n);
|
|
146
|
+
return /* @__PURE__ */ d("div", { className: D("content", r), ref: u, ...c, children: [
|
|
147
|
+
_ ? /* @__PURE__ */ d("div", { className: D("content-header"), children: [
|
|
148
|
+
a ? /* @__PURE__ */ e($, { name: a, size: "lg" }) : null,
|
|
149
|
+
n ? /* @__PURE__ */ e(y, { variant: "heading-md-strong", children: n }) : null
|
|
150
150
|
] }) : null,
|
|
151
|
-
s ? /* @__PURE__ */ e(
|
|
151
|
+
s ? /* @__PURE__ */ e(y, { className: D("content-header-subtitle"), variant: "body-lg", children: s }) : null,
|
|
152
152
|
t
|
|
153
153
|
] });
|
|
154
154
|
}
|
|
155
155
|
);
|
|
156
|
-
|
|
157
|
-
const ne = o(m),
|
|
156
|
+
I.displayName = "Drawer.Content";
|
|
157
|
+
const ne = o(m), O = h(
|
|
158
158
|
({ className: t, variant: r = "right", ...a }, s) => /* @__PURE__ */ e("div", { className: ne("footer", `variant-${r}`, t), ref: s, ...a })
|
|
159
159
|
);
|
|
160
|
-
|
|
161
|
-
const oe = o(m),
|
|
162
|
-
({ className: t, ...r }, a) => /* @__PURE__ */ e(
|
|
160
|
+
O.displayName = "Drawer.Footer";
|
|
161
|
+
const oe = o(m), P = h(
|
|
162
|
+
({ className: t, ...r }, a) => /* @__PURE__ */ e(i.Media, { className: oe("media", t), ref: a, ...r })
|
|
163
163
|
);
|
|
164
|
-
|
|
165
|
-
const
|
|
164
|
+
P.displayName = "Drawer.Media";
|
|
165
|
+
const A = B(
|
|
166
166
|
({ as: t, store: r, ...a }, s) => /* @__PURE__ */ e(
|
|
167
167
|
J,
|
|
168
168
|
{
|
|
@@ -173,81 +173,81 @@ const T = C(
|
|
|
173
173
|
}
|
|
174
174
|
)
|
|
175
175
|
);
|
|
176
|
-
|
|
177
|
-
const
|
|
176
|
+
A.displayName = "Drawer.Trigger";
|
|
177
|
+
const ce = o(m), E = h(
|
|
178
178
|
({
|
|
179
179
|
children: t,
|
|
180
180
|
className: r,
|
|
181
181
|
fullscreen: a = !1,
|
|
182
182
|
getPersistentElements: s,
|
|
183
183
|
hideOnInteractOutside: n = !0,
|
|
184
|
-
placement:
|
|
185
|
-
size:
|
|
186
|
-
store:
|
|
187
|
-
withBackdrop:
|
|
184
|
+
placement: c = "right",
|
|
185
|
+
size: u = "lg",
|
|
186
|
+
store: _,
|
|
187
|
+
withBackdrop: l = !1,
|
|
188
188
|
withCloseButton: v = !0,
|
|
189
189
|
...N
|
|
190
190
|
}, b) => {
|
|
191
|
-
const
|
|
191
|
+
const p = g(
|
|
192
192
|
() => Array.from(
|
|
193
193
|
s ? s() : document.querySelectorAll("[data-wui-persistent]")
|
|
194
194
|
),
|
|
195
195
|
[s]
|
|
196
|
-
),
|
|
196
|
+
), C = g(
|
|
197
197
|
(x) => {
|
|
198
198
|
if (!n) return !1;
|
|
199
|
-
const
|
|
200
|
-
return !
|
|
201
|
-
(
|
|
199
|
+
const M = x.target;
|
|
200
|
+
return !p().some(
|
|
201
|
+
(j) => j.contains(M)
|
|
202
202
|
);
|
|
203
203
|
},
|
|
204
|
-
[
|
|
204
|
+
[p, n]
|
|
205
205
|
);
|
|
206
206
|
return /* @__PURE__ */ e(
|
|
207
|
-
|
|
207
|
+
q,
|
|
208
208
|
{
|
|
209
|
-
backdrop:
|
|
210
|
-
getPersistentElements:
|
|
211
|
-
hideOnInteractOutside:
|
|
212
|
-
modal:
|
|
209
|
+
backdrop: l ? /* @__PURE__ */ e(z, { hideOnInteractOutside: n }) : !1,
|
|
210
|
+
getPersistentElements: p,
|
|
211
|
+
hideOnInteractOutside: C,
|
|
212
|
+
modal: l,
|
|
213
213
|
ref: b,
|
|
214
214
|
render: /* @__PURE__ */ e(
|
|
215
215
|
"div",
|
|
216
216
|
{
|
|
217
|
-
className:
|
|
217
|
+
className: ce(
|
|
218
218
|
"root",
|
|
219
|
-
`placement-${
|
|
220
|
-
`size-${
|
|
219
|
+
`placement-${c}`,
|
|
220
|
+
`size-${u}`,
|
|
221
221
|
a && "fullscreen",
|
|
222
222
|
r
|
|
223
223
|
)
|
|
224
224
|
}
|
|
225
225
|
),
|
|
226
|
-
store:
|
|
226
|
+
store: _,
|
|
227
227
|
...N,
|
|
228
|
-
children: /* @__PURE__ */ d(
|
|
229
|
-
v ? /* @__PURE__ */ e(
|
|
228
|
+
children: /* @__PURE__ */ d(S, { children: [
|
|
229
|
+
v ? /* @__PURE__ */ e(T, {}) : null,
|
|
230
230
|
t
|
|
231
231
|
] })
|
|
232
232
|
}
|
|
233
233
|
);
|
|
234
234
|
}
|
|
235
235
|
);
|
|
236
|
-
|
|
237
|
-
const
|
|
238
|
-
Backdrop:
|
|
239
|
-
Body:
|
|
240
|
-
BoxText:
|
|
241
|
-
Close:
|
|
242
|
-
Content:
|
|
243
|
-
Footer:
|
|
244
|
-
Header:
|
|
245
|
-
Media:
|
|
246
|
-
Trigger:
|
|
247
|
-
WindowTabPanel:
|
|
248
|
-
}), be = Object.assign(
|
|
236
|
+
E.displayName = "Drawer";
|
|
237
|
+
const le = Object.assign(E, {
|
|
238
|
+
Backdrop: z,
|
|
239
|
+
Body: i.Body,
|
|
240
|
+
BoxText: i.BoxText,
|
|
241
|
+
Close: T,
|
|
242
|
+
Content: I,
|
|
243
|
+
Footer: O,
|
|
244
|
+
Header: i.Header,
|
|
245
|
+
Media: P,
|
|
246
|
+
Trigger: A,
|
|
247
|
+
WindowTabPanel: i.TabPanel
|
|
248
|
+
}), be = Object.assign(W, { Header: H, Trigger: A });
|
|
249
249
|
export {
|
|
250
250
|
be as AssetDrawer,
|
|
251
|
-
|
|
252
|
-
|
|
251
|
+
le as Drawer,
|
|
252
|
+
ye as useDrawer
|
|
253
253
|
};
|
package/dist/Stepper.js
CHANGED
|
@@ -1,85 +1,85 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import './Stepper.css';
|
|
3
|
-
import { jsx as
|
|
4
|
-
import { forwardRef as
|
|
3
|
+
import { jsx as o, jsxs as k } from "react/jsx-runtime";
|
|
4
|
+
import { forwardRef as I, useState as b, useRef as R, useEffect as u } from "react";
|
|
5
5
|
import { Icon as i } from "./Icon.js";
|
|
6
|
-
import { c as
|
|
7
|
-
import { Text as
|
|
8
|
-
const
|
|
9
|
-
root:
|
|
10
|
-
wrapper:
|
|
6
|
+
import { c as x } from "./index-PAaZGbyz.js";
|
|
7
|
+
import { Text as L } from "./Text.js";
|
|
8
|
+
const F = "_root_e6wyb_2", j = "_wrapper_e6wyb_16", z = "_separator_e6wyb_49", E = "_item_e6wyb_53", O = "_clickable_e6wyb_87", V = "_completed_e6wyb_96", W = {
|
|
9
|
+
root: F,
|
|
10
|
+
wrapper: j,
|
|
11
11
|
"fade-left": "_fade-left_e6wyb_28",
|
|
12
12
|
"fade-right": "_fade-right_e6wyb_28",
|
|
13
|
-
separator:
|
|
14
|
-
item:
|
|
15
|
-
clickable:
|
|
16
|
-
completed:
|
|
13
|
+
separator: z,
|
|
14
|
+
item: E,
|
|
15
|
+
clickable: O,
|
|
16
|
+
completed: V
|
|
17
17
|
};
|
|
18
|
-
function
|
|
19
|
-
icon:
|
|
20
|
-
isCompleted:
|
|
21
|
-
isOpen:
|
|
18
|
+
function q({
|
|
19
|
+
icon: c,
|
|
20
|
+
isCompleted: s,
|
|
21
|
+
isOpen: e
|
|
22
22
|
}) {
|
|
23
|
-
return
|
|
23
|
+
return c || (s ? /* @__PURE__ */ o(i, { name: "check-circle" }) : e ? /* @__PURE__ */ o(i, { name: "folder-open" }) : /* @__PURE__ */ o(i, { name: "folder" }));
|
|
24
24
|
}
|
|
25
|
-
const
|
|
26
|
-
({ children:
|
|
27
|
-
const [
|
|
25
|
+
const m = x(W), h = I(
|
|
26
|
+
({ children: c, className: s, wrapperProps: e }, a) => {
|
|
27
|
+
const [l, f] = b(!1), [d, S] = b(!1), g = R(null), n = a || g;
|
|
28
28
|
return u(() => {
|
|
29
|
-
const
|
|
30
|
-
if (!
|
|
31
|
-
const
|
|
32
|
-
const { clientWidth:
|
|
33
|
-
|
|
29
|
+
const t = n.current;
|
|
30
|
+
if (!t) return;
|
|
31
|
+
const r = () => {
|
|
32
|
+
const { clientWidth: v, scrollLeft: p, scrollWidth: N } = t;
|
|
33
|
+
f(p > 0), S(p < N - v - 1);
|
|
34
34
|
};
|
|
35
|
-
|
|
36
|
-
const
|
|
37
|
-
return
|
|
38
|
-
|
|
35
|
+
r(), t.addEventListener("scroll", r);
|
|
36
|
+
const _ = new ResizeObserver(r);
|
|
37
|
+
return _.observe(t), () => {
|
|
38
|
+
t.removeEventListener("scroll", r), _.disconnect();
|
|
39
39
|
};
|
|
40
40
|
}, [n]), u(() => {
|
|
41
|
-
const
|
|
42
|
-
if (!
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
}, [
|
|
41
|
+
const t = n.current;
|
|
42
|
+
if (!t) return;
|
|
43
|
+
const r = t.querySelector('[aria-current="true"]');
|
|
44
|
+
r && r.scrollIntoView && r.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
|
|
45
|
+
}, [c, n]), /* @__PURE__ */ o("div", { className: m("root", e == null ? void 0 : e.className), ...e, children: /* @__PURE__ */ o(
|
|
46
46
|
"ol",
|
|
47
47
|
{
|
|
48
|
-
className:
|
|
48
|
+
className: m(
|
|
49
49
|
"wrapper",
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
50
|
+
s,
|
|
51
|
+
l && "fade-left",
|
|
52
|
+
d && "fade-right"
|
|
53
53
|
),
|
|
54
54
|
ref: n,
|
|
55
|
-
children:
|
|
55
|
+
children: c
|
|
56
56
|
}
|
|
57
57
|
) });
|
|
58
58
|
}
|
|
59
59
|
);
|
|
60
|
-
|
|
61
|
-
const
|
|
62
|
-
|
|
63
|
-
const y = ({ children:
|
|
64
|
-
const
|
|
65
|
-
return /* @__PURE__ */
|
|
60
|
+
h.displayName = "Stepper";
|
|
61
|
+
const w = () => /* @__PURE__ */ o("div", { className: m("separator"), children: /* @__PURE__ */ o(i, { name: "angle-right-b", size: "lg" }) });
|
|
62
|
+
w.displayName = "Stepper.Separator";
|
|
63
|
+
const y = ({ children: c, icon: s, isCompleted: e, isOpen: a, onClick: l }) => {
|
|
64
|
+
const f = q({ icon: s, isCompleted: e, isOpen: a });
|
|
65
|
+
return /* @__PURE__ */ k(
|
|
66
66
|
"li",
|
|
67
67
|
{
|
|
68
68
|
"aria-current": a,
|
|
69
|
-
className:
|
|
69
|
+
className: m("item", !!l && "clickable", e && "completed"),
|
|
70
70
|
onClick: l,
|
|
71
71
|
children: [
|
|
72
|
-
|
|
73
|
-
/* @__PURE__ */
|
|
72
|
+
f,
|
|
73
|
+
/* @__PURE__ */ o(L, { variant: "label-md", children: c })
|
|
74
74
|
]
|
|
75
75
|
}
|
|
76
76
|
);
|
|
77
77
|
};
|
|
78
78
|
y.displayName = "Stepper.Item";
|
|
79
|
-
const
|
|
79
|
+
const G = Object.assign(h, {
|
|
80
80
|
Item: y,
|
|
81
|
-
Separator:
|
|
81
|
+
Separator: w
|
|
82
82
|
});
|
|
83
83
|
export {
|
|
84
|
-
|
|
84
|
+
G as Stepper
|
|
85
85
|
};
|