@luxfi/ui 7.0.0 → 7.2.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 (70) hide show
  1. package/dist/alert.cjs +184 -335
  2. package/dist/alert.js +184 -335
  3. package/dist/badge.cjs +162 -321
  4. package/dist/badge.d.cts +3 -7
  5. package/dist/badge.d.ts +3 -7
  6. package/dist/badge.js +162 -320
  7. package/dist/bank.d.cts +1 -1
  8. package/dist/bank.d.ts +1 -1
  9. package/dist/button.cjs +373 -484
  10. package/dist/button.d.cts +10 -7
  11. package/dist/button.d.ts +10 -7
  12. package/dist/button.js +373 -484
  13. package/dist/close-button.cjs +37 -18
  14. package/dist/close-button.d.cts +1 -1
  15. package/dist/close-button.d.ts +1 -1
  16. package/dist/close-button.js +37 -18
  17. package/dist/collapsible.cjs +125 -272
  18. package/dist/collapsible.js +125 -272
  19. package/dist/dialog.cjs +60 -44
  20. package/dist/dialog.d.cts +7 -8
  21. package/dist/dialog.d.ts +7 -8
  22. package/dist/dialog.js +60 -43
  23. package/dist/drawer.cjs +37 -13
  24. package/dist/drawer.js +37 -13
  25. package/dist/heading.cjs +3 -8
  26. package/dist/heading.js +3 -8
  27. package/dist/icon-button.cjs +213 -337
  28. package/dist/icon-button.d.cts +4 -4
  29. package/dist/icon-button.d.ts +4 -4
  30. package/dist/icon-button.js +213 -338
  31. package/dist/image.cjs +125 -272
  32. package/dist/image.js +125 -272
  33. package/dist/index.cjs +695 -858
  34. package/dist/index.d.cts +0 -3
  35. package/dist/index.d.ts +0 -3
  36. package/dist/index.js +695 -856
  37. package/dist/input.cjs +25 -36
  38. package/dist/input.js +25 -36
  39. package/dist/link.cjs +125 -272
  40. package/dist/link.js +125 -272
  41. package/dist/popover.cjs +55 -40
  42. package/dist/popover.js +55 -39
  43. package/dist/select.cjs +125 -272
  44. package/dist/select.js +125 -272
  45. package/dist/skeleton.cjs +125 -272
  46. package/dist/skeleton.js +125 -272
  47. package/dist/table.cjs +127 -274
  48. package/dist/table.js +127 -274
  49. package/dist/tag.cjs +199 -341
  50. package/dist/tag.js +199 -340
  51. package/dist/textarea.cjs +25 -36
  52. package/dist/textarea.js +25 -36
  53. package/dist/tooltip.cjs +22 -21
  54. package/dist/tooltip.d.cts +2 -3
  55. package/dist/tooltip.d.ts +2 -3
  56. package/dist/tooltip.js +22 -20
  57. package/package.json +9 -8
  58. package/src/alert.tsx +23 -51
  59. package/src/badge.tsx +20 -31
  60. package/src/button.tsx +304 -238
  61. package/src/close-button.tsx +48 -22
  62. package/src/dialog.tsx +37 -47
  63. package/src/heading.tsx +8 -19
  64. package/src/icon-button.tsx +129 -104
  65. package/src/input.tsx +27 -36
  66. package/src/popover.tsx +30 -44
  67. package/src/skeleton.tsx +96 -144
  68. package/src/tag.tsx +17 -35
  69. package/src/textarea.tsx +27 -36
  70. package/src/tooltip.tsx +54 -47
package/dist/badge.js CHANGED
@@ -1,283 +1,147 @@
1
1
  "use client";
2
- import { cva } from 'class-variance-authority';
3
2
  import * as React2 from 'react';
4
3
  import React2__default from 'react';
5
4
  import { clsx } from 'clsx';
6
5
  import { twMerge } from 'tailwind-merge';
7
6
  import { jsx, jsxs } from 'react/jsx-runtime';
8
- import * as RadixTooltip from '@radix-ui/react-tooltip';
7
+ import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzogui/tooltip';
9
8
  import { useClickAway } from '@uidotdev/usehooks';
10
9
 
11
10
  // src/badge.tsx
12
11
  function cn(...inputs) {
13
12
  return twMerge(clsx(inputs));
14
13
  }
