@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.
@@ -1,5 +1,5 @@
1
1
 
2
- > @vygruppen/spor-react@10.3.0 build
2
+ > @vygruppen/spor-react@10.4.1 build
3
3
  > tsup src/index.tsx --dts --treeshake --format cjs,esm
4
4
 
5
5
  CLI Building entry: src/index.tsx
@@ -10,11 +10,11 @@
10
10
  ESM Build start
11
11
  DTS Build start
12
12
  ESM dist/index.mjs 2.15 KB
13
- ESM dist/CountryCodeSelect-KCPHU7A7.mjs 1.19 KB
14
- ESM dist/chunk-5HRYDWQ5.mjs 417.51 KB
15
- ESM ⚡️ Build success in 2131ms
16
- CJS dist/index.js 529.34 KB
17
- CJS ⚡️ Build success in 2132ms
18
- DTS ⚡️ Build success in 15282ms
19
- DTS dist/index.d.ts 315.84 KB
20
- DTS dist/index.d.mts 315.84 KB
13
+ ESM dist/CountryCodeSelect-QNKQE3C6.mjs 1.22 KB
14
+ ESM dist/chunk-PH4RK5L3.mjs 419.16 KB
15
+ ESM ⚡️ Build success in 2411ms
16
+ CJS dist/index.js 531.22 KB
17
+ CJS ⚡️ Build success in 2412ms
18
+ DTS ⚡️ Build success in 16011ms
19
+ DTS dist/index.d.ts 335.24 KB
20
+ DTS dist/index.d.mts 335.24 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @vygruppen/spor-react
2
2
 
3
+ ## 10.4.1
4
+
5
+ ### Patch Changes
6
+
7
+ - aeefe3f: Changed styling of LineTag deviation icons to be more similar to the design
8
+ - 72b88be: adjusted z-index of the TravelTag deviation icon, so that it does not end atop banners and dropdowns e.t.c
9
+
10
+ ## 10.4.0
11
+
12
+ ### Minor Changes
13
+
14
+ - 5c24b42: Add variants to all form components
15
+
16
+ Components: Input, Textarea, PasswordInput, PhoneNumberInput, Textarea, NativeSelect, InfoSelect, Combobox
17
+
18
+ ### Patch Changes
19
+
20
+ - 80669c3: Switch: Update accessibility
21
+
3
22
  ## 10.3.0
4
23
 
5
24
  ### Minor Changes
@@ -1,4 +1,4 @@
1
- import { createTexts, useTranslation, InfoSelect, Item } from './chunk-5HRYDWQ5.mjs';
1
+ import { createTexts, useTranslation, InfoSelect, Item } from './chunk-PH4RK5L3.mjs';
2
2
  import React from 'react';
3
3
  import { getSupportedCallingCodes } from 'awesome-phonenumber';
4
4
 
@@ -22,6 +22,7 @@ var CountryCodeSelect = (props) => {
22
22
  label: t(texts.countryCode),
23
23
  isLabelSrOnly: true,
24
24
  items: callingCodes,
25
+ variant: props.variant,
25
26
  ...props
26
27
  },
27
28
  (item) => /* @__PURE__ */ React.createElement(Item, { key: item.key }, item.key)
