@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/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(-10px)",
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: "banner",
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
- var helpers14, config21, input_default;
14090
- var init_input2 = __esm({
14091
- "src/theme/components/input.ts"() {
14092
- init_dist4();
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
- init_floating_utils();
14097
- helpers14 = react.createMultiStyleConfigHelpers(inputAnatomy.keys);
14098
- config21 = helpers14.defineMultiStyleConfig({
14099
- baseStyle: (props) => ({
14100
- field: {
14101
- appearance: "none",
14102
- width: "100%",
14103
- outline: "none",
14104
- border: 0,
14105
- borderRadius: "sm",
14106
- transitionProperty: "common",
14107
- transitionDuration: "fast",
14108
- position: "relative",
14109
- paddingX: 3,
14110
- height: 8,
14111
- fontSize: "mobile.md",
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
- element: {
14153
- height: "100%"
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
- group: {
14156
- ":has(:disabled)": {
14157
- ...baseText("disabled", props)
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
- ...baseBackground("default", props),
14165
- ...baseBorder("default", props)
14233
+ ...inputVariant("base", props)
14166
14234
  }
14167
14235
  }),
14168
14236
  floating: (props) => ({
14169
14237
  field: {
14170
- boxShadow: "sm",
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
- init_input2();
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: "2px",
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
- ...input_default.baseStyle(props).field,
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
- init_input2();
15865
+ init_input_utils();
15783
15866
  config40 = react.defineStyleConfig({
15784
15867
  baseStyle: (props) => ({
15785
- ...input_default.baseStyle(props).field,
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-5HRYDWQ5.mjs';
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vygruppen/spor-react",
3
- "version": "10.3.0",
3
+ "version": "10.4.1",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
@@ -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>}
@@ -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(-10px)"}
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>
@@ -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) =>