15
- var SPACING_SCALE = 4;
16
- function toStylePx(value) {
17
- if (value === void 0) return void 0;
18
- if (typeof value === "string") return value;
19
- return `${value * SPACING_SCALE}px`;
14
+ var SHIM_PROPS = [
15
+ "w",
16
+ "h",
17
+ "minW",
18
+ "maxW",
19
+ "display",
20
+ "flexGrow",
21
+ "flexShrink",
22
+ "flexBasis",
23
+ "fontWeight",
24
+ "textStyle",
25
+ "borderRadius",
26
+ "alignSelf",
27
+ "alignItems",
28
+ "justifyContent",
29
+ "color",
30
+ "mt",
31
+ "mb",
32
+ "ml",
33
+ "mr",
34
+ "height",
35
+ "overflow",
36
+ "whiteSpace",
37
+ "textOverflow",
38
+ "textTransform",
39
+ "gap",
40
+ "gridTemplateColumns",
41
+ "minWidth",
42
+ "boxSize",
43
+ "py",
44
+ "px",
45
+ "p",
46
+ "hideBelow",
47
+ "fontSize",
48
+ "flexWrap",
49
+ "wordBreak",
50
+ "lineHeight",
51
+ "marginRight",
52
+ "position",
53
+ "background"
54
+ ];
55
+ var S = 4;
56
+ function dim(v) {
57
+ if (v == null) return void 0;
58
+ if (typeof v === "number") return `${v * S}px`;
59
+ if (typeof v === "string") return v;
60
+ if (typeof v === "object") {
61
+ const o = v;
62
+ return o.base ?? o.lg ?? o.xl ?? Object.values(o)[0];
63
+ }
64
+ return void 0;
20
65
  }
21
- function extractSkeletonStyleProps(props) {
22
- const style = {};
23
- const rest = {};
24
- function resolveDimension(value) {
25
- if (value === void 0 || value === null) return void 0;
26
- if (typeof value === "number") return `${value * SPACING_SCALE}px`;
27
- if (typeof value === "string") return value;
28
- if (typeof value === "object") {
29
- const obj = value;
30
- return obj.base ?? obj.lg ?? obj.xl ?? Object.values(obj)[0];
31
- }
32
- return void 0;
66
+ function sp(v) {
67
+ if (v === void 0) return void 0;
68
+ return typeof v === "number" ? `${v * S}px` : v;
69
+ }
70
+ function shimToStyle(props) {
71
+ const s = {};
72
+ if (props.w !== void 0) s.width = dim(props.w);
73
+ if (props.h !== void 0) s.height = dim(props.h);
74
+ if (props.minW !== void 0) s.minWidth = dim(props.minW);
75
+ if (props.maxW !== void 0) s.maxWidth = dim(props.maxW);
76
+ if (props.display !== void 0) s.display = props.display;
77
+ if (props.flexGrow !== void 0) s.flexGrow = props.flexGrow;
78
+ if (props.flexShrink !== void 0) s.flexShrink = props.flexShrink;
79
+ if (props.flexBasis !== void 0) s.flexBasis = props.flexBasis;
80
+ if (props.fontWeight !== void 0) s.fontWeight = props.fontWeight;
81
+ if (props.borderRadius !== void 0) s.borderRadius = props.borderRadius;
82
+ if (props.alignSelf !== void 0) s.alignSelf = props.alignSelf;
83
+ if (props.alignItems !== void 0) s.alignItems = props.alignItems;
84
+ if (props.justifyContent !== void 0) s.justifyContent = props.justifyContent;
85
+ if (props.color !== void 0) s.color = props.color;
86
+ if (props.mt !== void 0) s.marginTop = sp(props.mt);
87
+ if (props.mb !== void 0) s.marginBottom = sp(props.mb);
88
+ if (props.ml !== void 0) s.marginLeft = sp(props.ml);
89
+ if (props.mr !== void 0) s.marginRight = sp(props.mr);
90
+ if (props.height !== void 0) s.height = props.height;
91
+ if (props.overflow !== void 0) s.overflow = props.overflow;
92
+ if (props.whiteSpace !== void 0) s.whiteSpace = props.whiteSpace;
93
+ if (props.textOverflow !== void 0) s.textOverflow = props.textOverflow;
94
+ if (props.textTransform !== void 0) s.textTransform = props.textTransform;
95
+ if (props.gap !== void 0) s.gap = sp(props.gap);
96
+ if (props.gridTemplateColumns !== void 0) s.gridTemplateColumns = props.gridTemplateColumns;
97
+ if (props.minWidth !== void 0) s.minWidth = props.minWidth;
98
+ if (props.boxSize !== void 0) {
99
+ const v = typeof props.boxSize === "number" ? `${props.boxSize * S}px` : props.boxSize;
100
+ s.width = v;
101
+ s.height = v;
33
102
  }
34
- for (const [key, value] of Object.entries(props)) {
35
- if (value === void 0) continue;
36
- switch (key) {
37
- case "w": {
38
- const v = resolveDimension(value);
39
- if (v) style.width = v;
40
- break;
41
- }
42
- case "h": {
43
- const v = resolveDimension(value);
44
- if (v) style.height = v;
45
- break;
46
- }
47
- case "minW": {
48
- const v = resolveDimension(value);
49
- if (v) style.minWidth = v;
50
- break;
51
- }
52
- case "maxW": {
53
- const v = resolveDimension(value);
54
- if (v) style.maxWidth = v;
55
- break;
56
- }
57
- case "height":
58
- style.height = value;
59
- break;
60
- case "display":
61
- style.display = value;
62
- break;
63
- case "flexGrow":
64
- style.flexGrow = value;
65
- break;
66
- case "flexShrink":
67
- style.flexShrink = value;
68
- break;
69
- case "flexBasis":
70
- style.flexBasis = value;
71
- break;
72
- case "fontWeight":
73
- style.fontWeight = value;
74
- break;
75
- case "borderRadius":
76
- style.borderRadius = value;
77
- break;
78
- case "alignSelf":
79
- style.alignSelf = value;
80
- break;
81
- case "alignItems":
82
- style.alignItems = value;
83
- break;
84
- case "justifyContent":
85
- style.justifyContent = value;
86
- break;
87
- case "color":
88
- style.color = value;
89
- break;
90
- case "mt":
91
- style.marginTop = toStylePx(value);
92
- break;
93
- case "mb":
94
- style.marginBottom = toStylePx(value);
95
- break;
96
- case "ml":
97
- style.marginLeft = toStylePx(value);
98
- break;
99
- case "mr":
100
- style.marginRight = toStylePx(value);
101
- break;
102
- case "overflow":
103
- style.overflow = value;
104
- break;
105
- case "whiteSpace":
106
- style.whiteSpace = value;
107
- break;
108
- case "textOverflow":
109
- style.textOverflow = value;
110
- break;
111
- case "textTransform":
112
- style.textTransform = value;
113
- break;
114
- case "gap":
115
- style.gap = typeof value === "number" ? `${value * SPACING_SCALE}px` : value;
116
- break;
117
- case "gridTemplateColumns":
118
- style.gridTemplateColumns = value;
119
- break;
120
- case "minWidth":
121
- style.minWidth = value;
122
- break;
123
- case "boxSize": {
124
- const s = typeof value === "number" ? `${value * SPACING_SCALE}px` : value;
125
- style.width = s;
126
- style.height = s;
127
- break;
128
- }
129
- case "py": {
130
- const v = toStylePx(value);
131
- style.paddingTop = v;
132
- style.paddingBottom = v;
133
- break;
134
- }
135
- case "px": {
136
- const v = toStylePx(value);
137
- style.paddingLeft = v;
138
- style.paddingRight = v;
139
- break;
140
- }
141
- case "p": {
142
- const v = toStylePx(value);
143
- style.padding = v;
144
- break;
145
- }
146
- case "hideBelow":
147
- break;
148
- // handled via className
149
- case "textStyle":
150
- break;
151
- // drop textStyle, not directly applicable
152
- case "fontSize":
153
- style.fontSize = value;
154
- break;
155
- case "flexWrap":
156
- style.flexWrap = value;
157
- break;
158
- case "wordBreak":
159
- style.wordBreak = value;
160
- break;
161
- case "lineHeight":
162
- style.lineHeight = value;
163
- break;
164
- case "marginRight":
165
- style.marginRight = value;
166
- break;
167
- case "position":
168
- style.position = value;
169
- break;
170
- case "background":
171
- style.background = value;
172
- break;
173
- default:
174
- rest[key] = value;
175
- break;
176
- }
103
+ if (props.py !== void 0) {
104
+ const v = sp(props.py);
105
+ s.paddingTop = v;
106
+ s.paddingBottom = v;
107
+ }
108
+ if (props.px !== void 0) {
109
+ const v = sp(props.px);
110
+ s.paddingLeft = v;
111
+ s.paddingRight = v;
177
112
  }
178
- return { style, rest };
113
+ if (props.p !== void 0) s.padding = sp(props.p);
114
+ if (props.fontSize !== void 0) s.fontSize = props.fontSize;
115
+ if (props.flexWrap !== void 0) s.flexWrap = props.flexWrap;
116
+ if (props.wordBreak !== void 0) s.wordBreak = props.wordBreak;
117
+ if (props.lineHeight !== void 0) s.lineHeight = props.lineHeight;
118
+ if (props.marginRight !== void 0) s.marginRight = props.marginRight;
119
+ if (props.position !== void 0) s.position = props.position;
120
+ if (props.background !== void 0) s.background = props.background;
121
+ return s;
122
+ }
123
+ function stripShims(props) {
124
+ const out = { ...props };
125
+ for (const k of SHIM_PROPS) delete out[k];
126
+ return out;
179
127
  }
128
+ var SKELETON_CLASSES = [
129
+ "animate-skeleton-shimmer rounded-sm",
130
+ "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
131
+ "bg-[length:200%_100%]"
132
+ ].join(" ");
133
+ var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
180
134
  var Skeleton = React2.forwardRef(
181
135
  function Skeleton2(props, ref) {
182
- const {
183
- loading = false,
184
- asChild,
185
- className,
186
- children,
187
- style: styleProp,
188
- // Destructure style-prop shims so they don't leak into DOM
189
- w: _w,
190
- h: _h,
191
- minW: _minW,
192
- maxW: _maxW,
193
- display: _display,
194
- flexGrow: _flexGrow,
195
- flexShrink: _flexShrink,
196
- flexBasis: _flexBasis,
197
- fontWeight: _fontWeight,
198
- textStyle: _textStyle,
199
- borderRadius: _borderRadius,
200
- alignSelf: _alignSelf,
201
- alignItems: _alignItems,
202
- justifyContent: _justifyContent,
203
- color: _color,
204
- mt: _mt,
205
- mb: _mb,
206
- ml: _ml,
207
- mr: _mr,
208
- height: _height,
209
- overflow: _overflow,
210
- whiteSpace: _whiteSpace,
211
- textOverflow: _textOverflow,
212
- textTransform: _textTransform,
213
- gap: _gap,
214
- gridTemplateColumns: _gridTemplateColumns,
215
- minWidth: _minWidth,
216
- boxSize: _boxSize,
217
- py: _py,
218
- px: _px,
219
- p: _p,
220
- hideBelow: _hideBelow,
221
- fontSize: _fontSize,
222
- flexWrap: _flexWrap,
223
- wordBreak: _wordBreak,
224
- lineHeight: _lineHeight,
225
- marginRight: _marginRight,
226
- position: _position,
227
- background: _background,
228
- as: Component = "div",
229
- ...htmlRest
230
- } = props;
231
- const { style: shimStyle } = extractSkeletonStyleProps({
232
- w: _w,
233
- h: _h,
234
- minW: _minW,
235
- maxW: _maxW,
236
- display: _display,
237
- flexGrow: _flexGrow,
238
- flexShrink: _flexShrink,
239
- flexBasis: _flexBasis,
240
- fontWeight: _fontWeight,
241
- textStyle: _textStyle,
242
- borderRadius: _borderRadius,
243
- alignSelf: _alignSelf,
244
- alignItems: _alignItems,
245
- justifyContent: _justifyContent,
246
- color: _color,
247
- mt: _mt,
248
- mb: _mb,
249
- ml: _ml,
250
- mr: _mr,
251
- height: _height,
252
- overflow: _overflow,
253
- whiteSpace: _whiteSpace,
254
- textOverflow: _textOverflow,
255
- textTransform: _textTransform,
256
- gap: _gap,
257
- gridTemplateColumns: _gridTemplateColumns,
258
- minWidth: _minWidth,
259
- boxSize: _boxSize,
260
- py: _py,
261
- px: _px,
262
- p: _p,
263
- hideBelow: _hideBelow,
264
- fontSize: _fontSize,
265
- flexWrap: _flexWrap,
266
- wordBreak: _wordBreak,
267
- lineHeight: _lineHeight,
268
- marginRight: _marginRight,
269
- position: _position,
270
- background: _background
271
- });
136
+ const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
137
+ const shimStyle = shimToStyle(props);
272
138
  const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : void 0;
273
- const HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
274
- const hideBelowClass = _hideBelow ? HIDE_BELOW_MAP[_hideBelow] : void 0;
275
- const finalClassName = hideBelowClass ? cn(className, hideBelowClass) : className;
139
+ const hideBelowClass = props.hideBelow ? HIDE_BELOW_MAP[props.hideBelow] : void 0;
140
+ const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
141
+ const htmlRest = stripShims(allRest);
276
142
  if (!loading) {
277
- if (asChild && React2.isValidElement(children)) {
278
- return children;
279
- }
280
- return /* @__PURE__ */ jsx(Component, { ref, className: finalClassName, style: mergedStyle, ...htmlRest, children });
143
+ if (asChild && React2.isValidElement(children)) return children;
144
+ return /* @__PURE__ */ jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
281
145
  }
282
146
  if (asChild && React2.isValidElement(children)) {
283
147
  return /* @__PURE__ */ jsx(
@@ -285,13 +149,7 @@ var Skeleton = React2.forwardRef(
285
149
  {
286
150
  ref,
287
151
  "data-loading": true,
288
- className: cn(
289
- "animate-skeleton-shimmer rounded-sm",
290
- "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
291
- "bg-[length:200%_100%]",
292
- "text-transparent [&_*]:invisible",
293
- finalClassName
294
- ),
152
+ className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
295
153
  style: mergedStyle,
296
154
  ...htmlRest,
297
155
  children
@@ -303,13 +161,7 @@ var Skeleton = React2.forwardRef(
303
161
  {
304
162
  ref,
305
163
  "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
- children ? "text-transparent [&_*]:invisible" : "min-h-5",
311
- finalClassName
312
- ),
164
+ className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
313
165
  style: mergedStyle,
314
166
  ...htmlRest,
315
167
  children
@@ -361,6 +213,10 @@ function useIsMobile() {
361
213
  }, []);
362
214
  return isMobile;
363
215
  }
216
+ function mapPlacement(p) {
217
+ if (!p) return void 0;
218
+ return p;
219
+ }
364
220
  var Tooltip = React2.forwardRef(
365
221
  function Tooltip2(props, ref) {
366
222
  const {
@@ -371,10 +227,8 @@ var Tooltip = React2.forwardRef(
371
227
  children,
372
228
  disabled,
373
229
  disableOnMobile,
374
- portalled = true,
375
230
  content,
376
231
  contentProps,
377
- portalRef,
378
232
  defaultOpen = false,
379
233
  triggerProps,
380
234
  closeDelay = 100,
@@ -422,36 +276,34 @@ var Tooltip = React2.forwardRef(
422
276
  if (disabled || disableOnMobile && isMobile) return children;
423
277
  const defaultShowArrow = variant === "popover" ? false : true;
424
278
  const showArrow = showArrowProp !== void 0 ? showArrowProp : defaultShowArrow;
425
- const placement = positioning?.placement ?? "top";
426
- const side = placement.split("-")[0];
427
- const align = placement.includes("-") ? placement.split("-")[1] : void 0;
428
- const sideOffset = positioning?.offset?.mainAxis ?? 4;
429
279
  const isPopover = variant === "popover";
430
- return /* @__PURE__ */ jsx(RadixTooltip.Provider, { delayDuration: openDelay, skipDelayDuration: 0, children: /* @__PURE__ */ jsxs(
431
- RadixTooltip.Root,
280
+ const placement = mapPlacement(positioning?.placement) ?? "top";
281
+ const offset = positioning?.offset?.mainAxis ?? 4;
282
+ return /* @__PURE__ */ jsx(TooltipGroup, { delay: openDelay, children: /* @__PURE__ */ jsxs(
283
+ Tooltip$1,
432
284
  {
433
285
  open,
434
286
  onOpenChange: handleOpenChange,
435
- delayDuration: openDelay,
287
+ delay: { open: openDelay, close: closeDelay },
288
+ placement,
289
+ offset,
290
+ unstyled: true,
436
291
  children: [
437
292
  /* @__PURE__ */ jsx(
438
- RadixTooltip.Trigger,
293
+ Tooltip$1.Trigger,
439
294
  {
440
295
  ref: open ? triggerRef : void 0,
441
296
  asChild: true,
442
- onClick: isMobile ? handleTriggerClick : void 0,
297
+ ...isMobile ? { onPress: handleTriggerClick } : {},
443
298
  ...triggerProps,
444
299
  children
445
300
  }
446
301
  ),
447
- /* @__PURE__ */ jsx(RadixTooltip.Portal, { container: portalled ? portalRef?.current ?? void 0 : void 0, children: /* @__PURE__ */ jsxs(
448
- RadixTooltip.Content,
302
+ /* @__PURE__ */ jsxs(
303
+ Tooltip$1.Content,
449
304
  {
450
305
  ref,
451
- side,
452
- align,
453
- sideOffset,
454
- onClick: interactive ? handleContentClick : void 0,
306
+ unstyled: true,
455
307
  className: cn(
456
308
  "z-[9999] overflow-hidden rounded-lg px-3 py-2 text-sm",
457
309
  "animate-in fade-in-0 zoom-in-95",
@@ -460,12 +312,14 @@ var Tooltip = React2.forwardRef(
460
312
  !isPopover && "bg-[var(--color-tooltip-bg)] text-[var(--color-tooltip-fg)] max-w-xs",
461
313
  contentProps?.className
462
314
  ),
315
+ onClick: interactive ? handleContentClick : void 0,
463
316
  ...selected ? { "data-selected": true } : {},
464
317
  ...contentProps,
465
318
  children: [
466
319
  showArrow && /* @__PURE__ */ jsx(
467
- RadixTooltip.Arrow,
320
+ Tooltip$1.Arrow,
468
321
  {
322
+ unstyled: true,
469
323
  className: cn(
470
324
  isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
471
325
  )
@@ -474,7 +328,7 @@ var Tooltip = React2.forwardRef(
474
328
  content
475
329
  ]
476
330
  }
477
- ) })
331
+ )
478
332
  ]
479
333
  }
480
334
  ) });
@@ -483,26 +337,12 @@ var Tooltip = React2.forwardRef(
483
337
  function TruncatedTextTooltip({ label, children }) {
484
338
  return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
485
339
  }
486
- var badgeVariants = cva(
487
- "inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text",
488
- {
489
- variants: {
490
- variant: {
491
- subtle: "",
492
- solid: ""
493
- },
494
- size: {
495
- sm: "text-xs p-1 h-[18px] min-h-[18px]",
496
- md: "text-sm px-1 py-0.5 min-h-6",
497
- lg: "text-sm px-2 py-1 min-h-7 font-semibold"
498
- }
499
- },
500
- defaultVariants: {
501
- variant: "subtle",
502
- size: "md"
503
- }
504
- }
505
- );
340
+ var BASE_CLASSES = "inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text";
341
+ var SIZE_CLASSES = {
342
+ sm: "text-xs p-1 h-[18px] min-h-[18px]",
343
+ md: "text-sm px-1 py-0.5 min-h-6",
344
+ lg: "text-sm px-2 py-1 min-h-7 font-semibold"
345
+ };
506
346
  var COLOR_PALETTE_CLASSES = {
507
347
  gray: "bg-badge-gray-bg text-badge-gray-fg",
508
348
  green: "bg-badge-green-bg text-badge-green-fg",
@@ -527,6 +367,7 @@ var COLOR_PALETTE_CLASSES = {
527
367
  bright_purple: "bg-badge-bright-purple-bg text-badge-bright-purple-fg",
528
368
  bright_pink: "bg-badge-bright-pink-bg text-badge-bright-pink-fg"
529
369
  };
370
+ var S2 = 4;
530
371
  var Badge = React2__default.forwardRef(
531
372
  function Badge2(props, ref) {
532
373
  const {
@@ -535,8 +376,8 @@ var Badge = React2__default.forwardRef(
535
376
  children,
536
377
  truncated = false,
537
378
  endElement,
538
- variant,
539
- size,
379
+ variant: _variant,
380
+ size = "md",
540
381
  colorPalette = "gray",
541
382
  className,
542
383
  flexShrink: _flexShrink,
@@ -548,16 +389,16 @@ var Badge = React2__default.forwardRef(
548
389
  } = props;
549
390
  const shimStyle = { ...styleProp };
550
391
  if (_flexShrink !== void 0) shimStyle.flexShrink = _flexShrink;
551
- if (_gap !== void 0) shimStyle.gap = typeof _gap === "number" ? `${_gap * 4}px` : _gap;
392
+ if (_gap !== void 0) shimStyle.gap = typeof _gap === "number" ? `${_gap * S2}px` : _gap;
552
393
  if (_ml !== void 0) {
553
394
  if (typeof _ml === "object") {
554
395
  const obj = _ml;
555
- shimStyle.marginLeft = `${(obj.base ?? obj.lg ?? 0) * 4}px`;
396
+ shimStyle.marginLeft = `${(obj.base ?? obj.lg ?? 0) * S2}px`;
556
397
  } else {
557
- shimStyle.marginLeft = typeof _ml === "number" ? `${_ml * 4}px` : _ml;
398
+ shimStyle.marginLeft = typeof _ml === "number" ? `${_ml * S2}px` : _ml;
558
399
  }
559
400
  }
560
- if (_mr !== void 0) shimStyle.marginRight = typeof _mr === "number" ? `${_mr * 4}px` : _mr;
401
+ if (_mr !== void 0) shimStyle.marginRight = typeof _mr === "number" ? `${_mr * S2}px` : _mr;
561
402
  const badgeStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
562
403
  const child = children ? /* @__PURE__ */ jsx("span", { className: "overflow-hidden text-ellipsis", children }) : null;
563
404
  const childrenElement = truncated ? /* @__PURE__ */ jsx(TruncatedTextTooltip, { label: children, children: child }) : child;
@@ -566,7 +407,8 @@ var Badge = React2__default.forwardRef(
566
407
  {
567
408
  ref,
568
409
  className: cn(
569
- badgeVariants({ variant, size }),
410
+ BASE_CLASSES,
411
+ SIZE_CLASSES[size],
570
412
  COLOR_PALETTE_CLASSES[colorPalette],
571
413
  className
572
414
  ),
package/dist/bank.d.cts CHANGED
@@ -46,7 +46,7 @@ declare const BankButtonText: _hanzogui_core.GuiComponent<_hanzogui_core.TamaDef
46
46
  }, _hanzogui_core.StaticConfigPublic>;
47
47
  type BankButtonProps = GetProps<typeof BankButton>;
48
48
  declare const BankHeading: _hanzogui_core.GuiComponent<_hanzogui_core.TamaDefer, _hanzogui_core.GuiTextElement, _hanzogui_core.RNGuiTextNonStyleProps, _hanzogui_core.TextStylePropsBase, {
49
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
49
+ size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
50
50
  }, _hanzogui_core.StaticConfigPublic>;
51
51
  type BankHeadingProps = GetProps<typeof BankHeading>;
52
52
  declare const BankText: _hanzogui_core.GuiComponent<_hanzogui_core.TamaDefer, _hanzogui_core.GuiTextElement, _hanzogui_core.RNGuiTextNonStyleProps, _hanzogui_core.TextStylePropsBase, {
package/dist/bank.d.ts CHANGED
@@ -46,7 +46,7 @@ declare const BankButtonText: _hanzogui_core.GuiComponent<_hanzogui_core.TamaDef
46
46
  }, _hanzogui_core.StaticConfigPublic>;
47
47
  type BankButtonProps = GetProps<typeof BankButton>;
48
48
  declare const BankHeading: _hanzogui_core.GuiComponent<_hanzogui_core.TamaDefer, _hanzogui_core.GuiTextElement, _hanzogui_core.RNGuiTextNonStyleProps, _hanzogui_core.TextStylePropsBase, {
49
- size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
49
+ size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
50
50
  }, _hanzogui_core.StaticConfigPublic>;
51
51
  type BankHeadingProps = GetProps<typeof BankHeading>;
52
52
  declare const BankText: _hanzogui_core.GuiComponent<_hanzogui_core.TamaDefer, _hanzogui_core.GuiTextElement, _hanzogui_core.RNGuiTextNonStyleProps, _hanzogui_core.TextStylePropsBase, {