@@ -1052,6 +1052,7 @@ function Combobox({
1052
1052
  emptyContent,
1053
1053
  inputRef: externalInputRef,
1054
1054
  allowsEmptyCollection,
1055
+ variant,
1055
1056
  ...rest
1056
1057
  }) {
1057
1058
  const { contains: contains2 } = useFilter({ sensitivity: "base" });
@@ -1105,6 +1106,7 @@ function Combobox({
1105
1106
  ref: inputRef,
1106
1107
  role: "combobox",
1107
1108
  label,
1109
+ variant,
1108
1110
  "aria-expanded": state2.isOpen,
1109
1111
  "aria-autocomplete": "list",
1110
1112
  "aria-controls": listboxId,
@@ -1146,7 +1148,8 @@ function Combobox({
1146
1148
  id: listboxId,
1147
1149
  listBoxRef,
1148
1150
  emptyContent,
1149
- maxWidth: inputWidth
1151
+ maxWidth: inputWidth,
1152
+ variant
1150
1153
  },
1151
1154
  rest.children
1152
1155
  )
@@ -1249,10 +1252,11 @@ function ListBox({
1249
1252
  listBoxRef,
1250
1253
  state: state2,
1251
1254
  maxWidth,
1255
+ variant,
1252
1256
  ...props
1253
1257
  }) {
1254
1258
  const { listBoxProps } = useListBox(props, state2, listBoxRef);
1255
- const styles3 = useMultiStyleConfig("ListBox", {});
1259
+ const styles3 = useMultiStyleConfig("ListBox", { variant });
1256
1260
  return /* @__PURE__ */ React84__default.createElement(
1257
1261
  List,
1258
1262
  {
@@ -1260,7 +1264,8 @@ function ListBox({
1260
1264
  ref: listBoxRef,
1261
1265
  sx: styles3.container,
1262
1266
  "aria-busy": isLoading,
1263
- maxWidth
1267
+ maxWidth,
1268
+ variant
1264
1269
  },
1265
1270
  state2.collection.size === 0 && props.emptyContent,
1266
1271
  Array.from(state2.collection).map(
@@ -1372,16 +1377,17 @@ function InfoSelect({
1372
1377
  triggerRef
1373
1378
  );
1374
1379
  const stateStyle = "completed";
1380
+ const hasChosenValue = state2.selectedItem !== null;
1375
1381
  const styles3 = useMultiStyleConfig("InfoSelect", {
1376
1382
  isOpen: state2.isOpen,
1377
1383
  isLabelSrOnly,
1378
1384
  variant,
1379
- stateStyle
1385
+ stateStyle,
1386
+ hasChosenValue
1380
1387
  });
1381
1388
  const { buttonProps } = useButton(triggerProps, triggerRef);
1382
1389
  const { t: t2 } = useTranslation();
1383
1390
  const formControl = useFormControlProps(props);
1384
- const hasChosenValue = state2.selectedItem !== null;
1385
1391
  return /* @__PURE__ */ React84__default.createElement(Box, { sx: styles3.container }, /* @__PURE__ */ React84__default.createElement(
1386
1392
  HiddenSelect,
1387
1393
  {
@@ -1421,7 +1427,7 @@ function InfoSelect({
1421
1427
  ...valueProps,
1422
1428
  h: isLabelSrOnly ? "" : !hasChosenValue ? "0px" : "18px",
1423
1429
  hidden: !hasChosenValue,
1424
- transform: isLabelSrOnly ? "" : "scale(1) translateY(-10px)",
1430
+ transform: isLabelSrOnly ? "" : "scale(1) translateY(-12px)",
1425
1431
  transitionProperty: "var(--spor-transition-property-common)",
1426
1432
  transitionDuration: "var(--spor-transition-duration-normal)"
1427
1433
  },
@@ -1441,7 +1447,8 @@ function InfoSelect({
1441
1447
  ...menuProps,
1442
1448
  state: state2,
1443
1449
  listBoxRef: listboxRef,
1444
- borderBottomRadius: "sm"
1450
+ borderBottomRadius: "sm",
1451
+ variant
1445
1452
  },
1446
1453
  props.children
1447
1454
  )
@@ -1747,6 +1754,7 @@ var PhoneNumberInput = forwardRef(
1747
1754
  name,
1748
1755
  value: externalValue,
1749
1756
  onChange: externalOnChange,
1757
+ variant,
1750
1758
  ...boxProps
1751
1759
  }, ref) => {
1752
1760
  const { t: t2 } = useTranslation();
@@ -1769,7 +1777,8 @@ var PhoneNumberInput = forwardRef(
1769
1777
  label: t2(texts4.countryCodeLabel),
1770
1778
  width: "6.25rem",
1771
1779
  height: "100%",
1772
- value: "+47"
1780
+ value: "+47",
1781
+ variant
1773
1782
  },
1774
1783
  /* @__PURE__ */ React84__default.createElement(Item, { key: "+47" }, "+47")
1775
1784
  )
@@ -1784,7 +1793,8 @@ var PhoneNumberInput = forwardRef(
1784
1793
  }),
1785
1794
  name: name ? `${name}-country-code` : "country-code",
1786
1795
  height: "100%",
1787
- width: "6.25rem"
1796
+ width: "6.25rem",
1797
+ variant
1788
1798
  }
1789
1799
  )
1790
1800
  ), /* @__PURE__ */ React84__default.createElement(
@@ -1803,7 +1813,8 @@ var PhoneNumberInput = forwardRef(
1803
1813
  });
1804
1814
  },
1805
1815
  position: "relative",
1806
- left: "1px"
1816
+ left: "1px",
1817
+ variant
1807
1818
  }
1808
1819
  ));
1809
1820
  }
@@ -1822,7 +1833,7 @@ var texts4 = createTexts({
1822
1833
  sv: "Landskod"
1823
1834
  }
1824
1835
  });
1825
- var LazyCountryCodeSelect = React84__default.lazy(() => import('./CountryCodeSelect-KCPHU7A7.mjs'));
1836
+ var LazyCountryCodeSelect = React84__default.lazy(() => import('./CountryCodeSelect-QNKQE3C6.mjs'));
1826
1837
  var Radio = forwardRef((props, ref) => {
1827
1838
  return /* @__PURE__ */ React84__default.createElement(Radio$1, { ...props, ref });
1828
1839
  });
@@ -1884,8 +1895,8 @@ var texts5 = createTexts({
1884
1895
  }
1885
1896
  });
1886
1897
  var Switch = forwardRef(
1887
- ({ size: size2 = "md", ...props }, ref) => {
1888
- return /* @__PURE__ */ React84__default.createElement(Switch$1, { size: size2, ...props, ref });
1898
+ ({ size: size2 = "md", as = "div", ...props }, ref) => {
1899
+ return /* @__PURE__ */ React84__default.createElement(Switch$1, { as, size: size2, ...props, ref });
1889
1900
  }
1890
1901
  );
1891
1902
  var Textarea = forwardRef((props, ref) => {
@@ -12105,6 +12116,7 @@ var config18 = helpers11.defineMultiStyleConfig({
12105
12116
  label: {
12106
12117
  position: "relative",
12107
12118
  fontSize: ["mobile.xs", "desktop.sm"],
12119
+ marginTop: props.hasChosenValue ? 2 : 0,
12108
12120
  ...props.isLabelSrOnly ? srOnly2 : {}
12109
12121
  },
12110
12122
  innerButton: {
@@ -12401,15 +12413,12 @@ var getDeviationIconStyle = (props) => {
12401
12413
  top: "0",
12402
12414
  right: "0",
12403
12415
  transform: "translate(50%, -50%)",
12404
- zIndex: "banner",
12405
- stroke: "white",
12416
+ zIndex: "docked",
12406
12417
  color: deviationIconColor[props.deviationLevel] || "inherit"
12407
12418
  };
12408
12419
  };
12409
12420
  var deviationIconColor = {
12410
12421
  critical: "brightRed",
12411
- major: "golden",
12412
- minor: "golden",
12413
12422
  info: "ocean"
12414
12423
  };
12415
12424
 
@@ -12471,79 +12480,28 @@ var config20 = helpers13.defineMultiStyleConfig({
12471
12480
  }
12472
12481
  });
12473
12482
  var info_tag_default = config20;
12474
- var helpers14 = createMultiStyleConfigHelpers$1(inputAnatomy.keys);
12475
- var config21 = helpers14.defineMultiStyleConfig({
12476
- baseStyle: (props) => ({
12477
- field: {
12478
- appearance: "none",
12479
- width: "100%",
12480
- outline: "none",
12481
- border: 0,
12482
- borderRadius: "sm",
12483
- transitionProperty: "common",
12484
- transitionDuration: "fast",
12485
- position: "relative",
12486
- paddingX: 3,
12487
- height: 8,
12488
- fontSize: "mobile.md",
12489
- _hover: {
12490
- ...baseBorder("hover", props)
12491
- },
12492
- _active: {
12493
- ...baseBackground("active", props),
12494
- ...baseBorder("default", props)
12495
- },
12496
- _focusVisible: {
12497
- ...focusVisibleStyles(props)._focusVisible,
12498
- outlineOffset: 0
12499
- },
12500
- _disabled: {
12501
- ...surface("disabled", props),
12502
- ...baseBorder("disabled", props),
12503
- pointerEvents: "none"
12504
- },
12505
- _invalid: {
12506
- ...baseBorder("invalid", props),
12483
+
12484
+ // src/theme/utils/input-utils.ts
12485
+ function inputVariant(state2, props) {
12486
+ switch (state2) {
12487
+ case "base":
12488
+ return {
12489
+ ...baseBackground("default", props),
12490
+ ...baseBorder("default", props),
12507
12491
  _hover: {
12508
12492
  ...baseBorder("hover", props)
12493
+ },
12494
+ _active: {
12495
+ ...baseBackground("active", props),
12496
+ ...baseBorder("default", props)
12497
+ },
12498
+ _selected: {
12499
+ ...baseBackground("selected", props),
12500
+ ...baseBorder("selected", props)
12509
12501
  }
12510
- },
12511
- " + label": {
12512
- fontSize: ["mobile.sm", "desktop.sm"],
12513
- top: "2px",
12514
- left: props.paddingLeft || props.pl || 3,
12515
- zIndex: 2,
12516
- position: "absolute",
12517
- marginY: 2,
12518
- transition: ".1s ease-out",
12519
- transformOrigin: "top left",
12520
- cursor: "text"
12521
- },
12522
- "&:not(:placeholder-shown)": {
12523
- paddingTop: "1rem",
12524
- "& + label": {
12525
- transform: "scale(0.825) translateY(-10px)"
12526
- }
12527
- }
12528
- },
12529
- element: {
12530
- height: "100%"
12531
- },
12532
- group: {
12533
- ":has(:disabled)": {
12534
- ...baseText("disabled", props)
12535
- }
12536
- }
12537
- }),
12538
- variants: {
12539
- base: (props) => ({
12540
- field: {
12541
- ...baseBackground("default", props),
12542
- ...baseBorder("default", props)
12543
- }
12544
- }),
12545
- floating: (props) => ({
12546
- field: {
12502
+ };
12503
+ case "floating":
12504
+ return {
12547
12505
  boxShadow: "sm",
12548
12506
  ...floatingBackground("default", props),
12549
12507
  ...floatingBorder("default", props),
@@ -12559,6 +12517,97 @@ var config21 = helpers14.defineMultiStyleConfig({
12559
12517
  ...floatingBorder("selected", props),
12560
12518
  ...floatingBackground("selected", props)
12561
12519
  }
12520
+ };
12521
+ case "default":
12522
+ default:
12523
+ return {
12524
+ ...baseBackground("default", props),
12525
+ ...baseBorder("default", props),
12526
+ _hover: {
12527
+ ...baseBorder("hover", props)
12528
+ },
12529
+ _active: {
12530
+ ...baseBackground("active", props),
12531
+ ...baseBorder("default", props)
12532
+ },
12533
+ _selected: {
12534
+ ...baseBackground("selected", props),
12535
+ ...baseBorder("selected", props)
12536
+ }
12537
+ };
12538
+ }
12539
+ }
12540
+ var inputBaseStyle = (props) => ({
12541
+ field: {
12542
+ appearance: "none",
12543
+ width: "100%",
12544
+ outline: "none",
12545
+ border: 0,
12546
+ borderRadius: "sm",
12547
+ transitionProperty: "common",
12548
+ transitionDuration: "fast",
12549
+ position: "relative",
12550
+ paddingX: 3,
12551
+ height: 8,
12552
+ fontSize: "mobile.md",
12553
+ _focusVisible: {
12554
+ ...focusVisibleStyles(props)._focusVisible,
12555
+ outlineOffset: 0
12556
+ },
12557
+ _disabled: {
12558
+ ...surface("disabled", props),
12559
+ ...baseBorder("disabled", props),
12560
+ pointerEvents: "none"
12561
+ },
12562
+ _invalid: {
12563
+ ...baseBorder("invalid", props),
12564
+ _hover: {
12565
+ ...baseBorder("hover", props)
12566
+ }
12567
+ },
12568
+ " + label": {
12569
+ fontSize: ["mobile.sm", "desktop.sm"],
12570
+ top: "2px",
12571
+ left: props.paddingLeft || props.pl || 3,
12572
+ zIndex: 2,
12573
+ position: "absolute",
12574
+ marginY: 2,
12575
+ transition: ".1s ease-out",
12576
+ transformOrigin: "top left",
12577
+ cursor: "text"
12578
+ },
12579
+ "&:not(:placeholder-shown)": {
12580
+ paddingTop: "1rem",
12581
+ "& + label": {
12582
+ transform: "scale(0.825) translateY(-10px)"
12583
+ }
12584
+ }
12585
+ },
12586
+ element: {
12587
+ height: "100%"
12588
+ },
12589
+ group: {
12590
+ ":has(:disabled)": {
12591
+ ...baseText("disabled", props)
12592
+ }
12593
+ }
12594
+ });
12595
+
12596
+ // src/theme/components/input.ts
12597
+ var helpers14 = createMultiStyleConfigHelpers$1(inputAnatomy.keys);
12598
+ var config21 = helpers14.defineMultiStyleConfig({
12599
+ baseStyle: (props) => ({
12600
+ ...inputBaseStyle(props)
12601
+ }),
12602
+ variants: {
12603
+ base: (props) => ({
12604
+ field: {
12605
+ ...inputVariant("base", props)
12606
+ }
12607
+ }),
12608
+ floating: (props) => ({
12609
+ field: {
12610
+ ...inputVariant("floating", props)
12562
12611
  }
12563
12612
  })
12564
12613
  },
@@ -12812,8 +12861,7 @@ var config24 = helpers16.defineMultiStyleConfig({
12812
12861
  maxHeight: "50vh",
12813
12862
  width: "100%",
12814
12863
  listStyle: "none",
12815
- borderBottomRadius: "sm",
12816
- ...baseBorder("default", props)
12864
+ borderBottomRadius: "sm"
12817
12865
  },
12818
12866
  item: {
12819
12867
  paddingX: 2,
@@ -12845,7 +12893,22 @@ var config24 = helpers16.defineMultiStyleConfig({
12845
12893
  ...ghostText("selected", props)
12846
12894
  }
12847
12895
  }
12848
- })
12896
+ }),
12897
+ variants: {
12898
+ base: (props) => ({
12899
+ container: {
12900
+ ...baseBorder("default", props)
12901
+ }
12902
+ }),
12903
+ floating: (props) => ({
12904
+ container: {
12905
+ ...floatingBorder("default", props)
12906
+ }
12907
+ })
12908
+ },
12909
+ defaultProps: {
12910
+ variant: "base"
12911
+ }
12849
12912
  });
12850
12913
  var listbox_default = config24;
12851
12914
  var parts12 = anatomy$1("media-controller-button").parts("container", "icon");
@@ -13465,7 +13528,7 @@ var config34 = helpers26.defineMultiStyleConfig({
13465
13528
  position: "relative",
13466
13529
  "& + label": {
13467
13530
  fontSize: ["mobile.sm", "desktop.sm"],
13468
- top: "2px",
13531
+ top: "0.2rem",
13469
13532
  left: 3,
13470
13533
  zIndex: 2,
13471
13534
  position: "absolute",
@@ -13478,10 +13541,9 @@ var config34 = helpers26.defineMultiStyleConfig({
13478
13541
  }
13479
13542
  },
13480
13543
  field: {
13481
- ...input_default.baseStyle(props).field,
13544
+ ...inputBaseStyle(props).field,
13482
13545
  appearance: "none",
13483
- paddingTop: "1rem",
13484
- "option, optgroup": {}
13546
+ paddingTop: "1rem"
13485
13547
  },
13486
13548
  icon: {
13487
13549
  width: 5,
@@ -13495,7 +13557,22 @@ var config34 = helpers26.defineMultiStyleConfig({
13495
13557
  ...baseText("disabled", props)
13496
13558
  }
13497
13559
  }
13498
- })
13560
+ }),
13561
+ variants: {
13562
+ base: (props) => ({
13563
+ field: {
13564
+ ...inputVariant("base", props)
13565
+ }
13566
+ }),
13567
+ floating: (props) => ({
13568
+ field: {
13569
+ ...inputVariant("floating", props)
13570
+ }
13571
+ })
13572
+ },
13573
+ defaultProps: {
13574
+ variant: "base"
13575
+ }
13499
13576
  });
13500
13577
  var select_default = config34;
13501
13578
  var fade = (startColor, endColor) => keyframes({
@@ -13991,7 +14068,7 @@ var config39 = helpers30.defineMultiStyleConfig({
13991
14068
  var tabs_default = config39;
13992
14069
  var config40 = defineStyleConfig$1({
13993
14070
  baseStyle: (props) => ({
13994
- ...input_default.baseStyle(props).field,
14071
+ ...inputBaseStyle(props).field,
13995
14072
  minHeight: "5rem",
13996
14073
  verticalAlign: "top",
13997
14074
  appearance: "none",
@@ -14004,7 +14081,18 @@ var config40 = defineStyleConfig$1({
14004
14081
  transform: "scale(0.825) translateY(-10px)"
14005
14082
  }
14006
14083
  }
14007
- })
14084
+ }),
14085
+ variants: {
14086
+ base: (props) => ({
14087
+ ...inputVariant("base", props)
14088
+ }),
14089
+ floating: (props) => ({
14090
+ ...inputVariant("floating", props)
14091
+ })
14092
+ },
14093
+ defaultProps: {
14094
+ variant: "base"
14095
+ }
14008
14096
  });
14009
14097
  var textarea_default = config40;
14010
14098
  var config41 = defineStyleConfig$1({