@luxfi/ui 5.6.0 → 6.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 (125) hide show
  1. package/README.md +109 -0
  2. package/package.json +81 -278
  3. package/dist/accordion.cjs +0 -213
  4. package/dist/accordion.js +0 -186
  5. package/dist/alert.cjs +0 -553
  6. package/dist/alert.js +0 -531
  7. package/dist/avatar.cjs +0 -149
  8. package/dist/avatar.js +0 -125
  9. package/dist/badge.cjs +0 -611
  10. package/dist/badge.js +0 -589
  11. package/dist/button.cjs +0 -689
  12. package/dist/button.js +0 -664
  13. package/dist/checkbox.cjs +0 -265
  14. package/dist/checkbox.js +0 -241
  15. package/dist/close-button.cjs +0 -73
  16. package/dist/close-button.js +0 -51
  17. package/dist/collapsible.cjs +0 -702
  18. package/dist/collapsible.js +0 -679
  19. package/dist/color-mode.cjs +0 -96
  20. package/dist/color-mode.js +0 -72
  21. package/dist/dialog.cjs +0 -279
  22. package/dist/dialog.js +0 -246
  23. package/dist/drawer.cjs +0 -207
  24. package/dist/drawer.js +0 -175
  25. package/dist/empty-state.cjs +0 -93
  26. package/dist/empty-state.js +0 -71
  27. package/dist/field.cjs +0 -183
  28. package/dist/field.js +0 -160
  29. package/dist/heading.cjs +0 -46
  30. package/dist/heading.js +0 -40
  31. package/dist/icon-button.cjs +0 -491
  32. package/dist/icon-button.js +0 -470
  33. package/dist/image.cjs +0 -572
  34. package/dist/image.js +0 -551
  35. package/dist/index.cjs +0 -5779
  36. package/dist/index.js +0 -5619
  37. package/dist/input-group.cjs +0 -155
  38. package/dist/input-group.js +0 -133
  39. package/dist/input.cjs +0 -65
  40. package/dist/input.js +0 -59
  41. package/dist/link.cjs +0 -630
  42. package/dist/link.js +0 -606
  43. package/dist/menu.cjs +0 -305
  44. package/dist/menu.js +0 -269
  45. package/dist/pin-input.cjs +0 -182
  46. package/dist/pin-input.js +0 -160
  47. package/dist/popover.cjs +0 -327
  48. package/dist/popover.js +0 -294
  49. package/dist/progress-circle.cjs +0 -152
  50. package/dist/progress-circle.js +0 -128
  51. package/dist/progress.cjs +0 -117
  52. package/dist/progress.js +0 -94
  53. package/dist/provider.cjs +0 -62
  54. package/dist/provider.js +0 -40
  55. package/dist/radio.cjs +0 -177
  56. package/dist/radio.js +0 -153
  57. package/dist/rating.cjs +0 -80
  58. package/dist/rating.js +0 -58
  59. package/dist/select.cjs +0 -791
  60. package/dist/select.js +0 -757
  61. package/dist/separator.cjs +0 -57
  62. package/dist/separator.js +0 -51
  63. package/dist/skeleton.cjs +0 -370
  64. package/dist/skeleton.js +0 -346
  65. package/dist/slider.cjs +0 -138
  66. package/dist/slider.js +0 -115
  67. package/dist/switch.cjs +0 -163
  68. package/dist/switch.js +0 -140
  69. package/dist/table.cjs +0 -1044
  70. package/dist/table.js +0 -1013
  71. package/dist/tabs.cjs +0 -240
  72. package/dist/tabs.js +0 -213
  73. package/dist/tag.cjs +0 -651
  74. package/dist/tag.js +0 -628
  75. package/dist/textarea.cjs +0 -65
  76. package/dist/textarea.js +0 -59
  77. package/dist/toaster.cjs +0 -99
  78. package/dist/toaster.js +0 -96
  79. package/dist/tooltip.cjs +0 -171
  80. package/dist/tooltip.js +0 -148
  81. package/dist/utils.cjs +0 -11
  82. package/dist/utils.js +0 -9
  83. package/src/accordion.tsx +0 -285
  84. package/src/alert.tsx +0 -221
  85. package/src/avatar.tsx +0 -174
  86. package/src/badge.tsx +0 -158
  87. package/src/button.tsx +0 -411
  88. package/src/checkbox.tsx +0 -307
  89. package/src/close-button.tsx +0 -51
  90. package/src/collapsible.tsx +0 -126
  91. package/src/color-mode.tsx +0 -125
  92. package/src/dialog.tsx +0 -356
  93. package/src/drawer.tsx +0 -186
  94. package/src/empty-state.tsx +0 -97
  95. package/src/field.tsx +0 -202
  96. package/src/heading.tsx +0 -55
  97. package/src/icon-button.tsx +0 -192
  98. package/src/image.tsx +0 -280
  99. package/src/index.ts +0 -192
  100. package/src/input-group.tsx +0 -159
  101. package/src/input.tsx +0 -60
  102. package/src/link.tsx +0 -326
  103. package/src/menu.tsx +0 -471
  104. package/src/pin-input.tsx +0 -187
  105. package/src/popover.tsx +0 -400
  106. package/src/progress-circle.tsx +0 -180
  107. package/src/progress.tsx +0 -109
  108. package/src/provider.tsx +0 -12
  109. package/src/radio.tsx +0 -175
  110. package/src/rating.tsx +0 -79
  111. package/src/select.tsx +0 -696
  112. package/src/separator.tsx +0 -59
  113. package/src/skeleton.tsx +0 -302
  114. package/src/slider.tsx +0 -152
  115. package/src/switch.tsx +0 -158
  116. package/src/table.tsx +0 -621
  117. package/src/tabs.tsx +0 -354
  118. package/src/tag.tsx +0 -159
  119. package/src/textarea.tsx +0 -60
  120. package/src/toaster.tsx +0 -117
  121. package/src/tokens.css +0 -438
  122. package/src/tooltip.tsx +0 -184
  123. package/src/utils/cn.ts +0 -7
  124. package/src/utils.ts +0 -6
  125. package/tokens.css +0 -438
