@spark-ui/components 10.22.1 → 11.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 (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,1847 +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/stepper/index.ts
21
- var stepper_exports = {};
22
- __export(stepper_exports, {
23
- Stepper: () => Stepper2
24
- });
25
- module.exports = __toCommonJS(stepper_exports);
26
-
27
- // src/stepper/Stepper.tsx
28
- var import_form_field3 = require("@spark-ui/components/form-field");
29
- var import_react6 = require("react");
30
-
31
- // src/input/InputClearButton.tsx
32
- var import_DeleteOutline = require("@spark-ui/icons/DeleteOutline");
33
- var import_class_variance_authority2 = require("class-variance-authority");
34
-
35
- // src/icon/Icon.tsx
36
- var import_react2 = require("react");
37
-
38
- // src/slot/Slot.tsx
39
- var import_radix_ui = require("radix-ui");
40
- var import_react = require("react");
41
- var import_jsx_runtime = require("react/jsx-runtime");
42
- var Slottable = import_radix_ui.Slot.Slottable;
43
- var Slot = ({ ref, ...props }) => {
44
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
45
- };
46
- var wrapPolymorphicSlot = (asChild, children, callback) => {
47
- if (!asChild) return callback(children);
48
- return (0, import_react.isValidElement)(children) ? (0, import_react.cloneElement)(
49
- children,
50
- void 0,
51
- callback(children.props.children)
52
- ) : null;
53
- };
54
-
55
- // src/visually-hidden/VisuallyHidden.tsx
56
- var import_jsx_runtime2 = require("react/jsx-runtime");
57
- var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
58
- const Component = asChild ? Slot : "span";
59
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
60
- Component,
61
- {
62
- ...props,
63
- ref,
64
- style: {
65
- // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
66
- position: "absolute",
67
- border: 0,
68
- width: 1,
69
- height: 1,
70
- padding: 0,
71
- margin: -1,
72
- overflow: "hidden",
73
- clip: "rect(0, 0, 0, 0)",
74
- whiteSpace: "nowrap",
75
- wordWrap: "normal",
76
- ...props.style
77
- }
78
- }
79
- );
80
- };
81
- VisuallyHidden.displayName = "VisuallyHidden";
82
-
83
- // src/icon/Icon.styles.tsx
84
- var import_internal_utils = require("@spark-ui/internal-utils");
85
- var import_class_variance_authority = require("class-variance-authority");
86
- var iconStyles = (0, import_class_variance_authority.cva)(["fill-current shrink-0"], {
87
- variants: {
88
- /**
89
- * Color scheme of the icon.
90
- */
91
- intent: (0, import_internal_utils.makeVariants)({
92
- current: ["text-current"],
93
- main: ["text-main"],
94
- support: ["text-support"],
95
- accent: ["text-accent"],
96
- basic: ["text-basic"],
97
- success: ["text-success"],
98
- alert: ["text-alert"],
99
- error: ["text-error"],
100
- info: ["text-info"],
101
- neutral: ["text-neutral"]
102
- }),
103
- /**
104
- * Sets the size of the icon.
105
- */
106
- size: (0, import_internal_utils.makeVariants)({
107
- current: ["u-current-font-size"],
108
- sm: ["w-sz-16", "h-sz-16"],
109
- md: ["w-sz-24", "h-sz-24"],
110
- lg: ["w-sz-32", "h-sz-32"],
111
- xl: ["w-sz-40", "h-sz-40"]
112
- })
113
- }
114
- });
115
-
116
- // src/icon/Icon.tsx
117
- var import_jsx_runtime3 = require("react/jsx-runtime");
118
- var Icon = ({
119
- label,
120
- className,
121
- size = "current",
122
- intent = "current",
123
- children,
124
- ...others
125
- }) => {
126
- const child = import_react2.Children.only(children);
127
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
128
- (0, import_react2.cloneElement)(child, {
129
- className: iconStyles({ className, size, intent }),
130
- "data-spark-component": "icon",
131
- "aria-hidden": "true",
132
- focusable: "false",
133
- ...others
134
- }),
135
- label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(VisuallyHidden, { children: label })
136
- ] });
137
- };
138
- Icon.displayName = "Icon";
139
-
140
- // src/input/InputGroupContext.ts
141
- var import_react3 = require("react");
142
- var InputGroupContext = (0, import_react3.createContext)(null);
143
- var useInputGroup = () => {
144
- const context = (0, import_react3.useContext)(InputGroupContext);
145
- return context || { isStandalone: true };
146
- };
147
-
148
- // src/input/InputClearButton.tsx
149
- var import_jsx_runtime4 = require("react/jsx-runtime");
150
- var Root = ({
151
- className,
152
- tabIndex = -1,
153
- onClick,
154
- inline = false,
155
- ref,
156
- ...others
157
- }) => {
158
- const { onClear, hasTrailingIcon } = useInputGroup();
159
- const handleClick = (event) => {
160
- if (onClick) {
161
- onClick(event);
162
- }
163
- if (onClear) {
164
- onClear();
165
- }
166
- };
167
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
168
- "button",
169
- {
170
- ref,
171
- "data-spark-component": "input-clear-button",
172
- className: (0, import_class_variance_authority2.cx)(
173
- className,
174
- "pointer-events-auto absolute",
175
- inline ? "h-sz-44 top-0 -translate-y-0" : "top-1/2 -translate-y-1/2",
176
- "inline-flex h-full items-center justify-center outline-hidden",
177
- "text-neutral hover:text-neutral-hovered",
178
- hasTrailingIcon ? "right-3xl px-sz-12" : "pl-md pr-lg right-0"
179
- ),
180
- tabIndex,
181
- onClick: handleClick,
182
- type: "button",
183
- ...others,
184
- children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_DeleteOutline.DeleteOutline, {}) })
185
- }
186
- );
187
- };
188
- var InputClearButton = Object.assign(Root, {
189
- id: "ClearButton"
190
- });
191
- Root.displayName = "InputGroup.ClearButton";
192
-
193
- // src/input/InputGroup.tsx
194
- var import_form_field = require("@spark-ui/components/form-field");
195
- var import_use_combined_state = require("@spark-ui/hooks/use-combined-state");
196
- var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
197
- var import_react4 = require("react");
198
-
199
- // src/input/InputGroup.styles.ts
200
- var import_class_variance_authority3 = require("class-variance-authority");
201
- var inputGroupStyles = (0, import_class_variance_authority3.cva)(["relative inline-flex w-full"], {
202
- variants: {
203
- /**
204
- * When `true`, prevents the user from interacting.
205
- */
206
- disabled: {
207
- true: [
208
- "cursor-not-allowed",
209
- "relative",
210
- "after:absolute",
211
- "after:top-0",
212
- "after:h-full",
213
- "after:w-full",
214
- "after:border-sm after:border-outline",
215
- "after:rounded-lg"
216
- ],
217
- false: "after:hidden"
218
- },
219
- /**
220
- * Sets the component as interactive or not.
221
- */
222
- readOnly: {
223
- true: [
224
- "relative",
225
- "after:absolute",
226
- "after:top-0",
227
- "after:h-full",
228
- "after:w-full",
229
- "after:border-sm after:border-outline",
230
- "after:rounded-lg"
231
- ],
232
- false: "after:hidden"
233
- }
234
- }
235
- });
236
-
237
- // src/input/InputGroup.tsx
238
- var import_jsx_runtime5 = require("react/jsx-runtime");
239
- var InputGroup = ({
240
- className,
241
- children: childrenProp,
242
- state: stateProp,
243
- disabled: disabledProp,
244
- readOnly: readOnlyProp,
245
- onClear,
246
- ref: forwardedRef,
247
- ...others
248
- }) => {
249
- const getElementId = (element) => {
250
- return element ? element.type.id : "";
251
- };
252
- const findElement = (...values) => {
253
- return children.find((child) => values.includes(getElementId(child) || ""));
254
- };
255
- const children = import_react4.Children.toArray(childrenProp).filter(import_react4.isValidElement);
256
- const input = findElement("Input");
257
- const props = input?.props || {};
258
- const inputRef = (0, import_react4.useRef)(null);
259
- const onClearRef = (0, import_react4.useRef)(onClear);
260
- const ref = (0, import_use_merge_refs.useMergeRefs)(input?.ref, inputRef);
261
- const [value, onChange] = (0, import_use_combined_state.useCombinedState)(
262
- props.value,
263
- props.defaultValue,
264
- props.onValueChange
265
- );
266
- const field = (0, import_form_field.useFormFieldControl)();
267
- const state = field.state ?? stateProp;
268
- const disabled = field.disabled || !!disabledProp;
269
- const readOnly = field.readOnly || !!readOnlyProp;
270
- const leadingAddon = findElement("LeadingAddon");
271
- const leadingIcon = findElement("LeadingIcon");
272
- const clearButton = findElement("ClearButton");
273
- const trailingIcon = findElement("TrailingIcon");
274
- const trailingAddon = findElement("TrailingAddon");
275
- const hasLeadingAddon = !!leadingAddon;
276
- const hasTrailingAddon = !!trailingAddon;
277
- const hasLeadingIcon = !!leadingIcon;
278
- const hasTrailingIcon = !!trailingIcon;
279
- const hasClearButton = !!value && !!clearButton && !disabled && !readOnly;
280
- const handleChange = (event) => {
281
- if (props.onChange) {
282
- props.onChange(event);
283
- }
284
- onChange(event.target.value);
285
- };
286
- const handleClear = (0, import_react4.useCallback)(() => {
287
- if (onClearRef.current) {
288
- onClearRef.current();
289
- }
290
- onChange("");
291
- inputRef.current.focus();
292
- }, [onChange]);
293
- const current = (0, import_react4.useMemo)(() => {
294
- return {
295
- state,
296
- disabled,
297
- readOnly,
298
- hasLeadingIcon,
299
- hasTrailingIcon,
300
- hasLeadingAddon,
301
- hasTrailingAddon,
302
- hasClearButton,
303
- onClear: handleClear
304
- };
305
- }, [
306
- state,
307
- disabled,
308
- readOnly,
309
- hasLeadingIcon,
310
- hasTrailingIcon,
311
- hasLeadingAddon,
312
- hasTrailingAddon,
313
- hasClearButton,
314
- handleClear
315
- ]);
316
- (0, import_react4.useEffect)(() => {
317
- onClearRef.current = onClear;
318
- }, [onClear]);
319
- const inputRefValue = inputRef.current?.value;
320
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InputGroupContext.Provider, { value: current, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
321
- "div",
322
- {
323
- "data-spark-component": "input-group",
324
- ref: forwardedRef,
325
- className: inputGroupStyles({ disabled, readOnly, className }),
326
- ...others,
327
- children: [
328
- hasLeadingAddon && leadingAddon,
329
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative inline-flex w-full", children: [
330
- input && (0, import_react4.cloneElement)(input, {
331
- value: value ?? inputRefValue ?? "",
332
- ref,
333
- defaultValue: void 0,
334
- onChange: handleChange
335
- }),
336
- leadingIcon,
337
- hasClearButton && clearButton,
338
- trailingIcon
339
- ] }),
340
- hasTrailingAddon && trailingAddon
341
- ]
342
- }
343
- ) });
344
- };
345
- InputGroup.displayName = "InputGroup";
346
-
347
- // src/input/InputLeadingAddon.tsx
348
- var import_class_variance_authority5 = require("class-variance-authority");
349
-
350
- // src/input/InputAddon.tsx
351
- var import_react5 = require("react");
352
-
353
- // src/input/InputAddon.styles.ts
354
- var import_class_variance_authority4 = require("class-variance-authority");
355
- var inputAddonStyles = (0, import_class_variance_authority4.cva)(
356
- [
357
- "overflow-hidden",
358
- "border-sm",
359
- "shrink-0",
360
- "h-full",
361
- "focus-visible:relative focus-visible:z-raised",
362
- "mx-0"
363
- ],
364
- {
365
- variants: {
366
- /**
367
- * Change the component to the HTML tag or custom component of the only child.
368
- */
369
- asChild: { false: ["flex", "items-center", "px-lg"] },
370
- intent: {
371
- neutral: "border-outline",
372
- error: "border-error",
373
- alert: "border-alert",
374
- success: "border-success"
375
- },
376
- /**
377
- * Disable the input addon, preventing user interaction and adding opacity.
378
- */
379
- disabled: {
380
- true: ["pointer-events-none border-outline!"]
381
- },
382
- /**
383
- * Changes input addon styles based on the read only status from the input.
384
- */
385
- readOnly: {
386
- true: ["pointer-events-none"]
387
- },
388
- /**
389
- * Main style of the input addon.
390
- */
391
- design: {
392
- text: "",
393
- solid: "",
394
- inline: ""
395
- }
396
- },
397
- compoundVariants: [
398
- {
399
- disabled: false,
400
- readOnly: false,
401
- design: "text",
402
- class: ["bg-surface", "text-on-surface"]
403
- },
404
- {
405
- disabled: true,
406
- design: "text",
407
- class: ["text-on-surface/dim-3"]
408
- },
409
- {
410
- disabled: true,
411
- design: ["solid", "inline"],
412
- class: ["opacity-dim-3"]
413
- }
414
- ],
415
- defaultVariants: {
416
- intent: "neutral"
417
- }
418
- }
419
- );
420
-
421
- // src/input/InputAddon.tsx
422
- var import_jsx_runtime6 = require("react/jsx-runtime");
423
- var InputAddon = ({
424
- asChild: asChildProp,
425
- className,
426
- children,
427
- ref,
428
- ...others
429
- }) => {
430
- const { state, disabled, readOnly } = useInputGroup();
431
- const isRawText = typeof children === "string";
432
- const asChild = !!(isRawText ? false : asChildProp);
433
- const child = isRawText ? children : import_react5.Children.only(children);
434
- const Component = asChild && !isRawText ? Slot : "div";
435
- const getDesign = () => {
436
- if (isRawText) return "text";
437
- return asChild ? "solid" : "inline";
438
- };
439
- const design = getDesign();
440
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
441
- Component,
442
- {
443
- ref,
444
- "data-spark-component": "input-addon",
445
- className: inputAddonStyles({
446
- className,
447
- intent: state,
448
- disabled,
449
- readOnly,
450
- asChild,
451
- design
452
- }),
453
- ...disabled && { tabIndex: -1 },
454
- ...others,
455
- children: child
456
- }
457
- );
458
- };
459
- InputAddon.displayName = "InputGroup.Addon";
460
-
461
- // src/input/InputLeadingAddon.tsx
462
- var import_jsx_runtime7 = require("react/jsx-runtime");
463
- var Root2 = ({ className, ref, ...others }) => {
464
- const { disabled, readOnly } = useInputGroup();
465
- const isInactive = disabled || readOnly;
466
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_class_variance_authority5.cx)("rounded-l-lg", isInactive ? "bg-on-surface/dim-5" : null), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
467
- InputAddon,
468
- {
469
- ref,
470
- className: (0, import_class_variance_authority5.cx)(className, "rounded-r-0! mr-[-1px] rounded-l-lg"),
471
- ...others
472
- }
473
- ) });
474
- };
475
- var InputLeadingAddon = Object.assign(Root2, {
476
- id: "LeadingAddon"
477
- });
478
- Root2.displayName = "InputGroup.LeadingAddon";
479
-
480
- // src/input/InputLeadingIcon.tsx
481
- var import_class_variance_authority7 = require("class-variance-authority");
482
-
483
- // src/input/InputIcon.tsx
484
- var import_class_variance_authority6 = require("class-variance-authority");
485
- var import_jsx_runtime8 = require("react/jsx-runtime");
486
- var InputIcon = ({ className, intent, children, ...others }) => {
487
- const { disabled, readOnly } = useInputGroup();
488
- const isInactive = disabled || readOnly;
489
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
490
- Icon,
491
- {
492
- "data-spark-component": "input-icon",
493
- intent,
494
- className: (0, import_class_variance_authority6.cx)(
495
- className,
496
- "pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2",
497
- intent ? void 0 : "text-neutral peer-focus:text-outline-high",
498
- isInactive ? "opacity-dim-3" : void 0
499
- ),
500
- ...others,
501
- children
502
- }
503
- );
504
- };
505
- InputIcon.displayName = "InputGroup.Icon";
506
-
507
- // src/input/InputLeadingIcon.tsx
508
- var import_jsx_runtime9 = require("react/jsx-runtime");
509
- var InputLeadingIcon = ({ className, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(InputIcon, { className: (0, import_class_variance_authority7.cx)(className, "left-lg text-body-1"), ...others });
510
- InputLeadingIcon.id = "LeadingIcon";
511
- InputLeadingIcon.displayName = "InputGroup.LeadingIcon";
512
-
513
- // src/input/InputTrailingAddon.tsx
514
- var import_class_variance_authority8 = require("class-variance-authority");
515
- var import_jsx_runtime10 = require("react/jsx-runtime");
516
- var Root3 = ({ className, ref, ...others }) => {
517
- const { disabled, readOnly } = useInputGroup();
518
- const isInactive = disabled || readOnly;
519
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_class_variance_authority8.cx)("rounded-r-lg", isInactive ? "bg-on-surface/dim-5" : null), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
520
- InputAddon,
521
- {
522
- ref,
523
- className: (0, import_class_variance_authority8.cx)(className, "rounded-l-0! ml-[-1px] rounded-r-lg"),
524
- ...others
525
- }
526
- ) });
527
- };
528
- var InputTrailingAddon = Object.assign(Root3, {
529
- id: "TrailingAddon"
530
- });
531
- Root3.displayName = "InputGroup.TrailingAddon";
532
-
533
- // src/input/InputTrailingIcon.tsx
534
- var import_class_variance_authority9 = require("class-variance-authority");
535
- var import_jsx_runtime11 = require("react/jsx-runtime");
536
- var InputTrailingIcon = ({ className, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(InputIcon, { className: (0, import_class_variance_authority9.cx)(className, "right-lg text-body-1"), ...others });
537
- InputTrailingIcon.id = "TrailingIcon";
538
- InputTrailingIcon.displayName = "InputGroup.TrailingIcon";
539
-
540
- // src/input/Input.tsx
541
- var import_form_field2 = require("@spark-ui/components/form-field");
542
-
543
- // src/input/Input.styles.ts
544
- var import_class_variance_authority10 = require("class-variance-authority");
545
- var inputStyles = (0, import_class_variance_authority10.cva)(
546
- [
547
- "relative",
548
- "border-sm",
549
- "peer",
550
- "w-full",
551
- "appearance-none outline-hidden",
552
- "bg-surface",
553
- "text-ellipsis text-body-1 text-on-surface",
554
- "caret-neutral",
555
- "[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]",
556
- "autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]",
557
- "disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3",
558
- "read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5",
559
- "focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus"
560
- ],
561
- {
562
- variants: {
563
- /**
564
- * Change the component to the HTML tag or custom component of the only child.
565
- */
566
- asChild: {
567
- true: ["min-h-sz-44"],
568
- false: ["h-sz-44"]
569
- },
570
- /**
571
- * Color scheme of the button.
572
- */
573
- intent: {
574
- neutral: ["border-outline", "default:hover:border-outline-high"],
575
- success: ["default:border-success"],
576
- alert: ["default:border-alert"],
577
- error: ["default:border-error"]
578
- },
579
- /**
580
- * Sets if there is an addon before the input text.
581
- */
582
- hasLeadingAddon: {
583
- true: ["rounded-l-0"],
584
- false: ["rounded-l-lg"]
585
- },
586
- /**
587
- * Sets if there is an addon after the input text.
588
- */
589
- hasTrailingAddon: {
590
- true: ["rounded-r-0"],
591
- false: ["rounded-r-lg"]
592
- },
593
- /**
594
- * Sets if there is an icon before the input text.
595
- */
596
- hasLeadingIcon: {
597
- true: ["pl-3xl"],
598
- false: ["pl-lg"]
599
- },
600
- /**
601
- * Sets if there is an icon after the input text.
602
- */
603
- hasTrailingIcon: { true: "" },
604
- /**
605
- * Sets if there is a button to clear the input text.
606
- */
607
- hasClearButton: { true: "" }
608
- },
609
- compoundVariants: [
610
- {
611
- hasTrailingIcon: false,
612
- hasClearButton: false,
613
- class: "pr-lg"
614
- },
615
- {
616
- hasTrailingIcon: true,
617
- hasClearButton: false,
618
- class: "pr-3xl"
619
- },
620
- {
621
- hasTrailingIcon: false,
622
- hasClearButton: true,
623
- class: "pr-3xl"
624
- },
625
- {
626
- hasTrailingIcon: true,
627
- hasClearButton: true,
628
- class: "pr-[calc(var(--spacing-3xl)*2)]"
629
- }
630
- ],
631
- defaultVariants: {
632
- intent: "neutral"
633
- }
634
- }
635
- );
636
-
637
- // src/input/Input.tsx
638
- var import_jsx_runtime12 = require("react/jsx-runtime");
639
- var Root4 = ({
640
- className,
641
- asChild = false,
642
- onValueChange,
643
- onChange,
644
- onKeyDown,
645
- disabled: disabledProp,
646
- readOnly: readOnlyProp,
647
- ref,
648
- ...others
649
- }) => {
650
- const field = (0, import_form_field2.useFormFieldControl)();
651
- const group = useInputGroup();
652
- const { id, name, isInvalid, isRequired, description } = field;
653
- const {
654
- hasLeadingAddon,
655
- hasTrailingAddon,
656
- hasLeadingIcon,
657
- hasTrailingIcon,
658
- hasClearButton,
659
- onClear
660
- } = group;
661
- const Component = asChild ? Slot : "input";
662
- const state = field.state || group.state;
663
- const disabled = field.disabled || group.disabled || disabledProp;
664
- const readOnly = field.readOnly || group.readOnly || readOnlyProp;
665
- const handleChange = (event) => {
666
- if (onChange) {
667
- onChange(event);
668
- }
669
- if (onValueChange) {
670
- onValueChange(event.target.value);
671
- }
672
- };
673
- const handleKeyDown = (event) => {
674
- if (onKeyDown) {
675
- onKeyDown(event);
676
- }
677
- if (hasClearButton && onClear && event.key === "Escape") {
678
- onClear();
679
- }
680
- };
681
- return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
682
- Component,
683
- {
684
- "data-spark-component": "input",
685
- ref,
686
- id,
687
- name,
688
- className: inputStyles({
689
- asChild,
690
- className,
691
- intent: state,
692
- hasLeadingAddon: !!hasLeadingAddon,
693
- hasTrailingAddon: !!hasTrailingAddon,
694
- hasLeadingIcon: !!hasLeadingIcon,
695
- hasTrailingIcon: !!hasTrailingIcon,
696
- hasClearButton: !!hasClearButton
697
- }),
698
- disabled,
699
- readOnly,
700
- required: isRequired,
701
- "aria-describedby": description,
702
- "aria-invalid": isInvalid,
703
- onChange: handleChange,
704
- onKeyDown: handleKeyDown,
705
- ...others
706
- }
707
- );
708
- };
709
- var Input = Object.assign(Root4, {
710
- id: "Input"
711
- });
712
- Root4.displayName = "Input";
713
-
714
- // src/input/index.ts
715
- var InputGroup2 = Object.assign(InputGroup, {
716
- LeadingAddon: InputLeadingAddon,
717
- TrailingAddon: InputTrailingAddon,
718
- LeadingIcon: InputLeadingIcon,
719
- TrailingIcon: InputTrailingIcon,
720
- ClearButton: InputClearButton
721
- });
722
- InputGroup2.displayName = "InputGroup";
723
- InputLeadingAddon.displayName = "InputGroup.LeadingAddon";
724
- InputTrailingAddon.displayName = "InputGroup.TrailingAddon";
725
- InputLeadingIcon.displayName = "InputGroup.LeadingIcon";
726
- InputTrailingIcon.displayName = "InputGroup.TrailingIcon";
727
- InputClearButton.displayName = "InputGroup.ClearButton";
728
-
729
- // src/stepper/useStepper.ts
730
- var import_numberfield = require("@react-aria/numberfield");
731
- var import_numberfield2 = require("@react-stately/numberfield");
732
- var useStepper = ({
733
- inputRef,
734
- locale = "fr",
735
- ...rest
736
- }) => {
737
- const state = (0, import_numberfield2.useNumberFieldState)({
738
- ...rest,
739
- isDisabled: rest.disabled,
740
- isReadOnly: rest.readOnly,
741
- isRequired: rest.required,
742
- locale
743
- });
744
- const { groupProps, inputProps, incrementButtonProps, decrementButtonProps } = (0, import_numberfield.useNumberField)(
745
- {
746
- isWheelDisabled: false,
747
- ...rest,
748
- isDisabled: rest.disabled,
749
- isReadOnly: rest.readOnly,
750
- isRequired: rest.required
751
- },
752
- state,
753
- inputRef
754
- );
755
- return {
756
- groupProps,
757
- inputProps,
758
- incrementButtonProps,
759
- decrementButtonProps
760
- };
761
- };
762
-
763
- // src/stepper/Stepper.tsx
764
- var import_jsx_runtime13 = require("react/jsx-runtime");
765
- var StepperContext = (0, import_react6.createContext)(null);
766
- var Stepper = ({
767
- children,
768
- formatOptions,
769
- minValue,
770
- maxValue,
771
- ref: forwardedRef,
772
- ...stepperProps
773
- }) => {
774
- const inputRef = (0, import_react6.useRef)(null);
775
- const {
776
- groupProps,
777
- inputProps: _inputProps,
778
- incrementButtonProps: _incrementButtonProps,
779
- decrementButtonProps: _decrementButtonProps
780
- } = useStepper({
781
- ...{
782
- ...stepperProps,
783
- /**
784
- * To enable the possibility to init the stepper with empty (undefined) value,
785
- * we need to force the empty value to NaN.
786
- * Cf. https://github.com/adobe/react-spectrum/issues/5524
787
- */
788
- ..."value" in stepperProps && { value: stepperProps.value ?? NaN },
789
- onChange: stepperProps.onValueChange
790
- },
791
- formatOptions,
792
- minValue,
793
- maxValue,
794
- inputRef
795
- });
796
- const formFieldControlProps = (0, import_form_field3.useFormFieldControl)();
797
- const isWrappedInFormField = !!formFieldControlProps.id;
798
- const incrementButtonProps = {
799
- ..._incrementButtonProps,
800
- ...isWrappedInFormField && { "aria-controls": formFieldControlProps.id }
801
- };
802
- const decrementButtonProps = {
803
- ..._decrementButtonProps,
804
- ...isWrappedInFormField && { "aria-controls": formFieldControlProps.id }
805
- };
806
- const inputProps = {
807
- ..._inputProps,
808
- ...isWrappedInFormField && {
809
- id: formFieldControlProps.id,
810
- required: formFieldControlProps.isRequired,
811
- "aria-invalid": formFieldControlProps.isInvalid ? true : void 0
812
- }
813
- };
814
- const { onValueChange: _, ...remainingStepperProps } = stepperProps;
815
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
816
- StepperContext.Provider,
817
- {
818
- value: { incrementButtonProps, decrementButtonProps, inputProps, inputRef },
819
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
820
- InputGroup2,
821
- {
822
- ...remainingStepperProps,
823
- ...groupProps,
824
- "data-spark-component": "stepper",
825
- ref: forwardedRef,
826
- children
827
- }
828
- )
829
- }
830
- );
831
- };
832
- Stepper.displayName = "Stepper";
833
- var useStepperContext = () => {
834
- const context = (0, import_react6.useContext)(StepperContext);
835
- if (!context) {
836
- throw Error("useStepperContext must be used within a Stepper provider");
837
- }
838
- return context;
839
- };
840
-
841
- // src/stepper/StepperButton.tsx
842
- var import_button2 = require("@react-aria/button");
843
- var import_Minus = require("@spark-ui/icons/Minus");
844
- var import_Plus = require("@spark-ui/icons/Plus");
845
- var import_react8 = require("react");
846
-
847
- // src/button/Button.tsx
848
- var import_class_variance_authority13 = require("class-variance-authority");
849
- var import_react7 = require("react");
850
-
851
- // src/spinner/Spinner.styles.tsx
852
- var import_internal_utils2 = require("@spark-ui/internal-utils");
853
- var import_class_variance_authority11 = require("class-variance-authority");
854
- var defaultVariants = {
855
- intent: "current",
856
- size: "current",
857
- isBackgroundVisible: false
858
- };
859
- var spinnerStyles = (0, import_class_variance_authority11.cva)(
860
- ["inline-block", "border-solid", "rounded-full", "border-md", "animate-spin"],
861
- {
862
- variants: {
863
- /**
864
- * 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.
865
- */
866
- size: {
867
- current: ["u-current-font-size"],
868
- sm: ["w-sz-20", "h-sz-20"],
869
- md: ["w-sz-28", "h-sz-28"],
870
- full: ["w-full", "h-full"]
871
- },
872
- /**
873
- * Color scheme of the spinner.
874
- */
875
- intent: (0, import_internal_utils2.makeVariants)({
876
- current: ["border-current"],
877
- main: ["border-main"],
878
- support: ["border-support"],
879
- accent: ["border-accent"],
880
- basic: ["border-basic"],
881
- success: ["border-success"],
882
- alert: ["border-alert"],
883
- error: ["border-error"],
884
- info: ["border-info"],
885
- neutral: ["border-neutral"]
886
- }),
887
- /**
888
- * Size of the button.
889
- */
890
- isBackgroundVisible: {
891
- true: ["border-b-neutral-container", "border-l-neutral-container"],
892
- false: ["border-b-transparent", "border-l-transparent"]
893
- }
894
- },
895
- defaultVariants
896
- }
897
- );
898
-
899
- // src/spinner/Spinner.tsx
900
- var import_jsx_runtime14 = require("react/jsx-runtime");
901
- var Spinner = ({
902
- className,
903
- size = "current",
904
- intent = "current",
905
- label,
906
- isBackgroundVisible,
907
- ref,
908
- ...others
909
- }) => {
910
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
911
- "span",
912
- {
913
- role: "status",
914
- "data-spark-component": "spinner",
915
- ref,
916
- className: spinnerStyles({ className, size, intent, isBackgroundVisible }),
917
- ...others,
918
- children: label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(VisuallyHidden, { children: label })
919
- }
920
- );
921
- };
922
-
923
- // src/button/Button.styles.tsx
924
- var import_internal_utils8 = require("@spark-ui/internal-utils");
925
- var import_class_variance_authority12 = require("class-variance-authority");
926
-
927
- // src/button/variants/filled.ts
928
- var import_internal_utils3 = require("@spark-ui/internal-utils");
929
- var filledVariants = [
930
- // Main
931
- {
932
- intent: "main",
933
- design: "filled",
934
- class: (0, import_internal_utils3.tw)([
935
- "bg-main",
936
- "text-on-main",
937
- "hover:bg-main-hovered",
938
- "enabled:active:bg-main-hovered",
939
- "focus-visible:bg-main-hovered"
940
- ])
941
- },
942
- // Support
943
- {
944
- intent: "support",
945
- design: "filled",
946
- class: (0, import_internal_utils3.tw)([
947
- "bg-support",
948
- "text-on-support",
949
- "hover:bg-support-hovered",
950
- "enabled:active:bg-support-hovered",
951
- "focus-visible:bg-support-hovered"
952
- ])
953
- },
954
- // Accent
955
- {
956
- intent: "accent",
957
- design: "filled",
958
- class: (0, import_internal_utils3.tw)([
959
- "bg-accent",
960
- "text-on-accent",
961
- "hover:bg-accent-hovered",
962
- "enabled:active:bg-accent-hovered",
963
- "focus-visible:bg-accent-hovered"
964
- ])
965
- },
966
- // Basic
967
- {
968
- intent: "basic",
969
- design: "filled",
970
- class: (0, import_internal_utils3.tw)([
971
- "bg-basic",
972
- "text-on-basic",
973
- "hover:bg-basic-hovered",
974
- "enabled:active:bg-basic-hovered",
975
- "focus-visible:bg-basic-hovered"
976
- ])
977
- },
978
- // Success
979
- {
980
- intent: "success",
981
- design: "filled",
982
- class: (0, import_internal_utils3.tw)([
983
- "bg-success",
984
- "text-on-success",
985
- "hover:bg-success-hovered",
986
- "enabled:active:bg-success-hovered",
987
- "focus-visible:bg-success-hovered"
988
- ])
989
- },
990
- // Alert
991
- {
992
- intent: "alert",
993
- design: "filled",
994
- class: (0, import_internal_utils3.tw)([
995
- "bg-alert",
996
- "text-on-alert",
997
- "hover:bg-alert-hovered",
998
- "enabled:active:bg-alert-hovered",
999
- "focus-visible:bg-alert-hovered"
1000
- ])
1001
- },
1002
- // Danger
1003
- {
1004
- intent: "danger",
1005
- design: "filled",
1006
- class: (0, import_internal_utils3.tw)([
1007
- "text-on-error bg-error",
1008
- "hover:bg-error-hovered enabled:active:bg-error-hovered",
1009
- "focus-visible:bg-error-hovered"
1010
- ])
1011
- },
1012
- // Info
1013
- {
1014
- intent: "info",
1015
- design: "filled",
1016
- class: (0, import_internal_utils3.tw)([
1017
- "text-on-error bg-info",
1018
- "hover:bg-info-hovered enabled:active:bg-info-hovered",
1019
- "focus-visible:bg-info-hovered"
1020
- ])
1021
- },
1022
- // Neutral
1023
- {
1024
- intent: "neutral",
1025
- design: "filled",
1026
- class: (0, import_internal_utils3.tw)([
1027
- "bg-neutral",
1028
- "text-on-neutral",
1029
- "hover:bg-neutral-hovered",
1030
- "enabled:active:bg-neutral-hovered",
1031
- "focus-visible:bg-neutral-hovered"
1032
- ])
1033
- },
1034
- // Surface
1035
- {
1036
- intent: "surface",
1037
- design: "filled",
1038
- class: (0, import_internal_utils3.tw)([
1039
- "bg-surface",
1040
- "text-on-surface",
1041
- "hover:bg-surface-hovered",
1042
- "enabled:active:bg-surface-hovered",
1043
- "focus-visible:bg-surface-hovered"
1044
- ])
1045
- },
1046
- {
1047
- intent: "surfaceInverse",
1048
- design: "filled",
1049
- class: (0, import_internal_utils3.tw)([
1050
- "bg-surface-inverse",
1051
- "text-on-surface-inverse",
1052
- "hover:bg-surface-inverse-hovered",
1053
- "enabled:active:bg-surface-inverse-hovered",
1054
- "focus-visible:bg-surface-inverse-hovered"
1055
- ])
1056
- }
1057
- ];
1058
-
1059
- // src/button/variants/ghost.ts
1060
- var import_internal_utils4 = require("@spark-ui/internal-utils");
1061
- var ghostVariants = [
1062
- {
1063
- intent: "main",
1064
- design: "ghost",
1065
- class: (0, import_internal_utils4.tw)([
1066
- "text-on-main-container",
1067
- "hover:bg-main/dim-5",
1068
- "enabled:active:bg-main/dim-5",
1069
- "focus-visible:bg-main/dim-5"
1070
- ])
1071
- },
1072
- {
1073
- intent: "support",
1074
- design: "ghost",
1075
- class: (0, import_internal_utils4.tw)([
1076
- "text-on-support-container",
1077
- "hover:bg-support/dim-5",
1078
- "enabled:active:bg-support/dim-5",
1079
- "focus-visible:bg-support/dim-5"
1080
- ])
1081
- },
1082
- {
1083
- intent: "accent",
1084
- design: "ghost",
1085
- class: (0, import_internal_utils4.tw)([
1086
- "text-on-accent-container",
1087
- "hover:bg-accent/dim-5",
1088
- "enabled:active:bg-accent/dim-5",
1089
- "focus-visible:bg-accent/dim-5"
1090
- ])
1091
- },
1092
- {
1093
- intent: "basic",
1094
- design: "ghost",
1095
- class: (0, import_internal_utils4.tw)([
1096
- "text-on-basic-container",
1097
- "hover:bg-basic/dim-5",
1098
- "enabled:active:bg-basic/dim-5",
1099
- "focus-visible:bg-basic/dim-5"
1100
- ])
1101
- },
1102
- {
1103
- intent: "success",
1104
- design: "ghost",
1105
- class: (0, import_internal_utils4.tw)([
1106
- "text-on-success-container",
1107
- "hover:bg-success/dim-5",
1108
- "enabled:active:bg-success/dim-5",
1109
- "focus-visible:bg-success/dim-5"
1110
- ])
1111
- },
1112
- {
1113
- intent: "alert",
1114
- design: "ghost",
1115
- class: (0, import_internal_utils4.tw)([
1116
- "text-on-alert-container",
1117
- "hover:bg-alert/dim-5",
1118
- "enabled:active:bg-alert/dim-5",
1119
- "focus-visible:bg-alert/dim-5"
1120
- ])
1121
- },
1122
- {
1123
- intent: "danger",
1124
- design: "ghost",
1125
- class: (0, import_internal_utils4.tw)([
1126
- "text-on-error-container",
1127
- "hover:bg-error/dim-5",
1128
- "enabled:active:bg-error/dim-5",
1129
- "focus-visible:bg-error/dim-5"
1130
- ])
1131
- },
1132
- {
1133
- intent: "info",
1134
- design: "ghost",
1135
- class: (0, import_internal_utils4.tw)([
1136
- "text-on-info-container",
1137
- "hover:bg-info/dim-5",
1138
- "enabled:active:bg-info/dim-5",
1139
- "focus-visible:bg-info/dim-5"
1140
- ])
1141
- },
1142
- {
1143
- intent: "neutral",
1144
- design: "ghost",
1145
- class: (0, import_internal_utils4.tw)([
1146
- "text-on-neutral-container",
1147
- "hover:bg-neutral/dim-5",
1148
- "enabled:active:bg-neutral/dim-5",
1149
- "focus-visible:bg-neutral/dim-5"
1150
- ])
1151
- },
1152
- {
1153
- intent: "surface",
1154
- design: "ghost",
1155
- class: (0, import_internal_utils4.tw)([
1156
- "text-surface",
1157
- "hover:bg-surface/dim-5",
1158
- "enabled:active:bg-surface/dim-5",
1159
- "focus-visible:bg-surface/dim-5"
1160
- ])
1161
- },
1162
- {
1163
- intent: "surfaceInverse",
1164
- design: "ghost",
1165
- class: (0, import_internal_utils4.tw)([
1166
- "text-surface-inverse",
1167
- "hover:bg-surface-inverse/dim-5",
1168
- "enabled:active:bg-surface-inverse/dim-5",
1169
- "focus-visible:bg-surface-inverse/dim-5"
1170
- ])
1171
- }
1172
- ];
1173
-
1174
- // src/button/variants/outlined.ts
1175
- var import_internal_utils5 = require("@spark-ui/internal-utils");
1176
- var outlinedVariants = [
1177
- {
1178
- intent: "main",
1179
- design: "outlined",
1180
- class: (0, import_internal_utils5.tw)([
1181
- "hover:bg-main/dim-5",
1182
- "enabled:active:bg-main/dim-5",
1183
- "focus-visible:bg-main/dim-5",
1184
- "text-main"
1185
- ])
1186
- },
1187
- {
1188
- intent: "support",
1189
- design: "outlined",
1190
- class: (0, import_internal_utils5.tw)([
1191
- "hover:bg-support/dim-5",
1192
- "enabled:active:bg-support/dim-5",
1193
- "focus-visible:bg-support/dim-5",
1194
- "text-support"
1195
- ])
1196
- },
1197
- {
1198
- intent: "accent",
1199
- design: "outlined",
1200
- class: (0, import_internal_utils5.tw)([
1201
- "hover:bg-accent/dim-5",
1202
- "enabled:active:bg-accent/dim-5",
1203
- "focus-visible:bg-accent/dim-5",
1204
- "text-accent"
1205
- ])
1206
- },
1207
- {
1208
- intent: "basic",
1209
- design: "outlined",
1210
- class: (0, import_internal_utils5.tw)([
1211
- "hover:bg-basic/dim-5",
1212
- "enabled:active:bg-basic/dim-5",
1213
- "focus-visible:bg-basic/dim-5",
1214
- "text-basic"
1215
- ])
1216
- },
1217
- {
1218
- intent: "success",
1219
- design: "outlined",
1220
- class: (0, import_internal_utils5.tw)([
1221
- "hover:bg-success/dim-5",
1222
- "enabled:active:bg-success/dim-5",
1223
- "focus-visible:bg-success/dim-5",
1224
- "text-success"
1225
- ])
1226
- },
1227
- {
1228
- intent: "alert",
1229
- design: "outlined",
1230
- class: (0, import_internal_utils5.tw)([
1231
- "hover:bg-alert/dim-5",
1232
- "enabled:active:bg-alert/dim-5",
1233
- "focus-visible:bg-alert/dim-5",
1234
- "text-alert"
1235
- ])
1236
- },
1237
- {
1238
- intent: "danger",
1239
- design: "outlined",
1240
- class: (0, import_internal_utils5.tw)([
1241
- "hover:bg-error/dim-5",
1242
- "enabled:active:bg-error/dim-5",
1243
- "focus-visible:bg-error/dim-5",
1244
- "text-error"
1245
- ])
1246
- },
1247
- {
1248
- intent: "info",
1249
- design: "outlined",
1250
- class: (0, import_internal_utils5.tw)([
1251
- "hover:bg-info/dim-5",
1252
- "enabled:active:bg-info/dim-5",
1253
- "focus-visible:bg-info/dim-5",
1254
- "text-info"
1255
- ])
1256
- },
1257
- {
1258
- intent: "neutral",
1259
- design: "outlined",
1260
- class: (0, import_internal_utils5.tw)([
1261
- "hover:bg-neutral/dim-5",
1262
- "enabled:active:bg-neutral/dim-5",
1263
- "focus-visible:bg-neutral/dim-5",
1264
- "text-neutral"
1265
- ])
1266
- },
1267
- {
1268
- intent: "surface",
1269
- design: "outlined",
1270
- class: (0, import_internal_utils5.tw)([
1271
- "hover:bg-surface/dim-5",
1272
- "enabled:active:bg-surface/dim-5",
1273
- "focus-visible:bg-surface/dim-5",
1274
- "text-surface"
1275
- ])
1276
- },
1277
- {
1278
- intent: "surfaceInverse",
1279
- design: "outlined",
1280
- class: (0, import_internal_utils5.tw)([
1281
- "hover:bg-surface-inverse/dim-5",
1282
- "enabled:active:bg-surface-inverse/dim-5",
1283
- "focus-visible:bg-surface-inverse/dim-5",
1284
- "text-surface-inverse"
1285
- ])
1286
- }
1287
- ];
1288
-
1289
- // src/button/variants/tinted.ts
1290
- var import_internal_utils6 = require("@spark-ui/internal-utils");
1291
- var tintedVariants = [
1292
- {
1293
- intent: "main",
1294
- design: "tinted",
1295
- class: (0, import_internal_utils6.tw)([
1296
- "bg-main-container",
1297
- "text-on-main-container",
1298
- "hover:bg-main-container-hovered",
1299
- "enabled:active:bg-main-container-hovered",
1300
- "focus-visible:bg-main-container-hovered"
1301
- ])
1302
- },
1303
- {
1304
- intent: "support",
1305
- design: "tinted",
1306
- class: (0, import_internal_utils6.tw)([
1307
- "bg-support-container",
1308
- "text-on-support-container",
1309
- "hover:bg-support-container-hovered",
1310
- "enabled:active:bg-support-container-hovered",
1311
- "focus-visible:bg-support-container-hovered"
1312
- ])
1313
- },
1314
- {
1315
- intent: "accent",
1316
- design: "tinted",
1317
- class: (0, import_internal_utils6.tw)([
1318
- "bg-accent-container",
1319
- "text-on-accent-container",
1320
- "hover:bg-accent-container-hovered",
1321
- "enabled:active:bg-accent-container-hovered",
1322
- "focus-visible:bg-accent-container-hovered"
1323
- ])
1324
- },
1325
- {
1326
- intent: "basic",
1327
- design: "tinted",
1328
- class: (0, import_internal_utils6.tw)([
1329
- "bg-basic-container",
1330
- "text-on-basic-container",
1331
- "hover:bg-basic-container-hovered",
1332
- "enabled:active:bg-basic-container-hovered",
1333
- "focus-visible:bg-basic-container-hovered"
1334
- ])
1335
- },
1336
- {
1337
- intent: "success",
1338
- design: "tinted",
1339
- class: (0, import_internal_utils6.tw)([
1340
- "bg-success-container",
1341
- "text-on-success-container",
1342
- "hover:bg-success-container-hovered",
1343
- "enabled:active:bg-success-container-hovered",
1344
- "focus-visible:bg-success-container-hovered"
1345
- ])
1346
- },
1347
- {
1348
- intent: "alert",
1349
- design: "tinted",
1350
- class: (0, import_internal_utils6.tw)([
1351
- "bg-alert-container",
1352
- "text-on-alert-container",
1353
- "hover:bg-alert-container-hovered",
1354
- "enabled:active:bg-alert-container-hovered",
1355
- "focus-visible:bg-alert-container-hovered"
1356
- ])
1357
- },
1358
- {
1359
- intent: "danger",
1360
- design: "tinted",
1361
- class: (0, import_internal_utils6.tw)([
1362
- "bg-error-container",
1363
- "text-on-error-container",
1364
- "hover:bg-error-container-hovered",
1365
- "enabled:active:bg-error-container-hovered",
1366
- "focus-visible:bg-error-container-hovered"
1367
- ])
1368
- },
1369
- {
1370
- intent: "info",
1371
- design: "tinted",
1372
- class: (0, import_internal_utils6.tw)([
1373
- "bg-info-container",
1374
- "text-on-info-container",
1375
- "hover:bg-info-container-hovered",
1376
- "enabled:active:bg-info-container-hovered",
1377
- "focus-visible:bg-info-container-hovered"
1378
- ])
1379
- },
1380
- {
1381
- intent: "neutral",
1382
- design: "tinted",
1383
- class: (0, import_internal_utils6.tw)([
1384
- "bg-neutral-container",
1385
- "text-on-neutral-container",
1386
- "hover:bg-neutral-container-hovered",
1387
- "enabled:active:bg-neutral-container-hovered",
1388
- "focus-visible:bg-neutral-container-hovered"
1389
- ])
1390
- },
1391
- {
1392
- intent: "surface",
1393
- design: "tinted",
1394
- class: (0, import_internal_utils6.tw)([
1395
- "bg-surface",
1396
- "text-on-surface",
1397
- "hover:bg-surface-hovered",
1398
- "enabled:active:bg-surface-hovered",
1399
- "focus-visible:bg-surface-hovered"
1400
- ])
1401
- },
1402
- {
1403
- intent: "surfaceInverse",
1404
- design: "tinted",
1405
- class: (0, import_internal_utils6.tw)([
1406
- "bg-surface-inverse",
1407
- "text-on-surface-inverse",
1408
- "hover:bg-surface-inverse-hovered",
1409
- "enabled:active:bg-surface-inverse-hovered",
1410
- "focus-visible:bg-surface-inverse-hovered"
1411
- ])
1412
- }
1413
- ];
1414
-
1415
- // src/button/variants/contrast.ts
1416
- var import_internal_utils7 = require("@spark-ui/internal-utils");
1417
- var contrastVariants = [
1418
- {
1419
- intent: "main",
1420
- design: "contrast",
1421
- class: (0, import_internal_utils7.tw)([
1422
- "text-on-main-contaier bg-surface",
1423
- "hover:bg-main-container-hovered",
1424
- "enabled:active:bg-main-container-hovered",
1425
- "focus-visible:bg-main-container-hovered"
1426
- ])
1427
- },
1428
- {
1429
- intent: "support",
1430
- design: "contrast",
1431
- class: (0, import_internal_utils7.tw)([
1432
- "text-on-support-container bg-surface",
1433
- "hover:bg-support-container-hovered",
1434
- "enabled:active:bg-support-container-hovered",
1435
- "focus-visible:bg-support-container-hovered"
1436
- ])
1437
- },
1438
- {
1439
- intent: "accent",
1440
- design: "contrast",
1441
- class: (0, import_internal_utils7.tw)([
1442
- "text-on-accent-container bg-surface",
1443
- "hover:bg-accent-container-hovered",
1444
- "enabled:active:bg-accent-container-hovered",
1445
- "focus-visible:bg-accent-container-hovered"
1446
- ])
1447
- },
1448
- {
1449
- intent: "basic",
1450
- design: "contrast",
1451
- class: (0, import_internal_utils7.tw)([
1452
- "text-on-basic-container bg-surface",
1453
- "hover:bg-basic-container-hovered",
1454
- "enabled:active:bg-basic-container-hovered",
1455
- "focus-visible:bg-basic-container-hovered"
1456
- ])
1457
- },
1458
- {
1459
- intent: "success",
1460
- design: "contrast",
1461
- class: (0, import_internal_utils7.tw)([
1462
- "text-on-success-container bg-surface",
1463
- "hover:bg-success-container-hovered",
1464
- "enabled:active:bg-success-container-hovered",
1465
- "focus-visible:bg-success-container-hovered"
1466
- ])
1467
- },
1468
- {
1469
- intent: "alert",
1470
- design: "contrast",
1471
- class: (0, import_internal_utils7.tw)([
1472
- "text-on-alert-container bg-surface",
1473
- "hover:bg-alert-container-hovered",
1474
- "enabled:active:bg-alert-container-hovered",
1475
- "focus-visible:bg-alert-container-hovered"
1476
- ])
1477
- },
1478
- {
1479
- intent: "danger",
1480
- design: "contrast",
1481
- class: (0, import_internal_utils7.tw)([
1482
- "text-on-error-container bg-surface",
1483
- "hover:bg-error-container-hovered",
1484
- "enabled:active:bg-error-container-hovered",
1485
- "focus-visible:bg-error-container-hovered"
1486
- ])
1487
- },
1488
- {
1489
- intent: "info",
1490
- design: "contrast",
1491
- class: (0, import_internal_utils7.tw)([
1492
- "text-on-info-container bg-surface",
1493
- "hover:bg-info-container-hovered",
1494
- "enabled:active:bg-info-container-hovered",
1495
- "focus-visible:bg-info-container-hovered"
1496
- ])
1497
- },
1498
- {
1499
- intent: "neutral",
1500
- design: "contrast",
1501
- class: (0, import_internal_utils7.tw)([
1502
- "text-on-neutral-container bg-surface",
1503
- "hover:bg-neutral-container-hovered",
1504
- "enabled:active:bg-neutral-container-hovered",
1505
- "focus-visible:bg-neutral-container-hovered"
1506
- ])
1507
- },
1508
- {
1509
- intent: "surface",
1510
- design: "contrast",
1511
- class: (0, import_internal_utils7.tw)([
1512
- "text-on-surface bg-surface",
1513
- "hover:bg-surface-hovered",
1514
- "enabled:active:bg-surface-hovered",
1515
- "focus-visible:bg-surface-hovered"
1516
- ])
1517
- },
1518
- {
1519
- intent: "surfaceInverse",
1520
- design: "contrast",
1521
- class: (0, import_internal_utils7.tw)([
1522
- "text-on-surface-inverse bg-surface-inverse",
1523
- "hover:bg-surface-inverse-hovered",
1524
- "enabled:active:bg-surface-inverse-hovered",
1525
- "focus-visible:bg-surface-inverse-hovered"
1526
- ])
1527
- }
1528
- ];
1529
-
1530
- // src/button/Button.styles.tsx
1531
- var buttonStyles = (0, import_class_variance_authority12.cva)(
1532
- [
1533
- "u-shadow-border-transition",
1534
- "box-border inline-flex items-center justify-center gap-md whitespace-nowrap",
1535
- "default:px-lg",
1536
- "text-body-1 font-bold",
1537
- "focus-visible:u-outline"
1538
- ],
1539
- {
1540
- variants: {
1541
- /**
1542
- * Main style of the button.
1543
- *
1544
- * - `filled`: Button will be plain.
1545
- *
1546
- * - `outlined`: Button will be transparent with an outline.
1547
- *
1548
- * - `tinted`: Button will be filled but using a lighter color scheme.
1549
- *
1550
- * - `ghost`: Button will look like a link. No borders, plain text.
1551
- *
1552
- * - `contrast`: Button will be surface filled. No borders, plain text.
1553
- *
1554
- */
1555
- design: (0, import_internal_utils8.makeVariants)({
1556
- filled: [],
1557
- outlined: ["bg-transparent", "border-sm", "border-current"],
1558
- tinted: [],
1559
- ghost: ["default:-mx-md px-md hover:bg-main/dim-5"],
1560
- contrast: []
1561
- }),
1562
- underline: {
1563
- true: ["underline"]
1564
- },
1565
- /**
1566
- * Color scheme of the button.
1567
- */
1568
- intent: (0, import_internal_utils8.makeVariants)({
1569
- main: [],
1570
- support: [],
1571
- accent: [],
1572
- basic: [],
1573
- success: [],
1574
- alert: [],
1575
- danger: [],
1576
- info: [],
1577
- neutral: [],
1578
- surface: [],
1579
- surfaceInverse: []
1580
- }),
1581
- /**
1582
- * Size of the button.
1583
- */
1584
- size: (0, import_internal_utils8.makeVariants)({
1585
- sm: ["min-w-sz-32", "h-sz-32"],
1586
- md: ["min-w-sz-44", "h-sz-44"],
1587
- lg: ["min-w-sz-56", "h-sz-56"]
1588
- }),
1589
- /**
1590
- * Shape of the button.
1591
- */
1592
- shape: (0, import_internal_utils8.makeVariants)({
1593
- rounded: ["rounded-lg"],
1594
- square: ["rounded-0"],
1595
- pill: ["rounded-full"]
1596
- }),
1597
- /**
1598
- * Disable the button, preventing user interaction and adding opacity.
1599
- */
1600
- disabled: {
1601
- true: ["cursor-not-allowed", "opacity-dim-3"],
1602
- false: ["cursor-pointer"]
1603
- }
1604
- },
1605
- compoundVariants: [
1606
- ...filledVariants,
1607
- ...outlinedVariants,
1608
- ...tintedVariants,
1609
- ...ghostVariants,
1610
- ...contrastVariants
1611
- ],
1612
- defaultVariants: {
1613
- design: "filled",
1614
- intent: "main",
1615
- size: "md",
1616
- shape: "rounded"
1617
- }
1618
- }
1619
- );
1620
-
1621
- // src/button/Button.tsx
1622
- var import_jsx_runtime15 = require("react/jsx-runtime");
1623
- var blockedEventHandlers = [
1624
- "onClick",
1625
- "onMouseDown",
1626
- "onMouseUp",
1627
- "onMouseEnter",
1628
- "onMouseLeave",
1629
- "onMouseOver",
1630
- "onMouseOut",
1631
- "onKeyDown",
1632
- "onKeyPress",
1633
- "onKeyUp",
1634
- "onSubmit"
1635
- ];
1636
- var Button = ({
1637
- children,
1638
- design = "filled",
1639
- disabled = false,
1640
- intent = "main",
1641
- isLoading = false,
1642
- loadingLabel,
1643
- loadingText,
1644
- shape = "rounded",
1645
- size = "md",
1646
- asChild,
1647
- className,
1648
- underline = false,
1649
- ref,
1650
- ...others
1651
- }) => {
1652
- const Component = asChild ? Slot : "button";
1653
- const shouldNotInteract = !!disabled || isLoading;
1654
- const disabledEventHandlers = (0, import_react7.useMemo)(() => {
1655
- const result = {};
1656
- if (shouldNotInteract) {
1657
- blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
1658
- }
1659
- return result;
1660
- }, [shouldNotInteract]);
1661
- const spinnerProps = {
1662
- size: "current",
1663
- className: loadingText ? "inline-block" : "absolute",
1664
- ...loadingLabel && { "aria-label": loadingLabel }
1665
- };
1666
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1667
- Component,
1668
- {
1669
- "data-spark-component": "button",
1670
- ...Component === "button" && { type: "button" },
1671
- ref,
1672
- className: buttonStyles({
1673
- className,
1674
- design,
1675
- disabled: shouldNotInteract,
1676
- intent,
1677
- shape,
1678
- size,
1679
- underline
1680
- }),
1681
- disabled: !!disabled,
1682
- "aria-busy": isLoading,
1683
- "aria-live": isLoading ? "assertive" : "off",
1684
- ...others,
1685
- ...disabledEventHandlers,
1686
- children: wrapPolymorphicSlot(
1687
- asChild,
1688
- children,
1689
- (slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
1690
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Spinner, { ...spinnerProps }),
1691
- loadingText && loadingText,
1692
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1693
- "div",
1694
- {
1695
- "aria-hidden": true,
1696
- className: (0, import_class_variance_authority13.cx)("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
1697
- children: slotted
1698
- }
1699
- )
1700
- ] }) : slotted
1701
- )
1702
- }
1703
- );
1704
- };
1705
- Button.displayName = "Button";
1706
-
1707
- // src/icon-button/IconButton.styles.tsx
1708
- var import_internal_utils9 = require("@spark-ui/internal-utils");
1709
- var import_class_variance_authority14 = require("class-variance-authority");
1710
- var iconButtonStyles = (0, import_class_variance_authority14.cva)(["pl-0 pr-0"], {
1711
- variants: {
1712
- /**
1713
- * Sets the size of the icon.
1714
- */
1715
- size: (0, import_internal_utils9.makeVariants)({
1716
- sm: ["text-body-1"],
1717
- md: ["text-body-1"],
1718
- lg: ["text-display-3"]
1719
- })
1720
- }
1721
- });
1722
-
1723
- // src/icon-button/IconButton.tsx
1724
- var import_jsx_runtime16 = require("react/jsx-runtime");
1725
- var IconButton = ({
1726
- design = "filled",
1727
- disabled = false,
1728
- intent = "main",
1729
- shape = "rounded",
1730
- size = "md",
1731
- className,
1732
- ref,
1733
- ...others
1734
- }) => {
1735
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1736
- Button,
1737
- {
1738
- "data-spark-component": "icon-button",
1739
- ref,
1740
- className: iconButtonStyles({ size, className }),
1741
- design,
1742
- disabled,
1743
- intent,
1744
- shape,
1745
- size,
1746
- ...others
1747
- }
1748
- );
1749
- };
1750
- IconButton.displayName = "IconButton";
1751
-
1752
- // src/stepper/StepperButton.tsx
1753
- var import_jsx_runtime17 = require("react/jsx-runtime");
1754
- var IncrementButton = ({
1755
- children,
1756
- design = "ghost",
1757
- intent = "neutral",
1758
- className,
1759
- ref: forwardedRef,
1760
- ...rest
1761
- }) => {
1762
- const innerRef = (0, import_react8.useRef)(null);
1763
- const ref = forwardedRef && typeof forwardedRef !== "function" ? forwardedRef : innerRef;
1764
- const { incrementButtonProps } = useStepperContext();
1765
- const { buttonProps } = (0, import_button2.useButton)({ ...incrementButtonProps, ...rest }, ref);
1766
- return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(InputGroup2.TrailingAddon, { asChild: true, "data-spark-component": "stepper-increment-button", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1767
- IconButton,
1768
- {
1769
- ref,
1770
- design,
1771
- intent,
1772
- className,
1773
- "aria-label": buttonProps["aria-label"],
1774
- ...buttonProps,
1775
- disabled: rest.disabled || buttonProps.disabled,
1776
- children: children || /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Plus.Plus, {}) })
1777
- }
1778
- ) });
1779
- };
1780
- var DecrementButton = ({
1781
- children,
1782
- design = "ghost",
1783
- intent = "neutral",
1784
- className,
1785
- ref: forwardedRef,
1786
- ...rest
1787
- }) => {
1788
- const innerRef = (0, import_react8.useRef)(null);
1789
- const ref = forwardedRef && typeof forwardedRef !== "function" ? forwardedRef : innerRef;
1790
- const { decrementButtonProps } = useStepperContext();
1791
- const { buttonProps } = (0, import_button2.useButton)({ ...decrementButtonProps, ...rest }, ref);
1792
- return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(InputGroup2.LeadingAddon, { asChild: true, "data-spark-component": "stepper-decrement-button", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1793
- IconButton,
1794
- {
1795
- ref,
1796
- design,
1797
- intent,
1798
- className,
1799
- "aria-label": buttonProps["aria-label"],
1800
- ...buttonProps,
1801
- disabled: rest.disabled || buttonProps.disabled,
1802
- children: children || /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Minus.Minus, {}) })
1803
- }
1804
- ) });
1805
- };
1806
- var StepperIncrementButton = Object.assign(IncrementButton, {
1807
- id: "TrailingAddon"
1808
- });
1809
- var StepperDecrementButton = Object.assign(DecrementButton, {
1810
- id: "LeadingAddon"
1811
- });
1812
- IncrementButton.displayName = "Stepper.DecrementButton";
1813
- DecrementButton.displayName = "Stepper.DecrementButton";
1814
-
1815
- // src/stepper/StepperInput.tsx
1816
- var import_use_merge_refs2 = require("@spark-ui/hooks/use-merge-refs");
1817
- var import_jsx_runtime18 = require("react/jsx-runtime");
1818
- var Input2 = ({ ref: forwardedRef, ...props }) => {
1819
- const { inputRef, inputProps } = useStepperContext();
1820
- const ref = (0, import_use_merge_refs2.useMergeRefs)(forwardedRef, inputRef);
1821
- const { className = "", ...remainingProps } = props;
1822
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1823
- Input,
1824
- {
1825
- ref,
1826
- ...remainingProps,
1827
- ...inputProps,
1828
- className: `min-w-sz-56 text-center ${className}`
1829
- }
1830
- );
1831
- };
1832
- var StepperInput = Object.assign(Input2, {
1833
- id: "Input"
1834
- });
1835
- Input2.displayName = "Stepper.Input";
1836
-
1837
- // src/stepper/index.ts
1838
- var Stepper2 = Object.assign(Stepper, { IncrementButton: StepperIncrementButton, DecrementButton: StepperDecrementButton, Input: StepperInput });
1839
- Stepper2.displayName = "Stepper";
1840
- StepperIncrementButton.displayName = "Stepper.IncrementButton";
1841
- StepperDecrementButton.displayName = "Stepper.DecrementButton";
1842
- StepperInput.displayName = "Stepper.Input";
1843
- // Annotate the CommonJS export names for ESM import in node:
1844
- 0 && (module.exports = {
1845
- Stepper
1846
- });
1847
- //# sourceMappingURL=index.js.map