@grandbazar/ui-baza 1.2.20 → 1.3.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 +6 -0
- package/dist/index.cjs +409 -83
- package/dist/index.d.ts +66 -4
- package/dist/index.js +408 -84
- package/dist/style.css +150 -11
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -59,7 +59,7 @@ const green = "_green_p5h5n_43";
|
|
|
59
59
|
const neutral$3 = "_neutral_p5h5n_48";
|
|
60
60
|
const lg$7 = "_lg_p5h5n_53";
|
|
61
61
|
const md$a = "_md_p5h5n_60";
|
|
62
|
-
const styles$
|
|
62
|
+
const styles$x = {
|
|
63
63
|
badge: badge,
|
|
64
64
|
primary: primary$4,
|
|
65
65
|
secondary: secondary$5,
|
|
@@ -75,13 +75,13 @@ const styles$w = {
|
|
|
75
75
|
};
|
|
76
76
|
|
|
77
77
|
function Badge({ children, className, size = "lg", color = "accent", mode = "primary", ...props }) {
|
|
78
|
-
return /* @__PURE__ */ jsx("div", { className: classNames(styles$
|
|
78
|
+
return /* @__PURE__ */ jsx("div", { className: classNames(styles$x.badge, styles$x[size], styles$x[color], styles$x[mode], className), ...props, children });
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
const badgeTabsItem = "_badgeTabsItem_10lit_2";
|
|
82
82
|
const primary$3 = "_primary_10lit_18";
|
|
83
83
|
const secondary$4 = "_secondary_10lit_36";
|
|
84
|
-
const styles$
|
|
84
|
+
const styles$w = {
|
|
85
85
|
badgeTabsItem: badgeTabsItem,
|
|
86
86
|
primary: primary$3,
|
|
87
87
|
secondary: secondary$4
|
|
@@ -94,7 +94,7 @@ function BadgeTabsItem({ className, children, isActive, mode = "primary", ...pro
|
|
|
94
94
|
type: "button",
|
|
95
95
|
role: "tab",
|
|
96
96
|
"aria-selected": Boolean(isActive),
|
|
97
|
-
className: classNames(styles$
|
|
97
|
+
className: classNames(styles$w.badgeTabsItem, styles$w[mode], className),
|
|
98
98
|
...props,
|
|
99
99
|
children
|
|
100
100
|
}
|
|
@@ -102,12 +102,12 @@ function BadgeTabsItem({ className, children, isActive, mode = "primary", ...pro
|
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
const badgeTabsRoot = "_badgeTabsRoot_1qkat_2";
|
|
105
|
-
const styles$
|
|
105
|
+
const styles$v = {
|
|
106
106
|
badgeTabsRoot: badgeTabsRoot
|
|
107
107
|
};
|
|
108
108
|
|
|
109
109
|
function BadgeTabsRoot({ className, children, ...props }) {
|
|
110
|
-
return /* @__PURE__ */ jsx("div", { role: "tablist", className: classNames(styles$
|
|
110
|
+
return /* @__PURE__ */ jsx("div", { role: "tablist", className: classNames(styles$v.badgeTabsRoot, className), ...props, children });
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
function BadgeTabs(props) {
|
|
@@ -953,6 +953,34 @@ function IconStop(props) {
|
|
|
953
953
|
) });
|
|
954
954
|
}
|
|
955
955
|
|
|
956
|
+
function IconStore(props) {
|
|
957
|
+
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
|
|
958
|
+
"path",
|
|
959
|
+
{
|
|
960
|
+
d: "M22 10.3334C22 10.2726 21.993 10.2119 21.98 10.1526L20.897 5.2626C20.695 4.3344 20.181 3.5037 19.44 2.9097C18.699 2.3157 17.776 1.9946 16.827 2.0001H7.173C6.224 1.9953 5.302 2.3168 4.562 2.9108C3.822 3.5047 3.308 4.335 3.107 5.2626L2.02 10.1526C2.007 10.2119 2 10.2726 2 10.3334V11.1667C1.999 11.9781 2.296 12.7616 2.833 13.3692V17.8334C2.835 18.9381 3.274 19.9971 4.055 20.7782C4.836 21.5593 5.895 21.9987 7 22.0001H17C18.105 21.9987 19.164 21.5593 19.945 20.7782C20.726 19.9971 21.165 18.9381 21.167 17.8334V13.3692C21.704 12.7616 22.001 11.9781 22 11.1667V10.3334ZM3.667 10.4242L4.733 5.6242C4.854 5.0678 5.163 4.5697 5.607 4.2134C6.051 3.8571 6.604 3.6641 7.173 3.6667H7.833V6.1667C7.833 6.3878 7.921 6.5997 8.077 6.756C8.234 6.9123 8.446 7.0001 8.667 7.0001C8.888 7.0001 9.1 6.9123 9.256 6.756C9.412 6.5997 9.5 6.3878 9.5 6.1667V3.6667H14.5V6.1667C14.5 6.3878 14.588 6.5997 14.744 6.756C14.9 6.9123 15.112 7.0001 15.333 7.0001C15.554 7.0001 15.766 6.9123 15.923 6.756C16.079 6.5997 16.167 6.3878 16.167 6.1667V3.6667H16.827C17.396 3.6641 17.949 3.8571 18.393 4.2134C18.837 4.5697 19.146 5.0678 19.267 5.6242L20.333 10.4242V11.1667C20.333 11.6088 20.158 12.0327 19.845 12.3452C19.533 12.6578 19.109 12.8334 18.667 12.8334H17.833C17.391 12.8334 16.967 12.6578 16.655 12.3452C16.342 12.0327 16.167 11.6088 16.167 11.1667C16.167 10.9457 16.079 10.7338 15.923 10.5775C15.766 10.4212 15.554 10.3334 15.333 10.3334C15.112 10.3334 14.9 10.4212 14.744 10.5775C14.588 10.7338 14.5 10.9457 14.5 11.1667C14.5 11.6088 14.324 12.0327 14.012 12.3452C13.699 12.6578 13.275 12.8334 12.833 12.8334H11.167C10.725 12.8334 10.301 12.6578 9.988 12.3452C9.676 12.0327 9.5 11.6088 9.5 11.1667C9.5 10.9457 9.412 10.7338 9.256 10.5775C9.1 10.4212 8.888 10.3334 8.667 10.3334C8.446 10.3334 8.234 10.4212 8.077 10.5775C7.921 10.7338 7.833 10.9457 7.833 11.1667C7.833 11.6088 7.658 12.0327 7.345 12.3452C7.033 12.6578 6.609 12.8334 6.167 12.8334H5.333C4.891 12.8334 4.467 12.6578 4.155 12.3452C3.842 12.0327 3.667 11.6088 3.667 11.1667V10.4242ZM17 20.3334H7C6.337 20.3334 5.701 20.07 5.232 19.6012C4.763 19.1323 4.5 18.4964 4.5 17.8334V14.3942C4.772 14.4647 5.052 14.5003 5.333 14.5001H6.167C6.64 14.5003 7.108 14.3996 7.539 14.2046C7.97 14.0095 8.354 13.7248 8.667 13.3692C8.979 13.7248 9.363 14.0095 9.795 14.2046C10.226 14.3996 10.693 14.5003 11.167 14.5001H12.833C13.307 14.5003 13.774 14.3996 14.205 14.2046C14.637 14.0095 15.021 13.7248 15.333 13.3692C15.646 13.7248 16.03 14.0095 16.461 14.2046C16.892 14.3996 17.36 14.5003 17.833 14.5001H18.667C18.948 14.5003 19.228 14.4647 19.5 14.3942V17.8334C19.5 18.4964 19.237 19.1323 18.768 19.6012C18.299 20.07 17.663 20.3334 17 20.3334Z",
|
|
961
|
+
fill: "currentColor"
|
|
962
|
+
}
|
|
963
|
+
) });
|
|
964
|
+
}
|
|
965
|
+
IconStore.Filled = function IconStoreFilled(props) {
|
|
966
|
+
return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: [
|
|
967
|
+
/* @__PURE__ */ jsx(
|
|
968
|
+
"path",
|
|
969
|
+
{
|
|
970
|
+
d: "M17.833 16.1667C16.956 16.1663 16.093 15.9347 15.333 15.495C14.574 15.9347 13.711 16.1663 12.833 16.1667H11.167C10.288 16.1655 9.425 15.9302 8.667 15.485C7.909 15.9303 7.046 16.1656 6.167 16.1667H5.333C4.455 16.1664 3.592 15.9325 2.833 15.4892V19.5C2.833 20.163 3.097 20.7989 3.566 21.2678C4.035 21.7366 4.67 22 5.333 22H18.667C19.33 22 19.966 21.7366 20.435 21.2678C20.903 20.7989 21.167 20.163 21.167 19.5V15.49C20.408 15.9327 19.545 16.1662 18.667 16.1667H17.833Z",
|
|
971
|
+
fill: "currentColor"
|
|
972
|
+
}
|
|
973
|
+
),
|
|
974
|
+
/* @__PURE__ */ jsx(
|
|
975
|
+
"path",
|
|
976
|
+
{
|
|
977
|
+
d: "M16.167 2V7H14.5V2H9.5V7H7.833V2H3.833L2.02 10.1525L2 11.1667C2 12.0507 2.351 12.8986 2.976 13.5237C3.601 14.1488 4.449 14.5 5.333 14.5H6.167C6.642 14.4985 7.111 14.3948 7.542 14.1961C7.973 13.9974 8.357 13.7083 8.667 13.3483C8.976 13.7083 9.36 13.9974 9.791 14.1961C10.223 14.3948 10.692 14.4985 11.167 14.5H12.833C13.307 14.5002 13.774 14.3995 14.205 14.2045C14.637 14.0095 15.021 13.7247 15.333 13.3692C15.646 13.7247 16.03 14.0095 16.461 14.2045C16.892 14.3995 17.36 14.5002 17.833 14.5H18.667C19.551 14.5 20.399 14.1488 21.024 13.5237C21.649 12.8986 22 12.0507 22 11.1667V10.3333L20.167 2H16.167Z",
|
|
978
|
+
fill: "currentColor"
|
|
979
|
+
}
|
|
980
|
+
)
|
|
981
|
+
] });
|
|
982
|
+
};
|
|
983
|
+
|
|
956
984
|
function IconSwitch(props) {
|
|
957
985
|
return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "none", ...props, children: [
|
|
958
986
|
/* @__PURE__ */ jsx(
|
|
@@ -1036,7 +1064,7 @@ function IconXMarkCircle(props) {
|
|
|
1036
1064
|
const breadcrumbs = "_breadcrumbs_1bfmb_2";
|
|
1037
1065
|
const breadcrumbsItem = "_breadcrumbsItem_1bfmb_8";
|
|
1038
1066
|
const defaultSeparator = "_defaultSeparator_1bfmb_14";
|
|
1039
|
-
const styles$
|
|
1067
|
+
const styles$u = {
|
|
1040
1068
|
breadcrumbs: breadcrumbs,
|
|
1041
1069
|
breadcrumbsItem: breadcrumbsItem,
|
|
1042
1070
|
defaultSeparator: defaultSeparator
|
|
@@ -1085,7 +1113,7 @@ function Slot({
|
|
|
1085
1113
|
}
|
|
1086
1114
|
|
|
1087
1115
|
const breadcrumbItem = "_breadcrumbItem_cua4v_2";
|
|
1088
|
-
const styles$
|
|
1116
|
+
const styles$t = {
|
|
1089
1117
|
breadcrumbItem: breadcrumbItem
|
|
1090
1118
|
};
|
|
1091
1119
|
|
|
@@ -1096,7 +1124,7 @@ function BreadcrumbItem({ children, className, isActive, asChild, ...props }) {
|
|
|
1096
1124
|
{
|
|
1097
1125
|
"data-active": isActive,
|
|
1098
1126
|
"data-disabled": props.disabled,
|
|
1099
|
-
className: classNames(styles$
|
|
1127
|
+
className: classNames(styles$t.breadcrumbItem, className),
|
|
1100
1128
|
...isActive && { "aria-current": "page" },
|
|
1101
1129
|
...!asChild && { type: "button" },
|
|
1102
1130
|
...props,
|
|
@@ -1108,13 +1136,13 @@ function BreadcrumbItem({ children, className, isActive, asChild, ...props }) {
|
|
|
1108
1136
|
function Breadcrumbs({
|
|
1109
1137
|
className,
|
|
1110
1138
|
children,
|
|
1111
|
-
separator = /* @__PURE__ */ jsx(IconChevron, { className: styles$
|
|
1139
|
+
separator = /* @__PURE__ */ jsx(IconChevron, { className: styles$u.defaultSeparator })
|
|
1112
1140
|
}) {
|
|
1113
1141
|
const childrenArray = Array.isArray(children) ? children : [children];
|
|
1114
1142
|
const lastIndex = childrenArray.length - 1;
|
|
1115
|
-
return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", className, children: /* @__PURE__ */ jsx("ol", { className: styles$
|
|
1116
|
-
/* @__PURE__ */ jsx("li", { className: styles$
|
|
1117
|
-
index < lastIndex && /* @__PURE__ */ jsx("li", { className: styles$
|
|
1143
|
+
return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", className, children: /* @__PURE__ */ jsx("ol", { className: styles$u.breadcrumbs, children: childrenArray.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1144
|
+
/* @__PURE__ */ jsx("li", { className: styles$u.breadcrumbsItem, children: item }),
|
|
1145
|
+
index < lastIndex && /* @__PURE__ */ jsx("li", { className: styles$u.breadcrumbsItem, "aria-hidden": "true", children: separator })
|
|
1118
1146
|
] }, index)) }) });
|
|
1119
1147
|
}
|
|
1120
1148
|
Breadcrumbs.Item = BreadcrumbItem;
|
|
@@ -1129,7 +1157,7 @@ const neutral$2 = "_neutral_1waqk_78";
|
|
|
1129
1157
|
const lg$6 = "_lg_1waqk_145";
|
|
1130
1158
|
const md$9 = "_md_1waqk_153";
|
|
1131
1159
|
const sm$4 = "_sm_1waqk_161";
|
|
1132
|
-
const styles$
|
|
1160
|
+
const styles$s = {
|
|
1133
1161
|
button: button,
|
|
1134
1162
|
accent: accent$2,
|
|
1135
1163
|
primary: primary$2,
|
|
@@ -1147,7 +1175,7 @@ const accent$1 = "_accent_o8iku_10";
|
|
|
1147
1175
|
const neutral$1 = "_neutral_o8iku_22";
|
|
1148
1176
|
const lg$5 = "_lg_o8iku_41";
|
|
1149
1177
|
const md$8 = "_md_o8iku_46";
|
|
1150
|
-
const styles$
|
|
1178
|
+
const styles$r = {
|
|
1151
1179
|
buttonFunction: buttonFunction,
|
|
1152
1180
|
accent: accent$1,
|
|
1153
1181
|
neutral: neutral$1,
|
|
@@ -1167,7 +1195,7 @@ function ButtonFunction({
|
|
|
1167
1195
|
return /* @__PURE__ */ jsx(
|
|
1168
1196
|
Component,
|
|
1169
1197
|
{
|
|
1170
|
-
className: classNames(styles$
|
|
1198
|
+
className: classNames(styles$r.buttonFunction, styles$r[color], styles$r[size], className),
|
|
1171
1199
|
...props.disabled && { "data-disabled": true },
|
|
1172
1200
|
...!asChild && { type: "button" },
|
|
1173
1201
|
...props,
|
|
@@ -1189,7 +1217,7 @@ function Button({
|
|
|
1189
1217
|
return /* @__PURE__ */ jsx(
|
|
1190
1218
|
Component,
|
|
1191
1219
|
{
|
|
1192
|
-
className: classNames(styles$
|
|
1220
|
+
className: classNames(styles$s.button, styles$s[color], styles$s[size], styles$s[mode], className),
|
|
1193
1221
|
...!asChild && { type: "button" },
|
|
1194
1222
|
...props,
|
|
1195
1223
|
children
|
|
@@ -1201,7 +1229,7 @@ Button.Function = ButtonFunction;
|
|
|
1201
1229
|
const checkboxWrapper = "_checkboxWrapper_k1shg_2";
|
|
1202
1230
|
const icon$2 = "_icon_k1shg_23";
|
|
1203
1231
|
const checkbox = "_checkbox_k1shg_2";
|
|
1204
|
-
const styles$
|
|
1232
|
+
const styles$q = {
|
|
1205
1233
|
checkboxWrapper: checkboxWrapper,
|
|
1206
1234
|
icon: icon$2,
|
|
1207
1235
|
checkbox: checkbox
|
|
@@ -1214,11 +1242,11 @@ function Checkbox({ className, label, indeterminate, ...props }) {
|
|
|
1214
1242
|
{
|
|
1215
1243
|
"data-disabled": `${Boolean(props.disabled)}`,
|
|
1216
1244
|
"data-state": dataState,
|
|
1217
|
-
className: classNames(styles$
|
|
1245
|
+
className: classNames(styles$q.checkboxWrapper, className),
|
|
1218
1246
|
children: [
|
|
1219
|
-
dataState === "checked" && /* @__PURE__ */ jsx(IconCheck, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$
|
|
1220
|
-
dataState === "indeterminate" && /* @__PURE__ */ jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$
|
|
1221
|
-
/* @__PURE__ */ jsx("input", { "data-state": dataState, type: "checkbox", className: styles$
|
|
1247
|
+
dataState === "checked" && /* @__PURE__ */ jsx(IconCheck, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$q.icon }),
|
|
1248
|
+
dataState === "indeterminate" && /* @__PURE__ */ jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$q.icon }),
|
|
1249
|
+
/* @__PURE__ */ jsx("input", { "data-state": dataState, type: "checkbox", className: styles$q.checkbox, ...props }),
|
|
1222
1250
|
label
|
|
1223
1251
|
]
|
|
1224
1252
|
}
|
|
@@ -1226,7 +1254,7 @@ function Checkbox({ className, label, indeterminate, ...props }) {
|
|
|
1226
1254
|
}
|
|
1227
1255
|
|
|
1228
1256
|
const chip = "_chip_dj4kw_2";
|
|
1229
|
-
const styles$
|
|
1257
|
+
const styles$p = {
|
|
1230
1258
|
chip: chip
|
|
1231
1259
|
};
|
|
1232
1260
|
|
|
@@ -1234,7 +1262,7 @@ function Chip({ isSelected, children, className, disabled, ...props }) {
|
|
|
1234
1262
|
return /* @__PURE__ */ jsx(
|
|
1235
1263
|
"div",
|
|
1236
1264
|
{
|
|
1237
|
-
className: classNames(styles$
|
|
1265
|
+
className: classNames(styles$p.chip, className),
|
|
1238
1266
|
"data-selected": isSelected,
|
|
1239
1267
|
"data-disabled": disabled,
|
|
1240
1268
|
"aria-disabled": disabled,
|
|
@@ -1252,7 +1280,7 @@ const accent = "_accent_ww0fb_37";
|
|
|
1252
1280
|
const neutral = "_neutral_ww0fb_42";
|
|
1253
1281
|
const secondary$2 = "_secondary_ww0fb_47";
|
|
1254
1282
|
const white = "_white_ww0fb_52";
|
|
1255
|
-
const styles$
|
|
1283
|
+
const styles$o = {
|
|
1256
1284
|
root: root$1,
|
|
1257
1285
|
lg: lg$4,
|
|
1258
1286
|
md: md$7,
|
|
@@ -1264,7 +1292,7 @@ const styles$n = {
|
|
|
1264
1292
|
};
|
|
1265
1293
|
|
|
1266
1294
|
function Counter({ className, size = "lg", color = "red", ...props }) {
|
|
1267
|
-
return /* @__PURE__ */ jsx("div", { className: classNames(styles$
|
|
1295
|
+
return /* @__PURE__ */ jsx("div", { className: classNames(styles$o.root, styles$o[size], styles$o[color], className), ...props });
|
|
1268
1296
|
}
|
|
1269
1297
|
|
|
1270
1298
|
const LOCALE_FIRST_DAY_OF_WEEK = {
|
|
@@ -1274,7 +1302,7 @@ const LOCALE_FIRST_DAY_OF_WEEK = {
|
|
|
1274
1302
|
|
|
1275
1303
|
const datePickerCellWrapper = "_datePickerCellWrapper_np1gx_2";
|
|
1276
1304
|
const datePickerCell = "_datePickerCell_np1gx_2";
|
|
1277
|
-
const styles$
|
|
1305
|
+
const styles$n = {
|
|
1278
1306
|
datePickerCellWrapper: datePickerCellWrapper,
|
|
1279
1307
|
datePickerCell: datePickerCell,
|
|
1280
1308
|
"radius-none": "_radius-none_np1gx_83",
|
|
@@ -1284,10 +1312,10 @@ const styles$m = {
|
|
|
1284
1312
|
};
|
|
1285
1313
|
|
|
1286
1314
|
function DatePickerCell({ children, className, state, isCurrent, radius = "both", ...props }) {
|
|
1287
|
-
return /* @__PURE__ */ jsx("div", { className: classNames(styles$
|
|
1315
|
+
return /* @__PURE__ */ jsx("div", { className: classNames(styles$n.datePickerCellWrapper, styles$n[`radius-${radius}`]), "data-state": state, children: /* @__PURE__ */ jsx(
|
|
1288
1316
|
"button",
|
|
1289
1317
|
{
|
|
1290
|
-
className: classNames(styles$
|
|
1318
|
+
className: classNames(styles$n.datePickerCell, styles$n[`radius-${radius}`], className),
|
|
1291
1319
|
type: "button",
|
|
1292
1320
|
role: "gridcell",
|
|
1293
1321
|
"aria-selected": state === "selected",
|
|
@@ -1357,7 +1385,7 @@ function normalizeDateRange(firstDate, secondDate) {
|
|
|
1357
1385
|
const datePickerField = "_datePickerField_1qk8s_2";
|
|
1358
1386
|
const datePickerFieldCalendar = "_datePickerFieldCalendar_1qk8s_8";
|
|
1359
1387
|
const datePickerFieldWeek = "_datePickerFieldWeek_1qk8s_14";
|
|
1360
|
-
const styles$
|
|
1388
|
+
const styles$m = {
|
|
1361
1389
|
datePickerField: datePickerField,
|
|
1362
1390
|
datePickerFieldCalendar: datePickerFieldCalendar,
|
|
1363
1391
|
datePickerFieldWeek: datePickerFieldWeek
|
|
@@ -1372,9 +1400,9 @@ function DatePickerField({
|
|
|
1372
1400
|
firstDayOfWeek = LOCALE_FIRST_DAY_OF_WEEK.ru
|
|
1373
1401
|
}) {
|
|
1374
1402
|
const weeks = useMemo(() => getCalendarGrid(month, year, firstDayOfWeek), [month, year, firstDayOfWeek]);
|
|
1375
|
-
return /* @__PURE__ */ jsxs("div", { className: classNames(styles$
|
|
1403
|
+
return /* @__PURE__ */ jsxs("div", { className: classNames(styles$m.datePickerField, className), role: "grid", children: [
|
|
1376
1404
|
renderWeekdays?.(),
|
|
1377
|
-
/* @__PURE__ */ jsx("div", { className: styles$
|
|
1405
|
+
/* @__PURE__ */ jsx("div", { className: styles$m.datePickerFieldCalendar, role: "rowgroup", children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("div", { className: styles$m.datePickerFieldWeek, role: "row", "aria-rowindex": weekIndex + 1, children: week.map((day, dayIndex) => /* @__PURE__ */ jsx(Slot, { role: "gridcell", "aria-colindex": dayIndex + 1, children: children(day) }, `${day.year}-${day.month}-${day.date}`)) }, weekIndex)) })
|
|
1378
1406
|
] });
|
|
1379
1407
|
}
|
|
1380
1408
|
|
|
@@ -1415,13 +1443,13 @@ const I18N_MONTH_LABELS = {
|
|
|
1415
1443
|
|
|
1416
1444
|
const datePickerWeekdays = "_datePickerWeekdays_p8tsm_2";
|
|
1417
1445
|
const datePickerWeekday = "_datePickerWeekday_p8tsm_2";
|
|
1418
|
-
const styles$
|
|
1446
|
+
const styles$l = {
|
|
1419
1447
|
datePickerWeekdays: datePickerWeekdays,
|
|
1420
1448
|
datePickerWeekday: datePickerWeekday
|
|
1421
1449
|
};
|
|
1422
1450
|
|
|
1423
1451
|
function DatePickerWeekDays({ className, locale = "ru" }) {
|
|
1424
|
-
return /* @__PURE__ */ jsx("div", { className: classNames(styles$
|
|
1452
|
+
return /* @__PURE__ */ jsx("div", { className: classNames(styles$l.datePickerWeekdays, className), role: "row", children: I18N_WEEKDAY_LABELS[locale].map((label) => /* @__PURE__ */ jsx("div", { className: styles$l.datePickerWeekday, role: "columnheader", children: label }, label)) });
|
|
1425
1453
|
}
|
|
1426
1454
|
|
|
1427
1455
|
function DatePicker() {
|
|
@@ -1657,21 +1685,21 @@ const DROPDOWN_PORTAL_SIDE_CONFIG = {
|
|
|
1657
1685
|
};
|
|
1658
1686
|
|
|
1659
1687
|
const dropdownContent = "_dropdownContent_12tkb_2";
|
|
1660
|
-
const styles$
|
|
1688
|
+
const styles$k = {
|
|
1661
1689
|
dropdownContent: dropdownContent
|
|
1662
1690
|
};
|
|
1663
1691
|
|
|
1664
1692
|
function DropdownContent({ className, children, ...props }) {
|
|
1665
|
-
return /* @__PURE__ */ jsx("div", { className: classNames(styles$
|
|
1693
|
+
return /* @__PURE__ */ jsx("div", { className: classNames(styles$k.dropdownContent, className), ...props, children });
|
|
1666
1694
|
}
|
|
1667
1695
|
|
|
1668
1696
|
const dropdownItem = "_dropdownItem_msc4i_2";
|
|
1669
|
-
const styles$
|
|
1697
|
+
const styles$j = {
|
|
1670
1698
|
dropdownItem: dropdownItem
|
|
1671
1699
|
};
|
|
1672
1700
|
|
|
1673
1701
|
function DropdownItem({ className, children, disabled, ...props }) {
|
|
1674
|
-
return /* @__PURE__ */ jsx("div", { className: classNames(styles$
|
|
1702
|
+
return /* @__PURE__ */ jsx("div", { className: classNames(styles$j.dropdownItem, className), role: "menuitem", "data-disabled": disabled, ...props, children });
|
|
1675
1703
|
}
|
|
1676
1704
|
|
|
1677
1705
|
const CLICK_OUTSIDE_IGNORE_DATA_NAME = "data-clickoutside-ignore";
|
|
@@ -2099,7 +2127,7 @@ function useTriggerHandlersByEventTrigger() {
|
|
|
2099
2127
|
}
|
|
2100
2128
|
|
|
2101
2129
|
const dropdownPortal = "_dropdownPortal_p3tdk_2";
|
|
2102
|
-
const styles$
|
|
2130
|
+
const styles$i = {
|
|
2103
2131
|
dropdownPortal: dropdownPortal
|
|
2104
2132
|
};
|
|
2105
2133
|
|
|
@@ -2139,7 +2167,7 @@ function DropdownPortal({
|
|
|
2139
2167
|
...style
|
|
2140
2168
|
},
|
|
2141
2169
|
ref: portalRef,
|
|
2142
|
-
className: classNames(styles$
|
|
2170
|
+
className: classNames(styles$i.dropdownPortal, className),
|
|
2143
2171
|
...handlersByTrigger[triggerEvent],
|
|
2144
2172
|
...isNested && { [CLICK_OUTSIDE_IGNORE_DATA_NAME]: "true" },
|
|
2145
2173
|
children
|
|
@@ -2192,7 +2220,7 @@ const BOUNDARY_PAGES = 2;
|
|
|
2192
2220
|
const paginationItem = "_paginationItem_1ll6p_2";
|
|
2193
2221
|
const md$6 = "_md_1ll6p_46";
|
|
2194
2222
|
const sm$3 = "_sm_1ll6p_60";
|
|
2195
|
-
const styles$
|
|
2223
|
+
const styles$h = {
|
|
2196
2224
|
paginationItem: paginationItem,
|
|
2197
2225
|
md: md$6,
|
|
2198
2226
|
sm: sm$3
|
|
@@ -2204,7 +2232,7 @@ function PaginationItem({ className, children, size = "md", isCurrent, ...props
|
|
|
2204
2232
|
{
|
|
2205
2233
|
type: "button",
|
|
2206
2234
|
...isCurrent && { "aria-current": "page" },
|
|
2207
|
-
className: classNames(styles$
|
|
2235
|
+
className: classNames(styles$h.paginationItem, styles$h[size], className),
|
|
2208
2236
|
...props,
|
|
2209
2237
|
children
|
|
2210
2238
|
}
|
|
@@ -2241,7 +2269,7 @@ function getVisiblePages(totalPages, maxVisiblePagesWithEllipsis, currentPage) {
|
|
|
2241
2269
|
const paginationRoot = "_paginationRoot_c5fwx_2";
|
|
2242
2270
|
const paginationList = "_paginationList_c5fwx_7";
|
|
2243
2271
|
const arrowLeft = "_arrowLeft_c5fwx_13";
|
|
2244
|
-
const styles$
|
|
2272
|
+
const styles$g = {
|
|
2245
2273
|
paginationRoot: paginationRoot,
|
|
2246
2274
|
paginationList: paginationList,
|
|
2247
2275
|
arrowLeft: arrowLeft
|
|
@@ -2268,9 +2296,9 @@ function PaginationRoot({
|
|
|
2268
2296
|
{
|
|
2269
2297
|
"aria-label": "pagination navigation",
|
|
2270
2298
|
role: "navigation",
|
|
2271
|
-
className: classNames(styles$
|
|
2299
|
+
className: classNames(styles$g.paginationRoot, className),
|
|
2272
2300
|
...props,
|
|
2273
|
-
children: /* @__PURE__ */ jsxs("ul", { className: styles$
|
|
2301
|
+
children: /* @__PURE__ */ jsxs("ul", { className: styles$g.paginationList, children: [
|
|
2274
2302
|
showArrows && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
|
|
2275
2303
|
PaginationItem$1,
|
|
2276
2304
|
{
|
|
@@ -2278,7 +2306,7 @@ function PaginationRoot({
|
|
|
2278
2306
|
onClick: () => onPageChange(currentPage - 1),
|
|
2279
2307
|
disabled: isFirstPage,
|
|
2280
2308
|
size,
|
|
2281
|
-
children: /* @__PURE__ */ jsx(IconChevron$1, { className: styles$
|
|
2309
|
+
children: /* @__PURE__ */ jsx(IconChevron$1, { className: styles$g.arrowLeft })
|
|
2282
2310
|
}
|
|
2283
2311
|
) }),
|
|
2284
2312
|
visiblePages.map((page, index) => /* @__PURE__ */ jsx("li", { children: page === ELLIPSIS_SYMBOL ? /* @__PURE__ */ jsx(PaginationItem$1, { "aria-label": "More pages", disabled: true, size, children: /* @__PURE__ */ jsx(Ellipsis, {}) }) : /* @__PURE__ */ jsx(
|
|
@@ -2314,15 +2342,15 @@ Pagination.Item = PaginationItem;
|
|
|
2314
2342
|
const root = "_root_33gbh_2";
|
|
2315
2343
|
const segment = "_segment_33gbh_10";
|
|
2316
2344
|
const flexGrow = "_flexGrow_33gbh_19";
|
|
2317
|
-
const fill = "_fill_33gbh_23";
|
|
2345
|
+
const fill$1 = "_fill_33gbh_23";
|
|
2318
2346
|
const trail = "_trail_33gbh_28";
|
|
2319
2347
|
const sm$2 = "_sm_33gbh_32";
|
|
2320
2348
|
const md$5 = "_md_33gbh_36";
|
|
2321
|
-
const styles$
|
|
2349
|
+
const styles$f = {
|
|
2322
2350
|
root: root,
|
|
2323
2351
|
segment: segment,
|
|
2324
2352
|
flexGrow: flexGrow,
|
|
2325
|
-
fill: fill,
|
|
2353
|
+
fill: fill$1,
|
|
2326
2354
|
trail: trail,
|
|
2327
2355
|
sm: sm$2,
|
|
2328
2356
|
md: md$5
|
|
@@ -2339,7 +2367,7 @@ function ProgressBarLinear({
|
|
|
2339
2367
|
return /* @__PURE__ */ jsxs(
|
|
2340
2368
|
"div",
|
|
2341
2369
|
{
|
|
2342
|
-
className: classNames(styles$
|
|
2370
|
+
className: classNames(styles$f.root, styles$f[size], className),
|
|
2343
2371
|
role: "progressbar",
|
|
2344
2372
|
"aria-valuenow": clampedPercent,
|
|
2345
2373
|
"aria-valuemin": 0,
|
|
@@ -2351,14 +2379,14 @@ function ProgressBarLinear({
|
|
|
2351
2379
|
(Boolean(clampedPercent) || showFillOnZero) && /* @__PURE__ */ jsx(
|
|
2352
2380
|
"div",
|
|
2353
2381
|
{
|
|
2354
|
-
className: classNames(styles$
|
|
2382
|
+
className: classNames(styles$f.segment, styles$f.fill),
|
|
2355
2383
|
style: {
|
|
2356
2384
|
"--clamped-percent": `${clampedPercent}%`
|
|
2357
2385
|
},
|
|
2358
2386
|
"aria-hidden": "true"
|
|
2359
2387
|
}
|
|
2360
2388
|
),
|
|
2361
|
-
clampedPercent < 100 && /* @__PURE__ */ jsx("div", { className: classNames(styles$
|
|
2389
|
+
clampedPercent < 100 && /* @__PURE__ */ jsx("div", { className: classNames(styles$f.segment, styles$f.flexGrow, styles$f.trail), "aria-hidden": "true" })
|
|
2362
2390
|
]
|
|
2363
2391
|
}
|
|
2364
2392
|
);
|
|
@@ -2378,7 +2406,7 @@ function ProgressBarSteps({
|
|
|
2378
2406
|
return /* @__PURE__ */ jsx(
|
|
2379
2407
|
"div",
|
|
2380
2408
|
{
|
|
2381
|
-
className: classNames(styles$
|
|
2409
|
+
className: classNames(styles$f.segment, styles$f.flexGrow, isFilled ? styles$f.fill : styles$f.trail),
|
|
2382
2410
|
"aria-hidden": "true"
|
|
2383
2411
|
},
|
|
2384
2412
|
index
|
|
@@ -2387,7 +2415,7 @@ function ProgressBarSteps({
|
|
|
2387
2415
|
return /* @__PURE__ */ jsx(
|
|
2388
2416
|
"div",
|
|
2389
2417
|
{
|
|
2390
|
-
className: classNames(styles$
|
|
2418
|
+
className: classNames(styles$f.root, styles$f[size], className),
|
|
2391
2419
|
role: "progressbar",
|
|
2392
2420
|
"aria-valuenow": clampedCurrent,
|
|
2393
2421
|
"aria-valuemin": 0,
|
|
@@ -2407,14 +2435,14 @@ ProgressBar.Steps = ProgressBarSteps;
|
|
|
2407
2435
|
|
|
2408
2436
|
const radioWrapper = "_radioWrapper_13xie_2";
|
|
2409
2437
|
const radio = "_radio_13xie_2";
|
|
2410
|
-
const styles$
|
|
2438
|
+
const styles$e = {
|
|
2411
2439
|
radioWrapper: radioWrapper,
|
|
2412
2440
|
radio: radio
|
|
2413
2441
|
};
|
|
2414
2442
|
|
|
2415
2443
|
function RadioButton({ className, label, ...props }) {
|
|
2416
|
-
return /* @__PURE__ */ jsxs("label", { "data-disabled": `${Boolean(props.disabled)}`, className: classNames(styles$
|
|
2417
|
-
/* @__PURE__ */ jsx("input", { type: "radio", className: styles$
|
|
2444
|
+
return /* @__PURE__ */ jsxs("label", { "data-disabled": `${Boolean(props.disabled)}`, className: classNames(styles$e.radioWrapper, className), children: [
|
|
2445
|
+
/* @__PURE__ */ jsx("input", { type: "radio", className: styles$e.radio, ...props }),
|
|
2418
2446
|
label
|
|
2419
2447
|
] });
|
|
2420
2448
|
}
|
|
@@ -2425,7 +2453,7 @@ const textFieldAreaWrapper = "_textFieldAreaWrapper_pia91_2";
|
|
|
2425
2453
|
const textFieldAreaLabel = "_textFieldAreaLabel_pia91_14";
|
|
2426
2454
|
const textFieldAreaLabelSuffix = "_textFieldAreaLabelSuffix_pia91_24";
|
|
2427
2455
|
const textFieldArea = "_textFieldArea_pia91_2";
|
|
2428
|
-
const styles$
|
|
2456
|
+
const styles$d = {
|
|
2429
2457
|
textFieldAreaWrapper: textFieldAreaWrapper,
|
|
2430
2458
|
textFieldAreaLabel: textFieldAreaLabel,
|
|
2431
2459
|
textFieldAreaLabelSuffix: textFieldAreaLabelSuffix,
|
|
@@ -2446,14 +2474,14 @@ function TextFieldArea({
|
|
|
2446
2474
|
"data-invalid": isInvalid,
|
|
2447
2475
|
"aria-invalid": isInvalid,
|
|
2448
2476
|
"data-element": "field",
|
|
2449
|
-
className: classNames(styles$
|
|
2477
|
+
className: classNames(styles$d.textFieldArea, className),
|
|
2450
2478
|
placeholder,
|
|
2451
2479
|
...props
|
|
2452
2480
|
}
|
|
2453
2481
|
);
|
|
2454
|
-
return floatingLabel ? /* @__PURE__ */ jsxs("div", { className: styles$
|
|
2455
|
-
/* @__PURE__ */ jsx("label", { htmlFor: props.id, className: styles$
|
|
2456
|
-
floatingLabelSuffix && /* @__PURE__ */ jsx("span", { className: styles$
|
|
2482
|
+
return floatingLabel ? /* @__PURE__ */ jsxs("div", { className: styles$d.textFieldAreaWrapper, children: [
|
|
2483
|
+
/* @__PURE__ */ jsx("label", { htmlFor: props.id, className: styles$d.textFieldAreaLabel, "data-element": "label", children: floatingLabel }),
|
|
2484
|
+
floatingLabelSuffix && /* @__PURE__ */ jsx("span", { className: styles$d.textFieldAreaLabelSuffix, "data-element": "label-suffix", children: floatingLabelSuffix }),
|
|
2457
2485
|
textFieldArea
|
|
2458
2486
|
] }) : textFieldArea;
|
|
2459
2487
|
}
|
|
@@ -2461,7 +2489,7 @@ function TextFieldArea({
|
|
|
2461
2489
|
const textFieldInputWrapper = "_textFieldInputWrapper_1m8sa_2";
|
|
2462
2490
|
const textFieldInputLabel = "_textFieldInputLabel_1m8sa_9";
|
|
2463
2491
|
const textFieldInput = "_textFieldInput_1m8sa_2";
|
|
2464
|
-
const styles$
|
|
2492
|
+
const styles$c = {
|
|
2465
2493
|
textFieldInputWrapper: textFieldInputWrapper,
|
|
2466
2494
|
textFieldInputLabel: textFieldInputLabel,
|
|
2467
2495
|
textFieldInput: textFieldInput
|
|
@@ -2480,37 +2508,37 @@ function TextFieldInput({
|
|
|
2480
2508
|
"data-invalid": isInvalid,
|
|
2481
2509
|
"aria-invalid": isInvalid,
|
|
2482
2510
|
"data-element": "field",
|
|
2483
|
-
className: classNames(styles$
|
|
2511
|
+
className: classNames(styles$c.textFieldInput, className),
|
|
2484
2512
|
placeholder,
|
|
2485
2513
|
...props
|
|
2486
2514
|
}
|
|
2487
2515
|
);
|
|
2488
|
-
return floatingLabel ? /* @__PURE__ */ jsxs("div", { className: styles$
|
|
2489
|
-
/* @__PURE__ */ jsx("label", { htmlFor: props.id, className: styles$
|
|
2516
|
+
return floatingLabel ? /* @__PURE__ */ jsxs("div", { className: styles$c.textFieldInputWrapper, children: [
|
|
2517
|
+
/* @__PURE__ */ jsx("label", { htmlFor: props.id, className: styles$c.textFieldInputLabel, "data-element": "label", children: floatingLabel }),
|
|
2490
2518
|
textFieldInput
|
|
2491
2519
|
] }) : textFieldInput;
|
|
2492
2520
|
}
|
|
2493
2521
|
|
|
2494
|
-
const textFieldLabel = "
|
|
2495
|
-
const styles$
|
|
2522
|
+
const textFieldLabel = "_textFieldLabel_1xy6x_2";
|
|
2523
|
+
const styles$b = {
|
|
2496
2524
|
textFieldLabel: textFieldLabel
|
|
2497
2525
|
};
|
|
2498
2526
|
|
|
2499
2527
|
function TextFieldLabel({ className, children, isRequired, ...props }) {
|
|
2500
|
-
return /* @__PURE__ */ jsx("label", { className: classNames(styles$
|
|
2528
|
+
return /* @__PURE__ */ jsx("label", { className: classNames(styles$b.textFieldLabel, className), "data-required": isRequired, ...props, children });
|
|
2501
2529
|
}
|
|
2502
2530
|
|
|
2503
2531
|
const textFieldRoot = "_textFieldRoot_cs7mv_2";
|
|
2504
2532
|
const lg$3 = "_lg_cs7mv_38";
|
|
2505
2533
|
const md$4 = "_md_cs7mv_70";
|
|
2506
|
-
const styles$
|
|
2534
|
+
const styles$a = {
|
|
2507
2535
|
textFieldRoot: textFieldRoot,
|
|
2508
2536
|
lg: lg$3,
|
|
2509
2537
|
md: md$4
|
|
2510
2538
|
};
|
|
2511
2539
|
|
|
2512
2540
|
function TextFieldRoot({ className, size = "lg", ...props }) {
|
|
2513
|
-
return /* @__PURE__ */ jsx("div", { className: classNames(styles$
|
|
2541
|
+
return /* @__PURE__ */ jsx("div", { className: classNames(styles$a.textFieldRoot, styles$a[size], className), ...props });
|
|
2514
2542
|
}
|
|
2515
2543
|
|
|
2516
2544
|
function TextField() {
|
|
@@ -2525,7 +2553,7 @@ const custom = "_custom_gh87y_15";
|
|
|
2525
2553
|
const icon$1 = "_icon_gh87y_25";
|
|
2526
2554
|
const inputCustomWrapper = "_inputCustomWrapper_gh87y_34";
|
|
2527
2555
|
const customButton = "_customButton_gh87y_49";
|
|
2528
|
-
const styles$
|
|
2556
|
+
const styles$9 = {
|
|
2529
2557
|
search: search,
|
|
2530
2558
|
"default": "_default_gh87y_10",
|
|
2531
2559
|
custom: custom,
|
|
@@ -2551,7 +2579,7 @@ function Search(props) {
|
|
|
2551
2579
|
value && /* @__PURE__ */ jsx(
|
|
2552
2580
|
IconXMark.Small,
|
|
2553
2581
|
{
|
|
2554
|
-
className: styles$
|
|
2582
|
+
className: styles$9.icon,
|
|
2555
2583
|
"aria-label": "clear search",
|
|
2556
2584
|
role: "button",
|
|
2557
2585
|
onClick: () => {
|
|
@@ -2565,13 +2593,13 @@ function Search(props) {
|
|
|
2565
2593
|
}
|
|
2566
2594
|
)
|
|
2567
2595
|
] });
|
|
2568
|
-
return /* @__PURE__ */ jsxs(TextField.Root, { size: "md", className: classNames(styles$
|
|
2596
|
+
return /* @__PURE__ */ jsxs(TextField.Root, { size: "md", className: classNames(styles$9.search, styles$9[mode], className), children: [
|
|
2569
2597
|
mode === "default" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
2570
|
-
/* @__PURE__ */ jsx(IconSearch, { className: styles$
|
|
2598
|
+
/* @__PURE__ */ jsx(IconSearch, { className: styles$9.icon, "data-element": "icon" }),
|
|
2571
2599
|
inputField
|
|
2572
2600
|
] }),
|
|
2573
2601
|
mode === "custom" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
2574
|
-
/* @__PURE__ */ jsx("div", { className: styles$
|
|
2602
|
+
/* @__PURE__ */ jsx("div", { className: styles$9.inputCustomWrapper, children: inputField }),
|
|
2575
2603
|
/* @__PURE__ */ jsx(
|
|
2576
2604
|
"button",
|
|
2577
2605
|
{
|
|
@@ -2579,11 +2607,11 @@ function Search(props) {
|
|
|
2579
2607
|
type: "button",
|
|
2580
2608
|
onClick: props.onSearch,
|
|
2581
2609
|
"data-element": "custom-button",
|
|
2582
|
-
className: styles$
|
|
2610
|
+
className: styles$9.customButton,
|
|
2583
2611
|
style: {
|
|
2584
2612
|
"--custom-button-width": `${props.buttonWidth ?? DEFAULT_CUSTOM_SEARCH_BUTTON_WIDTH}px`
|
|
2585
2613
|
},
|
|
2586
|
-
children: /* @__PURE__ */ jsx(IconSearch, { className: classNames(styles$
|
|
2614
|
+
children: /* @__PURE__ */ jsx(IconSearch, { className: classNames(styles$9.icon), "data-element": "icon" })
|
|
2587
2615
|
}
|
|
2588
2616
|
)
|
|
2589
2617
|
] })
|
|
@@ -2609,7 +2637,7 @@ function useSegmentControlContext() {
|
|
|
2609
2637
|
const segmentControlItem = "_segmentControlItem_178px_2";
|
|
2610
2638
|
const lg$2 = "_lg_178px_23";
|
|
2611
2639
|
const md$3 = "_md_178px_28";
|
|
2612
|
-
const styles$
|
|
2640
|
+
const styles$8 = {
|
|
2613
2641
|
segmentControlItem: segmentControlItem,
|
|
2614
2642
|
lg: lg$2,
|
|
2615
2643
|
md: md$3
|
|
@@ -2625,7 +2653,7 @@ function SegmentControlItem({ className, children, value, ...props }) {
|
|
|
2625
2653
|
"aria-checked": value === activeValue,
|
|
2626
2654
|
"data-state": value === activeValue ? "on" : "off",
|
|
2627
2655
|
"data-value": value,
|
|
2628
|
-
className: classNames(styles$
|
|
2656
|
+
className: classNames(styles$8.segmentControlItem, styles$8[size], className),
|
|
2629
2657
|
...props,
|
|
2630
2658
|
children
|
|
2631
2659
|
}
|
|
@@ -2662,7 +2690,7 @@ const showAfterDelay = "_showAfterDelay_pulca_1";
|
|
|
2662
2690
|
const lg$1 = "_lg_pulca_19";
|
|
2663
2691
|
const md$2 = "_md_pulca_23";
|
|
2664
2692
|
const indicator$1 = "_indicator_pulca_28";
|
|
2665
|
-
const styles$
|
|
2693
|
+
const styles$7 = {
|
|
2666
2694
|
segmentControlRoot: segmentControlRoot,
|
|
2667
2695
|
showAfterDelay: showAfterDelay,
|
|
2668
2696
|
lg: lg$1,
|
|
@@ -2677,11 +2705,11 @@ function SegmentControlRoot({ className, children, value, size = "md", ...props
|
|
|
2677
2705
|
{
|
|
2678
2706
|
ref: rootRef,
|
|
2679
2707
|
role: "radiogroup",
|
|
2680
|
-
className: classNames(styles$
|
|
2708
|
+
className: classNames(styles$7.segmentControlRoot, styles$7[size], className),
|
|
2681
2709
|
...props,
|
|
2682
2710
|
children: [
|
|
2683
2711
|
children,
|
|
2684
|
-
/* @__PURE__ */ jsx("div", { className: classNames(styles$
|
|
2712
|
+
/* @__PURE__ */ jsx("div", { className: classNames(styles$7.indicator, styles$7[size]), style: indicatorStyle })
|
|
2685
2713
|
]
|
|
2686
2714
|
}
|
|
2687
2715
|
) });
|
|
@@ -2692,6 +2720,302 @@ function SegmentControl(props) {
|
|
|
2692
2720
|
}
|
|
2693
2721
|
SegmentControl.Item = SegmentControlItem;
|
|
2694
2722
|
|
|
2723
|
+
const SLIDER_DEFAULT_MIN = 0;
|
|
2724
|
+
const SLIDER_DEFAULT_MAX = 100;
|
|
2725
|
+
const SLIDER_DEFAULT_STEP = 1;
|
|
2726
|
+
const SLIDER_PAGE_STEP_MULTIPLIER = 10;
|
|
2727
|
+
const SLIDER_STEP_MULTIPLIER_BY_KEY = {
|
|
2728
|
+
ArrowRight: 1,
|
|
2729
|
+
ArrowUp: 1,
|
|
2730
|
+
ArrowLeft: -1,
|
|
2731
|
+
ArrowDown: -1,
|
|
2732
|
+
PageUp: SLIDER_PAGE_STEP_MULTIPLIER,
|
|
2733
|
+
PageDown: -SLIDER_PAGE_STEP_MULTIPLIER
|
|
2734
|
+
};
|
|
2735
|
+
|
|
2736
|
+
function getNearestHandleIndex(target, values) {
|
|
2737
|
+
let nearestIndex = 0;
|
|
2738
|
+
let nearestDistance = Number.POSITIVE_INFINITY;
|
|
2739
|
+
values.forEach((value, index) => {
|
|
2740
|
+
const distance = Math.abs(value - target);
|
|
2741
|
+
const isCloser = distance < nearestDistance;
|
|
2742
|
+
const isTieResolvedByDirection = distance === nearestDistance && target > value;
|
|
2743
|
+
if (isCloser || isTieResolvedByDirection) {
|
|
2744
|
+
nearestDistance = distance;
|
|
2745
|
+
nearestIndex = index;
|
|
2746
|
+
}
|
|
2747
|
+
});
|
|
2748
|
+
return nearestIndex;
|
|
2749
|
+
}
|
|
2750
|
+
|
|
2751
|
+
function getPercent(value, bounds) {
|
|
2752
|
+
const { min, max } = bounds;
|
|
2753
|
+
if (max <= min) {
|
|
2754
|
+
return 0;
|
|
2755
|
+
}
|
|
2756
|
+
return Math.min(Math.max((value - min) / (max - min) * 100, 0), 100);
|
|
2757
|
+
}
|
|
2758
|
+
|
|
2759
|
+
function getFractionLength(value) {
|
|
2760
|
+
return String(value).split(".")[1]?.length ?? 0;
|
|
2761
|
+
}
|
|
2762
|
+
function snapToStep(value, bounds) {
|
|
2763
|
+
const { min, max, step } = bounds;
|
|
2764
|
+
const clamped = Math.min(Math.max(value, min), max);
|
|
2765
|
+
if (step <= 0) {
|
|
2766
|
+
return clamped;
|
|
2767
|
+
}
|
|
2768
|
+
const snapped = min + Math.round((clamped - min) / step) * step;
|
|
2769
|
+
const precision = Math.max(getFractionLength(step), getFractionLength(min));
|
|
2770
|
+
return Number(Math.min(Math.max(snapped, min), max).toFixed(precision));
|
|
2771
|
+
}
|
|
2772
|
+
|
|
2773
|
+
function getValueFromPointer(params) {
|
|
2774
|
+
const { clientX, trackStart, trackWidth, min, max, step } = params;
|
|
2775
|
+
if (trackWidth <= 0) {
|
|
2776
|
+
return min;
|
|
2777
|
+
}
|
|
2778
|
+
const ratio = (clientX - trackStart) / trackWidth;
|
|
2779
|
+
return snapToStep(min + ratio * (max - min), { min, max, step });
|
|
2780
|
+
}
|
|
2781
|
+
|
|
2782
|
+
function normalizeMark(mark) {
|
|
2783
|
+
if (typeof mark === "number") {
|
|
2784
|
+
return { value: mark, label: mark };
|
|
2785
|
+
}
|
|
2786
|
+
return { value: mark.value, label: mark.label };
|
|
2787
|
+
}
|
|
2788
|
+
|
|
2789
|
+
function updateHandleValue(params) {
|
|
2790
|
+
const { values, index, next, min, max, step } = params;
|
|
2791
|
+
const lowerBound = values[index - 1] ?? min;
|
|
2792
|
+
const upperBound = values[index + 1] ?? max;
|
|
2793
|
+
const snapped = snapToStep(next, { min, max, step });
|
|
2794
|
+
const nextValues = [...values];
|
|
2795
|
+
nextValues[index] = Math.min(Math.max(snapped, lowerBound), upperBound);
|
|
2796
|
+
return nextValues;
|
|
2797
|
+
}
|
|
2798
|
+
|
|
2799
|
+
const slider = "_slider_vuele_2";
|
|
2800
|
+
const fill = "_fill_vuele_20";
|
|
2801
|
+
const rail = "_rail_vuele_26";
|
|
2802
|
+
const handle = "_handle_vuele_34";
|
|
2803
|
+
const mark = "_mark_vuele_39";
|
|
2804
|
+
const markDot = "_markDot_vuele_43";
|
|
2805
|
+
const track = "_track_vuele_56";
|
|
2806
|
+
const marks = "_marks_vuele_106";
|
|
2807
|
+
const styles$6 = {
|
|
2808
|
+
slider: slider,
|
|
2809
|
+
fill: fill,
|
|
2810
|
+
rail: rail,
|
|
2811
|
+
handle: handle,
|
|
2812
|
+
mark: mark,
|
|
2813
|
+
markDot: markDot,
|
|
2814
|
+
track: track,
|
|
2815
|
+
marks: marks
|
|
2816
|
+
};
|
|
2817
|
+
|
|
2818
|
+
function SliderMarks({ marks, min, max, activeFrom, activeTo }) {
|
|
2819
|
+
return /* @__PURE__ */ jsx("div", { className: styles$6.marks, children: marks.map(({ value, label }) => {
|
|
2820
|
+
const isActive = value >= activeFrom && value <= activeTo;
|
|
2821
|
+
return /* @__PURE__ */ jsxs(
|
|
2822
|
+
"div",
|
|
2823
|
+
{
|
|
2824
|
+
"data-state": isActive ? "active" : "default",
|
|
2825
|
+
className: styles$6.mark,
|
|
2826
|
+
style: { insetInlineStart: `${getPercent(value, { min, max })}%` },
|
|
2827
|
+
children: [
|
|
2828
|
+
/* @__PURE__ */ jsx("span", { className: styles$6.markDot }),
|
|
2829
|
+
label
|
|
2830
|
+
]
|
|
2831
|
+
},
|
|
2832
|
+
value
|
|
2833
|
+
);
|
|
2834
|
+
}) });
|
|
2835
|
+
}
|
|
2836
|
+
|
|
2837
|
+
function SliderBase({
|
|
2838
|
+
values,
|
|
2839
|
+
onValuesChange,
|
|
2840
|
+
min = SLIDER_DEFAULT_MIN,
|
|
2841
|
+
max = SLIDER_DEFAULT_MAX,
|
|
2842
|
+
step = SLIDER_DEFAULT_STEP,
|
|
2843
|
+
marks,
|
|
2844
|
+
disabled,
|
|
2845
|
+
className,
|
|
2846
|
+
"aria-label": ariaLabel,
|
|
2847
|
+
"aria-labelledby": ariaLabelledBy,
|
|
2848
|
+
"aria-describedby": ariaDescribedBy,
|
|
2849
|
+
...props
|
|
2850
|
+
}) {
|
|
2851
|
+
const railRef = useRef(null);
|
|
2852
|
+
const handleRefs = useRef([]);
|
|
2853
|
+
const dragRef = useRef(null);
|
|
2854
|
+
const normalizedMarks = useMemo(() => marks?.map(normalizeMark) ?? [], [marks]);
|
|
2855
|
+
const fillFrom = values.length > 1 ? values[0] ?? min : min;
|
|
2856
|
+
const fillTo = values.at(-1) ?? min;
|
|
2857
|
+
const toPercent = (value) => getPercent(value, { min, max });
|
|
2858
|
+
const resolveKeyValue = (key, current) => {
|
|
2859
|
+
const multiplier = SLIDER_STEP_MULTIPLIER_BY_KEY[key];
|
|
2860
|
+
if (multiplier !== void 0) {
|
|
2861
|
+
return current + step * multiplier;
|
|
2862
|
+
}
|
|
2863
|
+
if (key === "Home") {
|
|
2864
|
+
return min;
|
|
2865
|
+
}
|
|
2866
|
+
return key === "End" ? max : null;
|
|
2867
|
+
};
|
|
2868
|
+
const resolveValueText = (value) => {
|
|
2869
|
+
const { label } = normalizedMarks.find((mark) => mark.value === value) ?? {};
|
|
2870
|
+
const text = typeof label === "string" || typeof label === "number" ? String(label) : void 0;
|
|
2871
|
+
return text === String(value) ? void 0 : text;
|
|
2872
|
+
};
|
|
2873
|
+
const commit = (index, next) => {
|
|
2874
|
+
const nextValues = updateHandleValue({ values, index, next, min, max, step });
|
|
2875
|
+
if (nextValues[index] === values[index]) {
|
|
2876
|
+
return;
|
|
2877
|
+
}
|
|
2878
|
+
onValuesChange(nextValues);
|
|
2879
|
+
};
|
|
2880
|
+
const readPointerValue = (clientX) => {
|
|
2881
|
+
if (!railRef.current) {
|
|
2882
|
+
return null;
|
|
2883
|
+
}
|
|
2884
|
+
const rect = railRef.current.getBoundingClientRect();
|
|
2885
|
+
return getValueFromPointer({ clientX, trackStart: rect.left, trackWidth: rect.width, min, max, step });
|
|
2886
|
+
};
|
|
2887
|
+
const handleKeyDown = (event, index) => {
|
|
2888
|
+
const current = values[index];
|
|
2889
|
+
if (disabled || current === void 0) {
|
|
2890
|
+
return;
|
|
2891
|
+
}
|
|
2892
|
+
const next = resolveKeyValue(event.key, current);
|
|
2893
|
+
if (next === null) {
|
|
2894
|
+
return;
|
|
2895
|
+
}
|
|
2896
|
+
event.preventDefault();
|
|
2897
|
+
commit(index, next);
|
|
2898
|
+
};
|
|
2899
|
+
const handlePointerDown = (event) => {
|
|
2900
|
+
if (disabled || event.button !== 0 || !event.isPrimary) {
|
|
2901
|
+
return;
|
|
2902
|
+
}
|
|
2903
|
+
const grabbedIndex = handleRefs.current.findIndex((handle) => handle === event.target);
|
|
2904
|
+
if (grabbedIndex >= 0) {
|
|
2905
|
+
const isAmbiguousGrab = values.filter((value) => value === values[grabbedIndex]).length > 1;
|
|
2906
|
+
dragRef.current = { pointerId: event.pointerId, index: isAmbiguousGrab ? null : grabbedIndex };
|
|
2907
|
+
event.currentTarget.setPointerCapture(event.pointerId);
|
|
2908
|
+
return;
|
|
2909
|
+
}
|
|
2910
|
+
const pointerValue = readPointerValue(event.clientX);
|
|
2911
|
+
if (pointerValue === null) {
|
|
2912
|
+
return;
|
|
2913
|
+
}
|
|
2914
|
+
const nearestIndex = getNearestHandleIndex(pointerValue, values);
|
|
2915
|
+
dragRef.current = { pointerId: event.pointerId, index: nearestIndex };
|
|
2916
|
+
event.currentTarget.setPointerCapture(event.pointerId);
|
|
2917
|
+
handleRefs.current[nearestIndex]?.focus();
|
|
2918
|
+
commit(nearestIndex, pointerValue);
|
|
2919
|
+
};
|
|
2920
|
+
const handlePointerMove = (event) => {
|
|
2921
|
+
const drag = dragRef.current;
|
|
2922
|
+
if (!drag || drag.pointerId !== event.pointerId || disabled) {
|
|
2923
|
+
return;
|
|
2924
|
+
}
|
|
2925
|
+
const pointerValue = readPointerValue(event.clientX);
|
|
2926
|
+
if (pointerValue === null) {
|
|
2927
|
+
return;
|
|
2928
|
+
}
|
|
2929
|
+
const index = drag.index ?? getNearestHandleIndex(pointerValue, values);
|
|
2930
|
+
dragRef.current = { pointerId: drag.pointerId, index };
|
|
2931
|
+
handleRefs.current[index]?.focus();
|
|
2932
|
+
commit(index, pointerValue);
|
|
2933
|
+
};
|
|
2934
|
+
const stopDragging = (event) => {
|
|
2935
|
+
if (dragRef.current?.pointerId !== event.pointerId) {
|
|
2936
|
+
return;
|
|
2937
|
+
}
|
|
2938
|
+
dragRef.current = null;
|
|
2939
|
+
if (event.currentTarget.hasPointerCapture(event.pointerId)) {
|
|
2940
|
+
event.currentTarget.releasePointerCapture(event.pointerId);
|
|
2941
|
+
}
|
|
2942
|
+
};
|
|
2943
|
+
const handleLostPointerCapture = (event) => {
|
|
2944
|
+
if (dragRef.current?.pointerId === event.pointerId) {
|
|
2945
|
+
dragRef.current = null;
|
|
2946
|
+
}
|
|
2947
|
+
};
|
|
2948
|
+
return /* @__PURE__ */ jsx(
|
|
2949
|
+
"div",
|
|
2950
|
+
{
|
|
2951
|
+
className: classNames(styles$6.slider, className),
|
|
2952
|
+
"data-disabled": disabled,
|
|
2953
|
+
"data-marks": Boolean(marks?.length),
|
|
2954
|
+
...props,
|
|
2955
|
+
children: /* @__PURE__ */ jsxs(
|
|
2956
|
+
"div",
|
|
2957
|
+
{
|
|
2958
|
+
ref: railRef,
|
|
2959
|
+
className: styles$6.rail,
|
|
2960
|
+
onPointerDown: handlePointerDown,
|
|
2961
|
+
onPointerMove: handlePointerMove,
|
|
2962
|
+
onPointerUp: stopDragging,
|
|
2963
|
+
onPointerCancel: stopDragging,
|
|
2964
|
+
onLostPointerCapture: handleLostPointerCapture,
|
|
2965
|
+
children: [
|
|
2966
|
+
/* @__PURE__ */ jsx("div", { className: styles$6.track }),
|
|
2967
|
+
/* @__PURE__ */ jsx(
|
|
2968
|
+
"div",
|
|
2969
|
+
{
|
|
2970
|
+
className: styles$6.fill,
|
|
2971
|
+
style: { insetInlineStart: `${toPercent(fillFrom)}%`, insetInlineEnd: `${100 - toPercent(fillTo)}%` }
|
|
2972
|
+
}
|
|
2973
|
+
),
|
|
2974
|
+
normalizedMarks.length ? /* @__PURE__ */ jsx(SliderMarks, { marks: normalizedMarks, min, max, activeFrom: fillFrom, activeTo: fillTo }) : null,
|
|
2975
|
+
values.map((value, index) => /* @__PURE__ */ jsx(
|
|
2976
|
+
"div",
|
|
2977
|
+
{
|
|
2978
|
+
ref: (element) => {
|
|
2979
|
+
handleRefs.current[index] = element;
|
|
2980
|
+
},
|
|
2981
|
+
role: "slider",
|
|
2982
|
+
tabIndex: disabled ? -1 : 0,
|
|
2983
|
+
"aria-valuemin": min,
|
|
2984
|
+
"aria-valuemax": max,
|
|
2985
|
+
"aria-valuenow": value,
|
|
2986
|
+
"aria-valuetext": resolveValueText(value),
|
|
2987
|
+
"aria-label": ariaLabel,
|
|
2988
|
+
"aria-labelledby": ariaLabelledBy,
|
|
2989
|
+
"aria-describedby": ariaDescribedBy,
|
|
2990
|
+
"aria-disabled": disabled,
|
|
2991
|
+
"aria-orientation": "horizontal",
|
|
2992
|
+
className: styles$6.handle,
|
|
2993
|
+
style: { insetInlineStart: `${toPercent(value)}%` },
|
|
2994
|
+
onKeyDown: (event) => handleKeyDown(event, index)
|
|
2995
|
+
},
|
|
2996
|
+
index
|
|
2997
|
+
))
|
|
2998
|
+
]
|
|
2999
|
+
}
|
|
3000
|
+
)
|
|
3001
|
+
}
|
|
3002
|
+
);
|
|
3003
|
+
}
|
|
3004
|
+
|
|
3005
|
+
function SliderRange({ value, onChange, ...props }) {
|
|
3006
|
+
const handleValuesChange = (nextValues) => {
|
|
3007
|
+
const [from = value[0], to = value[1]] = nextValues;
|
|
3008
|
+
onChange([from, to]);
|
|
3009
|
+
};
|
|
3010
|
+
return /* @__PURE__ */ jsx(SliderBase, { values: value, onValuesChange: handleValuesChange, ...props });
|
|
3011
|
+
}
|
|
3012
|
+
|
|
3013
|
+
function Slider({ value, onChange, ...props }) {
|
|
3014
|
+
const handleValuesChange = ([next = value]) => onChange(next);
|
|
3015
|
+
return /* @__PURE__ */ jsx(SliderBase, { values: [value], onValuesChange: handleValuesChange, ...props });
|
|
3016
|
+
}
|
|
3017
|
+
Slider.Range = SliderRange;
|
|
3018
|
+
|
|
2695
3019
|
const stepper = "_stepper_103n3_2";
|
|
2696
3020
|
const sm$1 = "_sm_103n3_10";
|
|
2697
3021
|
const md$1 = "_md_103n3_17";
|
|
@@ -3018,4 +3342,4 @@ function Tooltip(props) {
|
|
|
3018
3342
|
}
|
|
3019
3343
|
Tooltip.Content = TooltipContent;
|
|
3020
3344
|
|
|
3021
|
-
export { Badge, BadgeTabs, Breadcrumbs, Button, Checkbox, Chip, Counter, DatePicker, DropdownMenu, I18N_MONTH_LABELS, I18N_WEEKDAY_LABELS, IconArrow, IconArrowCircle, IconArrowCircleUp, IconArrowDiagonal, IconArrowUTurn, IconBell, IconBox, IconCalendar, IconCharacteristic, IconCheck, IconCheckCircle, IconChevron, IconChevronDouble, IconClock, IconCollapse, IconCopy, IconDots, IconDownload, IconEye, IconFace, IconFile, IconFilters, IconGear, IconHanger, IconHome, IconInfo, IconLogOut, IconLogo, IconMail, IconMinus, IconOneCircle, IconPerson, IconPhone, IconPlus, IconPrize, IconProject, IconQRCode, IconRequest, IconResizeCorner, IconScan, IconSearch, IconShopping, IconSort, IconStar, IconSticker, IconStop, IconSwitch, IconTrash, IconXMark, IconXMarkCircle, LOCALE_FIRST_DAY_OF_WEEK, Pagination, ProgressBar, RadioButton, Search, SegmentControl, Stepper, Switch, Tabs, Tag, TextField, Tooltip, useDatePickerControls, useDatePickerMultiSelect, useDatePickerSelect };
|
|
3345
|
+
export { Badge, BadgeTabs, Breadcrumbs, Button, Checkbox, Chip, Counter, DatePicker, DropdownMenu, I18N_MONTH_LABELS, I18N_WEEKDAY_LABELS, IconArrow, IconArrowCircle, IconArrowCircleUp, IconArrowDiagonal, IconArrowUTurn, IconBell, IconBox, IconCalendar, IconCharacteristic, IconCheck, IconCheckCircle, IconChevron, IconChevronDouble, IconClock, IconCollapse, IconCopy, IconDots, IconDownload, IconEye, IconFace, IconFile, IconFilters, IconGear, IconHanger, IconHome, IconInfo, IconLogOut, IconLogo, IconMail, IconMinus, IconOneCircle, IconPerson, IconPhone, IconPlus, IconPrize, IconProject, IconQRCode, IconRequest, IconResizeCorner, IconScan, IconSearch, IconShopping, IconSort, IconStar, IconSticker, IconStop, IconStore, IconSwitch, IconTrash, IconXMark, IconXMarkCircle, LOCALE_FIRST_DAY_OF_WEEK, Pagination, ProgressBar, RadioButton, Search, SegmentControl, Slider, Stepper, Switch, Tabs, Tag, TextField, Tooltip, useDatePickerControls, useDatePickerMultiSelect, useDatePickerSelect };
|