@spark-ui/components 16.2.2 → 17.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.
- package/dist/{Button-DPncfbbM.mjs → Button-1M9DcZl0.mjs} +25 -79
- package/dist/Button-1M9DcZl0.mjs.map +1 -0
- package/dist/Button-FZceRWG2.js +2 -0
- package/dist/Button-FZceRWG2.js.map +1 -0
- package/dist/{Icon-C23-htlD.mjs → Icon-BO327oHU.mjs} +8 -9
- package/dist/Icon-BO327oHU.mjs.map +1 -0
- package/dist/Icon-C-cNTnzd.js +2 -0
- package/dist/Icon-C-cNTnzd.js.map +1 -0
- package/dist/{IconButton-D3g86WpZ.js → IconButton-BR1bJSQA.js} +2 -2
- package/dist/{IconButton-D3g86WpZ.js.map → IconButton-BR1bJSQA.js.map} +1 -1
- package/dist/{IconButton-Bfd-6BAD.mjs → IconButton-DdB3Pq13.mjs} +2 -2
- package/dist/{IconButton-Bfd-6BAD.mjs.map → IconButton-DdB3Pq13.mjs.map} +1 -1
- package/dist/Spinner-Br4Rp9V2.js +2 -0
- package/dist/Spinner-Br4Rp9V2.js.map +1 -0
- package/dist/{Spinner-aLrtE2JN.mjs → Spinner-Co3AjkQV.mjs} +7 -8
- package/dist/Spinner-Co3AjkQV.mjs.map +1 -0
- package/dist/TextLink-5MvP0P8D.js +2 -0
- package/dist/TextLink-5MvP0P8D.js.map +1 -0
- package/dist/{TextLink-D7mOCjY_.mjs → TextLink-Cc_LeVcx.mjs} +10 -11
- package/dist/TextLink-Cc_LeVcx.mjs.map +1 -0
- package/dist/accordion/index.js +1 -1
- package/dist/accordion/index.mjs +1 -1
- package/dist/avatar/index.js +1 -1
- package/dist/avatar/index.mjs +2 -2
- package/dist/badge/BadgeItem.styles.d.ts +1 -1
- package/dist/badge/index.js +1 -1
- package/dist/badge/index.js.map +1 -1
- package/dist/badge/index.mjs +10 -11
- package/dist/badge/index.mjs.map +1 -1
- package/dist/breadcrumb/index.js +1 -1
- package/dist/breadcrumb/index.mjs +2 -2
- package/dist/button/Button.styles.d.ts +1 -1
- package/dist/button/index.js +1 -1
- package/dist/button/index.mjs +1 -1
- package/dist/button/variants/contrast.d.ts +0 -4
- package/dist/button/variants/filled.d.ts +0 -4
- package/dist/button/variants/ghost.d.ts +0 -4
- package/dist/button/variants/outlined.d.ts +0 -4
- package/dist/button/variants/tinted.d.ts +0 -4
- package/dist/card/Backdrop.d.ts +1 -1
- package/dist/card/Card.styles.d.ts +1 -1
- package/dist/card/Content.styles.d.ts +1 -1
- package/dist/card/index.js +1 -1
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs +12 -31
- package/dist/card/index.mjs.map +1 -1
- package/dist/carousel/CarouselPageIndicator.d.ts +1 -1
- package/dist/carousel/index.js +1 -1
- package/dist/carousel/index.js.map +1 -1
- package/dist/carousel/index.mjs +29 -29
- package/dist/carousel/index.mjs.map +1 -1
- package/dist/checkbox/CheckboxInput.styles.d.ts +1 -1
- package/dist/checkbox/index.js +1 -1
- package/dist/checkbox/index.js.map +1 -1
- package/dist/checkbox/index.mjs +26 -33
- package/dist/checkbox/index.mjs.map +1 -1
- package/dist/chip/Chip.styles.d.ts +1 -1
- package/dist/chip/index.js +1 -1
- package/dist/chip/index.js.map +1 -1
- package/dist/chip/index.mjs +33 -68
- package/dist/chip/index.mjs.map +1 -1
- package/dist/chip/variants/dashed.d.ts +0 -4
- package/dist/chip/variants/outlined.d.ts +0 -4
- package/dist/chip/variants/tinted.d.ts +0 -4
- package/dist/combobox/index.js +1 -1
- package/dist/combobox/index.mjs +3 -3
- package/dist/dialog/index.js +1 -1
- package/dist/dialog/index.mjs +2 -2
- package/dist/drawer/index.js +1 -1
- package/dist/drawer/index.mjs +2 -2
- package/dist/dropdown/index.js +1 -1
- package/dist/dropdown/index.mjs +1 -1
- package/dist/file-upload/index.js +1 -1
- package/dist/file-upload/index.js.map +1 -1
- package/dist/file-upload/index.mjs +4 -4
- package/dist/file-upload/index.mjs.map +1 -1
- package/dist/form-field/index.js +1 -1
- package/dist/form-field/index.mjs +1 -1
- package/dist/icon/Icon.styles.d.ts +1 -1
- package/dist/icon/index.js +1 -1
- package/dist/icon/index.mjs +1 -1
- package/dist/icon-button/index.js +1 -1
- package/dist/icon-button/index.mjs +1 -1
- package/dist/input/index.js +1 -1
- package/dist/input/index.mjs +1 -1
- package/dist/pagination/index.js +1 -1
- package/dist/pagination/index.mjs +3 -3
- package/dist/popover/PopoverContent.styles.d.ts +1 -1
- package/dist/popover/PopoverContext.d.ts +1 -1
- package/dist/popover/index.js +1 -1
- package/dist/popover/index.js.map +1 -1
- package/dist/popover/index.mjs +33 -35
- package/dist/popover/index.mjs.map +1 -1
- package/dist/progress/ProgressIndicator.d.ts +1 -1
- package/dist/progress/index.js +1 -1
- package/dist/progress/index.js.map +1 -1
- package/dist/progress/index.mjs +42 -43
- package/dist/progress/index.mjs.map +1 -1
- package/dist/progress-tracker/ProgressTrackerStep.styles.d.ts +1 -1
- package/dist/progress-tracker/ProgressTrackerStepIndicator.styles.d.ts +1 -1
- package/dist/progress-tracker/index.js +1 -1
- package/dist/progress-tracker/index.js.map +1 -1
- package/dist/progress-tracker/index.mjs +38 -38
- package/dist/progress-tracker/index.mjs.map +1 -1
- package/dist/radio-group/RadioIndicator.styles.d.ts +1 -1
- package/dist/radio-group/RadioInput.styles.d.ts +1 -1
- package/dist/radio-group/index.js +1 -1
- package/dist/radio-group/index.js.map +1 -1
- package/dist/radio-group/index.mjs +47 -53
- package/dist/radio-group/index.mjs.map +1 -1
- package/dist/rating/index.js +1 -1
- package/dist/rating/index.mjs +1 -1
- package/dist/rating-display/index.js +1 -1
- package/dist/rating-display/index.mjs +1 -1
- package/dist/scrolling-list/index.js +1 -1
- package/dist/scrolling-list/index.mjs +3 -3
- package/dist/segmented-gauge/SegmentedGauge.d.ts +1 -1
- package/dist/segmented-gauge/SegmentedGaugeContext.d.ts +1 -1
- package/dist/segmented-gauge/index.js +1 -1
- package/dist/segmented-gauge/index.js.map +1 -1
- package/dist/segmented-gauge/index.mjs +14 -16
- package/dist/segmented-gauge/index.mjs.map +1 -1
- package/dist/select/index.js +1 -1
- package/dist/select/index.mjs +1 -1
- package/dist/slider/SliderThumb.styles.d.ts +1 -1
- package/dist/slider/SliderTrack.styles.d.ts +1 -1
- package/dist/slider/index.js +1 -1
- package/dist/slider/index.js.map +1 -1
- package/dist/slider/index.mjs +3 -5
- package/dist/slider/index.mjs.map +1 -1
- package/dist/snackbar/SnackbarItem.styles.d.ts +1 -1
- package/dist/snackbar/index.js +1 -1
- package/dist/snackbar/index.js.map +1 -1
- package/dist/snackbar/index.mjs +24 -35
- package/dist/snackbar/index.mjs.map +1 -1
- package/dist/snackbar/snackbarVariants.d.ts +0 -8
- package/dist/spinner/Spinner.styles.d.ts +1 -1
- package/dist/spinner/index.js +1 -1
- package/dist/spinner/index.mjs +1 -1
- package/dist/stepper/index.js +1 -1
- package/dist/stepper/index.mjs +2 -2
- package/dist/switch/SwitchInput.d.ts +7 -5
- package/dist/switch/SwitchInput.styles.d.ts +1 -1
- package/dist/switch/index.js +1 -1
- package/dist/switch/index.js.map +1 -1
- package/dist/switch/index.mjs +80 -91
- package/dist/switch/index.mjs.map +1 -1
- package/dist/tabs/TabsTrigger.styles.d.ts +1 -1
- package/dist/tabs/index.js +1 -1
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +20 -21
- package/dist/tabs/index.mjs.map +1 -1
- package/dist/tag/Tag.styles.d.ts +1 -1
- package/dist/tag/index.js +1 -1
- package/dist/tag/index.js.map +1 -1
- package/dist/tag/index.mjs +15 -31
- package/dist/tag/index.mjs.map +1 -1
- package/dist/tag/variants/filled.d.ts +0 -4
- package/dist/tag/variants/outlined.d.ts +0 -4
- package/dist/tag/variants/tinted.d.ts +0 -4
- package/dist/text-link/TextLink.d.ts +1 -1
- package/dist/text-link/index.js +1 -1
- package/dist/text-link/index.mjs +1 -1
- package/dist/toast/Toast.styles.d.ts +1 -1
- package/dist/toast/index.js +1 -1
- package/dist/toast/index.js.map +1 -1
- package/dist/toast/index.mjs +25 -37
- package/dist/toast/index.mjs.map +1 -1
- package/dist/toast/types.d.ts +1 -1
- package/package.json +4 -4
- package/dist/Button-B6rA3-e5.js +0 -2
- package/dist/Button-B6rA3-e5.js.map +0 -1
- package/dist/Button-DPncfbbM.mjs.map +0 -1
- package/dist/Icon-C23-htlD.mjs.map +0 -1
- package/dist/Icon-CF0W0LKr.js +0 -2
- package/dist/Icon-CF0W0LKr.js.map +0 -1
- package/dist/Spinner-_Kffli3B.js +0 -2
- package/dist/Spinner-_Kffli3B.js.map +0 -1
- package/dist/Spinner-aLrtE2JN.mjs.map +0 -1
- package/dist/TextLink-C3xDLsbC.js +0 -2
- package/dist/TextLink-C3xDLsbC.js.map +0 -1
- package/dist/TextLink-D7mOCjY_.mjs.map +0 -1
package/dist/chip/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as i, jsxs as A, Fragment as F } from "react/jsx-runtime";
|
|
2
2
|
import { tw as e, makeVariants as E } from "@spark-ui/internal-utils";
|
|
3
3
|
import { cva as B, cx as C } from "class-variance-authority";
|
|
4
4
|
import { createContext as H, useContext as K, Children as O, isValidElement as W, useCallback as q, cloneElement as G } from "react";
|
|
@@ -6,7 +6,7 @@ import { useCombinedState as V } from "@spark-ui/hooks/use-combined-state";
|
|
|
6
6
|
import { emulateTab as k } from "emulate-tab";
|
|
7
7
|
import { S as L } from "../Slot-DLY1rJrG.mjs";
|
|
8
8
|
import { Close as J } from "@spark-ui/icons/Close";
|
|
9
|
-
import { I as M } from "../Icon-
|
|
9
|
+
import { I as M } from "../Icon-BO327oHU.mjs";
|
|
10
10
|
const Q = [
|
|
11
11
|
/** Intents **/
|
|
12
12
|
{
|
|
@@ -31,17 +31,6 @@ const Q = [
|
|
|
31
31
|
"text-support"
|
|
32
32
|
])
|
|
33
33
|
},
|
|
34
|
-
{
|
|
35
|
-
design: "outlined",
|
|
36
|
-
intent: "basic",
|
|
37
|
-
class: e([
|
|
38
|
-
"enabled:hover:bg-basic/dim-5",
|
|
39
|
-
"enabled:active:bg-basic/dim-5",
|
|
40
|
-
"focus-visible:bg-basic/dim-5",
|
|
41
|
-
"aria-pressed:bg-basic-container aria-pressed:text-on-basic-container aria-pressed:enabled:hover:bg-basic-container/dim-1",
|
|
42
|
-
"text-basic"
|
|
43
|
-
])
|
|
44
|
-
},
|
|
45
34
|
{
|
|
46
35
|
intent: "accent",
|
|
47
36
|
design: "outlined",
|
|
@@ -157,18 +146,6 @@ const Q = [
|
|
|
157
146
|
"text-on-support-container"
|
|
158
147
|
])
|
|
159
148
|
},
|
|
160
|
-
{
|
|
161
|
-
intent: "basic",
|
|
162
|
-
design: "tinted",
|
|
163
|
-
class: e([
|
|
164
|
-
"bg-basic-container",
|
|
165
|
-
"enabled:hover:bg-basic-container-hovered",
|
|
166
|
-
"enabled:active:bg-basic-container-hovered",
|
|
167
|
-
"focus-visible:bg-basic-container-hovered",
|
|
168
|
-
"aria-pressed:bg-basic aria-pressed:text-on-basic aria-pressed:enabled:hover:bg-basic/dim-1",
|
|
169
|
-
"text-on-basic-container"
|
|
170
|
-
])
|
|
171
|
-
},
|
|
172
149
|
{
|
|
173
150
|
intent: "accent",
|
|
174
151
|
design: "tinted",
|
|
@@ -288,17 +265,6 @@ const Q = [
|
|
|
288
265
|
"text-support"
|
|
289
266
|
])
|
|
290
267
|
},
|
|
291
|
-
{
|
|
292
|
-
intent: "basic",
|
|
293
|
-
design: "dashed",
|
|
294
|
-
class: e([
|
|
295
|
-
"enabled:hover:bg-basic/dim-5",
|
|
296
|
-
"enabled:active:bg-basic/dim-5",
|
|
297
|
-
"focus-visible:bg-basic/dim-5",
|
|
298
|
-
"aria-pressed:bg-basic-container aria-pressed:text-on-basic-container aria-pressed:enabled:hover:bg-basic-container/dim-1",
|
|
299
|
-
"text-basic"
|
|
300
|
-
])
|
|
301
|
-
},
|
|
302
268
|
{
|
|
303
269
|
intent: "accent",
|
|
304
270
|
design: "dashed",
|
|
@@ -419,7 +385,6 @@ const Q = [
|
|
|
419
385
|
intent: E({
|
|
420
386
|
main: [],
|
|
421
387
|
support: [],
|
|
422
|
-
basic: [],
|
|
423
388
|
accent: [],
|
|
424
389
|
success: [],
|
|
425
390
|
alert: [],
|
|
@@ -443,7 +408,7 @@ const Q = [
|
|
|
443
408
|
compoundVariants: [...Q, ...R, ...U],
|
|
444
409
|
defaultVariants: {
|
|
445
410
|
design: "outlined",
|
|
446
|
-
intent: "
|
|
411
|
+
intent: "support"
|
|
447
412
|
}
|
|
448
413
|
}
|
|
449
414
|
), T = H({}), Y = () => K(T) || {}, Z = (a) => a ? a.type.displayName : "", _ = (a) => (...n) => O.toArray(a).filter(W).find((o) => {
|
|
@@ -452,7 +417,7 @@ const Q = [
|
|
|
452
417
|
}), ee = ({
|
|
453
418
|
onClick: a,
|
|
454
419
|
asChild: n,
|
|
455
|
-
pressed:
|
|
420
|
+
pressed: r,
|
|
456
421
|
defaultPressed: o,
|
|
457
422
|
disabled: s,
|
|
458
423
|
value: d,
|
|
@@ -460,18 +425,18 @@ const Q = [
|
|
|
460
425
|
children: g,
|
|
461
426
|
onClear: l
|
|
462
427
|
}) => {
|
|
463
|
-
const [t, y] = V(
|
|
428
|
+
const [t, y] = V(r, o), [h] = V(
|
|
464
429
|
d,
|
|
465
430
|
c
|
|
466
|
-
), m = _(g), b = m("Chip.LeadingIcon"), f = m("Chip.TrailingIcon"), v = m("Chip.Content"),
|
|
467
|
-
(
|
|
468
|
-
) ? /* @__PURE__ */
|
|
431
|
+
), m = _(g), b = m("Chip.LeadingIcon"), f = m("Chip.TrailingIcon"), v = m("Chip.Content"), u = m("Chip.ClearButton"), $ = (a || t) !== void 0, I = [b, v, u].every(
|
|
432
|
+
(p) => p === void 0
|
|
433
|
+
) ? /* @__PURE__ */ i("span", { className: "inline-block grow truncate", children: g }) : /* @__PURE__ */ A(F, { children: [
|
|
469
434
|
b,
|
|
470
435
|
v,
|
|
471
436
|
b === void 0 ? f : null,
|
|
472
|
-
|
|
473
|
-
] }), w = (
|
|
474
|
-
|
|
437
|
+
u
|
|
438
|
+
] }), w = (p) => {
|
|
439
|
+
u && !s && ["Delete", "Backspace"].includes(p.key) && l && (l(), p.key === "Delete" && k(), p.key === "Backspace" && k.backwards());
|
|
475
440
|
};
|
|
476
441
|
return $ ? {
|
|
477
442
|
Element: n ? L : "button",
|
|
@@ -481,8 +446,8 @@ const Q = [
|
|
|
481
446
|
"aria-pressed": t,
|
|
482
447
|
"data-state": t ? "on" : "off"
|
|
483
448
|
},
|
|
484
|
-
onClick: (
|
|
485
|
-
t !== void 0 && y(!t), a && a(
|
|
449
|
+
onClick: (p) => {
|
|
450
|
+
t !== void 0 && y(!t), a && a(p, { pressed: t, value: h });
|
|
486
451
|
},
|
|
487
452
|
onKeyDown: w,
|
|
488
453
|
disabled: s,
|
|
@@ -492,7 +457,7 @@ const Q = [
|
|
|
492
457
|
leadingIcon: b,
|
|
493
458
|
trailingIcon: f,
|
|
494
459
|
content: v,
|
|
495
|
-
clearButton:
|
|
460
|
+
clearButton: u
|
|
496
461
|
}
|
|
497
462
|
} : {
|
|
498
463
|
Element: n ? L : "div",
|
|
@@ -505,14 +470,14 @@ const Q = [
|
|
|
505
470
|
leadingIcon: b,
|
|
506
471
|
trailingIcon: f,
|
|
507
472
|
content: v,
|
|
508
|
-
clearButton:
|
|
473
|
+
clearButton: u
|
|
509
474
|
}
|
|
510
475
|
};
|
|
511
476
|
}, j = ({
|
|
512
477
|
design: a = "outlined",
|
|
513
478
|
disabled: n,
|
|
514
|
-
children:
|
|
515
|
-
intent: o = "
|
|
479
|
+
children: r,
|
|
480
|
+
intent: o = "support",
|
|
516
481
|
defaultPressed: s,
|
|
517
482
|
pressed: d,
|
|
518
483
|
asChild: c,
|
|
@@ -534,10 +499,10 @@ const Q = [
|
|
|
534
499
|
disabled: !!n,
|
|
535
500
|
value: h.value,
|
|
536
501
|
defaultValue: h.defaultValue,
|
|
537
|
-
children:
|
|
502
|
+
children: r,
|
|
538
503
|
onClear: t
|
|
539
|
-
}), { clearButton:
|
|
540
|
-
return /* @__PURE__ */
|
|
504
|
+
}), { clearButton: u } = v;
|
|
505
|
+
return /* @__PURE__ */ i(T.Provider, { value: { disabled: n, design: a, intent: o, onClear: t }, children: /* @__PURE__ */ i(
|
|
541
506
|
m,
|
|
542
507
|
{
|
|
543
508
|
ref: y,
|
|
@@ -546,7 +511,7 @@ const Q = [
|
|
|
546
511
|
design: a,
|
|
547
512
|
disabled: n,
|
|
548
513
|
intent: o,
|
|
549
|
-
hasClearButton: !!
|
|
514
|
+
hasClearButton: !!u
|
|
550
515
|
}),
|
|
551
516
|
...f,
|
|
552
517
|
...h,
|
|
@@ -621,9 +586,9 @@ const ae = B(
|
|
|
621
586
|
}
|
|
622
587
|
}
|
|
623
588
|
), P = ({
|
|
624
|
-
children: a = /* @__PURE__ */
|
|
589
|
+
children: a = /* @__PURE__ */ i(M, { children: /* @__PURE__ */ i(J, {}) }),
|
|
625
590
|
tabIndex: n = 0,
|
|
626
|
-
label:
|
|
591
|
+
label: r,
|
|
627
592
|
ref: o
|
|
628
593
|
}) => {
|
|
629
594
|
const { design: s, disabled: d, onClear: c } = Y(), g = q(
|
|
@@ -632,7 +597,7 @@ const ae = B(
|
|
|
632
597
|
},
|
|
633
598
|
[d, c]
|
|
634
599
|
);
|
|
635
|
-
return /* @__PURE__ */
|
|
600
|
+
return /* @__PURE__ */ i(
|
|
636
601
|
"span",
|
|
637
602
|
{
|
|
638
603
|
className: ae({
|
|
@@ -642,36 +607,36 @@ const ae = B(
|
|
|
642
607
|
}),
|
|
643
608
|
onClick: g,
|
|
644
609
|
ref: o,
|
|
645
|
-
children: /* @__PURE__ */
|
|
610
|
+
children: /* @__PURE__ */ i(
|
|
646
611
|
"button",
|
|
647
612
|
{
|
|
648
613
|
tabIndex: n,
|
|
649
614
|
type: "button",
|
|
650
615
|
disabled: !!d,
|
|
651
616
|
className: ne({ disabled: d }),
|
|
652
|
-
"aria-label":
|
|
653
|
-
children: a && G(a, { ariaLabel:
|
|
617
|
+
"aria-label": r,
|
|
618
|
+
children: a && G(a, { ariaLabel: r })
|
|
654
619
|
}
|
|
655
620
|
)
|
|
656
621
|
}
|
|
657
622
|
);
|
|
658
623
|
};
|
|
659
624
|
P.displayName = "Chip.ClearButton";
|
|
660
|
-
const S = ({ children: a, className: n, ref:
|
|
625
|
+
const S = ({ children: a, className: n, ref: r }) => /* @__PURE__ */ i("span", { className: C("inline-block grow truncate", n), ref: r, children: a });
|
|
661
626
|
S.displayName = "Chip.Content";
|
|
662
|
-
const N = ({ children: a, className: n, ref:
|
|
627
|
+
const N = ({ children: a, className: n, ref: r }) => /* @__PURE__ */ i("span", { className: C("flex h-full items-center justify-center", n), ref: r, children: a });
|
|
663
628
|
N.displayName = "Chip.Icon";
|
|
664
629
|
const z = ({
|
|
665
630
|
className: a,
|
|
666
631
|
ref: n,
|
|
667
|
-
...
|
|
668
|
-
}) => /* @__PURE__ */
|
|
632
|
+
...r
|
|
633
|
+
}) => /* @__PURE__ */ i(N, { className: C("mr-sm", a), ref: n, ...r });
|
|
669
634
|
z.displayName = "Chip.LeadingIcon";
|
|
670
635
|
const D = ({
|
|
671
636
|
className: a,
|
|
672
637
|
ref: n,
|
|
673
|
-
...
|
|
674
|
-
}) => /* @__PURE__ */
|
|
638
|
+
...r
|
|
639
|
+
}) => /* @__PURE__ */ i(N, { className: C("ml-md", a), ref: n, ...r });
|
|
675
640
|
D.displayName = "Chip.TrailingIcon";
|
|
676
641
|
const x = Object.assign(j, {
|
|
677
642
|
Content: S,
|
package/dist/chip/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/chip/variants/outlined.ts","../../src/chip/variants/tinted.ts","../../src/chip/variants/dashed.ts","../../src/chip/Chip.styles.tsx","../../src/chip/useChipContext.tsx","../../src/chip/useChipElement.tsx","../../src/chip/Chip.tsx","../../src/chip/ChipClearButton.styles.tsx","../../src/chip/ChipClearButton.tsx","../../src/chip/ChipContent.tsx","../../src/chip/ChipIcon.tsx","../../src/chip/ChipLeadingIcon.tsx","../../src/chip/ChipTrailingIcon.tsx","../../src/chip/index.ts"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n /** Intents **/\n {\n design: 'outlined',\n intent: 'main',\n class: tw([\n 'enabled:hover:bg-main/dim-5',\n 'enabled:active:bg-main/dim-5',\n 'focus-visible:bg-main/dim-5',\n 'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n 'text-main',\n ]),\n },\n {\n design: 'outlined',\n intent: 'support',\n class: tw([\n 'enabled:hover:bg-support/dim-5',\n 'enabled:active:bg-support/dim-5',\n 'focus-visible:bg-support/dim-5',\n 'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n 'text-support',\n ]),\n },\n {\n design: 'outlined',\n intent: 'basic',\n class: tw([\n 'enabled:hover:bg-basic/dim-5',\n 'enabled:active:bg-basic/dim-5',\n 'focus-visible:bg-basic/dim-5',\n 'aria-pressed:bg-basic-container aria-pressed:text-on-basic-container aria-pressed:enabled:hover:bg-basic-container/dim-1',\n 'text-basic',\n ]),\n },\n {\n intent: 'accent',\n design: 'outlined',\n class: tw([\n 'enabled:hover:bg-accent/dim-5',\n 'enabled:active:bg-accent/dim-5',\n 'focus-visible:bg-accent/dim-5',\n 'aria-pressed:bg-accent-container',\n 'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n 'text-accent',\n ]),\n },\n {\n design: 'outlined',\n intent: 'success',\n class: tw([\n 'enabled:hover:bg-success/dim-5',\n 'enabled:active:bg-success/dim-5',\n 'focus-visible:bg-success/dim-5',\n 'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n 'text-success',\n ]),\n },\n {\n intent: 'alert',\n design: 'outlined',\n class: tw([\n 'enabled:hover:bg-alert/dim-5',\n 'enabled:active:bg-alert/dim-5',\n 'focus-visible:bg-alert/dim-5',\n 'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n 'text-alert',\n ]),\n },\n {\n design: 'outlined',\n intent: 'danger',\n class: tw([\n 'enabled:hover:bg-error/dim-5',\n 'enabled:active:bg-error/dim-5',\n 'focus-visible:bg-error/dim-5',\n 'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n 'text-error',\n ]),\n },\n {\n design: 'outlined',\n intent: 'info',\n class: tw([\n 'enabled:hover:bg-info/dim-5',\n 'enabled:active:bg-info/dim-5',\n 'focus-visible:bg-info/dim-5',\n 'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n 'text-info',\n ]),\n },\n {\n design: 'outlined',\n intent: 'neutral',\n class: tw([\n 'enabled:hover:bg-neutral/dim-5',\n 'enabled:active:bg-neutral/dim-5',\n 'focus-visible:bg-neutral/dim-5',\n 'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n 'text-neutral',\n ]),\n },\n {\n design: 'outlined',\n intent: 'surface',\n class: tw([\n 'enabled:hover:bg-surface/dim-5',\n 'enabled:active:bg-surface/dim-5',\n 'focus-visible:bg-surface/dim-5',\n 'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n 'text-surface',\n ]),\n },\n /** Spacings **/\n {\n design: 'outlined',\n hasClearButton: false,\n class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n },\n {\n design: 'outlined',\n hasClearButton: true,\n class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n /** Intents **/\n {\n intent: 'main',\n design: 'tinted',\n class: tw([\n 'bg-main-container',\n 'enabled:hover:bg-main-container-hovered',\n 'enabled:active:bg-main-container-hovered',\n 'focus-visible:bg-main-container-hovered',\n 'aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1',\n 'text-on-main-container',\n ]),\n },\n {\n intent: 'support',\n design: 'tinted',\n class: tw([\n 'bg-support-container',\n 'enabled:hover:bg-support-container-hovered',\n 'enabled:active:bg-support-container-hovered',\n 'focus-visible:bg-support-container-hovered',\n 'aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1',\n 'text-on-support-container',\n ]),\n },\n {\n intent: 'basic',\n design: 'tinted',\n class: tw([\n 'bg-basic-container',\n 'enabled:hover:bg-basic-container-hovered',\n 'enabled:active:bg-basic-container-hovered',\n 'focus-visible:bg-basic-container-hovered',\n 'aria-pressed:bg-basic aria-pressed:text-on-basic aria-pressed:enabled:hover:bg-basic/dim-1',\n 'text-on-basic-container',\n ]),\n },\n {\n intent: 'accent',\n design: 'tinted',\n class: tw([\n 'bg-accent-container',\n 'enabled:hover:bg-accent-container-hovered',\n 'enabled:active:bg-accent-container-hovered',\n 'focus-visible:bg-accent-container-hovered',\n 'aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1',\n 'text-on-accent-container',\n ]),\n },\n {\n intent: 'success',\n design: 'tinted',\n class: tw([\n 'bg-success-container',\n 'enabled:hover:bg-success-container-hovered',\n 'enabled:active:bg-success-container-hovered',\n 'focus-visible:bg-success-container-hovered',\n 'aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1',\n 'text-on-success-container',\n ]),\n },\n {\n intent: 'alert',\n design: 'tinted',\n class: tw([\n 'bg-alert-container',\n 'enabled:hover:bg-alert-container-hovered',\n 'enabled:active:bg-alert-container-hovered',\n 'focus-visible:bg-alert-container-hovered',\n 'aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1',\n 'text-on-alert-container',\n ]),\n },\n {\n intent: 'danger',\n design: 'tinted',\n class: tw([\n 'bg-error-container',\n 'enabled:hover:bg-error-container-hovered',\n 'enabled:active:bg-error-container-hovered',\n 'focus-visible:bg-error-container-hovered',\n 'aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1',\n 'text-on-error-container',\n ]),\n },\n {\n intent: 'info',\n design: 'tinted',\n class: tw([\n 'bg-info-container',\n 'enabled:hover:bg-info-container-hovered',\n 'enabled:active:bg-info-container-hovered',\n 'focus-visible:bg-info-container-hovered',\n 'aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1',\n 'text-on-info-container',\n ]),\n },\n {\n intent: 'neutral',\n design: 'tinted',\n class: tw([\n 'bg-neutral-container',\n 'enabled:hover:bg-neutral-container-hovered',\n 'enabled:active:bg-neutral-container-hovered',\n 'focus-visible:bg-neutral-container-hovered',\n 'aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1',\n 'text-on-neutral-container',\n ]),\n },\n {\n intent: 'surface',\n design: 'tinted',\n class: tw([\n 'bg-surface/dim-1',\n 'enabled:hover:bg-surface-hovered/dim-1',\n 'enabled:active:bg-surface-hovered/dim-1',\n 'focus-visible:bg-surface-hovered/dim-1',\n 'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n 'text-on-surface/dim-1',\n ]),\n },\n /** Spacings **/\n {\n design: 'tinted',\n hasClearButton: false,\n class: tw(['px-md']),\n },\n {\n design: 'tinted',\n hasClearButton: true,\n class: tw(['pl-md']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const dashedVariants = [\n /** Intents **/\n {\n intent: 'main',\n design: 'dashed',\n class: tw([\n 'enabled:hover:bg-main/dim-5',\n 'enabled:active:bg-main/dim-5',\n 'focus-visible:bg-main/dim-5',\n 'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n 'text-main',\n ]),\n },\n {\n intent: 'support',\n design: 'dashed',\n class: tw([\n 'enabled:hover:bg-support/dim-5',\n 'enabled:active:bg-support/dim-5',\n 'focus-visible:bg-support/dim-5',\n 'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n 'text-support',\n ]),\n },\n {\n intent: 'basic',\n design: 'dashed',\n class: tw([\n 'enabled:hover:bg-basic/dim-5',\n 'enabled:active:bg-basic/dim-5',\n 'focus-visible:bg-basic/dim-5',\n 'aria-pressed:bg-basic-container aria-pressed:text-on-basic-container aria-pressed:enabled:hover:bg-basic-container/dim-1',\n 'text-basic',\n ]),\n },\n {\n intent: 'accent',\n design: 'dashed',\n class: tw([\n 'enabled:hover:bg-accent/dim-5',\n 'enabled:active:bg-accent/dim-5',\n 'focus-visible:bg-accent/dim-5',\n 'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n 'text-accent',\n ]),\n },\n {\n intent: 'success',\n design: 'dashed',\n class: tw([\n 'enabled:hover:bg-success/dim-5',\n 'enabled:active:bg-success/dim-5',\n 'focus-visible:bg-success/dim-5',\n 'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n 'text-success',\n ]),\n },\n {\n intent: 'alert',\n design: 'dashed',\n class: tw([\n 'enabled:hover:bg-alert/dim-5',\n 'enabled:active:bg-alert/dim-5',\n 'focus-visible:bg-alert/dim-5',\n 'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n 'text-alert',\n ]),\n },\n {\n intent: 'danger',\n design: 'dashed',\n class: tw([\n 'enabled:hover:bg-error/dim-5',\n 'enabled:active:bg-error/dim-5',\n 'focus-visible:bg-error/dim-5',\n 'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n 'text-error',\n ]),\n },\n {\n intent: 'info',\n design: 'dashed',\n class: tw([\n 'enabled:hover:bg-info/dim-5',\n 'enabled:active:bg-info/dim-5',\n 'focus-visible:bg-info/dim-5',\n 'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n 'text-info',\n ]),\n },\n {\n intent: 'neutral',\n design: 'dashed',\n class: tw([\n 'enabled:hover:bg-neutral/dim-5',\n 'enabled:active:bg-neutral/dim-5',\n 'focus-visible:bg-neutral/dim-5',\n 'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n 'text-neutral',\n ]),\n },\n {\n intent: 'surface',\n design: 'dashed',\n class: tw([\n 'enabled:hover:bg-surface/dim-5',\n 'enabled:active:bg-surface/dim-5',\n 'focus-visible:bg-surface/dim-5',\n 'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n 'text-surface',\n ]),\n },\n /** Spacings **/\n {\n design: 'dashed',\n hasClearButton: false,\n class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n },\n {\n design: 'dashed',\n hasClearButton: true,\n class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { dashedVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const chipStyles = cva(\n [\n 'box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-md text-body-1 font-regular',\n 'focus-visible:u-outline',\n 'ease-out duration-150',\n ],\n {\n variants: {\n /**\n * Main style of the chip.\n *\n * - `filled`: Chip will be plain.\n *\n * - `outlined`: Chip will be transparent with an outline.\n *\n * - `tinted`: Chip will be filled but using a lighter color scheme.\n *\n * - `dashed`: Chip will be transparent with an outline dashed.\n */\n design: makeVariants<'design', ['outlined', 'tinted', 'dashed']>({\n outlined: ['bg-transparent border-sm border-solid border-current'],\n tinted: [''],\n dashed: [\n 'bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high',\n ],\n }),\n /**\n * Color scheme of the chip.\n */\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'basic',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n ]\n >({\n main: [],\n support: [],\n basic: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n }),\n /**\n * Disable the chip, preventing user interaction and adding opacity.\n */\n disabled: {\n true: ['cursor-not-allowed', 'opacity-dim-3'],\n },\n hasClearButton: {\n true: [],\n false: [],\n },\n // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'\n },\n compoundVariants: [...outlinedVariants, ...tintedVariants, ...dashedVariants],\n defaultVariants: {\n design: 'outlined',\n intent: 'basic',\n },\n }\n)\n\nexport type ChipStylesProps = VariantProps<typeof chipStyles>\n","import { createContext, useContext } from 'react'\n\nimport { type ChipProps } from './Chip'\n\nexport type ChipsContextType = Pick<ChipProps, 'disabled' | 'design' | 'intent' | 'onClear'>\n\nexport const ChipContext = createContext<ChipsContextType>({} as ChipsContextType)\nexport const useChipContext = () => useContext(ChipContext) || {}\n","import { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { emulateTab } from 'emulate-tab'\nimport {\n Children,\n ElementType,\n FC,\n ForwardRefExoticComponent,\n HTMLAttributes,\n isValidElement,\n KeyboardEvent,\n MouseEvent,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from 'react'\n\nimport { Slot } from '../slot'\n\ninterface ReturnedValue {\n Element:\n | ForwardRefExoticComponent<\n HTMLAttributes<HTMLElement> & {\n children?: ReactNode\n } & RefAttributes<HTMLElement>\n >\n | ElementType\n chipProps:\n | {\n type: 'button'\n 'aria-pressed'?: boolean\n 'data-state'?: 'on' | 'off'\n onClick: (event: MouseEvent<HTMLButtonElement>) => void\n onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n disabled?: boolean\n children: ReactNode\n }\n | {\n 'aria-disabled'?: boolean\n children: ReactNode\n onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n }\n compoundElements: {\n leadingIcon: ReactNode\n trailingIcon: ReactNode\n content: ReactNode\n clearButton: ReactNode\n }\n}\n\nconst getDisplayName = (element?: ReactElement) => {\n return element ? (element.type as FC).displayName : ''\n}\n\nconst findElement =\n (children: ReactNode) =>\n (...values: string[]) => {\n const validChildren = Children.toArray(children).filter(isValidElement)\n\n return validChildren.find(child => {\n const displayName = getDisplayName(child)\n\n return values.includes(displayName || '')\n })\n }\n\nexport const useChipElement = ({\n onClick,\n asChild,\n pressed,\n defaultPressed,\n disabled,\n value,\n defaultValue,\n children,\n onClear,\n}: {\n onClick?: (\n event: MouseEvent<HTMLButtonElement>,\n args: { pressed: boolean; value?: string | number | readonly string[] }\n ) => void\n onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n asChild?: boolean\n pressed?: boolean\n defaultPressed?: boolean\n value?: string | number | readonly string[]\n defaultValue?: string | number | readonly string[]\n disabled?: boolean\n children?: ReactNode\n onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n}): ReturnedValue => {\n const [isPressed, setIsPressed] = useCombinedState<boolean | undefined>(pressed, defaultPressed)\n const [innerValue] = useCombinedState<string | number | readonly string[] | undefined>(\n value,\n defaultValue\n )\n\n const findChipElement = findElement(children)\n\n const leadingIcon = findChipElement('Chip.LeadingIcon')\n const trailingIcon = findChipElement('Chip.TrailingIcon')\n const content = findChipElement('Chip.Content')\n const clearButton = findChipElement('Chip.ClearButton')\n\n const isButton = (onClick || isPressed) !== undefined\n\n const formattedChildren = [leadingIcon, content, clearButton].every(\n element => element === undefined\n ) ? (\n <span className=\"inline-block grow truncate\">{children}</span>\n ) : (\n <>\n {leadingIcon}\n {content}\n {leadingIcon === undefined ? trailingIcon : null}\n {clearButton}\n </>\n )\n\n const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {\n if (!!clearButton && !disabled && ['Delete', 'Backspace'].includes(event.key)) {\n if (onClear) {\n onClear()\n event.key === 'Delete' && emulateTab()\n event.key === 'Backspace' && emulateTab.backwards()\n }\n }\n }\n\n if (isButton) {\n return {\n Element: asChild ? Slot : 'button',\n chipProps: {\n type: 'button',\n ...(isPressed !== undefined && {\n 'aria-pressed': isPressed,\n 'data-state': isPressed ? 'on' : 'off',\n }),\n onClick: (event: MouseEvent<HTMLButtonElement>): void => {\n isPressed !== undefined && setIsPressed(!isPressed)\n onClick && onClick(event, { pressed: isPressed as boolean, value: innerValue })\n },\n onKeyDown,\n disabled,\n children: formattedChildren,\n },\n compoundElements: {\n leadingIcon,\n trailingIcon,\n content,\n clearButton,\n },\n }\n }\n\n return {\n Element: asChild ? Slot : 'div',\n chipProps: {\n 'aria-disabled': disabled,\n children: formattedChildren,\n onKeyDown,\n },\n compoundElements: {\n leadingIcon,\n trailingIcon,\n content,\n clearButton,\n },\n }\n}\n","import { ComponentPropsWithoutRef, MouseEvent, Ref } from 'react'\n\nimport { chipStyles, type ChipStylesProps } from './Chip.styles'\nimport { ChipContext } from './useChipContext'\nimport { useChipElement } from './useChipElement'\n\ntype ChipPrimitiveProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'disabled' | 'type'>\n\nexport interface ChipProps extends ChipPrimitiveProps, Omit<ChipStylesProps, 'hasClearButton'> {\n /**\n * Configures a toggleButton aria-pressed initial value\n */\n defaultPressed?: boolean\n /**\n * Configures a toggleButton aria-pressed value\n */\n pressed?: boolean\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * Event handler fired each clicking event\n */\n onClick?: (\n event: MouseEvent<HTMLButtonElement>,\n args: { pressed: boolean; value?: number | string | readonly string[] }\n ) => void\n /**\n * Clear chip handler\n */\n onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n ref?: Ref<HTMLButtonElement | HTMLDivElement>\n}\n\nexport const Chip = ({\n design = 'outlined',\n disabled,\n children,\n intent = 'basic',\n defaultPressed,\n pressed,\n asChild,\n className,\n onClick,\n onClear,\n ref: forwardedRef,\n ...otherProps\n}: ChipProps) => {\n const {\n Element: ChipElement,\n chipProps: { children: formattedChildren, ...chipProps },\n compoundElements,\n } = useChipElement({\n asChild,\n pressed,\n defaultPressed,\n onClick,\n disabled: !!disabled,\n value: otherProps.value,\n defaultValue: otherProps.defaultValue,\n children,\n onClear,\n })\n\n const { clearButton } = compoundElements\n\n return (\n <ChipContext.Provider value={{ disabled, design, intent, onClear }}>\n <ChipElement\n ref={forwardedRef}\n className={chipStyles({\n className,\n design,\n disabled,\n intent,\n hasClearButton: !!clearButton,\n })}\n {...{\n ...chipProps,\n ...otherProps,\n }}\n data-spark-component=\"chip\"\n >\n {formattedChildren}\n </ChipElement>\n </ChipContext.Provider>\n )\n}\n\nChip.displayName = 'Chip'\n","import { tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const chipClearButtonWrapperStyles = cva(\n ['ml-md flex h-full items-center justify-center focus-visible:outline-hidden'],\n {\n variants: {\n disabled: {\n false: ['cursor-pointer'],\n true: ['cursor-not-allowed'],\n },\n isBordered: {\n false: ['pr-md'],\n true: ['pr-[7px]'],\n },\n design: {\n outlined: [],\n tinted: [],\n dashed: [],\n },\n },\n compoundVariants: [\n {\n design: 'outlined',\n disabled: false,\n class: tw(['hover:opacity-dim-1']),\n },\n {\n design: 'outlined',\n disabled: true,\n class: tw(['opacity-dim-3']),\n },\n {\n design: 'tinted',\n disabled: false,\n class: tw(['hover:opacity-dim-1']),\n },\n {\n design: 'tinted',\n disabled: true,\n class: tw(['opacity-dim-3']),\n },\n {\n design: 'dashed',\n disabled: false,\n class: tw(['hover:opacity-dim-1']),\n },\n {\n design: 'dashed',\n disabled: true,\n class: tw(['opacity-dim-3']),\n },\n ],\n }\n)\n\nexport const chipClearButtonStyles = cva(\n ['rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm', 'focus-visible:u-outline'],\n {\n variants: {\n disabled: {\n true: ['cursor-not-allowed'],\n false: ['cursor-pointer'],\n },\n },\n defaultVariants: {\n disabled: false,\n },\n }\n)\n\nexport type ChipClearButtonStylesProps = VariantProps<typeof chipClearButtonWrapperStyles>\n","import { Close } from '@spark-ui/icons/Close'\nimport {\n cloneElement,\n ComponentPropsWithoutRef,\n MouseEvent,\n ReactElement,\n Ref,\n useCallback,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport {\n chipClearButtonStyles,\n type ChipClearButtonStylesProps,\n chipClearButtonWrapperStyles,\n} from './ChipClearButton.styles'\nimport { useChipContext } from './useChipContext'\n\nexport interface ChipClearButtonProps\n extends ComponentPropsWithoutRef<'span'>,\n ChipClearButtonStylesProps {\n label: string\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipClearButton = ({\n children = (\n <Icon>\n <Close />\n </Icon>\n ),\n tabIndex = 0,\n label,\n ref: forwardedRef,\n}: ChipClearButtonProps) => {\n const { design, disabled, onClear } = useChipContext()\n\n const onClearHandler = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation()\n !disabled && onClear && onClear(event)\n },\n [disabled, onClear]\n )\n\n return (\n <span\n className={chipClearButtonWrapperStyles({\n isBordered: ['outline', 'dashed'].includes(`${design}`),\n disabled: !!disabled,\n design,\n })}\n onClick={onClearHandler}\n ref={forwardedRef}\n >\n <button\n tabIndex={tabIndex}\n type=\"button\"\n disabled={!!disabled}\n className={chipClearButtonStyles({ disabled })}\n aria-label={label}\n >\n {children && cloneElement(children as ReactElement<HTMLElement>, { ariaLabel: label })}\n </button>\n </span>\n )\n}\n\nChipClearButton.displayName = 'Chip.ClearButton'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipContentProps = ComponentPropsWithoutRef<'span'> & {\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipContent = ({ children, className, ref: forwardedRef }: ChipContentProps) => {\n return (\n <span className={cx('inline-block grow truncate', className)} ref={forwardedRef}>\n {children}\n </span>\n )\n}\n\nChipContent.displayName = 'Chip.Content'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipIconProps = ComponentPropsWithoutRef<'span'> & {\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipIcon = ({ children, className, ref: forwardedRef }: ChipIconProps) => {\n return (\n <span className={cx('flex h-full items-center justify-center', className)} ref={forwardedRef}>\n {children}\n </span>\n )\n}\n\nChipIcon.displayName = 'Chip.Icon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipLeadingIconProps = ChipIconProps & {\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipLeadingIcon = ({\n className,\n ref: forwardedRef,\n ...props\n}: ChipLeadingIconProps) => (\n <ChipIcon className={cx('mr-sm', className)} ref={forwardedRef} {...props} />\n)\n\nChipLeadingIcon.displayName = 'Chip.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipTrailingIconProps = ChipIconProps & {\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipTrailingIcon = ({\n className,\n ref: forwardedRef,\n ...props\n}: ChipTrailingIconProps) => (\n <ChipIcon className={cx('ml-md', className)} ref={forwardedRef} {...props} />\n)\n\nChipTrailingIcon.displayName = 'Chip.TrailingIcon'\n","import { Chip as Root } from './Chip'\nimport { ChipClearButton } from './ChipClearButton'\nimport { ChipContent } from './ChipContent'\nimport { ChipLeadingIcon } from './ChipLeadingIcon'\nimport { ChipTrailingIcon } from './ChipTrailingIcon'\n\nexport const Chip: typeof Root & {\n Content: typeof ChipContent\n LeadingIcon: typeof ChipLeadingIcon\n TrailingIcon: typeof ChipTrailingIcon\n ClearButton: typeof ChipClearButton\n} = Object.assign(Root, {\n Content: ChipContent,\n LeadingIcon: ChipLeadingIcon,\n TrailingIcon: ChipTrailingIcon,\n ClearButton: ChipClearButton,\n})\n\nChip.displayName = 'Chip'\nChip.ClearButton.displayName = 'Chip.ClearButton'\nChip.Content.displayName = 'Chip.Content'\nChip.LeadingIcon.displayName = 'Chip.LeadingIcon'\nChip.TrailingIcon.displayName = 'Chip.TrailingIcon'\n\nexport { type ChipClearButtonProps } from './ChipClearButton'\nexport { type ChipContentProps } from './ChipContent'\nexport { type ChipLeadingIconProps } from './ChipLeadingIcon'\nexport { type ChipTrailingIconProps } from './ChipTrailingIcon'\n"],"names":["outlinedVariants","tw","tintedVariants","dashedVariants","chipStyles","cva","makeVariants","ChipContext","createContext","useChipContext","useContext","getDisplayName","element","findElement","children","values","Children","isValidElement","child","displayName","useChipElement","onClick","asChild","pressed","defaultPressed","disabled","value","defaultValue","onClear","isPressed","setIsPressed","useCombinedState","innerValue","findChipElement","leadingIcon","trailingIcon","content","clearButton","isButton","formattedChildren","jsx","jsxs","Fragment","onKeyDown","event","emulateTab","Slot","Chip","design","intent","className","forwardedRef","otherProps","ChipElement","chipProps","compoundElements","chipClearButtonWrapperStyles","chipClearButtonStyles","ChipClearButton","Icon","Close","tabIndex","label","onClearHandler","useCallback","cloneElement","ChipContent","cx","ChipIcon","ChipLeadingIcon","props","ChipTrailingIcon","Root"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/chip/variants/outlined.ts","../../src/chip/variants/tinted.ts","../../src/chip/variants/dashed.ts","../../src/chip/Chip.styles.tsx","../../src/chip/useChipContext.tsx","../../src/chip/useChipElement.tsx","../../src/chip/Chip.tsx","../../src/chip/ChipClearButton.styles.tsx","../../src/chip/ChipClearButton.tsx","../../src/chip/ChipContent.tsx","../../src/chip/ChipIcon.tsx","../../src/chip/ChipLeadingIcon.tsx","../../src/chip/ChipTrailingIcon.tsx","../../src/chip/index.ts"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n /** Intents **/\n {\n design: 'outlined',\n intent: 'main',\n class: tw([\n 'enabled:hover:bg-main/dim-5',\n 'enabled:active:bg-main/dim-5',\n 'focus-visible:bg-main/dim-5',\n 'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n 'text-main',\n ]),\n },\n {\n design: 'outlined',\n intent: 'support',\n class: tw([\n 'enabled:hover:bg-support/dim-5',\n 'enabled:active:bg-support/dim-5',\n 'focus-visible:bg-support/dim-5',\n 'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n 'text-support',\n ]),\n },\n {\n intent: 'accent',\n design: 'outlined',\n class: tw([\n 'enabled:hover:bg-accent/dim-5',\n 'enabled:active:bg-accent/dim-5',\n 'focus-visible:bg-accent/dim-5',\n 'aria-pressed:bg-accent-container',\n 'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n 'text-accent',\n ]),\n },\n {\n design: 'outlined',\n intent: 'success',\n class: tw([\n 'enabled:hover:bg-success/dim-5',\n 'enabled:active:bg-success/dim-5',\n 'focus-visible:bg-success/dim-5',\n 'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n 'text-success',\n ]),\n },\n {\n intent: 'alert',\n design: 'outlined',\n class: tw([\n 'enabled:hover:bg-alert/dim-5',\n 'enabled:active:bg-alert/dim-5',\n 'focus-visible:bg-alert/dim-5',\n 'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n 'text-alert',\n ]),\n },\n {\n design: 'outlined',\n intent: 'danger',\n class: tw([\n 'enabled:hover:bg-error/dim-5',\n 'enabled:active:bg-error/dim-5',\n 'focus-visible:bg-error/dim-5',\n 'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n 'text-error',\n ]),\n },\n {\n design: 'outlined',\n intent: 'info',\n class: tw([\n 'enabled:hover:bg-info/dim-5',\n 'enabled:active:bg-info/dim-5',\n 'focus-visible:bg-info/dim-5',\n 'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n 'text-info',\n ]),\n },\n {\n design: 'outlined',\n intent: 'neutral',\n class: tw([\n 'enabled:hover:bg-neutral/dim-5',\n 'enabled:active:bg-neutral/dim-5',\n 'focus-visible:bg-neutral/dim-5',\n 'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n 'text-neutral',\n ]),\n },\n {\n design: 'outlined',\n intent: 'surface',\n class: tw([\n 'enabled:hover:bg-surface/dim-5',\n 'enabled:active:bg-surface/dim-5',\n 'focus-visible:bg-surface/dim-5',\n 'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n 'text-surface',\n ]),\n },\n /** Spacings **/\n {\n design: 'outlined',\n hasClearButton: false,\n class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n },\n {\n design: 'outlined',\n hasClearButton: true,\n class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n /** Intents **/\n {\n intent: 'main',\n design: 'tinted',\n class: tw([\n 'bg-main-container',\n 'enabled:hover:bg-main-container-hovered',\n 'enabled:active:bg-main-container-hovered',\n 'focus-visible:bg-main-container-hovered',\n 'aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1',\n 'text-on-main-container',\n ]),\n },\n {\n intent: 'support',\n design: 'tinted',\n class: tw([\n 'bg-support-container',\n 'enabled:hover:bg-support-container-hovered',\n 'enabled:active:bg-support-container-hovered',\n 'focus-visible:bg-support-container-hovered',\n 'aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1',\n 'text-on-support-container',\n ]),\n },\n {\n intent: 'accent',\n design: 'tinted',\n class: tw([\n 'bg-accent-container',\n 'enabled:hover:bg-accent-container-hovered',\n 'enabled:active:bg-accent-container-hovered',\n 'focus-visible:bg-accent-container-hovered',\n 'aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1',\n 'text-on-accent-container',\n ]),\n },\n {\n intent: 'success',\n design: 'tinted',\n class: tw([\n 'bg-success-container',\n 'enabled:hover:bg-success-container-hovered',\n 'enabled:active:bg-success-container-hovered',\n 'focus-visible:bg-success-container-hovered',\n 'aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1',\n 'text-on-success-container',\n ]),\n },\n {\n intent: 'alert',\n design: 'tinted',\n class: tw([\n 'bg-alert-container',\n 'enabled:hover:bg-alert-container-hovered',\n 'enabled:active:bg-alert-container-hovered',\n 'focus-visible:bg-alert-container-hovered',\n 'aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1',\n 'text-on-alert-container',\n ]),\n },\n {\n intent: 'danger',\n design: 'tinted',\n class: tw([\n 'bg-error-container',\n 'enabled:hover:bg-error-container-hovered',\n 'enabled:active:bg-error-container-hovered',\n 'focus-visible:bg-error-container-hovered',\n 'aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1',\n 'text-on-error-container',\n ]),\n },\n {\n intent: 'info',\n design: 'tinted',\n class: tw([\n 'bg-info-container',\n 'enabled:hover:bg-info-container-hovered',\n 'enabled:active:bg-info-container-hovered',\n 'focus-visible:bg-info-container-hovered',\n 'aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1',\n 'text-on-info-container',\n ]),\n },\n {\n intent: 'neutral',\n design: 'tinted',\n class: tw([\n 'bg-neutral-container',\n 'enabled:hover:bg-neutral-container-hovered',\n 'enabled:active:bg-neutral-container-hovered',\n 'focus-visible:bg-neutral-container-hovered',\n 'aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1',\n 'text-on-neutral-container',\n ]),\n },\n {\n intent: 'surface',\n design: 'tinted',\n class: tw([\n 'bg-surface/dim-1',\n 'enabled:hover:bg-surface-hovered/dim-1',\n 'enabled:active:bg-surface-hovered/dim-1',\n 'focus-visible:bg-surface-hovered/dim-1',\n 'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n 'text-on-surface/dim-1',\n ]),\n },\n /** Spacings **/\n {\n design: 'tinted',\n hasClearButton: false,\n class: tw(['px-md']),\n },\n {\n design: 'tinted',\n hasClearButton: true,\n class: tw(['pl-md']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const dashedVariants = [\n /** Intents **/\n {\n intent: 'main',\n design: 'dashed',\n class: tw([\n 'enabled:hover:bg-main/dim-5',\n 'enabled:active:bg-main/dim-5',\n 'focus-visible:bg-main/dim-5',\n 'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n 'text-main',\n ]),\n },\n {\n intent: 'support',\n design: 'dashed',\n class: tw([\n 'enabled:hover:bg-support/dim-5',\n 'enabled:active:bg-support/dim-5',\n 'focus-visible:bg-support/dim-5',\n 'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n 'text-support',\n ]),\n },\n {\n intent: 'accent',\n design: 'dashed',\n class: tw([\n 'enabled:hover:bg-accent/dim-5',\n 'enabled:active:bg-accent/dim-5',\n 'focus-visible:bg-accent/dim-5',\n 'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n 'text-accent',\n ]),\n },\n {\n intent: 'success',\n design: 'dashed',\n class: tw([\n 'enabled:hover:bg-success/dim-5',\n 'enabled:active:bg-success/dim-5',\n 'focus-visible:bg-success/dim-5',\n 'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n 'text-success',\n ]),\n },\n {\n intent: 'alert',\n design: 'dashed',\n class: tw([\n 'enabled:hover:bg-alert/dim-5',\n 'enabled:active:bg-alert/dim-5',\n 'focus-visible:bg-alert/dim-5',\n 'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n 'text-alert',\n ]),\n },\n {\n intent: 'danger',\n design: 'dashed',\n class: tw([\n 'enabled:hover:bg-error/dim-5',\n 'enabled:active:bg-error/dim-5',\n 'focus-visible:bg-error/dim-5',\n 'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n 'text-error',\n ]),\n },\n {\n intent: 'info',\n design: 'dashed',\n class: tw([\n 'enabled:hover:bg-info/dim-5',\n 'enabled:active:bg-info/dim-5',\n 'focus-visible:bg-info/dim-5',\n 'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n 'text-info',\n ]),\n },\n {\n intent: 'neutral',\n design: 'dashed',\n class: tw([\n 'enabled:hover:bg-neutral/dim-5',\n 'enabled:active:bg-neutral/dim-5',\n 'focus-visible:bg-neutral/dim-5',\n 'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n 'text-neutral',\n ]),\n },\n {\n intent: 'surface',\n design: 'dashed',\n class: tw([\n 'enabled:hover:bg-surface/dim-5',\n 'enabled:active:bg-surface/dim-5',\n 'focus-visible:bg-surface/dim-5',\n 'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n 'text-surface',\n ]),\n },\n /** Spacings **/\n {\n design: 'dashed',\n hasClearButton: false,\n class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n },\n {\n design: 'dashed',\n hasClearButton: true,\n class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { dashedVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const chipStyles = cva(\n [\n 'box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-md text-body-1 font-regular',\n 'focus-visible:u-outline',\n 'ease-out duration-150',\n ],\n {\n variants: {\n /**\n * Main style of the chip.\n *\n * - `filled`: Chip will be plain.\n *\n * - `outlined`: Chip will be transparent with an outline.\n *\n * - `tinted`: Chip will be filled but using a lighter color scheme.\n *\n * - `dashed`: Chip will be transparent with an outline dashed.\n */\n design: makeVariants<'design', ['outlined', 'tinted', 'dashed']>({\n outlined: ['bg-transparent border-sm border-solid border-current'],\n tinted: [''],\n dashed: [\n 'bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high',\n ],\n }),\n /**\n * Color scheme of the chip.\n */\n intent: makeVariants<\n 'intent',\n ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n }),\n /**\n * Disable the chip, preventing user interaction and adding opacity.\n */\n disabled: {\n true: ['cursor-not-allowed', 'opacity-dim-3'],\n },\n hasClearButton: {\n true: [],\n false: [],\n },\n // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'\n },\n compoundVariants: [...outlinedVariants, ...tintedVariants, ...dashedVariants],\n defaultVariants: {\n design: 'outlined',\n intent: 'support',\n },\n }\n)\n\nexport type ChipStylesProps = VariantProps<typeof chipStyles>\n","import { createContext, useContext } from 'react'\n\nimport { type ChipProps } from './Chip'\n\nexport type ChipsContextType = Pick<ChipProps, 'disabled' | 'design' | 'intent' | 'onClear'>\n\nexport const ChipContext = createContext<ChipsContextType>({} as ChipsContextType)\nexport const useChipContext = () => useContext(ChipContext) || {}\n","import { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { emulateTab } from 'emulate-tab'\nimport {\n Children,\n ElementType,\n FC,\n ForwardRefExoticComponent,\n HTMLAttributes,\n isValidElement,\n KeyboardEvent,\n MouseEvent,\n ReactElement,\n ReactNode,\n RefAttributes,\n} from 'react'\n\nimport { Slot } from '../slot'\n\ninterface ReturnedValue {\n Element:\n | ForwardRefExoticComponent<\n HTMLAttributes<HTMLElement> & {\n children?: ReactNode\n } & RefAttributes<HTMLElement>\n >\n | ElementType\n chipProps:\n | {\n type: 'button'\n 'aria-pressed'?: boolean\n 'data-state'?: 'on' | 'off'\n onClick: (event: MouseEvent<HTMLButtonElement>) => void\n onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n disabled?: boolean\n children: ReactNode\n }\n | {\n 'aria-disabled'?: boolean\n children: ReactNode\n onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n }\n compoundElements: {\n leadingIcon: ReactNode\n trailingIcon: ReactNode\n content: ReactNode\n clearButton: ReactNode\n }\n}\n\nconst getDisplayName = (element?: ReactElement) => {\n return element ? (element.type as FC).displayName : ''\n}\n\nconst findElement =\n (children: ReactNode) =>\n (...values: string[]) => {\n const validChildren = Children.toArray(children).filter(isValidElement)\n\n return validChildren.find(child => {\n const displayName = getDisplayName(child)\n\n return values.includes(displayName || '')\n })\n }\n\nexport const useChipElement = ({\n onClick,\n asChild,\n pressed,\n defaultPressed,\n disabled,\n value,\n defaultValue,\n children,\n onClear,\n}: {\n onClick?: (\n event: MouseEvent<HTMLButtonElement>,\n args: { pressed: boolean; value?: string | number | readonly string[] }\n ) => void\n onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n asChild?: boolean\n pressed?: boolean\n defaultPressed?: boolean\n value?: string | number | readonly string[]\n defaultValue?: string | number | readonly string[]\n disabled?: boolean\n children?: ReactNode\n onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n}): ReturnedValue => {\n const [isPressed, setIsPressed] = useCombinedState<boolean | undefined>(pressed, defaultPressed)\n const [innerValue] = useCombinedState<string | number | readonly string[] | undefined>(\n value,\n defaultValue\n )\n\n const findChipElement = findElement(children)\n\n const leadingIcon = findChipElement('Chip.LeadingIcon')\n const trailingIcon = findChipElement('Chip.TrailingIcon')\n const content = findChipElement('Chip.Content')\n const clearButton = findChipElement('Chip.ClearButton')\n\n const isButton = (onClick || isPressed) !== undefined\n\n const formattedChildren = [leadingIcon, content, clearButton].every(\n element => element === undefined\n ) ? (\n <span className=\"inline-block grow truncate\">{children}</span>\n ) : (\n <>\n {leadingIcon}\n {content}\n {leadingIcon === undefined ? trailingIcon : null}\n {clearButton}\n </>\n )\n\n const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {\n if (!!clearButton && !disabled && ['Delete', 'Backspace'].includes(event.key)) {\n if (onClear) {\n onClear()\n event.key === 'Delete' && emulateTab()\n event.key === 'Backspace' && emulateTab.backwards()\n }\n }\n }\n\n if (isButton) {\n return {\n Element: asChild ? Slot : 'button',\n chipProps: {\n type: 'button',\n ...(isPressed !== undefined && {\n 'aria-pressed': isPressed,\n 'data-state': isPressed ? 'on' : 'off',\n }),\n onClick: (event: MouseEvent<HTMLButtonElement>): void => {\n isPressed !== undefined && setIsPressed(!isPressed)\n onClick && onClick(event, { pressed: isPressed as boolean, value: innerValue })\n },\n onKeyDown,\n disabled,\n children: formattedChildren,\n },\n compoundElements: {\n leadingIcon,\n trailingIcon,\n content,\n clearButton,\n },\n }\n }\n\n return {\n Element: asChild ? Slot : 'div',\n chipProps: {\n 'aria-disabled': disabled,\n children: formattedChildren,\n onKeyDown,\n },\n compoundElements: {\n leadingIcon,\n trailingIcon,\n content,\n clearButton,\n },\n }\n}\n","import { ComponentPropsWithoutRef, MouseEvent, Ref } from 'react'\n\nimport { chipStyles, type ChipStylesProps } from './Chip.styles'\nimport { ChipContext } from './useChipContext'\nimport { useChipElement } from './useChipElement'\n\ntype ChipPrimitiveProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'disabled' | 'type'>\n\nexport interface ChipProps extends ChipPrimitiveProps, Omit<ChipStylesProps, 'hasClearButton'> {\n /**\n * Configures a toggleButton aria-pressed initial value\n */\n defaultPressed?: boolean\n /**\n * Configures a toggleButton aria-pressed value\n */\n pressed?: boolean\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * Event handler fired each clicking event\n */\n onClick?: (\n event: MouseEvent<HTMLButtonElement>,\n args: { pressed: boolean; value?: number | string | readonly string[] }\n ) => void\n /**\n * Clear chip handler\n */\n onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n ref?: Ref<HTMLButtonElement | HTMLDivElement>\n}\n\nexport const Chip = ({\n design = 'outlined',\n disabled,\n children,\n intent = 'support',\n defaultPressed,\n pressed,\n asChild,\n className,\n onClick,\n onClear,\n ref: forwardedRef,\n ...otherProps\n}: ChipProps) => {\n const {\n Element: ChipElement,\n chipProps: { children: formattedChildren, ...chipProps },\n compoundElements,\n } = useChipElement({\n asChild,\n pressed,\n defaultPressed,\n onClick,\n disabled: !!disabled,\n value: otherProps.value,\n defaultValue: otherProps.defaultValue,\n children,\n onClear,\n })\n\n const { clearButton } = compoundElements\n\n return (\n <ChipContext.Provider value={{ disabled, design, intent, onClear }}>\n <ChipElement\n ref={forwardedRef}\n className={chipStyles({\n className,\n design,\n disabled,\n intent,\n hasClearButton: !!clearButton,\n })}\n {...{\n ...chipProps,\n ...otherProps,\n }}\n data-spark-component=\"chip\"\n >\n {formattedChildren}\n </ChipElement>\n </ChipContext.Provider>\n )\n}\n\nChip.displayName = 'Chip'\n","import { tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const chipClearButtonWrapperStyles = cva(\n ['ml-md flex h-full items-center justify-center focus-visible:outline-hidden'],\n {\n variants: {\n disabled: {\n false: ['cursor-pointer'],\n true: ['cursor-not-allowed'],\n },\n isBordered: {\n false: ['pr-md'],\n true: ['pr-[7px]'],\n },\n design: {\n outlined: [],\n tinted: [],\n dashed: [],\n },\n },\n compoundVariants: [\n {\n design: 'outlined',\n disabled: false,\n class: tw(['hover:opacity-dim-1']),\n },\n {\n design: 'outlined',\n disabled: true,\n class: tw(['opacity-dim-3']),\n },\n {\n design: 'tinted',\n disabled: false,\n class: tw(['hover:opacity-dim-1']),\n },\n {\n design: 'tinted',\n disabled: true,\n class: tw(['opacity-dim-3']),\n },\n {\n design: 'dashed',\n disabled: false,\n class: tw(['hover:opacity-dim-1']),\n },\n {\n design: 'dashed',\n disabled: true,\n class: tw(['opacity-dim-3']),\n },\n ],\n }\n)\n\nexport const chipClearButtonStyles = cva(\n ['rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm', 'focus-visible:u-outline'],\n {\n variants: {\n disabled: {\n true: ['cursor-not-allowed'],\n false: ['cursor-pointer'],\n },\n },\n defaultVariants: {\n disabled: false,\n },\n }\n)\n\nexport type ChipClearButtonStylesProps = VariantProps<typeof chipClearButtonWrapperStyles>\n","import { Close } from '@spark-ui/icons/Close'\nimport {\n cloneElement,\n ComponentPropsWithoutRef,\n MouseEvent,\n ReactElement,\n Ref,\n useCallback,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport {\n chipClearButtonStyles,\n type ChipClearButtonStylesProps,\n chipClearButtonWrapperStyles,\n} from './ChipClearButton.styles'\nimport { useChipContext } from './useChipContext'\n\nexport interface ChipClearButtonProps\n extends ComponentPropsWithoutRef<'span'>,\n ChipClearButtonStylesProps {\n label: string\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipClearButton = ({\n children = (\n <Icon>\n <Close />\n </Icon>\n ),\n tabIndex = 0,\n label,\n ref: forwardedRef,\n}: ChipClearButtonProps) => {\n const { design, disabled, onClear } = useChipContext()\n\n const onClearHandler = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation()\n !disabled && onClear && onClear(event)\n },\n [disabled, onClear]\n )\n\n return (\n <span\n className={chipClearButtonWrapperStyles({\n isBordered: ['outline', 'dashed'].includes(`${design}`),\n disabled: !!disabled,\n design,\n })}\n onClick={onClearHandler}\n ref={forwardedRef}\n >\n <button\n tabIndex={tabIndex}\n type=\"button\"\n disabled={!!disabled}\n className={chipClearButtonStyles({ disabled })}\n aria-label={label}\n >\n {children && cloneElement(children as ReactElement<HTMLElement>, { ariaLabel: label })}\n </button>\n </span>\n )\n}\n\nChipClearButton.displayName = 'Chip.ClearButton'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipContentProps = ComponentPropsWithoutRef<'span'> & {\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipContent = ({ children, className, ref: forwardedRef }: ChipContentProps) => {\n return (\n <span className={cx('inline-block grow truncate', className)} ref={forwardedRef}>\n {children}\n </span>\n )\n}\n\nChipContent.displayName = 'Chip.Content'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipIconProps = ComponentPropsWithoutRef<'span'> & {\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipIcon = ({ children, className, ref: forwardedRef }: ChipIconProps) => {\n return (\n <span className={cx('flex h-full items-center justify-center', className)} ref={forwardedRef}>\n {children}\n </span>\n )\n}\n\nChipIcon.displayName = 'Chip.Icon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipLeadingIconProps = ChipIconProps & {\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipLeadingIcon = ({\n className,\n ref: forwardedRef,\n ...props\n}: ChipLeadingIconProps) => (\n <ChipIcon className={cx('mr-sm', className)} ref={forwardedRef} {...props} />\n)\n\nChipLeadingIcon.displayName = 'Chip.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipTrailingIconProps = ChipIconProps & {\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipTrailingIcon = ({\n className,\n ref: forwardedRef,\n ...props\n}: ChipTrailingIconProps) => (\n <ChipIcon className={cx('ml-md', className)} ref={forwardedRef} {...props} />\n)\n\nChipTrailingIcon.displayName = 'Chip.TrailingIcon'\n","import { Chip as Root } from './Chip'\nimport { ChipClearButton } from './ChipClearButton'\nimport { ChipContent } from './ChipContent'\nimport { ChipLeadingIcon } from './ChipLeadingIcon'\nimport { ChipTrailingIcon } from './ChipTrailingIcon'\n\nexport const Chip: typeof Root & {\n Content: typeof ChipContent\n LeadingIcon: typeof ChipLeadingIcon\n TrailingIcon: typeof ChipTrailingIcon\n ClearButton: typeof ChipClearButton\n} = Object.assign(Root, {\n Content: ChipContent,\n LeadingIcon: ChipLeadingIcon,\n TrailingIcon: ChipTrailingIcon,\n ClearButton: ChipClearButton,\n})\n\nChip.displayName = 'Chip'\nChip.ClearButton.displayName = 'Chip.ClearButton'\nChip.Content.displayName = 'Chip.Content'\nChip.LeadingIcon.displayName = 'Chip.LeadingIcon'\nChip.TrailingIcon.displayName = 'Chip.TrailingIcon'\n\nexport { type ChipClearButtonProps } from './ChipClearButton'\nexport { type ChipContentProps } from './ChipContent'\nexport { type ChipLeadingIconProps } from './ChipLeadingIcon'\nexport { type ChipTrailingIconProps } from './ChipTrailingIcon'\n"],"names":["outlinedVariants","tw","tintedVariants","dashedVariants","chipStyles","cva","makeVariants","ChipContext","createContext","useChipContext","useContext","getDisplayName","element","findElement","children","values","Children","isValidElement","child","displayName","useChipElement","onClick","asChild","pressed","defaultPressed","disabled","value","defaultValue","onClear","isPressed","setIsPressed","useCombinedState","innerValue","findChipElement","leadingIcon","trailingIcon","content","clearButton","isButton","formattedChildren","jsx","jsxs","Fragment","onKeyDown","event","emulateTab","Slot","Chip","design","intent","className","forwardedRef","otherProps","ChipElement","chipProps","compoundElements","chipClearButtonWrapperStyles","chipClearButtonStyles","ChipClearButton","Icon","Close","tabIndex","label","onClearHandler","useCallback","cloneElement","ChipContent","cx","ChipIcon","ChipLeadingIcon","props","ChipTrailingIcon","Root"],"mappings":"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"}
|
|
@@ -6,10 +6,6 @@ export declare const dashedVariants: readonly [{
|
|
|
6
6
|
readonly intent: "support";
|
|
7
7
|
readonly design: "dashed";
|
|
8
8
|
readonly class: string[];
|
|
9
|
-
}, {
|
|
10
|
-
readonly intent: "basic";
|
|
11
|
-
readonly design: "dashed";
|
|
12
|
-
readonly class: string[];
|
|
13
9
|
}, {
|
|
14
10
|
readonly intent: "accent";
|
|
15
11
|
readonly design: "dashed";
|
|
@@ -6,10 +6,6 @@ export declare const outlinedVariants: readonly [{
|
|
|
6
6
|
readonly design: "outlined";
|
|
7
7
|
readonly intent: "support";
|
|
8
8
|
readonly class: string[];
|
|
9
|
-
}, {
|
|
10
|
-
readonly design: "outlined";
|
|
11
|
-
readonly intent: "basic";
|
|
12
|
-
readonly class: string[];
|
|
13
9
|
}, {
|
|
14
10
|
readonly intent: "accent";
|
|
15
11
|
readonly design: "outlined";
|
|
@@ -6,10 +6,6 @@ export declare const tintedVariants: readonly [{
|
|
|
6
6
|
readonly intent: "support";
|
|
7
7
|
readonly design: "tinted";
|
|
8
8
|
readonly class: string[];
|
|
9
|
-
}, {
|
|
10
|
-
readonly intent: "basic";
|
|
11
|
-
readonly design: "tinted";
|
|
12
|
-
readonly class: string[];
|
|
13
9
|
}, {
|
|
14
10
|
readonly intent: "accent";
|
|
15
11
|
readonly design: "tinted";
|
package/dist/combobox/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),J=require("@spark-ui/components/form-field"),we=require("@spark-ui/hooks/use-combined-state"),I=require("downshift"),l=require("react"),M=require("../popover/index.js"),Pe=require("@spark-ui/icons/DeleteOutline"),x=require("class-variance-authority"),A=require("../Icon-CF0W0LKr.js"),L=require("@spark-ui/hooks/use-merge-refs"),Ze=require("@spark-ui/icons/ArrowHorizontalDown"),et=require("../IconButton-D3g86WpZ.js"),tt=require("../VisuallyHidden-CB6Nx76j.js"),ot=require("@spark-ui/icons/Check"),st=require("../Spinner-_Kffli3B.js");function Ne(e,o){let t=0;for(const[s]of e.entries()){if(s===o)return t;t++}return-1}const nt=(e,o)=>{let t=0;for(const s of e.keys()){if(t===o)return s;t++}},rt=(e,o)=>{const t=nt(e,o);return t!==void 0?e.get(t):void 0},$=e=>e?e.type.displayName:"",Se=(e,o=[])=>(l.Children.forEach(e,t=>{if(l.isValidElement(t)){if($(t)==="Combobox.Item"){const s=t.props;o.push({value:s.value,disabled:!!s.disabled,text:je(s.children)})}t.props.children&&Se(t.props.children,o)}}),o),Te=e=>{if(!e)return"";for(const o of l.Children.toArray(e))if(l.isValidElement(o)){const t=o;if($(t)==="Combobox.ItemText")return t.props.children;const s=Te(t.props.children);if(s)return s}return""},je=e=>typeof e=="string"?e:Te(e),ve=e=>{const o=new Map;return Se(e).forEach(t=>{o.set(t.value,t)}),o},Ee=(e,o)=>l.Children.toArray(e).some(t=>l.isValidElement(t)?$(t)===o?!0:t.props.children?Ee(t.props.children,o):!1:!1),F=(e,o)=>l.Children.toArray(e).filter(l.isValidElement).find(t=>o===$(t)||""),lt=({multiselect:e,selectedItems:o,allowCustomValue:t=!1,setSelectedItems:s,triggerAreaRef:a,items:r})=>(c,{changes:n,type:p})=>{const m=a.current?.contains?.(document.activeElement);switch(p){case I.useCombobox.stateChangeTypes.InputClick:return{...n,isOpen:!0};case I.useCombobox.stateChangeTypes.InputKeyDownEnter:case I.useCombobox.stateChangeTypes.ItemClick:{const f={...n};if(n.selectedItem!=null){f.inputValue="",f.isOpen=!0;const T=Ne(r,n.selectedItem.value);f.highlightedIndex=T;const j=e.selectedItems.some(y=>y.value===n.selectedItem?.value)?o.filter(y=>y.value!==n.selectedItem?.value):[...o,n.selectedItem];s(j)}return f}case I.useCombobox.stateChangeTypes.ToggleButtonClick:return{...n,inputValue:t?n.inputValue:""};case I.useCombobox.stateChangeTypes.InputChange:return{...n,selectedItem:n.highlightedIndex===-1?null:n.selectedItem};case I.useCombobox.stateChangeTypes.InputBlur:return{...n,inputValue:t?n.inputValue:"",isOpen:m};default:return n}},at=({filteredItems:e,allowCustomValue:o=!1,setSelectedItem:t})=>(a,{changes:r,type:u})=>{const c=e.find(n=>n.text.toLowerCase()===a.inputValue.toLowerCase());switch(u){case I.useCombobox.stateChangeTypes.InputKeyDownEscape:return r.selectedItem||t(null),r;case I.useCombobox.stateChangeTypes.ItemClick:case I.useCombobox.stateChangeTypes.InputKeyDownEnter:return r.selectedItem&&t(r.selectedItem),r;case I.useCombobox.stateChangeTypes.InputClick:return{...r,isOpen:!0};case I.useCombobox.stateChangeTypes.ToggleButtonClick:case I.useCombobox.stateChangeTypes.InputBlur:return o?r:a.inputValue===""?(t(null),{...r,selectedItem:null}):c?(t(c),{...r,selectedItem:c,inputValue:c.text}):a.selectedItem?{...r,inputValue:a.selectedItem.text}:{...r,inputValue:""};default:return r}},Oe=l.createContext(null),U=(e,o)=>o?new Map(Array.from(e).filter(([t,{text:s}])=>s.toLowerCase().includes(o.toLowerCase()))):e,K=":combobox",ke=({children:e,state:o,allowCustomValue:t=!1,filtering:s="auto",disabled:a=!1,multiple:r=!1,readOnly:u=!1,wrap:c=!0,value:n,defaultValue:p,onValueChange:m,open:f,defaultOpen:T,onOpenChange:C,isLoading:j})=>{const y=l.useRef(!1),[P,N]=l.useState(""),[k,w]=l.useState(s==="strict"),R=l.useRef(null),E=l.useRef(null),[W,B]=l.useState(null),[O]=we.useCombinedState(n,p),G=s==="strict"||s==="auto"&&k,[h,Ae]=l.useState(ve(e)),[z,me]=l.useState(G?U(h,P):h),[pe,be]=l.useState(h.get(O)||null),[xe,fe]=l.useState(O?[...h.values()].filter(d=>O.includes(d.value)):[]),Ie=d=>{w(!1),d?.value!==pe?.value&&(be(d),setTimeout(()=>{m?.(d?.value)},0))},H=d=>{fe(d),setTimeout(()=>{m?.(d.map(g=>g.value))},0)};l.useEffect(()=>{if(!y.current){y.current=!0;return}if(r){const d=O.reduce((g,b)=>{const S=h.get(b);return S?[...g,S]:g},[]);fe(O?d:[])}else be(h.get(O)||null)},[r?JSON.stringify(O):O]);const D=J.useFormFieldControl(),Le=`${K}-label-${l.useId()}`,Be=`${K}-field-${l.useId()}`,Ce=D.id||Be,ze=D.labelId||Le,qe=D.state||o,Ke=D.disabled??a,$e=D.readOnly??u,[ye,We]=l.useState(Ee(e,"Combobox.Popover")),[Ge,He]=l.useState(!1),[_e,Ue]=l.useState("mouse");l.useEffect(()=>{me(G?U(h,P):h)},[P,h]);const ge=I.useMultipleSelection({selectedItems:xe,stateReducer:(d,{type:g,changes:b})=>{const S=I.useMultipleSelection.stateChangeTypes;switch(g){case S.SelectedItemKeyDownBackspace:case S.SelectedItemKeyDownDelete:{H(b.selectedItems||[]);let V;return g===S.SelectedItemKeyDownDelete?V=d?.activeIndex===b.selectedItems?.length?-1:d.activeIndex:V=(b?.activeIndex||0)-1>=0?d.activeIndex-1:b?.activeIndex,{...b,activeIndex:V}}case S.SelectedItemClick:return E.current&&E.current.focus(),{...b,activeIndex:-1};case S.FunctionRemoveSelectedItem:return{...b,activeIndex:-1};case S.DropdownKeyDownNavigationPrevious:return _.closeMenu(),b;default:return b}}}),he=Array.from(z.values());l.useEffect(()=>{W?.(P||"")},[P]);const _=I.useCombobox({inputId:Ce,items:he,selectedItem:r?void 0:pe,id:Ce,labelId:ze,inputValue:P,onInputValueChange:({inputValue:d})=>{if(N(d),G){const g=U(h,d||"");me(g)}},initialIsOpen:T,...f!=null&&{isOpen:f},onIsOpenChange:d=>{d.isOpen!=null&&C?.(d.isOpen)},itemToString:d=>d?.text,isItemDisabled:d=>{const g=!!P&&!he.some(b=>d.value===b.value);return d.disabled||g},stateReducer:r?lt({multiselect:ge,selectedItems:xe,allowCustomValue:t,setSelectedItems:H,triggerAreaRef:R,items:h}):at({allowCustomValue:t,setSelectedItem:Ie,filteredItems:[...z.values()]}),scrollIntoView:d=>{d&&d.scrollIntoView({block:"nearest"})}});l.useEffect(()=>{const d=ve(e),g=[...h.values()],b=[...d.values()];(g.length!==b.length||g.some((V,q)=>{const Qe=V.value!==b[q]?.value,Ye=V.text!==b[q]?.text;return Qe||Ye}))&&Ae(d)},[e]);const[Je,Xe]=ye?[M.Popover,{open:!0}]:[l.Fragment,{}];return i.jsx(Oe.Provider,{value:{itemsMap:h,filteredItemsMap:z,highlightedItem:rt(z,_.highlightedIndex),multiple:r,disabled:Ke,readOnly:$e,areSelectedItemsInTrigger:Ge,setAreSelectedItemsInTrigger:He,hasPopover:ye,setHasPopover:We,state:qe,lastInteractionType:_e,setLastInteractionType:Ue,wrap:c,innerInputRef:E,triggerAreaRef:R,..._,...ge,setInputValue:N,selectItem:Ie,setSelectedItems:H,isLoading:j,setOnInputValueChange:B,isTyping:k,setIsTyping:w},children:i.jsx(Je,{...Xe,children:e})})},v=()=>{const e=l.useContext(Oe);if(!e)throw Error("useComboboxContext must be used within a Combobox provider");return e},Re=({children:e,...o})=>i.jsx(ke,{...o,children:e});Re.displayName="Combobox";const X=({className:e,tabIndex:o=-1,onClick:t,ref:s,...a})=>{const r=v(),u=c=>{c.stopPropagation(),r.multiple?r.setSelectedItems([]):r.selectItem(null),r.setInputValue(""),r.innerInputRef.current&&r.innerInputRef.current.focus(),t&&t(c)};return i.jsx("button",{ref:s,className:x.cx(e,"h-sz-44 text-neutral hover:text-neutral-hovered"),tabIndex:o,onClick:u,type:"button",...a,children:i.jsx(A.Icon,{size:"sm",children:i.jsx(Pe.DeleteOutline,{})})})};X.displayName="Combobox.ClearButton";const Q=({className:e,closedLabel:o,openedLabel:t,intent:s="neutral",design:a="ghost",size:r="sm",ref:u,...c})=>{const n=v(),{ref:p,...m}=n.getToggleButtonProps({disabled:n.disabled||n.readOnly,onClick:C=>{C.stopPropagation()}}),f=m["aria-expanded"],T=L.useMergeRefs(u,p);return i.jsx(et.IconButton,{ref:T,className:x.cx(e,"ml-sm mt-[calc((44px-32px)/2)]"),intent:s,design:a,size:r,...m,...c,"aria-label":f?t:o,disabled:n.disabled,children:i.jsx(A.Icon,{className:x.cx("shrink-0","rotate-0 transition duration-100 ease-in",{"rotate-180":f}),size:"sm",children:i.jsx(Ze.ArrowHorizontalDown,{})})})};Q.displayName="Combobox.Disclosure";const Y=({className:e,children:o,ref:t})=>v().filteredItemsMap.size===0?i.jsx("div",{ref:t,className:x.cx("px-lg py-md text-body-1 text-on-surface/dim-1",e),children:o}):null;Y.displayName="Combobox.Empty";const Ve=l.createContext(null),it=({children:e})=>{const o=`${K}-group-label-${l.useId()}`;return i.jsx(Ve.Provider,{value:{groupLabelId:o},children:e})},De=()=>{const e=l.useContext(Ve);if(!e)throw Error("useComboboxGroupContext must be used within a ComboboxGroup provider");return e},Z=({children:e,ref:o,...t})=>i.jsx(it,{children:i.jsx(ct,{ref:o,...t,children:e})}),ct=({children:e,className:o,ref:t})=>{const s=v(),a=De();return l.Children.toArray(e).some(u=>l.isValidElement(u)&&s.filteredItemsMap.get(u.props.value))?i.jsx("div",{ref:t,role:"group","aria-labelledby":a.groupLabelId,className:x.cx(o),children:e}):null};Z.displayName="Combobox.Group";const ee=({"aria-label":e,className:o,placeholder:t,value:s,defaultValue:a,onValueChange:r,ref:u,...c})=>{const n=v(),p=J.useFormFieldControl(),[m]=we.useCombinedState(s,a),{isInvalid:f,description:T}=p;l.useEffect(()=>{m!=null&&n.setInputValue(m)},[m]),l.useEffect(()=>{r&&n.setOnInputValueChange(()=>r),!n.multiple&&n.selectedItem&&n.setInputValue(n.selectedItem.text)},[]);const C=n.hasPopover?M.Popover.Trigger:l.Fragment,j=n.hasPopover?{asChild:!0,type:void 0}:{},y=n.getDropdownProps(),P=L.useMergeRefs(u,n.innerInputRef,y.ref),N=n.getInputProps({disabled:n.disabled||n.readOnly,...y,onKeyDown:E=>{y.onKeyDown?.(E),n.setLastInteractionType("keyboard"),n.setIsTyping(!0)},onChange:E=>{n.setInputValue(E.target.value)},ref:P}),k=n.multiple?!n.areSelectedItemsInTrigger||n.selectedItems.length===0:n.selectedItem===null;function w(E,W){return B=>{E?.(B),W?.(B)}}const R={onBlur:w(c.onBlur,N.onBlur),onChange:w(c.onChange,N.onChange),onClick:w(c.onClick,N.onClick),onKeyDown:w(c.onKeyDown,N.onKeyDown)};return i.jsxs(i.Fragment,{children:[e&&i.jsx(tt.VisuallyHidden,{children:i.jsx("label",{...n.getLabelProps(),children:e})}),i.jsx(C,{...j,children:i.jsx("input",{"data-spark-component":"combobox-input",type:"text",...k&&{placeholder:t},className:x.cx("max-w-full shrink-0 grow basis-[80px]","h-sz-28 bg-surface px-sm text-body-1 text-ellipsis outline-hidden","disabled:text-on-surface/dim-3 disabled:cursor-not-allowed disabled:bg-transparent","read-only:text-on-surface read-only:cursor-default read-only:bg-transparent",o),...c,...N,...R,value:n.inputValue,"aria-label":e,disabled:n.disabled,readOnly:n.readOnly,"aria-invalid":f,"aria-describedby":T})})]})};ee.displayName="Combobox.Input";const Fe=l.createContext(null),ut=({value:e,disabled:o=!1,children:t})=>{const s=v(),[a,r]=l.useState(void 0),u=Ne(s.filteredItemsMap,e),c={disabled:o,value:e,text:je(t)},n=s.multiple?s.selectedItems.some(p=>p.value===e):s.selectedItem?.value===e;return i.jsx(Fe.Provider,{value:{textId:a,setTextId:r,isSelected:n,itemData:c,index:u,disabled:o},children:t})},te=()=>{const e=l.useContext(Fe);if(!e)throw Error("useComboboxItemContext must be used within a ComboboxItem provider");return e},oe=({children:e,ref:o,...t})=>{const{value:s,disabled:a}=t;return i.jsx(ut,{value:s,disabled:a,children:i.jsx(mt,{ref:o,...t,children:e})})},dt=x.cva("px-lg py-md text-body-1",{variants:{selected:{true:"font-bold"},disabled:{true:"opacity-dim-3 cursor-not-allowed",false:"cursor-pointer"},highlighted:{true:""},interactionType:{mouse:"",keyboard:""}},compoundVariants:[{highlighted:!0,interactionType:"mouse",class:"bg-surface-hovered"},{highlighted:!0,interactionType:"keyboard",class:"u-outline"}]}),mt=({className:e,disabled:o=!1,value:t,children:s,ref:a,...r})=>{const u=v(),c=te(),n=!!u.filteredItemsMap.get(t),{ref:p,...m}=u.getItemProps({item:c.itemData,index:c.index}),f=L.useMergeRefs(a,p);return n?i.jsx("li",{ref:f,className:x.cx(dt({selected:c.isSelected,disabled:o,highlighted:u.highlightedItem?.value===t,interactionType:u.lastInteractionType,className:e})),...m,...r,"aria-selected":c.isSelected,"aria-labelledby":c.textId,children:s},t):null};oe.displayName="Combobox.Item";const se=({className:e,children:o,label:t,ref:s})=>{const{disabled:a,isSelected:r}=te(),u=o||i.jsx(A.Icon,{size:"sm",children:i.jsx(ot.Check,{"aria-label":t})});return i.jsx("span",{ref:s,className:x.cx("min-h-sz-16 min-w-sz-16 flex",a&&"opacity-dim-3",e),children:r&&u})};se.displayName="Combobox.ItemIndicator";const ne=({children:e,className:o,ref:t,...s})=>{const a=v(),{ref:r,...u}=a.getMenuProps({onMouseMove:()=>{a.setLastInteractionType("mouse")}}),c=l.useRef(null),n=L.useMergeRefs(t,r,c),p=a.hasPopover?a.isOpen:!0,m=a.hasPopover&&!p;return l.useLayoutEffect(()=>{c.current?.parentElement&&(c.current.parentElement.style.pointerEvents=m?"none":"",c.current.style.pointerEvents=m?"none":"")},[m]),i.jsx("ul",{ref:n,className:x.cx(o,"flex flex-col",p?"block":"pointer-events-none invisible opacity-0",a.hasPopover&&"p-lg",a.isLoading&&"items-center overflow-y-auto"),...s,...u,"aria-busy":a.isLoading,"data-spark-component":"combobox-items",children:a.isLoading?i.jsx(st.Spinner,{size:"sm"}):e})};ne.displayName="Combobox.Items";const re=({children:e,className:o,ref:t})=>{const s=`${K}-item-text-${l.useId()}`,{setTextId:a}=te();return l.useEffect(()=>(a(s),()=>a(void 0))),i.jsx("span",{id:s,className:x.cx("inline",o),ref:t,children:e})};re.displayName="Combobox.ItemText";const le=({children:e,className:o,ref:t})=>{const s=De();return i.jsx("div",{ref:t,id:s.groupLabelId,className:x.cx("px-md py-sm text-body-2 text-neutral italic",o),children:e})};le.displayName="Combobox.Label";const ae=({children:e})=>i.jsx(A.Icon,{size:"sm",className:"h-sz-44 shrink-0",children:e});ae.displayName="Combobox.LeadingIcon";const ie=({children:e,matchTriggerWidth:o=!0,sideOffset:t=4,className:s,ref:a,...r})=>{const u=v();return l.useEffect(()=>(u.setHasPopover(!0),()=>u.setHasPopover(!1)),[]),i.jsx(M.Popover.Content,{ref:a,inset:!0,asChild:!0,matchTriggerWidth:o,className:x.cx("z-dropdown! relative",s),sideOffset:t,onOpenAutoFocus:c=>{c.preventDefault()},...r,"data-spark-component":"combobox-popover",children:e})};ie.displayName="Combobox.Popover";const ce=({children:e,...o})=>i.jsx(M.Popover.Portal,{...o,children:e});ce.displayName="Combobox.Portal";const pt=({item:e,index:o})=>{const t=v(),s=!t.disabled&&!t.readOnly,a=n=>{const p=n.target;t.lastInteractionType==="keyboard"&&p.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})},{disabled:r,...u}=t.getSelectedItemProps({disabled:t.disabled||t.readOnly,selectedItem:e,index:o}),c=r?"button":"span";return i.jsxs(c,{role:"presentation","data-spark-component":"combobox-selected-item",className:x.cx("h-sz-28 bg-neutral-container flex items-center rounded-md align-middle","text-body-2 text-on-neutral-container","disabled:opacity-dim-3 disabled:cursor-not-allowed","focus-visible:u-outline-inset outline-hidden",{"px-md":!s,"pl-md":s}),...u,tabIndex:-1,...r&&{disabled:!0},onFocus:a,children:[i.jsx("span",{className:x.cx("line-clamp-1 overflow-x-hidden leading-normal break-all text-ellipsis",{"w-max":!t.wrap}),children:e.text}),t.disabled,s&&i.jsx("button",{type:"button",tabIndex:-1,"aria-hidden":!0,className:"px-md h-full cursor-pointer",onClick:n=>{n.stopPropagation();const p=t.selectedItems.filter(m=>m.value!==e.value);t.setSelectedItems(p),t.innerInputRef.current&&t.innerInputRef.current.focus({preventScroll:!0})},children:i.jsx(A.Icon,{size:"sm",children:i.jsx(Pe.DeleteOutline,{})})})]},`selected-item-${o}`)},ue=()=>{const e=v();return e.multiple&&e.selectedItems.length?i.jsx(i.Fragment,{children:e.selectedItems.map((o,t)=>i.jsx(pt,{item:o,index:t},o.value))}):null};ue.displayName="Combobox.SelectedItems";const bt=x.cva(["flex items-start gap-md min-h-sz-44 text-body-1","h-fit rounded-lg px-lg","ring-1 outline-hidden ring-inset focus-within:ring-2 focus-within:ring-focus"],{variants:{allowWrap:{true:"",false:"h-sz-44"},state:{undefined:"ring-outline",error:"ring-error",alert:"ring-alert",success:"ring-success"},disabled:{true:"cursor-not-allowed border-outline bg-on-surface/dim-5 text-on-surface/dim-3"},readOnly:{true:"cursor-default bg-on-surface/dim-5 text-on-surface"}},compoundVariants:[{disabled:!1,state:void 0,class:"default:hover:ring-outline-high"},{disabled:!1,readOnly:!1,class:"bg-surface text-on-surface cursor-text"}],defaultVariants:{state:void 0,disabled:!1,readOnly:!1}}),xt=(e,o)=>{const t=l.useRef(null);l.useEffect(()=>{const s=()=>{const r=e.current?.scrollWidth||null;t.current&&r&&r>t.current&&o(),t.current=r,requestAnimationFrame(s)},a=requestAnimationFrame(s);return()=>cancelAnimationFrame(a)},[e])},de=({className:e,children:o,ref:t})=>{const s=v(),a=J.useFormFieldControl(),r=F(o,"Combobox.LeadingIcon"),u=F(o,"Combobox.SelectedItems"),c=F(o,"Combobox.Input"),n=F(o,"Combobox.ClearButton"),p=F(o,"Combobox.Disclosure"),[m,f]=s.hasPopover?[M.Popover.Anchor,{asChild:!0,type:void 0}]:[l.Fragment,{}],T=L.useMergeRefs(t,s.triggerAreaRef),C=l.useRef(null),j=a.disabled||s.disabled,y=a.readOnly||s.readOnly,P=!!n&&!j&&!y,N=()=>{if(C.current&&!s.wrap){const{scrollWidth:w,clientWidth:R}=C.current;C.current.scrollLeft=w-R}};xt(C,N);const k=!!u;return l.useEffect(()=>{s.setAreSelectedItemsInTrigger(k)},[k]),l.useEffect(()=>{const w=new ResizeObserver(N);return C.current&&w.observe(C.current),()=>{w.disconnect()}},[]),i.jsx(i.Fragment,{children:i.jsx(m,{...f,children:i.jsxs("div",{ref:T,className:bt({className:e,state:s.state,disabled:j,readOnly:y,allowWrap:s.wrap}),onClick:()=>{!s.isOpen&&!j&&!y&&(s.openMenu(),s.innerInputRef.current&&s.innerInputRef.current.focus())},children:[r,i.jsxs("div",{ref:C,className:x.cx("min-w-none gap-sm py-md inline-flex grow items-start",s.wrap?"flex-wrap":"u-no-scrollbar overflow-x-auto p-[2px]"),children:[u,c]}),P&&n,p]})})})};de.displayName="Combobox.Trigger";const Me=Object.assign(Re,{Group:Z,Item:oe,Items:ne,ItemText:re,ItemIndicator:se,Label:le,Popover:ie,Trigger:de,LeadingIcon:ae,Empty:Y,Input:ee,Disclosure:Q,SelectedItems:ue,ClearButton:X,Portal:ce});Me.displayName="Combobox";Z.displayName="Combobox.Group";ne.displayName="Combobox.Items";oe.displayName="Combobox.Item";re.displayName="Combobox.ItemText";se.displayName="Combobox.ItemIndicator";le.displayName="Combobox.Label";ie.displayName="Combobox.Popover";de.displayName="Combobox.Trigger";ae.displayName="Combobox.LeadingIcon";Y.displayName="Combobox.Empty";ee.displayName="Combobox.Input";Q.displayName="Combobox.Disclosure";ue.displayName="Combobox.SelectedItems";X.displayName="Combobox.ClearButton";ce.displayName="Combobox.Portal";exports.Combobox=Me;exports.ComboboxProvider=ke;exports.useComboboxContext=v;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),J=require("@spark-ui/components/form-field"),we=require("@spark-ui/hooks/use-combined-state"),I=require("downshift"),l=require("react"),M=require("../popover/index.js"),Pe=require("@spark-ui/icons/DeleteOutline"),x=require("class-variance-authority"),A=require("../Icon-C-cNTnzd.js"),L=require("@spark-ui/hooks/use-merge-refs"),Ze=require("@spark-ui/icons/ArrowHorizontalDown"),et=require("../IconButton-BR1bJSQA.js"),tt=require("../VisuallyHidden-CB6Nx76j.js"),ot=require("@spark-ui/icons/Check"),st=require("../Spinner-Br4Rp9V2.js");function Ne(e,o){let t=0;for(const[s]of e.entries()){if(s===o)return t;t++}return-1}const nt=(e,o)=>{let t=0;for(const s of e.keys()){if(t===o)return s;t++}},rt=(e,o)=>{const t=nt(e,o);return t!==void 0?e.get(t):void 0},$=e=>e?e.type.displayName:"",Se=(e,o=[])=>(l.Children.forEach(e,t=>{if(l.isValidElement(t)){if($(t)==="Combobox.Item"){const s=t.props;o.push({value:s.value,disabled:!!s.disabled,text:je(s.children)})}t.props.children&&Se(t.props.children,o)}}),o),Te=e=>{if(!e)return"";for(const o of l.Children.toArray(e))if(l.isValidElement(o)){const t=o;if($(t)==="Combobox.ItemText")return t.props.children;const s=Te(t.props.children);if(s)return s}return""},je=e=>typeof e=="string"?e:Te(e),ve=e=>{const o=new Map;return Se(e).forEach(t=>{o.set(t.value,t)}),o},Ee=(e,o)=>l.Children.toArray(e).some(t=>l.isValidElement(t)?$(t)===o?!0:t.props.children?Ee(t.props.children,o):!1:!1),F=(e,o)=>l.Children.toArray(e).filter(l.isValidElement).find(t=>o===$(t)||""),lt=({multiselect:e,selectedItems:o,allowCustomValue:t=!1,setSelectedItems:s,triggerAreaRef:a,items:r})=>(c,{changes:n,type:p})=>{const m=a.current?.contains?.(document.activeElement);switch(p){case I.useCombobox.stateChangeTypes.InputClick:return{...n,isOpen:!0};case I.useCombobox.stateChangeTypes.InputKeyDownEnter:case I.useCombobox.stateChangeTypes.ItemClick:{const f={...n};if(n.selectedItem!=null){f.inputValue="",f.isOpen=!0;const T=Ne(r,n.selectedItem.value);f.highlightedIndex=T;const j=e.selectedItems.some(y=>y.value===n.selectedItem?.value)?o.filter(y=>y.value!==n.selectedItem?.value):[...o,n.selectedItem];s(j)}return f}case I.useCombobox.stateChangeTypes.ToggleButtonClick:return{...n,inputValue:t?n.inputValue:""};case I.useCombobox.stateChangeTypes.InputChange:return{...n,selectedItem:n.highlightedIndex===-1?null:n.selectedItem};case I.useCombobox.stateChangeTypes.InputBlur:return{...n,inputValue:t?n.inputValue:"",isOpen:m};default:return n}},at=({filteredItems:e,allowCustomValue:o=!1,setSelectedItem:t})=>(a,{changes:r,type:u})=>{const c=e.find(n=>n.text.toLowerCase()===a.inputValue.toLowerCase());switch(u){case I.useCombobox.stateChangeTypes.InputKeyDownEscape:return r.selectedItem||t(null),r;case I.useCombobox.stateChangeTypes.ItemClick:case I.useCombobox.stateChangeTypes.InputKeyDownEnter:return r.selectedItem&&t(r.selectedItem),r;case I.useCombobox.stateChangeTypes.InputClick:return{...r,isOpen:!0};case I.useCombobox.stateChangeTypes.ToggleButtonClick:case I.useCombobox.stateChangeTypes.InputBlur:return o?r:a.inputValue===""?(t(null),{...r,selectedItem:null}):c?(t(c),{...r,selectedItem:c,inputValue:c.text}):a.selectedItem?{...r,inputValue:a.selectedItem.text}:{...r,inputValue:""};default:return r}},Oe=l.createContext(null),U=(e,o)=>o?new Map(Array.from(e).filter(([t,{text:s}])=>s.toLowerCase().includes(o.toLowerCase()))):e,K=":combobox",ke=({children:e,state:o,allowCustomValue:t=!1,filtering:s="auto",disabled:a=!1,multiple:r=!1,readOnly:u=!1,wrap:c=!0,value:n,defaultValue:p,onValueChange:m,open:f,defaultOpen:T,onOpenChange:C,isLoading:j})=>{const y=l.useRef(!1),[P,N]=l.useState(""),[k,w]=l.useState(s==="strict"),R=l.useRef(null),E=l.useRef(null),[W,B]=l.useState(null),[O]=we.useCombinedState(n,p),G=s==="strict"||s==="auto"&&k,[h,Ae]=l.useState(ve(e)),[z,me]=l.useState(G?U(h,P):h),[pe,be]=l.useState(h.get(O)||null),[xe,fe]=l.useState(O?[...h.values()].filter(d=>O.includes(d.value)):[]),Ie=d=>{w(!1),d?.value!==pe?.value&&(be(d),setTimeout(()=>{m?.(d?.value)},0))},H=d=>{fe(d),setTimeout(()=>{m?.(d.map(g=>g.value))},0)};l.useEffect(()=>{if(!y.current){y.current=!0;return}if(r){const d=O.reduce((g,b)=>{const S=h.get(b);return S?[...g,S]:g},[]);fe(O?d:[])}else be(h.get(O)||null)},[r?JSON.stringify(O):O]);const D=J.useFormFieldControl(),Le=`${K}-label-${l.useId()}`,Be=`${K}-field-${l.useId()}`,Ce=D.id||Be,ze=D.labelId||Le,qe=D.state||o,Ke=D.disabled??a,$e=D.readOnly??u,[ye,We]=l.useState(Ee(e,"Combobox.Popover")),[Ge,He]=l.useState(!1),[_e,Ue]=l.useState("mouse");l.useEffect(()=>{me(G?U(h,P):h)},[P,h]);const ge=I.useMultipleSelection({selectedItems:xe,stateReducer:(d,{type:g,changes:b})=>{const S=I.useMultipleSelection.stateChangeTypes;switch(g){case S.SelectedItemKeyDownBackspace:case S.SelectedItemKeyDownDelete:{H(b.selectedItems||[]);let V;return g===S.SelectedItemKeyDownDelete?V=d?.activeIndex===b.selectedItems?.length?-1:d.activeIndex:V=(b?.activeIndex||0)-1>=0?d.activeIndex-1:b?.activeIndex,{...b,activeIndex:V}}case S.SelectedItemClick:return E.current&&E.current.focus(),{...b,activeIndex:-1};case S.FunctionRemoveSelectedItem:return{...b,activeIndex:-1};case S.DropdownKeyDownNavigationPrevious:return _.closeMenu(),b;default:return b}}}),he=Array.from(z.values());l.useEffect(()=>{W?.(P||"")},[P]);const _=I.useCombobox({inputId:Ce,items:he,selectedItem:r?void 0:pe,id:Ce,labelId:ze,inputValue:P,onInputValueChange:({inputValue:d})=>{if(N(d),G){const g=U(h,d||"");me(g)}},initialIsOpen:T,...f!=null&&{isOpen:f},onIsOpenChange:d=>{d.isOpen!=null&&C?.(d.isOpen)},itemToString:d=>d?.text,isItemDisabled:d=>{const g=!!P&&!he.some(b=>d.value===b.value);return d.disabled||g},stateReducer:r?lt({multiselect:ge,selectedItems:xe,allowCustomValue:t,setSelectedItems:H,triggerAreaRef:R,items:h}):at({allowCustomValue:t,setSelectedItem:Ie,filteredItems:[...z.values()]}),scrollIntoView:d=>{d&&d.scrollIntoView({block:"nearest"})}});l.useEffect(()=>{const d=ve(e),g=[...h.values()],b=[...d.values()];(g.length!==b.length||g.some((V,q)=>{const Qe=V.value!==b[q]?.value,Ye=V.text!==b[q]?.text;return Qe||Ye}))&&Ae(d)},[e]);const[Je,Xe]=ye?[M.Popover,{open:!0}]:[l.Fragment,{}];return i.jsx(Oe.Provider,{value:{itemsMap:h,filteredItemsMap:z,highlightedItem:rt(z,_.highlightedIndex),multiple:r,disabled:Ke,readOnly:$e,areSelectedItemsInTrigger:Ge,setAreSelectedItemsInTrigger:He,hasPopover:ye,setHasPopover:We,state:qe,lastInteractionType:_e,setLastInteractionType:Ue,wrap:c,innerInputRef:E,triggerAreaRef:R,..._,...ge,setInputValue:N,selectItem:Ie,setSelectedItems:H,isLoading:j,setOnInputValueChange:B,isTyping:k,setIsTyping:w},children:i.jsx(Je,{...Xe,children:e})})},v=()=>{const e=l.useContext(Oe);if(!e)throw Error("useComboboxContext must be used within a Combobox provider");return e},Re=({children:e,...o})=>i.jsx(ke,{...o,children:e});Re.displayName="Combobox";const X=({className:e,tabIndex:o=-1,onClick:t,ref:s,...a})=>{const r=v(),u=c=>{c.stopPropagation(),r.multiple?r.setSelectedItems([]):r.selectItem(null),r.setInputValue(""),r.innerInputRef.current&&r.innerInputRef.current.focus(),t&&t(c)};return i.jsx("button",{ref:s,className:x.cx(e,"h-sz-44 text-neutral hover:text-neutral-hovered"),tabIndex:o,onClick:u,type:"button",...a,children:i.jsx(A.Icon,{size:"sm",children:i.jsx(Pe.DeleteOutline,{})})})};X.displayName="Combobox.ClearButton";const Q=({className:e,closedLabel:o,openedLabel:t,intent:s="neutral",design:a="ghost",size:r="sm",ref:u,...c})=>{const n=v(),{ref:p,...m}=n.getToggleButtonProps({disabled:n.disabled||n.readOnly,onClick:C=>{C.stopPropagation()}}),f=m["aria-expanded"],T=L.useMergeRefs(u,p);return i.jsx(et.IconButton,{ref:T,className:x.cx(e,"ml-sm mt-[calc((44px-32px)/2)]"),intent:s,design:a,size:r,...m,...c,"aria-label":f?t:o,disabled:n.disabled,children:i.jsx(A.Icon,{className:x.cx("shrink-0","rotate-0 transition duration-100 ease-in",{"rotate-180":f}),size:"sm",children:i.jsx(Ze.ArrowHorizontalDown,{})})})};Q.displayName="Combobox.Disclosure";const Y=({className:e,children:o,ref:t})=>v().filteredItemsMap.size===0?i.jsx("div",{ref:t,className:x.cx("px-lg py-md text-body-1 text-on-surface/dim-1",e),children:o}):null;Y.displayName="Combobox.Empty";const Ve=l.createContext(null),it=({children:e})=>{const o=`${K}-group-label-${l.useId()}`;return i.jsx(Ve.Provider,{value:{groupLabelId:o},children:e})},De=()=>{const e=l.useContext(Ve);if(!e)throw Error("useComboboxGroupContext must be used within a ComboboxGroup provider");return e},Z=({children:e,ref:o,...t})=>i.jsx(it,{children:i.jsx(ct,{ref:o,...t,children:e})}),ct=({children:e,className:o,ref:t})=>{const s=v(),a=De();return l.Children.toArray(e).some(u=>l.isValidElement(u)&&s.filteredItemsMap.get(u.props.value))?i.jsx("div",{ref:t,role:"group","aria-labelledby":a.groupLabelId,className:x.cx(o),children:e}):null};Z.displayName="Combobox.Group";const ee=({"aria-label":e,className:o,placeholder:t,value:s,defaultValue:a,onValueChange:r,ref:u,...c})=>{const n=v(),p=J.useFormFieldControl(),[m]=we.useCombinedState(s,a),{isInvalid:f,description:T}=p;l.useEffect(()=>{m!=null&&n.setInputValue(m)},[m]),l.useEffect(()=>{r&&n.setOnInputValueChange(()=>r),!n.multiple&&n.selectedItem&&n.setInputValue(n.selectedItem.text)},[]);const C=n.hasPopover?M.Popover.Trigger:l.Fragment,j=n.hasPopover?{asChild:!0,type:void 0}:{},y=n.getDropdownProps(),P=L.useMergeRefs(u,n.innerInputRef,y.ref),N=n.getInputProps({disabled:n.disabled||n.readOnly,...y,onKeyDown:E=>{y.onKeyDown?.(E),n.setLastInteractionType("keyboard"),n.setIsTyping(!0)},onChange:E=>{n.setInputValue(E.target.value)},ref:P}),k=n.multiple?!n.areSelectedItemsInTrigger||n.selectedItems.length===0:n.selectedItem===null;function w(E,W){return B=>{E?.(B),W?.(B)}}const R={onBlur:w(c.onBlur,N.onBlur),onChange:w(c.onChange,N.onChange),onClick:w(c.onClick,N.onClick),onKeyDown:w(c.onKeyDown,N.onKeyDown)};return i.jsxs(i.Fragment,{children:[e&&i.jsx(tt.VisuallyHidden,{children:i.jsx("label",{...n.getLabelProps(),children:e})}),i.jsx(C,{...j,children:i.jsx("input",{"data-spark-component":"combobox-input",type:"text",...k&&{placeholder:t},className:x.cx("max-w-full shrink-0 grow basis-[80px]","h-sz-28 bg-surface px-sm text-body-1 text-ellipsis outline-hidden","disabled:text-on-surface/dim-3 disabled:cursor-not-allowed disabled:bg-transparent","read-only:text-on-surface read-only:cursor-default read-only:bg-transparent",o),...c,...N,...R,value:n.inputValue,"aria-label":e,disabled:n.disabled,readOnly:n.readOnly,"aria-invalid":f,"aria-describedby":T})})]})};ee.displayName="Combobox.Input";const Fe=l.createContext(null),ut=({value:e,disabled:o=!1,children:t})=>{const s=v(),[a,r]=l.useState(void 0),u=Ne(s.filteredItemsMap,e),c={disabled:o,value:e,text:je(t)},n=s.multiple?s.selectedItems.some(p=>p.value===e):s.selectedItem?.value===e;return i.jsx(Fe.Provider,{value:{textId:a,setTextId:r,isSelected:n,itemData:c,index:u,disabled:o},children:t})},te=()=>{const e=l.useContext(Fe);if(!e)throw Error("useComboboxItemContext must be used within a ComboboxItem provider");return e},oe=({children:e,ref:o,...t})=>{const{value:s,disabled:a}=t;return i.jsx(ut,{value:s,disabled:a,children:i.jsx(mt,{ref:o,...t,children:e})})},dt=x.cva("px-lg py-md text-body-1",{variants:{selected:{true:"font-bold"},disabled:{true:"opacity-dim-3 cursor-not-allowed",false:"cursor-pointer"},highlighted:{true:""},interactionType:{mouse:"",keyboard:""}},compoundVariants:[{highlighted:!0,interactionType:"mouse",class:"bg-surface-hovered"},{highlighted:!0,interactionType:"keyboard",class:"u-outline"}]}),mt=({className:e,disabled:o=!1,value:t,children:s,ref:a,...r})=>{const u=v(),c=te(),n=!!u.filteredItemsMap.get(t),{ref:p,...m}=u.getItemProps({item:c.itemData,index:c.index}),f=L.useMergeRefs(a,p);return n?i.jsx("li",{ref:f,className:x.cx(dt({selected:c.isSelected,disabled:o,highlighted:u.highlightedItem?.value===t,interactionType:u.lastInteractionType,className:e})),...m,...r,"aria-selected":c.isSelected,"aria-labelledby":c.textId,children:s},t):null};oe.displayName="Combobox.Item";const se=({className:e,children:o,label:t,ref:s})=>{const{disabled:a,isSelected:r}=te(),u=o||i.jsx(A.Icon,{size:"sm",children:i.jsx(ot.Check,{"aria-label":t})});return i.jsx("span",{ref:s,className:x.cx("min-h-sz-16 min-w-sz-16 flex",a&&"opacity-dim-3",e),children:r&&u})};se.displayName="Combobox.ItemIndicator";const ne=({children:e,className:o,ref:t,...s})=>{const a=v(),{ref:r,...u}=a.getMenuProps({onMouseMove:()=>{a.setLastInteractionType("mouse")}}),c=l.useRef(null),n=L.useMergeRefs(t,r,c),p=a.hasPopover?a.isOpen:!0,m=a.hasPopover&&!p;return l.useLayoutEffect(()=>{c.current?.parentElement&&(c.current.parentElement.style.pointerEvents=m?"none":"",c.current.style.pointerEvents=m?"none":"")},[m]),i.jsx("ul",{ref:n,className:x.cx(o,"flex flex-col",p?"block":"pointer-events-none invisible opacity-0",a.hasPopover&&"p-lg",a.isLoading&&"items-center overflow-y-auto"),...s,...u,"aria-busy":a.isLoading,"data-spark-component":"combobox-items",children:a.isLoading?i.jsx(st.Spinner,{size:"sm"}):e})};ne.displayName="Combobox.Items";const re=({children:e,className:o,ref:t})=>{const s=`${K}-item-text-${l.useId()}`,{setTextId:a}=te();return l.useEffect(()=>(a(s),()=>a(void 0))),i.jsx("span",{id:s,className:x.cx("inline",o),ref:t,children:e})};re.displayName="Combobox.ItemText";const le=({children:e,className:o,ref:t})=>{const s=De();return i.jsx("div",{ref:t,id:s.groupLabelId,className:x.cx("px-md py-sm text-body-2 text-neutral italic",o),children:e})};le.displayName="Combobox.Label";const ae=({children:e})=>i.jsx(A.Icon,{size:"sm",className:"h-sz-44 shrink-0",children:e});ae.displayName="Combobox.LeadingIcon";const ie=({children:e,matchTriggerWidth:o=!0,sideOffset:t=4,className:s,ref:a,...r})=>{const u=v();return l.useEffect(()=>(u.setHasPopover(!0),()=>u.setHasPopover(!1)),[]),i.jsx(M.Popover.Content,{ref:a,inset:!0,asChild:!0,matchTriggerWidth:o,className:x.cx("z-dropdown! relative",s),sideOffset:t,onOpenAutoFocus:c=>{c.preventDefault()},...r,"data-spark-component":"combobox-popover",children:e})};ie.displayName="Combobox.Popover";const ce=({children:e,...o})=>i.jsx(M.Popover.Portal,{...o,children:e});ce.displayName="Combobox.Portal";const pt=({item:e,index:o})=>{const t=v(),s=!t.disabled&&!t.readOnly,a=n=>{const p=n.target;t.lastInteractionType==="keyboard"&&p.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})},{disabled:r,...u}=t.getSelectedItemProps({disabled:t.disabled||t.readOnly,selectedItem:e,index:o}),c=r?"button":"span";return i.jsxs(c,{role:"presentation","data-spark-component":"combobox-selected-item",className:x.cx("h-sz-28 bg-neutral-container flex items-center rounded-md align-middle","text-body-2 text-on-neutral-container","disabled:opacity-dim-3 disabled:cursor-not-allowed","focus-visible:u-outline-inset outline-hidden",{"px-md":!s,"pl-md":s}),...u,tabIndex:-1,...r&&{disabled:!0},onFocus:a,children:[i.jsx("span",{className:x.cx("line-clamp-1 overflow-x-hidden leading-normal break-all text-ellipsis",{"w-max":!t.wrap}),children:e.text}),t.disabled,s&&i.jsx("button",{type:"button",tabIndex:-1,"aria-hidden":!0,className:"px-md h-full cursor-pointer",onClick:n=>{n.stopPropagation();const p=t.selectedItems.filter(m=>m.value!==e.value);t.setSelectedItems(p),t.innerInputRef.current&&t.innerInputRef.current.focus({preventScroll:!0})},children:i.jsx(A.Icon,{size:"sm",children:i.jsx(Pe.DeleteOutline,{})})})]},`selected-item-${o}`)},ue=()=>{const e=v();return e.multiple&&e.selectedItems.length?i.jsx(i.Fragment,{children:e.selectedItems.map((o,t)=>i.jsx(pt,{item:o,index:t},o.value))}):null};ue.displayName="Combobox.SelectedItems";const bt=x.cva(["flex items-start gap-md min-h-sz-44 text-body-1","h-fit rounded-lg px-lg","ring-1 outline-hidden ring-inset focus-within:ring-2 focus-within:ring-focus"],{variants:{allowWrap:{true:"",false:"h-sz-44"},state:{undefined:"ring-outline",error:"ring-error",alert:"ring-alert",success:"ring-success"},disabled:{true:"cursor-not-allowed border-outline bg-on-surface/dim-5 text-on-surface/dim-3"},readOnly:{true:"cursor-default bg-on-surface/dim-5 text-on-surface"}},compoundVariants:[{disabled:!1,state:void 0,class:"default:hover:ring-outline-high"},{disabled:!1,readOnly:!1,class:"bg-surface text-on-surface cursor-text"}],defaultVariants:{state:void 0,disabled:!1,readOnly:!1}}),xt=(e,o)=>{const t=l.useRef(null);l.useEffect(()=>{const s=()=>{const r=e.current?.scrollWidth||null;t.current&&r&&r>t.current&&o(),t.current=r,requestAnimationFrame(s)},a=requestAnimationFrame(s);return()=>cancelAnimationFrame(a)},[e])},de=({className:e,children:o,ref:t})=>{const s=v(),a=J.useFormFieldControl(),r=F(o,"Combobox.LeadingIcon"),u=F(o,"Combobox.SelectedItems"),c=F(o,"Combobox.Input"),n=F(o,"Combobox.ClearButton"),p=F(o,"Combobox.Disclosure"),[m,f]=s.hasPopover?[M.Popover.Anchor,{asChild:!0,type:void 0}]:[l.Fragment,{}],T=L.useMergeRefs(t,s.triggerAreaRef),C=l.useRef(null),j=a.disabled||s.disabled,y=a.readOnly||s.readOnly,P=!!n&&!j&&!y,N=()=>{if(C.current&&!s.wrap){const{scrollWidth:w,clientWidth:R}=C.current;C.current.scrollLeft=w-R}};xt(C,N);const k=!!u;return l.useEffect(()=>{s.setAreSelectedItemsInTrigger(k)},[k]),l.useEffect(()=>{const w=new ResizeObserver(N);return C.current&&w.observe(C.current),()=>{w.disconnect()}},[]),i.jsx(i.Fragment,{children:i.jsx(m,{...f,children:i.jsxs("div",{ref:T,className:bt({className:e,state:s.state,disabled:j,readOnly:y,allowWrap:s.wrap}),onClick:()=>{!s.isOpen&&!j&&!y&&(s.openMenu(),s.innerInputRef.current&&s.innerInputRef.current.focus())},children:[r,i.jsxs("div",{ref:C,className:x.cx("min-w-none gap-sm py-md inline-flex grow items-start",s.wrap?"flex-wrap":"u-no-scrollbar overflow-x-auto p-[2px]"),children:[u,c]}),P&&n,p]})})})};de.displayName="Combobox.Trigger";const Me=Object.assign(Re,{Group:Z,Item:oe,Items:ne,ItemText:re,ItemIndicator:se,Label:le,Popover:ie,Trigger:de,LeadingIcon:ae,Empty:Y,Input:ee,Disclosure:Q,SelectedItems:ue,ClearButton:X,Portal:ce});Me.displayName="Combobox";Z.displayName="Combobox.Group";ne.displayName="Combobox.Items";oe.displayName="Combobox.Item";re.displayName="Combobox.ItemText";se.displayName="Combobox.ItemIndicator";le.displayName="Combobox.Label";ie.displayName="Combobox.Popover";de.displayName="Combobox.Trigger";ae.displayName="Combobox.LeadingIcon";Y.displayName="Combobox.Empty";ee.displayName="Combobox.Input";Q.displayName="Combobox.Disclosure";ue.displayName="Combobox.SelectedItems";X.displayName="Combobox.ClearButton";ce.displayName="Combobox.Portal";exports.Combobox=Me;exports.ComboboxProvider=ke;exports.useComboboxContext=v;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/combobox/index.mjs
CHANGED
|
@@ -6,13 +6,13 @@ import { Children as B, isValidElement as z, createContext as ne, useRef as A, u
|
|
|
6
6
|
import { Popover as K } from "../popover/index.mjs";
|
|
7
7
|
import { DeleteOutline as Ae } from "@spark-ui/icons/DeleteOutline";
|
|
8
8
|
import { cx as f, cva as Me } from "class-variance-authority";
|
|
9
|
-
import { I as $ } from "../Icon-
|
|
9
|
+
import { I as $ } from "../Icon-BO327oHU.mjs";
|
|
10
10
|
import { useMergeRefs as W } from "@spark-ui/hooks/use-merge-refs";
|
|
11
11
|
import { ArrowHorizontalDown as dt } from "@spark-ui/icons/ArrowHorizontalDown";
|
|
12
|
-
import { I as ut } from "../IconButton-
|
|
12
|
+
import { I as ut } from "../IconButton-DdB3Pq13.mjs";
|
|
13
13
|
import { V as mt } from "../VisuallyHidden-DjlV0-CW.mjs";
|
|
14
14
|
import { Check as pt } from "@spark-ui/icons/Check";
|
|
15
|
-
import { S as bt } from "../Spinner-
|
|
15
|
+
import { S as bt } from "../Spinner-Co3AjkQV.mjs";
|
|
16
16
|
function Fe(e, o) {
|
|
17
17
|
let t = 0;
|
|
18
18
|
for (const [n] of e.entries()) {
|