@pibit.ai/cure-design-system 0.5.4 → 0.5.7
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/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +212 -209
- package/dist/primitives/input/index.d.ts +1 -1
- package/dist/primitives/input/index.d.ts.map +1 -1
- package/dist/primitives/input/input.d.ts +15 -3
- package/dist/primitives/input/input.d.ts.map +1 -1
- package/dist/primitives/input/input.js +213 -187
- package/dist/primitives/select/ExpandableSearchInput.d.ts +1 -1
- package/dist/primitives/select/ExpandableSearchInput.d.ts.map +1 -1
- package/dist/primitives/select/ExpandableSearchInput.js +23 -23
- package/dist/primitives/select/SearchInput.d.ts +15 -2
- package/dist/primitives/select/SearchInput.d.ts.map +1 -1
- package/dist/primitives/select/SearchInput.js +128 -114
- package/dist/primitives/select/index.d.ts +1 -0
- package/dist/primitives/select/index.d.ts.map +1 -1
- package/dist/primitives/select/select.d.ts +4 -0
- package/dist/primitives/select/select.d.ts.map +1 -1
- package/dist/primitives/select/select.js +40 -21
- package/dist/styles/components.css +1 -1
- package/package.json +1 -1
|
@@ -1,55 +1,57 @@
|
|
|
1
|
-
import { jsx as r, jsxs as
|
|
2
|
-
import { Group as
|
|
3
|
-
import { cx as i, sortCx as
|
|
4
|
-
import { useState as
|
|
5
|
-
import { HintText as
|
|
6
|
-
import { EyeOff as
|
|
7
|
-
import { Label as
|
|
8
|
-
import { Tooltip as
|
|
9
|
-
import { getPlatformShortcutLabel as
|
|
10
|
-
import { Badge as
|
|
11
|
-
const
|
|
1
|
+
import { jsx as r, jsxs as B, Fragment as Q } from "react/jsx-runtime";
|
|
2
|
+
import { Group as D, Input as ee, TextField as re } from "react-aria-components";
|
|
3
|
+
import { cx as i, sortCx as ae } from "../../utils/cn.js";
|
|
4
|
+
import { useState as I, useContext as te, createContext as ie, useEffect as se } from "react";
|
|
5
|
+
import { HintText as J } from "./hint-text.js";
|
|
6
|
+
import { EyeOff as ne, Eye as le, XClose as oe, HelpCircle as de, InfoCircle as pe } from "@untitledui/icons";
|
|
7
|
+
import { Label as ue } from "./label.js";
|
|
8
|
+
import { Tooltip as ge, TooltipTrigger as me } from "../tooltip/tooltip.js";
|
|
9
|
+
import { getPlatformShortcutLabel as fe } from "../../utils/keyboard-shortcut.js";
|
|
10
|
+
import { Badge as ce } from "../badge/badge.js";
|
|
11
|
+
const M = {
|
|
12
12
|
sm: "text-xs",
|
|
13
13
|
md: "text-sm",
|
|
14
14
|
lg: "text-md"
|
|
15
|
-
},
|
|
15
|
+
}, he = {
|
|
16
16
|
sm: "text-xs",
|
|
17
17
|
md: "text-xs",
|
|
18
18
|
lg: "text-sm"
|
|
19
|
-
},
|
|
20
|
-
ref:
|
|
19
|
+
}, U = ({
|
|
20
|
+
ref: d,
|
|
21
21
|
isReadOnly: f,
|
|
22
22
|
tooltip: c,
|
|
23
|
-
shortcut:
|
|
23
|
+
shortcut: T,
|
|
24
24
|
groupRef: C,
|
|
25
|
-
size:
|
|
25
|
+
size: j = "sm",
|
|
26
26
|
isInvalid: h,
|
|
27
|
-
isDisabled:
|
|
27
|
+
isDisabled: g,
|
|
28
28
|
icon: v,
|
|
29
29
|
iconTrailing: x,
|
|
30
|
-
placeholder:
|
|
31
|
-
wrapperClassName:
|
|
32
|
-
tooltipClassName:
|
|
33
|
-
inputClassName:
|
|
34
|
-
iconClassName:
|
|
35
|
-
trailingAction:
|
|
36
|
-
|
|
37
|
-
|
|
30
|
+
placeholder: L,
|
|
31
|
+
wrapperClassName: $,
|
|
32
|
+
tooltipClassName: R,
|
|
33
|
+
inputClassName: E,
|
|
34
|
+
iconClassName: F,
|
|
35
|
+
trailingAction: z,
|
|
36
|
+
trailingSlot: w,
|
|
37
|
+
trailingIconCount: p,
|
|
38
|
+
mode: y,
|
|
38
39
|
// Omit this prop to avoid invalid HTML attribute warning
|
|
39
|
-
isRequired:
|
|
40
|
-
customStyles:
|
|
41
|
-
|
|
40
|
+
isRequired: X,
|
|
41
|
+
customStyles: K,
|
|
42
|
+
showInfoIcon: P = !0,
|
|
43
|
+
...O
|
|
42
44
|
}) => {
|
|
43
|
-
const
|
|
45
|
+
const b = !!w, N = !b && (c || h || x || z || P), q = v, [_, o] = I([]), [m, k] = I(""), e = te(Y), s = (e == null ? void 0 : e.size) || j, n = ae({
|
|
44
46
|
sm: {
|
|
45
47
|
root: i(
|
|
46
|
-
"p-2 h-8",
|
|
47
|
-
|
|
48
|
+
b ? "min-w-0 flex-1 px-3 py-2" : "p-2 h-8",
|
|
49
|
+
N && "pr-9",
|
|
48
50
|
q && "pl-10",
|
|
49
|
-
|
|
51
|
+
p && "pr-16"
|
|
50
52
|
),
|
|
51
53
|
iconLeading: "left-3 size-4",
|
|
52
|
-
trailingIconCount:
|
|
54
|
+
trailingIconCount: p === 2 ? "right-6 size-4" : "",
|
|
53
55
|
iconTrailing: "right-3 size-4",
|
|
54
56
|
shortcut: "pr-2.5",
|
|
55
57
|
tags: "flex gap-1",
|
|
@@ -58,13 +60,13 @@ const X = {
|
|
|
58
60
|
},
|
|
59
61
|
md: {
|
|
60
62
|
root: i(
|
|
61
|
-
"px-3 py-2 h-9",
|
|
62
|
-
|
|
63
|
+
b ? "min-w-0 flex-1 px-3 py-2" : "px-3 py-2 h-9",
|
|
64
|
+
N && "pr-9.5",
|
|
63
65
|
q && "pl-10.5",
|
|
64
|
-
|
|
66
|
+
p && "pr-16"
|
|
65
67
|
),
|
|
66
68
|
iconLeading: "left-3.5",
|
|
67
|
-
trailingIconCount:
|
|
69
|
+
trailingIconCount: p === 2 ? "right-6.5" : "",
|
|
68
70
|
iconTrailing: "right-3.5",
|
|
69
71
|
shortcut: "pr-3",
|
|
70
72
|
tags: "flex gap-1",
|
|
@@ -73,80 +75,90 @@ const X = {
|
|
|
73
75
|
},
|
|
74
76
|
lg: {
|
|
75
77
|
root: i(
|
|
76
|
-
"px-3.5 py-2.5 h-11",
|
|
77
|
-
|
|
78
|
+
b ? "min-w-0 flex-1 px-3.5 py-2.5" : "px-3.5 py-2.5 h-11",
|
|
79
|
+
N && "pr-10",
|
|
78
80
|
q && "pl-11",
|
|
79
|
-
|
|
81
|
+
p && "pr-18"
|
|
80
82
|
),
|
|
81
83
|
iconLeading: "left-4 size-5",
|
|
82
|
-
trailingIconCount:
|
|
84
|
+
trailingIconCount: p === 2 ? "right-7 size-5" : "",
|
|
83
85
|
iconTrailing: "right-4 size-5",
|
|
84
86
|
shortcut: "pr-3.5",
|
|
85
87
|
tags: "flex gap-1",
|
|
86
88
|
tag: "rounded-md bg-primary border border-secondary p-2.5",
|
|
87
89
|
wrapper: "rounded-lg"
|
|
88
90
|
}
|
|
89
|
-
}),
|
|
91
|
+
}), H = () => {
|
|
90
92
|
var t;
|
|
91
|
-
const a =
|
|
93
|
+
const a = m.trim();
|
|
92
94
|
a && ((t = e == null ? void 0 : e.onChange) == null || t.call(
|
|
93
95
|
e,
|
|
94
96
|
e != null && e.value ? (e == null ? void 0 : e.value) + "," + a : a
|
|
95
|
-
),
|
|
96
|
-
},
|
|
97
|
-
var t,
|
|
98
|
-
if (
|
|
97
|
+
), o((l) => [...l, a]), k(""));
|
|
98
|
+
}, S = (a) => {
|
|
99
|
+
var t, l, V;
|
|
100
|
+
if (y === "tag") {
|
|
99
101
|
if (a.key === "Enter" || a.key === ",") {
|
|
100
102
|
a.preventDefault();
|
|
101
|
-
const
|
|
102
|
-
|
|
103
|
+
const u = m.trim();
|
|
104
|
+
u && ((t = e == null ? void 0 : e.onChange) == null || t.call(
|
|
103
105
|
e,
|
|
104
|
-
e != null && e.value ? (e == null ? void 0 : e.value) + "," +
|
|
105
|
-
),
|
|
106
|
+
e != null && e.value ? (e == null ? void 0 : e.value) + "," + u : u
|
|
107
|
+
), o((G) => [...G, u]), k(""));
|
|
106
108
|
}
|
|
107
|
-
if (a.key === "Backspace" && !
|
|
109
|
+
if (a.key === "Backspace" && !m)
|
|
108
110
|
if (e != null && e.value) {
|
|
109
|
-
const
|
|
110
|
-
|
|
111
|
+
const u = e.value.split(",").map((G) => G.trim()).filter(Boolean);
|
|
112
|
+
u.pop(), (l = e.onChange) == null || l.call(e, u.join(", "));
|
|
111
113
|
} else
|
|
112
|
-
(
|
|
114
|
+
(V = e == null ? void 0 : e.onChange) == null || V.call(e, "");
|
|
113
115
|
}
|
|
114
|
-
},
|
|
116
|
+
}, A = (a) => {
|
|
115
117
|
const t = a.target.value;
|
|
116
|
-
|
|
117
|
-
},
|
|
118
|
-
var
|
|
119
|
-
const t =
|
|
120
|
-
|
|
118
|
+
y === "tag" && k(t);
|
|
119
|
+
}, W = (a) => {
|
|
120
|
+
var l;
|
|
121
|
+
const t = _.filter((V, u) => u !== a);
|
|
122
|
+
o(t), (l = e == null ? void 0 : e.onChange) == null || l.call(e, t.join(", "));
|
|
121
123
|
};
|
|
122
|
-
return
|
|
123
|
-
if (
|
|
124
|
+
return se(() => {
|
|
125
|
+
if (y === "tag")
|
|
124
126
|
if (e != null && e.value) {
|
|
125
127
|
const a = e.value.split(",").map((t) => t.trim()).filter(Boolean);
|
|
126
|
-
|
|
128
|
+
o(a);
|
|
127
129
|
} else
|
|
128
|
-
|
|
129
|
-
}, [e == null ? void 0 : e.value]), /* @__PURE__ */
|
|
130
|
-
|
|
130
|
+
o([]);
|
|
131
|
+
}, [e == null ? void 0 : e.value]), /* @__PURE__ */ B(
|
|
132
|
+
D,
|
|
131
133
|
{
|
|
132
|
-
isDisabled:
|
|
134
|
+
isDisabled: g,
|
|
133
135
|
isInvalid: h,
|
|
134
136
|
ref: C,
|
|
135
|
-
className: ({ isFocusWithin: a, isDisabled: t, isInvalid:
|
|
136
|
-
|
|
137
|
-
|
|
137
|
+
className: ({ isFocusWithin: a, isDisabled: t, isInvalid: l }) => i(
|
|
138
|
+
// Frozen to platform-ui's Input, which is the one users see today. The
|
|
139
|
+
// trailing slot has to be able to reach the group's edge, so the group
|
|
140
|
+
// clips its children and stretches them instead of centring them.
|
|
141
|
+
"relative flex w-full flex-row place-content-center bg-primary border border-secondary duration-100 ease-linear overflow-hidden",
|
|
142
|
+
b ? "items-stretch" : "place-items-center",
|
|
143
|
+
// The focus ring is drawn inside the border, so it does not add a pixel
|
|
144
|
+
// to the control's outer size when the field is focused.
|
|
145
|
+
a && !t && !f && "ring-1 ring-inset ring-brand",
|
|
138
146
|
// Disabled state styles
|
|
139
147
|
t && "cursor-not-allowed bg-disabled_subtle ring-disabled",
|
|
140
148
|
"group-disabled:cursor-not-allowed group-disabled:bg-disabled_subtle group-disabled:ring-disabled",
|
|
141
|
-
// Invalid state styles
|
|
142
|
-
|
|
143
|
-
"
|
|
149
|
+
// Invalid state styles. The border colour changes too, not just the ring:
|
|
150
|
+
// on a field with no focus the ring alone is nearly invisible.
|
|
151
|
+
l && "border-error ring-error_subtle",
|
|
152
|
+
"group-invalid:border-error group-invalid:ring-error_subtle",
|
|
144
153
|
// Invalid state with focus-within styles
|
|
145
|
-
|
|
154
|
+
l && a && "ring-2 ring-error",
|
|
146
155
|
a && "group-invalid:ring-2 group-invalid:ring-error",
|
|
147
156
|
e == null ? void 0 : e.wrapperClassName,
|
|
148
|
-
|
|
149
|
-
|
|
157
|
+
// The caller's class comes last so it wins. Reversed, a caller passing
|
|
158
|
+
// `rounded-full` loses to the size's own `rounded-md` and silently does
|
|
159
|
+
// nothing — which is what platform-ui's 70 call sites rely on not happening.
|
|
160
|
+
n[s].wrapper,
|
|
161
|
+
$
|
|
150
162
|
),
|
|
151
163
|
children: [
|
|
152
164
|
v && /* @__PURE__ */ r(
|
|
@@ -154,30 +166,30 @@ const X = {
|
|
|
154
166
|
{
|
|
155
167
|
className: i(
|
|
156
168
|
"pointer-events-none absolute size-5 text-fg-quaternary",
|
|
157
|
-
|
|
158
|
-
|
|
169
|
+
g && "text-fg-disabled",
|
|
170
|
+
n[s].iconLeading,
|
|
159
171
|
e == null ? void 0 : e.iconClassName,
|
|
160
|
-
|
|
172
|
+
F
|
|
161
173
|
)
|
|
162
174
|
}
|
|
163
175
|
),
|
|
164
|
-
|
|
176
|
+
y === "tag" && /* @__PURE__ */ B(
|
|
165
177
|
"div",
|
|
166
178
|
{
|
|
167
179
|
className: i(
|
|
168
180
|
"flex flex-wrap w-full items-center justify-start gap-1 pl-1.5",
|
|
169
|
-
|
|
181
|
+
g && "text-fg-disabled"
|
|
170
182
|
),
|
|
171
183
|
children: [
|
|
172
|
-
|
|
184
|
+
_.map((a, t) => (
|
|
173
185
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
|
|
174
|
-
/* @__PURE__ */ r("div", { onClick: (
|
|
186
|
+
/* @__PURE__ */ r("div", { onClick: (l) => l.stopPropagation(), children: /* @__PURE__ */ B(ce, { className: "rounded-md bg-primary border border-secondary px-2 py-1 pointer-events-auto!", children: [
|
|
175
187
|
a,
|
|
176
188
|
/* @__PURE__ */ r(
|
|
177
|
-
|
|
189
|
+
oe,
|
|
178
190
|
{
|
|
179
191
|
className: "size-4 cursor-pointer text-fg-quaternary hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
|
|
180
|
-
onClick: () =>
|
|
192
|
+
onClick: () => W(t)
|
|
181
193
|
}
|
|
182
194
|
)
|
|
183
195
|
] }) }, `${a}-${t}`)
|
|
@@ -186,91 +198,101 @@ const X = {
|
|
|
186
198
|
"input",
|
|
187
199
|
{
|
|
188
200
|
type: "text",
|
|
189
|
-
value:
|
|
190
|
-
onChange:
|
|
191
|
-
onKeyDown:
|
|
192
|
-
placeholder:
|
|
193
|
-
disabled:
|
|
194
|
-
onBlur:
|
|
201
|
+
value: m,
|
|
202
|
+
onChange: A,
|
|
203
|
+
onKeyDown: S,
|
|
204
|
+
placeholder: _.length === 0 ? L : "",
|
|
205
|
+
disabled: g,
|
|
206
|
+
onBlur: H,
|
|
195
207
|
className: i(
|
|
196
208
|
"bg-transparent outline-none flex-1 min-w-[50px] w-full text-primary placeholder:text-placeholder_subtle",
|
|
197
209
|
"disabled:cursor-not-allowed disabled:text-disabled group-disabled:pointer-events-none",
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
210
|
+
n[s].root,
|
|
211
|
+
M[s],
|
|
212
|
+
E
|
|
201
213
|
)
|
|
202
214
|
}
|
|
203
215
|
)
|
|
204
216
|
]
|
|
205
217
|
}
|
|
206
218
|
),
|
|
207
|
-
|
|
208
|
-
|
|
219
|
+
y !== "tag" && /* @__PURE__ */ r(
|
|
220
|
+
ee,
|
|
209
221
|
{
|
|
210
|
-
...
|
|
211
|
-
ref:
|
|
212
|
-
placeholder:
|
|
222
|
+
...O,
|
|
223
|
+
ref: d,
|
|
224
|
+
placeholder: L,
|
|
213
225
|
className: i(
|
|
214
226
|
"m-0 w-full bg-transparent text-primary ring-0 outline-hidden placeholder:text-placeholder_subtle autofill:rounded-lg autofill:text-primary",
|
|
215
227
|
"disabled:cursor-not-allowed disabled:text-disabled group-disabled:pointer-events-none",
|
|
216
|
-
|
|
217
|
-
|
|
228
|
+
n[s].root,
|
|
229
|
+
M[s],
|
|
218
230
|
e == null ? void 0 : e.inputClassName,
|
|
219
|
-
|
|
231
|
+
E
|
|
220
232
|
),
|
|
221
|
-
style: { ...
|
|
233
|
+
style: { ...K }
|
|
222
234
|
}
|
|
223
235
|
),
|
|
224
|
-
|
|
236
|
+
w && /* @__PURE__ */ B(Q, { children: [
|
|
237
|
+
/* @__PURE__ */ r(
|
|
238
|
+
"div",
|
|
239
|
+
{
|
|
240
|
+
className: "w-px shrink-0 self-stretch bg-secondary",
|
|
241
|
+
"aria-hidden": "true"
|
|
242
|
+
}
|
|
243
|
+
),
|
|
244
|
+
/* @__PURE__ */ r("div", { className: "flex shrink-0 items-stretch", children: w })
|
|
245
|
+
] }),
|
|
246
|
+
z && !x && !w && /* @__PURE__ */ r(
|
|
225
247
|
"div",
|
|
226
248
|
{
|
|
227
249
|
className: i(
|
|
228
250
|
"absolute flex items-center justify-center",
|
|
229
|
-
|
|
230
|
-
|
|
251
|
+
n[s].iconTrailing,
|
|
252
|
+
n[s].trailingIconCount
|
|
231
253
|
),
|
|
232
|
-
children:
|
|
254
|
+
children: z
|
|
233
255
|
}
|
|
234
256
|
),
|
|
235
|
-
c && !h && /* @__PURE__ */ r(
|
|
236
|
-
|
|
257
|
+
c && !h && /* @__PURE__ */ r(ge, { title: c, placement: "top", children: /* @__PURE__ */ r(
|
|
258
|
+
me,
|
|
237
259
|
{
|
|
238
260
|
className: i(
|
|
239
261
|
"absolute cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
|
|
240
|
-
|
|
262
|
+
n[s].iconTrailing,
|
|
241
263
|
e == null ? void 0 : e.tooltipClassName,
|
|
242
|
-
|
|
264
|
+
R
|
|
243
265
|
),
|
|
244
|
-
children: /* @__PURE__ */ r(
|
|
266
|
+
children: /* @__PURE__ */ r(de, { className: "size-4" })
|
|
245
267
|
}
|
|
246
268
|
) }),
|
|
247
|
-
h && /* @__PURE__ */ r(
|
|
248
|
-
|
|
269
|
+
h && P && /* @__PURE__ */ r(
|
|
270
|
+
pe,
|
|
249
271
|
{
|
|
250
272
|
className: i(
|
|
251
273
|
"pointer-events-none absolute size-4 text-fg-error-secondary",
|
|
252
|
-
|
|
274
|
+
n[s].iconTrailing,
|
|
253
275
|
e == null ? void 0 : e.tooltipClassName,
|
|
254
|
-
|
|
276
|
+
R
|
|
255
277
|
)
|
|
256
278
|
}
|
|
257
279
|
),
|
|
258
|
-
|
|
280
|
+
T && /* @__PURE__ */ r(
|
|
259
281
|
"div",
|
|
260
282
|
{
|
|
261
283
|
className: i(
|
|
262
284
|
"pointer-events-none absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent pl-8",
|
|
263
|
-
|
|
285
|
+
n[s].shortcut
|
|
264
286
|
),
|
|
265
287
|
children: /* @__PURE__ */ r(
|
|
266
288
|
"span",
|
|
267
289
|
{
|
|
268
290
|
className: i(
|
|
269
291
|
"pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
|
|
270
|
-
|
|
292
|
+
g && "bg-transparent text-disabled"
|
|
271
293
|
),
|
|
272
294
|
"aria-hidden": "true",
|
|
273
|
-
children: typeof
|
|
295
|
+
children: typeof T == "string" ? T : fe(["meta"], "K")
|
|
274
296
|
}
|
|
275
297
|
)
|
|
276
298
|
}
|
|
@@ -280,10 +302,10 @@ const X = {
|
|
|
280
302
|
{
|
|
281
303
|
className: i(
|
|
282
304
|
"pointer-events-none absolute size-5 text-fg-quaternary",
|
|
283
|
-
|
|
284
|
-
|
|
305
|
+
g && "text-fg-disabled",
|
|
306
|
+
n[s].iconTrailing,
|
|
285
307
|
e == null ? void 0 : e.iconClassName,
|
|
286
|
-
|
|
308
|
+
F
|
|
287
309
|
)
|
|
288
310
|
}
|
|
289
311
|
)
|
|
@@ -291,108 +313,112 @@ const X = {
|
|
|
291
313
|
}
|
|
292
314
|
);
|
|
293
315
|
};
|
|
294
|
-
|
|
295
|
-
const
|
|
296
|
-
|
|
316
|
+
U.displayName = "InputBase";
|
|
317
|
+
const Y = ie({}), Z = ({ className: d, ...f }) => /* @__PURE__ */ r(Y.Provider, { value: f, children: /* @__PURE__ */ r(
|
|
318
|
+
re,
|
|
297
319
|
{
|
|
298
320
|
...f,
|
|
299
321
|
"data-input-wrapper": !0,
|
|
300
322
|
className: (c) => i(
|
|
301
323
|
"group flex h-max w-full flex-col items-start justify-start gap-1.5",
|
|
302
|
-
typeof
|
|
324
|
+
typeof d == "function" ? d(c) : d
|
|
303
325
|
)
|
|
304
326
|
}
|
|
305
327
|
) });
|
|
306
|
-
|
|
307
|
-
const
|
|
308
|
-
size:
|
|
328
|
+
Z.displayName = "TextField";
|
|
329
|
+
const ye = ({
|
|
330
|
+
size: d = "sm",
|
|
309
331
|
placeholder: f,
|
|
310
332
|
icon: c,
|
|
311
|
-
iconTrailing:
|
|
333
|
+
iconTrailing: T,
|
|
312
334
|
label: C,
|
|
313
|
-
supportingText:
|
|
335
|
+
supportingText: j,
|
|
314
336
|
hint: h,
|
|
315
|
-
shortcut:
|
|
337
|
+
shortcut: g,
|
|
316
338
|
hideRequiredIndicator: v,
|
|
317
339
|
className: x,
|
|
318
|
-
ref:
|
|
319
|
-
groupRef:
|
|
320
|
-
tooltip:
|
|
321
|
-
iconClassName:
|
|
322
|
-
inputClassName:
|
|
323
|
-
wrapperClassName:
|
|
324
|
-
tooltipClassName:
|
|
325
|
-
inputType:
|
|
326
|
-
customStyles:
|
|
327
|
-
containerStyles:
|
|
328
|
-
trailingAction:
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
340
|
+
ref: L,
|
|
341
|
+
groupRef: $,
|
|
342
|
+
tooltip: R,
|
|
343
|
+
iconClassName: E,
|
|
344
|
+
inputClassName: F,
|
|
345
|
+
wrapperClassName: z,
|
|
346
|
+
tooltipClassName: w,
|
|
347
|
+
inputType: p = "text",
|
|
348
|
+
customStyles: y = {},
|
|
349
|
+
containerStyles: X = {},
|
|
350
|
+
trailingAction: K,
|
|
351
|
+
trailingSlot: P,
|
|
352
|
+
trailingIconCount: O,
|
|
353
|
+
mode: b,
|
|
354
|
+
isDisabled: N,
|
|
355
|
+
isInvalid: q,
|
|
356
|
+
showInfoIcon: _ = !0,
|
|
357
|
+
...o
|
|
334
358
|
}) => {
|
|
335
|
-
const [
|
|
359
|
+
const [m, k] = I(!1), e = p === "password", s = e ? m ? "text" : "password" : p, n = o == null ? void 0 : o.isReadOnly;
|
|
336
360
|
return /* @__PURE__ */ r(
|
|
337
|
-
|
|
361
|
+
Z,
|
|
338
362
|
{
|
|
339
|
-
style:
|
|
363
|
+
style: X,
|
|
340
364
|
"aria-label": C ? void 0 : f,
|
|
341
|
-
...
|
|
342
|
-
isDisabled:
|
|
343
|
-
isInvalid:
|
|
365
|
+
...o,
|
|
366
|
+
isDisabled: N,
|
|
367
|
+
isInvalid: q,
|
|
344
368
|
className: x,
|
|
345
|
-
children: ({ isRequired:
|
|
369
|
+
children: ({ isRequired: H, isInvalid: S }) => /* @__PURE__ */ B(Q, { children: [
|
|
346
370
|
C && /* @__PURE__ */ r(
|
|
347
|
-
|
|
371
|
+
ue,
|
|
348
372
|
{
|
|
349
|
-
className: i("color-text-label",
|
|
350
|
-
isRequired: v ? !v :
|
|
373
|
+
className: i("color-text-label", he[d]),
|
|
374
|
+
isRequired: v ? !v : H,
|
|
351
375
|
children: C
|
|
352
376
|
}
|
|
353
377
|
),
|
|
354
|
-
|
|
378
|
+
j && /* @__PURE__ */ r(J, { className: "mt-[-5px] text-tertiary!", isInvalid: !1, children: j }),
|
|
355
379
|
/* @__PURE__ */ r(
|
|
356
|
-
|
|
380
|
+
U,
|
|
357
381
|
{
|
|
358
|
-
ref:
|
|
359
|
-
groupRef:
|
|
360
|
-
size:
|
|
382
|
+
ref: L,
|
|
383
|
+
groupRef: $,
|
|
384
|
+
size: d,
|
|
361
385
|
placeholder: f,
|
|
362
|
-
isReadOnly:
|
|
363
|
-
isDisabled:
|
|
386
|
+
isReadOnly: n,
|
|
387
|
+
isDisabled: N,
|
|
364
388
|
isInvalid: S,
|
|
365
389
|
icon: c,
|
|
366
|
-
iconTrailing:
|
|
367
|
-
shortcut:
|
|
368
|
-
iconClassName:
|
|
369
|
-
inputClassName:
|
|
370
|
-
wrapperClassName:
|
|
371
|
-
tooltipClassName:
|
|
372
|
-
tooltip:
|
|
373
|
-
type:
|
|
374
|
-
customStyles:
|
|
375
|
-
mode:
|
|
376
|
-
trailingAction:
|
|
390
|
+
iconTrailing: T,
|
|
391
|
+
shortcut: g,
|
|
392
|
+
iconClassName: E,
|
|
393
|
+
inputClassName: F,
|
|
394
|
+
wrapperClassName: z,
|
|
395
|
+
tooltipClassName: w,
|
|
396
|
+
tooltip: R,
|
|
397
|
+
type: s,
|
|
398
|
+
customStyles: y,
|
|
399
|
+
mode: b,
|
|
400
|
+
trailingAction: e ? /* @__PURE__ */ r(
|
|
377
401
|
"button",
|
|
378
402
|
{
|
|
379
403
|
type: "button",
|
|
380
|
-
onClick: () =>
|
|
404
|
+
onClick: () => k(!m),
|
|
381
405
|
className: "text-fg-quaternary hover:text-fg-quaternary_hover focus:outline-none",
|
|
382
|
-
children:
|
|
406
|
+
children: m ? /* @__PURE__ */ r(ne, { className: "size-5" }) : /* @__PURE__ */ r(le, { className: "size-5" })
|
|
383
407
|
}
|
|
384
|
-
) :
|
|
385
|
-
|
|
408
|
+
) : K,
|
|
409
|
+
trailingSlot: P,
|
|
410
|
+
trailingIconCount: O,
|
|
411
|
+
showInfoIcon: _
|
|
386
412
|
}
|
|
387
413
|
),
|
|
388
|
-
h && /* @__PURE__ */ r(
|
|
414
|
+
h && /* @__PURE__ */ r(J, { size: d, isInvalid: S, children: h })
|
|
389
415
|
] })
|
|
390
416
|
}
|
|
391
417
|
);
|
|
392
418
|
};
|
|
393
|
-
|
|
419
|
+
ye.displayName = "Input";
|
|
394
420
|
export {
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
421
|
+
ye as Input,
|
|
422
|
+
U as InputBase,
|
|
423
|
+
Z as TextField
|
|
398
424
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FocusEventHandler, KeyboardEventHandler } from 'react';
|
|
2
2
|
export interface ExpandableSearchInputProps {
|
|
3
3
|
placeholder?: string;
|
|
4
|
-
size?: "sm" | "md" | "lg";
|
|
4
|
+
size?: "xs" | "sm" | "md" | "lg";
|
|
5
5
|
value?: string;
|
|
6
6
|
onChange?: (value: string) => void;
|
|
7
7
|
onBlur?: FocusEventHandler;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableSearchInput.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/ExpandableSearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAC1B,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,0BAA0B;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"ExpandableSearchInput.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/ExpandableSearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAC1B,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,0BAA0B;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wGAAwG;IACxG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAKD,eAAO,MAAM,qBAAqB,GAAI,2JAcnC,0BAA0B,4CA2K5B,CAAC"}
|