@agg-market/ui 7.0.0 → 8.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-KQKLLL4D.mjs → chunk-JE4MV5RL.mjs} +8 -11
- package/dist/{chunk-L5U7RGJV.mjs → chunk-KRCRD4AJ.mjs} +11 -14
- package/dist/{chunk-AVHMI47G.mjs → chunk-SBLIHCN2.mjs} +5 -6
- package/dist/{chunk-6I474QXG.mjs → chunk-TLFRGJ5B.mjs} +18 -21
- package/dist/{chunk-MUB7NYWZ.mjs → chunk-WKY3IN52.mjs} +3446 -990
- package/dist/events.js +2825 -2714
- package/dist/events.mjs +2 -4
- package/dist/index.js +1506 -1389
- package/dist/index.mjs +26 -32
- package/dist/modals.js +821 -687
- package/dist/modals.mjs +2 -3
- package/dist/pages.js +2362 -2249
- package/dist/pages.mjs +4 -7
- package/dist/primitives.js +407 -290
- package/dist/primitives.mjs +22 -28
- package/dist/trading.js +564 -451
- package/dist/trading.mjs +2 -4
- package/dist/types/primitives/icon/index.d.mts +2 -1
- package/dist/types/primitives/icon/index.d.ts +2 -1
- package/dist/types/primitives/icon/registry.d.mts +4 -0
- package/dist/types/primitives/icon/registry.d.ts +4 -0
- package/dist/types/primitives/icon/svg/image.d.mts +5 -0
- package/dist/types/primitives/icon/svg/image.d.ts +5 -0
- package/dist/types/primitives/index.d.mts +1 -0
- package/dist/types/primitives/index.d.ts +1 -0
- package/dist/types/primitives/remote-image/index.d.mts +6 -0
- package/dist/types/primitives/remote-image/index.d.ts +6 -0
- package/dist/types/primitives/remote-image/remote-image.constants.d.mts +4 -0
- package/dist/types/primitives/remote-image/remote-image.constants.d.ts +4 -0
- package/dist/types/primitives/remote-image/remote-image.types.d.mts +16 -0
- package/dist/types/primitives/remote-image/remote-image.types.d.ts +16 -0
- package/package.json +1 -1
- package/dist/chunk-EEQPPN7N.mjs +0 -214
- package/dist/chunk-EERL6BZF.mjs +0 -997
- package/dist/chunk-OAJBTVZT.mjs +0 -119
- package/dist/chunk-OVQVAUAI.mjs +0 -420
- package/dist/chunk-ZYUJ7YEJ.mjs +0 -645
package/dist/chunk-OAJBTVZT.mjs
DELETED
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Icon,
|
|
3
|
-
cn
|
|
4
|
-
} from "./chunk-MUB7NYWZ.mjs";
|
|
5
|
-
|
|
6
|
-
// src/primitives/inline-alert/index.tsx
|
|
7
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
-
var toneIconName = {
|
|
9
|
-
error: "error-filled",
|
|
10
|
-
warning: "warning-filled"
|
|
11
|
-
};
|
|
12
|
-
var toneIconClassName = {
|
|
13
|
-
error: "text-agg-error",
|
|
14
|
-
warning: "text-agg-warning"
|
|
15
|
-
};
|
|
16
|
-
var surfaceClassNames = {
|
|
17
|
-
error: "rounded-agg-lg bg-agg-status-error-surface px-3 py-2.5",
|
|
18
|
-
warning: "rounded-agg-lg border border-agg-separator bg-agg-secondary-hover px-3 py-2.5"
|
|
19
|
-
};
|
|
20
|
-
var liveRegionConfig = {
|
|
21
|
-
error: {
|
|
22
|
-
role: "alert",
|
|
23
|
-
ariaLive: "assertive"
|
|
24
|
-
},
|
|
25
|
-
warning: {
|
|
26
|
-
role: "status",
|
|
27
|
-
ariaLive: "polite"
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
var resolveVariant = ({
|
|
31
|
-
tone,
|
|
32
|
-
variant
|
|
33
|
-
}) => {
|
|
34
|
-
if (variant)
|
|
35
|
-
return variant;
|
|
36
|
-
return tone === "error" ? "surface" : "plain";
|
|
37
|
-
};
|
|
38
|
-
var InlineAlert = ({
|
|
39
|
-
tone = "error",
|
|
40
|
-
variant,
|
|
41
|
-
title,
|
|
42
|
-
message,
|
|
43
|
-
actionLabel,
|
|
44
|
-
onAction,
|
|
45
|
-
className,
|
|
46
|
-
"aria-label": ariaLabel
|
|
47
|
-
}) => {
|
|
48
|
-
const resolvedVariant = resolveVariant({
|
|
49
|
-
tone,
|
|
50
|
-
variant
|
|
51
|
-
});
|
|
52
|
-
const hasAction = !!actionLabel && !!onAction;
|
|
53
|
-
const { ariaLive, role } = liveRegionConfig[tone];
|
|
54
|
-
return /* @__PURE__ */ jsxs(
|
|
55
|
-
"div",
|
|
56
|
-
{
|
|
57
|
-
className: cn(
|
|
58
|
-
"flex w-full gap-3",
|
|
59
|
-
resolvedVariant === "plain" ? "items-center justify-center" : "items-start",
|
|
60
|
-
resolvedVariant === "surface" ? surfaceClassNames[tone] : null,
|
|
61
|
-
className
|
|
62
|
-
),
|
|
63
|
-
role,
|
|
64
|
-
"aria-live": ariaLive,
|
|
65
|
-
"aria-label": ariaLabel,
|
|
66
|
-
children: [
|
|
67
|
-
/* @__PURE__ */ jsx(
|
|
68
|
-
Icon,
|
|
69
|
-
{
|
|
70
|
-
name: toneIconName[tone],
|
|
71
|
-
className: cn("h-4 w-4 shrink-0", toneIconClassName[tone]),
|
|
72
|
-
"aria-hidden": "true"
|
|
73
|
-
}
|
|
74
|
-
),
|
|
75
|
-
/* @__PURE__ */ jsx(
|
|
76
|
-
"div",
|
|
77
|
-
{
|
|
78
|
-
className: cn(
|
|
79
|
-
"min-w-0",
|
|
80
|
-
resolvedVariant === "plain" && !hasAction ? "flex-none text-center" : "flex-1"
|
|
81
|
-
),
|
|
82
|
-
children: /* @__PURE__ */ jsxs(
|
|
83
|
-
"div",
|
|
84
|
-
{
|
|
85
|
-
className: cn(
|
|
86
|
-
"flex flex-col",
|
|
87
|
-
title ? "gap-1" : null,
|
|
88
|
-
resolvedVariant === "plain" && !hasAction ? "items-center" : null
|
|
89
|
-
),
|
|
90
|
-
children: [
|
|
91
|
-
title ? /* @__PURE__ */ jsx("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: title }) : null,
|
|
92
|
-
/* @__PURE__ */ jsx("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: message })
|
|
93
|
-
]
|
|
94
|
-
}
|
|
95
|
-
)
|
|
96
|
-
}
|
|
97
|
-
),
|
|
98
|
-
hasAction ? /* @__PURE__ */ jsx(
|
|
99
|
-
"button",
|
|
100
|
-
{
|
|
101
|
-
type: "button",
|
|
102
|
-
className: cn(
|
|
103
|
-
"shrink-0 text-agg-sm font-agg-bold leading-agg-5 text-agg-primary",
|
|
104
|
-
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary-hover focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary"
|
|
105
|
-
),
|
|
106
|
-
"aria-label": actionLabel,
|
|
107
|
-
onClick: onAction,
|
|
108
|
-
children: actionLabel
|
|
109
|
-
}
|
|
110
|
-
) : null
|
|
111
|
-
]
|
|
112
|
-
}
|
|
113
|
-
);
|
|
114
|
-
};
|
|
115
|
-
InlineAlert.displayName = "InlineAlert";
|
|
116
|
-
|
|
117
|
-
export {
|
|
118
|
-
InlineAlert
|
|
119
|
-
};
|
package/dist/chunk-OVQVAUAI.mjs
DELETED
|
@@ -1,420 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
SearchEmptyIcon,
|
|
3
|
-
Typography
|
|
4
|
-
} from "./chunk-ZYUJ7YEJ.mjs";
|
|
5
|
-
import {
|
|
6
|
-
Icon,
|
|
7
|
-
VenueLogo,
|
|
8
|
-
__spreadProps,
|
|
9
|
-
__spreadValues,
|
|
10
|
-
cn,
|
|
11
|
-
getMotionClassName,
|
|
12
|
-
iconSizeClasses
|
|
13
|
-
} from "./chunk-MUB7NYWZ.mjs";
|
|
14
|
-
|
|
15
|
-
// src/primitives/hello-world.tsx
|
|
16
|
-
import { useHello } from "@agg-market/hooks";
|
|
17
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
18
|
-
function HelloWorld() {
|
|
19
|
-
const { data, error, isLoading } = useHello();
|
|
20
|
-
if (isLoading) {
|
|
21
|
-
return /* @__PURE__ */ jsx(Typography, { variant: "body", children: "Loading..." });
|
|
22
|
-
}
|
|
23
|
-
if (error) {
|
|
24
|
-
return /* @__PURE__ */ jsxs(Typography, { variant: "body", children: [
|
|
25
|
-
"Error: ",
|
|
26
|
-
error.message
|
|
27
|
-
] });
|
|
28
|
-
}
|
|
29
|
-
return /* @__PURE__ */ jsx(Typography, { variant: "body", children: data == null ? void 0 : data.message });
|
|
30
|
-
}
|
|
31
|
-
HelloWorld.displayName = "HelloWorld";
|
|
32
|
-
|
|
33
|
-
// src/primitives/loading-icon/index.tsx
|
|
34
|
-
import { useLabels, useSdkUiConfig } from "@agg-market/hooks";
|
|
35
|
-
import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
36
|
-
var LoadingIcon = ({
|
|
37
|
-
size = "medium",
|
|
38
|
-
className,
|
|
39
|
-
ariaLabel
|
|
40
|
-
}) => {
|
|
41
|
-
const labels = useLabels();
|
|
42
|
-
const { enableAnimations } = useSdkUiConfig();
|
|
43
|
-
return /* @__PURE__ */ jsx2(
|
|
44
|
-
"span",
|
|
45
|
-
{
|
|
46
|
-
role: "status",
|
|
47
|
-
"aria-label": ariaLabel != null ? ariaLabel : labels.common.loading,
|
|
48
|
-
className: cn(
|
|
49
|
-
"group/agg-loading-icon",
|
|
50
|
-
"inline-grid place-items-center text-agg-primary will-change-transform",
|
|
51
|
-
className
|
|
52
|
-
),
|
|
53
|
-
children: /* @__PURE__ */ jsx2("span", { className: "inline-grid place-items-center", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 44 44", className: cn("block", iconSizeClasses[size]), children: /* @__PURE__ */ jsxs2("g", { children: [
|
|
54
|
-
enableAnimations ? /* @__PURE__ */ jsx2(
|
|
55
|
-
"animateTransform",
|
|
56
|
-
{
|
|
57
|
-
attributeName: "transform",
|
|
58
|
-
attributeType: "XML",
|
|
59
|
-
type: "rotate",
|
|
60
|
-
from: "0 22 22",
|
|
61
|
-
to: "360 22 22",
|
|
62
|
-
dur: "1.4s",
|
|
63
|
-
repeatCount: "indefinite"
|
|
64
|
-
}
|
|
65
|
-
) : null,
|
|
66
|
-
/* @__PURE__ */ jsx2(
|
|
67
|
-
"circle",
|
|
68
|
-
{
|
|
69
|
-
cx: "22",
|
|
70
|
-
cy: "22",
|
|
71
|
-
r: "16",
|
|
72
|
-
fill: "none",
|
|
73
|
-
stroke: "currentColor",
|
|
74
|
-
strokeWidth: "6",
|
|
75
|
-
strokeLinecap: "round",
|
|
76
|
-
strokeDasharray: "60 100",
|
|
77
|
-
strokeDashoffset: "0",
|
|
78
|
-
children: enableAnimations ? /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
79
|
-
/* @__PURE__ */ jsx2(
|
|
80
|
-
"animate",
|
|
81
|
-
{
|
|
82
|
-
attributeName: "stroke-dasharray",
|
|
83
|
-
values: "1 100;60 100;1 100",
|
|
84
|
-
dur: "1.2s",
|
|
85
|
-
repeatCount: "indefinite"
|
|
86
|
-
}
|
|
87
|
-
),
|
|
88
|
-
/* @__PURE__ */ jsx2(
|
|
89
|
-
"animate",
|
|
90
|
-
{
|
|
91
|
-
attributeName: "stroke-dashoffset",
|
|
92
|
-
values: "0;-25;-100",
|
|
93
|
-
dur: "1.2s",
|
|
94
|
-
repeatCount: "indefinite"
|
|
95
|
-
}
|
|
96
|
-
)
|
|
97
|
-
] }) : null
|
|
98
|
-
}
|
|
99
|
-
)
|
|
100
|
-
] }) }) })
|
|
101
|
-
}
|
|
102
|
-
);
|
|
103
|
-
};
|
|
104
|
-
LoadingIcon.displayName = "LoadingIcon";
|
|
105
|
-
|
|
106
|
-
// src/primitives/number-value.tsx
|
|
107
|
-
import { useMemo } from "react";
|
|
108
|
-
import { useSdkUiConfig as useSdkUiConfig2 } from "@agg-market/hooks";
|
|
109
|
-
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
110
|
-
var NumberValue = ({
|
|
111
|
-
value,
|
|
112
|
-
format = "number",
|
|
113
|
-
fallback = "\u2014",
|
|
114
|
-
className,
|
|
115
|
-
ariaLabel
|
|
116
|
-
}) => {
|
|
117
|
-
const config = useSdkUiConfig2();
|
|
118
|
-
const formatted = useMemo(() => {
|
|
119
|
-
if (value == null)
|
|
120
|
-
return fallback;
|
|
121
|
-
if (format === "date") {
|
|
122
|
-
if (value instanceof Date)
|
|
123
|
-
return config.formatDate(value);
|
|
124
|
-
return fallback;
|
|
125
|
-
}
|
|
126
|
-
if (typeof value !== "number")
|
|
127
|
-
return fallback;
|
|
128
|
-
if (format === "percent")
|
|
129
|
-
return config.formatPercent(value);
|
|
130
|
-
if (format === "currency")
|
|
131
|
-
return config.formatCurrency(value);
|
|
132
|
-
if (format === "compactCurrency") {
|
|
133
|
-
return config.formatCompactCurrency(value);
|
|
134
|
-
}
|
|
135
|
-
return config.formatNumber(value);
|
|
136
|
-
}, [config, fallback, format, value]);
|
|
137
|
-
return /* @__PURE__ */ jsx3("span", { className: cn("font-agg-sans", className), "aria-label": ariaLabel, children: formatted });
|
|
138
|
-
};
|
|
139
|
-
NumberValue.displayName = "NumberValue";
|
|
140
|
-
|
|
141
|
-
// src/primitives/search/index.tsx
|
|
142
|
-
import { useMemo as useMemo2 } from "react";
|
|
143
|
-
import { useLabels as useLabels2, useSdkUiConfig as useSdkUiConfig3 } from "@agg-market/hooks";
|
|
144
|
-
|
|
145
|
-
// src/primitives/search/search.types.ts
|
|
146
|
-
import { z } from "zod";
|
|
147
|
-
var searchResultVenues = ["kalshi", "polymarket", "opinion", "probable"];
|
|
148
|
-
var isSearchResultVenue = (value) => {
|
|
149
|
-
if (typeof value !== "string")
|
|
150
|
-
return false;
|
|
151
|
-
return searchResultVenues.includes(value);
|
|
152
|
-
};
|
|
153
|
-
var searchResultVenueSchema = z.custom(
|
|
154
|
-
(value) => isSearchResultVenue(value),
|
|
155
|
-
"Invalid venue logo name"
|
|
156
|
-
);
|
|
157
|
-
var searchResultItemSchema = z.object({
|
|
158
|
-
id: z.string().min(1),
|
|
159
|
-
title: z.string().min(1),
|
|
160
|
-
thumbnailSrc: z.string().min(1),
|
|
161
|
-
thumbnailAlt: z.string().optional(),
|
|
162
|
-
venue: searchResultVenueSchema,
|
|
163
|
-
valueLabel: z.string().min(1),
|
|
164
|
-
contextLabel: z.string().min(1)
|
|
165
|
-
});
|
|
166
|
-
var searchResultItemsSchema = z.array(searchResultItemSchema);
|
|
167
|
-
|
|
168
|
-
// src/primitives/search/index.tsx
|
|
169
|
-
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
170
|
-
var SearchResultRow = ({
|
|
171
|
-
item,
|
|
172
|
-
resultAria,
|
|
173
|
-
onSelect,
|
|
174
|
-
classNames
|
|
175
|
-
}) => {
|
|
176
|
-
var _a;
|
|
177
|
-
const handleResultClick = () => {
|
|
178
|
-
onSelect == null ? void 0 : onSelect(item);
|
|
179
|
-
};
|
|
180
|
-
return /* @__PURE__ */ jsxs3(
|
|
181
|
-
"button",
|
|
182
|
-
{
|
|
183
|
-
type: "button",
|
|
184
|
-
role: "option",
|
|
185
|
-
"aria-selected": "false",
|
|
186
|
-
className: cn(
|
|
187
|
-
"group/agg-search-result",
|
|
188
|
-
"group flex w-full items-center gap-6 px-5 py-3 text-left",
|
|
189
|
-
"focus-visible:outline-none focus-visible:bg-agg-secondary-hover",
|
|
190
|
-
"hover:bg-agg-secondary-hover",
|
|
191
|
-
classNames == null ? void 0 : classNames.resultButton
|
|
192
|
-
),
|
|
193
|
-
onClick: handleResultClick,
|
|
194
|
-
"aria-label": resultAria(item.title),
|
|
195
|
-
children: [
|
|
196
|
-
/* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
|
|
197
|
-
/* @__PURE__ */ jsx4(
|
|
198
|
-
"img",
|
|
199
|
-
{
|
|
200
|
-
src: item.thumbnailSrc,
|
|
201
|
-
alt: (_a = item.thumbnailAlt) != null ? _a : "",
|
|
202
|
-
className: cn(
|
|
203
|
-
"h-10 w-10 shrink-0 rounded-[8px] object-cover",
|
|
204
|
-
classNames == null ? void 0 : classNames.resultThumbnail
|
|
205
|
-
)
|
|
206
|
-
}
|
|
207
|
-
),
|
|
208
|
-
/* @__PURE__ */ jsx4(
|
|
209
|
-
"p",
|
|
210
|
-
{
|
|
211
|
-
className: cn(
|
|
212
|
-
"min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-agg-sans text-agg-base leading-agg-6 font-agg-normal text-agg-foreground",
|
|
213
|
-
classNames == null ? void 0 : classNames.resultTitle
|
|
214
|
-
),
|
|
215
|
-
children: item.title
|
|
216
|
-
}
|
|
217
|
-
)
|
|
218
|
-
] }),
|
|
219
|
-
/* @__PURE__ */ jsxs3("div", { className: cn("flex w-[200px] shrink-0 items-center gap-2", classNames == null ? void 0 : classNames.resultMeta), children: [
|
|
220
|
-
/* @__PURE__ */ jsx4(VenueLogo, { venue: item.venue, size: "small" }),
|
|
221
|
-
/* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [
|
|
222
|
-
/* @__PURE__ */ jsx4(
|
|
223
|
-
"p",
|
|
224
|
-
{
|
|
225
|
-
className: cn(
|
|
226
|
-
"agg-type-body-large-strong shrink-0 whitespace-nowrap text-agg-foreground",
|
|
227
|
-
classNames == null ? void 0 : classNames.resultValue
|
|
228
|
-
),
|
|
229
|
-
children: item.valueLabel
|
|
230
|
-
}
|
|
231
|
-
),
|
|
232
|
-
/* @__PURE__ */ jsx4(
|
|
233
|
-
"p",
|
|
234
|
-
{
|
|
235
|
-
className: cn(
|
|
236
|
-
"min-w-0 overflow-hidden text-ellipsis whitespace-nowrap font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-foreground",
|
|
237
|
-
classNames == null ? void 0 : classNames.resultContext
|
|
238
|
-
),
|
|
239
|
-
children: item.contextLabel
|
|
240
|
-
}
|
|
241
|
-
)
|
|
242
|
-
] })
|
|
243
|
-
] }),
|
|
244
|
-
/* @__PURE__ */ jsx4(
|
|
245
|
-
Icon,
|
|
246
|
-
{
|
|
247
|
-
name: "chevron-right",
|
|
248
|
-
size: "medium",
|
|
249
|
-
className: cn("h-5 w-5 shrink-0 text-agg-muted-foreground", classNames == null ? void 0 : classNames.resultChevron)
|
|
250
|
-
}
|
|
251
|
-
)
|
|
252
|
-
]
|
|
253
|
-
}
|
|
254
|
-
);
|
|
255
|
-
};
|
|
256
|
-
var getValidatedResults = (results) => {
|
|
257
|
-
if (!(results == null ? void 0 : results.length))
|
|
258
|
-
return [];
|
|
259
|
-
const parsedResults = searchResultItemsSchema.safeParse(results);
|
|
260
|
-
if (!parsedResults.success)
|
|
261
|
-
return [];
|
|
262
|
-
return parsedResults.data;
|
|
263
|
-
};
|
|
264
|
-
var Search = ({
|
|
265
|
-
value,
|
|
266
|
-
onValueChange,
|
|
267
|
-
results,
|
|
268
|
-
onSelect,
|
|
269
|
-
classNames,
|
|
270
|
-
inputProps
|
|
271
|
-
}) => {
|
|
272
|
-
const labels = useLabels2();
|
|
273
|
-
const { enableAnimations } = useSdkUiConfig3();
|
|
274
|
-
const validatedResults = useMemo2(() => {
|
|
275
|
-
return getValidatedResults(results);
|
|
276
|
-
}, [results]);
|
|
277
|
-
const hasSearchValue = value.trim().length > 0;
|
|
278
|
-
const resolvedIsActive = hasSearchValue;
|
|
279
|
-
const shouldRenderDropdown = hasSearchValue;
|
|
280
|
-
const shouldRenderNoResults = shouldRenderDropdown && !validatedResults.length;
|
|
281
|
-
const shouldRenderResults = shouldRenderDropdown && !!validatedResults.length;
|
|
282
|
-
const handleInputChange = (event) => {
|
|
283
|
-
onValueChange(event.target.value);
|
|
284
|
-
};
|
|
285
|
-
return /* @__PURE__ */ jsxs3("div", { className: cn("group/agg-search", "flex w-full flex-col gap-1", classNames == null ? void 0 : classNames.root), children: [
|
|
286
|
-
/* @__PURE__ */ jsx4("label", { className: "w-full", children: /* @__PURE__ */ jsxs3(
|
|
287
|
-
"div",
|
|
288
|
-
{
|
|
289
|
-
className: cn(
|
|
290
|
-
"flex h-10 w-full items-center gap-2 rounded-[4px] bg-agg-secondary px-3",
|
|
291
|
-
resolvedIsActive ? "border-2 border-agg-primary" : "border border-agg-separator",
|
|
292
|
-
"focus-within:border-2 focus-within:border-agg-primary",
|
|
293
|
-
getMotionClassName(
|
|
294
|
-
enableAnimations,
|
|
295
|
-
"transition-[border-color,box-shadow] duration-200 ease-in-out"
|
|
296
|
-
),
|
|
297
|
-
classNames == null ? void 0 : classNames.inputContainer
|
|
298
|
-
),
|
|
299
|
-
children: [
|
|
300
|
-
/* @__PURE__ */ jsx4(
|
|
301
|
-
Icon,
|
|
302
|
-
{
|
|
303
|
-
name: "search",
|
|
304
|
-
size: "small",
|
|
305
|
-
className: cn("text-agg-muted-foreground", classNames == null ? void 0 : classNames.searchIcon)
|
|
306
|
-
}
|
|
307
|
-
),
|
|
308
|
-
/* @__PURE__ */ jsx4(
|
|
309
|
-
"input",
|
|
310
|
-
__spreadProps(__spreadValues({}, inputProps), {
|
|
311
|
-
type: "text",
|
|
312
|
-
value,
|
|
313
|
-
onChange: handleInputChange,
|
|
314
|
-
placeholder: labels.search.placeholder,
|
|
315
|
-
"aria-label": labels.search.inputAria,
|
|
316
|
-
className: cn(
|
|
317
|
-
"h-6 w-full min-w-0 border-0 bg-transparent p-0",
|
|
318
|
-
"font-agg-sans text-agg-base leading-agg-6 font-agg-normal text-agg-foreground",
|
|
319
|
-
"placeholder:text-agg-muted-foreground",
|
|
320
|
-
"outline-none focus:outline-none",
|
|
321
|
-
"disabled:cursor-not-allowed disabled:text-agg-muted-foreground",
|
|
322
|
-
classNames == null ? void 0 : classNames.input
|
|
323
|
-
)
|
|
324
|
-
})
|
|
325
|
-
)
|
|
326
|
-
]
|
|
327
|
-
}
|
|
328
|
-
) }),
|
|
329
|
-
shouldRenderResults ? /* @__PURE__ */ jsx4(
|
|
330
|
-
"div",
|
|
331
|
-
{
|
|
332
|
-
className: cn(
|
|
333
|
-
"w-full overflow-hidden rounded-agg-xl border border-agg-separator bg-agg-secondary py-2 shadow-[0px_8px_16px_0px_rgba(0,0,0,0.1)]",
|
|
334
|
-
classNames == null ? void 0 : classNames.dropdown
|
|
335
|
-
),
|
|
336
|
-
children: /* @__PURE__ */ jsx4(
|
|
337
|
-
"ul",
|
|
338
|
-
{
|
|
339
|
-
className: cn("m-0 flex list-none flex-col p-0", classNames == null ? void 0 : classNames.resultsList),
|
|
340
|
-
role: "listbox",
|
|
341
|
-
"aria-label": labels.search.resultsAria,
|
|
342
|
-
children: validatedResults.map((item, index) => /* @__PURE__ */ jsx4(
|
|
343
|
-
"li",
|
|
344
|
-
{
|
|
345
|
-
role: "presentation",
|
|
346
|
-
className: cn(index > 0 && "border-t border-agg-separator", classNames == null ? void 0 : classNames.resultItem),
|
|
347
|
-
children: /* @__PURE__ */ jsx4(
|
|
348
|
-
SearchResultRow,
|
|
349
|
-
{
|
|
350
|
-
item,
|
|
351
|
-
resultAria: labels.search.resultAria,
|
|
352
|
-
onSelect,
|
|
353
|
-
classNames
|
|
354
|
-
}
|
|
355
|
-
)
|
|
356
|
-
},
|
|
357
|
-
item.id
|
|
358
|
-
))
|
|
359
|
-
}
|
|
360
|
-
)
|
|
361
|
-
}
|
|
362
|
-
) : null,
|
|
363
|
-
shouldRenderNoResults ? /* @__PURE__ */ jsx4(
|
|
364
|
-
"div",
|
|
365
|
-
{
|
|
366
|
-
className: cn(
|
|
367
|
-
"w-full overflow-hidden rounded-agg-xl border border-agg-separator bg-agg-secondary py-10 shadow-[0px_8px_16px_0px_rgba(0,0,0,0.1)]",
|
|
368
|
-
classNames == null ? void 0 : classNames.emptyState
|
|
369
|
-
),
|
|
370
|
-
children: /* @__PURE__ */ jsxs3(
|
|
371
|
-
"div",
|
|
372
|
-
{
|
|
373
|
-
className: cn("flex flex-col items-center gap-5", classNames == null ? void 0 : classNames.emptyStateContent),
|
|
374
|
-
role: "status",
|
|
375
|
-
"aria-live": "polite",
|
|
376
|
-
children: [
|
|
377
|
-
/* @__PURE__ */ jsx4(
|
|
378
|
-
SearchEmptyIcon,
|
|
379
|
-
{
|
|
380
|
-
className: cn("h-10 w-10 text-agg-muted-foreground", classNames == null ? void 0 : classNames.emptyStateIcon),
|
|
381
|
-
"aria-hidden": true
|
|
382
|
-
}
|
|
383
|
-
),
|
|
384
|
-
/* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center gap-1 text-center", children: [
|
|
385
|
-
/* @__PURE__ */ jsx4(
|
|
386
|
-
"p",
|
|
387
|
-
{
|
|
388
|
-
className: cn(
|
|
389
|
-
"font-agg-sans text-agg-base leading-agg-6 font-agg-bold text-agg-foreground",
|
|
390
|
-
classNames == null ? void 0 : classNames.emptyStateTitle
|
|
391
|
-
),
|
|
392
|
-
children: labels.search.noResultsTitle
|
|
393
|
-
}
|
|
394
|
-
),
|
|
395
|
-
/* @__PURE__ */ jsx4(
|
|
396
|
-
"p",
|
|
397
|
-
{
|
|
398
|
-
className: cn(
|
|
399
|
-
"font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-foreground",
|
|
400
|
-
classNames == null ? void 0 : classNames.emptyStateDescription
|
|
401
|
-
),
|
|
402
|
-
children: labels.search.noResultsDescription
|
|
403
|
-
}
|
|
404
|
-
)
|
|
405
|
-
] })
|
|
406
|
-
]
|
|
407
|
-
}
|
|
408
|
-
)
|
|
409
|
-
}
|
|
410
|
-
) : null
|
|
411
|
-
] });
|
|
412
|
-
};
|
|
413
|
-
Search.displayName = "Search";
|
|
414
|
-
|
|
415
|
-
export {
|
|
416
|
-
HelloWorld,
|
|
417
|
-
LoadingIcon,
|
|
418
|
-
NumberValue,
|
|
419
|
-
Search
|
|
420
|
-
};
|