@elcrm/components 0.1.2 → 0.2.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/README.md +66 -2
- package/dist/ActionGroup.css +1 -1
- package/dist/Avatar.d.ts +2 -1
- package/dist/AvatarGroup.d.ts +2 -1
- package/dist/AvatarName-0BzyfpMq.js +68 -0
- package/dist/AvatarName.css +1 -1
- package/dist/AvatarName.d.ts +4 -1
- package/dist/AvatarName.js +1 -1
- package/dist/Badge.d.ts +2 -1
- package/dist/Card.css +1 -1
- package/dist/ChatFrame-BW2TmCkZ.js +37 -0
- package/dist/ChatFrame.css +1 -0
- package/dist/ChatList.d.ts +9 -0
- package/dist/ChatList.js +7 -0
- package/dist/ChatMessages-B8rdXiK-.js +19 -0
- package/dist/ChatMessages.d.ts +9 -0
- package/dist/ChatMessages.js +4 -0
- package/dist/ChatSplit-DNnu3TNq.js +21 -0
- package/dist/CheckIcon-FdB8fMEF.js +17 -0
- package/dist/CheckIcon.d.ts +8 -0
- package/dist/Dropdown-4yUB2tk1.js +142 -0
- package/dist/Dropdown.css +1 -1
- package/dist/Dropdown.js +1 -1
- package/dist/Footer.css +1 -1
- package/dist/Item.css +1 -1
- package/dist/ItemColumn.css +1 -1
- package/dist/ItemColumn.d.ts +2 -1
- package/dist/Layout-mi6Ghayv.js +31 -0
- package/dist/Layout.css +1 -1
- package/dist/Layout.d.ts +19 -2
- package/dist/Layout.js +1 -1
- package/dist/Loading-DkkG7RcE.js +16 -0
- package/dist/Loading.css +1 -1
- package/dist/Loading.d.ts +1 -1
- package/dist/Loading.js +1 -1
- package/dist/Menu-DuXQv-zT.js +66 -0
- package/dist/Menu.css +1 -1
- package/dist/Menu.js +1 -1
- package/dist/NavSections-BpyZPimZ.js +79 -0
- package/dist/NavSections.css +1 -1
- package/dist/NavSections.js +1 -1
- package/dist/PageHead.css +1 -1
- package/dist/Popover-D0m5JWIt.js +142 -0
- package/dist/Popover.css +1 -1
- package/dist/Popover.js +1 -1
- package/dist/PricingGroup-Czuhe81Z.js +120 -0
- package/dist/PricingGroup.css +1 -1
- package/dist/PricingGroup.js +1 -1
- package/dist/{PricingTable-DALddSwM.js → PricingTable-BuLC0opK.js} +69 -75
- package/dist/PricingTable.css +1 -1
- package/dist/PricingTable.js +1 -1
- package/dist/RadioGroup-fcXzhvMu.js +129 -0
- package/dist/RadioGroup.css +1 -1
- package/dist/RadioGroup.js +1 -1
- package/dist/Sidebar-CBYq1ad6.js +107 -0
- package/dist/Sidebar.css +1 -1
- package/dist/Sidebar.d.ts +17 -1
- package/dist/Sidebar.js +1 -1
- package/dist/Stat.css +1 -1
- package/dist/TabSections-DN7yVJoF.js +69 -0
- package/dist/TabSections.css +1 -1
- package/dist/TabSections.js +1 -1
- package/dist/TextGroup.d.ts +2 -1
- package/dist/badgeText-CRzlIzi3.js +8 -0
- package/dist/badgeText.d.ts +4 -0
- package/dist/dark.css +4 -1
- package/dist/index.css +21 -19
- package/dist/index.d.ts +10 -1
- package/dist/index.es.d.ts +10 -1
- package/dist/index.es.js +51 -44
- package/dist/light.css +4 -1
- package/dist/rovingKeys-CGlfTtNQ.js +15 -0
- package/dist/rovingKeys.d.ts +13 -0
- package/dist/tokens.css +35 -14
- package/dist/types.d.ts +2 -0
- package/dist/useControllableValue-CWqH1kpM.js +10 -0
- package/dist/useControllableValue.d.ts +4 -0
- package/package.json +5 -1
- package/dist/AvatarName-C1sIDPH-.js +0 -66
- package/dist/Dropdown-CQBMF9aR.js +0 -151
- package/dist/Layout-BQwEaeO0.js +0 -22
- package/dist/Loading-ChGq9peU.js +0 -15
- package/dist/Menu-DpUvOl8Y.js +0 -58
- package/dist/NavSections-NDcIDD6H.js +0 -59
- package/dist/Popover-g2xTGubK.js +0 -123
- package/dist/PricingGroup-DgcdVSq8.js +0 -126
- package/dist/RadioGroup-D2UUOTkY.js +0 -138
- package/dist/Sidebar-DeqxYgxn.js +0 -69
- package/dist/TabSections-Bf_sZo7b.js +0 -50
|
@@ -1,53 +1,45 @@
|
|
|
1
1
|
import l from "react";
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
2
|
+
import { C as w } from "./CheckIcon-FdB8fMEF.js";
|
|
3
|
+
import { c as D } from "./cx-CcykAxZN.js";
|
|
4
|
+
import { u as F } from "./useControllableValue-CWqH1kpM.js";
|
|
5
|
+
import './PricingTable.css';const q = "cxr", z = "cxh", B = "cxm", I = "cxn", O = "cxt", T = "cxg", V = "cxp", M = "cxz", H = "cxo", K = "cxe", R = "cxd", S = "cxx", $ = "cxb", j = "cxy", A = "cxl", G = "cxw", J = "cxc", L = "cxk", Q = "cxv", U = "cxa", W = "cxu", X = "cxq", n = {
|
|
6
|
+
r: q,
|
|
7
|
+
h: z,
|
|
8
|
+
m: B,
|
|
9
|
+
n: I,
|
|
10
|
+
t: O,
|
|
11
|
+
g: T,
|
|
12
|
+
p: V,
|
|
13
|
+
z: M,
|
|
14
|
+
o: H,
|
|
15
|
+
e: K,
|
|
16
|
+
d: R,
|
|
17
|
+
x: S,
|
|
18
|
+
b: $,
|
|
19
|
+
y: j,
|
|
20
|
+
l: A,
|
|
21
|
+
w: G,
|
|
22
|
+
c: J,
|
|
23
|
+
k: L,
|
|
22
24
|
v: Q,
|
|
23
|
-
a:
|
|
24
|
-
u:
|
|
25
|
-
q:
|
|
25
|
+
a: U,
|
|
26
|
+
u: W,
|
|
27
|
+
q: X
|
|
26
28
|
};
|
|
27
|
-
function
|
|
28
|
-
return /* @__PURE__ */ l.createElement("span", { className: n.k, "aria-hidden": !0 }, /* @__PURE__ */ l.createElement(
|
|
29
|
-
"path",
|
|
30
|
-
{
|
|
31
|
-
d: "M2.5 6.2 4.8 8.5 9.5 3.5",
|
|
32
|
-
fill: "none",
|
|
33
|
-
stroke: "currentColor",
|
|
34
|
-
strokeWidth: "1.8",
|
|
35
|
-
strokeLinecap: "round",
|
|
36
|
-
strokeLinejoin: "round"
|
|
37
|
-
}
|
|
38
|
-
)));
|
|
29
|
+
function Y() {
|
|
30
|
+
return /* @__PURE__ */ l.createElement("span", { className: n.k, "aria-hidden": !0 }, /* @__PURE__ */ l.createElement(w, { className: n.v }));
|
|
39
31
|
}
|
|
40
|
-
function
|
|
41
|
-
return e === !0 ? /* @__PURE__ */ l.createElement(
|
|
32
|
+
function Z({ value: e }) {
|
|
33
|
+
return e === !0 ? /* @__PURE__ */ l.createElement(Y, null) : e === !1 || e == null || e === "" ? /* @__PURE__ */ l.createElement("span", { className: n.a }, "—") : /* @__PURE__ */ l.createElement(l.Fragment, null, e);
|
|
42
34
|
}
|
|
43
|
-
function
|
|
35
|
+
function _({
|
|
44
36
|
item: e,
|
|
45
37
|
highlighted: r,
|
|
46
38
|
selectable: o,
|
|
47
39
|
disabled: u,
|
|
48
40
|
onSelect: d
|
|
49
41
|
}) {
|
|
50
|
-
const
|
|
42
|
+
const m = e.badge != null && (e.badgePlacement ?? "pill") === "pill", p = e.badge != null && e.badgePlacement === "banner";
|
|
51
43
|
return /* @__PURE__ */ l.createElement(
|
|
52
44
|
"div",
|
|
53
45
|
{
|
|
@@ -58,31 +50,31 @@ function ee({
|
|
|
58
50
|
onClick: () => {
|
|
59
51
|
o && !u && d();
|
|
60
52
|
},
|
|
61
|
-
onKeyDown: (
|
|
62
|
-
!o || u || (
|
|
53
|
+
onKeyDown: (t) => {
|
|
54
|
+
!o || u || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), d());
|
|
63
55
|
}
|
|
64
56
|
},
|
|
65
|
-
|
|
57
|
+
p ? /* @__PURE__ */ l.createElement("span", { className: n.g }, e.badge) : null,
|
|
66
58
|
e.icon != null ? /* @__PURE__ */ l.createElement("div", { className: n.m }, e.icon) : null,
|
|
67
|
-
e.priceFirst ? /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(
|
|
59
|
+
e.priceFirst ? /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(x, { item: e }), /* @__PURE__ */ l.createElement(v, { item: e, pill: m }), e.description != null ? /* @__PURE__ */ l.createElement("p", { className: n.d }, e.description) : null) : /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(v, { item: e, pill: m }), e.descriptionPlacement === "before-price" && e.description != null ? /* @__PURE__ */ l.createElement("p", { className: n.d }, e.description) : null, /* @__PURE__ */ l.createElement(x, { item: e }), e.descriptionPlacement !== "before-price" && e.description != null ? /* @__PURE__ */ l.createElement("p", { className: n.d }, e.description) : null),
|
|
68
60
|
e.actions != null ? /* @__PURE__ */ l.createElement(
|
|
69
61
|
"div",
|
|
70
62
|
{
|
|
71
63
|
className: n.x,
|
|
72
|
-
onClick: (
|
|
73
|
-
onMouseDown: (
|
|
64
|
+
onClick: (t) => t.stopPropagation(),
|
|
65
|
+
onMouseDown: (t) => t.preventDefault()
|
|
74
66
|
},
|
|
75
67
|
e.actions
|
|
76
68
|
) : null
|
|
77
69
|
);
|
|
78
70
|
}
|
|
79
|
-
function
|
|
71
|
+
function v({
|
|
80
72
|
item: e,
|
|
81
73
|
pill: r
|
|
82
74
|
}) {
|
|
83
75
|
return e.title == null && !r ? null : /* @__PURE__ */ l.createElement("div", { className: n.n }, e.title != null ? /* @__PURE__ */ l.createElement("h3", { className: n.t }, e.title) : null, r ? /* @__PURE__ */ l.createElement("span", { className: n.g }, e.badge) : null);
|
|
84
76
|
}
|
|
85
|
-
function
|
|
77
|
+
function x({ item: e }) {
|
|
86
78
|
return e.price == null && e.priceOld == null && e.meta == null ? null : /* @__PURE__ */ l.createElement("div", { className: n.p }, e.priceOld != null ? /* @__PURE__ */ l.createElement("span", { className: n.o }, e.priceOld) : null, e.price != null ? /* @__PURE__ */ l.createElement("span", { className: n.z }, e.price) : null, e.meta != null ? /* @__PURE__ */ l.createElement("span", { className: n.e }, e.meta) : null);
|
|
87
79
|
}
|
|
88
80
|
function te({
|
|
@@ -91,41 +83,43 @@ function te({
|
|
|
91
83
|
footerActions: o = !0,
|
|
92
84
|
value: u,
|
|
93
85
|
defaultValue: d,
|
|
94
|
-
selectable:
|
|
95
|
-
disabled:
|
|
96
|
-
onValueChange:
|
|
97
|
-
className:
|
|
98
|
-
style:
|
|
99
|
-
...
|
|
86
|
+
selectable: m = !1,
|
|
87
|
+
disabled: p = !1,
|
|
88
|
+
onValueChange: t,
|
|
89
|
+
className: g,
|
|
90
|
+
style: h,
|
|
91
|
+
...N
|
|
100
92
|
}) {
|
|
101
|
-
const [
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
93
|
+
const [f, b] = F(
|
|
94
|
+
u,
|
|
95
|
+
d,
|
|
96
|
+
t
|
|
97
|
+
), k = e.length, y = {
|
|
98
|
+
...h,
|
|
99
|
+
gridTemplateColumns: `var(--pricing-table-label-width) repeat(${k}, minmax(12rem, 1fr))`
|
|
106
100
|
};
|
|
107
|
-
let
|
|
108
|
-
return /* @__PURE__ */ l.createElement("div", { className:
|
|
109
|
-
const s =
|
|
101
|
+
let P = 0;
|
|
102
|
+
return /* @__PURE__ */ l.createElement("div", { className: D(n.r, g), style: y, role: "table", ...N }, /* @__PURE__ */ l.createElement("div", { className: n.q, role: "columnheader" }), e.map((a) => {
|
|
103
|
+
const s = f === a.value, c = !!a.highlighted || s;
|
|
110
104
|
return /* @__PURE__ */ l.createElement(
|
|
111
|
-
|
|
105
|
+
_,
|
|
112
106
|
{
|
|
113
|
-
key:
|
|
114
|
-
item:
|
|
107
|
+
key: a.value,
|
|
108
|
+
item: a,
|
|
115
109
|
highlighted: c,
|
|
116
|
-
selectable:
|
|
117
|
-
disabled:
|
|
118
|
-
onSelect: () =>
|
|
110
|
+
selectable: m && !p && !a.disabled,
|
|
111
|
+
disabled: p || !!a.disabled,
|
|
112
|
+
onSelect: () => b(a.value)
|
|
119
113
|
}
|
|
120
114
|
);
|
|
121
|
-
}), r == null ? void 0 : r.map((
|
|
122
|
-
const
|
|
115
|
+
}), r == null ? void 0 : r.map((a, s) => /* @__PURE__ */ l.createElement(l.Fragment, { key: s }, a.title != null ? /* @__PURE__ */ l.createElement("div", { className: n.b, role: "rowheader" }, a.title) : null, a.rows.map((c) => {
|
|
116
|
+
const C = P++ % 2 === 1;
|
|
123
117
|
return /* @__PURE__ */ l.createElement(
|
|
124
118
|
"div",
|
|
125
119
|
{
|
|
126
120
|
key: c.key,
|
|
127
121
|
className: n.y,
|
|
128
|
-
"data-alt":
|
|
122
|
+
"data-alt": C ? "true" : void 0,
|
|
129
123
|
role: "row"
|
|
130
124
|
},
|
|
131
125
|
/* @__PURE__ */ l.createElement("div", { className: n.l, role: "rowheader" }, /* @__PURE__ */ l.createElement("span", null, c.label), c.hint != null && c.hint !== "" ? /* @__PURE__ */ l.createElement(
|
|
@@ -138,19 +132,19 @@ function te({
|
|
|
138
132
|
},
|
|
139
133
|
"?"
|
|
140
134
|
) : null),
|
|
141
|
-
e.map((
|
|
142
|
-
var
|
|
143
|
-
return /* @__PURE__ */ l.createElement("div", { key:
|
|
135
|
+
e.map((i) => {
|
|
136
|
+
var E;
|
|
137
|
+
return /* @__PURE__ */ l.createElement("div", { key: i.value, className: n.c, role: "cell" }, /* @__PURE__ */ l.createElement(Z, { value: (E = c.values) == null ? void 0 : E[i.value] }));
|
|
144
138
|
})
|
|
145
139
|
);
|
|
146
|
-
}))), o ? /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement("div", { className: n.q }), e.map((
|
|
140
|
+
}))), o ? /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement("div", { className: n.q }), e.map((a) => /* @__PURE__ */ l.createElement("div", { key: a.value, className: n.u }, a.actions != null ? /* @__PURE__ */ l.createElement(
|
|
147
141
|
"div",
|
|
148
142
|
{
|
|
149
143
|
className: n.x,
|
|
150
144
|
onClick: (s) => s.stopPropagation(),
|
|
151
145
|
onMouseDown: (s) => s.preventDefault()
|
|
152
146
|
},
|
|
153
|
-
|
|
147
|
+
a.actions
|
|
154
148
|
) : null))) : null);
|
|
155
149
|
}
|
|
156
150
|
export {
|
package/dist/PricingTable.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer elcrm-components{.cxr{display:grid;width:100%;column-gap:var(--shell-gap);row-gap:0;align-items:stretch;overflow-x:auto}.cxh{display:flex;flex-direction:column;gap:var(--shell-gap-sm);padding:var(--shell-padding);box-sizing:border-box;color:var(--shell-color);background:var(--shell-background);border:1px solid transparent;border-radius:var(--shell-radius)}.cxh[data-highlighted=true]{border-color:var(--shell-color-accent);background:var(--shell-background-selected)}.cxm{display:flex;align-items:center;justify-content:center;width:calc(var(--shell-icon-size) * 1.4);height:calc(var(--shell-icon-size) * 1.4);color:var(--shell-color-accent);background:var(--shell-background-hover);border-radius:var(--shell-radius);overflow:hidden}.cxn{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shell-gap-sm)}.cxt{margin:0;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3}.cxg{display:inline-flex;align-items:center;padding:.15rem .5rem;border-radius:999px;background:var(--shell-background-hover);color:var(--shell-color-accent);font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight)}.cxp{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--shell-gap-sm)}.cxz{font-size:var(--shell-font-size-lg);font-weight:700;color:var(--shell-color);line-height:1.15}.cxo{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);text-decoration:line-through}.cxe{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.cxd{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.45}.cxx{display:flex;flex-direction:column;gap:var(--shell-gap-sm)}.cxb{grid-column:1 / -1;margin:var(--shell-gap) 0 var(--shell-gap-sm);padding:0;font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);color:var(--shell-color-accent)}.cxf,.cxy{display:contents}.cxy>*{padding:var(--shell-padding);box-sizing:border-box;border-bottom:1px solid var(--shell-border);background:var(--shell-background)}.cxy[data-alt=true]>*{background:var(--shell-background-muted)}.cxl{display:flex;align-items:center;gap:var(--shell-gap-sm);font-size:var(--shell-font-size-sm);color:var(--shell-color);line-height:1.4}.cxw{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-status-size);height:var(--shell-status-size);padding:0;border:1px solid var(--shell-border);border-radius:50%;background:transparent;color:var(--shell-color-muted);font-size:9px;line-height:1;cursor:help}.cxc{display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--shell-font-size-sm);color:var(--shell-color);font-weight:500}.cxk{display:inline-flex;align-items:center;justify-content:center;width:var(--shell-check-size);height:var(--shell-check-size);color
|
|
1
|
+
@layer elcrm-components{.cxr{display:grid;width:100%;column-gap:var(--shell-gap);row-gap:0;align-items:stretch;overflow-x:auto}.cxh{display:flex;flex-direction:column;gap:var(--shell-gap-sm);padding:var(--shell-padding);box-sizing:border-box;color:var(--shell-color);background:var(--shell-background);border:1px solid transparent;border-radius:var(--shell-radius)}.cxh[data-highlighted=true]{border-color:var(--shell-color-accent);background:var(--shell-background-selected)}.cxm{display:flex;align-items:center;justify-content:center;width:calc(var(--shell-icon-size) * 1.4);height:calc(var(--shell-icon-size) * 1.4);color:var(--shell-color-accent);background:var(--shell-background-hover);border-radius:var(--shell-radius);overflow:hidden}.cxn{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shell-gap-sm)}.cxt{margin:0;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3}.cxg{display:inline-flex;align-items:center;padding:.15rem .5rem;border-radius:999px;background:var(--shell-background-hover);color:var(--shell-color-accent);font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight)}.cxp{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--shell-gap-sm)}.cxz{font-size:var(--shell-font-size-lg);font-weight:700;color:var(--shell-color);line-height:1.15}.cxo{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);text-decoration:line-through}.cxe{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.cxd{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.45}.cxx{display:flex;flex-direction:column;gap:var(--shell-gap-sm)}.cxb{grid-column:1 / -1;margin:var(--shell-gap) 0 var(--shell-gap-sm);padding:0;font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);color:var(--shell-color-accent)}.cxf,.cxy{display:contents}.cxy>*{padding:var(--shell-padding);box-sizing:border-box;border-bottom:1px solid var(--shell-border);background:var(--shell-background)}.cxy[data-alt=true]>*{background:var(--shell-background-muted)}.cxl{display:flex;align-items:center;gap:var(--shell-gap-sm);font-size:var(--shell-font-size-sm);color:var(--shell-color);line-height:1.4}.cxw{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-status-size);height:var(--shell-status-size);padding:0;border:1px solid var(--shell-border);border-radius:50%;background:transparent;color:var(--shell-color-muted);font-size:9px;line-height:1;cursor:help}.cxc{display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--shell-font-size-sm);color:var(--shell-color);font-weight:500}.cxk{display:inline-flex;align-items:center;justify-content:center;width:var(--shell-check-size);height:var(--shell-check-size);color:var(--avatar-color);background:var(--shell-color-success);border-radius:50%}.cxv{width:60%;height:60%;display:block}.cxa{color:var(--shell-color-muted)}.cxu{display:flex;flex-direction:column;gap:var(--shell-gap-sm);padding:var(--shell-padding);box-sizing:border-box}.cxq{min-width:var(--pricing-table-label-width)}}
|
package/dist/PricingTable.js
CHANGED
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import e from "react";
|
|
2
|
+
import { C as w } from "./CheckIcon-FdB8fMEF.js";
|
|
3
|
+
import { c as r } from "./cx-CcykAxZN.js";
|
|
4
|
+
import { u as C } from "./useControllableValue-CWqH1kpM.js";
|
|
5
|
+
import './RadioGroup.css';const z = "cqr", R = "cqi", D = "cqs", F = "cqp", I = "cqh", V = "cqn", A = "cqm", B = "cqf", G = "cqc", L = "cqt", M = "cqe", P = "cqd", T = "cqx", $ = "cqy", j = "cqz", H = "cqk", J = "cqo", K = "cqq", O = "cqw", l = {
|
|
6
|
+
r: z,
|
|
7
|
+
i: R,
|
|
8
|
+
s: D,
|
|
9
|
+
p: F,
|
|
10
|
+
h: I,
|
|
11
|
+
n: V,
|
|
12
|
+
m: A,
|
|
13
|
+
f: B,
|
|
14
|
+
c: G,
|
|
15
|
+
t: L,
|
|
16
|
+
e: M,
|
|
17
|
+
d: P,
|
|
18
|
+
x: T,
|
|
19
|
+
y: $,
|
|
20
|
+
z: j,
|
|
21
|
+
k: H,
|
|
22
|
+
o: J,
|
|
23
|
+
q: K,
|
|
24
|
+
w: O
|
|
25
|
+
};
|
|
26
|
+
function E({
|
|
27
|
+
kind: a,
|
|
28
|
+
selected: c
|
|
29
|
+
}) {
|
|
30
|
+
const t = a === "radio";
|
|
31
|
+
return /* @__PURE__ */ e.createElement(
|
|
32
|
+
"span",
|
|
33
|
+
{
|
|
34
|
+
className: r(l.k, t ? l.o : l.q),
|
|
35
|
+
"data-on": c ? "true" : void 0,
|
|
36
|
+
"aria-hidden": !0
|
|
37
|
+
},
|
|
38
|
+
!t && c ? /* @__PURE__ */ e.createElement(w, { className: l.w }) : null
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
function d({
|
|
42
|
+
title: a,
|
|
43
|
+
meta: c,
|
|
44
|
+
price: t,
|
|
45
|
+
badge: s
|
|
46
|
+
}) {
|
|
47
|
+
return a == null && c == null && t == null && s == null ? null : /* @__PURE__ */ e.createElement("div", { className: l.t }, t != null ? /* @__PURE__ */ e.createElement("span", { className: l.z }, t) : null, a ?? null, c != null ? /* @__PURE__ */ e.createElement("span", { className: l.e }, c) : null, s ?? null);
|
|
48
|
+
}
|
|
49
|
+
function q({ children: a }) {
|
|
50
|
+
return /* @__PURE__ */ e.createElement(
|
|
51
|
+
"div",
|
|
52
|
+
{
|
|
53
|
+
className: l.x,
|
|
54
|
+
onClick: (c) => c.stopPropagation(),
|
|
55
|
+
onMouseDown: (c) => c.preventDefault()
|
|
56
|
+
},
|
|
57
|
+
a
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
function X({
|
|
61
|
+
items: a,
|
|
62
|
+
value: c,
|
|
63
|
+
defaultValue: t,
|
|
64
|
+
name: s,
|
|
65
|
+
disabled: i = !1,
|
|
66
|
+
indicator: m = "check",
|
|
67
|
+
indicatorSide: v = "end",
|
|
68
|
+
onValueChange: f,
|
|
69
|
+
className: N,
|
|
70
|
+
...k
|
|
71
|
+
}) {
|
|
72
|
+
const h = e.useId(), b = s ?? h, [g, x] = C(
|
|
73
|
+
c,
|
|
74
|
+
t,
|
|
75
|
+
f
|
|
76
|
+
);
|
|
77
|
+
return /* @__PURE__ */ e.createElement(
|
|
78
|
+
"div",
|
|
79
|
+
{
|
|
80
|
+
className: r(l.r, N),
|
|
81
|
+
role: "radiogroup",
|
|
82
|
+
"aria-disabled": i || void 0,
|
|
83
|
+
...k
|
|
84
|
+
},
|
|
85
|
+
a.map((n) => {
|
|
86
|
+
const o = g === n.value, y = i || !!n.disabled, u = n.variant === "split", p = n.iconFramed !== !1;
|
|
87
|
+
return /* @__PURE__ */ e.createElement(
|
|
88
|
+
"label",
|
|
89
|
+
{
|
|
90
|
+
key: n.value,
|
|
91
|
+
className: r(l.i, o && l.s, u && l.p),
|
|
92
|
+
"data-selected": o ? "true" : void 0,
|
|
93
|
+
"data-indicator": u ? void 0 : v
|
|
94
|
+
},
|
|
95
|
+
/* @__PURE__ */ e.createElement(
|
|
96
|
+
"input",
|
|
97
|
+
{
|
|
98
|
+
className: l.n,
|
|
99
|
+
type: "radio",
|
|
100
|
+
name: b,
|
|
101
|
+
value: n.value,
|
|
102
|
+
checked: o,
|
|
103
|
+
disabled: y,
|
|
104
|
+
onChange: () => x(n.value)
|
|
105
|
+
}
|
|
106
|
+
),
|
|
107
|
+
u ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: l.h }, n.icon != null ? /* @__PURE__ */ e.createElement("div", { className: r(l.m, p && l.f) }, n.icon) : null, /* @__PURE__ */ e.createElement(d, { title: n.title }), /* @__PURE__ */ e.createElement(E, { kind: m, selected: o })), /* @__PURE__ */ e.createElement("div", { className: l.y }, /* @__PURE__ */ e.createElement(
|
|
108
|
+
d,
|
|
109
|
+
{
|
|
110
|
+
price: n.price,
|
|
111
|
+
meta: n.meta,
|
|
112
|
+
badge: n.badge
|
|
113
|
+
}
|
|
114
|
+
), n.description != null ? /* @__PURE__ */ e.createElement("p", { className: l.d }, n.description) : null, n.actions != null ? /* @__PURE__ */ e.createElement(q, null, n.actions) : null)) : /* @__PURE__ */ e.createElement(e.Fragment, null, n.icon != null ? /* @__PURE__ */ e.createElement("div", { className: r(l.m, p && l.f) }, n.icon) : null, /* @__PURE__ */ e.createElement("div", { className: l.c }, /* @__PURE__ */ e.createElement(
|
|
115
|
+
d,
|
|
116
|
+
{
|
|
117
|
+
title: n.title,
|
|
118
|
+
meta: n.meta,
|
|
119
|
+
price: n.price,
|
|
120
|
+
badge: n.badge
|
|
121
|
+
}
|
|
122
|
+
), n.description != null ? /* @__PURE__ */ e.createElement("p", { className: l.d }, n.description) : null, n.actions != null ? /* @__PURE__ */ e.createElement(q, null, n.actions) : null), /* @__PURE__ */ e.createElement(E, { kind: m, selected: o }))
|
|
123
|
+
);
|
|
124
|
+
})
|
|
125
|
+
);
|
|
126
|
+
}
|
|
127
|
+
export {
|
|
128
|
+
X as R
|
|
129
|
+
};
|
package/dist/RadioGroup.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer elcrm-components{.cqr{display:flex;flex-direction:column;gap:var(--shell-gap)}.cqi{display:flex;align-items:flex-start;gap:var(--shell-gap);width:100%;margin:0;padding:var(--shell-padding);box-sizing:border-box;text-align:left;font:inherit;color:var(--shell-color);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.cqi:hover:not(:disabled){background:var(--shell-background-hover)}.cqi:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cqs,.cqi[data-selected=true]{border-color:var(--shell-color-accent);background:var(--shell-background-selected)}.cqp{flex-direction:column;align-items:stretch;padding:0;gap:0}.cqp.cqs .cqh,.cqp[data-selected=true] .cqh{border-bottom-color:var(--shell-color-accent)}.cqn{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cqm{display:flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden}.cqf{width:var(--shell-icon-size);height:var(--shell-icon-size);padding:var(--shell-gap-sm);box-sizing:content-box;color:var(--shell-color-muted);background:var(--shell-background-muted);border:1px solid var(--shell-border);border-radius:var(--shell-radius)}.cqc{display:flex;flex:1;flex-direction:column;gap:var(--shell-gap-sm);min-width:0}.cqt{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--shell-gap-sm);font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3}.cqe{font-size:var(--shell-font-size-sm);font-weight:400;color:var(--shell-color-muted)}.cqd{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.45}.cqx{display:flex;flex-wrap:wrap;gap:var(--shell-gap-sm);margin-top:var(--shell-gap-sm)}.cqh{display:flex;align-items:center;gap:var(--shell-gap);padding:var(--shell-padding);border-bottom:1px solid var(--shell-border)}.cqh .cqt{flex:1;min-width:0}.cqy{display:flex;flex-direction:column;gap:var(--shell-gap-sm);padding:var(--shell-padding)}.cqz{font-size:var(--shell-font-size-lg);font-weight:700;color:var(--shell-color);line-height:1.2}.cqk{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-check-size);height:var(--shell-check-size);margin-left:auto;box-sizing:border-box;border:1px solid var(--shell-border);background:var(--shell-background);color
|
|
1
|
+
@layer elcrm-components{.cqr{display:flex;flex-direction:column;gap:var(--shell-gap)}.cqi{display:flex;align-items:flex-start;gap:var(--shell-gap);width:100%;margin:0;padding:var(--shell-padding);box-sizing:border-box;text-align:left;font:inherit;color:var(--shell-color);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.cqi:hover:not(:disabled){background:var(--shell-background-hover)}.cqi:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cqs,.cqi[data-selected=true]{border-color:var(--shell-color-accent);background:var(--shell-background-selected)}.cqp{flex-direction:column;align-items:stretch;padding:0;gap:0}.cqp.cqs .cqh,.cqp[data-selected=true] .cqh{border-bottom-color:var(--shell-color-accent)}.cqn{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cqm{display:flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden}.cqf{width:var(--shell-icon-size);height:var(--shell-icon-size);padding:var(--shell-gap-sm);box-sizing:content-box;color:var(--shell-color-muted);background:var(--shell-background-muted);border:1px solid var(--shell-border);border-radius:var(--shell-radius)}.cqc{display:flex;flex:1;flex-direction:column;gap:var(--shell-gap-sm);min-width:0}.cqt{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--shell-gap-sm);font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3}.cqe{font-size:var(--shell-font-size-sm);font-weight:400;color:var(--shell-color-muted)}.cqd{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.45}.cqx{display:flex;flex-wrap:wrap;gap:var(--shell-gap-sm);margin-top:var(--shell-gap-sm)}.cqh{display:flex;align-items:center;gap:var(--shell-gap);padding:var(--shell-padding);border-bottom:1px solid var(--shell-border)}.cqh .cqt{flex:1;min-width:0}.cqy{display:flex;flex-direction:column;gap:var(--shell-gap-sm);padding:var(--shell-padding)}.cqz{font-size:var(--shell-font-size-lg);font-weight:700;color:var(--shell-color);line-height:1.2}.cqk{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-check-size);height:var(--shell-check-size);margin-left:auto;box-sizing:border-box;border:1px solid var(--shell-border);background:var(--shell-background);color:var(--avatar-color)}.cqi[data-indicator=start]>.cqk{margin-left:0;order:-1}.cqo{border-radius:50%}.cqo[data-on=true]{border-color:var(--shell-color-accent);background:var(--shell-color-accent);box-shadow:inset 0 0 0 3px var(--shell-background-selected)}.cqq{border-radius:calc(var(--shell-radius) * .4)}.cqq[data-on=true]{border-color:var(--shell-color-accent);background:var(--shell-color-accent)}.cqw{width:60%;height:60%;display:block}}
|
package/dist/RadioGroup.js
CHANGED
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import e from "react";
|
|
2
|
+
import { B as h } from "./Badge-jp-9iNNL.js";
|
|
3
|
+
import { D as w } from "./Dropdown-4yUB2tk1.js";
|
|
4
|
+
import { I as y } from "./Item-D4okhsfW.js";
|
|
5
|
+
import { b as C } from "./badgeText-CRzlIzi3.js";
|
|
6
|
+
import { c as u } from "./cx-CcykAxZN.js";
|
|
7
|
+
import './Sidebar.css';const q = "c2r", B = "c2b", D = "c2x", T = "c2g", z = "c2s", F = "c2p", I = "c2h", M = "c2n", R = "c2i", V = "c2a", $ = "c2o", j = "c2l", A = "c2d", G = "c2f", H = "c2q", J = "c2w", K = "c2u", L = "c2k", O = "c2v", l = {
|
|
8
|
+
r: q,
|
|
9
|
+
b: B,
|
|
10
|
+
x: D,
|
|
11
|
+
g: T,
|
|
12
|
+
s: z,
|
|
13
|
+
p: F,
|
|
14
|
+
h: I,
|
|
15
|
+
n: M,
|
|
16
|
+
i: R,
|
|
17
|
+
a: V,
|
|
18
|
+
o: $,
|
|
19
|
+
l: j,
|
|
20
|
+
d: A,
|
|
21
|
+
f: G,
|
|
22
|
+
q: H,
|
|
23
|
+
w: J,
|
|
24
|
+
u: K,
|
|
25
|
+
k: L,
|
|
26
|
+
v: O
|
|
27
|
+
};
|
|
28
|
+
function P({ className: c }) {
|
|
29
|
+
return /* @__PURE__ */ e.createElement("svg", { className: c, viewBox: "0 0 16 16", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement("circle", { cx: "8", cy: "3", r: "1.3", fill: "currentColor" }), /* @__PURE__ */ e.createElement("circle", { cx: "8", cy: "8", r: "1.3", fill: "currentColor" }), /* @__PURE__ */ e.createElement("circle", { cx: "8", cy: "13", r: "1.3", fill: "currentColor" }));
|
|
30
|
+
}
|
|
31
|
+
function Q({
|
|
32
|
+
footer: c,
|
|
33
|
+
className: E,
|
|
34
|
+
...a
|
|
35
|
+
}) {
|
|
36
|
+
const r = /* @__PURE__ */ e.createElement(P, { className: l.k });
|
|
37
|
+
if (e.isValidElement(c) && typeof c.type != "string") {
|
|
38
|
+
const n = c.props;
|
|
39
|
+
return e.cloneElement(c, {
|
|
40
|
+
as: "button",
|
|
41
|
+
extra: n.extra ?? r,
|
|
42
|
+
className: u(n.className, E),
|
|
43
|
+
...a,
|
|
44
|
+
onClick: (i) => {
|
|
45
|
+
var m, t;
|
|
46
|
+
(m = n.onClick) == null || m.call(n, i), (t = a.onClick) == null || t.call(a, i);
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
return /* @__PURE__ */ e.createElement("button", { type: "button", className: u(l.u, E), ...a }, /* @__PURE__ */ e.createElement("span", { className: l.w }, c), r);
|
|
51
|
+
}
|
|
52
|
+
function S({
|
|
53
|
+
groups: c,
|
|
54
|
+
items: E,
|
|
55
|
+
value: a,
|
|
56
|
+
onSelect: r,
|
|
57
|
+
variant: n = "cards",
|
|
58
|
+
brand: i,
|
|
59
|
+
extra: m,
|
|
60
|
+
footer: t,
|
|
61
|
+
footerItems: d,
|
|
62
|
+
onFooterSelect: v,
|
|
63
|
+
footerMenuLabel: g = "Меню аккаунта",
|
|
64
|
+
version: p,
|
|
65
|
+
className: k,
|
|
66
|
+
"aria-label": x = "Основное меню"
|
|
67
|
+
}) {
|
|
68
|
+
const f = c ?? E ?? [];
|
|
69
|
+
return /* @__PURE__ */ e.createElement(
|
|
70
|
+
"aside",
|
|
71
|
+
{
|
|
72
|
+
className: u(l.r, n === "plain" && l.p, k),
|
|
73
|
+
"aria-label": x
|
|
74
|
+
},
|
|
75
|
+
i != null || m != null ? /* @__PURE__ */ e.createElement("div", { className: l.b }, i, m != null ? /* @__PURE__ */ e.createElement("div", { className: l.x }, m) : null) : null,
|
|
76
|
+
/* @__PURE__ */ e.createElement("div", { className: l.g }, f.map((o) => /* @__PURE__ */ e.createElement("nav", { key: o.value, className: l.s, "aria-label": o.title ?? "Навигация" }, o.title ? /* @__PURE__ */ e.createElement("div", { className: l.h }, o.title) : null, /* @__PURE__ */ e.createElement("ul", { className: l.n }, (o.items ?? []).map((s) => {
|
|
77
|
+
const b = C(s.badge), N = a === s.value;
|
|
78
|
+
return /* @__PURE__ */ e.createElement("li", { key: s.value }, /* @__PURE__ */ e.createElement(
|
|
79
|
+
y,
|
|
80
|
+
{
|
|
81
|
+
as: "button",
|
|
82
|
+
active: N,
|
|
83
|
+
className: u(l.i, N && l.a),
|
|
84
|
+
"aria-current": N ? "page" : void 0,
|
|
85
|
+
onClick: () => r == null ? void 0 : r(s.value)
|
|
86
|
+
},
|
|
87
|
+
s.icon != null ? /* @__PURE__ */ e.createElement("span", { className: l.o, "aria-hidden": !0 }, s.icon) : null,
|
|
88
|
+
/* @__PURE__ */ e.createElement("span", { className: l.l }, s.label),
|
|
89
|
+
b != null ? /* @__PURE__ */ e.createElement(h, { className: l.d, tone: "accent", size: "s" }, b) : null
|
|
90
|
+
));
|
|
91
|
+
}))))),
|
|
92
|
+
t != null || p != null ? /* @__PURE__ */ e.createElement("div", { className: u(l.s, l.f) }, t != null && d != null && d.length > 0 ? /* @__PURE__ */ e.createElement(
|
|
93
|
+
w,
|
|
94
|
+
{
|
|
95
|
+
className: l.q,
|
|
96
|
+
align: "start",
|
|
97
|
+
label: g,
|
|
98
|
+
trigger: /* @__PURE__ */ e.createElement(Q, { footer: t, className: l.w }),
|
|
99
|
+
items: d,
|
|
100
|
+
onSelect: v
|
|
101
|
+
}
|
|
102
|
+
) : t, p != null ? /* @__PURE__ */ e.createElement("div", { className: l.v }, p) : null) : null
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
export {
|
|
106
|
+
S
|
|
107
|
+
};
|
package/dist/Sidebar.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer elcrm-components{.c2r{box-sizing:border-box;display:flex;flex-direction:column;flex:0 0 var(--sidebar-width);width:var(--sidebar-width);min-height:
|
|
1
|
+
@layer elcrm-components{.c2r{box-sizing:border-box;display:flex;flex-direction:column;flex:0 0 var(--sidebar-width);width:var(--sidebar-width);min-height:0;height:100%;max-height:100%;padding:var(--sidebar-pad-y) var(--sidebar-pad-x);gap:var(--shell-gap-sm);color:var(--shell-color);align-self:stretch}.c2b{display:flex;flex-direction:row;align-items:center;gap:var(--shell-gap);padding:4px 8px;min-width:0}.c2x{flex-shrink:0;margin-left:auto}.c2g{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--shell-gap-sm);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}.c2s{box-sizing:border-box;flex-shrink:0;padding:8px}.c2p{--sidebar-plain: 1}.c2r:not(.c2p) .c2s{background:var(--sidebar-block-bg);border:1px solid var(--sidebar-block-border);border-radius:var(--sidebar-block-radius);box-shadow:var(--sidebar-block-shadow)}.c2h{margin:2px 10px 6px;font-size:var(--sidebar-group-font-size);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--shell-color-muted)}.c2n{margin:0;padding:0;list-style:none}.c2n>li{list-style:none}.c2n .c2i:is(button){position:relative;display:flex;width:100%;box-sizing:border-box;flex-direction:row;align-items:center;gap:8px;margin:0 0 1px;padding:var(--sidebar-item-padding);border:0;border-radius:8px;background:transparent;color:var(--shell-color-muted);font-family:inherit;font-size:var(--sidebar-item-font-size);font-weight:500;line-height:1.25;letter-spacing:0;text-align:left;cursor:pointer}.c2n .c2i:is(button):hover{color:var(--shell-color);background:var(--shell-background-hover)}.c2n .c2i:is(button).c2a,.c2n .c2i:is(button)[aria-current=page],.c2n .c2i:is(button)[data-active=true],.c2n .c2i:is(button).c2a:hover{color:var(--sidebar-item-active);background:var(--sidebar-item-active-bg)}.c2o{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size);color:inherit}.c2o :is(svg){display:block;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size)}.c2a .c2o{color:var(--sidebar-icon-active)}.c2l{flex:1;min-width:0}.c2d{flex-shrink:0;min-width:16px;height:16px;padding:0 4px;font-size:10px}.c2f{margin-top:auto}.c2q{display:flex;width:100%;min-width:0}.c2q>*{display:flex;width:100%;min-width:0}.c2w{display:flex;width:100%;min-width:0;align-items:center}.c2u{display:flex;align-items:center;width:100%;min-width:0;gap:var(--shell-gap-sm);margin:0;padding:0;border:none;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:left}.c2k{flex-shrink:0;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size);color:var(--shell-color-muted)}.c2v{margin-top:var(--shell-gap-sm);font-size:11px;color:var(--shell-color-muted);text-align:center}@media (max-width: 900px){.c2r{flex:0 0 72px;width:72px;padding:12px 8px}.c2l,.c2h,.c2v{display:none}.c2b{flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:4px 0}.c2x{margin-left:0}.c2s{padding:6px}.c2n .c2i{justify-content:center;align-items:center;gap:0;width:100%;min-height:40px;padding:10px 0}.c2n .c2d{position:absolute;top:4px;right:4px;min-width:14px;height:14px;padding:0 4px;font-size:.625rem;line-height:14px;pointer-events:none}}}
|
package/dist/Sidebar.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { DropdownItem } from './Dropdown';
|
|
2
3
|
/** Вид колонки: карточки (консоль) или плоский список (backoffice) */
|
|
3
4
|
export type SidebarVariant = "cards" | "plain";
|
|
4
5
|
/** Пункт бокового меню. Идентификатор — `value`. */
|
|
@@ -42,6 +43,12 @@ export type SidebarGroup = {
|
|
|
42
43
|
* { value: "admin", title: "Админ", items: [{ value: "users", label: "Люди" }] },
|
|
43
44
|
* ]}
|
|
44
45
|
* footer={<AvatarName title="Паша" description="mail@…" />}
|
|
46
|
+
* footerItems={[
|
|
47
|
+
* { value: "home", label: "Главная", icon: <Icon /> },
|
|
48
|
+
* { value: "theme", label: "Тема", submenu: true },
|
|
49
|
+
* { value: "logout", label: "Выйти", danger: true },
|
|
50
|
+
* ]}
|
|
51
|
+
* onFooterSelect={(value) => console.log(value)}
|
|
45
52
|
* version="v 0.2.26"
|
|
46
53
|
* />
|
|
47
54
|
* ```
|
|
@@ -69,6 +76,15 @@ export type SidebarProps = {
|
|
|
69
76
|
extra?: React.ReactNode;
|
|
70
77
|
/** Низ: тема, выход или карточка пользователя */
|
|
71
78
|
footer?: React.ReactNode;
|
|
79
|
+
/**
|
|
80
|
+
* Меню по клику на `footer` (Dropdown).
|
|
81
|
+
* Есть пункты → футер становится триггером, справа ⋮.
|
|
82
|
+
*/
|
|
83
|
+
footerItems?: DropdownItem[];
|
|
84
|
+
/** Выбор пункта меню аккаунта */
|
|
85
|
+
onFooterSelect?: (value: string, item: DropdownItem) => void;
|
|
86
|
+
/** `aria-label` панели меню аккаунта */
|
|
87
|
+
footerMenuLabel?: string;
|
|
72
88
|
/** Версия под футером */
|
|
73
89
|
version?: React.ReactNode;
|
|
74
90
|
/** Подпись колонки */
|
|
@@ -80,4 +96,4 @@ export type SidebarProps = {
|
|
|
80
96
|
*
|
|
81
97
|
* @see Layout, Brand, Item, Badge, NavSections
|
|
82
98
|
*/
|
|
83
|
-
export declare function Sidebar({ groups, items, value, onSelect, variant, brand, extra, footer, version, className, "aria-label": ariaLabel, }: SidebarProps): React.JSX.Element;
|
|
99
|
+
export declare function Sidebar({ groups, items, value, onSelect, variant, brand, extra, footer, footerItems, onFooterSelect, footerMenuLabel, version, className, "aria-label": ariaLabel, }: SidebarProps): React.JSX.Element;
|
package/dist/Sidebar.js
CHANGED
package/dist/Stat.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer elcrm-components{.c4r{display:flex;flex-direction:column;gap:6px}.c4l{font-size:var(--shell-font-size-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--shell-color-muted);line-height:1.2}.c4le{color:var(--shell-color)}.c4v{font-size:var(--stat-value-size
|
|
1
|
+
@layer elcrm-components{.c4r{display:flex;flex-direction:column;gap:6px}.c4l{font-size:var(--shell-font-size-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--shell-color-muted);line-height:1.2}.c4le{color:var(--shell-color)}.c4v{font-size:var(--stat-value-size);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--shell-color)}.c4a .c4v{color:var(--shell-color-accent)}.c4u .c4v{color:var(--shell-color-success)}.c4w .c4v{color:var(--shell-color-warning)}.c4d .c4v{color:var(--shell-color-danger)}}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import a, { useMemo as g, Suspense as k } from "react";
|
|
2
|
+
import { c as b } from "./cx-CcykAxZN.js";
|
|
3
|
+
import { h as y } from "./rovingKeys-CGlfTtNQ.js";
|
|
4
|
+
import { u as x } from "./useControllableValue-CWqH1kpM.js";
|
|
5
|
+
import './TabSections.css';const S = "ctr", h = "ctb", C = "ctn", K = "ctt", R = "cta", T = "cte", w = "cts", D = "ctm", l = {
|
|
6
|
+
r: S,
|
|
7
|
+
b: h,
|
|
8
|
+
n: C,
|
|
9
|
+
t: K,
|
|
10
|
+
a: R,
|
|
11
|
+
e: T,
|
|
12
|
+
s: w,
|
|
13
|
+
m: D
|
|
14
|
+
};
|
|
15
|
+
function j({
|
|
16
|
+
items: n = [],
|
|
17
|
+
resolveSection: m,
|
|
18
|
+
value: d,
|
|
19
|
+
defaultValue: s,
|
|
20
|
+
onValueChange: v,
|
|
21
|
+
loading: i = null,
|
|
22
|
+
actions: r,
|
|
23
|
+
className: p,
|
|
24
|
+
navLabel: E = "Вкладки"
|
|
25
|
+
}) {
|
|
26
|
+
const f = g(() => {
|
|
27
|
+
var e;
|
|
28
|
+
return s || (((e = n.find((t) => !t.disabled)) == null ? void 0 : e.value) ?? "");
|
|
29
|
+
}, [s, n]), [c, o] = x(
|
|
30
|
+
d,
|
|
31
|
+
f,
|
|
32
|
+
v
|
|
33
|
+
), N = n.filter((e) => !e.disabled).map((e) => e.value), u = c ? m(c) : null;
|
|
34
|
+
return /* @__PURE__ */ a.createElement("div", { className: b(l.r, p) }, /* @__PURE__ */ a.createElement("div", { className: l.b }, /* @__PURE__ */ a.createElement(
|
|
35
|
+
"nav",
|
|
36
|
+
{
|
|
37
|
+
className: l.n,
|
|
38
|
+
"aria-label": E,
|
|
39
|
+
role: "tablist",
|
|
40
|
+
onKeyDown: (e) => y(e, {
|
|
41
|
+
values: N,
|
|
42
|
+
value: c,
|
|
43
|
+
onSelect: o
|
|
44
|
+
})
|
|
45
|
+
},
|
|
46
|
+
n.map((e) => {
|
|
47
|
+
const t = e.value === c;
|
|
48
|
+
return /* @__PURE__ */ a.createElement(
|
|
49
|
+
"button",
|
|
50
|
+
{
|
|
51
|
+
key: e.value,
|
|
52
|
+
type: "button",
|
|
53
|
+
role: "tab",
|
|
54
|
+
className: b(l.t, t && l.a),
|
|
55
|
+
"data-active": t ? "true" : void 0,
|
|
56
|
+
"aria-selected": t,
|
|
57
|
+
tabIndex: t ? 0 : -1,
|
|
58
|
+
disabled: e.disabled,
|
|
59
|
+
onClick: () => o(e.value)
|
|
60
|
+
},
|
|
61
|
+
/* @__PURE__ */ a.createElement("span", null, e.label),
|
|
62
|
+
e.badge != null && e.badge !== "" ? /* @__PURE__ */ a.createElement("em", { className: l.e }, e.badge) : null
|
|
63
|
+
);
|
|
64
|
+
})
|
|
65
|
+
), r != null ? /* @__PURE__ */ a.createElement("div", { className: l.s }, r) : null), /* @__PURE__ */ a.createElement("div", { className: l.m, role: "tabpanel" }, u ? /* @__PURE__ */ a.createElement(k, { fallback: i }, a.createElement(u)) : null));
|
|
66
|
+
}
|
|
67
|
+
export {
|
|
68
|
+
j as T
|
|
69
|
+
};
|
package/dist/TabSections.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer elcrm-components{.ctr{display:flex;flex-direction:column;gap:var(--shell-gap);width:100%;min-width:0}.ctb{display:flex;align-items:flex-end;gap:var(--shell-gap);border-bottom:1px solid var(--shell-border);min-width:0}.ctn{display:flex;align-items:stretch;gap:var(--shell-gap-lg);flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin}.ctt{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:var(--shell-gap-sm);flex:0 0 auto;margin:0 0 -1px;padding:var(--shell-padding-block) .15rem;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--shell-color-muted);font:inherit;font-size:var(--shell-font-size);font-weight:500;white-space:nowrap;cursor:pointer}.ctt:hover:not(:disabled){color:var(--shell-color)}.cta{color:var(--shell-color);border-bottom-color:var(--shell-color-accent)}.ctt:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cte{display:inline-flex;align-items:center;justify-content:center;min-width:1.15em;height:1.15em;padding:0 .35em;border-radius:999px;background:var(--shell-color-danger);color
|
|
1
|
+
@layer elcrm-components{.ctr{display:flex;flex-direction:column;gap:var(--shell-gap);width:100%;min-width:0}.ctb{display:flex;align-items:flex-end;gap:var(--shell-gap);border-bottom:1px solid var(--shell-border);min-width:0}.ctn{display:flex;align-items:stretch;gap:var(--shell-gap-lg);flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin}.ctt{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:var(--shell-gap-sm);flex:0 0 auto;margin:0 0 -1px;padding:var(--shell-padding-block) .15rem;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--shell-color-muted);font:inherit;font-size:var(--shell-font-size);font-weight:500;white-space:nowrap;cursor:pointer}.ctt:hover:not(:disabled){color:var(--shell-color)}.cta{color:var(--shell-color);border-bottom-color:var(--shell-color-accent)}.ctt:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cte{display:inline-flex;align-items:center;justify-content:center;min-width:1.15em;height:1.15em;padding:0 .35em;border-radius:999px;background:var(--shell-color-danger);color:var(--avatar-color);font-size:var(--sidebar-group-font-size);font-style:normal;font-weight:700;line-height:1}.cts{flex:0 0 auto;display:flex;align-items:center;padding-bottom:var(--shell-gap-sm)}.ctm{min-width:0;width:100%}}
|