@spark-ui/components 10.22.1 → 11.0.1

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 (143) hide show
  1. package/package.json +5 -5
  2. package/dist/DialogTrigger-woU7vsJi.d.ts +0 -142
  3. package/dist/Input-N8AWWSmt.d.ts +0 -41
  4. package/dist/InputTrailingIcon-ZZx8PoJy.d.ts +0 -20
  5. package/dist/LabelRequiredIndicator-DRnCzHMU.d.ts +0 -19
  6. package/dist/accordion/index.d.ts +0 -73
  7. package/dist/accordion/index.js +0 -325
  8. package/dist/accordion/index.js.map +0 -1
  9. package/dist/alert-dialog/index.d.ts +0 -119
  10. package/dist/alert-dialog/index.js +0 -1554
  11. package/dist/alert-dialog/index.js.map +0 -1
  12. package/dist/avatar/index.d.ts +0 -66
  13. package/dist/avatar/index.js +0 -1303
  14. package/dist/avatar/index.js.map +0 -1
  15. package/dist/badge/index.d.ts +0 -47
  16. package/dist/badge/index.js +0 -122
  17. package/dist/badge/index.js.map +0 -1
  18. package/dist/breadcrumb/index.d.ts +0 -64
  19. package/dist/breadcrumb/index.js +0 -327
  20. package/dist/breadcrumb/index.js.map +0 -1
  21. package/dist/button/index.d.ts +0 -41
  22. package/dist/button/index.js +0 -935
  23. package/dist/button/index.js.map +0 -1
  24. package/dist/card/index.d.ts +0 -61
  25. package/dist/card/index.js +0 -502
  26. package/dist/card/index.js.map +0 -1
  27. package/dist/carousel/index.d.ts +0 -261
  28. package/dist/carousel/index.js +0 -1801
  29. package/dist/carousel/index.js.map +0 -1
  30. package/dist/checkbox/index.d.ts +0 -120
  31. package/dist/checkbox/index.js +0 -511
  32. package/dist/checkbox/index.js.map +0 -1
  33. package/dist/chip/index.d.ts +0 -97
  34. package/dist/chip/index.js +0 -908
  35. package/dist/chip/index.js.map +0 -1
  36. package/dist/collapsible/index.d.ts +0 -43
  37. package/dist/collapsible/index.js +0 -109
  38. package/dist/collapsible/index.js.map +0 -1
  39. package/dist/combobox/index.d.ts +0 -287
  40. package/dist/combobox/index.js +0 -2588
  41. package/dist/combobox/index.js.map +0 -1
  42. package/dist/dialog/index.d.ts +0 -33
  43. package/dist/dialog/index.js +0 -1389
  44. package/dist/dialog/index.js.map +0 -1
  45. package/dist/divider/index.d.ts +0 -61
  46. package/dist/divider/index.js +0 -224
  47. package/dist/divider/index.js.map +0 -1
  48. package/dist/drawer/index.d.ts +0 -152
  49. package/dist/drawer/index.js +0 -1400
  50. package/dist/drawer/index.js.map +0 -1
  51. package/dist/dropdown/index.d.ts +0 -233
  52. package/dist/dropdown/index.js +0 -2051
  53. package/dist/dropdown/index.js.map +0 -1
  54. package/dist/form-field/index.d.ts +0 -186
  55. package/dist/form-field/index.js +0 -553
  56. package/dist/form-field/index.js.map +0 -1
  57. package/dist/icon/index.d.ts +0 -28
  58. package/dist/icon/index.js +0 -127
  59. package/dist/icon/index.js.map +0 -1
  60. package/dist/icon-button/index.d.ts +0 -16
  61. package/dist/icon-button/index.js +0 -980
  62. package/dist/icon-button/index.js.map +0 -1
  63. package/dist/input/index.d.ts +0 -78
  64. package/dist/input/index.js +0 -724
  65. package/dist/input/index.js.map +0 -1
  66. package/dist/kbd/index.d.ts +0 -9
  67. package/dist/kbd/index.js +0 -47
  68. package/dist/kbd/index.js.map +0 -1
  69. package/dist/label/index.d.ts +0 -11
  70. package/dist/label/index.js +0 -78
  71. package/dist/label/index.js.map +0 -1
  72. package/dist/link-box/index.d.ts +0 -34
  73. package/dist/link-box/index.js +0 -92
  74. package/dist/link-box/index.js.map +0 -1
  75. package/dist/pagination/index.d.ts +0 -143
  76. package/dist/pagination/index.js +0 -1353
  77. package/dist/pagination/index.js.map +0 -1
  78. package/dist/popover/index.d.ts +0 -93
  79. package/dist/popover/index.js +0 -1339
  80. package/dist/popover/index.js.map +0 -1
  81. package/dist/portal/index.d.ts +0 -13
  82. package/dist/portal/index.js +0 -37
  83. package/dist/portal/index.js.map +0 -1
  84. package/dist/progress/index.d.ts +0 -48
  85. package/dist/progress/index.js +0 -223
  86. package/dist/progress/index.js.map +0 -1
  87. package/dist/progress-tracker/index.d.ts +0 -80
  88. package/dist/progress-tracker/index.js +0 -571
  89. package/dist/progress-tracker/index.js.map +0 -1
  90. package/dist/radio-group/index.d.ts +0 -100
  91. package/dist/radio-group/index.js +0 -318
  92. package/dist/radio-group/index.js.map +0 -1
  93. package/dist/rating/index.d.ts +0 -78
  94. package/dist/rating/index.js +0 -363
  95. package/dist/rating/index.js.map +0 -1
  96. package/dist/scrolling-list/index.d.ts +0 -118
  97. package/dist/scrolling-list/index.js +0 -1426
  98. package/dist/scrolling-list/index.js.map +0 -1
  99. package/dist/segmented-gauge/index.d.ts +0 -100
  100. package/dist/segmented-gauge/index.js +0 -277
  101. package/dist/segmented-gauge/index.js.map +0 -1
  102. package/dist/select/index.d.ts +0 -167
  103. package/dist/select/index.js +0 -581
  104. package/dist/select/index.js.map +0 -1
  105. package/dist/skeleton/index.d.ts +0 -67
  106. package/dist/skeleton/index.js +0 -206
  107. package/dist/skeleton/index.js.map +0 -1
  108. package/dist/slider/index.d.ts +0 -97
  109. package/dist/slider/index.js +0 -220
  110. package/dist/slider/index.js.map +0 -1
  111. package/dist/slot/index.d.ts +0 -16
  112. package/dist/slot/index.js +0 -51
  113. package/dist/slot/index.js.map +0 -1
  114. package/dist/snackbar/index.d.ts +0 -158
  115. package/dist/snackbar/index.js +0 -1756
  116. package/dist/snackbar/index.js.map +0 -1
  117. package/dist/spinner/index.d.ts +0 -21
  118. package/dist/spinner/index.js +0 -139
  119. package/dist/spinner/index.js.map +0 -1
  120. package/dist/stepper/index.d.ts +0 -81
  121. package/dist/stepper/index.js +0 -1847
  122. package/dist/stepper/index.js.map +0 -1
  123. package/dist/switch/index.d.ts +0 -64
  124. package/dist/switch/index.js +0 -327
  125. package/dist/switch/index.js.map +0 -1
  126. package/dist/tabs/index.d.ts +0 -103
  127. package/dist/tabs/index.js +0 -1376
  128. package/dist/tabs/index.js.map +0 -1
  129. package/dist/tag/index.d.ts +0 -29
  130. package/dist/tag/index.js +0 -283
  131. package/dist/tag/index.js.map +0 -1
  132. package/dist/text-link/index.d.ts +0 -20
  133. package/dist/text-link/index.js +0 -100
  134. package/dist/text-link/index.js.map +0 -1
  135. package/dist/textarea/index.d.ts +0 -57
  136. package/dist/textarea/index.js +0 -797
  137. package/dist/textarea/index.js.map +0 -1
  138. package/dist/toast/index.d.ts +0 -56
  139. package/dist/toast/index.js +0 -1412
  140. package/dist/toast/index.js.map +0 -1
  141. package/dist/visually-hidden/index.d.ts +0 -16
  142. package/dist/visually-hidden/index.js +0 -67
  143. package/dist/visually-hidden/index.js.map +0 -1
