@ledgerhq/lumen-ui-react 0.1.30 → 0.1.32
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/AddressInput/AddressInput.d.ts +4 -4
- package/dist/lib/Components/AmountDisplay/AmountDisplay.js +13 -13
- package/dist/lib/Components/AmountInput/AmountInput.js +14 -14
- package/dist/lib/Components/Banner/Banner.js +5 -5
- package/dist/lib/Components/BaseInput/BaseInput.d.ts +1 -1
- package/dist/lib/Components/BaseInput/BaseInput.d.ts.map +1 -1
- package/dist/lib/Components/BaseInput/BaseInput.js +134 -85
- package/dist/lib/Components/BaseInput/types.d.ts +12 -4
- package/dist/lib/Components/BaseInput/types.d.ts.map +1 -1
- package/dist/lib/Components/Button/Button.js +8 -8
- package/dist/lib/Components/Card/Card.js +12 -12
- package/dist/lib/Components/CardButton/CardButton.js +4 -4
- package/dist/lib/Components/DataTable/DataTable.d.ts +1 -1
- package/dist/lib/Components/DataTable/DataTable.d.ts.map +1 -1
- package/dist/lib/Components/DataTable/DataTable.js +101 -99
- package/dist/lib/Components/DataTable/types.d.ts +8 -0
- package/dist/lib/Components/DataTable/types.d.ts.map +1 -1
- package/dist/lib/Components/Dialog/Dialog.js +13 -13
- package/dist/lib/Components/Dialog/DialogHeader/DialogHeader.js +12 -12
- package/dist/lib/Components/DotCount/DotCount.js +4 -4
- package/dist/lib/Components/InteractiveIcon/InteractiveIcon.js +4 -4
- package/dist/lib/Components/Link/Link.js +6 -6
- package/dist/lib/Components/ListItem/ListItem.js +3 -3
- package/dist/lib/Components/MediaButton/MediaButton.js +4 -4
- package/dist/lib/Components/MediaImage/MediaImage.js +9 -9
- package/dist/lib/Components/NavBar/CoinCapsule.js +4 -4
- package/dist/lib/Components/NavBar/NavBar.js +26 -26
- package/dist/lib/Components/Popover/Popover.js +6 -6
- package/dist/lib/Components/SearchInput/SearchInput.d.ts +4 -4
- package/dist/lib/Components/SegmentedControl/SegmentedControl.d.ts +1 -1
- package/dist/lib/Components/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/lib/Components/SegmentedControl/SegmentedControl.js +54 -52
- package/dist/lib/Components/SegmentedControl/types.d.ts +4 -0
- package/dist/lib/Components/SegmentedControl/types.d.ts.map +1 -1
- package/dist/lib/Components/Select/Select.d.ts +1 -1
- package/dist/lib/Components/Select/Select.d.ts.map +1 -1
- package/dist/lib/Components/Select/Select.js +41 -39
- package/dist/lib/Components/Select/types.d.ts +1 -1
- package/dist/lib/Components/Select/types.d.ts.map +1 -1
- package/dist/lib/Components/SideBar/SideBar.js +9 -9
- package/dist/lib/Components/Skeleton/Skeleton.js +4 -4
- package/dist/lib/Components/Switch/Switch.js +5 -5
- package/dist/lib/Components/Table/Table.d.ts +1 -1
- package/dist/lib/Components/Table/Table.d.ts.map +1 -1
- package/dist/lib/Components/Table/Table.js +47 -42
- package/dist/lib/Components/Table/types.d.ts +7 -0
- package/dist/lib/Components/Table/types.d.ts.map +1 -1
- package/dist/lib/Components/Table/utils/useThrottledScrollBottom.js +3 -3
- package/dist/lib/Components/TextInput/TextInput.d.ts +4 -4
- package/dist/lib/Symbols/Icons/Lightbulb.d.ts +29 -0
- package/dist/lib/Symbols/Icons/Lightbulb.d.ts.map +1 -0
- package/dist/lib/Symbols/Icons/Lightbulb.js +28 -0
- package/dist/lib/Symbols/index.d.ts +1 -0
- package/dist/lib/Symbols/index.d.ts.map +1 -1
- package/dist/lib/Symbols/index.js +270 -268
- package/dist/libs/utils-shared/dist/index.js +146 -133
- package/dist/package.json +2 -2
- package/package.json +2 -2
|
@@ -8,7 +8,7 @@ import { AddressInputProps } from './types';
|
|
|
8
8
|
* - **Automatic clear button** appears when input has content
|
|
9
9
|
* - **Conditional QR code scanner** appears only when onQrCodeClick handler is provided
|
|
10
10
|
* - **ENS and address support** optimized for cryptocurrency address entry
|
|
11
|
-
* - **
|
|
11
|
+
* - **Helper text** with optional `status` for validation feedback
|
|
12
12
|
* - **Flexible styling** via className prop
|
|
13
13
|
*
|
|
14
14
|
* ## Clear Button Behavior
|
|
@@ -22,12 +22,12 @@ import { AddressInputProps } from './types';
|
|
|
22
22
|
* // Basic address field with automatic clear button
|
|
23
23
|
* <AddressInput value={address} onChange={(e) => setAddress(e.target.value)} />
|
|
24
24
|
*
|
|
25
|
-
* // Address field with error state
|
|
25
|
+
* // Address field with error state (aria-invalid is auto-set when status="error")
|
|
26
26
|
* <AddressInput
|
|
27
27
|
* value={invalidAddress}
|
|
28
28
|
* onChange={(e) => setInvalidAddress(e.target.value)}
|
|
29
|
-
*
|
|
30
|
-
*
|
|
29
|
+
* helperText="Please enter a valid address or ENS name"
|
|
30
|
+
* status="error"
|
|
31
31
|
* />
|
|
32
32
|
*
|
|
33
33
|
* // Address field with QR scanner
|
|
@@ -26,12 +26,12 @@ const g = {
|
|
|
26
26
|
8: 17,
|
|
27
27
|
9: 17
|
|
28
28
|
}, u = d(({ value: a, animate: l, type: i }) => {
|
|
29
|
-
const
|
|
29
|
+
const r = (i === "integer" ? g : I)[a];
|
|
30
30
|
return /* @__PURE__ */ c(
|
|
31
31
|
"div",
|
|
32
32
|
{
|
|
33
33
|
className: "relative overflow-hidden mask-fade-y transition-[width] duration-600",
|
|
34
|
-
style: { width:
|
|
34
|
+
style: { width: r + "px" },
|
|
35
35
|
children: [
|
|
36
36
|
/* @__PURE__ */ e("span", { className: "invisible", children: "0" }),
|
|
37
37
|
/* @__PURE__ */ e(
|
|
@@ -44,7 +44,7 @@ const g = {
|
|
|
44
44
|
style: {
|
|
45
45
|
transform: `translateY(-${a * 10}%)`
|
|
46
46
|
},
|
|
47
|
-
children: D.map((
|
|
47
|
+
children: D.map((s, n) => /* @__PURE__ */ e("span", { inert: s !== a, children: s }, n))
|
|
48
48
|
}
|
|
49
49
|
)
|
|
50
50
|
]
|
|
@@ -52,12 +52,12 @@ const g = {
|
|
|
52
52
|
);
|
|
53
53
|
});
|
|
54
54
|
u.displayName = "DigitStrip";
|
|
55
|
-
const o = d(({ items: a, type: l, animate: i }) => a.map((
|
|
56
|
-
const n = a.length -
|
|
57
|
-
return
|
|
55
|
+
const o = d(({ items: a, type: l, animate: i }) => a.map((r, s) => {
|
|
56
|
+
const n = a.length - s;
|
|
57
|
+
return r.type === "separator" ? /* @__PURE__ */ e("span", { children: r.value }, n) : /* @__PURE__ */ e(
|
|
58
58
|
u,
|
|
59
59
|
{
|
|
60
|
-
value: Number(
|
|
60
|
+
value: Number(r.value),
|
|
61
61
|
animate: i,
|
|
62
62
|
type: l
|
|
63
63
|
},
|
|
@@ -69,8 +69,8 @@ const w = ({
|
|
|
69
69
|
value: a,
|
|
70
70
|
formatter: l,
|
|
71
71
|
hidden: i = !1,
|
|
72
|
-
loading:
|
|
73
|
-
animate:
|
|
72
|
+
loading: r = !1,
|
|
73
|
+
animate: s = !0,
|
|
74
74
|
className: n,
|
|
75
75
|
...f
|
|
76
76
|
}) => {
|
|
@@ -83,12 +83,12 @@ const w = ({
|
|
|
83
83
|
"div",
|
|
84
84
|
{
|
|
85
85
|
className: p(
|
|
86
|
-
|
|
86
|
+
r && "animate-pulse",
|
|
87
87
|
"relative inline-flex",
|
|
88
88
|
n
|
|
89
89
|
),
|
|
90
90
|
"aria-label": y,
|
|
91
|
-
"aria-busy":
|
|
91
|
+
"aria-busy": r,
|
|
92
92
|
...f,
|
|
93
93
|
children: /* @__PURE__ */ c("div", { className: "flex items-baseline", children: [
|
|
94
94
|
/* @__PURE__ */ c(
|
|
@@ -102,7 +102,7 @@ const w = ({
|
|
|
102
102
|
o,
|
|
103
103
|
{
|
|
104
104
|
items: m.integerPart,
|
|
105
|
-
animate:
|
|
105
|
+
animate: s,
|
|
106
106
|
type: "integer"
|
|
107
107
|
}
|
|
108
108
|
)
|
|
@@ -120,7 +120,7 @@ const w = ({
|
|
|
120
120
|
o,
|
|
121
121
|
{
|
|
122
122
|
items: m.decimalPart,
|
|
123
|
-
animate:
|
|
123
|
+
animate: s,
|
|
124
124
|
type: "decimal"
|
|
125
125
|
}
|
|
126
126
|
),
|
|
@@ -2,7 +2,7 @@ import { jsxs as j, jsx as l } from "react/jsx-runtime";
|
|
|
2
2
|
import { useDisabledContext as F, getFontSize as z, cn as a, textFormatter as D } from "../../../libs/utils-shared/dist/index.js";
|
|
3
3
|
import { cva as M } from "class-variance-authority";
|
|
4
4
|
import { useRef as d, useState as h, useMemo as W, useLayoutEffect as q, useEffect as L } from "react";
|
|
5
|
-
const
|
|
5
|
+
const Y = M(
|
|
6
6
|
[
|
|
7
7
|
"bg-transparent heading-0 caret-active outline-hidden transition-colors",
|
|
8
8
|
"text-base placeholder:text-muted-subtle",
|
|
@@ -28,10 +28,10 @@ const Q = M(
|
|
|
28
28
|
"group-has-[input:placeholder-shown]:text-muted-subtle",
|
|
29
29
|
"group-has-[input:disabled]:cursor-not-allowed group-has-[input:disabled]:text-disabled",
|
|
30
30
|
'group-has-[input[aria-invalid="true"]]:text-error'
|
|
31
|
-
),
|
|
31
|
+
), J = ({
|
|
32
32
|
ref: x,
|
|
33
33
|
className: S,
|
|
34
|
-
currencyText:
|
|
34
|
+
currencyText: r,
|
|
35
35
|
currencyPosition: p = "left",
|
|
36
36
|
disabled: v,
|
|
37
37
|
maxIntegerLength: w = 9,
|
|
@@ -45,7 +45,7 @@ const Q = M(
|
|
|
45
45
|
const k = F({
|
|
46
46
|
consumerName: "AmountInput",
|
|
47
47
|
mergeWith: { disabled: v }
|
|
48
|
-
}), c = d(null),
|
|
48
|
+
}), c = d(null), s = d(null), [n, f] = h(u.toString()), [E, m] = h(!1), g = d(n);
|
|
49
49
|
function I(...t) {
|
|
50
50
|
return (e) => {
|
|
51
51
|
t.forEach((o) => {
|
|
@@ -55,9 +55,9 @@ const Q = M(
|
|
|
55
55
|
}
|
|
56
56
|
const i = W(() => z(n) + "px", [n]);
|
|
57
57
|
q(() => {
|
|
58
|
-
if (c.current &&
|
|
58
|
+
if (c.current && s.current) {
|
|
59
59
|
const t = c.current.offsetWidth, e = n === "" ? 33 : 8;
|
|
60
|
-
|
|
60
|
+
s.current.style.width = `${t + e}px`;
|
|
61
61
|
}
|
|
62
62
|
}, [n]), L(() => {
|
|
63
63
|
f(u.toString());
|
|
@@ -76,18 +76,18 @@ const Q = M(
|
|
|
76
76
|
{
|
|
77
77
|
className: "group relative flex items-center justify-center transition-transform",
|
|
78
78
|
onPointerDown: () => {
|
|
79
|
-
const t =
|
|
79
|
+
const t = s.current;
|
|
80
80
|
t && window.requestAnimationFrame(() => {
|
|
81
81
|
t.focus();
|
|
82
82
|
});
|
|
83
83
|
},
|
|
84
84
|
children: [
|
|
85
|
-
|
|
85
|
+
r && p === "left" && /* @__PURE__ */ l(
|
|
86
86
|
"span",
|
|
87
87
|
{
|
|
88
88
|
className: a(b, "shrink-0"),
|
|
89
89
|
style: { fontSize: i, letterSpacing: "normal" },
|
|
90
|
-
children:
|
|
90
|
+
children: r
|
|
91
91
|
}
|
|
92
92
|
),
|
|
93
93
|
/* @__PURE__ */ l(
|
|
@@ -103,24 +103,24 @@ const Q = M(
|
|
|
103
103
|
/* @__PURE__ */ l(
|
|
104
104
|
"input",
|
|
105
105
|
{
|
|
106
|
-
ref: I(x,
|
|
106
|
+
ref: I(x, s),
|
|
107
107
|
type: "text",
|
|
108
108
|
inputMode: "decimal",
|
|
109
109
|
disabled: k,
|
|
110
110
|
value: n,
|
|
111
111
|
onChange: V,
|
|
112
112
|
onAnimationEnd: () => m(!1),
|
|
113
|
-
className: a(
|
|
113
|
+
className: a(Y({ isChanging: E }), S),
|
|
114
114
|
...R,
|
|
115
115
|
style: { fontSize: i, letterSpacing: "normal" }
|
|
116
116
|
}
|
|
117
117
|
),
|
|
118
|
-
|
|
118
|
+
r && p === "right" && /* @__PURE__ */ l(
|
|
119
119
|
"span",
|
|
120
120
|
{
|
|
121
121
|
className: a(b, "shrink-0"),
|
|
122
122
|
style: { fontSize: i, letterSpacing: "normal" },
|
|
123
|
-
children:
|
|
123
|
+
children: r
|
|
124
124
|
}
|
|
125
125
|
)
|
|
126
126
|
]
|
|
@@ -128,5 +128,5 @@ const Q = M(
|
|
|
128
128
|
);
|
|
129
129
|
};
|
|
130
130
|
export {
|
|
131
|
-
|
|
131
|
+
J as AmountInput
|
|
132
132
|
};
|
|
@@ -29,8 +29,8 @@ const k = {
|
|
|
29
29
|
appearance: s = "info",
|
|
30
30
|
title: a,
|
|
31
31
|
description: o,
|
|
32
|
-
primaryAction:
|
|
33
|
-
secondaryAction:
|
|
32
|
+
primaryAction: l,
|
|
33
|
+
secondaryAction: n,
|
|
34
34
|
className: t,
|
|
35
35
|
onClose: i,
|
|
36
36
|
closeAriaLabel: f,
|
|
@@ -50,9 +50,9 @@ const k = {
|
|
|
50
50
|
a && /* @__PURE__ */ r("h3", { className: "line-clamp-2 body-1-semi-bold", children: a }),
|
|
51
51
|
o && /* @__PURE__ */ r("div", { className: c("line-clamp-5 body-2", !a && "mt-2"), children: o })
|
|
52
52
|
] }),
|
|
53
|
-
(
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
(l || n) && /* @__PURE__ */ e("div", { className: "flex gap-4", children: [
|
|
54
|
+
l,
|
|
55
|
+
n
|
|
56
56
|
] })
|
|
57
57
|
] }),
|
|
58
58
|
i && /* @__PURE__ */ r(
|
|
@@ -18,5 +18,5 @@ import { BaseInputProps } from './types';
|
|
|
18
18
|
*
|
|
19
19
|
* @internal
|
|
20
20
|
*/
|
|
21
|
-
export declare const BaseInput: ({ ref, className, containerClassName, inputClassName, labelClassName, label, id, disabled: disabledProp,
|
|
21
|
+
export declare const BaseInput: ({ ref, className, containerClassName, inputClassName, labelClassName, label, id, disabled: disabledProp, helperText, status, suffix, prefix, onClear, hideClearButton, "aria-invalid": ariaInvalidProp, onChange: onChangeProp, placeholder: placeholderProp, ...props }: BaseInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
22
|
//# sourceMappingURL=BaseInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/BaseInput/BaseInput.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/BaseInput/BaseInput.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAuE9C;;;;;;;;;;;;;;;;;;GAkBG;AAEH,eAAO,MAAM,SAAS,GAAI,0QAmBvB,cAAc,4CAuKhB,CAAC"}
|
|
@@ -1,143 +1,192 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useDisabledContext as
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
import { jsxs as d, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { useDisabledContext as U, resolveBaseInputPlaceholder as G, useMergedRef as J, cn as n } from "../../../libs/utils-shared/dist/index.js";
|
|
3
|
+
import { cva as u } from "class-variance-authority";
|
|
4
|
+
import { useRef as K, useId as Q, useState as X, useCallback as Y } from "react";
|
|
5
|
+
import { useCommonTranslation as Z } from "../../../i18n/useCommonTranslation.js";
|
|
6
|
+
import { InteractiveIcon as _ } from "../InteractiveIcon/InteractiveIcon.js";
|
|
7
|
+
import { DeleteCircleFill as y } from "../../Symbols/Icons/DeleteCircleFill.js";
|
|
8
|
+
import { CheckmarkCircleFill as ee } from "../../Symbols/Icons/CheckmarkCircleFill.js";
|
|
9
|
+
const te = u(
|
|
10
|
+
[
|
|
11
|
+
"group relative flex h-48 w-full cursor-text items-center gap-8 rounded-sm bg-muted px-16 transition-colors",
|
|
12
|
+
"focus-within:ring-2 focus-within:ring-active hover:bg-muted-hover",
|
|
13
|
+
"has-disabled:cursor-not-allowed has-disabled:bg-disabled has-disabled:text-disabled"
|
|
14
|
+
],
|
|
15
|
+
{
|
|
16
|
+
variants: {
|
|
17
|
+
status: {
|
|
18
|
+
default: "",
|
|
19
|
+
error: "ring-1 ring-error focus-within:ring-2 focus-within:ring-error",
|
|
20
|
+
success: "ring-1 ring-success focus-within:ring-2 focus-within:ring-success"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
defaultVariants: {
|
|
24
|
+
status: "default"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
), re = n(
|
|
14
28
|
"peer w-full flex-1 bg-muted body-1 text-base caret-active outline-hidden transition-colors",
|
|
15
29
|
"group-hover:bg-muted-hover group-disabled:bg-disabled",
|
|
16
30
|
"group-has-disabled:cursor-not-allowed group-has-disabled:bg-disabled group-has-disabled:text-disabled",
|
|
17
31
|
"placeholder:text-muted group-has-disabled:placeholder:text-disabled",
|
|
18
32
|
"[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
|
|
19
33
|
"truncate"
|
|
20
|
-
),
|
|
34
|
+
), ae = n(
|
|
21
35
|
"pointer-events-none absolute top-6 left-16 origin-left body-4 text-muted transition-all duration-300",
|
|
22
36
|
"peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-placeholder-shown:body-2",
|
|
23
37
|
"group-has-disabled:text-disabled",
|
|
24
38
|
"peer-focus:top-6 peer-focus:translate-y-0 peer-focus:body-4",
|
|
25
39
|
"w-[calc(100%-var(--size-56))] truncate"
|
|
26
|
-
),
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
40
|
+
), oe = u(ae, {
|
|
41
|
+
variants: {
|
|
42
|
+
status: {
|
|
43
|
+
default: "",
|
|
44
|
+
error: "text-error",
|
|
45
|
+
success: ""
|
|
46
|
+
},
|
|
47
|
+
floated: {
|
|
48
|
+
true: "peer-placeholder-shown:top-6 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:body-4",
|
|
49
|
+
false: ""
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
defaultVariants: {
|
|
53
|
+
status: "default",
|
|
54
|
+
floated: !1
|
|
55
|
+
}
|
|
56
|
+
}), se = u("mt-8 flex items-center gap-2 body-3", {
|
|
57
|
+
variants: {
|
|
58
|
+
status: {
|
|
59
|
+
default: "text-muted",
|
|
60
|
+
error: "text-error",
|
|
61
|
+
success: "text-success"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
defaultVariants: {
|
|
65
|
+
status: "default"
|
|
66
|
+
}
|
|
67
|
+
}), be = ({
|
|
68
|
+
ref: I,
|
|
69
|
+
className: C,
|
|
70
|
+
containerClassName: S,
|
|
71
|
+
inputClassName: V,
|
|
72
|
+
labelClassName: N,
|
|
32
73
|
label: l,
|
|
33
|
-
id:
|
|
34
|
-
disabled:
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
74
|
+
id: k,
|
|
75
|
+
disabled: F,
|
|
76
|
+
helperText: p,
|
|
77
|
+
status: e,
|
|
78
|
+
suffix: P,
|
|
79
|
+
prefix: R,
|
|
80
|
+
onClear: z,
|
|
81
|
+
hideClearButton: B = !1,
|
|
82
|
+
"aria-invalid": D,
|
|
83
|
+
onChange: h,
|
|
84
|
+
placeholder: j,
|
|
85
|
+
...a
|
|
43
86
|
}) => {
|
|
44
|
-
const b =
|
|
87
|
+
const b = U({
|
|
45
88
|
consumerName: "BaseInput",
|
|
46
|
-
mergeWith: { disabled:
|
|
47
|
-
}), { t:
|
|
48
|
-
|
|
49
|
-
),
|
|
50
|
-
(
|
|
51
|
-
|
|
89
|
+
mergeWith: { disabled: F }
|
|
90
|
+
}), { t: E } = Z(), t = K(null), L = Q(), c = k || `input-${L}`, A = D ?? (e === "error" ? !0 : void 0), i = a.value !== void 0, [H, f] = X(
|
|
91
|
+
a.defaultValue?.toString() || ""
|
|
92
|
+
), M = Y(
|
|
93
|
+
(o) => {
|
|
94
|
+
i || f(o.target.value), h?.(o);
|
|
52
95
|
},
|
|
53
|
-
[
|
|
54
|
-
),
|
|
55
|
-
|
|
96
|
+
[i, h]
|
|
97
|
+
), O = i ? !!a.value && a.value.toString().length > 0 : H.length > 0, { inputPlaceholder: T, labelStaysFloatedWithPlaceholder: W } = G({
|
|
98
|
+
label: l,
|
|
99
|
+
placeholder: j
|
|
100
|
+
}), m = O && !b && !B, g = `${c}-helper`, v = !!p, $ = () => {
|
|
101
|
+
if (!t.current) return;
|
|
56
102
|
Object.getOwnPropertyDescriptor(
|
|
57
103
|
window.HTMLInputElement.prototype,
|
|
58
104
|
"value"
|
|
59
|
-
)?.set?.call(
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
-
},
|
|
63
|
-
return /* @__PURE__ */
|
|
64
|
-
/* @__PURE__ */
|
|
105
|
+
)?.set?.call(t.current, ""), i || f("");
|
|
106
|
+
const w = new Event("input", { bubbles: !0 });
|
|
107
|
+
t.current.dispatchEvent(w), t.current.focus(), z?.();
|
|
108
|
+
}, q = J(I, t);
|
|
109
|
+
return /* @__PURE__ */ d("div", { className: C, children: [
|
|
110
|
+
/* @__PURE__ */ d(
|
|
65
111
|
"div",
|
|
66
112
|
{
|
|
67
|
-
className:
|
|
68
|
-
onPointerDown: (
|
|
69
|
-
if (
|
|
70
|
-
const
|
|
71
|
-
if (!
|
|
72
|
-
const
|
|
113
|
+
className: n(te({ status: e }), S),
|
|
114
|
+
onPointerDown: (o) => {
|
|
115
|
+
if (o.target.closest("input, button, a")) return;
|
|
116
|
+
const s = t.current;
|
|
117
|
+
if (!s) return;
|
|
118
|
+
const x = s.value.length > 0 ? s.value.length : 0;
|
|
73
119
|
window.requestAnimationFrame(() => {
|
|
74
120
|
try {
|
|
75
|
-
|
|
121
|
+
s.setSelectionRange(x, x);
|
|
76
122
|
} catch {
|
|
77
123
|
}
|
|
78
|
-
|
|
124
|
+
s.focus();
|
|
79
125
|
});
|
|
80
126
|
},
|
|
81
127
|
children: [
|
|
82
|
-
|
|
83
|
-
/* @__PURE__ */
|
|
128
|
+
R,
|
|
129
|
+
/* @__PURE__ */ r(
|
|
84
130
|
"input",
|
|
85
131
|
{
|
|
86
|
-
ref:
|
|
87
|
-
id:
|
|
132
|
+
ref: q,
|
|
133
|
+
id: c,
|
|
88
134
|
disabled: b,
|
|
89
|
-
placeholder:
|
|
90
|
-
"aria-invalid":
|
|
91
|
-
"aria-describedby":
|
|
92
|
-
className:
|
|
93
|
-
|
|
135
|
+
placeholder: T,
|
|
136
|
+
"aria-invalid": A,
|
|
137
|
+
"aria-describedby": v ? g : void 0,
|
|
138
|
+
className: n(
|
|
139
|
+
re,
|
|
94
140
|
l && "pt-12 body-2",
|
|
95
|
-
|
|
141
|
+
V
|
|
96
142
|
),
|
|
97
|
-
onChange:
|
|
98
|
-
...
|
|
143
|
+
onChange: M,
|
|
144
|
+
...a
|
|
99
145
|
}
|
|
100
146
|
),
|
|
101
|
-
l && /* @__PURE__ */
|
|
147
|
+
l && /* @__PURE__ */ r(
|
|
102
148
|
"label",
|
|
103
149
|
{
|
|
104
|
-
htmlFor:
|
|
105
|
-
className:
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
150
|
+
htmlFor: c,
|
|
151
|
+
className: n(
|
|
152
|
+
oe({
|
|
153
|
+
status: e,
|
|
154
|
+
floated: W
|
|
155
|
+
}),
|
|
156
|
+
N
|
|
109
157
|
),
|
|
110
158
|
children: l
|
|
111
159
|
}
|
|
112
160
|
),
|
|
113
|
-
m && /* @__PURE__ */
|
|
114
|
-
|
|
161
|
+
m && /* @__PURE__ */ r(
|
|
162
|
+
_,
|
|
115
163
|
{
|
|
116
164
|
iconType: "filled",
|
|
117
|
-
icon:
|
|
165
|
+
icon: y,
|
|
118
166
|
size: 20,
|
|
119
|
-
onClick:
|
|
120
|
-
"aria-label":
|
|
167
|
+
onClick: $,
|
|
168
|
+
"aria-label": E("components.baseInput.clearInputAriaLabel")
|
|
121
169
|
}
|
|
122
170
|
),
|
|
123
|
-
!m &&
|
|
171
|
+
!m && P
|
|
124
172
|
]
|
|
125
173
|
}
|
|
126
174
|
),
|
|
127
|
-
|
|
175
|
+
v && /* @__PURE__ */ d(
|
|
128
176
|
"div",
|
|
129
177
|
{
|
|
130
|
-
id:
|
|
131
|
-
className:
|
|
132
|
-
role: "alert",
|
|
178
|
+
id: g,
|
|
179
|
+
className: se({ status: e }),
|
|
180
|
+
role: e === "error" ? "alert" : void 0,
|
|
133
181
|
children: [
|
|
134
|
-
/* @__PURE__ */
|
|
135
|
-
/* @__PURE__ */
|
|
182
|
+
e === "error" && /* @__PURE__ */ r(y, { size: 16, className: "text-error" }),
|
|
183
|
+
e === "success" && /* @__PURE__ */ r(ee, { size: 16, className: "text-success" }),
|
|
184
|
+
/* @__PURE__ */ r("span", { children: p })
|
|
136
185
|
]
|
|
137
186
|
}
|
|
138
187
|
)
|
|
139
188
|
] });
|
|
140
189
|
};
|
|
141
190
|
export {
|
|
142
|
-
|
|
191
|
+
be as BaseInput
|
|
143
192
|
};
|
|
@@ -1,16 +1,24 @@
|
|
|
1
1
|
import { ComponentPropsWithRef, ReactNode } from 'react';
|
|
2
|
+
export type BaseInputStatus = 'error' | 'success';
|
|
2
3
|
export type BaseInputProps = {
|
|
3
4
|
/**
|
|
4
5
|
* The label text that floats above the input when focused or filled.
|
|
5
6
|
*/
|
|
6
7
|
label?: string;
|
|
7
8
|
/**
|
|
8
|
-
*
|
|
9
|
+
* Optional text shown below the input (hint, error, or success copy).
|
|
10
|
+
* Pair with `status` for error/success styling and icons; omit `status` for a neutral hint.
|
|
9
11
|
*/
|
|
10
|
-
|
|
12
|
+
helperText?: string;
|
|
11
13
|
/**
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
+
* Visual state for border, label, helper text, and helper icon.
|
|
15
|
+
* Omit when `helperText` is a neutral hint.
|
|
16
|
+
*/
|
|
17
|
+
status?: BaseInputStatus;
|
|
18
|
+
/**
|
|
19
|
+
* Overrides the accessibility invalid state on the input element.
|
|
20
|
+
* Automatically set to `true` when `status` is `'error'` — only pass this
|
|
21
|
+
* explicitly when you need to decouple the accessibility state from the visual state.
|
|
14
22
|
*/
|
|
15
23
|
'aria-invalid'?: boolean;
|
|
16
24
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/BaseInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/BaseInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,CAAC;AAElD,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GAAG,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
2
|
import { cn as d } from "../../../libs/utils-shared/dist/index.js";
|
|
3
3
|
import { cva as e } from "class-variance-authority";
|
|
4
4
|
import { BaseButton as b } from "./BaseButton.js";
|
|
@@ -16,22 +16,22 @@ const l = e("", {
|
|
|
16
16
|
}), x = ({
|
|
17
17
|
ref: t,
|
|
18
18
|
className: m,
|
|
19
|
-
loading:
|
|
20
|
-
disabled:
|
|
19
|
+
loading: r,
|
|
20
|
+
disabled: s,
|
|
21
21
|
children: a,
|
|
22
22
|
size: o,
|
|
23
23
|
icon: i,
|
|
24
|
-
...
|
|
25
|
-
}) => /* @__PURE__ */
|
|
24
|
+
...p
|
|
25
|
+
}) => /* @__PURE__ */ n(
|
|
26
26
|
b,
|
|
27
27
|
{
|
|
28
28
|
ref: t,
|
|
29
29
|
size: o,
|
|
30
|
-
disabled:
|
|
30
|
+
disabled: s,
|
|
31
31
|
icon: i,
|
|
32
|
-
loading:
|
|
32
|
+
loading: r,
|
|
33
33
|
className: d(l({ size: o }), "gap-8", m),
|
|
34
|
-
...
|
|
34
|
+
...p,
|
|
35
35
|
children: a
|
|
36
36
|
}
|
|
37
37
|
);
|