@ledgerhq/lumen-ui-react 0.1.38 → 0.1.39
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/lib/Components/AmountDisplay/AmountDisplay.d.ts.map +1 -1
- package/dist/lib/Components/AmountDisplay/AmountDisplay.js +47 -44
- package/dist/lib/Components/AmountInput/AmountInput.d.ts.map +1 -1
- package/dist/lib/Components/AmountInput/AmountInput.js +72 -62
- package/dist/lib/Components/Avatar/Avatar.d.ts +1 -1
- package/dist/lib/Components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/lib/Components/Avatar/Avatar.js +32 -26
- package/dist/lib/Components/Avatar/types.d.ts +7 -1
- package/dist/lib/Components/Avatar/types.d.ts.map +1 -1
- package/dist/lib/Components/Button/BaseButton.d.ts +1 -1
- package/dist/package.json +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AmountDisplay.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/AmountDisplay/AmountDisplay.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,kBAAkB,EAMnB,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"AmountDisplay.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/AmountDisplay/AmountDisplay.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,kBAAkB,EAMnB,MAAM,SAAS,CAAC;AAqHjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,SAAS,EACT,MAAc,EACd,OAAe,EACf,OAAc,EACd,IAAW,EACX,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,2CA6DpB"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import { useSplitText as y, buildAriaLabel as w, cn as
|
|
1
|
+
import { jsx as e, jsxs as o } from "react/jsx-runtime";
|
|
2
|
+
import { useSplitText as y, buildAriaLabel as w, cn as m } from "../../../libs/utils-shared/dist/index.js";
|
|
3
3
|
import { memo as u } from "react";
|
|
4
|
-
import { DIGITS as
|
|
5
|
-
import { useCommonTranslation as
|
|
6
|
-
const
|
|
4
|
+
import { DIGITS as v } from "./types.js";
|
|
5
|
+
import { useCommonTranslation as D } from "../../../i18n/useCommonTranslation.js";
|
|
6
|
+
const d = {
|
|
7
7
|
"heading-1-semi-bold": {
|
|
8
8
|
0: 25,
|
|
9
9
|
1: 15.5,
|
|
@@ -40,47 +40,50 @@ const m = {
|
|
|
40
40
|
8: 12.5,
|
|
41
41
|
9: 12.5
|
|
42
42
|
}
|
|
43
|
-
},
|
|
43
|
+
}, S = {
|
|
44
44
|
md: {
|
|
45
45
|
integer: {
|
|
46
46
|
className: "heading-1-semi-bold",
|
|
47
|
-
widths:
|
|
47
|
+
widths: d["heading-1-semi-bold"]
|
|
48
48
|
},
|
|
49
49
|
decimal: {
|
|
50
50
|
className: "heading-2-semi-bold",
|
|
51
|
-
widths:
|
|
51
|
+
widths: d["heading-2-semi-bold"]
|
|
52
52
|
}
|
|
53
53
|
},
|
|
54
54
|
sm: {
|
|
55
55
|
integer: {
|
|
56
56
|
className: "heading-2-semi-bold",
|
|
57
|
-
widths:
|
|
57
|
+
widths: d["heading-2-semi-bold"]
|
|
58
58
|
},
|
|
59
59
|
decimal: {
|
|
60
60
|
className: "heading-4-semi-bold",
|
|
61
|
-
widths:
|
|
61
|
+
widths: d["heading-4-semi-bold"]
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
|
-
}, b = u(({ value:
|
|
65
|
-
const t = s
|
|
66
|
-
return /* @__PURE__ */
|
|
64
|
+
}, b = u(({ value: s, animate: l, widths: a }) => {
|
|
65
|
+
const t = a[s];
|
|
66
|
+
return /* @__PURE__ */ o(
|
|
67
67
|
"div",
|
|
68
68
|
{
|
|
69
|
-
className:
|
|
69
|
+
className: m(
|
|
70
|
+
"relative overflow-x-visible overflow-y-clip mask-fade-y mask-no-clip [-webkit-mask-clip:no-clip]",
|
|
71
|
+
l && "transition-[width] duration-600"
|
|
72
|
+
),
|
|
70
73
|
style: { width: t + "px" },
|
|
71
74
|
children: [
|
|
72
75
|
/* @__PURE__ */ e("span", { className: "invisible", children: "0" }),
|
|
73
76
|
/* @__PURE__ */ e(
|
|
74
77
|
"span",
|
|
75
78
|
{
|
|
76
|
-
className:
|
|
79
|
+
className: m(
|
|
77
80
|
"absolute inset-x-0 top-0 flex flex-col items-center justify-center",
|
|
78
81
|
l && "transition-transform duration-600 ease-in-out"
|
|
79
82
|
),
|
|
80
83
|
style: {
|
|
81
|
-
transform: `translateY(-${
|
|
84
|
+
transform: `translateY(-${s * 10}%)`
|
|
82
85
|
},
|
|
83
|
-
children:
|
|
86
|
+
children: v.map((n, r) => /* @__PURE__ */ e("span", { inert: n !== s, children: n }, r))
|
|
84
87
|
}
|
|
85
88
|
)
|
|
86
89
|
]
|
|
@@ -88,40 +91,40 @@ const m = {
|
|
|
88
91
|
);
|
|
89
92
|
});
|
|
90
93
|
b.displayName = "DigitStrip";
|
|
91
|
-
const
|
|
92
|
-
({ items:
|
|
93
|
-
const r =
|
|
94
|
+
const p = u(
|
|
95
|
+
({ items: s, widths: l, animate: a }) => s.map((t, n) => {
|
|
96
|
+
const r = s.length - n;
|
|
94
97
|
return t.type === "separator" ? /* @__PURE__ */ e("span", { children: t.value }, r) : /* @__PURE__ */ e(
|
|
95
98
|
b,
|
|
96
99
|
{
|
|
97
100
|
value: Number(t.value),
|
|
98
|
-
animate:
|
|
101
|
+
animate: a,
|
|
99
102
|
widths: l
|
|
100
103
|
},
|
|
101
104
|
r
|
|
102
105
|
);
|
|
103
106
|
})
|
|
104
107
|
);
|
|
105
|
-
|
|
106
|
-
function
|
|
107
|
-
value:
|
|
108
|
+
p.displayName = "DigitStripList";
|
|
109
|
+
function A({
|
|
110
|
+
value: s,
|
|
108
111
|
formatter: l,
|
|
109
|
-
hidden:
|
|
112
|
+
hidden: a = !1,
|
|
110
113
|
loading: t = !1,
|
|
111
114
|
animate: n = !0,
|
|
112
115
|
size: r = "md",
|
|
113
116
|
className: f,
|
|
114
117
|
...g
|
|
115
118
|
}) {
|
|
116
|
-
const i = l(
|
|
119
|
+
const i = l(s), h = y(i), { t: N } = D(), x = w(
|
|
117
120
|
i,
|
|
118
|
-
|
|
121
|
+
a,
|
|
119
122
|
N("components.amountDisplay.amountHiddenAriaLabel")
|
|
120
|
-
),
|
|
123
|
+
), c = S[r];
|
|
121
124
|
return /* @__PURE__ */ e(
|
|
122
125
|
"div",
|
|
123
126
|
{
|
|
124
|
-
className:
|
|
127
|
+
className: m(
|
|
125
128
|
t && "animate-pulse",
|
|
126
129
|
"relative inline-flex",
|
|
127
130
|
f
|
|
@@ -129,38 +132,38 @@ function j({
|
|
|
129
132
|
"aria-label": x,
|
|
130
133
|
"aria-busy": t,
|
|
131
134
|
...g,
|
|
132
|
-
children: /* @__PURE__ */
|
|
133
|
-
/* @__PURE__ */
|
|
135
|
+
children: /* @__PURE__ */ o("div", { className: "flex items-baseline", children: [
|
|
136
|
+
/* @__PURE__ */ o(
|
|
134
137
|
"span",
|
|
135
138
|
{
|
|
136
|
-
className:
|
|
139
|
+
className: m("inline-flex text-base", c.integer.className),
|
|
137
140
|
"aria-hidden": "true",
|
|
138
141
|
children: [
|
|
139
142
|
i.currencyPosition === "start" && /* @__PURE__ */ e("span", { className: "me-4", children: i.currencyText }),
|
|
140
|
-
|
|
141
|
-
|
|
143
|
+
a ? /* @__PURE__ */ e("span", { children: "••••" }) : /* @__PURE__ */ e(
|
|
144
|
+
p,
|
|
142
145
|
{
|
|
143
|
-
items:
|
|
146
|
+
items: h.integerPart,
|
|
144
147
|
animate: n,
|
|
145
|
-
widths:
|
|
148
|
+
widths: c.integer.widths
|
|
146
149
|
}
|
|
147
150
|
)
|
|
148
151
|
]
|
|
149
152
|
}
|
|
150
153
|
),
|
|
151
|
-
/* @__PURE__ */
|
|
154
|
+
/* @__PURE__ */ o(
|
|
152
155
|
"span",
|
|
153
156
|
{
|
|
154
|
-
className:
|
|
157
|
+
className: m("inline-flex text-muted", c.decimal.className),
|
|
155
158
|
"aria-hidden": "true",
|
|
156
159
|
children: [
|
|
157
|
-
!
|
|
158
|
-
i.decimalPart && !
|
|
159
|
-
|
|
160
|
+
!a && i.decimalPart && /* @__PURE__ */ e("span", { children: i.decimalSeparator }),
|
|
161
|
+
i.decimalPart && !a && /* @__PURE__ */ e(
|
|
162
|
+
p,
|
|
160
163
|
{
|
|
161
|
-
items:
|
|
164
|
+
items: h.decimalPart,
|
|
162
165
|
animate: n,
|
|
163
|
-
widths:
|
|
166
|
+
widths: c.decimal.widths
|
|
164
167
|
}
|
|
165
168
|
),
|
|
166
169
|
i.currencyPosition === "end" && /* @__PURE__ */ e("span", { className: "ms-4", children: i.currencyText })
|
|
@@ -172,5 +175,5 @@ function j({
|
|
|
172
175
|
);
|
|
173
176
|
}
|
|
174
177
|
export {
|
|
175
|
-
|
|
178
|
+
A as AmountDisplay
|
|
176
179
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/AmountInput/AmountInput.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,gBAAgB,EAAmB,MAAM,SAAS,CAAC;AAyGjE;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,2LAezB,gBAAgB,
|
|
1
|
+
{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/AmountInput/AmountInput.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,gBAAgB,EAAmB,MAAM,SAAS,CAAC;AAyGjE;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,2LAezB,gBAAgB,4CAgIlB,CAAC"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useDisabledContext as
|
|
1
|
+
import { jsxs as G, jsx as u } from "react/jsx-runtime";
|
|
2
|
+
import { useDisabledContext as H, useMergedRef as Y, textFormatter as w, getFontSize as F, cn as I } from "../../../libs/utils-shared/dist/index.js";
|
|
3
3
|
import { cva as c } from "class-variance-authority";
|
|
4
|
-
import { useRef as
|
|
5
|
-
const
|
|
6
|
-
md:
|
|
7
|
-
sm:
|
|
8
|
-
},
|
|
9
|
-
const i =
|
|
10
|
-
return
|
|
11
|
-
},
|
|
4
|
+
import { useRef as v, useCallback as P, useState as y, useMemo as O, useLayoutEffect as z, useEffect as E } from "react";
|
|
5
|
+
const q = 33, B = 8, J = 24, Q = 16, Z = {
|
|
6
|
+
md: J,
|
|
7
|
+
sm: Q
|
|
8
|
+
}, $ = (p, m, e) => {
|
|
9
|
+
const i = p === "" ? q : B;
|
|
10
|
+
return m ? i : i + Z[e];
|
|
11
|
+
}, K = c(
|
|
12
12
|
[
|
|
13
13
|
"bg-transparent caret-active outline-hidden transition-colors",
|
|
14
14
|
"text-base placeholder:text-muted-subtle",
|
|
@@ -32,7 +32,7 @@ const L = 33, z = 8, q = 24, B = 16, J = {
|
|
|
32
32
|
isChanging: !1
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
|
-
),
|
|
35
|
+
), S = c(
|
|
36
36
|
[
|
|
37
37
|
"cursor-text text-base",
|
|
38
38
|
"group-has-[input:placeholder-shown]:text-muted-subtle",
|
|
@@ -50,7 +50,7 @@ const L = 33, z = 8, q = 24, B = 16, J = {
|
|
|
50
50
|
size: "md"
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
|
-
),
|
|
53
|
+
), X = c("invisible absolute whitespace-pre", {
|
|
54
54
|
variants: {
|
|
55
55
|
size: {
|
|
56
56
|
md: "heading-0-semi-bold",
|
|
@@ -60,7 +60,7 @@ const L = 33, z = 8, q = 24, B = 16, J = {
|
|
|
60
60
|
defaultVariants: {
|
|
61
61
|
size: "md"
|
|
62
62
|
}
|
|
63
|
-
}),
|
|
63
|
+
}), L = c(
|
|
64
64
|
"group relative flex w-full items-center overflow-visible transition-transform",
|
|
65
65
|
{
|
|
66
66
|
variants: {
|
|
@@ -74,57 +74,67 @@ const L = 33, z = 8, q = 24, B = 16, J = {
|
|
|
74
74
|
align: "center"
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
|
-
),
|
|
78
|
-
ref:
|
|
79
|
-
className:
|
|
77
|
+
), at = ({
|
|
78
|
+
ref: p,
|
|
79
|
+
className: m,
|
|
80
80
|
size: e = "md",
|
|
81
81
|
align: i = "center",
|
|
82
82
|
currencyText: a,
|
|
83
|
-
currencyPosition:
|
|
84
|
-
disabled:
|
|
85
|
-
maxIntegerLength:
|
|
86
|
-
maxDecimalLength:
|
|
87
|
-
allowDecimals:
|
|
88
|
-
thousandsSeparator:
|
|
89
|
-
value:
|
|
90
|
-
onChange:
|
|
91
|
-
...
|
|
83
|
+
currencyPosition: D = "left",
|
|
84
|
+
disabled: W,
|
|
85
|
+
maxIntegerLength: f = 9,
|
|
86
|
+
maxDecimalLength: b = 9,
|
|
87
|
+
allowDecimals: h = !0,
|
|
88
|
+
thousandsSeparator: g = !0,
|
|
89
|
+
value: N,
|
|
90
|
+
onChange: A,
|
|
91
|
+
...M
|
|
92
92
|
}) => {
|
|
93
|
-
const
|
|
93
|
+
const V = H({
|
|
94
94
|
consumerName: "AmountInput",
|
|
95
|
-
mergeWith: { disabled:
|
|
96
|
-
}), r =
|
|
97
|
-
() =>
|
|
95
|
+
mergeWith: { disabled: W }
|
|
96
|
+
}), r = v(null), o = v(null), U = Y(p, o), _ = P(
|
|
97
|
+
(t) => w(t.toString(), {
|
|
98
|
+
allowDecimals: h,
|
|
99
|
+
thousandsSeparator: g,
|
|
100
|
+
maxIntegerLength: f,
|
|
101
|
+
maxDecimalLength: b
|
|
102
|
+
}),
|
|
103
|
+
[h, g, f, b]
|
|
104
|
+
), [s, C] = y(
|
|
105
|
+
() => _(N)
|
|
106
|
+
), [T, x] = y(!1), R = v(s), j = O(
|
|
107
|
+
() => F(s, e) + "px",
|
|
98
108
|
[s, e]
|
|
99
|
-
),
|
|
109
|
+
), d = P(() => {
|
|
100
110
|
if (r.current && o.current) {
|
|
101
111
|
const t = Math.ceil(
|
|
102
112
|
Math.max(r.current.scrollWidth, r.current.offsetWidth)
|
|
103
|
-
), n =
|
|
113
|
+
), n = $(s, a, e);
|
|
104
114
|
o.current.style.width = `${t + n}px`;
|
|
105
115
|
}
|
|
106
116
|
}, [s, a, e]);
|
|
107
|
-
|
|
117
|
+
z(d, [d]), E(() => {
|
|
108
118
|
const t = r.current;
|
|
109
119
|
if (!t) return;
|
|
110
|
-
const n = new ResizeObserver(
|
|
120
|
+
const n = new ResizeObserver(d);
|
|
111
121
|
return n.observe(t), () => n.disconnect();
|
|
112
|
-
}, [
|
|
113
|
-
|
|
114
|
-
}, [
|
|
115
|
-
const
|
|
116
|
-
const n =
|
|
117
|
-
allowDecimals:
|
|
118
|
-
thousandsSeparator:
|
|
119
|
-
maxIntegerLength:
|
|
120
|
-
maxDecimalLength:
|
|
122
|
+
}, [d]), E(() => {
|
|
123
|
+
C(_(N));
|
|
124
|
+
}, [N, _]);
|
|
125
|
+
const k = (t) => {
|
|
126
|
+
const n = w(t.target.value, {
|
|
127
|
+
allowDecimals: h,
|
|
128
|
+
thousandsSeparator: g,
|
|
129
|
+
maxIntegerLength: f,
|
|
130
|
+
maxDecimalLength: b
|
|
121
131
|
});
|
|
122
|
-
|
|
123
|
-
},
|
|
124
|
-
return /* @__PURE__ */
|
|
132
|
+
C(n), A({ ...t, target: { ...t.target, value: n } }), n !== R.current && x(!0), R.current = n;
|
|
133
|
+
}, l = { fontSize: j, letterSpacing: "normal" };
|
|
134
|
+
return /* @__PURE__ */ G(
|
|
125
135
|
"div",
|
|
126
136
|
{
|
|
127
|
-
className:
|
|
137
|
+
className: L({ align: i }),
|
|
128
138
|
onPointerDown: () => {
|
|
129
139
|
const t = o.current;
|
|
130
140
|
t && window.requestAnimationFrame(() => {
|
|
@@ -132,11 +142,11 @@ const L = 33, z = 8, q = 24, B = 16, J = {
|
|
|
132
142
|
});
|
|
133
143
|
},
|
|
134
144
|
children: [
|
|
135
|
-
a &&
|
|
145
|
+
a && D === "left" && /* @__PURE__ */ u(
|
|
136
146
|
"span",
|
|
137
147
|
{
|
|
138
|
-
className:
|
|
139
|
-
style:
|
|
148
|
+
className: I(S({ size: e }), "shrink-0"),
|
|
149
|
+
style: l,
|
|
140
150
|
children: a
|
|
141
151
|
}
|
|
142
152
|
),
|
|
@@ -144,32 +154,32 @@ const L = 33, z = 8, q = 24, B = 16, J = {
|
|
|
144
154
|
"span",
|
|
145
155
|
{
|
|
146
156
|
ref: r,
|
|
147
|
-
className:
|
|
157
|
+
className: X({ size: e }),
|
|
148
158
|
"aria-hidden": "true",
|
|
149
|
-
style:
|
|
159
|
+
style: l,
|
|
150
160
|
children: s
|
|
151
161
|
}
|
|
152
162
|
),
|
|
153
163
|
/* @__PURE__ */ u(
|
|
154
164
|
"input",
|
|
155
165
|
{
|
|
156
|
-
ref:
|
|
166
|
+
ref: U,
|
|
157
167
|
type: "text",
|
|
158
168
|
inputMode: "decimal",
|
|
159
|
-
disabled:
|
|
169
|
+
disabled: V,
|
|
160
170
|
value: s,
|
|
161
|
-
onChange:
|
|
162
|
-
onAnimationEnd: () =>
|
|
163
|
-
className:
|
|
164
|
-
...
|
|
165
|
-
style:
|
|
171
|
+
onChange: k,
|
|
172
|
+
onAnimationEnd: () => x(!1),
|
|
173
|
+
className: I(K({ size: e, isChanging: T }), m),
|
|
174
|
+
...M,
|
|
175
|
+
style: l
|
|
166
176
|
}
|
|
167
177
|
),
|
|
168
|
-
a &&
|
|
178
|
+
a && D === "right" && /* @__PURE__ */ u(
|
|
169
179
|
"span",
|
|
170
180
|
{
|
|
171
|
-
className:
|
|
172
|
-
style:
|
|
181
|
+
className: I(S({ size: e }), "shrink-0"),
|
|
182
|
+
style: l,
|
|
173
183
|
children: a
|
|
174
184
|
}
|
|
175
185
|
)
|
|
@@ -178,5 +188,5 @@ const L = 33, z = 8, q = 24, B = 16, J = {
|
|
|
178
188
|
);
|
|
179
189
|
};
|
|
180
190
|
export {
|
|
181
|
-
|
|
191
|
+
at as AmountInput
|
|
182
192
|
};
|
|
@@ -15,5 +15,5 @@ import { AvatarProps } from './types';
|
|
|
15
15
|
* // With notification indicator
|
|
16
16
|
* <Avatar src="https://example.com/photo.jpg" showNotification />
|
|
17
17
|
*/
|
|
18
|
-
export declare const Avatar: ({ ref, className, src, alt, size, imgLoading, showNotification: showNotificationProp, ...props }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare const Avatar: ({ ref, className, src, alt, appearance, size, imgLoading, showNotification: showNotificationProp, ...props }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
19
|
//# sourceMappingURL=Avatar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA0C3C;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM,GAAI,8GAUpB,WAAW,4CAuDb,CAAC"}
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import { jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import { cva as h } from "class-variance-authority";
|
|
3
|
-
import { useState as
|
|
4
|
-
import { useCommonTranslation as
|
|
5
|
-
import { User as
|
|
6
|
-
import { DotIndicator as
|
|
7
|
-
const
|
|
3
|
+
import { useState as z, useEffect as x } from "react";
|
|
4
|
+
import { useCommonTranslation as A } from "../../../i18n/useCommonTranslation.js";
|
|
5
|
+
import { User as N } from "../../Symbols/Icons/User.js";
|
|
6
|
+
import { DotIndicator as j } from "../DotIndicator/DotIndicator.js";
|
|
7
|
+
const k = {
|
|
8
8
|
root: h(
|
|
9
|
-
"relative inline-flex items-center justify-center rounded-full
|
|
9
|
+
"relative inline-flex items-center justify-center rounded-full transition-colors",
|
|
10
10
|
{
|
|
11
11
|
variants: {
|
|
12
|
+
appearance: {
|
|
13
|
+
gray: "bg-muted",
|
|
14
|
+
transparent: "bg-muted-transparent"
|
|
15
|
+
},
|
|
12
16
|
size: {
|
|
13
17
|
sm: "size-40 p-4",
|
|
14
18
|
md: "size-48 p-4",
|
|
@@ -17,61 +21,63 @@ const j = {
|
|
|
17
21
|
}
|
|
18
22
|
},
|
|
19
23
|
defaultVariants: {
|
|
24
|
+
appearance: "transparent",
|
|
20
25
|
size: "md"
|
|
21
26
|
}
|
|
22
27
|
}
|
|
23
28
|
)
|
|
24
|
-
},
|
|
29
|
+
}, w = {
|
|
25
30
|
sm: 16,
|
|
26
31
|
md: 24,
|
|
27
32
|
lg: 32,
|
|
28
33
|
xl: 40
|
|
29
|
-
},
|
|
34
|
+
}, E = {
|
|
30
35
|
sm: "lg",
|
|
31
36
|
md: "xl"
|
|
32
37
|
}, V = ({
|
|
33
38
|
ref: l,
|
|
34
|
-
className:
|
|
35
|
-
src:
|
|
36
|
-
alt:
|
|
39
|
+
className: c,
|
|
40
|
+
src: r,
|
|
41
|
+
alt: m,
|
|
42
|
+
appearance: d = "transparent",
|
|
37
43
|
size: a = "md",
|
|
38
|
-
imgLoading:
|
|
39
|
-
showNotification:
|
|
44
|
+
imgLoading: f,
|
|
45
|
+
showNotification: p = !1,
|
|
40
46
|
...u
|
|
41
47
|
}) => {
|
|
42
|
-
const { t:
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}, [
|
|
48
|
+
const { t: e } = A(), [v, o] = z(!1), b = !r || v, n = m || e("components.avatar.defaultAlt"), i = p && (a === "sm" || a === "md"), g = i ? `${n}, ${e("components.avatar.notificationAriaLabel")}` : n;
|
|
49
|
+
x(() => {
|
|
50
|
+
o(!1);
|
|
51
|
+
}, [r]);
|
|
46
52
|
const s = /* @__PURE__ */ t(
|
|
47
53
|
"div",
|
|
48
54
|
{
|
|
49
55
|
ref: l,
|
|
50
|
-
className:
|
|
56
|
+
className: k.root({ appearance: d, size: a, className: c }),
|
|
51
57
|
role: "img",
|
|
52
|
-
"aria-label":
|
|
58
|
+
"aria-label": g,
|
|
53
59
|
...u,
|
|
54
|
-
children:
|
|
55
|
-
|
|
60
|
+
children: b ? /* @__PURE__ */ t(
|
|
61
|
+
N,
|
|
56
62
|
{
|
|
57
|
-
size:
|
|
63
|
+
size: w[a],
|
|
58
64
|
"aria-label": "Fallback Icon",
|
|
59
65
|
"aria-hidden": "true"
|
|
60
66
|
}
|
|
61
67
|
) : /* @__PURE__ */ t(
|
|
62
68
|
"img",
|
|
63
69
|
{
|
|
64
|
-
src:
|
|
70
|
+
src: r,
|
|
65
71
|
alt: "",
|
|
66
|
-
loading:
|
|
67
|
-
onError: () =>
|
|
72
|
+
loading: f,
|
|
73
|
+
onError: () => o(!0),
|
|
68
74
|
className: "size-full overflow-hidden rounded-full object-cover",
|
|
69
75
|
"aria-hidden": "true"
|
|
70
76
|
}
|
|
71
77
|
)
|
|
72
78
|
}
|
|
73
79
|
);
|
|
74
|
-
return
|
|
80
|
+
return i ? /* @__PURE__ */ t(j, { size: E[a], appearance: "red", children: s }) : s;
|
|
75
81
|
};
|
|
76
82
|
export {
|
|
77
83
|
V as Avatar
|
|
@@ -11,7 +11,13 @@ export type AvatarProps = {
|
|
|
11
11
|
*/
|
|
12
12
|
alt?: string;
|
|
13
13
|
/**
|
|
14
|
-
* The
|
|
14
|
+
* The visual appearance of the avatar background: `gray` or `transparent`.
|
|
15
|
+
* @optional
|
|
16
|
+
* @default transparent
|
|
17
|
+
*/
|
|
18
|
+
appearance?: 'gray' | 'transparent';
|
|
19
|
+
/**
|
|
20
|
+
* The size variant of the avatar: `sm`, `md`, `lg`, `xl`.
|
|
15
21
|
* @optional
|
|
16
22
|
* @default md
|
|
17
23
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Avatar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC/B,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Avatar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IAEpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC/B,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BaseButtonProps } from './types';
|
|
2
2
|
export declare const baseButtonVariants: (props?: ({
|
|
3
|
-
appearance?: "base" | "red" | "gray" | "
|
|
3
|
+
appearance?: "base" | "red" | "gray" | "transparent" | "accent" | "no-background" | null | undefined;
|
|
4
4
|
disabled?: boolean | null | undefined;
|
|
5
5
|
loading?: boolean | null | undefined;
|
|
6
6
|
size?: "md" | "sm" | "lg" | "xs" | null | undefined;
|
package/dist/package.json
CHANGED