@vygruppen/spor-react 10.3.0 → 10.4.1
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/.turbo/turbo-build.log +9 -9
- package/CHANGELOG.md +19 -0
- package/dist/{CountryCodeSelect-KCPHU7A7.mjs → CountryCodeSelect-QNKQE3C6.mjs} +2 -1
- package/dist/{chunk-5HRYDWQ5.mjs → chunk-PH4RK5L3.mjs} +185 -97
- package/dist/index.d.mts +579 -111
- package/dist/index.d.ts +579 -111
- package/dist/index.js +200 -106
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/src/input/Combobox.tsx +4 -0
- package/src/input/CountryCodeSelect.tsx +2 -0
- package/src/input/InfoSelect.tsx +5 -3
- package/src/input/ListBox.tsx +4 -1
- package/src/input/PhoneNumberInput.tsx +5 -0
- package/src/input/Switch.tsx +4 -2
- package/src/input/Textarea.tsx +1 -2
- package/src/theme/components/card-select.ts +1 -1
- package/src/theme/components/info-select.ts +1 -0
- package/src/theme/components/input.ts +4 -83
- package/src/theme/components/listbox.ts +16 -2
- package/src/theme/components/select.ts +18 -3
- package/src/theme/components/textarea.ts +13 -2
- package/src/theme/components/travel-tag.ts +1 -4
- package/src/theme/utils/focus-utils.ts +2 -2
- package/src/theme/utils/input-utils.ts +119 -0
- package/src/theme/utils/types.ts +2 -0
package/dist/index.js
CHANGED
@@ -1149,6 +1149,7 @@ function Combobox({
|
|
1149
1149
|
emptyContent,
|
1150
1150
|
inputRef: externalInputRef,
|
1151
1151
|
allowsEmptyCollection,
|
1152
|
+
variant,
|
1152
1153
|
...rest
|
1153
1154
|
}) {
|
1154
1155
|
const { contains: contains2 } = reactAria.useFilter({ sensitivity: "base" });
|
@@ -1202,6 +1203,7 @@ function Combobox({
|
|
1202
1203
|
ref: inputRef,
|
1203
1204
|
role: "combobox",
|
1204
1205
|
label,
|
1206
|
+
variant,
|
1205
1207
|
"aria-expanded": state2.isOpen,
|
1206
1208
|
"aria-autocomplete": "list",
|
1207
1209
|
"aria-controls": listboxId,
|
@@ -1243,7 +1245,8 @@ function Combobox({
|
|
1243
1245
|
id: listboxId,
|
1244
1246
|
listBoxRef,
|
1245
1247
|
emptyContent,
|
1246
|
-
maxWidth: inputWidth
|
1248
|
+
maxWidth: inputWidth,
|
1249
|
+
variant
|
1247
1250
|
},
|
1248
1251
|
rest.children
|
1249
1252
|
)
|
@@ -1368,10 +1371,11 @@ function ListBox({
|
|
1368
1371
|
listBoxRef,
|
1369
1372
|
state: state2,
|
1370
1373
|
maxWidth,
|
1374
|
+
variant,
|
1371
1375
|
...props
|
1372
1376
|
}) {
|
1373
1377
|
const { listBoxProps } = reactAria.useListBox(props, state2, listBoxRef);
|
1374
|
-
const styles3 = react.useMultiStyleConfig("ListBox", {});
|
1378
|
+
const styles3 = react.useMultiStyleConfig("ListBox", { variant });
|
1375
1379
|
return /* @__PURE__ */ React85__namespace.default.createElement(
|
1376
1380
|
react.List,
|
1377
1381
|
{
|
@@ -1379,7 +1383,8 @@ function ListBox({
|
|
1379
1383
|
ref: listBoxRef,
|
1380
1384
|
sx: styles3.container,
|
1381
1385
|
"aria-busy": isLoading,
|
1382
|
-
maxWidth
|
1386
|
+
maxWidth,
|
1387
|
+
variant
|
1383
1388
|
},
|
1384
1389
|
state2.collection.size === 0 && props.emptyContent,
|
1385
1390
|
Array.from(state2.collection).map(
|
@@ -1494,16 +1499,17 @@ function InfoSelect({
|
|
1494
1499
|
triggerRef
|
1495
1500
|
);
|
1496
1501
|
const stateStyle = "completed";
|
1502
|
+
const hasChosenValue = state2.selectedItem !== null;
|
1497
1503
|
const styles3 = react.useMultiStyleConfig("InfoSelect", {
|
1498
1504
|
isOpen: state2.isOpen,
|
1499
1505
|
isLabelSrOnly,
|
1500
1506
|
variant,
|
1501
|
-
stateStyle
|
1507
|
+
stateStyle,
|
1508
|
+
hasChosenValue
|
1502
1509
|
});
|
1503
1510
|
const { buttonProps } = reactAria.useButton(triggerProps, triggerRef);
|
1504
1511
|
const { t: t2 } = useTranslation();
|
1505
1512
|
const formControl = react.useFormControlProps(props);
|
1506
|
-
const hasChosenValue = state2.selectedItem !== null;
|
1507
1513
|
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { sx: styles3.container }, /* @__PURE__ */ React85__namespace.default.createElement(
|
1508
1514
|
reactAria.HiddenSelect,
|
1509
1515
|
{
|
@@ -1543,7 +1549,7 @@ function InfoSelect({
|
|
1543
1549
|
...valueProps,
|
1544
1550
|
h: isLabelSrOnly ? "" : !hasChosenValue ? "0px" : "18px",
|
1545
1551
|
hidden: !hasChosenValue,
|
1546
|
-
transform: isLabelSrOnly ? "" : "scale(1) translateY(-
|
1552
|
+
transform: isLabelSrOnly ? "" : "scale(1) translateY(-12px)",
|
1547
1553
|
transitionProperty: "var(--spor-transition-property-common)",
|
1548
1554
|
transitionDuration: "var(--spor-transition-duration-normal)"
|
1549
1555
|
},
|
@@ -1563,7 +1569,8 @@ function InfoSelect({
|
|
1563
1569
|
...menuProps,
|
1564
1570
|
state: state2,
|
1565
1571
|
listBoxRef: listboxRef,
|
1566
|
-
borderBottomRadius: "sm"
|
1572
|
+
borderBottomRadius: "sm",
|
1573
|
+
variant
|
1567
1574
|
},
|
1568
1575
|
props.children
|
1569
1576
|
)
|
@@ -1931,6 +1938,7 @@ var init_CountryCodeSelect = __esm({
|
|
1931
1938
|
label: t2(texts4.countryCode),
|
1932
1939
|
isLabelSrOnly: true,
|
1933
1940
|
items: callingCodes,
|
1941
|
+
variant: props.variant,
|
1934
1942
|
...props
|
1935
1943
|
},
|
1936
1944
|
(item) => /* @__PURE__ */ React85__namespace.default.createElement(reactStately.Item, { key: item.key }, item.key)
|
@@ -1958,6 +1966,7 @@ var init_PhoneNumberInput = __esm({
|
|
1958
1966
|
name,
|
1959
1967
|
value: externalValue,
|
1960
1968
|
onChange: externalOnChange,
|
1969
|
+
variant,
|
1961
1970
|
...boxProps
|
1962
1971
|
}, ref) => {
|
1963
1972
|
const { t: t2 } = useTranslation();
|
@@ -1980,7 +1989,8 @@ var init_PhoneNumberInput = __esm({
|
|
1980
1989
|
label: t2(texts5.countryCodeLabel),
|
1981
1990
|
width: "6.25rem",
|
1982
1991
|
height: "100%",
|
1983
|
-
value: "+47"
|
1992
|
+
value: "+47",
|
1993
|
+
variant
|
1984
1994
|
},
|
1985
1995
|
/* @__PURE__ */ React85__namespace.default.createElement(reactStately.Item, { key: "+47" }, "+47")
|
1986
1996
|
)
|
@@ -1995,7 +2005,8 @@ var init_PhoneNumberInput = __esm({
|
|
1995
2005
|
}),
|
1996
2006
|
name: name ? `${name}-country-code` : "country-code",
|
1997
2007
|
height: "100%",
|
1998
|
-
width: "6.25rem"
|
2008
|
+
width: "6.25rem",
|
2009
|
+
variant
|
1999
2010
|
}
|
2000
2011
|
)
|
2001
2012
|
), /* @__PURE__ */ React85__namespace.default.createElement(
|
@@ -2014,7 +2025,8 @@ var init_PhoneNumberInput = __esm({
|
|
2014
2025
|
});
|
2015
2026
|
},
|
2016
2027
|
position: "relative",
|
2017
|
-
left: "1px"
|
2028
|
+
left: "1px",
|
2029
|
+
variant
|
2018
2030
|
}
|
2019
2031
|
));
|
2020
2032
|
}
|
@@ -2117,8 +2129,8 @@ exports.Switch = void 0;
|
|
2117
2129
|
var init_Switch = __esm({
|
2118
2130
|
"src/input/Switch.tsx"() {
|
2119
2131
|
exports.Switch = react.forwardRef(
|
2120
|
-
({ size: size2 = "md", ...props }, ref) => {
|
2121
|
-
return /* @__PURE__ */ React85__namespace.default.createElement(react.Switch, { size: size2, ...props, ref });
|
2132
|
+
({ size: size2 = "md", as = "div", ...props }, ref) => {
|
2133
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Switch, { as, size: size2, ...props, ref });
|
2122
2134
|
}
|
2123
2135
|
);
|
2124
2136
|
}
|
@@ -13708,6 +13720,7 @@ var init_info_select = __esm({
|
|
13708
13720
|
label: {
|
13709
13721
|
position: "relative",
|
13710
13722
|
fontSize: ["mobile.xs", "desktop.sm"],
|
13723
|
+
marginTop: props.hasChosenValue ? 2 : 0,
|
13711
13724
|
...props.isLabelSrOnly ? srOnly2 : {}
|
13712
13725
|
},
|
13713
13726
|
innerButton: {
|
@@ -14010,15 +14023,12 @@ var init_travel_tag = __esm({
|
|
14010
14023
|
top: "0",
|
14011
14024
|
right: "0",
|
14012
14025
|
transform: "translate(50%, -50%)",
|
14013
|
-
zIndex: "
|
14014
|
-
stroke: "white",
|
14026
|
+
zIndex: "docked",
|
14015
14027
|
color: deviationIconColor[props.deviationLevel] || "inherit"
|
14016
14028
|
};
|
14017
14029
|
};
|
14018
14030
|
deviationIconColor = {
|
14019
14031
|
critical: "brightRed",
|
14020
|
-
major: "golden",
|
14021
|
-
minor: "golden",
|
14022
14032
|
info: "ocean"
|
14023
14033
|
};
|
14024
14034
|
}
|
@@ -14086,102 +14096,146 @@ var init_info_tag = __esm({
|
|
14086
14096
|
info_tag_default = config20;
|
14087
14097
|
}
|
14088
14098
|
});
|
14089
|
-
|
14090
|
-
|
14091
|
-
|
14092
|
-
|
14099
|
+
|
14100
|
+
// src/theme/utils/input-utils.ts
|
14101
|
+
function inputVariant(state2, props) {
|
14102
|
+
switch (state2) {
|
14103
|
+
case "base":
|
14104
|
+
return {
|
14105
|
+
...baseBackground("default", props),
|
14106
|
+
...baseBorder("default", props),
|
14107
|
+
_hover: {
|
14108
|
+
...baseBorder("hover", props)
|
14109
|
+
},
|
14110
|
+
_active: {
|
14111
|
+
...baseBackground("active", props),
|
14112
|
+
...baseBorder("default", props)
|
14113
|
+
},
|
14114
|
+
_selected: {
|
14115
|
+
...baseBackground("selected", props),
|
14116
|
+
...baseBorder("selected", props)
|
14117
|
+
}
|
14118
|
+
};
|
14119
|
+
case "floating":
|
14120
|
+
return {
|
14121
|
+
boxShadow: "sm",
|
14122
|
+
...floatingBackground("default", props),
|
14123
|
+
...floatingBorder("default", props),
|
14124
|
+
_hover: {
|
14125
|
+
...floatingBorder("hover", props),
|
14126
|
+
...floatingBackground("hover", props)
|
14127
|
+
},
|
14128
|
+
_active: {
|
14129
|
+
...floatingBorder("active", props),
|
14130
|
+
...floatingBackground("active", props)
|
14131
|
+
},
|
14132
|
+
_selected: {
|
14133
|
+
...floatingBorder("selected", props),
|
14134
|
+
...floatingBackground("selected", props)
|
14135
|
+
}
|
14136
|
+
};
|
14137
|
+
case "default":
|
14138
|
+
default:
|
14139
|
+
return {
|
14140
|
+
...baseBackground("default", props),
|
14141
|
+
...baseBorder("default", props),
|
14142
|
+
_hover: {
|
14143
|
+
...baseBorder("hover", props)
|
14144
|
+
},
|
14145
|
+
_active: {
|
14146
|
+
...baseBackground("active", props),
|
14147
|
+
...baseBorder("default", props)
|
14148
|
+
},
|
14149
|
+
_selected: {
|
14150
|
+
...baseBackground("selected", props),
|
14151
|
+
...baseBorder("selected", props)
|
14152
|
+
}
|
14153
|
+
};
|
14154
|
+
}
|
14155
|
+
}
|
14156
|
+
var inputBaseStyle;
|
14157
|
+
var init_input_utils = __esm({
|
14158
|
+
"src/theme/utils/input-utils.ts"() {
|
14093
14159
|
init_base_utils();
|
14160
|
+
init_floating_utils();
|
14094
14161
|
init_focus_utils();
|
14095
14162
|
init_surface_utils();
|
14096
|
-
|
14097
|
-
|
14098
|
-
|
14099
|
-
|
14100
|
-
|
14101
|
-
|
14102
|
-
|
14103
|
-
|
14104
|
-
|
14105
|
-
|
14106
|
-
|
14107
|
-
|
14108
|
-
|
14109
|
-
|
14110
|
-
|
14111
|
-
|
14163
|
+
inputBaseStyle = (props) => ({
|
14164
|
+
field: {
|
14165
|
+
appearance: "none",
|
14166
|
+
width: "100%",
|
14167
|
+
outline: "none",
|
14168
|
+
border: 0,
|
14169
|
+
borderRadius: "sm",
|
14170
|
+
transitionProperty: "common",
|
14171
|
+
transitionDuration: "fast",
|
14172
|
+
position: "relative",
|
14173
|
+
paddingX: 3,
|
14174
|
+
height: 8,
|
14175
|
+
fontSize: "mobile.md",
|
14176
|
+
_focusVisible: {
|
14177
|
+
...focusVisibleStyles(props)._focusVisible,
|
14178
|
+
outlineOffset: 0
|
14179
|
+
},
|
14180
|
+
_disabled: {
|
14181
|
+
...surface("disabled", props),
|
14182
|
+
...baseBorder("disabled", props),
|
14183
|
+
pointerEvents: "none"
|
14184
|
+
},
|
14185
|
+
_invalid: {
|
14186
|
+
...baseBorder("invalid", props),
|
14112
14187
|
_hover: {
|
14113
14188
|
...baseBorder("hover", props)
|
14114
|
-
},
|
14115
|
-
_active: {
|
14116
|
-
...baseBackground("active", props),
|
14117
|
-
...baseBorder("default", props)
|
14118
|
-
},
|
14119
|
-
_focusVisible: {
|
14120
|
-
...focusVisibleStyles(props)._focusVisible,
|
14121
|
-
outlineOffset: 0
|
14122
|
-
},
|
14123
|
-
_disabled: {
|
14124
|
-
...surface("disabled", props),
|
14125
|
-
...baseBorder("disabled", props),
|
14126
|
-
pointerEvents: "none"
|
14127
|
-
},
|
14128
|
-
_invalid: {
|
14129
|
-
...baseBorder("invalid", props),
|
14130
|
-
_hover: {
|
14131
|
-
...baseBorder("hover", props)
|
14132
|
-
}
|
14133
|
-
},
|
14134
|
-
" + label": {
|
14135
|
-
fontSize: ["mobile.sm", "desktop.sm"],
|
14136
|
-
top: "2px",
|
14137
|
-
left: props.paddingLeft || props.pl || 3,
|
14138
|
-
zIndex: 2,
|
14139
|
-
position: "absolute",
|
14140
|
-
marginY: 2,
|
14141
|
-
transition: ".1s ease-out",
|
14142
|
-
transformOrigin: "top left",
|
14143
|
-
cursor: "text"
|
14144
|
-
},
|
14145
|
-
"&:not(:placeholder-shown)": {
|
14146
|
-
paddingTop: "1rem",
|
14147
|
-
"& + label": {
|
14148
|
-
transform: "scale(0.825) translateY(-10px)"
|
14149
|
-
}
|
14150
14189
|
}
|
14151
14190
|
},
|
14152
|
-
|
14153
|
-
|
14191
|
+
" + label": {
|
14192
|
+
fontSize: ["mobile.sm", "desktop.sm"],
|
14193
|
+
top: "2px",
|
14194
|
+
left: props.paddingLeft || props.pl || 3,
|
14195
|
+
zIndex: 2,
|
14196
|
+
position: "absolute",
|
14197
|
+
marginY: 2,
|
14198
|
+
transition: ".1s ease-out",
|
14199
|
+
transformOrigin: "top left",
|
14200
|
+
cursor: "text"
|
14154
14201
|
},
|
14155
|
-
|
14156
|
-
|
14157
|
-
|
14202
|
+
"&:not(:placeholder-shown)": {
|
14203
|
+
paddingTop: "1rem",
|
14204
|
+
"& + label": {
|
14205
|
+
transform: "scale(0.825) translateY(-10px)"
|
14158
14206
|
}
|
14159
14207
|
}
|
14208
|
+
},
|
14209
|
+
element: {
|
14210
|
+
height: "100%"
|
14211
|
+
},
|
14212
|
+
group: {
|
14213
|
+
":has(:disabled)": {
|
14214
|
+
...baseText("disabled", props)
|
14215
|
+
}
|
14216
|
+
}
|
14217
|
+
});
|
14218
|
+
}
|
14219
|
+
});
|
14220
|
+
var helpers14, config21, input_default;
|
14221
|
+
var init_input2 = __esm({
|
14222
|
+
"src/theme/components/input.ts"() {
|
14223
|
+
init_dist4();
|
14224
|
+
init_input_utils();
|
14225
|
+
helpers14 = react.createMultiStyleConfigHelpers(inputAnatomy.keys);
|
14226
|
+
config21 = helpers14.defineMultiStyleConfig({
|
14227
|
+
baseStyle: (props) => ({
|
14228
|
+
...inputBaseStyle(props)
|
14160
14229
|
}),
|
14161
14230
|
variants: {
|
14162
14231
|
base: (props) => ({
|
14163
14232
|
field: {
|
14164
|
-
...
|
14165
|
-
...baseBorder("default", props)
|
14233
|
+
...inputVariant("base", props)
|
14166
14234
|
}
|
14167
14235
|
}),
|
14168
14236
|
floating: (props) => ({
|
14169
14237
|
field: {
|
14170
|
-
|
14171
|
-
...floatingBackground("default", props),
|
14172
|
-
...floatingBorder("default", props),
|
14173
|
-
_hover: {
|
14174
|
-
...floatingBorder("hover", props),
|
14175
|
-
...floatingBackground("hover", props)
|
14176
|
-
},
|
14177
|
-
_active: {
|
14178
|
-
...floatingBorder("active", props),
|
14179
|
-
...floatingBackground("active", props)
|
14180
|
-
},
|
14181
|
-
_selected: {
|
14182
|
-
...floatingBorder("selected", props),
|
14183
|
-
...floatingBackground("selected", props)
|
14184
|
-
}
|
14238
|
+
...inputVariant("floating", props)
|
14185
14239
|
}
|
14186
14240
|
})
|
14187
14241
|
},
|
@@ -14451,6 +14505,7 @@ var init_listbox = __esm({
|
|
14451
14505
|
init_ghost_utils();
|
14452
14506
|
init_surface_utils();
|
14453
14507
|
init_outline_utils();
|
14508
|
+
init_floating_utils();
|
14454
14509
|
parts11 = anatomy("ListBox").parts(
|
14455
14510
|
"container",
|
14456
14511
|
"item",
|
@@ -14467,8 +14522,7 @@ var init_listbox = __esm({
|
|
14467
14522
|
maxHeight: "50vh",
|
14468
14523
|
width: "100%",
|
14469
14524
|
listStyle: "none",
|
14470
|
-
borderBottomRadius: "sm"
|
14471
|
-
...baseBorder("default", props)
|
14525
|
+
borderBottomRadius: "sm"
|
14472
14526
|
},
|
14473
14527
|
item: {
|
14474
14528
|
paddingX: 2,
|
@@ -14500,7 +14554,22 @@ var init_listbox = __esm({
|
|
14500
14554
|
...ghostText("selected", props)
|
14501
14555
|
}
|
14502
14556
|
}
|
14503
|
-
})
|
14557
|
+
}),
|
14558
|
+
variants: {
|
14559
|
+
base: (props) => ({
|
14560
|
+
container: {
|
14561
|
+
...baseBorder("default", props)
|
14562
|
+
}
|
14563
|
+
}),
|
14564
|
+
floating: (props) => ({
|
14565
|
+
container: {
|
14566
|
+
...floatingBorder("default", props)
|
14567
|
+
}
|
14568
|
+
})
|
14569
|
+
},
|
14570
|
+
defaultProps: {
|
14571
|
+
variant: "base"
|
14572
|
+
}
|
14504
14573
|
});
|
14505
14574
|
listbox_default = config24;
|
14506
14575
|
}
|
@@ -15186,7 +15255,7 @@ var init_select = __esm({
|
|
15186
15255
|
"src/theme/components/select.ts"() {
|
15187
15256
|
init_dist4();
|
15188
15257
|
init_base_utils();
|
15189
|
-
|
15258
|
+
init_input_utils();
|
15190
15259
|
parts18 = selectAnatomy.extend("root");
|
15191
15260
|
helpers26 = react.createMultiStyleConfigHelpers(parts18.keys);
|
15192
15261
|
config34 = helpers26.defineMultiStyleConfig({
|
@@ -15197,7 +15266,7 @@ var init_select = __esm({
|
|
15197
15266
|
position: "relative",
|
15198
15267
|
"& + label": {
|
15199
15268
|
fontSize: ["mobile.sm", "desktop.sm"],
|
15200
|
-
top: "
|
15269
|
+
top: "0.2rem",
|
15201
15270
|
left: 3,
|
15202
15271
|
zIndex: 2,
|
15203
15272
|
position: "absolute",
|
@@ -15210,10 +15279,9 @@ var init_select = __esm({
|
|
15210
15279
|
}
|
15211
15280
|
},
|
15212
15281
|
field: {
|
15213
|
-
...
|
15282
|
+
...inputBaseStyle(props).field,
|
15214
15283
|
appearance: "none",
|
15215
|
-
paddingTop: "1rem"
|
15216
|
-
"option, optgroup": {}
|
15284
|
+
paddingTop: "1rem"
|
15217
15285
|
},
|
15218
15286
|
icon: {
|
15219
15287
|
width: 5,
|
@@ -15227,7 +15295,22 @@ var init_select = __esm({
|
|
15227
15295
|
...baseText("disabled", props)
|
15228
15296
|
}
|
15229
15297
|
}
|
15230
|
-
})
|
15298
|
+
}),
|
15299
|
+
variants: {
|
15300
|
+
base: (props) => ({
|
15301
|
+
field: {
|
15302
|
+
...inputVariant("base", props)
|
15303
|
+
}
|
15304
|
+
}),
|
15305
|
+
floating: (props) => ({
|
15306
|
+
field: {
|
15307
|
+
...inputVariant("floating", props)
|
15308
|
+
}
|
15309
|
+
})
|
15310
|
+
},
|
15311
|
+
defaultProps: {
|
15312
|
+
variant: "base"
|
15313
|
+
}
|
15231
15314
|
});
|
15232
15315
|
select_default = config34;
|
15233
15316
|
}
|
@@ -15779,10 +15862,10 @@ var init_tabs = __esm({
|
|
15779
15862
|
var config40, textarea_default;
|
15780
15863
|
var init_textarea = __esm({
|
15781
15864
|
"src/theme/components/textarea.ts"() {
|
15782
|
-
|
15865
|
+
init_input_utils();
|
15783
15866
|
config40 = react.defineStyleConfig({
|
15784
15867
|
baseStyle: (props) => ({
|
15785
|
-
...
|
15868
|
+
...inputBaseStyle(props).field,
|
15786
15869
|
minHeight: "5rem",
|
15787
15870
|
verticalAlign: "top",
|
15788
15871
|
appearance: "none",
|
@@ -15795,7 +15878,18 @@ var init_textarea = __esm({
|
|
15795
15878
|
transform: "scale(0.825) translateY(-10px)"
|
15796
15879
|
}
|
15797
15880
|
}
|
15798
|
-
})
|
15881
|
+
}),
|
15882
|
+
variants: {
|
15883
|
+
base: (props) => ({
|
15884
|
+
...inputVariant("base", props)
|
15885
|
+
}),
|
15886
|
+
floating: (props) => ({
|
15887
|
+
...inputVariant("floating", props)
|
15888
|
+
})
|
15889
|
+
},
|
15890
|
+
defaultProps: {
|
15891
|
+
variant: "base"
|
15892
|
+
}
|
15799
15893
|
});
|
15800
15894
|
textarea_default = config40;
|
15801
15895
|
}
|
package/dist/index.mjs
CHANGED
@@ -1 +1 @@
|
|
1
|
-
export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-
|
1
|
+
export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-PH4RK5L3.mjs';
|
package/package.json
CHANGED
package/src/input/Combobox.tsx
CHANGED
@@ -38,6 +38,7 @@ export type ComboboxProps<T> = AriaComboBoxProps<T> & {
|
|
38
38
|
inputRef?: React.RefObject<HTMLInputElement>;
|
39
39
|
/** If you want to allow an empty collection */
|
40
40
|
allowsEmptyCollection?: boolean;
|
41
|
+
variant?: "base" | "floating";
|
41
42
|
} & OverridableInputProps;
|
42
43
|
/**
|
43
44
|
* A combobox is a combination of an input and a list of suggestions.
|
@@ -87,6 +88,7 @@ export function Combobox<T extends object>({
|
|
87
88
|
emptyContent,
|
88
89
|
inputRef: externalInputRef,
|
89
90
|
allowsEmptyCollection,
|
91
|
+
variant,
|
90
92
|
...rest
|
91
93
|
}: ComboboxProps<T>) {
|
92
94
|
const { contains } = useFilter({ sensitivity: "base" });
|
@@ -147,6 +149,7 @@ export function Combobox<T extends object>({
|
|
147
149
|
ref={inputRef}
|
148
150
|
role="combobox"
|
149
151
|
label={label}
|
152
|
+
variant={variant}
|
150
153
|
aria-expanded={state.isOpen}
|
151
154
|
aria-autocomplete="list"
|
152
155
|
aria-controls={listboxId}
|
@@ -196,6 +199,7 @@ export function Combobox<T extends object>({
|
|
196
199
|
listBoxRef={listBoxRef}
|
197
200
|
emptyContent={emptyContent}
|
198
201
|
maxWidth={inputWidth}
|
202
|
+
variant={variant}
|
199
203
|
>
|
200
204
|
{rest.children}
|
201
205
|
</ListBox>
|
@@ -26,6 +26,7 @@ type CountryCodeSelectProps = {
|
|
26
26
|
name: string;
|
27
27
|
width?: BoxProps["width"];
|
28
28
|
height?: BoxProps["height"];
|
29
|
+
variant?: "base" | "floating";
|
29
30
|
};
|
30
31
|
export const CountryCodeSelect = (props: CountryCodeSelectProps) => {
|
31
32
|
const { t } = useTranslation();
|
@@ -35,6 +36,7 @@ export const CountryCodeSelect = (props: CountryCodeSelectProps) => {
|
|
35
36
|
label={t(texts.countryCode)}
|
36
37
|
isLabelSrOnly={true}
|
37
38
|
items={callingCodes as any}
|
39
|
+
variant={props.variant}
|
38
40
|
{...props}
|
39
41
|
>
|
40
42
|
{(item) => <Item key={item.key}>{item.key}</Item>}
|
package/src/input/InfoSelect.tsx
CHANGED
@@ -178,18 +178,19 @@ export function InfoSelect<T extends object>({
|
|
178
178
|
|
179
179
|
const stateStyle = "completed";
|
180
180
|
|
181
|
+
const hasChosenValue = state.selectedItem !== null;
|
182
|
+
|
181
183
|
const styles = useMultiStyleConfig("InfoSelect", {
|
182
184
|
isOpen: state.isOpen,
|
183
185
|
isLabelSrOnly,
|
184
186
|
variant,
|
185
187
|
stateStyle,
|
188
|
+
hasChosenValue,
|
186
189
|
});
|
187
190
|
const { buttonProps } = useButton(triggerProps, triggerRef);
|
188
191
|
const { t } = useTranslation();
|
189
192
|
const formControl = useFormControlProps(props);
|
190
193
|
|
191
|
-
const hasChosenValue = state.selectedItem !== null;
|
192
|
-
|
193
194
|
return (
|
194
195
|
<Box sx={styles.container}>
|
195
196
|
<HiddenSelect
|
@@ -226,7 +227,7 @@ export function InfoSelect<T extends object>({
|
|
226
227
|
{...valueProps}
|
227
228
|
h={isLabelSrOnly ? "" : !hasChosenValue ? "0px" : "18px"}
|
228
229
|
hidden={!hasChosenValue}
|
229
|
-
transform={isLabelSrOnly ? "" : "scale(1) translateY(-
|
230
|
+
transform={isLabelSrOnly ? "" : "scale(1) translateY(-12px)"}
|
230
231
|
transitionProperty={"var(--spor-transition-property-common)"}
|
231
232
|
transitionDuration={"var(--spor-transition-duration-normal)"}
|
232
233
|
>
|
@@ -253,6 +254,7 @@ export function InfoSelect<T extends object>({
|
|
253
254
|
state={state}
|
254
255
|
listBoxRef={listboxRef}
|
255
256
|
borderBottomRadius="sm"
|
257
|
+
variant={variant}
|
256
258
|
>
|
257
259
|
{props.children}
|
258
260
|
</ListBox>
|
package/src/input/ListBox.tsx
CHANGED
@@ -29,6 +29,7 @@ type ListBoxProps<T> = AriaListBoxProps<T> &
|
|
29
29
|
/** UI to render if the collection is empty */
|
30
30
|
emptyContent?: React.ReactNode;
|
31
31
|
maxWidth?: BoxProps["maxWidth"];
|
32
|
+
variant?: "base" | "floating";
|
32
33
|
};
|
33
34
|
|
34
35
|
/**
|
@@ -70,10 +71,11 @@ export function ListBox<T extends object>({
|
|
70
71
|
listBoxRef,
|
71
72
|
state,
|
72
73
|
maxWidth,
|
74
|
+
variant,
|
73
75
|
...props
|
74
76
|
}: ListBoxProps<T>) {
|
75
77
|
const { listBoxProps } = useListBox(props, state, listBoxRef);
|
76
|
-
const styles = useMultiStyleConfig("ListBox", {});
|
78
|
+
const styles = useMultiStyleConfig("ListBox", { variant });
|
77
79
|
|
78
80
|
return (
|
79
81
|
<List
|
@@ -82,6 +84,7 @@ export function ListBox<T extends object>({
|
|
82
84
|
sx={styles.container}
|
83
85
|
aria-busy={isLoading}
|
84
86
|
maxWidth={maxWidth}
|
87
|
+
variant={variant}
|
85
88
|
>
|
86
89
|
{state.collection.size === 0 && props.emptyContent}
|
87
90
|
{Array.from(state.collection).map((item) =>
|