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