@lolmath/ui 6.2.0 → 6.4.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/es/index.css +28 -10
- package/dist/es/index.d.ts +10 -7
- package/dist/es/index.js +145 -73
- package/dist/es/index.js.map +1 -1
- package/dist/lib/index.css +28 -10
- package/dist/lib/index.d.ts +10 -7
- package/dist/lib/index.js +160 -91
- package/dist/lib/index.js.map +1 -1
- package/package.json +1 -1
package/dist/lib/index.js
CHANGED
|
@@ -36,6 +36,7 @@ __export(src_exports, {
|
|
|
36
36
|
Button: () => Button2,
|
|
37
37
|
ButtonLink: () => ButtonLink,
|
|
38
38
|
Checkbox: () => Checkbox,
|
|
39
|
+
Collection: () => import_react_aria_components25.Collection,
|
|
39
40
|
Dialog: () => import_react_aria_components25.Dialog,
|
|
40
41
|
DialogButtons: () => DialogButtons,
|
|
41
42
|
DialogHeading: () => DialogHeading,
|
|
@@ -45,12 +46,20 @@ __export(src_exports, {
|
|
|
45
46
|
DisclosureGroup: () => DisclosureGroup,
|
|
46
47
|
DisclosurePanel: () => DisclosurePanel,
|
|
47
48
|
Divider: () => Divider,
|
|
49
|
+
FieldError: () => import_react_aria_components25.FieldError,
|
|
50
|
+
GridLayout: () => import_react_aria_components25.GridLayout,
|
|
48
51
|
Heading: () => Heading,
|
|
49
52
|
Label: () => Label2,
|
|
53
|
+
ListBoxItem: () => import_react_aria_components25.ListBoxItem,
|
|
54
|
+
ListLayout: () => import_react_aria_components25.ListLayout,
|
|
50
55
|
Menu: () => Menu,
|
|
56
|
+
MenuHeader: () => MenuHeader,
|
|
51
57
|
MenuItem: () => MenuItem,
|
|
52
58
|
MenuPopover: () => MenuPopover,
|
|
59
|
+
MenuSection: () => MenuSection,
|
|
60
|
+
MenuSeparator: () => MenuSeparator,
|
|
53
61
|
MenuTrigger: () => MenuTrigger,
|
|
62
|
+
MenuVirtualizer: () => MenuVirtualizer,
|
|
54
63
|
Modal: () => Modal,
|
|
55
64
|
MultipleSelect: () => MultipleSelect,
|
|
56
65
|
NumberField: () => NumberField,
|
|
@@ -66,6 +75,8 @@ __export(src_exports, {
|
|
|
66
75
|
SelectListBoxItem: () => SelectListBoxItem,
|
|
67
76
|
SelectPopover: () => SelectPopover,
|
|
68
77
|
SelectValue: () => import_react_aria_components12.SelectValue,
|
|
78
|
+
SelectVirtualizer: () => SelectVirtualizer,
|
|
79
|
+
Size: () => import_react_aria_components25.Size,
|
|
69
80
|
Slider: () => Slider,
|
|
70
81
|
SliderOutput: () => SliderOutput,
|
|
71
82
|
Sonner: () => Sonner,
|
|
@@ -75,6 +86,7 @@ __export(src_exports, {
|
|
|
75
86
|
Tab: () => Tab,
|
|
76
87
|
TabList: () => TabList,
|
|
77
88
|
TabPanel: () => TabPanel,
|
|
89
|
+
TableLayout: () => import_react_aria_components25.TableLayout,
|
|
78
90
|
Tabs: () => Tabs,
|
|
79
91
|
Tag: () => Tag,
|
|
80
92
|
Text: () => Text,
|
|
@@ -82,6 +94,8 @@ __export(src_exports, {
|
|
|
82
94
|
TextField: () => TextField,
|
|
83
95
|
ToggleButton: () => ToggleButton,
|
|
84
96
|
UnstyledPopover: () => import_react_aria_components25.Popover,
|
|
97
|
+
Virtualizer: () => import_react_aria_components25.Virtualizer,
|
|
98
|
+
WaterfallLayout: () => import_react_aria_components25.WaterfallLayout,
|
|
85
99
|
_Button: () => _Button,
|
|
86
100
|
_ButtonLink: () => _ButtonLink,
|
|
87
101
|
button: () => button,
|
|
@@ -751,6 +765,21 @@ function SelectListBoxItem({ className, ...props }) {
|
|
|
751
765
|
}
|
|
752
766
|
);
|
|
753
767
|
}
|
|
768
|
+
function SelectVirtualizer(props) {
|
|
769
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
770
|
+
import_react_aria_components11.Virtualizer,
|
|
771
|
+
{
|
|
772
|
+
layout: import_react_aria_components11.ListLayout,
|
|
773
|
+
layoutOptions: {
|
|
774
|
+
padding: 0,
|
|
775
|
+
gap: 0,
|
|
776
|
+
rowHeight: 31,
|
|
777
|
+
headingHeight: 35
|
|
778
|
+
},
|
|
779
|
+
...props
|
|
780
|
+
}
|
|
781
|
+
);
|
|
782
|
+
}
|
|
754
783
|
|
|
755
784
|
// src/components/slider/slider.tsx
|
|
756
785
|
var import_cva12 = require("cva");
|
|
@@ -884,7 +913,7 @@ function SliderOutput({
|
|
|
884
913
|
}
|
|
885
914
|
|
|
886
915
|
// src/components/sonner/sonner.tsx
|
|
887
|
-
var
|
|
916
|
+
var import_react4 = require("react");
|
|
888
917
|
var import_sonner = require("sonner");
|
|
889
918
|
|
|
890
919
|
// src/components/spinner/spinner.tsx
|
|
@@ -953,16 +982,8 @@ function Heading({
|
|
|
953
982
|
|
|
954
983
|
// src/components/typography/text.tsx
|
|
955
984
|
var import_cva15 = require("cva");
|
|
956
|
-
var import_react4 = require("react");
|
|
957
985
|
var import_react_aria_components14 = require("react-aria-components");
|
|
958
|
-
var
|
|
959
|
-
sm: "p",
|
|
960
|
-
base: "p",
|
|
961
|
-
md: "p",
|
|
962
|
-
lg: "p",
|
|
963
|
-
largeNumber: "span",
|
|
964
|
-
stat: "span"
|
|
965
|
-
};
|
|
986
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
966
987
|
var text = (0, import_cva15.cva)({
|
|
967
988
|
base: text_default.text,
|
|
968
989
|
variants: {
|
|
@@ -983,17 +1004,12 @@ var text = (0, import_cva15.cva)({
|
|
|
983
1004
|
}
|
|
984
1005
|
});
|
|
985
1006
|
function Text({
|
|
986
|
-
as = "p",
|
|
987
1007
|
preset = "base",
|
|
988
1008
|
color = "grey100",
|
|
989
1009
|
className,
|
|
990
1010
|
...rest
|
|
991
1011
|
}) {
|
|
992
|
-
|
|
993
|
-
return (0, import_react4.createElement)(elementType, {
|
|
994
|
-
...rest,
|
|
995
|
-
className: text({ preset, color, className })
|
|
996
|
-
});
|
|
1012
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_aria_components14.Text, { className: text({ preset, color, className }), ...rest });
|
|
997
1013
|
}
|
|
998
1014
|
function Label2({
|
|
999
1015
|
preset = "sm",
|
|
@@ -1001,10 +1017,7 @@ function Label2({
|
|
|
1001
1017
|
className,
|
|
1002
1018
|
...rest
|
|
1003
1019
|
}) {
|
|
1004
|
-
return (0,
|
|
1005
|
-
...rest,
|
|
1006
|
-
className: text({ preset, color, className })
|
|
1007
|
-
});
|
|
1020
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_aria_components14.Label, { className: text({ preset, color, className }), ...rest });
|
|
1008
1021
|
}
|
|
1009
1022
|
|
|
1010
1023
|
// src/components/sonner/sonner-error.svg
|
|
@@ -1023,14 +1036,14 @@ var sonner_warning_default = "data:image/svg+xml,%3Csvg%20width%3D%2220%22%20hei
|
|
|
1023
1036
|
var sonner_default = { "toast": "toast_4d9ce", "default": "default_4d9ce", "title": "title_4d9ce", "content": "content_4d9ce", "icon": "icon_4d9ce", "actions": "actions_4d9ce", "button": "button_4d9ce", "closeButton": "closeButton_4d9ce", "loader": "loader_4d9ce" };
|
|
1024
1037
|
|
|
1025
1038
|
// src/components/sonner/sonner.tsx
|
|
1026
|
-
var
|
|
1039
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1027
1040
|
var sonner = import_sonner.toast;
|
|
1028
1041
|
function Sonner(props) {
|
|
1029
|
-
return /* @__PURE__ */ (0,
|
|
1042
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1030
1043
|
import_sonner.Toaster,
|
|
1031
1044
|
{
|
|
1032
1045
|
...props,
|
|
1033
|
-
toastOptions: (0,
|
|
1046
|
+
toastOptions: (0, import_react4.useMemo)(
|
|
1034
1047
|
() => ({
|
|
1035
1048
|
...props.toastOptions,
|
|
1036
1049
|
unstyled: true,
|
|
@@ -1070,11 +1083,11 @@ function Sonner(props) {
|
|
|
1070
1083
|
[props.toastOptions]
|
|
1071
1084
|
),
|
|
1072
1085
|
icons: {
|
|
1073
|
-
loading: /* @__PURE__ */ (0,
|
|
1074
|
-
success: /* @__PURE__ */ (0,
|
|
1075
|
-
error: /* @__PURE__ */ (0,
|
|
1076
|
-
warning: /* @__PURE__ */ (0,
|
|
1077
|
-
info: /* @__PURE__ */ (0,
|
|
1086
|
+
loading: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Spinner, {}),
|
|
1087
|
+
success: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("img", { src: sonner_success_default, alt: "" }),
|
|
1088
|
+
error: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("img", { src: sonner_error_default, alt: "" }),
|
|
1089
|
+
warning: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("img", { src: sonner_warning_default, alt: "" }),
|
|
1090
|
+
info: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("img", { src: sonner_info_default, alt: "" })
|
|
1078
1091
|
}
|
|
1079
1092
|
}
|
|
1080
1093
|
);
|
|
@@ -1088,14 +1101,14 @@ var import_react_aria_components15 = require("react-aria-components");
|
|
|
1088
1101
|
var switch_default = { "switch": "switch_cfb98", "track": "track_cfb98", "knob": "knob_cfb98" };
|
|
1089
1102
|
|
|
1090
1103
|
// src/components/switch.tsx
|
|
1091
|
-
var
|
|
1104
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1092
1105
|
function Switch({
|
|
1093
1106
|
className,
|
|
1094
1107
|
placeholder,
|
|
1095
1108
|
children,
|
|
1096
1109
|
...props
|
|
1097
1110
|
}) {
|
|
1098
|
-
return /* @__PURE__ */ (0,
|
|
1111
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1099
1112
|
import_react_aria_components15.Switch,
|
|
1100
1113
|
{
|
|
1101
1114
|
...props,
|
|
@@ -1109,8 +1122,8 @@ function Switch({
|
|
|
1109
1122
|
className2
|
|
1110
1123
|
)
|
|
1111
1124
|
),
|
|
1112
|
-
children: (values) => /* @__PURE__ */ (0,
|
|
1113
|
-
/* @__PURE__ */ (0,
|
|
1125
|
+
children: (values) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
|
|
1126
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: switch_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: switch_default.knob }) }),
|
|
1114
1127
|
typeof children === "function" ? children(values) : children
|
|
1115
1128
|
] })
|
|
1116
1129
|
}
|
|
@@ -1125,13 +1138,13 @@ var import_react_aria_components16 = require("react-aria-components");
|
|
|
1125
1138
|
var tabs_default = { "list": "list_c42a1", "tab": "tab_c42a1", "indicator": "indicator_c42a1" };
|
|
1126
1139
|
|
|
1127
1140
|
// src/components/tabs.tsx
|
|
1128
|
-
var
|
|
1141
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1129
1142
|
var Tabs = import_react_aria_components16.Tabs;
|
|
1130
1143
|
function TabList({
|
|
1131
1144
|
className,
|
|
1132
1145
|
...rest
|
|
1133
1146
|
}) {
|
|
1134
|
-
return /* @__PURE__ */ (0,
|
|
1147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1135
1148
|
import_react_aria_components16.TabList,
|
|
1136
1149
|
{
|
|
1137
1150
|
...rest,
|
|
@@ -1143,7 +1156,7 @@ function TabList({
|
|
|
1143
1156
|
);
|
|
1144
1157
|
}
|
|
1145
1158
|
function Tab({ children, className, ...rest }) {
|
|
1146
|
-
return /* @__PURE__ */ (0,
|
|
1159
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1147
1160
|
import_react_aria_components16.Tab,
|
|
1148
1161
|
{
|
|
1149
1162
|
...rest,
|
|
@@ -1151,15 +1164,15 @@ function Tab({ children, className, ...rest }) {
|
|
|
1151
1164
|
className,
|
|
1152
1165
|
(className2) => (0, import_cva17.cx)(tabs_default.tab, className2)
|
|
1153
1166
|
),
|
|
1154
|
-
children: (values) => /* @__PURE__ */ (0,
|
|
1167
|
+
children: (values) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
1155
1168
|
typeof children === "function" ? children(values) : children,
|
|
1156
|
-
values.isSelected && /* @__PURE__ */ (0,
|
|
1169
|
+
values.isSelected && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: tabs_default.indicator })
|
|
1157
1170
|
] })
|
|
1158
1171
|
}
|
|
1159
1172
|
);
|
|
1160
1173
|
}
|
|
1161
1174
|
function TabPanel({ ...rest }) {
|
|
1162
|
-
return /* @__PURE__ */ (0,
|
|
1175
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components16.TabPanel, { ...rest });
|
|
1163
1176
|
}
|
|
1164
1177
|
|
|
1165
1178
|
// src/components/text-area.tsx
|
|
@@ -1173,7 +1186,7 @@ var import_cva18 = require("cva");
|
|
|
1173
1186
|
var text_field_default = { "textField": "textField_32558", "small": "small_32558", "medium": "medium_32558", "large": "large_32558", "textArea": "textArea_32558" };
|
|
1174
1187
|
|
|
1175
1188
|
// src/components/text-field.tsx
|
|
1176
|
-
var
|
|
1189
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1177
1190
|
var textField = (0, import_cva18.cva)({
|
|
1178
1191
|
base: text_field_default.textField,
|
|
1179
1192
|
variants: {
|
|
@@ -1192,9 +1205,9 @@ function TextField({
|
|
|
1192
1205
|
size = "medium",
|
|
1193
1206
|
...props
|
|
1194
1207
|
}) {
|
|
1195
|
-
return /* @__PURE__ */ (0,
|
|
1208
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components17.TextField, { ...props, children: (values) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
|
|
1196
1209
|
typeof children === "function" ? children(values) : children,
|
|
1197
|
-
/* @__PURE__ */ (0,
|
|
1210
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1198
1211
|
import_react_aria_components17.Input,
|
|
1199
1212
|
{
|
|
1200
1213
|
type: "text",
|
|
@@ -1213,15 +1226,15 @@ function TextField({
|
|
|
1213
1226
|
}
|
|
1214
1227
|
|
|
1215
1228
|
// src/components/text-area.tsx
|
|
1216
|
-
var
|
|
1229
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1217
1230
|
function TextArea({
|
|
1218
1231
|
textAreaProps = {},
|
|
1219
1232
|
children,
|
|
1220
1233
|
...props
|
|
1221
1234
|
}) {
|
|
1222
|
-
return /* @__PURE__ */ (0,
|
|
1235
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components18.TextField, { ...props, children: (values) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
|
|
1223
1236
|
typeof children === "function" ? children(values) : children,
|
|
1224
|
-
/* @__PURE__ */ (0,
|
|
1237
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1225
1238
|
import_react_aria_components18.TextArea,
|
|
1226
1239
|
{
|
|
1227
1240
|
...textAreaProps,
|
|
@@ -1241,7 +1254,7 @@ function TextArea({
|
|
|
1241
1254
|
// src/components/toggle-button.tsx
|
|
1242
1255
|
var import_cva19 = require("cva");
|
|
1243
1256
|
var import_react_aria_components19 = require("react-aria-components");
|
|
1244
|
-
var
|
|
1257
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1245
1258
|
var button2 = (0, import_cva19.cva)({
|
|
1246
1259
|
base: button_default.button,
|
|
1247
1260
|
variants: {
|
|
@@ -1274,7 +1287,7 @@ function ToggleButton({
|
|
|
1274
1287
|
thin = preset === "dimmed",
|
|
1275
1288
|
...props
|
|
1276
1289
|
}) {
|
|
1277
|
-
return /* @__PURE__ */ (0,
|
|
1290
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1278
1291
|
import_react_aria_components19.ToggleButton,
|
|
1279
1292
|
{
|
|
1280
1293
|
...props,
|
|
@@ -1302,7 +1315,7 @@ var import_react_aria_components20 = require("react-aria-components");
|
|
|
1302
1315
|
var popover_default = { "popover": "popover_f1fe1", "top": "top_f1fe1", "bottom": "bottom_f1fe1", "left": "left_f1fe1", "right": "right_f1fe1", "arrow": "arrow_f1fe1", "outer": "outer_f1fe1", "inner": "inner_f1fe1" };
|
|
1303
1316
|
|
|
1304
1317
|
// src/components/popover.tsx
|
|
1305
|
-
var
|
|
1318
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1306
1319
|
var popover = (0, import_cva20.cva)({
|
|
1307
1320
|
base: popover_default.popover,
|
|
1308
1321
|
variants: {
|
|
@@ -1328,7 +1341,7 @@ var arrow = (0, import_cva20.cva)({
|
|
|
1328
1341
|
}
|
|
1329
1342
|
});
|
|
1330
1343
|
function Popover({ children, className, ...props }) {
|
|
1331
|
-
return /* @__PURE__ */ (0,
|
|
1344
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1332
1345
|
import_react_aria_components20.Popover,
|
|
1333
1346
|
{
|
|
1334
1347
|
...props,
|
|
@@ -1340,8 +1353,8 @@ function Popover({ children, className, ...props }) {
|
|
|
1340
1353
|
placement: values.placement ?? void 0
|
|
1341
1354
|
})
|
|
1342
1355
|
),
|
|
1343
|
-
children: (values) => /* @__PURE__ */ (0,
|
|
1344
|
-
/* @__PURE__ */ (0,
|
|
1356
|
+
children: (values) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
1357
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_aria_components20.OverlayArrow, { children: (values2) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
1345
1358
|
"svg",
|
|
1346
1359
|
{
|
|
1347
1360
|
viewBox: "0 0 12 6",
|
|
@@ -1353,36 +1366,36 @@ function Popover({ children, className, ...props }) {
|
|
|
1353
1366
|
height: 10,
|
|
1354
1367
|
"aria-hidden": "true",
|
|
1355
1368
|
children: [
|
|
1356
|
-
/* @__PURE__ */ (0,
|
|
1357
|
-
/* @__PURE__ */ (0,
|
|
1369
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M0 0,L6 6,L12 0", className: popover_default.outer }),
|
|
1370
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M2 0 6 4 10 0", className: popover_default.inner })
|
|
1358
1371
|
]
|
|
1359
1372
|
}
|
|
1360
1373
|
) }) }),
|
|
1361
|
-
/* @__PURE__ */ (0,
|
|
1374
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_aria_components20.Dialog, { children: typeof children === "function" ? children(values) : children })
|
|
1362
1375
|
] })
|
|
1363
1376
|
}
|
|
1364
1377
|
);
|
|
1365
1378
|
}
|
|
1366
1379
|
|
|
1367
|
-
// src/components/menu.tsx
|
|
1380
|
+
// src/components/menu/menu.tsx
|
|
1368
1381
|
var import_cva21 = require("cva");
|
|
1369
1382
|
var import_react_aria_components21 = require("react-aria-components");
|
|
1370
1383
|
|
|
1371
|
-
// src/components/menu.module.css
|
|
1372
|
-
var menu_default = { "menu": "
|
|
1384
|
+
// src/components/menu/menu.module.css
|
|
1385
|
+
var menu_default = { "menu": "menu_c1735", "item": "item_c1735", "popover": "popover_c1735", "section": "section_c1735", "header": "header_c1735", "separator": "separator_c1735" };
|
|
1373
1386
|
|
|
1374
|
-
// src/components/menu.tsx
|
|
1375
|
-
var
|
|
1387
|
+
// src/components/menu/menu.tsx
|
|
1388
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1376
1389
|
var MenuTrigger = import_react_aria_components21.MenuTrigger;
|
|
1377
1390
|
var SubmenuTrigger = import_react_aria_components21.SubmenuTrigger;
|
|
1378
1391
|
function Menu({ className, ...props }) {
|
|
1379
|
-
return /* @__PURE__ */ (0,
|
|
1392
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_aria_components21.Menu, { ...props, className: (0, import_cva21.cx)(menu_default.menu, className) });
|
|
1380
1393
|
}
|
|
1381
1394
|
function MenuItem({
|
|
1382
1395
|
className,
|
|
1383
1396
|
...props
|
|
1384
1397
|
}) {
|
|
1385
|
-
return /* @__PURE__ */ (0,
|
|
1398
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1386
1399
|
import_react_aria_components21.MenuItem,
|
|
1387
1400
|
{
|
|
1388
1401
|
...props,
|
|
@@ -1394,7 +1407,7 @@ function MenuItem({
|
|
|
1394
1407
|
);
|
|
1395
1408
|
}
|
|
1396
1409
|
function MenuPopover({ className, ...props }) {
|
|
1397
|
-
return /* @__PURE__ */ (0,
|
|
1410
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1398
1411
|
import_react_aria_components21.Popover,
|
|
1399
1412
|
{
|
|
1400
1413
|
...props,
|
|
@@ -1405,10 +1418,52 @@ function MenuPopover({ className, ...props }) {
|
|
|
1405
1418
|
}
|
|
1406
1419
|
);
|
|
1407
1420
|
}
|
|
1421
|
+
function MenuSection({
|
|
1422
|
+
className,
|
|
1423
|
+
...props
|
|
1424
|
+
}) {
|
|
1425
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_aria_components21.MenuSection, { ...props, className: (0, import_cva21.cx)(className, menu_default.section) });
|
|
1426
|
+
}
|
|
1427
|
+
function MenuHeader({
|
|
1428
|
+
className,
|
|
1429
|
+
...props
|
|
1430
|
+
}) {
|
|
1431
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1432
|
+
import_react_aria_components21.Header,
|
|
1433
|
+
{
|
|
1434
|
+
...props,
|
|
1435
|
+
className: heading({
|
|
1436
|
+
className: (0, import_cva21.cx)(className, menu_default.header),
|
|
1437
|
+
color: "gold100",
|
|
1438
|
+
preset: "h5"
|
|
1439
|
+
})
|
|
1440
|
+
}
|
|
1441
|
+
);
|
|
1442
|
+
}
|
|
1443
|
+
function MenuSeparator({ className, ...props }) {
|
|
1444
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_aria_components21.Separator, { ...props, className: (0, import_cva21.cx)(className, menu_default.separator) });
|
|
1445
|
+
}
|
|
1446
|
+
function MenuVirtualizer(props) {
|
|
1447
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1448
|
+
import_react_aria_components21.Virtualizer,
|
|
1449
|
+
{
|
|
1450
|
+
layout: import_react_aria_components21.ListLayout,
|
|
1451
|
+
layoutOptions: {
|
|
1452
|
+
padding: 0,
|
|
1453
|
+
gap: 0,
|
|
1454
|
+
rowHeight: 30,
|
|
1455
|
+
headingHeight: 35
|
|
1456
|
+
// estimatedRowHeight: 30,
|
|
1457
|
+
// estimatedHeadingHeight: 35,
|
|
1458
|
+
},
|
|
1459
|
+
...props
|
|
1460
|
+
}
|
|
1461
|
+
);
|
|
1462
|
+
}
|
|
1408
1463
|
|
|
1409
1464
|
// src/components/select/multiple-select.tsx
|
|
1410
1465
|
var import_cva22 = require("cva");
|
|
1411
|
-
var
|
|
1466
|
+
var import_react5 = __toESM(require("react"));
|
|
1412
1467
|
var import_react_aria = require("react-aria");
|
|
1413
1468
|
var import_react_aria_components22 = require("react-aria-components");
|
|
1414
1469
|
|
|
@@ -1419,7 +1474,7 @@ var multiple_select_default = { "multiSelect": "multiSelect_e6fde", "focusWithin
|
|
|
1419
1474
|
var select_closed_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAAAiUlEQVR42mL8//8/A6mAiYEMQJYmFnSBk6vzYcwmIP4LxI0gjnnoRNyaoKAViKuQ+I14bQKCTiAuA+I6IGYG4gZ0jSw4nFwB1QwDjIRsKkbjNwxckFNNUw8QlyLx66EYb0D8A+IuIGaDyjcQE0+gOPoDxC1I8dNASBMDNDX8hWKMIGcc3FkDIMAA1n8bpHnZDOAAAAAASUVORK5CYII=";
|
|
1420
1475
|
|
|
1421
1476
|
// src/components/select/multiple-select.tsx
|
|
1422
|
-
var
|
|
1477
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1423
1478
|
var multiSelect = (0, import_cva22.cva)({
|
|
1424
1479
|
base: multiple_select_default.multiSelect,
|
|
1425
1480
|
variants: {
|
|
@@ -1450,15 +1505,15 @@ function MultipleSelect({
|
|
|
1450
1505
|
size = "medium",
|
|
1451
1506
|
...props
|
|
1452
1507
|
}) {
|
|
1453
|
-
const tagGroupIdentifier =
|
|
1454
|
-
const triggerRef =
|
|
1455
|
-
const [width, setWidth] =
|
|
1508
|
+
const tagGroupIdentifier = import_react5.default.useId();
|
|
1509
|
+
const triggerRef = import_react5.default.useRef(null);
|
|
1510
|
+
const [width, setWidth] = import_react5.default.useState(0);
|
|
1456
1511
|
const selectedKeys = selectedItems.map((i) => i.id);
|
|
1457
|
-
const [fieldState, setFieldState] =
|
|
1512
|
+
const [fieldState, setFieldState] = import_react5.default.useState({
|
|
1458
1513
|
selectedKey: null,
|
|
1459
1514
|
inputValue: ""
|
|
1460
1515
|
});
|
|
1461
|
-
const accessibleItems = (0,
|
|
1516
|
+
const accessibleItems = (0, import_react5.useMemo)(
|
|
1462
1517
|
() => items.filter(
|
|
1463
1518
|
(item2) => !selectedItems.some((selected) => selected.id === item2.id)
|
|
1464
1519
|
).filter(
|
|
@@ -1466,7 +1521,7 @@ function MultipleSelect({
|
|
|
1466
1521
|
),
|
|
1467
1522
|
[selectedItems, fieldState.inputValue, items]
|
|
1468
1523
|
);
|
|
1469
|
-
const onRemove =
|
|
1524
|
+
const onRemove = import_react5.default.useCallback(
|
|
1470
1525
|
(keys) => {
|
|
1471
1526
|
const key = keys.values().next().value;
|
|
1472
1527
|
onChange?.(selectedItems.filter((i) => i.id !== key));
|
|
@@ -1494,7 +1549,7 @@ function MultipleSelect({
|
|
|
1494
1549
|
selectedKey: v === "" ? null : prevState.selectedKey
|
|
1495
1550
|
}));
|
|
1496
1551
|
};
|
|
1497
|
-
const popLast =
|
|
1552
|
+
const popLast = import_react5.default.useCallback(() => {
|
|
1498
1553
|
if (selectedItems.length > 0) {
|
|
1499
1554
|
onChange?.(selectedItems.slice(0, -1));
|
|
1500
1555
|
}
|
|
@@ -1503,7 +1558,7 @@ function MultipleSelect({
|
|
|
1503
1558
|
selectedKey: null
|
|
1504
1559
|
});
|
|
1505
1560
|
}, [selectedItems, onChange]);
|
|
1506
|
-
const onKeyDownCapture =
|
|
1561
|
+
const onKeyDownCapture = import_react5.default.useCallback(
|
|
1507
1562
|
(e) => {
|
|
1508
1563
|
if (e.key === "Backspace" && fieldState.inputValue === "") {
|
|
1509
1564
|
popLast();
|
|
@@ -1511,7 +1566,7 @@ function MultipleSelect({
|
|
|
1511
1566
|
},
|
|
1512
1567
|
[popLast, fieldState.inputValue]
|
|
1513
1568
|
);
|
|
1514
|
-
|
|
1569
|
+
import_react5.default.useEffect(() => {
|
|
1515
1570
|
const trigger = triggerRef.current;
|
|
1516
1571
|
if (!trigger)
|
|
1517
1572
|
return;
|
|
@@ -1525,24 +1580,24 @@ function MultipleSelect({
|
|
|
1525
1580
|
observer.unobserve(trigger);
|
|
1526
1581
|
};
|
|
1527
1582
|
}, []);
|
|
1528
|
-
const triggerButtonRef =
|
|
1529
|
-
return /* @__PURE__ */ (0,
|
|
1583
|
+
const triggerButtonRef = import_react5.default.useRef(null);
|
|
1584
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_aria_components22.Group, { children: (groupRenderProps) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1530
1585
|
"div",
|
|
1531
1586
|
{
|
|
1532
1587
|
ref: triggerRef,
|
|
1533
1588
|
className: multiSelect({ size, ...groupRenderProps }),
|
|
1534
1589
|
children: [
|
|
1535
|
-
/* @__PURE__ */ (0,
|
|
1536
|
-
/* @__PURE__ */ (0,
|
|
1590
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: multiple_select_default.tagsAndInput, children: [
|
|
1591
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1537
1592
|
import_react_aria_components22.TagGroup,
|
|
1538
1593
|
{
|
|
1539
1594
|
"aria-label": "Selected items",
|
|
1540
1595
|
id: tagGroupIdentifier,
|
|
1541
1596
|
onRemove,
|
|
1542
|
-
children: /* @__PURE__ */ (0,
|
|
1597
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_aria_components22.TagList, { items: selectedItems, className: multiple_select_default.tagList, children: props.tag })
|
|
1543
1598
|
}
|
|
1544
1599
|
),
|
|
1545
|
-
/* @__PURE__ */ (0,
|
|
1600
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1546
1601
|
import_react_aria_components22.ComboBox,
|
|
1547
1602
|
{
|
|
1548
1603
|
...props,
|
|
@@ -1555,7 +1610,7 @@ function MultipleSelect({
|
|
|
1555
1610
|
onSelectionChange,
|
|
1556
1611
|
onInputChange,
|
|
1557
1612
|
children: [
|
|
1558
|
-
/* @__PURE__ */ (0,
|
|
1613
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1559
1614
|
import_react_aria_components22.Input,
|
|
1560
1615
|
{
|
|
1561
1616
|
className: multiple_select_default.input,
|
|
@@ -1569,7 +1624,7 @@ function MultipleSelect({
|
|
|
1569
1624
|
...props.inputProps
|
|
1570
1625
|
}
|
|
1571
1626
|
),
|
|
1572
|
-
/* @__PURE__ */ (0,
|
|
1627
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_aria.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1573
1628
|
Button2,
|
|
1574
1629
|
{
|
|
1575
1630
|
slot: "remove",
|
|
@@ -1578,21 +1633,21 @@ function MultipleSelect({
|
|
|
1578
1633
|
children: "Remove"
|
|
1579
1634
|
}
|
|
1580
1635
|
) }),
|
|
1581
|
-
/* @__PURE__ */ (0,
|
|
1636
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1582
1637
|
import_react_aria_components22.Popover,
|
|
1583
1638
|
{
|
|
1584
1639
|
className: select_default.popover,
|
|
1585
1640
|
style: { width: `${width}px` },
|
|
1586
1641
|
triggerRef,
|
|
1587
1642
|
trigger: "ComboBox",
|
|
1588
|
-
children: /* @__PURE__ */ (0,
|
|
1643
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1589
1644
|
import_react_aria_components22.ListBox,
|
|
1590
1645
|
{
|
|
1591
1646
|
className: select_default.listBox,
|
|
1592
|
-
renderEmptyState: () => renderEmptyState ? renderEmptyState(fieldState.inputValue) : /* @__PURE__ */ (0,
|
|
1647
|
+
renderEmptyState: () => renderEmptyState ? renderEmptyState(fieldState.inputValue) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text, { className: multiple_select_default.emptyText, children: fieldState.inputValue ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
|
|
1593
1648
|
"No results found for:",
|
|
1594
1649
|
" ",
|
|
1595
|
-
/* @__PURE__ */ (0,
|
|
1650
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("strong", { children: fieldState.inputValue })
|
|
1596
1651
|
] }) : "No options" }),
|
|
1597
1652
|
selectionMode: "multiple",
|
|
1598
1653
|
children
|
|
@@ -1604,13 +1659,13 @@ function MultipleSelect({
|
|
|
1604
1659
|
}
|
|
1605
1660
|
)
|
|
1606
1661
|
] }),
|
|
1607
|
-
/* @__PURE__ */ (0,
|
|
1662
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1608
1663
|
import_react_aria_components22.Button,
|
|
1609
1664
|
{
|
|
1610
1665
|
excludeFromTabOrder: true,
|
|
1611
1666
|
onPress: () => triggerButtonRef.current?.click(),
|
|
1612
1667
|
className: multiple_select_default.chevronButton,
|
|
1613
|
-
children: /* @__PURE__ */ (0,
|
|
1668
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { src: select_closed_default, alt: "" })
|
|
1614
1669
|
}
|
|
1615
1670
|
) })
|
|
1616
1671
|
]
|
|
@@ -1626,9 +1681,9 @@ var import_react_aria_components23 = require("react-aria-components");
|
|
|
1626
1681
|
var tag_default = { "tag": "tag_c7c88", "text": "text_c7c88", "remove": "remove_c7c88" };
|
|
1627
1682
|
|
|
1628
1683
|
// src/components/tag/tag.tsx
|
|
1629
|
-
var
|
|
1684
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1630
1685
|
function Tag({ children, className, ...props }) {
|
|
1631
|
-
return /* @__PURE__ */ (0,
|
|
1686
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1632
1687
|
import_react_aria_components23.Tag,
|
|
1633
1688
|
{
|
|
1634
1689
|
...props,
|
|
@@ -1636,9 +1691,9 @@ function Tag({ children, className, ...props }) {
|
|
|
1636
1691
|
className,
|
|
1637
1692
|
(className2) => (0, import_cva23.cx)(tag_default.tag, className2)
|
|
1638
1693
|
),
|
|
1639
|
-
children: (0, import_react_aria_components23.composeRenderProps)(children, (children2) => /* @__PURE__ */ (0,
|
|
1640
|
-
/* @__PURE__ */ (0,
|
|
1641
|
-
/* @__PURE__ */ (0,
|
|
1694
|
+
children: (0, import_react_aria_components23.composeRenderProps)(children, (children2) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
|
|
1695
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: tag_default.text, children: children2 }),
|
|
1696
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components23.Button, { slot: "remove", className: tag_default.remove })
|
|
1642
1697
|
] }))
|
|
1643
1698
|
}
|
|
1644
1699
|
);
|
|
@@ -1654,6 +1709,7 @@ var import_react_aria_components24 = require("react-aria-components");
|
|
|
1654
1709
|
Button,
|
|
1655
1710
|
ButtonLink,
|
|
1656
1711
|
Checkbox,
|
|
1712
|
+
Collection,
|
|
1657
1713
|
Dialog,
|
|
1658
1714
|
DialogButtons,
|
|
1659
1715
|
DialogHeading,
|
|
@@ -1663,12 +1719,20 @@ var import_react_aria_components24 = require("react-aria-components");
|
|
|
1663
1719
|
DisclosureGroup,
|
|
1664
1720
|
DisclosurePanel,
|
|
1665
1721
|
Divider,
|
|
1722
|
+
FieldError,
|
|
1723
|
+
GridLayout,
|
|
1666
1724
|
Heading,
|
|
1667
1725
|
Label,
|
|
1726
|
+
ListBoxItem,
|
|
1727
|
+
ListLayout,
|
|
1668
1728
|
Menu,
|
|
1729
|
+
MenuHeader,
|
|
1669
1730
|
MenuItem,
|
|
1670
1731
|
MenuPopover,
|
|
1732
|
+
MenuSection,
|
|
1733
|
+
MenuSeparator,
|
|
1671
1734
|
MenuTrigger,
|
|
1735
|
+
MenuVirtualizer,
|
|
1672
1736
|
Modal,
|
|
1673
1737
|
MultipleSelect,
|
|
1674
1738
|
NumberField,
|
|
@@ -1684,6 +1748,8 @@ var import_react_aria_components24 = require("react-aria-components");
|
|
|
1684
1748
|
SelectListBoxItem,
|
|
1685
1749
|
SelectPopover,
|
|
1686
1750
|
SelectValue,
|
|
1751
|
+
SelectVirtualizer,
|
|
1752
|
+
Size,
|
|
1687
1753
|
Slider,
|
|
1688
1754
|
SliderOutput,
|
|
1689
1755
|
Sonner,
|
|
@@ -1693,6 +1759,7 @@ var import_react_aria_components24 = require("react-aria-components");
|
|
|
1693
1759
|
Tab,
|
|
1694
1760
|
TabList,
|
|
1695
1761
|
TabPanel,
|
|
1762
|
+
TableLayout,
|
|
1696
1763
|
Tabs,
|
|
1697
1764
|
Tag,
|
|
1698
1765
|
Text,
|
|
@@ -1700,6 +1767,8 @@ var import_react_aria_components24 = require("react-aria-components");
|
|
|
1700
1767
|
TextField,
|
|
1701
1768
|
ToggleButton,
|
|
1702
1769
|
UnstyledPopover,
|
|
1770
|
+
Virtualizer,
|
|
1771
|
+
WaterfallLayout,
|
|
1703
1772
|
_Button,
|
|
1704
1773
|
_ButtonLink,
|
|
1705
1774
|
button,
|