@@ -1,980 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
-
20
- // src/icon-button/index.ts
21
- var icon_button_exports = {};
22
- __export(icon_button_exports, {
23
- IconButton: () => IconButton
24
- });
25
- module.exports = __toCommonJS(icon_button_exports);
26
-
27
- // src/button/Button.tsx
28
- var import_class_variance_authority3 = require("class-variance-authority");
29
- var import_react2 = require("react");
30
-
31
- // src/slot/Slot.tsx
32
- var import_radix_ui = require("radix-ui");
33
- var import_react = require("react");
34
- var import_jsx_runtime = require("react/jsx-runtime");
35
- var Slottable = import_radix_ui.Slot.Slottable;
36
- var Slot = ({ ref, ...props }) => {
37
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
38
- };
39
- var wrapPolymorphicSlot = (asChild, children, callback) => {
40
- if (!asChild) return callback(children);
41
- return (0, import_react.isValidElement)(children) ? (0, import_react.cloneElement)(
42
- children,
43
- void 0,
44
- callback(children.props.children)
45
- ) : null;
46
- };
47
-
48
- // src/visually-hidden/VisuallyHidden.tsx
49
- var import_jsx_runtime2 = require("react/jsx-runtime");
50
- var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
51
- const Component = asChild ? Slot : "span";
52
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
53
- Component,
54
- {
55
- ...props,
56
- ref,
57
- style: {
58
- // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
59
- position: "absolute",
60
- border: 0,
61
- width: 1,
62
- height: 1,
63
- padding: 0,
64
- margin: -1,
65
- overflow: "hidden",
66
- clip: "rect(0, 0, 0, 0)",
67
- whiteSpace: "nowrap",
68
- wordWrap: "normal",
69
- ...props.style
70
- }
71
- }
72
- );
73
- };
74
- VisuallyHidden.displayName = "VisuallyHidden";
75
-
76
- // src/spinner/Spinner.styles.tsx
77
- var import_internal_utils = require("@spark-ui/internal-utils");
78
- var import_class_variance_authority = require("class-variance-authority");
79
- var defaultVariants = {
80
- intent: "current",
81
- size: "current",
82
- isBackgroundVisible: false
83
- };
84
- var spinnerStyles = (0, import_class_variance_authority.cva)(
85
- ["inline-block", "border-solid", "rounded-full", "border-md", "animate-spin"],
86
- {
87
- variants: {
88
- /**
89
- * Use `size` prop to set the size of the spinner. If you want to set the full size for the spinner, don't forget to add a wrapping container with its own size.
90
- */
91
- size: {
92
- current: ["u-current-font-size"],
93
- sm: ["w-sz-20", "h-sz-20"],
94
- md: ["w-sz-28", "h-sz-28"],
95
- full: ["w-full", "h-full"]
96
- },
97
- /**
98
- * Color scheme of the spinner.
99
- */
100
- intent: (0, import_internal_utils.makeVariants)({
101
- current: ["border-current"],
102
- main: ["border-main"],
103
- support: ["border-support"],
104
- accent: ["border-accent"],
105
- basic: ["border-basic"],
106
- success: ["border-success"],
107
- alert: ["border-alert"],
108
- error: ["border-error"],
109
- info: ["border-info"],
110
- neutral: ["border-neutral"]
111
- }),
112
- /**
113
- * Size of the button.
114
- */
115
- isBackgroundVisible: {
116
- true: ["border-b-neutral-container", "border-l-neutral-container"],
117
- false: ["border-b-transparent", "border-l-transparent"]
118
- }
119
- },
120
- defaultVariants
121
- }
122
- );
123
-
124
- // src/spinner/Spinner.tsx
125
- var import_jsx_runtime3 = require("react/jsx-runtime");
126
- var Spinner = ({
127
- className,
128
- size = "current",
129
- intent = "current",
130
- label,
131
- isBackgroundVisible,
132
- ref,
133
- ...others
134
- }) => {
135
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
136
- "span",
137
- {
138
- role: "status",
139
- "data-spark-component": "spinner",
140
- ref,
141
- className: spinnerStyles({ className, size, intent, isBackgroundVisible }),
142
- ...others,
143
- children: label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(VisuallyHidden, { children: label })
144
- }
145
- );
146
- };
147
-
148
- // src/button/Button.styles.tsx
149
- var import_internal_utils7 = require("@spark-ui/internal-utils");
150
- var import_class_variance_authority2 = require("class-variance-authority");
151
-
152
- // src/button/variants/filled.ts
153
- var import_internal_utils2 = require("@spark-ui/internal-utils");
154
- var filledVariants = [
155
- // Main
156
- {
157
- intent: "main",
158
- design: "filled",
159
- class: (0, import_internal_utils2.tw)([
160
- "bg-main",
161
- "text-on-main",
162
- "hover:bg-main-hovered",
163
- "enabled:active:bg-main-hovered",
164
- "focus-visible:bg-main-hovered"
165
- ])
166
- },
167
- // Support
168
- {
169
- intent: "support",
170
- design: "filled",
171
- class: (0, import_internal_utils2.tw)([
172
- "bg-support",
173
- "text-on-support",
174
- "hover:bg-support-hovered",
175
- "enabled:active:bg-support-hovered",
176
- "focus-visible:bg-support-hovered"
177
- ])
178
- },
179
- // Accent
180
- {
181
- intent: "accent",
182
- design: "filled",
183
- class: (0, import_internal_utils2.tw)([
184
- "bg-accent",
185
- "text-on-accent",
186
- "hover:bg-accent-hovered",
187
- "enabled:active:bg-accent-hovered",
188
- "focus-visible:bg-accent-hovered"
189
- ])
190
- },
191
- // Basic
192
- {
193
- intent: "basic",
194
- design: "filled",
195
- class: (0, import_internal_utils2.tw)([
196
- "bg-basic",
197
- "text-on-basic",
198
- "hover:bg-basic-hovered",
199
- "enabled:active:bg-basic-hovered",
200
- "focus-visible:bg-basic-hovered"
201
- ])
202
- },
203
- // Success
204
- {
205
- intent: "success",
206
- design: "filled",
207
- class: (0, import_internal_utils2.tw)([
208
- "bg-success",
209
- "text-on-success",
210
- "hover:bg-success-hovered",
211
- "enabled:active:bg-success-hovered",
212
- "focus-visible:bg-success-hovered"
213
- ])
214
- },
215
- // Alert
216
- {
217
- intent: "alert",
218
- design: "filled",
219
- class: (0, import_internal_utils2.tw)([
220
- "bg-alert",
221
- "text-on-alert",
222
- "hover:bg-alert-hovered",
223
- "enabled:active:bg-alert-hovered",
224
- "focus-visible:bg-alert-hovered"
225
- ])
226
- },
227
- // Danger
228
- {
229
- intent: "danger",
230
- design: "filled",
231
- class: (0, import_internal_utils2.tw)([
232
- "text-on-error bg-error",
233
- "hover:bg-error-hovered enabled:active:bg-error-hovered",
234
- "focus-visible:bg-error-hovered"
235
- ])
236
- },
237
- // Info
238
- {
239
- intent: "info",
240
- design: "filled",
241
- class: (0, import_internal_utils2.tw)([
242
- "text-on-error bg-info",
243
- "hover:bg-info-hovered enabled:active:bg-info-hovered",
244
- "focus-visible:bg-info-hovered"
245
- ])
246
- },
247
- // Neutral
248
- {
249
- intent: "neutral",
250
- design: "filled",
251
- class: (0, import_internal_utils2.tw)([
252
- "bg-neutral",
253
- "text-on-neutral",
254
- "hover:bg-neutral-hovered",
255
- "enabled:active:bg-neutral-hovered",
256
- "focus-visible:bg-neutral-hovered"
257
- ])
258
- },
259
- // Surface
260
- {
261
- intent: "surface",
262
- design: "filled",
263
- class: (0, import_internal_utils2.tw)([
264
- "bg-surface",
265
- "text-on-surface",
266
- "hover:bg-surface-hovered",
267
- "enabled:active:bg-surface-hovered",
268
- "focus-visible:bg-surface-hovered"
269
- ])
270
- },
271
- {
272
- intent: "surfaceInverse",
273
- design: "filled",
274
- class: (0, import_internal_utils2.tw)([
275
- "bg-surface-inverse",
276
- "text-on-surface-inverse",
277
- "hover:bg-surface-inverse-hovered",
278
- "enabled:active:bg-surface-inverse-hovered",
279
- "focus-visible:bg-surface-inverse-hovered"
280
- ])
281
- }
282
- ];
283
-
284
- // src/button/variants/ghost.ts
285
- var import_internal_utils3 = require("@spark-ui/internal-utils");
286
- var ghostVariants = [
287
- {
288
- intent: "main",
289
- design: "ghost",
290
- class: (0, import_internal_utils3.tw)([
291
- "text-on-main-container",
292
- "hover:bg-main/dim-5",
293
- "enabled:active:bg-main/dim-5",
294
- "focus-visible:bg-main/dim-5"
295
- ])
296
- },
297
- {
298
- intent: "support",
299
- design: "ghost",
300
- class: (0, import_internal_utils3.tw)([
301
- "text-on-support-container",
302
- "hover:bg-support/dim-5",
303
- "enabled:active:bg-support/dim-5",
304
- "focus-visible:bg-support/dim-5"
305
- ])
306
- },
307
- {
308
- intent: "accent",
309
- design: "ghost",
310
- class: (0, import_internal_utils3.tw)([
311
- "text-on-accent-container",
312
- "hover:bg-accent/dim-5",
313
- "enabled:active:bg-accent/dim-5",
314
- "focus-visible:bg-accent/dim-5"
315
- ])
316
- },
317
- {
318
- intent: "basic",
319
- design: "ghost",
320
- class: (0, import_internal_utils3.tw)([
321
- "text-on-basic-container",
322
- "hover:bg-basic/dim-5",
323
- "enabled:active:bg-basic/dim-5",
324
- "focus-visible:bg-basic/dim-5"
325
- ])
326
- },
327
- {
328
- intent: "success",
329
- design: "ghost",
330
- class: (0, import_internal_utils3.tw)([
331
- "text-on-success-container",
332
- "hover:bg-success/dim-5",
333
- "enabled:active:bg-success/dim-5",
334
- "focus-visible:bg-success/dim-5"
335
- ])
336
- },
337
- {
338
- intent: "alert",
339
- design: "ghost",
340
- class: (0, import_internal_utils3.tw)([
341
- "text-on-alert-container",
342
- "hover:bg-alert/dim-5",
343
- "enabled:active:bg-alert/dim-5",
344
- "focus-visible:bg-alert/dim-5"
345
- ])
346
- },
347
- {
348
- intent: "danger",
349
- design: "ghost",
350
- class: (0, import_internal_utils3.tw)([
351
- "text-on-error-container",
352
- "hover:bg-error/dim-5",
353
- "enabled:active:bg-error/dim-5",
354
- "focus-visible:bg-error/dim-5"
355
- ])
356
- },
357
- {
358
- intent: "info",
359
- design: "ghost",
360
- class: (0, import_internal_utils3.tw)([
361
- "text-on-info-container",
362
- "hover:bg-info/dim-5",
363
- "enabled:active:bg-info/dim-5",
364
- "focus-visible:bg-info/dim-5"
365
- ])
366
- },
367
- {
368
- intent: "neutral",
369
- design: "ghost",
370
- class: (0, import_internal_utils3.tw)([
371
- "text-on-neutral-container",
372
- "hover:bg-neutral/dim-5",
373
- "enabled:active:bg-neutral/dim-5",
374
- "focus-visible:bg-neutral/dim-5"
375
- ])
376
- },
377
- {
378
- intent: "surface",
379
- design: "ghost",
380
- class: (0, import_internal_utils3.tw)([
381
- "text-surface",
382
- "hover:bg-surface/dim-5",
383
- "enabled:active:bg-surface/dim-5",
384
- "focus-visible:bg-surface/dim-5"
385
- ])
386
- },
387
- {
388
- intent: "surfaceInverse",
389
- design: "ghost",
390
- class: (0, import_internal_utils3.tw)([
391
- "text-surface-inverse",
392
- "hover:bg-surface-inverse/dim-5",
393
- "enabled:active:bg-surface-inverse/dim-5",
394
- "focus-visible:bg-surface-inverse/dim-5"
395
- ])
396
- }
397
- ];
398
-
399
- // src/button/variants/outlined.ts
400
- var import_internal_utils4 = require("@spark-ui/internal-utils");
401
- var outlinedVariants = [
402
- {
403
- intent: "main",
404
- design: "outlined",
405
- class: (0, import_internal_utils4.tw)([
406
- "hover:bg-main/dim-5",
407
- "enabled:active:bg-main/dim-5",
408
- "focus-visible:bg-main/dim-5",
409
- "text-main"
410
- ])
411
- },
412
- {
413
- intent: "support",
414
- design: "outlined",
415
- class: (0, import_internal_utils4.tw)([
416
- "hover:bg-support/dim-5",
417
- "enabled:active:bg-support/dim-5",
418
- "focus-visible:bg-support/dim-5",
419
- "text-support"
420
- ])
421
- },
422
- {
423
- intent: "accent",
424
- design: "outlined",
425
- class: (0, import_internal_utils4.tw)([
426
- "hover:bg-accent/dim-5",
427
- "enabled:active:bg-accent/dim-5",
428
- "focus-visible:bg-accent/dim-5",
429
- "text-accent"
430
- ])
431
- },
432
- {
433
- intent: "basic",
434
- design: "outlined",
435
- class: (0, import_internal_utils4.tw)([
436
- "hover:bg-basic/dim-5",
437
- "enabled:active:bg-basic/dim-5",
438
- "focus-visible:bg-basic/dim-5",
439
- "text-basic"
440
- ])
441
- },
442
- {
443
- intent: "success",
444
- design: "outlined",
445
- class: (0, import_internal_utils4.tw)([
446
- "hover:bg-success/dim-5",
447
- "enabled:active:bg-success/dim-5",
448
- "focus-visible:bg-success/dim-5",
449
- "text-success"
450
- ])
451
- },
452
- {
453
- intent: "alert",
454
- design: "outlined",
455
- class: (0, import_internal_utils4.tw)([
456
- "hover:bg-alert/dim-5",
457
- "enabled:active:bg-alert/dim-5",
458
- "focus-visible:bg-alert/dim-5",
459
- "text-alert"
460
- ])
461
- },
462
- {
463
- intent: "danger",
464
- design: "outlined",
465
- class: (0, import_internal_utils4.tw)([
466
- "hover:bg-error/dim-5",
467
- "enabled:active:bg-error/dim-5",
468
- "focus-visible:bg-error/dim-5",
469
- "text-error"
470
- ])
471
- },
472
- {
473
- intent: "info",
474
- design: "outlined",
475
- class: (0, import_internal_utils4.tw)([
476
- "hover:bg-info/dim-5",
477
- "enabled:active:bg-info/dim-5",
478
- "focus-visible:bg-info/dim-5",
479
- "text-info"
480
- ])
481
- },
482
- {
483
- intent: "neutral",
484
- design: "outlined",
485
- class: (0, import_internal_utils4.tw)([
486
- "hover:bg-neutral/dim-5",
487
- "enabled:active:bg-neutral/dim-5",
488
- "focus-visible:bg-neutral/dim-5",
489
- "text-neutral"
490
- ])
491
- },
492
- {
493
- intent: "surface",
494
- design: "outlined",
495
- class: (0, import_internal_utils4.tw)([
496
- "hover:bg-surface/dim-5",
497
- "enabled:active:bg-surface/dim-5",
498
- "focus-visible:bg-surface/dim-5",
499
- "text-surface"
500
- ])
501
- },
502
- {
503
- intent: "surfaceInverse",
504
- design: "outlined",
505
- class: (0, import_internal_utils4.tw)([
506
- "hover:bg-surface-inverse/dim-5",
507
- "enabled:active:bg-surface-inverse/dim-5",
508
- "focus-visible:bg-surface-inverse/dim-5",
509
- "text-surface-inverse"
510
- ])
511
- }
512
- ];
513
-
514
- // src/button/variants/tinted.ts
515
- var import_internal_utils5 = require("@spark-ui/internal-utils");
516
- var tintedVariants = [
517
- {
518
- intent: "main",
519
- design: "tinted",
520
- class: (0, import_internal_utils5.tw)([
521
- "bg-main-container",
522
- "text-on-main-container",
523
- "hover:bg-main-container-hovered",
524
- "enabled:active:bg-main-container-hovered",
525
- "focus-visible:bg-main-container-hovered"
526
- ])
527
- },
528
- {
529
- intent: "support",
530
- design: "tinted",
531
- class: (0, import_internal_utils5.tw)([
532
- "bg-support-container",
533
- "text-on-support-container",
534
- "hover:bg-support-container-hovered",
535
- "enabled:active:bg-support-container-hovered",
536
- "focus-visible:bg-support-container-hovered"
537
- ])
538
- },
539
- {
540
- intent: "accent",
541
- design: "tinted",
542
- class: (0, import_internal_utils5.tw)([
543
- "bg-accent-container",
544
- "text-on-accent-container",
545
- "hover:bg-accent-container-hovered",
546
- "enabled:active:bg-accent-container-hovered",
547
- "focus-visible:bg-accent-container-hovered"
548
- ])
549
- },
550
- {
551
- intent: "basic",
552
- design: "tinted",
553
- class: (0, import_internal_utils5.tw)([
554
- "bg-basic-container",
555
- "text-on-basic-container",
556
- "hover:bg-basic-container-hovered",
557
- "enabled:active:bg-basic-container-hovered",
558
- "focus-visible:bg-basic-container-hovered"
559
- ])
560
- },
561
- {
562
- intent: "success",
563
- design: "tinted",
564
- class: (0, import_internal_utils5.tw)([
565
- "bg-success-container",
566
- "text-on-success-container",
567
- "hover:bg-success-container-hovered",
568
- "enabled:active:bg-success-container-hovered",
569
- "focus-visible:bg-success-container-hovered"
570
- ])
571
- },
572
- {
573
- intent: "alert",
574
- design: "tinted",
575
- class: (0, import_internal_utils5.tw)([
576
- "bg-alert-container",
577
- "text-on-alert-container",
578
- "hover:bg-alert-container-hovered",
579
- "enabled:active:bg-alert-container-hovered",
580
- "focus-visible:bg-alert-container-hovered"
581
- ])
582
- },
583
- {
584
- intent: "danger",
585
- design: "tinted",
586
- class: (0, import_internal_utils5.tw)([
587
- "bg-error-container",
588
- "text-on-error-container",
589
- "hover:bg-error-container-hovered",
590
- "enabled:active:bg-error-container-hovered",
591
- "focus-visible:bg-error-container-hovered"
592
- ])
593
- },
594
- {
595
- intent: "info",
596
- design: "tinted",
597
- class: (0, import_internal_utils5.tw)([
598
- "bg-info-container",
599
- "text-on-info-container",
600
- "hover:bg-info-container-hovered",
601
- "enabled:active:bg-info-container-hovered",
602
- "focus-visible:bg-info-container-hovered"
603
- ])
604
- },
605
- {
606
- intent: "neutral",
607
- design: "tinted",
608
- class: (0, import_internal_utils5.tw)([
609
- "bg-neutral-container",
610
- "text-on-neutral-container",
611
- "hover:bg-neutral-container-hovered",
612
- "enabled:active:bg-neutral-container-hovered",
613
- "focus-visible:bg-neutral-container-hovered"
614
- ])
615
- },
616
- {
617
- intent: "surface",
618
- design: "tinted",
619
- class: (0, import_internal_utils5.tw)([
620
- "bg-surface",
621
- "text-on-surface",
622
- "hover:bg-surface-hovered",
623
- "enabled:active:bg-surface-hovered",
624
- "focus-visible:bg-surface-hovered"
625
- ])
626
- },
627
- {
628
- intent: "surfaceInverse",
629
- design: "tinted",
630
- class: (0, import_internal_utils5.tw)([
631
- "bg-surface-inverse",
632
- "text-on-surface-inverse",
633
- "hover:bg-surface-inverse-hovered",
634
- "enabled:active:bg-surface-inverse-hovered",
635
- "focus-visible:bg-surface-inverse-hovered"
636
- ])
637
- }
638
- ];
639
-
640
- // src/button/variants/contrast.ts
641
- var import_internal_utils6 = require("@spark-ui/internal-utils");
642
- var contrastVariants = [
643
- {
644
- intent: "main",
645
- design: "contrast",
646
- class: (0, import_internal_utils6.tw)([
647
- "text-on-main-contaier bg-surface",
648
- "hover:bg-main-container-hovered",
649
- "enabled:active:bg-main-container-hovered",
650
- "focus-visible:bg-main-container-hovered"
651
- ])
652
- },
653
- {
654
- intent: "support",
655
- design: "contrast",
656
- class: (0, import_internal_utils6.tw)([
657
- "text-on-support-container bg-surface",
658
- "hover:bg-support-container-hovered",
659
- "enabled:active:bg-support-container-hovered",
660
- "focus-visible:bg-support-container-hovered"
661
- ])
662
- },
663
- {
664
- intent: "accent",
665
- design: "contrast",
666
- class: (0, import_internal_utils6.tw)([
667
- "text-on-accent-container bg-surface",
668
- "hover:bg-accent-container-hovered",
669
- "enabled:active:bg-accent-container-hovered",
670
- "focus-visible:bg-accent-container-hovered"
671
- ])
672
- },
673
- {
674
- intent: "basic",
675
- design: "contrast",
676
- class: (0, import_internal_utils6.tw)([
677
- "text-on-basic-container bg-surface",
678
- "hover:bg-basic-container-hovered",
679
- "enabled:active:bg-basic-container-hovered",
680
- "focus-visible:bg-basic-container-hovered"
681
- ])
682
- },
683
- {
684
- intent: "success",
685
- design: "contrast",
686
- class: (0, import_internal_utils6.tw)([
687
- "text-on-success-container bg-surface",
688
- "hover:bg-success-container-hovered",
689
- "enabled:active:bg-success-container-hovered",
690
- "focus-visible:bg-success-container-hovered"
691
- ])
692
- },
693
- {
694
- intent: "alert",
695
- design: "contrast",
696
- class: (0, import_internal_utils6.tw)([
697
- "text-on-alert-container bg-surface",
698
- "hover:bg-alert-container-hovered",
699
- "enabled:active:bg-alert-container-hovered",
700
- "focus-visible:bg-alert-container-hovered"
701
- ])
702
- },
703
- {
704
- intent: "danger",
705
- design: "contrast",
706
- class: (0, import_internal_utils6.tw)([
707
- "text-on-error-container bg-surface",
708
- "hover:bg-error-container-hovered",
709
- "enabled:active:bg-error-container-hovered",
710
- "focus-visible:bg-error-container-hovered"
711
- ])
712
- },
713
- {
714
- intent: "info",
715
- design: "contrast",
716
- class: (0, import_internal_utils6.tw)([
717
- "text-on-info-container bg-surface",
718
- "hover:bg-info-container-hovered",
719
- "enabled:active:bg-info-container-hovered",
720
- "focus-visible:bg-info-container-hovered"
721
- ])
722
- },
723
- {
724
- intent: "neutral",
725
- design: "contrast",
726
- class: (0, import_internal_utils6.tw)([
727
- "text-on-neutral-container bg-surface",
728
- "hover:bg-neutral-container-hovered",
729
- "enabled:active:bg-neutral-container-hovered",
730
- "focus-visible:bg-neutral-container-hovered"
731
- ])
732
- },
733
- {
734
- intent: "surface",
735
- design: "contrast",
736
- class: (0, import_internal_utils6.tw)([
737
- "text-on-surface bg-surface",
738
- "hover:bg-surface-hovered",
739
- "enabled:active:bg-surface-hovered",
740
- "focus-visible:bg-surface-hovered"
741
- ])
742
- },
743
- {
744
- intent: "surfaceInverse",
745
- design: "contrast",
746
- class: (0, import_internal_utils6.tw)([
747
- "text-on-surface-inverse bg-surface-inverse",
748
- "hover:bg-surface-inverse-hovered",
749
- "enabled:active:bg-surface-inverse-hovered",
750
- "focus-visible:bg-surface-inverse-hovered"
751
- ])
752
- }
753
- ];
754
-
755
- // src/button/Button.styles.tsx
756
- var buttonStyles = (0, import_class_variance_authority2.cva)(
757
- [
758
- "u-shadow-border-transition",
759
- "box-border inline-flex items-center justify-center gap-md whitespace-nowrap",
760
- "default:px-lg",
761
- "text-body-1 font-bold",
762
- "focus-visible:u-outline"
763
- ],
764
- {
765
- variants: {
766
- /**
767
- * Main style of the button.
768
- *
769
- * - `filled`: Button will be plain.
770
- *
771
- * - `outlined`: Button will be transparent with an outline.
772
- *
773
- * - `tinted`: Button will be filled but using a lighter color scheme.
774
- *
775
- * - `ghost`: Button will look like a link. No borders, plain text.
776
- *
777
- * - `contrast`: Button will be surface filled. No borders, plain text.
778
- *
779
- */
780
- design: (0, import_internal_utils7.makeVariants)({
781
- filled: [],
782
- outlined: ["bg-transparent", "border-sm", "border-current"],
783
- tinted: [],
784
- ghost: ["default:-mx-md px-md hover:bg-main/dim-5"],
785
- contrast: []
786
- }),
787
- underline: {
788
- true: ["underline"]
789
- },
790
- /**
791
- * Color scheme of the button.
792
- */
793
- intent: (0, import_internal_utils7.makeVariants)({
794
- main: [],
795
- support: [],
796
- accent: [],
797
- basic: [],
798
- success: [],
799
- alert: [],
800
- danger: [],
801
- info: [],
802
- neutral: [],
803
- surface: [],
804
- surfaceInverse: []
805
- }),
806
- /**
807
- * Size of the button.
808
- */
809
- size: (0, import_internal_utils7.makeVariants)({
810
- sm: ["min-w-sz-32", "h-sz-32"],
811
- md: ["min-w-sz-44", "h-sz-44"],
812
- lg: ["min-w-sz-56", "h-sz-56"]
813
- }),
814
- /**
815
- * Shape of the button.
816
- */
817
- shape: (0, import_internal_utils7.makeVariants)({
818
- rounded: ["rounded-lg"],
819
- square: ["rounded-0"],
820
- pill: ["rounded-full"]
821
- }),
822
- /**
823
- * Disable the button, preventing user interaction and adding opacity.
824
- */
825
- disabled: {
826
- true: ["cursor-not-allowed", "opacity-dim-3"],
827
- false: ["cursor-pointer"]
828
- }
829
- },
830
- compoundVariants: [
831
- ...filledVariants,
832
- ...outlinedVariants,
833
- ...tintedVariants,
834
- ...ghostVariants,
835
- ...contrastVariants
836
- ],
837
- defaultVariants: {
838
- design: "filled",
839
- intent: "main",
840
- size: "md",
841
- shape: "rounded"
842
- }
843
- }
844
- );
845
-
846
- // src/button/Button.tsx
847
- var import_jsx_runtime4 = require("react/jsx-runtime");
848
- var blockedEventHandlers = [
849
- "onClick",
850
- "onMouseDown",
851
- "onMouseUp",
852
- "onMouseEnter",
853
- "onMouseLeave",
854
- "onMouseOver",
855
- "onMouseOut",
856
- "onKeyDown",
857
- "onKeyPress",
858
- "onKeyUp",
859
- "onSubmit"
860
- ];
861
- var Button = ({
862
- children,
863
- design = "filled",
864
- disabled = false,
865
- intent = "main",
866
- isLoading = false,
867
- loadingLabel,
868
- loadingText,
869
- shape = "rounded",
870
- size = "md",
871
- asChild,
872
- className,
873
- underline = false,
874
- ref,
875
- ...others
876
- }) => {
877
- const Component = asChild ? Slot : "button";
878
- const shouldNotInteract = !!disabled || isLoading;
879
- const disabledEventHandlers = (0, import_react2.useMemo)(() => {
880
- const result = {};
881
- if (shouldNotInteract) {
882
- blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
883
- }
884
- return result;
885
- }, [shouldNotInteract]);
886
- const spinnerProps = {
887
- size: "current",
888
- className: loadingText ? "inline-block" : "absolute",
889
- ...loadingLabel && { "aria-label": loadingLabel }
890
- };
891
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
892
- Component,
893
- {
894
- "data-spark-component": "button",
895
- ...Component === "button" && { type: "button" },
896
- ref,
897
- className: buttonStyles({
898
- className,
899
- design,
900
- disabled: shouldNotInteract,
901
- intent,
902
- shape,
903
- size,
904
- underline
905
- }),
906
- disabled: !!disabled,
907
- "aria-busy": isLoading,
908
- "aria-live": isLoading ? "assertive" : "off",
909
- ...others,
910
- ...disabledEventHandlers,
911
- children: wrapPolymorphicSlot(
912
- asChild,
913
- children,
914
- (slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
915
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, { ...spinnerProps }),
916
- loadingText && loadingText,
917
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
918
- "div",
919
- {
920
- "aria-hidden": true,
921
- className: (0, import_class_variance_authority3.cx)("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
922
- children: slotted
923
- }
924
- )
925
- ] }) : slotted
926
- )
927
- }
928
- );
929
- };
930
- Button.displayName = "Button";
931
-
932
- // src/icon-button/IconButton.styles.tsx
933
- var import_internal_utils8 = require("@spark-ui/internal-utils");
934
- var import_class_variance_authority4 = require("class-variance-authority");
935
- var iconButtonStyles = (0, import_class_variance_authority4.cva)(["pl-0 pr-0"], {
936
- variants: {
937
- /**
938
- * Sets the size of the icon.
939
- */
940
- size: (0, import_internal_utils8.makeVariants)({
941
- sm: ["text-body-1"],
942
- md: ["text-body-1"],
943
- lg: ["text-display-3"]
944
- })
945
- }
946
- });
947
-
948
- // src/icon-button/IconButton.tsx
949
- var import_jsx_runtime5 = require("react/jsx-runtime");
950
- var IconButton = ({
951
- design = "filled",
952
- disabled = false,
953
- intent = "main",
954
- shape = "rounded",
955
- size = "md",
956
- className,
957
- ref,
958
- ...others
959
- }) => {
960
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
961
- Button,
962
- {
963
- "data-spark-component": "icon-button",
964
- ref,
965
- className: iconButtonStyles({ size, className }),
966
- design,
967
- disabled,
968
- intent,
969
- shape,
970
- size,
971
- ...others
972
- }
973
- );
974
- };
975
- IconButton.displayName = "IconButton";
976
- // Annotate the CommonJS export names for ESM import in node:
977
- 0 && (module.exports = {
978
- IconButton
979
- });
980
- //# sourceMappingURL=index.js.map