@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.
Files changed (37) hide show
  1. package/dist/{chunk-KQKLLL4D.mjs → chunk-JE4MV5RL.mjs} +8 -11
  2. package/dist/{chunk-L5U7RGJV.mjs → chunk-KRCRD4AJ.mjs} +11 -14
  3. package/dist/{chunk-AVHMI47G.mjs → chunk-SBLIHCN2.mjs} +5 -6
  4. package/dist/{chunk-6I474QXG.mjs → chunk-TLFRGJ5B.mjs} +18 -21
  5. package/dist/{chunk-MUB7NYWZ.mjs → chunk-WKY3IN52.mjs} +3446 -990
  6. package/dist/events.js +2825 -2714
  7. package/dist/events.mjs +2 -4
  8. package/dist/index.js +1506 -1389
  9. package/dist/index.mjs +26 -32
  10. package/dist/modals.js +821 -687
  11. package/dist/modals.mjs +2 -3
  12. package/dist/pages.js +2362 -2249
  13. package/dist/pages.mjs +4 -7
  14. package/dist/primitives.js +407 -290
  15. package/dist/primitives.mjs +22 -28
  16. package/dist/trading.js +564 -451
  17. package/dist/trading.mjs +2 -4
  18. package/dist/types/primitives/icon/index.d.mts +2 -1
  19. package/dist/types/primitives/icon/index.d.ts +2 -1
  20. package/dist/types/primitives/icon/registry.d.mts +4 -0
  21. package/dist/types/primitives/icon/registry.d.ts +4 -0
  22. package/dist/types/primitives/icon/svg/image.d.mts +5 -0
  23. package/dist/types/primitives/icon/svg/image.d.ts +5 -0
  24. package/dist/types/primitives/index.d.mts +1 -0
  25. package/dist/types/primitives/index.d.ts +1 -0
  26. package/dist/types/primitives/remote-image/index.d.mts +6 -0
  27. package/dist/types/primitives/remote-image/index.d.ts +6 -0
  28. package/dist/types/primitives/remote-image/remote-image.constants.d.mts +4 -0
  29. package/dist/types/primitives/remote-image/remote-image.constants.d.ts +4 -0
  30. package/dist/types/primitives/remote-image/remote-image.types.d.mts +16 -0
  31. package/dist/types/primitives/remote-image/remote-image.types.d.ts +16 -0
  32. package/package.json +1 -1
  33. package/dist/chunk-EEQPPN7N.mjs +0 -214
  34. package/dist/chunk-EERL6BZF.mjs +0 -997
  35. package/dist/chunk-OAJBTVZT.mjs +0 -119
  36. package/dist/chunk-OVQVAUAI.mjs +0 -420
  37. package/dist/chunk-ZYUJ7YEJ.mjs +0 -645
@@ -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
- };
@@ -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
- };