@@ -1,702 +0,0 @@
1
- "use client";
2
- 'use strict';
3
-
4
- var Collapsible = require('@radix-ui/react-collapsible');
5
- var React3 = require('react');
6
- var clsx = require('clsx');
7
- var tailwindMerge = require('tailwind-merge');
8
- var jsxRuntime = require('react/jsx-runtime');
9
-
10
- function _interopNamespace(e) {
11
- if (e && e.__esModule) return e;
12
- var n = Object.create(null);
13
- if (e) {
14
- Object.keys(e).forEach(function (k) {
15
- if (k !== 'default') {
16
- var d = Object.getOwnPropertyDescriptor(e, k);
17
- Object.defineProperty(n, k, d.get ? d : {
18
- enumerable: true,
19
- get: function () { return e[k]; }
20
- });
21
- }
22
- });
23
- }
24
- n.default = e;
25
- return Object.freeze(n);
26
- }
27
-
28
- var Collapsible__namespace = /*#__PURE__*/_interopNamespace(Collapsible);
29
- var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
30
-
31
- // src/collapsible.tsx
32
- function cn(...inputs) {
33
- return tailwindMerge.twMerge(clsx.clsx(inputs));
34
- }
35
- var SPACING_SCALE = 4;
36
- function toStylePx(value) {
37
- if (value === void 0) return void 0;
38
- if (typeof value === "string") return value;
39
- return `${value * SPACING_SCALE}px`;
40
- }
41
- function extractSkeletonStyleProps(props) {
42
- const style = {};
43
- const rest = {};
44
- function resolveDimension(value) {
45
- if (value === void 0 || value === null) return void 0;
46
- if (typeof value === "number") return `${value * SPACING_SCALE}px`;
47
- if (typeof value === "string") return value;
48
- if (typeof value === "object") {
49
- const obj = value;
50
- return obj.base ?? obj.lg ?? obj.xl ?? Object.values(obj)[0];
51
- }
52
- return void 0;
53
- }
54
- for (const [key, value] of Object.entries(props)) {
55
- if (value === void 0) continue;
56
- switch (key) {
57
- case "w": {
58
- const v = resolveDimension(value);
59
- if (v) style.width = v;
60
- break;
61
- }
62
- case "h": {
63
- const v = resolveDimension(value);
64
- if (v) style.height = v;
65
- break;
66
- }
67
- case "minW": {
68
- const v = resolveDimension(value);
69
- if (v) style.minWidth = v;
70
- break;
71
- }
72
- case "maxW": {
73
- const v = resolveDimension(value);
74
- if (v) style.maxWidth = v;
75
- break;
76
- }
77
- case "height":
78
- style.height = value;
79
- break;
80
- case "display":
81
- style.display = value;
82
- break;
83
- case "flexGrow":
84
- style.flexGrow = value;
85
- break;
86
- case "flexShrink":
87
- style.flexShrink = value;
88
- break;
89
- case "flexBasis":
90
- style.flexBasis = value;
91
- break;
92
- case "fontWeight":
93
- style.fontWeight = value;
94
- break;
95
- case "borderRadius":
96
- style.borderRadius = value;
97
- break;
98
- case "alignSelf":
99
- style.alignSelf = value;
100
- break;
101
- case "alignItems":
102
- style.alignItems = value;
103
- break;
104
- case "justifyContent":
105
- style.justifyContent = value;
106
- break;
107
- case "color":
108
- style.color = value;
109
- break;
110
- case "mt":
111
- style.marginTop = toStylePx(value);
112
- break;
113
- case "mb":
114
- style.marginBottom = toStylePx(value);
115
- break;
116
- case "ml":
117
- style.marginLeft = toStylePx(value);
118
- break;
119
- case "mr":
120
- style.marginRight = toStylePx(value);
121
- break;
122
- case "overflow":
123
- style.overflow = value;
124
- break;
125
- case "whiteSpace":
126
- style.whiteSpace = value;
127
- break;
128
- case "textOverflow":
129
- style.textOverflow = value;
130
- break;
131
- case "textTransform":
132
- style.textTransform = value;
133
- break;
134
- case "gap":
135
- style.gap = typeof value === "number" ? `${value * SPACING_SCALE}px` : value;
136
- break;
137
- case "gridTemplateColumns":
138
- style.gridTemplateColumns = value;
139
- break;
140
- case "minWidth":
141
- style.minWidth = value;
142
- break;
143
- case "boxSize": {
144
- const s = typeof value === "number" ? `${value * SPACING_SCALE}px` : value;
145
- style.width = s;
146
- style.height = s;
147
- break;
148
- }
149
- case "py": {
150
- const v = toStylePx(value);
151
- style.paddingTop = v;
152
- style.paddingBottom = v;
153
- break;
154
- }
155
- case "px": {
156
- const v = toStylePx(value);
157
- style.paddingLeft = v;
158
- style.paddingRight = v;
159
- break;
160
- }
161
- case "p": {
162
- const v = toStylePx(value);
163
- style.padding = v;
164
- break;
165
- }
166
- case "hideBelow":
167
- break;
168
- // handled via className
169
- case "textStyle":
170
- break;
171
- // drop textStyle, not directly applicable
172
- case "fontSize":
173
- style.fontSize = value;
174
- break;
175
- case "flexWrap":
176
- style.flexWrap = value;
177
- break;
178
- case "wordBreak":
179
- style.wordBreak = value;
180
- break;
181
- case "lineHeight":
182
- style.lineHeight = value;
183
- break;
184
- case "marginRight":
185
- style.marginRight = value;
186
- break;
187
- case "position":
188
- style.position = value;
189
- break;
190
- case "background":
191
- style.background = value;
192
- break;
193
- default:
194
- rest[key] = value;
195
- break;
196
- }
197
- }
198
- return { style, rest };
199
- }
200
- var Skeleton = React3__namespace.forwardRef(
201
- function Skeleton2(props, ref) {
202
- const {
203
- loading = false,
204
- asChild,
205
- className,
206
- children,
207
- style: styleProp,
208
- // Destructure style-prop shims so they don't leak into DOM
209
- w: _w,
210
- h: _h,
211
- minW: _minW,
212
- maxW: _maxW,
213
- display: _display,
214
- flexGrow: _flexGrow,
215
- flexShrink: _flexShrink,
216
- flexBasis: _flexBasis,
217
- fontWeight: _fontWeight,
218
- textStyle: _textStyle,
219
- borderRadius: _borderRadius,
220
- alignSelf: _alignSelf,
221
- alignItems: _alignItems,
222
- justifyContent: _justifyContent,
223
- color: _color,
224
- mt: _mt,
225
- mb: _mb,
226
- ml: _ml,
227
- mr: _mr,
228
- height: _height,
229
- overflow: _overflow,
230
- whiteSpace: _whiteSpace,
231
- textOverflow: _textOverflow,
232
- textTransform: _textTransform,
233
- gap: _gap,
234
- gridTemplateColumns: _gridTemplateColumns,
235
- minWidth: _minWidth,
236
- boxSize: _boxSize,
237
- py: _py,
238
- px: _px,
239
- p: _p,
240
- hideBelow: _hideBelow,
241
- fontSize: _fontSize,
242
- flexWrap: _flexWrap,
243
- wordBreak: _wordBreak,
244
- lineHeight: _lineHeight,
245
- marginRight: _marginRight,
246
- position: _position,
247
- background: _background,
248
- as: Component = "div",
249
- ...htmlRest
250
- } = props;
251
- const { style: shimStyle } = extractSkeletonStyleProps({
252
- w: _w,
253
- h: _h,
254
- minW: _minW,
255
- maxW: _maxW,
256
- display: _display,
257
- flexGrow: _flexGrow,
258
- flexShrink: _flexShrink,
259
- flexBasis: _flexBasis,
260
- fontWeight: _fontWeight,
261
- textStyle: _textStyle,
262
- borderRadius: _borderRadius,
263
- alignSelf: _alignSelf,
264
- alignItems: _alignItems,
265
- justifyContent: _justifyContent,
266
- color: _color,
267
- mt: _mt,
268
- mb: _mb,
269
- ml: _ml,
270
- mr: _mr,
271
- height: _height,
272
- overflow: _overflow,
273
- whiteSpace: _whiteSpace,
274
- textOverflow: _textOverflow,
275
- textTransform: _textTransform,
276
- gap: _gap,
277
- gridTemplateColumns: _gridTemplateColumns,
278
- minWidth: _minWidth,
279
- boxSize: _boxSize,
280
- py: _py,
281
- px: _px,
282
- p: _p,
283
- hideBelow: _hideBelow,
284
- fontSize: _fontSize,
285
- flexWrap: _flexWrap,
286
- wordBreak: _wordBreak,
287
- lineHeight: _lineHeight,
288
- marginRight: _marginRight,
289
- position: _position,
290
- background: _background
291
- });
292
- const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : void 0;
293
- const HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
294
- const hideBelowClass = _hideBelow ? HIDE_BELOW_MAP[_hideBelow] : void 0;
295
- const finalClassName = hideBelowClass ? cn(className, hideBelowClass) : className;
296
- if (!loading) {
297
- if (asChild && React3__namespace.isValidElement(children)) {
298
- return children;
299
- }
300
- return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: finalClassName, style: mergedStyle, ...htmlRest, children });
301
- }
302
- if (asChild && React3__namespace.isValidElement(children)) {
303
- return /* @__PURE__ */ jsxRuntime.jsx(
304
- Component,
305
- {
306
- ref,
307
- "data-loading": true,
308
- className: cn(
309
- "animate-skeleton-shimmer rounded-sm",
310
- "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
311
- "bg-[length:200%_100%]",
312
- "text-transparent [&_*]:invisible",
313
- finalClassName
314
- ),
315
- style: mergedStyle,
316
- ...htmlRest,
317
- children
318
- }
319
- );
320
- }
321
- return /* @__PURE__ */ jsxRuntime.jsx(
322
- Component,
323
- {
324
- ref,
325
- "data-loading": true,
326
- className: cn(
327
- "animate-skeleton-shimmer rounded-sm",
328
- "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
329
- "bg-[length:200%_100%]",
330
- children ? "text-transparent [&_*]:invisible" : "min-h-5",
331
- finalClassName
332
- ),
333
- style: mergedStyle,
334
- ...htmlRest,
335
- children
336
- }
337
- );
338
- }
339
- );
340
- React3__namespace.forwardRef(
341
- function SkeletonCircle2(props, ref) {
342
- const { size = 40, loading = true, className, ...rest } = props;
343
- const dimension = typeof size === "number" ? `${size}px` : size;
344
- return /* @__PURE__ */ jsxRuntime.jsx(
345
- Skeleton,
346
- {
347
- ref,
348
- loading,
349
- className: cn("rounded-full shrink-0", className),
350
- style: { width: dimension, height: dimension, ...rest.style },
351
- ...rest
352
- }
353
- );
354
- }
355
- );
356
- React3__namespace.forwardRef(
357
- function SkeletonText2(props, ref) {
358
- const { noOfLines = 3, loading = true, className, ...rest } = props;
359
- return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
360
- Skeleton,
361
- {
362
- loading,
363
- className: cn("h-4", index === noOfLines - 1 && "max-w-[80%]")
364
- },
365
- index
366
- )) });
367
- }
368
- );
369
- var ArrowIcon = ({ className, style }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, style, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 3h6v6M17 3L7 13M14 11v6H3V6h6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
370
- function stripUtmParams(url) {
371
- try {
372
- const urlObj = new URL(url);
373
- for (const param of ["utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content"]) {
374
- urlObj.searchParams.delete(param);
375
- }
376
- return urlObj.toString();
377
- } catch {
378
- return url;
379
- }
380
- }
381
- var VARIANT_CLASSES = {
382
- primary: cn(
383
- "text-[var(--color-link-primary)]",
384
- "hover:no-underline hover:text-[var(--color-link-primary-hover)]",
385
- "data-[hover]:no-underline data-[hover]:text-[var(--color-link-primary-hover)]"
386
- ),
387
- secondary: cn(
388
- "text-[var(--color-link-secondary)]",
389
- "hover:no-underline hover:text-[var(--color-hover)]",
390
- "data-[hover]:no-underline data-[hover]:text-[var(--color-hover)]"
391
- ),
392
- subtle: cn(
393
- "text-[var(--color-link-subtle)]",
394
- "hover:text-[var(--color-link-subtle-hover)] hover:underline hover:decoration-[var(--color-link-subtle-hover)]",
395
- "data-[hover]:text-[var(--color-link-subtle-hover)] data-[hover]:underline data-[hover]:decoration-[var(--color-link-subtle-hover)]"
396
- ),
397
- underlaid: cn(
398
- "text-[var(--color-link-primary)] bg-[var(--color-link-underlaid-bg)]",
399
- "px-2 py-1.5 rounded-md text-sm",
400
- "hover:text-[var(--color-link-primary-hover)] hover:no-underline",
401
- "data-[hover]:text-[var(--color-link-primary-hover)] data-[hover]:no-underline"
402
- ),
403
- menu: cn(
404
- "text-[var(--color-link-menu)]",
405
- "hover:text-[var(--color-hover)] hover:no-underline",
406
- "data-[hover]:text-[var(--color-hover)] data-[hover]:no-underline"
407
- ),
408
- navigation: cn(
409
- "text-[var(--color-link-nav-fg)] bg-transparent",
410
- "hover:text-[var(--color-link-nav-fg-hover)] hover:no-underline",
411
- "data-[hover]:text-[var(--color-link-nav-fg-hover)] data-[hover]:no-underline",
412
- "data-[selected]:text-[var(--color-link-nav-fg-selected)] data-[selected]:bg-[var(--color-link-nav-bg-selected)]",
413
- "data-[active]:text-[var(--color-link-nav-fg-active)]"
414
- ),
415
- plain: cn(
416
- "text-inherit",
417
- "hover:no-underline",
418
- "data-[hover]:no-underline"
419
- )
420
- };
421
- var BASE_CLASSES = "inline-flex items-center gap-0 cursor-pointer data-[disabled]:cursor-not-allowed";
422
- var LinkExternalIcon = ({ color }) => /* @__PURE__ */ jsxRuntime.jsx(
423
- ArrowIcon,
424
- {
425
- className: cn(
426
- "size-3 align-middle shrink-0",
427
- "group-hover:text-inherit"
428
- ),
429
- style: color ? { color } : { color: "var(--color-icon-secondary)" },
430
- "aria-hidden": "true"
431
- }
432
- );
433
- var SPACING = 4;
434
- function resolveSpacing(v) {
435
- if (v === void 0) return void 0;
436
- if (typeof v === "number") return `${v * SPACING}px`;
437
- if (typeof v === "string") return v;
438
- if (typeof v === "object" && v !== null) {
439
- const base = v.base;
440
- if (base !== void 0) return typeof base === "number" ? `${base * SPACING}px` : base;
441
- const lg = v.lg;
442
- if (lg !== void 0) return typeof lg === "number" ? `${lg * SPACING}px` : lg;
443
- }
444
- return void 0;
445
- }
446
- var Link = React3__namespace.default.forwardRef(
447
- function Link2(props, ref) {
448
- const {
449
- external,
450
- loading,
451
- href,
452
- children,
453
- disabled,
454
- noIcon,
455
- iconColor,
456
- variant = "primary",
457
- className,
458
- asChild: _asChild,
459
- // Strip Next.js-specific props (accepted for compat, not used)
460
- shallow: _shallow,
461
- prefetch: _prefetch,
462
- scroll: _scroll,
463
- // Strip Chakra style props
464
- fontWeight: _fontWeight,
465
- whiteSpace: _whiteSpace,
466
- wordBreak: _wordBreak,
467
- textStyle: _textStyle,
468
- ml: _ml,
469
- mr: _mr,
470
- display: _display,
471
- alignItems: _alignItems,
472
- flexShrink: _flexShrink,
473
- minW: _minW,
474
- justifyContent: _justifyContent,
475
- position: _position,
476
- ...rest
477
- } = props;
478
- const shimStyle = {};
479
- if (_fontWeight !== void 0) shimStyle.fontWeight = _fontWeight;
480
- if (_whiteSpace) shimStyle.whiteSpace = _whiteSpace;
481
- if (_wordBreak) shimStyle.wordBreak = _wordBreak;
482
- if (_ml !== void 0) shimStyle.marginLeft = resolveSpacing(_ml);
483
- if (_mr !== void 0) shimStyle.marginRight = resolveSpacing(_mr);
484
- if (_display) shimStyle.display = _display;
485
- if (_alignItems) shimStyle.alignItems = _alignItems;
486
- if (_flexShrink !== void 0) shimStyle.flexShrink = _flexShrink;
487
- if (_minW !== void 0) shimStyle.minWidth = typeof _minW === "number" ? `${_minW * SPACING}px` : _minW;
488
- if (_justifyContent) shimStyle.justifyContent = _justifyContent;
489
- if (_position) shimStyle.position = _position;
490
- const linkClasses = cn(BASE_CLASSES, VARIANT_CLASSES[variant], className);
491
- const linkStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
492
- if (external) {
493
- const processedHref = typeof href === "string" ? stripUtmParams(href) : href;
494
- return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { loading, ref, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
495
- "a",
496
- {
497
- href: processedHref,
498
- className: cn("group", linkClasses),
499
- style: linkStyle,
500
- target: "_blank",
501
- rel: "noopener noreferrer",
502
- ...disabled ? { "data-disabled": true } : {},
503
- ...rest,
504
- children: [
505
- children,
506
- !noIcon && /* @__PURE__ */ jsxRuntime.jsx(LinkExternalIcon, { color: iconColor })
507
- ]
508
- }
509
- ) });
510
- }
511
- if (href) {
512
- return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { loading, ref, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
513
- "a",
514
- {
515
- href,
516
- className: linkClasses,
517
- style: linkStyle,
518
- ...disabled ? { "data-disabled": true } : {},
519
- ...rest,
520
- children
521
- }
522
- ) });
523
- }
524
- return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { loading, ref, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
525
- "span",
526
- {
527
- className: linkClasses,
528
- ...disabled ? { "data-disabled": true } : {},
529
- ...rest,
530
- children
531
- }
532
- ) });
533
- }
534
- );
535
- React3__namespace.default.forwardRef(
536
- function LinkBox2(props, ref) {
537
- const { className, ...rest } = props;
538
- return /* @__PURE__ */ jsxRuntime.jsx(
539
- "div",
540
- {
541
- ref,
542
- className: cn("relative", className),
543
- ...rest
544
- }
545
- );
546
- }
547
- );
548
- React3__namespace.default.forwardRef(
549
- function LinkOverlay2(props, ref) {
550
- const {
551
- children,
552
- external,
553
- loading,
554
- href,
555
- noIcon,
556
- iconColor,
557
- variant = "primary",
558
- className,
559
- disabled,
560
- asChild: _asChild2,
561
- shallow: _shallow2,
562
- prefetch: _prefetch2,
563
- scroll: _scroll2,
564
- fontWeight: _fw2,
565
- whiteSpace: _ws2,
566
- wordBreak: _wb2,
567
- textStyle: _ts2,
568
- ml: _ml2,
569
- mr: _mr2,
570
- display: _d2,
571
- alignItems: _ai2,
572
- flexShrink: _fs2,
573
- minW: _mw2,
574
- justifyContent: _jc2,
575
- position: _p2,
576
- ...rest
577
- } = props;
578
- const overlayClasses = cn(
579
- BASE_CLASSES,
580
- VARIANT_CLASSES[variant],
581
- // Static positioning with a ::before pseudo-element that covers the LinkBox
582
- "static",
583
- 'before:absolute before:inset-0 before:z-0 before:content-[""]',
584
- className
585
- );
586
- if (external) {
587
- const processedHref = typeof href === "string" ? stripUtmParams(href) : href;
588
- return /* @__PURE__ */ jsxRuntime.jsx(
589
- "a",
590
- {
591
- ref,
592
- href: loading ? void 0 : processedHref,
593
- className: overlayClasses,
594
- target: "_blank",
595
- rel: "noopener noreferrer",
596
- ...rest,
597
- children: (children || !noIcon && href) && /* @__PURE__ */ jsxRuntime.jsxs(Skeleton, { display: "inline-flex", alignItems: "center", loading, maxW: "100%", h: "100%", children: [
598
- children,
599
- !noIcon && href && /* @__PURE__ */ jsxRuntime.jsx(LinkExternalIcon, { color: iconColor })
600
- ] })
601
- }
602
- );
603
- }
604
- const content = children ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { display: "inline-flex", alignItems: "center", loading, maxW: "100%", h: "100%", children }) : null;
605
- if (href) {
606
- return /* @__PURE__ */ jsxRuntime.jsx(
607
- "a",
608
- {
609
- ref,
610
- href,
611
- className: overlayClasses,
612
- ...rest,
613
- children: content
614
- }
615
- );
616
- }
617
- return /* @__PURE__ */ jsxRuntime.jsx(
618
- "span",
619
- {
620
- ref,
621
- className: overlayClasses,
622
- ...rest,
623
- children: content
624
- }
625
- );
626
- }
627
- );
628
- function useUpdateEffect(effect, deps) {
629
- const isFirstMount = React3__namespace.default.useRef(true);
630
- React3__namespace.default.useEffect(() => {
631
- if (isFirstMount.current) {
632
- isFirstMount.current = false;
633
- return;
634
- }
635
- return effect();
636
- }, deps);
637
- }
638
- function scrollToElement(id) {
639
- const el = document.getElementById(id);
640
- if (el) {
641
- el.scrollIntoView({ behavior: "smooth", block: "start" });
642
- }
643
- }
644
- var CUT_ID = "CollapsibleDetails";
645
- var CollapsibleDetails = (props) => {
646
- const { children, id = CUT_ID, onClick, isExpanded: isExpandedProp = false, text: textProp, loading, noScroll, ...rest } = props;
647
- const [isExpanded, setIsExpanded] = React3__namespace.default.useState(isExpandedProp);
648
- const handleClick = React3__namespace.default.useCallback((event) => {
649
- setIsExpanded((flag) => !flag);
650
- if (!noScroll) {
651
- scrollToElement(id);
652
- }
653
- onClick?.(event);
654
- }, [id, noScroll, onClick]);
655
- useUpdateEffect(() => {
656
- setIsExpanded(isExpandedProp);
657
- if (isExpandedProp && !noScroll) {
658
- scrollToElement(id);
659
- }
660
- }, [isExpandedProp, id, noScroll]);
661
- const text = isExpanded ? textProp?.[1] ?? "Hide details" : textProp?.[0] ?? "View details";
662
- return /* @__PURE__ */ jsxRuntime.jsxs(Collapsible__namespace.Root, { open: isExpanded, children: [
663
- /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
664
- Link,
665
- {
666
- className: "text-sm underline decoration-dashed w-fit",
667
- onClick: handleClick,
668
- loading,
669
- ...rest,
670
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { id, children: text })
671
- }
672
- ) }),
673
- /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Content, { children })
674
- ] });
675
- };
676
- var CollapsibleList = (props) => {
677
- const CUT_LENGTH = 3;
678
- const { items, renderItem, triggerProps, cutLength = CUT_LENGTH, text: textProp, defaultExpanded = false, className, ...rest } = props;
679
- const [isExpanded, setIsExpanded] = React3__namespace.default.useState(defaultExpanded);
680
- React3__namespace.default.useEffect(() => {
681
- setIsExpanded(defaultExpanded);
682
- }, [defaultExpanded]);
683
- const handleToggle = React3__namespace.default.useCallback(() => {
684
- setIsExpanded((flag) => !flag);
685
- }, []);
686
- const text = isExpanded ? textProp?.[1] ?? "Hide" : textProp?.[0] ?? "Show all";
687
- return /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Root, { open: isExpanded, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col w-full", className), ...rest, children: [
688
- items.slice(0, isExpanded ? void 0 : cutLength).map(renderItem),
689
- items.length > cutLength && /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
690
- Link,
691
- {
692
- className: "text-sm underline decoration-dashed w-fit min-w-0",
693
- onClick: handleToggle,
694
- ...triggerProps,
695
- children: text
696
- }
697
- ) })
698
- ] }) });
699
- };
700
-
701
- exports.CollapsibleDetails = CollapsibleDetails;
702
- exports.CollapsibleList = CollapsibleList;