@linyao.tw/ui 1.0.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -1
- package/dist/components/date-time/calendar.js +8 -6
- package/dist/components/date-time/calendar.js.map +1 -1
- package/dist/components/date-time/date-field.js +10 -8
- package/dist/components/date-time/date-field.js.map +1 -1
- package/dist/components/date-time/date-picker.js +8 -6
- package/dist/components/date-time/date-picker.js.map +1 -1
- package/dist/components/date-time/date-range-picker.js +8 -6
- package/dist/components/date-time/date-range-picker.js.map +1 -1
- package/dist/components/date-time/index.js +1 -1
- package/dist/components/date-time/shared.d.ts +0 -1
- package/dist/components/date-time/shared.js +7 -9
- package/dist/components/date-time/shared.js.map +1 -1
- package/dist/components/date-time/time-field.js +8 -6
- package/dist/components/date-time/time-field.js.map +1 -1
- package/dist/components/feedback/alert.js +35 -34
- package/dist/components/feedback/alert.js.map +1 -1
- package/dist/components/feedback/banner.js +15 -14
- package/dist/components/feedback/banner.js.map +1 -1
- package/dist/components/feedback/empty-state.d.ts +2 -1
- package/dist/components/feedback/empty-state.js +31 -31
- package/dist/components/feedback/empty-state.js.map +1 -1
- package/dist/components/feedback/feedback.types.d.ts +0 -1
- package/dist/components/feedback/feedback.types.js +3 -5
- package/dist/components/feedback/feedback.types.js.map +1 -1
- package/dist/components/feedback/index.d.ts +8 -8
- package/dist/components/feedback/meter.js +21 -21
- package/dist/components/feedback/meter.js.map +1 -1
- package/dist/components/feedback/progress.js +21 -21
- package/dist/components/feedback/progress.js.map +1 -1
- package/dist/components/feedback/skeleton.js +11 -11
- package/dist/components/feedback/skeleton.js.map +1 -1
- package/dist/components/feedback/spinner.js +25 -25
- package/dist/components/feedback/spinner.js.map +1 -1
- package/dist/components/feedback/toast.js +23 -21
- package/dist/components/feedback/toast.js.map +1 -1
- package/dist/components/forms/{CodeField.d.ts → code-field.d.ts} +1 -1
- package/dist/components/forms/code-field.js +66 -0
- package/dist/components/forms/code-field.js.map +1 -0
- package/dist/components/forms/{FileUpload.d.ts → file-upload.d.ts} +1 -1
- package/dist/components/forms/{FileUpload.js → file-upload.js} +128 -111
- package/dist/components/forms/file-upload.js.map +1 -0
- package/dist/components/forms/index.d.ts +6 -6
- package/dist/components/forms/{Input.js → input.js} +4 -3
- package/dist/components/forms/input.js.map +1 -0
- package/dist/components/forms/internal.d.ts +0 -2
- package/dist/components/forms/internal.js +22 -25
- package/dist/components/forms/internal.js.map +1 -1
- package/dist/components/forms/number-field.js +74 -0
- package/dist/components/forms/number-field.js.map +1 -0
- package/dist/components/forms/otp-field.js +58 -0
- package/dist/components/forms/otp-field.js.map +1 -0
- package/dist/components/forms/{TextField.d.ts → text-field.d.ts} +5 -0
- package/dist/components/forms/text-field.js +201 -0
- package/dist/components/forms/text-field.js.map +1 -0
- package/dist/components/foundations/{Avatar.js → avatar.js} +13 -10
- package/dist/components/foundations/avatar.js.map +1 -0
- package/dist/components/foundations/{Badge.d.ts → badge.d.ts} +1 -1
- package/dist/components/foundations/{Badge.js → badge.js} +4 -3
- package/dist/components/foundations/badge.js.map +1 -0
- package/dist/components/foundations/{Button.js → button.js} +4 -3
- package/dist/components/foundations/button.js.map +1 -0
- package/dist/components/foundations/{Card.d.ts → card.d.ts} +9 -2
- package/dist/components/foundations/{Card.js → card.js} +6 -5
- package/dist/components/foundations/card.js.map +1 -0
- package/dist/components/foundations/{IconButton.d.ts → icon-button.d.ts} +2 -8
- package/dist/components/foundations/{IconButton.js → icon-button.js} +5 -4
- package/dist/components/foundations/icon-button.js.map +1 -0
- package/dist/components/foundations/index.d.ts +9 -9
- package/dist/components/foundations/{Link.d.ts → link.d.ts} +1 -1
- package/dist/components/foundations/link.js +47 -0
- package/dist/components/foundations/link.js.map +1 -0
- package/dist/components/foundations/{ListCell.d.ts → list-cell.d.ts} +1 -8
- package/dist/components/foundations/{ListCell.js → list-cell.js} +4 -3
- package/dist/components/foundations/list-cell.js.map +1 -0
- package/dist/components/foundations/{SectionHeading.d.ts → section-heading.d.ts} +5 -2
- package/dist/components/foundations/{SectionHeading.js → section-heading.js} +4 -3
- package/dist/components/foundations/section-heading.js.map +1 -0
- package/dist/components/foundations/{Separator.js → separator.js} +4 -3
- package/dist/components/foundations/separator.js.map +1 -0
- package/dist/components/navigation-data/breadcrumb-pagination.js +89 -81
- package/dist/components/navigation-data/breadcrumb-pagination.js.map +1 -1
- package/dist/components/navigation-data/command-palette.d.ts +26 -0
- package/dist/components/navigation-data/command-palette.js +101 -72
- package/dist/components/navigation-data/command-palette.js.map +1 -1
- package/dist/components/navigation-data/header-tab-bar.js +50 -46
- package/dist/components/navigation-data/header-tab-bar.js.map +1 -1
- package/dist/components/navigation-data/index.d.ts +7 -7
- package/dist/components/navigation-data/menubar-toolbar.js +2 -1
- package/dist/components/navigation-data/menubar-toolbar.js.map +1 -1
- package/dist/components/navigation-data/navigation-menu.js +2 -1
- package/dist/components/navigation-data/navigation-menu.js.map +1 -1
- package/dist/components/navigation-data/scroll-area.js +2 -1
- package/dist/components/navigation-data/scroll-area.js.map +1 -1
- package/dist/components/navigation-data/table-collection.d.ts +12 -3
- package/dist/components/navigation-data/table-collection.js +12 -9
- package/dist/components/navigation-data/table-collection.js.map +1 -1
- package/dist/components/overlays/dialog.d.ts +23 -3
- package/dist/components/overlays/dialog.js +138 -130
- package/dist/components/overlays/dialog.js.map +1 -1
- package/dist/components/overlays/disclosure.js +2 -1
- package/dist/components/overlays/disclosure.js.map +1 -1
- package/dist/components/overlays/drawer.d.ts +9 -2
- package/dist/components/overlays/drawer.js +158 -151
- package/dist/components/overlays/drawer.js.map +1 -1
- package/dist/components/overlays/floating.js +116 -113
- package/dist/components/overlays/floating.js.map +1 -1
- package/dist/components/overlays/index.d.ts +4 -4
- package/dist/components/selection/combobox.js +94 -93
- package/dist/components/selection/combobox.js.map +1 -1
- package/dist/components/selection/controls.d.ts +4 -1
- package/dist/components/selection/controls.js +141 -118
- package/dist/components/selection/controls.js.map +1 -1
- package/dist/components/selection/menu.js +121 -121
- package/dist/components/selection/menu.js.map +1 -1
- package/dist/components/selection/select.js +108 -107
- package/dist/components/selection/select.js.map +1 -1
- package/dist/fonts.css +13 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +39 -33
- package/dist/internal/accessible-name.d.ts +12 -0
- package/dist/internal/class-names.d.ts +12 -0
- package/dist/{components/selection/classnames.js → internal/class-names.js} +4 -3
- package/dist/internal/class-names.js.map +1 -0
- package/dist/internal/index.d.ts +3 -0
- package/dist/{components/foundations/shared.d.ts → internal/render.d.ts} +2 -1
- package/dist/intl/index.d.ts +3 -0
- package/dist/intl/linyao-provider.d.ts +38 -0
- package/dist/intl/linyao-provider.js +27 -0
- package/dist/intl/linyao-provider.js.map +1 -0
- package/dist/intl/messages.d.ts +48 -0
- package/dist/intl/messages.js +81 -0
- package/dist/intl/messages.js.map +1 -0
- package/dist/intl/provider.d.ts +18 -0
- package/dist/intl/provider.js +31 -0
- package/dist/intl/provider.js.map +1 -0
- package/dist/styles.css +1 -1
- package/package.json +6 -4
- package/dist/components/feedback/feedback.module.js +0 -42
- package/dist/components/feedback/feedback.module.js.map +0 -1
- package/dist/components/forms/CodeField.js +0 -63
- package/dist/components/forms/CodeField.js.map +0 -1
- package/dist/components/forms/FileUpload.js.map +0 -1
- package/dist/components/forms/Input.js.map +0 -1
- package/dist/components/forms/NumberField.js +0 -71
- package/dist/components/forms/NumberField.js.map +0 -1
- package/dist/components/forms/OTPField.js +0 -54
- package/dist/components/forms/OTPField.js.map +0 -1
- package/dist/components/forms/TextField.js +0 -199
- package/dist/components/forms/TextField.js.map +0 -1
- package/dist/components/foundations/Avatar.js.map +0 -1
- package/dist/components/foundations/Badge.js.map +0 -1
- package/dist/components/foundations/Button.js.map +0 -1
- package/dist/components/foundations/Card.js.map +0 -1
- package/dist/components/foundations/IconButton.js.map +0 -1
- package/dist/components/foundations/Link.js +0 -40
- package/dist/components/foundations/Link.js.map +0 -1
- package/dist/components/foundations/ListCell.js.map +0 -1
- package/dist/components/foundations/SectionHeading.js.map +0 -1
- package/dist/components/foundations/Separator.js.map +0 -1
- package/dist/components/foundations/shared.js +0 -8
- package/dist/components/foundations/shared.js.map +0 -1
- package/dist/components/navigation-data/utils.d.ts +0 -2
- package/dist/components/navigation-data/utils.js +0 -11
- package/dist/components/navigation-data/utils.js.map +0 -1
- package/dist/components/overlays/class-names.d.ts +0 -6
- package/dist/components/overlays/class-names.js +0 -11
- package/dist/components/overlays/class-names.js.map +0 -1
- package/dist/components/selection/classnames.d.ts +0 -4
- package/dist/components/selection/classnames.js.map +0 -1
- package/dist/components/selection/selection.module.js +0 -51
- package/dist/components/selection/selection.module.js.map +0 -1
- /package/dist/components/forms/{Input.d.ts → input.d.ts} +0 -0
- /package/dist/components/forms/{NumberField.d.ts → number-field.d.ts} +0 -0
- /package/dist/components/forms/{OTPField.d.ts → otp-field.d.ts} +0 -0
- /package/dist/components/foundations/{Avatar.d.ts → avatar.d.ts} +0 -0
- /package/dist/components/foundations/{Button.d.ts → button.d.ts} +0 -0
- /package/dist/components/foundations/{Separator.d.ts → separator.d.ts} +0 -0
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
1
|
+
"use client";
|
|
2
|
+
import { withStateClassName as e } from "../../internal/class-names.js";
|
|
3
|
+
import { useMessages as t } from "../../intl/provider.js";
|
|
3
4
|
import { forwardRef as n, useMemo as r } from "react";
|
|
4
5
|
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
5
6
|
import { XIcon as o } from "@phosphor-icons/react/dist/csr/X";
|
|
@@ -8,65 +9,65 @@ import { CheckIcon as c } from "@phosphor-icons/react/dist/csr/Check";
|
|
|
8
9
|
import { CaretDownIcon as l } from "@phosphor-icons/react/dist/csr/CaretDown";
|
|
9
10
|
import { Autocomplete as u } from "@base-ui/react/autocomplete";
|
|
10
11
|
//#region src/components/selection/combobox.tsx
|
|
11
|
-
var d = n(function({ className:
|
|
12
|
+
var d = n(function({ className: t, ...n }, r) {
|
|
12
13
|
return /* @__PURE__ */ i(s.InputGroup, {
|
|
13
|
-
...
|
|
14
|
-
className:
|
|
15
|
-
ref:
|
|
14
|
+
...n,
|
|
15
|
+
className: e("lyds-combobox__input-group", t),
|
|
16
|
+
ref: r
|
|
16
17
|
});
|
|
17
|
-
}), f = n(function({ className:
|
|
18
|
+
}), f = n(function({ className: t, ...n }, r) {
|
|
18
19
|
return /* @__PURE__ */ i(s.Input, {
|
|
19
|
-
...
|
|
20
|
-
className:
|
|
21
|
-
ref:
|
|
20
|
+
...n,
|
|
21
|
+
className: e("lyds-combobox__input", t),
|
|
22
|
+
ref: r
|
|
22
23
|
});
|
|
23
|
-
}), p = n(function({ className:
|
|
24
|
+
}), p = n(function({ className: t, ...n }, r) {
|
|
24
25
|
return /* @__PURE__ */ i(s.Trigger, {
|
|
25
|
-
...
|
|
26
|
-
className:
|
|
27
|
-
ref:
|
|
26
|
+
...n,
|
|
27
|
+
className: e("lyds-combobox__trigger", t),
|
|
28
|
+
ref: r
|
|
28
29
|
});
|
|
29
|
-
}), m = n(function({ className:
|
|
30
|
+
}), m = n(function({ className: t, ...n }, r) {
|
|
30
31
|
return /* @__PURE__ */ i(s.Clear, {
|
|
31
|
-
...
|
|
32
|
-
className:
|
|
33
|
-
ref:
|
|
32
|
+
...n,
|
|
33
|
+
className: e("lyds-combobox__clear", t),
|
|
34
|
+
ref: r
|
|
34
35
|
});
|
|
35
|
-
}), h = n(function({ className:
|
|
36
|
+
}), h = n(function({ className: t, ...n }, r) {
|
|
36
37
|
return /* @__PURE__ */ i(s.Positioner, {
|
|
37
|
-
...
|
|
38
|
-
className:
|
|
39
|
-
ref:
|
|
38
|
+
...n,
|
|
39
|
+
className: e("lyds-listbox__positioner", t),
|
|
40
|
+
ref: r
|
|
40
41
|
});
|
|
41
|
-
}), g = n(function({ className:
|
|
42
|
+
}), g = n(function({ className: t, ...n }, r) {
|
|
42
43
|
return /* @__PURE__ */ i(s.Popup, {
|
|
43
|
-
...
|
|
44
|
-
className:
|
|
45
|
-
ref:
|
|
44
|
+
...n,
|
|
45
|
+
className: e("lyds-listbox__popup", t),
|
|
46
|
+
ref: r
|
|
46
47
|
});
|
|
47
|
-
}), _ = n(function({ className:
|
|
48
|
+
}), _ = n(function({ className: t, ...n }, r) {
|
|
48
49
|
return /* @__PURE__ */ i(s.List, {
|
|
49
|
-
...
|
|
50
|
-
className:
|
|
51
|
-
ref:
|
|
50
|
+
...n,
|
|
51
|
+
className: e("lyds-listbox__list", t),
|
|
52
|
+
ref: r
|
|
52
53
|
});
|
|
53
|
-
}), v = n(function({ className:
|
|
54
|
+
}), v = n(function({ className: t, ...n }, r) {
|
|
54
55
|
return /* @__PURE__ */ i(s.Item, {
|
|
55
|
-
...
|
|
56
|
-
className:
|
|
57
|
-
ref:
|
|
56
|
+
...n,
|
|
57
|
+
className: e("lyds-listbox__option", t),
|
|
58
|
+
ref: r
|
|
58
59
|
});
|
|
59
|
-
}), y = n(function({ className:
|
|
60
|
+
}), y = n(function({ className: t, ...n }, r) {
|
|
60
61
|
return /* @__PURE__ */ i(s.ItemIndicator, {
|
|
61
|
-
...
|
|
62
|
-
className:
|
|
63
|
-
ref:
|
|
62
|
+
...n,
|
|
63
|
+
className: e("lyds-listbox__option-indicator", t),
|
|
64
|
+
ref: r
|
|
64
65
|
});
|
|
65
|
-
}), b = n(function({ className:
|
|
66
|
+
}), b = n(function({ className: t, ...n }, r) {
|
|
66
67
|
return /* @__PURE__ */ i(s.Empty, {
|
|
67
|
-
...
|
|
68
|
-
className:
|
|
69
|
-
ref:
|
|
68
|
+
...n,
|
|
69
|
+
className: e("lyds-listbox__empty", t),
|
|
70
|
+
ref: r
|
|
70
71
|
});
|
|
71
72
|
});
|
|
72
73
|
function x(e) {
|
|
@@ -88,21 +89,21 @@ function x(e) {
|
|
|
88
89
|
}
|
|
89
90
|
};
|
|
90
91
|
}
|
|
91
|
-
function S({ "aria-describedby":
|
|
92
|
-
let P = r(() => x(O), [O]),
|
|
93
|
-
let t =
|
|
92
|
+
function S({ "aria-describedby": e, "aria-label": n, "aria-labelledby": u, className: S, clearLabel: C, emptyMessage: w, inputProps: T, invalid: E = !1, itemToStringLabel: D, options: O, placeholder: k, popupProps: A, positionerProps: j, triggerLabel: M, ...N }) {
|
|
93
|
+
let P = t(), F = r(() => x(O), [O]), I = r(() => D ?? ((e) => {
|
|
94
|
+
let t = F.get(e)?.option;
|
|
94
95
|
return t?.textValue ?? (typeof t?.label == "string" ? t.label : String(e));
|
|
95
|
-
}), [D,
|
|
96
|
+
}), [D, F]);
|
|
96
97
|
return /* @__PURE__ */ a(s.Root, {
|
|
97
98
|
...N,
|
|
98
|
-
itemToStringLabel:
|
|
99
|
-
items:
|
|
99
|
+
itemToStringLabel: I,
|
|
100
|
+
items: F.values,
|
|
100
101
|
children: [/* @__PURE__ */ a(d, {
|
|
101
102
|
className: S,
|
|
102
103
|
children: [
|
|
103
104
|
/* @__PURE__ */ i(f, {
|
|
104
105
|
...T,
|
|
105
|
-
"aria-describedby":
|
|
106
|
+
"aria-describedby": e ?? T?.["aria-describedby"],
|
|
106
107
|
"aria-invalid": E || T?.["aria-invalid"] || void 0,
|
|
107
108
|
"aria-label": n ?? T?.["aria-label"],
|
|
108
109
|
"aria-labelledby": u ?? T?.["aria-labelledby"],
|
|
@@ -110,14 +111,14 @@ function S({ "aria-describedby": t, "aria-label": n, "aria-labelledby": u, class
|
|
|
110
111
|
placeholder: k
|
|
111
112
|
}),
|
|
112
113
|
/* @__PURE__ */ i(m, {
|
|
113
|
-
"aria-label": C,
|
|
114
|
+
"aria-label": C ?? P.comboboxClear,
|
|
114
115
|
children: /* @__PURE__ */ i(o, {
|
|
115
116
|
"aria-hidden": "true",
|
|
116
117
|
weight: "bold"
|
|
117
118
|
})
|
|
118
119
|
}),
|
|
119
120
|
/* @__PURE__ */ i(p, {
|
|
120
|
-
"aria-label": M,
|
|
121
|
+
"aria-label": M ?? P.comboboxTrigger,
|
|
121
122
|
children: /* @__PURE__ */ i(l, {
|
|
122
123
|
"aria-hidden": "true",
|
|
123
124
|
weight: "bold"
|
|
@@ -128,26 +129,26 @@ function S({ "aria-describedby": t, "aria-label": n, "aria-labelledby": u, class
|
|
|
128
129
|
...j,
|
|
129
130
|
children: /* @__PURE__ */ a(g, {
|
|
130
131
|
...A,
|
|
131
|
-
children: [/* @__PURE__ */ i(_, { children: (
|
|
132
|
-
let
|
|
133
|
-
if (!
|
|
134
|
-
let { option:
|
|
132
|
+
children: [/* @__PURE__ */ i(_, { children: (e, t) => {
|
|
133
|
+
let n = F.get(e);
|
|
134
|
+
if (!n) return null;
|
|
135
|
+
let { option: r, sourceIndex: o } = n;
|
|
135
136
|
return /* @__PURE__ */ a(v, {
|
|
136
|
-
disabled:
|
|
137
|
-
index:
|
|
138
|
-
value:
|
|
137
|
+
disabled: r.disabled,
|
|
138
|
+
index: t,
|
|
139
|
+
value: e,
|
|
139
140
|
children: [/* @__PURE__ */ i(y, { children: /* @__PURE__ */ i(c, {
|
|
140
141
|
"aria-hidden": "true",
|
|
141
142
|
weight: "bold"
|
|
142
143
|
}) }), /* @__PURE__ */ a("span", {
|
|
143
|
-
className:
|
|
144
|
-
children: [/* @__PURE__ */ i("span", { children:
|
|
145
|
-
className:
|
|
146
|
-
children:
|
|
144
|
+
className: "lyds-listbox__option-text",
|
|
145
|
+
children: [/* @__PURE__ */ i("span", { children: r.label }), r.description ? /* @__PURE__ */ i("span", {
|
|
146
|
+
className: "lyds-listbox__option-description",
|
|
147
|
+
children: r.description
|
|
147
148
|
}) : null]
|
|
148
149
|
})]
|
|
149
|
-
},
|
|
150
|
-
} }), /* @__PURE__ */ i(b, { children: w })]
|
|
150
|
+
}, r.key ?? r.textValue ?? o);
|
|
151
|
+
} }), /* @__PURE__ */ i(b, { children: w ?? P.comboboxEmpty })]
|
|
151
152
|
})
|
|
152
153
|
}) })]
|
|
153
154
|
});
|
|
@@ -181,34 +182,34 @@ var C = Object.assign(S, {
|
|
|
181
182
|
Value: s.Value,
|
|
182
183
|
useFilter: s.useFilter,
|
|
183
184
|
useFilteredItems: s.useFilteredItems
|
|
184
|
-
}), w = n(function({ className:
|
|
185
|
+
}), w = n(function({ className: t, ...n }, r) {
|
|
185
186
|
return /* @__PURE__ */ i(u.InputGroup, {
|
|
186
|
-
...
|
|
187
|
-
className:
|
|
188
|
-
ref:
|
|
187
|
+
...n,
|
|
188
|
+
className: e("lyds-combobox__input-group", t),
|
|
189
|
+
ref: r
|
|
189
190
|
});
|
|
190
|
-
}), T = n(function({ className:
|
|
191
|
+
}), T = n(function({ className: t, ...n }, r) {
|
|
191
192
|
return /* @__PURE__ */ i(u.Item, {
|
|
192
|
-
...
|
|
193
|
-
className:
|
|
194
|
-
ref:
|
|
193
|
+
...n,
|
|
194
|
+
className: e("lyds-listbox__option", t),
|
|
195
|
+
ref: r
|
|
195
196
|
});
|
|
196
197
|
});
|
|
197
|
-
function E({ "aria-describedby":
|
|
198
|
-
let j = r(() => x(C), [C]),
|
|
199
|
-
let t =
|
|
198
|
+
function E({ "aria-describedby": e, "aria-label": n, "aria-labelledby": s, className: c, clearLabel: d, emptyMessage: p, inputProps: v, invalid: y = !1, itemToStringValue: S, options: C, placeholder: E, popupProps: D, positionerProps: O, triggerLabel: k, ...A }) {
|
|
199
|
+
let j = t(), M = r(() => x(C), [C]), N = r(() => S ?? ((e) => {
|
|
200
|
+
let t = M.get(e)?.option;
|
|
200
201
|
return t?.textValue ?? (typeof t?.label == "string" ? t.label : String(e));
|
|
201
|
-
}), [S,
|
|
202
|
+
}), [S, M]);
|
|
202
203
|
return /* @__PURE__ */ a(u.Root, {
|
|
203
204
|
...A,
|
|
204
|
-
itemToStringValue:
|
|
205
|
-
items:
|
|
205
|
+
itemToStringValue: N,
|
|
206
|
+
items: M.values,
|
|
206
207
|
children: [/* @__PURE__ */ a(w, {
|
|
207
208
|
className: c,
|
|
208
209
|
children: [
|
|
209
210
|
/* @__PURE__ */ i(f, {
|
|
210
211
|
...v,
|
|
211
|
-
"aria-describedby":
|
|
212
|
+
"aria-describedby": e ?? v?.["aria-describedby"],
|
|
212
213
|
"aria-invalid": y || v?.["aria-invalid"] || void 0,
|
|
213
214
|
"aria-label": n ?? v?.["aria-label"],
|
|
214
215
|
"aria-labelledby": s ?? v?.["aria-labelledby"],
|
|
@@ -216,15 +217,15 @@ function E({ "aria-describedby": t, "aria-label": n, "aria-labelledby": s, class
|
|
|
216
217
|
placeholder: E
|
|
217
218
|
}),
|
|
218
219
|
/* @__PURE__ */ i(m, {
|
|
219
|
-
"aria-label": d,
|
|
220
|
+
"aria-label": d ?? j.autocompleteClear,
|
|
220
221
|
children: /* @__PURE__ */ i(o, {
|
|
221
222
|
"aria-hidden": "true",
|
|
222
223
|
weight: "bold"
|
|
223
224
|
})
|
|
224
225
|
}),
|
|
225
226
|
/* @__PURE__ */ i(u.Trigger, {
|
|
226
|
-
"aria-label": k,
|
|
227
|
-
className:
|
|
227
|
+
"aria-label": k ?? j.autocompleteTrigger,
|
|
228
|
+
className: "lyds-combobox__trigger",
|
|
228
229
|
children: /* @__PURE__ */ i(l, {
|
|
229
230
|
"aria-hidden": "true",
|
|
230
231
|
weight: "bold"
|
|
@@ -235,20 +236,20 @@ function E({ "aria-describedby": t, "aria-label": n, "aria-labelledby": s, class
|
|
|
235
236
|
...O,
|
|
236
237
|
children: /* @__PURE__ */ a(g, {
|
|
237
238
|
...D,
|
|
238
|
-
children: [/* @__PURE__ */ i(_, { children: (
|
|
239
|
-
let
|
|
240
|
-
if (!
|
|
241
|
-
let { option:
|
|
239
|
+
children: [/* @__PURE__ */ i(_, { children: (e, t) => {
|
|
240
|
+
let n = M.get(e);
|
|
241
|
+
if (!n) return null;
|
|
242
|
+
let { option: r, sourceIndex: a } = n;
|
|
242
243
|
return /* @__PURE__ */ i(T, {
|
|
243
|
-
disabled:
|
|
244
|
-
index:
|
|
245
|
-
value:
|
|
244
|
+
disabled: r.disabled,
|
|
245
|
+
index: t,
|
|
246
|
+
value: e,
|
|
246
247
|
children: /* @__PURE__ */ i("span", {
|
|
247
|
-
className:
|
|
248
|
-
children:
|
|
248
|
+
className: "lyds-listbox__option-text",
|
|
249
|
+
children: r.label
|
|
249
250
|
})
|
|
250
|
-
},
|
|
251
|
-
} }), /* @__PURE__ */ i(b, { children: p })]
|
|
251
|
+
}, r.key ?? r.textValue ?? a);
|
|
252
|
+
} }), /* @__PURE__ */ i(b, { children: p ?? j.autocompleteEmpty })]
|
|
252
253
|
})
|
|
253
254
|
}) })]
|
|
254
255
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.js","names":[],"sources":["../../../src/components/selection/combobox.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete, type AutocompleteInputGroupProps, type AutocompleteItemProps, type AutocompleteRootProps } from \"@base-ui/react/autocomplete\";\nimport {\n\tCombobox as BaseCombobox,\n\ttype ComboboxClearProps,\n\ttype ComboboxEmptyProps,\n\ttype ComboboxInputGroupProps,\n\ttype ComboboxInputProps,\n\ttype ComboboxItemIndicatorProps,\n\ttype ComboboxItemProps,\n\ttype ComboboxListProps,\n\ttype ComboboxPopupProps,\n\ttype ComboboxPositionerProps,\n\ttype ComboboxRootProps,\n\ttype ComboboxTriggerProps\n} from \"@base-ui/react/combobox\";\nimport { CaretDownIcon } from \"@phosphor-icons/react/dist/csr/CaretDown\";\nimport { CheckIcon } from \"@phosphor-icons/react/dist/csr/Check\";\nimport { XIcon } from \"@phosphor-icons/react/dist/csr/X\";\nimport { forwardRef, useMemo, type Key, type ReactNode } from \"react\";\n\nimport { mergeStateClassName } from \"./classnames\";\nimport styles from \"./selection.module.css\";\n\nexport const ComboboxInputGroup = forwardRef<HTMLDivElement, ComboboxInputGroupProps>(function ComboboxInputGroup({ className, ...props }, ref) {\n\treturn <BaseCombobox.InputGroup {...props} className={mergeStateClassName(styles.comboboxInputGroup, className)} ref={ref} />;\n});\n\nexport const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(function ComboboxInput({ className, ...props }, ref) {\n\treturn <BaseCombobox.Input {...props} className={mergeStateClassName(styles.comboboxInput, className)} ref={ref} />;\n});\n\nexport const ComboboxTrigger = forwardRef<HTMLButtonElement, ComboboxTriggerProps>(function ComboboxTrigger({ className, ...props }, ref) {\n\treturn <BaseCombobox.Trigger {...props} className={mergeStateClassName(styles.comboboxTrigger, className)} ref={ref} />;\n});\n\nexport const ComboboxClear = forwardRef<HTMLButtonElement, ComboboxClearProps>(function ComboboxClear({ className, ...props }, ref) {\n\treturn <BaseCombobox.Clear {...props} className={mergeStateClassName(styles.comboboxClear, className)} ref={ref} />;\n});\n\nexport const ComboboxPositioner = forwardRef<HTMLDivElement, ComboboxPositionerProps>(function ComboboxPositioner({ className, ...props }, ref) {\n\treturn <BaseCombobox.Positioner {...props} className={mergeStateClassName(styles.positioner, className)} ref={ref} />;\n});\n\nexport const ComboboxPopup = forwardRef<HTMLDivElement, ComboboxPopupProps>(function ComboboxPopup({ className, ...props }, ref) {\n\treturn <BaseCombobox.Popup {...props} className={mergeStateClassName(styles.popup, className)} ref={ref} />;\n});\n\nexport const ComboboxList = forwardRef<HTMLDivElement, ComboboxListProps>(function ComboboxList({ className, ...props }, ref) {\n\treturn <BaseCombobox.List {...props} className={mergeStateClassName(styles.optionList, className)} ref={ref} />;\n});\n\nexport const ComboboxItem = forwardRef<HTMLDivElement, ComboboxItemProps>(function ComboboxItem({ className, ...props }, ref) {\n\treturn <BaseCombobox.Item {...props} className={mergeStateClassName(styles.option, className)} ref={ref} />;\n});\n\nexport const ComboboxItemIndicator = forwardRef<HTMLSpanElement, ComboboxItemIndicatorProps>(function ComboboxItemIndicator({ className, ...props }, ref) {\n\treturn <BaseCombobox.ItemIndicator {...props} className={mergeStateClassName(styles.optionIndicator, className)} ref={ref} />;\n});\n\nexport const ComboboxEmpty = forwardRef<HTMLDivElement, ComboboxEmptyProps>(function ComboboxEmpty({ className, ...props }, ref) {\n\treturn <BaseCombobox.Empty {...props} className={mergeStateClassName(styles.emptyOption, className)} ref={ref} />;\n});\n\nexport interface ComboboxOption<Value> {\n\tdescription?: ReactNode;\n\tdisabled?: boolean;\n\tkey?: Key;\n\tlabel: ReactNode;\n\ttextValue?: string;\n\tvalue: Value;\n}\n\ninterface IndexedOption<Option> {\n\toption: Option;\n\tsourceIndex: number;\n}\n\nfunction createOptionIndex<Value, Option extends { value: Value }>(options: readonly Option[]) {\n\tconst values: Value[] = [];\n\tconst lookup = new Map<Value, IndexedOption<Option>>();\n\tlet negativeZero: IndexedOption<Option> | undefined;\n\tlet positiveZero: IndexedOption<Option> | undefined;\n\n\toptions.forEach((option, sourceIndex) => {\n\t\tconst value = option.value;\n\t\tconst indexed = { option, sourceIndex };\n\t\tvalues.push(value);\n\n\t\tif (typeof value === \"number\" && value === 0) {\n\t\t\tif (Object.is(value, -0)) negativeZero ??= indexed;\n\t\t\telse positiveZero ??= indexed;\n\t\t\treturn;\n\t\t}\n\n\t\tif (!lookup.has(value)) lookup.set(value, indexed);\n\t});\n\n\treturn {\n\t\tvalues,\n\t\tget(value: Value) {\n\t\t\tif (typeof value === \"number\" && value === 0) {\n\t\t\t\treturn Object.is(value, -0) ? negativeZero : positiveZero;\n\t\t\t}\n\t\t\treturn lookup.get(value);\n\t\t}\n\t};\n}\n\nexport interface ComboboxProps<Value> extends Omit<ComboboxRootProps<Value, false>, \"children\" | \"items\" | \"multiple\"> {\n\t\"aria-describedby\"?: string;\n\t\"aria-label\"?: string;\n\t\"aria-labelledby\"?: string;\n\tclassName?: string;\n\tclearLabel?: string;\n\temptyMessage?: ReactNode;\n\tinputProps?: Omit<ComboboxInputProps, \"className\" | \"placeholder\">;\n\tinvalid?: boolean;\n\toptions: readonly ComboboxOption<Value>[];\n\tplaceholder?: string;\n\tpopupProps?: ComboboxPopupProps;\n\tpositionerProps?: ComboboxPositionerProps;\n\ttriggerLabel?: string;\n}\n\nfunction ComboboxComponent<Value>({\n\t\"aria-describedby\": ariaDescribedby,\n\t\"aria-label\": ariaLabel,\n\t\"aria-labelledby\": ariaLabelledby,\n\tclassName,\n\tclearLabel = \"清除選取\",\n\temptyMessage = \"找不到符合的選項\",\n\tinputProps,\n\tinvalid = false,\n\titemToStringLabel,\n\toptions,\n\tplaceholder,\n\tpopupProps,\n\tpositionerProps,\n\ttriggerLabel = \"顯示選項\",\n\t...rootProps\n}: ComboboxProps<Value>) {\n\tconst optionIndex = useMemo(() => createOptionIndex<Value, ComboboxOption<Value>>(options), [options]);\n\tconst stringify = useMemo(\n\t\t() =>\n\t\t\titemToStringLabel ??\n\t\t\t((itemValue: Value) => {\n\t\t\t\tconst option = optionIndex.get(itemValue)?.option;\n\t\t\t\treturn option?.textValue ?? (typeof option?.label === \"string\" ? option.label : String(itemValue));\n\t\t\t}),\n\t\t[itemToStringLabel, optionIndex]\n\t);\n\n\treturn (\n\t\t<BaseCombobox.Root {...rootProps} itemToStringLabel={stringify} items={optionIndex.values}>\n\t\t\t<ComboboxInputGroup className={className}>\n\t\t\t\t<ComboboxInput\n\t\t\t\t\t{...inputProps}\n\t\t\t\t\taria-describedby={ariaDescribedby ?? inputProps?.[\"aria-describedby\"]}\n\t\t\t\t\taria-invalid={invalid || inputProps?.[\"aria-invalid\"] || undefined}\n\t\t\t\t\taria-label={ariaLabel ?? inputProps?.[\"aria-label\"]}\n\t\t\t\t\taria-labelledby={ariaLabelledby ?? inputProps?.[\"aria-labelledby\"]}\n\t\t\t\t\tautoComplete={inputProps?.autoComplete ?? \"off\"}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t/>\n\t\t\t\t<ComboboxClear aria-label={clearLabel}>\n\t\t\t\t\t<XIcon aria-hidden=\"true\" weight=\"bold\" />\n\t\t\t\t</ComboboxClear>\n\t\t\t\t<ComboboxTrigger aria-label={triggerLabel}>\n\t\t\t\t\t<CaretDownIcon aria-hidden=\"true\" weight=\"bold\" />\n\t\t\t\t</ComboboxTrigger>\n\t\t\t</ComboboxInputGroup>\n\t\t\t<BaseCombobox.Portal>\n\t\t\t\t<ComboboxPositioner {...positionerProps}>\n\t\t\t\t\t<ComboboxPopup {...popupProps}>\n\t\t\t\t\t\t<ComboboxList>\n\t\t\t\t\t\t\t{(value: Value, index: number) => {\n\t\t\t\t\t\t\t\tconst indexed = optionIndex.get(value);\n\t\t\t\t\t\t\t\tif (!indexed) return null;\n\t\t\t\t\t\t\t\tconst { option, sourceIndex } = indexed;\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<ComboboxItem disabled={option.disabled} index={index} key={option.key ?? option.textValue ?? sourceIndex} value={value}>\n\t\t\t\t\t\t\t\t\t\t<ComboboxItemIndicator>\n\t\t\t\t\t\t\t\t\t\t\t<CheckIcon aria-hidden=\"true\" weight=\"bold\" />\n\t\t\t\t\t\t\t\t\t\t</ComboboxItemIndicator>\n\t\t\t\t\t\t\t\t\t\t<span className={styles.optionText}>\n\t\t\t\t\t\t\t\t\t\t\t<span>{option.label}</span>\n\t\t\t\t\t\t\t\t\t\t\t{option.description ? <span className={styles.optionDescription}>{option.description}</span> : null}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</ComboboxItem>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t</ComboboxList>\n\t\t\t\t\t\t<ComboboxEmpty>{emptyMessage}</ComboboxEmpty>\n\t\t\t\t\t</ComboboxPopup>\n\t\t\t\t</ComboboxPositioner>\n\t\t\t</BaseCombobox.Portal>\n\t\t</BaseCombobox.Root>\n\t);\n}\n\nexport const Combobox = Object.assign(ComboboxComponent, {\n\tArrow: BaseCombobox.Arrow,\n\tBackdrop: BaseCombobox.Backdrop,\n\tChip: BaseCombobox.Chip,\n\tChipRemove: BaseCombobox.ChipRemove,\n\tChips: BaseCombobox.Chips,\n\tClear: ComboboxClear,\n\tCollection: BaseCombobox.Collection,\n\tEmpty: ComboboxEmpty,\n\tGroup: BaseCombobox.Group,\n\tGroupLabel: BaseCombobox.GroupLabel,\n\tIcon: BaseCombobox.Icon,\n\tInput: ComboboxInput,\n\tInputGroup: ComboboxInputGroup,\n\tItem: ComboboxItem,\n\tItemIndicator: ComboboxItemIndicator,\n\tLabel: BaseCombobox.Label,\n\tList: ComboboxList,\n\tPopup: ComboboxPopup,\n\tPortal: BaseCombobox.Portal,\n\tPositioner: ComboboxPositioner,\n\tRoot: BaseCombobox.Root,\n\tRow: BaseCombobox.Row,\n\tSeparator: BaseCombobox.Separator,\n\tStatus: BaseCombobox.Status,\n\tTrigger: ComboboxTrigger,\n\tValue: BaseCombobox.Value,\n\tuseFilter: BaseCombobox.useFilter,\n\tuseFilteredItems: BaseCombobox.useFilteredItems\n});\n\nexport const AutocompleteInputGroup = forwardRef<HTMLDivElement, AutocompleteInputGroupProps>(function AutocompleteInputGroup({ className, ...props }, ref) {\n\treturn <BaseAutocomplete.InputGroup {...props} className={mergeStateClassName(styles.comboboxInputGroup, className)} ref={ref} />;\n});\n\nexport const AutocompleteItem = forwardRef<HTMLDivElement, AutocompleteItemProps>(function AutocompleteItem({ className, ...props }, ref) {\n\treturn <BaseAutocomplete.Item {...props} className={mergeStateClassName(styles.option, className)} ref={ref} />;\n});\n\nexport interface AutocompleteOption<Value> {\n\tdisabled?: boolean;\n\tkey?: Key;\n\tlabel: ReactNode;\n\ttextValue?: string;\n\tvalue: Value;\n}\n\nexport interface AutocompleteProps<ItemValue> extends Omit<AutocompleteRootProps<ItemValue>, \"children\" | \"items\"> {\n\t\"aria-describedby\"?: string;\n\t\"aria-label\"?: string;\n\t\"aria-labelledby\"?: string;\n\tclassName?: string;\n\tclearLabel?: string;\n\temptyMessage?: ReactNode;\n\tinputProps?: Omit<ComboboxInputProps, \"className\" | \"placeholder\">;\n\tinvalid?: boolean;\n\toptions: readonly AutocompleteOption<ItemValue>[];\n\tplaceholder?: string;\n\tpopupProps?: ComboboxPopupProps;\n\tpositionerProps?: ComboboxPositionerProps;\n\ttriggerLabel?: string;\n}\n\nfunction AutocompleteComponent<ItemValue>({\n\t\"aria-describedby\": ariaDescribedby,\n\t\"aria-label\": ariaLabel,\n\t\"aria-labelledby\": ariaLabelledby,\n\tclassName,\n\tclearLabel = \"清除搜尋內容\",\n\temptyMessage = \"找不到建議項目\",\n\tinputProps,\n\tinvalid = false,\n\titemToStringValue,\n\toptions,\n\tplaceholder,\n\tpopupProps,\n\tpositionerProps,\n\ttriggerLabel = \"顯示建議項目\",\n\t...rootProps\n}: AutocompleteProps<ItemValue>) {\n\tconst optionIndex = useMemo(() => createOptionIndex<ItemValue, AutocompleteOption<ItemValue>>(options), [options]);\n\tconst stringify = useMemo(\n\t\t() =>\n\t\t\titemToStringValue ??\n\t\t\t((itemValue: ItemValue) => {\n\t\t\t\tconst option = optionIndex.get(itemValue)?.option;\n\t\t\t\treturn option?.textValue ?? (typeof option?.label === \"string\" ? option.label : String(itemValue));\n\t\t\t}),\n\t\t[itemToStringValue, optionIndex]\n\t);\n\n\treturn (\n\t\t<BaseAutocomplete.Root {...rootProps} itemToStringValue={stringify} items={optionIndex.values}>\n\t\t\t<AutocompleteInputGroup className={className}>\n\t\t\t\t<ComboboxInput\n\t\t\t\t\t{...inputProps}\n\t\t\t\t\taria-describedby={ariaDescribedby ?? inputProps?.[\"aria-describedby\"]}\n\t\t\t\t\taria-invalid={invalid || inputProps?.[\"aria-invalid\"] || undefined}\n\t\t\t\t\taria-label={ariaLabel ?? inputProps?.[\"aria-label\"]}\n\t\t\t\t\taria-labelledby={ariaLabelledby ?? inputProps?.[\"aria-labelledby\"]}\n\t\t\t\t\tautoComplete={inputProps?.autoComplete ?? \"off\"}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t/>\n\t\t\t\t<ComboboxClear aria-label={clearLabel}>\n\t\t\t\t\t<XIcon aria-hidden=\"true\" weight=\"bold\" />\n\t\t\t\t</ComboboxClear>\n\t\t\t\t<BaseAutocomplete.Trigger aria-label={triggerLabel} className={styles.comboboxTrigger}>\n\t\t\t\t\t<CaretDownIcon aria-hidden=\"true\" weight=\"bold\" />\n\t\t\t\t</BaseAutocomplete.Trigger>\n\t\t\t</AutocompleteInputGroup>\n\t\t\t<BaseAutocomplete.Portal>\n\t\t\t\t<ComboboxPositioner {...positionerProps}>\n\t\t\t\t\t<ComboboxPopup {...popupProps}>\n\t\t\t\t\t\t<ComboboxList>\n\t\t\t\t\t\t\t{(value: ItemValue, index: number) => {\n\t\t\t\t\t\t\t\tconst indexed = optionIndex.get(value);\n\t\t\t\t\t\t\t\tif (!indexed) return null;\n\t\t\t\t\t\t\t\tconst { option, sourceIndex } = indexed;\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<AutocompleteItem disabled={option.disabled} index={index} key={option.key ?? option.textValue ?? sourceIndex} value={value}>\n\t\t\t\t\t\t\t\t\t\t<span className={styles.optionText}>{option.label}</span>\n\t\t\t\t\t\t\t\t\t</AutocompleteItem>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t</ComboboxList>\n\t\t\t\t\t\t<ComboboxEmpty>{emptyMessage}</ComboboxEmpty>\n\t\t\t\t\t</ComboboxPopup>\n\t\t\t\t</ComboboxPositioner>\n\t\t\t</BaseAutocomplete.Portal>\n\t\t</BaseAutocomplete.Root>\n\t);\n}\n\nexport const Autocomplete = Object.assign(AutocompleteComponent, {\n\tArrow: BaseAutocomplete.Arrow,\n\tBackdrop: BaseAutocomplete.Backdrop,\n\tClear: ComboboxClear,\n\tCollection: BaseAutocomplete.Collection,\n\tEmpty: ComboboxEmpty,\n\tGroup: BaseAutocomplete.Group,\n\tGroupLabel: BaseAutocomplete.GroupLabel,\n\tIcon: BaseAutocomplete.Icon,\n\tInput: ComboboxInput,\n\tInputGroup: AutocompleteInputGroup,\n\tItem: AutocompleteItem,\n\tList: ComboboxList,\n\tPopup: ComboboxPopup,\n\tPortal: BaseAutocomplete.Portal,\n\tPositioner: ComboboxPositioner,\n\tRoot: BaseAutocomplete.Root,\n\tRow: BaseAutocomplete.Row,\n\tSeparator: BaseAutocomplete.Separator,\n\tStatus: BaseAutocomplete.Status,\n\tTrigger: BaseAutocomplete.Trigger,\n\tValue: BaseAutocomplete.Value,\n\tuseFilter: BaseAutocomplete.useFilter,\n\tuseFilteredItems: BaseAutocomplete.useFilteredItems\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"combobox.js","names":[],"sources":["../../../src/components/selection/combobox.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete, type AutocompleteInputGroupProps, type AutocompleteItemProps, type AutocompleteRootProps } from \"@base-ui/react/autocomplete\";\nimport {\n\tCombobox as BaseCombobox,\n\ttype ComboboxClearProps,\n\ttype ComboboxEmptyProps,\n\ttype ComboboxInputGroupProps,\n\ttype ComboboxInputProps,\n\ttype ComboboxItemIndicatorProps,\n\ttype ComboboxItemProps,\n\ttype ComboboxListProps,\n\ttype ComboboxPopupProps,\n\ttype ComboboxPositionerProps,\n\ttype ComboboxRootProps,\n\ttype ComboboxTriggerProps\n} from \"@base-ui/react/combobox\";\nimport { CaretDownIcon } from \"@phosphor-icons/react/dist/csr/CaretDown\";\nimport { CheckIcon } from \"@phosphor-icons/react/dist/csr/Check\";\nimport { XIcon } from \"@phosphor-icons/react/dist/csr/X\";\nimport { forwardRef, useMemo, type Key, type ReactNode } from \"react\";\n\nimport { withStateClassName } from \"@/internal\";\nimport { useMessages } from \"@/intl\";\n\nexport const ComboboxInputGroup = forwardRef<HTMLDivElement, ComboboxInputGroupProps>(function ComboboxInputGroup({ className, ...props }, ref) {\n\treturn <BaseCombobox.InputGroup {...props} className={withStateClassName(\"lyds-combobox__input-group\", className)} ref={ref} />;\n});\n\nexport const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(function ComboboxInput({ className, ...props }, ref) {\n\treturn <BaseCombobox.Input {...props} className={withStateClassName(\"lyds-combobox__input\", className)} ref={ref} />;\n});\n\nexport const ComboboxTrigger = forwardRef<HTMLButtonElement, ComboboxTriggerProps>(function ComboboxTrigger({ className, ...props }, ref) {\n\treturn <BaseCombobox.Trigger {...props} className={withStateClassName(\"lyds-combobox__trigger\", className)} ref={ref} />;\n});\n\nexport const ComboboxClear = forwardRef<HTMLButtonElement, ComboboxClearProps>(function ComboboxClear({ className, ...props }, ref) {\n\treturn <BaseCombobox.Clear {...props} className={withStateClassName(\"lyds-combobox__clear\", className)} ref={ref} />;\n});\n\nexport const ComboboxPositioner = forwardRef<HTMLDivElement, ComboboxPositionerProps>(function ComboboxPositioner({ className, ...props }, ref) {\n\treturn <BaseCombobox.Positioner {...props} className={withStateClassName(\"lyds-listbox__positioner\", className)} ref={ref} />;\n});\n\nexport const ComboboxPopup = forwardRef<HTMLDivElement, ComboboxPopupProps>(function ComboboxPopup({ className, ...props }, ref) {\n\treturn <BaseCombobox.Popup {...props} className={withStateClassName(\"lyds-listbox__popup\", className)} ref={ref} />;\n});\n\nexport const ComboboxList = forwardRef<HTMLDivElement, ComboboxListProps>(function ComboboxList({ className, ...props }, ref) {\n\treturn <BaseCombobox.List {...props} className={withStateClassName(\"lyds-listbox__list\", className)} ref={ref} />;\n});\n\nexport const ComboboxItem = forwardRef<HTMLDivElement, ComboboxItemProps>(function ComboboxItem({ className, ...props }, ref) {\n\treturn <BaseCombobox.Item {...props} className={withStateClassName(\"lyds-listbox__option\", className)} ref={ref} />;\n});\n\nexport const ComboboxItemIndicator = forwardRef<HTMLSpanElement, ComboboxItemIndicatorProps>(function ComboboxItemIndicator({ className, ...props }, ref) {\n\treturn <BaseCombobox.ItemIndicator {...props} className={withStateClassName(\"lyds-listbox__option-indicator\", className)} ref={ref} />;\n});\n\nexport const ComboboxEmpty = forwardRef<HTMLDivElement, ComboboxEmptyProps>(function ComboboxEmpty({ className, ...props }, ref) {\n\treturn <BaseCombobox.Empty {...props} className={withStateClassName(\"lyds-listbox__empty\", className)} ref={ref} />;\n});\n\nexport interface ComboboxOption<Value> {\n\tdescription?: ReactNode;\n\tdisabled?: boolean;\n\tkey?: Key;\n\tlabel: ReactNode;\n\ttextValue?: string;\n\tvalue: Value;\n}\n\ninterface IndexedOption<Option> {\n\toption: Option;\n\tsourceIndex: number;\n}\n\nfunction createOptionIndex<Value, Option extends { value: Value }>(options: readonly Option[]) {\n\tconst values: Value[] = [];\n\tconst lookup = new Map<Value, IndexedOption<Option>>();\n\tlet negativeZero: IndexedOption<Option> | undefined;\n\tlet positiveZero: IndexedOption<Option> | undefined;\n\n\toptions.forEach((option, sourceIndex) => {\n\t\tconst value = option.value;\n\t\tconst indexed = { option, sourceIndex };\n\t\tvalues.push(value);\n\n\t\tif (typeof value === \"number\" && value === 0) {\n\t\t\tif (Object.is(value, -0)) negativeZero ??= indexed;\n\t\t\telse positiveZero ??= indexed;\n\t\t\treturn;\n\t\t}\n\n\t\tif (!lookup.has(value)) lookup.set(value, indexed);\n\t});\n\n\treturn {\n\t\tvalues,\n\t\tget(value: Value) {\n\t\t\tif (typeof value === \"number\" && value === 0) {\n\t\t\t\treturn Object.is(value, -0) ? negativeZero : positiveZero;\n\t\t\t}\n\t\t\treturn lookup.get(value);\n\t\t}\n\t};\n}\n\nexport interface ComboboxProps<Value> extends Omit<ComboboxRootProps<Value, false>, \"children\" | \"items\" | \"multiple\"> {\n\t\"aria-describedby\"?: string;\n\t\"aria-label\"?: string;\n\t\"aria-labelledby\"?: string;\n\tclassName?: string;\n\tclearLabel?: string;\n\temptyMessage?: ReactNode;\n\tinputProps?: Omit<ComboboxInputProps, \"className\" | \"placeholder\">;\n\tinvalid?: boolean;\n\toptions: readonly ComboboxOption<Value>[];\n\tplaceholder?: string;\n\tpopupProps?: ComboboxPopupProps;\n\tpositionerProps?: ComboboxPositionerProps;\n\ttriggerLabel?: string;\n}\n\nfunction ComboboxComponent<Value>({\n\t\"aria-describedby\": ariaDescribedby,\n\t\"aria-label\": ariaLabel,\n\t\"aria-labelledby\": ariaLabelledby,\n\tclassName,\n\tclearLabel,\n\temptyMessage,\n\tinputProps,\n\tinvalid = false,\n\titemToStringLabel,\n\toptions,\n\tplaceholder,\n\tpopupProps,\n\tpositionerProps,\n\ttriggerLabel,\n\t...rootProps\n}: ComboboxProps<Value>) {\n\tconst messages = useMessages();\n\tconst optionIndex = useMemo(() => createOptionIndex<Value, ComboboxOption<Value>>(options), [options]);\n\tconst stringify = useMemo(\n\t\t() =>\n\t\t\titemToStringLabel ??\n\t\t\t((itemValue: Value) => {\n\t\t\t\tconst option = optionIndex.get(itemValue)?.option;\n\t\t\t\treturn option?.textValue ?? (typeof option?.label === \"string\" ? option.label : String(itemValue));\n\t\t\t}),\n\t\t[itemToStringLabel, optionIndex]\n\t);\n\n\treturn (\n\t\t<BaseCombobox.Root {...rootProps} itemToStringLabel={stringify} items={optionIndex.values}>\n\t\t\t<ComboboxInputGroup className={className}>\n\t\t\t\t<ComboboxInput\n\t\t\t\t\t{...inputProps}\n\t\t\t\t\taria-describedby={ariaDescribedby ?? inputProps?.[\"aria-describedby\"]}\n\t\t\t\t\taria-invalid={invalid || inputProps?.[\"aria-invalid\"] || undefined}\n\t\t\t\t\taria-label={ariaLabel ?? inputProps?.[\"aria-label\"]}\n\t\t\t\t\taria-labelledby={ariaLabelledby ?? inputProps?.[\"aria-labelledby\"]}\n\t\t\t\t\tautoComplete={inputProps?.autoComplete ?? \"off\"}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t/>\n\t\t\t\t<ComboboxClear aria-label={clearLabel ?? messages.comboboxClear}>\n\t\t\t\t\t<XIcon aria-hidden=\"true\" weight=\"bold\" />\n\t\t\t\t</ComboboxClear>\n\t\t\t\t<ComboboxTrigger aria-label={triggerLabel ?? messages.comboboxTrigger}>\n\t\t\t\t\t<CaretDownIcon aria-hidden=\"true\" weight=\"bold\" />\n\t\t\t\t</ComboboxTrigger>\n\t\t\t</ComboboxInputGroup>\n\t\t\t<BaseCombobox.Portal>\n\t\t\t\t<ComboboxPositioner {...positionerProps}>\n\t\t\t\t\t<ComboboxPopup {...popupProps}>\n\t\t\t\t\t\t<ComboboxList>\n\t\t\t\t\t\t\t{(value: Value, index: number) => {\n\t\t\t\t\t\t\t\tconst indexed = optionIndex.get(value);\n\t\t\t\t\t\t\t\tif (!indexed) return null;\n\t\t\t\t\t\t\t\tconst { option, sourceIndex } = indexed;\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<ComboboxItem disabled={option.disabled} index={index} key={option.key ?? option.textValue ?? sourceIndex} value={value}>\n\t\t\t\t\t\t\t\t\t\t<ComboboxItemIndicator>\n\t\t\t\t\t\t\t\t\t\t\t<CheckIcon aria-hidden=\"true\" weight=\"bold\" />\n\t\t\t\t\t\t\t\t\t\t</ComboboxItemIndicator>\n\t\t\t\t\t\t\t\t\t\t<span className={\"lyds-listbox__option-text\"}>\n\t\t\t\t\t\t\t\t\t\t\t<span>{option.label}</span>\n\t\t\t\t\t\t\t\t\t\t\t{option.description ? <span className={\"lyds-listbox__option-description\"}>{option.description}</span> : null}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</ComboboxItem>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t</ComboboxList>\n\t\t\t\t\t\t<ComboboxEmpty>{emptyMessage ?? messages.comboboxEmpty}</ComboboxEmpty>\n\t\t\t\t\t</ComboboxPopup>\n\t\t\t\t</ComboboxPositioner>\n\t\t\t</BaseCombobox.Portal>\n\t\t</BaseCombobox.Root>\n\t);\n}\n\nexport const Combobox = Object.assign(ComboboxComponent, {\n\tArrow: BaseCombobox.Arrow,\n\tBackdrop: BaseCombobox.Backdrop,\n\tChip: BaseCombobox.Chip,\n\tChipRemove: BaseCombobox.ChipRemove,\n\tChips: BaseCombobox.Chips,\n\tClear: ComboboxClear,\n\tCollection: BaseCombobox.Collection,\n\tEmpty: ComboboxEmpty,\n\tGroup: BaseCombobox.Group,\n\tGroupLabel: BaseCombobox.GroupLabel,\n\tIcon: BaseCombobox.Icon,\n\tInput: ComboboxInput,\n\tInputGroup: ComboboxInputGroup,\n\tItem: ComboboxItem,\n\tItemIndicator: ComboboxItemIndicator,\n\tLabel: BaseCombobox.Label,\n\tList: ComboboxList,\n\tPopup: ComboboxPopup,\n\tPortal: BaseCombobox.Portal,\n\tPositioner: ComboboxPositioner,\n\tRoot: BaseCombobox.Root,\n\tRow: BaseCombobox.Row,\n\tSeparator: BaseCombobox.Separator,\n\tStatus: BaseCombobox.Status,\n\tTrigger: ComboboxTrigger,\n\tValue: BaseCombobox.Value,\n\tuseFilter: BaseCombobox.useFilter,\n\tuseFilteredItems: BaseCombobox.useFilteredItems\n});\n\nexport const AutocompleteInputGroup = forwardRef<HTMLDivElement, AutocompleteInputGroupProps>(function AutocompleteInputGroup({ className, ...props }, ref) {\n\treturn <BaseAutocomplete.InputGroup {...props} className={withStateClassName(\"lyds-combobox__input-group\", className)} ref={ref} />;\n});\n\nexport const AutocompleteItem = forwardRef<HTMLDivElement, AutocompleteItemProps>(function AutocompleteItem({ className, ...props }, ref) {\n\treturn <BaseAutocomplete.Item {...props} className={withStateClassName(\"lyds-listbox__option\", className)} ref={ref} />;\n});\n\nexport interface AutocompleteOption<Value> {\n\tdisabled?: boolean;\n\tkey?: Key;\n\tlabel: ReactNode;\n\ttextValue?: string;\n\tvalue: Value;\n}\n\nexport interface AutocompleteProps<ItemValue> extends Omit<AutocompleteRootProps<ItemValue>, \"children\" | \"items\"> {\n\t\"aria-describedby\"?: string;\n\t\"aria-label\"?: string;\n\t\"aria-labelledby\"?: string;\n\tclassName?: string;\n\tclearLabel?: string;\n\temptyMessage?: ReactNode;\n\tinputProps?: Omit<ComboboxInputProps, \"className\" | \"placeholder\">;\n\tinvalid?: boolean;\n\toptions: readonly AutocompleteOption<ItemValue>[];\n\tplaceholder?: string;\n\tpopupProps?: ComboboxPopupProps;\n\tpositionerProps?: ComboboxPositionerProps;\n\ttriggerLabel?: string;\n}\n\nfunction AutocompleteComponent<ItemValue>({\n\t\"aria-describedby\": ariaDescribedby,\n\t\"aria-label\": ariaLabel,\n\t\"aria-labelledby\": ariaLabelledby,\n\tclassName,\n\tclearLabel,\n\temptyMessage,\n\tinputProps,\n\tinvalid = false,\n\titemToStringValue,\n\toptions,\n\tplaceholder,\n\tpopupProps,\n\tpositionerProps,\n\ttriggerLabel,\n\t...rootProps\n}: AutocompleteProps<ItemValue>) {\n\tconst messages = useMessages();\n\tconst optionIndex = useMemo(() => createOptionIndex<ItemValue, AutocompleteOption<ItemValue>>(options), [options]);\n\tconst stringify = useMemo(\n\t\t() =>\n\t\t\titemToStringValue ??\n\t\t\t((itemValue: ItemValue) => {\n\t\t\t\tconst option = optionIndex.get(itemValue)?.option;\n\t\t\t\treturn option?.textValue ?? (typeof option?.label === \"string\" ? option.label : String(itemValue));\n\t\t\t}),\n\t\t[itemToStringValue, optionIndex]\n\t);\n\n\treturn (\n\t\t<BaseAutocomplete.Root {...rootProps} itemToStringValue={stringify} items={optionIndex.values}>\n\t\t\t<AutocompleteInputGroup className={className}>\n\t\t\t\t<ComboboxInput\n\t\t\t\t\t{...inputProps}\n\t\t\t\t\taria-describedby={ariaDescribedby ?? inputProps?.[\"aria-describedby\"]}\n\t\t\t\t\taria-invalid={invalid || inputProps?.[\"aria-invalid\"] || undefined}\n\t\t\t\t\taria-label={ariaLabel ?? inputProps?.[\"aria-label\"]}\n\t\t\t\t\taria-labelledby={ariaLabelledby ?? inputProps?.[\"aria-labelledby\"]}\n\t\t\t\t\tautoComplete={inputProps?.autoComplete ?? \"off\"}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t/>\n\t\t\t\t<ComboboxClear aria-label={clearLabel ?? messages.autocompleteClear}>\n\t\t\t\t\t<XIcon aria-hidden=\"true\" weight=\"bold\" />\n\t\t\t\t</ComboboxClear>\n\t\t\t\t<BaseAutocomplete.Trigger aria-label={triggerLabel ?? messages.autocompleteTrigger} className={\"lyds-combobox__trigger\"}>\n\t\t\t\t\t<CaretDownIcon aria-hidden=\"true\" weight=\"bold\" />\n\t\t\t\t</BaseAutocomplete.Trigger>\n\t\t\t</AutocompleteInputGroup>\n\t\t\t<BaseAutocomplete.Portal>\n\t\t\t\t<ComboboxPositioner {...positionerProps}>\n\t\t\t\t\t<ComboboxPopup {...popupProps}>\n\t\t\t\t\t\t<ComboboxList>\n\t\t\t\t\t\t\t{(value: ItemValue, index: number) => {\n\t\t\t\t\t\t\t\tconst indexed = optionIndex.get(value);\n\t\t\t\t\t\t\t\tif (!indexed) return null;\n\t\t\t\t\t\t\t\tconst { option, sourceIndex } = indexed;\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<AutocompleteItem disabled={option.disabled} index={index} key={option.key ?? option.textValue ?? sourceIndex} value={value}>\n\t\t\t\t\t\t\t\t\t\t<span className={\"lyds-listbox__option-text\"}>{option.label}</span>\n\t\t\t\t\t\t\t\t\t</AutocompleteItem>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t</ComboboxList>\n\t\t\t\t\t\t<ComboboxEmpty>{emptyMessage ?? messages.autocompleteEmpty}</ComboboxEmpty>\n\t\t\t\t\t</ComboboxPopup>\n\t\t\t\t</ComboboxPositioner>\n\t\t\t</BaseAutocomplete.Portal>\n\t\t</BaseAutocomplete.Root>\n\t);\n}\n\nexport const Autocomplete = Object.assign(AutocompleteComponent, {\n\tArrow: BaseAutocomplete.Arrow,\n\tBackdrop: BaseAutocomplete.Backdrop,\n\tClear: ComboboxClear,\n\tCollection: BaseAutocomplete.Collection,\n\tEmpty: ComboboxEmpty,\n\tGroup: BaseAutocomplete.Group,\n\tGroupLabel: BaseAutocomplete.GroupLabel,\n\tIcon: BaseAutocomplete.Icon,\n\tInput: ComboboxInput,\n\tInputGroup: AutocompleteInputGroup,\n\tItem: AutocompleteItem,\n\tList: ComboboxList,\n\tPopup: ComboboxPopup,\n\tPortal: BaseAutocomplete.Portal,\n\tPositioner: ComboboxPositioner,\n\tRoot: BaseAutocomplete.Root,\n\tRow: BaseAutocomplete.Row,\n\tSeparator: BaseAutocomplete.Separator,\n\tStatus: BaseAutocomplete.Status,\n\tTrigger: BaseAutocomplete.Trigger,\n\tValue: BaseAutocomplete.Value,\n\tuseFilter: BaseAutocomplete.useFilter,\n\tuseFilteredItems: BaseAutocomplete.useFilteredItems\n});\n"],"mappings":";;;;;;;;;;;AAuBA,IAAa,IAAqB,EAAoD,SAA4B,EAAE,cAAW,GAAG,KAAS,GAAK;CAC/I,OAAO,kBAAC,EAAa,YAAd;EAAyB,GAAI;EAAO,WAAW,EAAmB,8BAA8B,CAAS;EAAQ;CAAM,CAAA;AAC/H,CAAC,GAEY,IAAgB,EAAiD,SAAuB,EAAE,cAAW,GAAG,KAAS,GAAK;CAClI,OAAO,kBAAC,EAAa,OAAd;EAAoB,GAAI;EAAO,WAAW,EAAmB,wBAAwB,CAAS;EAAQ;CAAM,CAAA;AACpH,CAAC,GAEY,IAAkB,EAAoD,SAAyB,EAAE,cAAW,GAAG,KAAS,GAAK;CACzI,OAAO,kBAAC,EAAa,SAAd;EAAsB,GAAI;EAAO,WAAW,EAAmB,0BAA0B,CAAS;EAAQ;CAAM,CAAA;AACxH,CAAC,GAEY,IAAgB,EAAkD,SAAuB,EAAE,cAAW,GAAG,KAAS,GAAK;CACnI,OAAO,kBAAC,EAAa,OAAd;EAAoB,GAAI;EAAO,WAAW,EAAmB,wBAAwB,CAAS;EAAQ;CAAM,CAAA;AACpH,CAAC,GAEY,IAAqB,EAAoD,SAA4B,EAAE,cAAW,GAAG,KAAS,GAAK;CAC/I,OAAO,kBAAC,EAAa,YAAd;EAAyB,GAAI;EAAO,WAAW,EAAmB,4BAA4B,CAAS;EAAQ;CAAM,CAAA;AAC7H,CAAC,GAEY,IAAgB,EAA+C,SAAuB,EAAE,cAAW,GAAG,KAAS,GAAK;CAChI,OAAO,kBAAC,EAAa,OAAd;EAAoB,GAAI;EAAO,WAAW,EAAmB,uBAAuB,CAAS;EAAQ;CAAM,CAAA;AACnH,CAAC,GAEY,IAAe,EAA8C,SAAsB,EAAE,cAAW,GAAG,KAAS,GAAK;CAC7H,OAAO,kBAAC,EAAa,MAAd;EAAmB,GAAI;EAAO,WAAW,EAAmB,sBAAsB,CAAS;EAAQ;CAAM,CAAA;AACjH,CAAC,GAEY,IAAe,EAA8C,SAAsB,EAAE,cAAW,GAAG,KAAS,GAAK;CAC7H,OAAO,kBAAC,EAAa,MAAd;EAAmB,GAAI;EAAO,WAAW,EAAmB,wBAAwB,CAAS;EAAQ;CAAM,CAAA;AACnH,CAAC,GAEY,IAAwB,EAAwD,SAA+B,EAAE,cAAW,GAAG,KAAS,GAAK;CACzJ,OAAO,kBAAC,EAAa,eAAd;EAA4B,GAAI;EAAO,WAAW,EAAmB,kCAAkC,CAAS;EAAQ;CAAM,CAAA;AACtI,CAAC,GAEY,IAAgB,EAA+C,SAAuB,EAAE,cAAW,GAAG,KAAS,GAAK;CAChI,OAAO,kBAAC,EAAa,OAAd;EAAoB,GAAI;EAAO,WAAW,EAAmB,uBAAuB,CAAS;EAAQ;CAAM,CAAA;AACnH,CAAC;AAgBD,SAAS,EAA0D,GAA4B;CAC9F,IAAM,IAAkB,CAAC,GACnB,oBAAS,IAAI,IAAkC,GACjD,GACA;CAgBJ,OAdA,EAAQ,SAAS,GAAQ,MAAgB;EACxC,IAAM,IAAQ,EAAO,OACf,IAAU;GAAE;GAAQ;EAAY;EAGtC,IAFA,EAAO,KAAK,CAAK,GAEb,OAAO,KAAU,YAAY,MAAU,GAAG;GAC7C,AAAI,OAAO,GAAG,GAAO,EAAE,IAAG,MAAiB,IACtC,MAAiB;GACtB;EACD;EAEA,AAAK,EAAO,IAAI,CAAK,KAAG,EAAO,IAAI,GAAO,CAAO;CAClD,CAAC,GAEM;EACN;EACA,IAAI,GAAc;GAIjB,OAHI,OAAO,KAAU,YAAY,MAAU,IACnC,OAAO,GAAG,GAAO,EAAE,IAAI,IAAe,IAEvC,EAAO,IAAI,CAAK;EACxB;CACD;AACD;AAkBA,SAAS,EAAyB,EACjC,oBAAoB,GACpB,cAAc,GACd,mBAAmB,GACnB,cACA,eACA,iBACA,eACA,aAAU,IACV,sBACA,YACA,gBACA,eACA,oBACA,iBACA,GAAG,KACqB;CACxB,IAAM,IAAW,EAAY,GACvB,IAAc,QAAc,EAAgD,CAAO,GAAG,CAAC,CAAO,CAAC,GAC/F,IAAY,QAEhB,OACE,MAAqB;EACtB,IAAM,IAAS,EAAY,IAAI,CAAS,CAAC,EAAE;EAC3C,OAAO,GAAQ,cAAc,OAAO,GAAQ,SAAU,WAAW,EAAO,QAAQ,OAAO,CAAS;CACjG,IACD,CAAC,GAAmB,CAAW,CAChC;CAEA,OACC,kBAAC,EAAa,MAAd;EAAmB,GAAI;EAAW,mBAAmB;EAAW,OAAO,EAAY;EAAnF,UAAA,CACC,kBAAC,GAAD;GAA+B;GAA/B,UAAA;IACC,kBAAC,GAAD;KACC,GAAI;KACJ,oBAAkB,KAAmB,IAAa;KAClD,gBAAc,KAAW,IAAa,mBAAmB,KAAA;KACzD,cAAY,KAAa,IAAa;KACtC,mBAAiB,KAAkB,IAAa;KAChD,cAAc,GAAY,gBAAgB;KAC7B;IACb,CAAA;IACD,kBAAC,GAAD;KAAe,cAAY,KAAc,EAAS;KACjD,UAAA,kBAAC,GAAD;MAAO,eAAY;MAAO,QAAO;KAAQ,CAAA;IAC3B,CAAA;IACf,kBAAC,GAAD;KAAiB,cAAY,KAAgB,EAAS;KACrD,UAAA,kBAAC,GAAD;MAAe,eAAY;MAAO,QAAO;KAAQ,CAAA;IACjC,CAAA;GACE;EACpB,CAAA,GAAA,kBAAC,EAAa,QAAd,EAAA,UACC,kBAAC,GAAD;GAAoB,GAAI;GACvB,UAAA,kBAAC,GAAD;IAAe,GAAI;IAAnB,UAAA,CACC,kBAAC,GAAD,EAAA,WACG,GAAc,MAAkB;KACjC,IAAM,IAAU,EAAY,IAAI,CAAK;KACrC,IAAI,CAAC,GAAS,OAAO;KACrB,IAAM,EAAE,WAAQ,mBAAgB;KAChC,OACC,kBAAC,GAAD;MAAc,UAAU,EAAO;MAAiB;MAAkE;MAAlH,UAAA,CACC,kBAAC,GAAD,EAAA,UACC,kBAAC,GAAD;OAAW,eAAY;OAAO,QAAO;MAAQ,CAAA,EACvB,CAAA,GACvB,kBAAC,QAAD;OAAM,WAAW;OAAjB,UAAA,CACC,kBAAC,QAAD,EAAA,UAAO,EAAO,MAAY,CAAA,GACzB,EAAO,cAAc,kBAAC,QAAD;QAAM,WAAW;QAAqC,UAAA,EAAO;OAAkB,CAAA,IAAI,IACpG;MACO,CAAA,CAAA;KAR8C,GAAA,EAAO,OAAO,EAAO,aAAa,CAQhF;IAEhB,EACa,CAAA,GACd,kBAAC,GAAD,EAAA,UAAgB,KAAgB,EAAS,cAA6B,CAAA,CACxD;;EACI,CAAA,EACA,CAAA,CACH;;AAErB;AAEA,IAAa,IAAW,OAAO,OAAO,GAAmB;CACxD,OAAO,EAAa;CACpB,UAAU,EAAa;CACvB,MAAM,EAAa;CACnB,YAAY,EAAa;CACzB,OAAO,EAAa;CACpB,OAAO;CACP,YAAY,EAAa;CACzB,OAAO;CACP,OAAO,EAAa;CACpB,YAAY,EAAa;CACzB,MAAM,EAAa;CACnB,OAAO;CACP,YAAY;CACZ,MAAM;CACN,eAAe;CACf,OAAO,EAAa;CACpB,MAAM;CACN,OAAO;CACP,QAAQ,EAAa;CACrB,YAAY;CACZ,MAAM,EAAa;CACnB,KAAK,EAAa;CAClB,WAAW,EAAa;CACxB,QAAQ,EAAa;CACrB,SAAS;CACT,OAAO,EAAa;CACpB,WAAW,EAAa;CACxB,kBAAkB,EAAa;AAChC,CAAC,GAEY,IAAyB,EAAwD,SAAgC,EAAE,cAAW,GAAG,KAAS,GAAK;CAC3J,OAAO,kBAAC,EAAiB,YAAlB;EAA6B,GAAI;EAAO,WAAW,EAAmB,8BAA8B,CAAS;EAAQ;CAAM,CAAA;AACnI,CAAC,GAEY,IAAmB,EAAkD,SAA0B,EAAE,cAAW,GAAG,KAAS,GAAK;CACzI,OAAO,kBAAC,EAAiB,MAAlB;EAAuB,GAAI;EAAO,WAAW,EAAmB,wBAAwB,CAAS;EAAQ;CAAM,CAAA;AACvH,CAAC;AA0BD,SAAS,EAAiC,EACzC,oBAAoB,GACpB,cAAc,GACd,mBAAmB,GACnB,cACA,eACA,iBACA,eACA,aAAU,IACV,sBACA,YACA,gBACA,eACA,oBACA,iBACA,GAAG,KAC6B;CAChC,IAAM,IAAW,EAAY,GACvB,IAAc,QAAc,EAA4D,CAAO,GAAG,CAAC,CAAO,CAAC,GAC3G,IAAY,QAEhB,OACE,MAAyB;EAC1B,IAAM,IAAS,EAAY,IAAI,CAAS,CAAC,EAAE;EAC3C,OAAO,GAAQ,cAAc,OAAO,GAAQ,SAAU,WAAW,EAAO,QAAQ,OAAO,CAAS;CACjG,IACD,CAAC,GAAmB,CAAW,CAChC;CAEA,OACC,kBAAC,EAAiB,MAAlB;EAAuB,GAAI;EAAW,mBAAmB;EAAW,OAAO,EAAY;EAAvF,UAAA,CACC,kBAAC,GAAD;GAAmC;GAAnC,UAAA;IACC,kBAAC,GAAD;KACC,GAAI;KACJ,oBAAkB,KAAmB,IAAa;KAClD,gBAAc,KAAW,IAAa,mBAAmB,KAAA;KACzD,cAAY,KAAa,IAAa;KACtC,mBAAiB,KAAkB,IAAa;KAChD,cAAc,GAAY,gBAAgB;KAC7B;IACb,CAAA;IACD,kBAAC,GAAD;KAAe,cAAY,KAAc,EAAS;KACjD,UAAA,kBAAC,GAAD;MAAO,eAAY;MAAO,QAAO;KAAQ,CAAA;IAC3B,CAAA;IACf,kBAAC,EAAiB,SAAlB;KAA0B,cAAY,KAAgB,EAAS;KAAqB,WAAW;KAC9F,UAAA,kBAAC,GAAD;MAAe,eAAY;MAAO,QAAO;KAAQ,CAAA;IACxB,CAAA;GACH;EACxB,CAAA,GAAA,kBAAC,EAAiB,QAAlB,EAAA,UACC,kBAAC,GAAD;GAAoB,GAAI;GACvB,UAAA,kBAAC,GAAD;IAAe,GAAI;IAAnB,UAAA,CACC,kBAAC,GAAD,EAAA,WACG,GAAkB,MAAkB;KACrC,IAAM,IAAU,EAAY,IAAI,CAAK;KACrC,IAAI,CAAC,GAAS,OAAO;KACrB,IAAM,EAAE,WAAQ,mBAAgB;KAChC,OACC,kBAAC,GAAD;MAAkB,UAAU,EAAO;MAAiB;MAAkE;MACrH,UAAA,kBAAC,QAAD;OAAM,WAAW;OAA8B,UAAA,EAAO;MAAY,CAAA;KACjD,GAF8C,EAAO,OAAO,EAAO,aAAa,CAEhF;IAEpB,EACa,CAAA,GACd,kBAAC,GAAD,EAAA,UAAgB,KAAgB,EAAS,kBAAiC,CAAA,CAC5D;;EACI,CAAA,EACI,CAAA,CACH;;AAEzB;AAEA,IAAa,IAAe,OAAO,OAAO,GAAuB;CAChE,OAAO,EAAiB;CACxB,UAAU,EAAiB;CAC3B,OAAO;CACP,YAAY,EAAiB;CAC7B,OAAO;CACP,OAAO,EAAiB;CACxB,YAAY,EAAiB;CAC7B,MAAM,EAAiB;CACvB,OAAO;CACP,YAAY;CACZ,MAAM;CACN,MAAM;CACN,OAAO;CACP,QAAQ,EAAiB;CACzB,YAAY;CACZ,MAAM,EAAiB;CACvB,KAAK,EAAiB;CACtB,WAAW,EAAiB;CAC5B,QAAQ,EAAiB;CACzB,SAAS,EAAiB;CAC1B,OAAO,EAAiB;CACxB,WAAW,EAAiB;CAC5B,kBAAkB,EAAiB;AACpC,CAAC"}
|
|
@@ -7,6 +7,7 @@ import { SwitchRootProps } from '@base-ui/react/switch';
|
|
|
7
7
|
import { ToggleProps as BaseToggleProps } from '@base-ui/react/toggle';
|
|
8
8
|
import { ToggleGroup as BaseToggleGroup, ToggleGroupProps as BaseToggleGroupProps } from '@base-ui/react/toggle-group';
|
|
9
9
|
import { JSX, ReactNode, RefAttributes } from 'react';
|
|
10
|
+
import { AccessibleName } from '../../internal/index.js';
|
|
10
11
|
export interface CheckboxProps extends CheckboxRootProps {
|
|
11
12
|
indicator?: ReactNode;
|
|
12
13
|
}
|
|
@@ -51,7 +52,7 @@ export declare const Toggle: ToggleComponent;
|
|
|
51
52
|
export type ToggleGroupProps<Value extends string = string> = BaseToggleGroupProps<Value>;
|
|
52
53
|
type ToggleGroupComponent = <Value extends string = string>(props: ToggleGroupProps<Value> & RefAttributes<HTMLDivElement>) => JSX.Element;
|
|
53
54
|
export declare const ToggleGroup: ToggleGroupComponent;
|
|
54
|
-
|
|
55
|
+
interface SegmentedControlOwnProps<Value extends string = string> extends Omit<BaseToggleGroupProps<Value>, "aria-label" | "aria-labelledby" | "aria-readonly" | "defaultValue" | "multiple" | "onValueChange" | "value"> {
|
|
55
56
|
allowEmpty?: boolean;
|
|
56
57
|
defaultValue?: Value | null;
|
|
57
58
|
name?: string;
|
|
@@ -59,6 +60,8 @@ export interface SegmentedControlProps<Value extends string = string> extends Om
|
|
|
59
60
|
size?: "sm" | "md";
|
|
60
61
|
value?: Value | null;
|
|
61
62
|
}
|
|
63
|
+
/** The segments name themselves; the group they belong to does not, so it has to be told. */
|
|
64
|
+
export type SegmentedControlProps<Value extends string = string> = SegmentedControlOwnProps<Value> & AccessibleName;
|
|
62
65
|
type SegmentedControlComponent = <Value extends string = string>(props: SegmentedControlProps<Value> & RefAttributes<HTMLDivElement>) => JSX.Element;
|
|
63
66
|
export declare const SegmentedControl: SegmentedControlComponent;
|
|
64
67
|
export declare const SegmentedControlItem: ToggleComponent;
|