@vygruppen/spor-react 6.2.0 → 6.2.2

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.
Files changed (15) hide show
  1. package/.turbo/turbo-build.log +10 -10
  2. package/CHANGELOG.md +14 -0
  3. package/dist/{CountryCodeSelect-QBDQ3HTF.mjs → CountryCodeSelect-FJ6OGX3Z.mjs} +1 -1
  4. package/dist/{chunk-UIM4MXLY.mjs → chunk-2OBDF3T7.mjs} +24 -38
  5. package/dist/index.d.mts +52 -30
  6. package/dist/index.d.ts +52 -30
  7. package/dist/index.js +28 -44
  8. package/dist/index.mjs +1 -1
  9. package/package.json +1 -1
  10. package/src/button/Button.tsx +1 -0
  11. package/src/datepicker/DateField.tsx +2 -7
  12. package/src/input/NumericStepper.tsx +4 -8
  13. package/src/theme/components/button.ts +2 -0
  14. package/src/theme/components/card.ts +9 -16
  15. package/tsconfig.json +2 -2
package/.turbo/turbo-build.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @vygruppen/spor-react@6.2.0 build
2
+ > @vygruppen/spor-react@6.2.2 build
3
3
  > tsup src/index.tsx --dts --treeshake --format cjs,esm
4
4
 
5
5
  CLI Building entry: src/index.tsx
@@ -9,14 +9,14 @@
9
9
  CJS Build start
10
10
  ESM Build start
11
11
  "Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/index.js".
12
- "Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-UIM4MXLY.mjs".
12
+ "Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-2OBDF3T7.mjs".
13
13
  DTS Build start
14
- CJS dist/index.js 507.54 KB
15
- CJS ⚡️ Build success in 2262ms
14
+ CJS dist/index.js 507.17 KB
15
+ CJS ⚡️ Build success in 2068ms
16
16
  ESM dist/index.mjs 2.16 KB
17
- ESM dist/CountryCodeSelect-QBDQ3HTF.mjs 1.19 KB
18
- ESM dist/chunk-UIM4MXLY.mjs 398.07 KB
19
- ESM ⚡️ Build success in 2262ms
20
- DTS ⚡️ Build success in 12347ms
21
- DTS dist/index.d.ts 266.83 KB
22
- DTS dist/index.d.mts 266.83 KB
17
+ ESM dist/CountryCodeSelect-FJ6OGX3Z.mjs 1.19 KB
18
+ ESM dist/chunk-2OBDF3T7.mjs 397.81 KB
19
+ ESM ⚡️ Build success in 2068ms
20
+ DTS ⚡️ Build success in 12503ms
21
+ DTS dist/index.d.ts 267.08 KB
22
+ DTS dist/index.d.mts 267.08 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @vygruppen/spor-react
2
2
 
3
+ ## 6.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - d14a70f: Button: Fix bug with broken buttons when there were links
8
+
9
+ ## 6.2.1
10
+
11
+ ### Patch Changes
12
+
13
+ - e97dddd: Card, NumericStepper: Fix a bug with the focus styles that showed up when it shouldn't have.
14
+
15
+ DatePicker, DateRangePicker: Fix a bug where you wouldn't automatically jump to the next field once a field was filled out
16
+
3
17
  ## 6.2.0
4
18
 
5
19
  ### Minor Changes
package/dist/{CountryCodeSelect-QBDQ3HTF.mjs → CountryCodeSelect-FJ6OGX3Z.mjs} RENAMED
@@ -1,4 +1,4 @@
1
- import { createTexts, useTranslation, InfoSelect, Item } from './chunk-UIM4MXLY.mjs';
1
+ import { createTexts, useTranslation, InfoSelect, Item } from './chunk-2OBDF3T7.mjs';
2
2
  import React from 'react';
3
3
  import { getSupportedCallingCodes } from 'awesome-phonenumber';
4
4
 
package/dist/{chunk-UIM4MXLY.mjs → chunk-2OBDF3T7.mjs} RENAMED
@@ -1211,6 +1211,7 @@ var Button = forwardRef((props, ref) => {
1211
1211
  Flex,
1212
1212
  {
1213
1213
  justifyContent: "space-between",
1214
+ flex: 1,
1214
1215
  alignItems: "center",
1215
1216
  gap: 1,
1216
1217
  visibility: isLoading ? "hidden" : "visible",
@@ -2006,15 +2007,7 @@ var DateField = forwardRef$1(
2006
2007
  paddingTop: "2px"
2007
2008
  },
2008
2009
  props.label
2009
- ), /* @__PURE__ */ React69__default.createElement(Flex, { ...fieldProps, paddingTop: "3", paddingBottom: "0.5" }, state2.segments.map((segment, i) => /* @__PURE__ */ React69__default.createElement(
2010
- DateTimeSegment,
2011
- {
2012
- ref: i === 0 ? ref : void 0,
2013
- key: i,
2014
- segment,
2015
- state: state2
2016
- }
2017
- ))), /* @__PURE__ */ React69__default.createElement(
2010
+ ), /* @__PURE__ */ React69__default.createElement(Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5" }, state2.segments.map((segment, i) => /* @__PURE__ */ React69__default.createElement(DateTimeSegment, { key: i, segment, state: state2 }))), /* @__PURE__ */ React69__default.createElement(
2018
2011
  "input",
2019
2012
  {
2020
2013
  type: "hidden",
@@ -3104,13 +3097,6 @@ var getBoxShadowString = (args) => {
3104
3097
  return allShadows.join(", ");
3105
3098
  };
3106
3099
 
3107
- // src/theme/utils/focus-utils.ts
3108
- var focusVisible = ({ notFocus, focus }) => ({
3109
- _focus: focus,
3110
- _focusVisible: focus,
3111
- "&[data-focus]:not([data-focus-visible])": notFocus
3112
- });
3113
-
3114
3100
  // src/input/NumericStepper.tsx
3115
3101
  function NumericStepper({
3116
3102
  name: nameProp,
@@ -3232,12 +3218,9 @@ var VerySmallButton = (props) => {
3232
3218
  size: "xs",
3233
3219
  minWidth: "24px",
3234
3220
  minHeight: "24px",
3235
- sx: focusVisible({
3236
- notFocus: { boxShadow: "none" },
3237
- focus: {
3238
- boxShadow: "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white"
3239
- }
3240
- }),
3221
+ _focusVisible: {
3222
+ boxShadow: "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white"
3223
+ },
3241
3224
  ...props
3242
3225
  }
3243
3226
  );
@@ -3437,7 +3420,7 @@ var texts14 = createTexts({
3437
3420
  sv: "Telefonnummer"
3438
3421
  }
3439
3422
  });
3440
- var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-QBDQ3HTF.mjs'));
3423
+ var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-FJ6OGX3Z.mjs'));
3441
3424
  var Radio = forwardRef((props, ref) => {
3442
3425
  return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
3443
3426
  });
@@ -9764,6 +9747,13 @@ var styles2 = {
9764
9747
  }
9765
9748
  })
9766
9749
  };
9750
+
9751
+ // src/theme/utils/focus-utils.ts
9752
+ var focusVisible = ({ notFocus, focus }) => ({
9753
+ _focus: focus,
9754
+ _focusVisible: focus,
9755
+ "&[data-focus]:not([data-focus-visible])": notFocus
9756
+ });
9767
9757
  var helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
9768
9758
  var config3 = helpers.defineMultiStyleConfig({
9769
9759
  baseStyle: (props) => ({
@@ -10111,6 +10101,8 @@ var config6 = defineStyleConfig$1({
10111
10101
  baseStyle: {
10112
10102
  border: 0,
10113
10103
  borderRadius: "xl",
10104
+ display: "flex",
10105
+ alignItems: "center",
10114
10106
  transitionProperty: "common",
10115
10107
  transitionDuration: "normal",
10116
10108
  textWrap: "wrap",
@@ -10324,21 +10316,15 @@ var config7 = defineStyleConfig$1({
10324
10316
  ...getColorSchemeClickableProps(props),
10325
10317
  _hover: getColorSchemeHoverProps(props),
10326
10318
  _active: getColorSchemeActiveProps(props),
10327
- ...focusVisible({
10328
- focus: {
10329
- boxShadow: getBoxShadowString({
10330
- borderColor: mode("greenHaze", "azure")(props),
10331
- borderWidth: 2,
10332
- isInset: false
10333
- }),
10334
- outline: "none",
10335
- _active: getColorSchemeActiveProps(props)
10336
- },
10337
- notFocus: {
10338
- ...getColorSchemeClickableProps(props),
10339
- _active: getColorSchemeActiveProps(props)
10340
- }
10341
- }),
10319
+ _focusVisible: {
10320
+ boxShadow: getBoxShadowString({
10321
+ borderColor: mode("greenHaze", "azure")(props),
10322
+ borderWidth: 2,
10323
+ isInset: false
10324
+ }),
10325
+ outline: "none",
10326
+ _active: getColorSchemeActiveProps(props)
10327
+ },
10342
10328
  _disabled: {
10343
10329
  backgroundColor: "platinum",
10344
10330
  boxShadow: getBoxShadowString({
package/dist/index.d.mts CHANGED
@@ -2336,6 +2336,8 @@ declare const theme: {
2336
2336
  baseStyle?: {
2337
2337
  border: number;
2338
2338
  borderRadius: string;
2339
+ display: string;
2340
+ alignItems: string;
2339
2341
  transitionProperty: string;
2340
2342
  transitionDuration: string;
2341
2343
  textWrap: string;
@@ -2476,15 +2478,6 @@ declare const theme: {
2476
2478
  Card: {
2477
2479
  baseStyle?: ((props: any) => {
2478
2480
  "button&, a&, label&, &.is-clickable": {
2479
- _disabled: {
2480
- backgroundColor: string;
2481
- boxShadow: string;
2482
- color: string;
2483
- pointerEvents: string;
2484
- };
2485
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2486
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2487
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2488
2481
  _hover: {
2489
2482
  backgroundColor: string;
2490
2483
  boxShadow: string;
@@ -2496,18 +2489,23 @@ declare const theme: {
2496
2489
  backgroundColor: string;
2497
2490
  boxShadow: string;
2498
2491
  };
2499
- boxShadow: string;
2500
- backgroundColor?: undefined;
2501
- } | {
2492
+ _focusVisible: {
2493
+ boxShadow: string;
2494
+ outline: string;
2495
+ _active: {
2496
+ backgroundColor: string;
2497
+ boxShadow: string;
2498
+ };
2499
+ };
2502
2500
  _disabled: {
2503
2501
  backgroundColor: string;
2504
2502
  boxShadow: string;
2505
2503
  color: string;
2506
2504
  pointerEvents: string;
2507
2505
  };
2508
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2509
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2510
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2506
+ boxShadow: string;
2507
+ backgroundColor?: undefined;
2508
+ } | {
2511
2509
  _hover: {
2512
2510
  backgroundColor: string;
2513
2511
  boxShadow: string;
@@ -2519,6 +2517,20 @@ declare const theme: {
2519
2517
  backgroundColor: string;
2520
2518
  boxShadow: string;
2521
2519
  };
2520
+ _focusVisible: {
2521
+ boxShadow: string;
2522
+ outline: string;
2523
+ _active: {
2524
+ backgroundColor: string;
2525
+ boxShadow: string;
2526
+ };
2527
+ };
2528
+ _disabled: {
2529
+ backgroundColor: string;
2530
+ boxShadow: string;
2531
+ color: string;
2532
+ pointerEvents: string;
2533
+ };
2522
2534
  backgroundColor: string;
2523
2535
  boxShadow: string;
2524
2536
  };
@@ -2534,15 +2546,6 @@ declare const theme: {
2534
2546
  borderRadius: string;
2535
2547
  } | {
2536
2548
  "button&, a&, label&, &.is-clickable": {
2537
- _disabled: {
2538
- backgroundColor: string;
2539
- boxShadow: string;
2540
- color: string;
2541
- pointerEvents: string;
2542
- };
2543
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2544
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2545
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2546
2549
  _hover: {
2547
2550
  backgroundColor: string;
2548
2551
  boxShadow: string;
@@ -2554,18 +2557,23 @@ declare const theme: {
2554
2557
  backgroundColor: string;
2555
2558
  boxShadow: string;
2556
2559
  };
2557
- boxShadow: string;
2558
- backgroundColor?: undefined;
2559
- } | {
2560
+ _focusVisible: {
2561
+ boxShadow: string;
2562
+ outline: string;
2563
+ _active: {
2564
+ backgroundColor: string;
2565
+ boxShadow: string;
2566
+ };
2567
+ };
2560
2568
  _disabled: {
2561
2569
  backgroundColor: string;
2562
2570
  boxShadow: string;
2563
2571
  color: string;
2564
2572
  pointerEvents: string;
2565
2573
  };
2566
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2567
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2568
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2574
+ boxShadow: string;
2575
+ backgroundColor?: undefined;
2576
+ } | {
2569
2577
  _hover: {
2570
2578
  backgroundColor: string;
2571
2579
  boxShadow: string;
@@ -2577,6 +2585,20 @@ declare const theme: {
2577
2585
  backgroundColor: string;
2578
2586
  boxShadow: string;
2579
2587
  };
2588
+ _focusVisible: {
2589
+ boxShadow: string;
2590
+ outline: string;
2591
+ _active: {
2592
+ backgroundColor: string;
2593
+ boxShadow: string;
2594
+ };
2595
+ };
2596
+ _disabled: {
2597
+ backgroundColor: string;
2598
+ boxShadow: string;
2599
+ color: string;
2600
+ pointerEvents: string;
2601
+ };
2580
2602
  backgroundColor: string;
2581
2603
  boxShadow: string;
2582
2604
  };
package/dist/index.d.ts CHANGED
@@ -2336,6 +2336,8 @@ declare const theme: {
2336
2336
  baseStyle?: {
2337
2337
  border: number;
2338
2338
  borderRadius: string;
2339
+ display: string;
2340
+ alignItems: string;
2339
2341
  transitionProperty: string;
2340
2342
  transitionDuration: string;
2341
2343
  textWrap: string;
@@ -2476,15 +2478,6 @@ declare const theme: {
2476
2478
  Card: {
2477
2479
  baseStyle?: ((props: any) => {
2478
2480
  "button&, a&, label&, &.is-clickable": {
2479
- _disabled: {
2480
- backgroundColor: string;
2481
- boxShadow: string;
2482
- color: string;
2483
- pointerEvents: string;
2484
- };
2485
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2486
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2487
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2488
2481
  _hover: {
2489
2482
  backgroundColor: string;
2490
2483
  boxShadow: string;
@@ -2496,18 +2489,23 @@ declare const theme: {
2496
2489
  backgroundColor: string;
2497
2490
  boxShadow: string;
2498
2491
  };
2499
- boxShadow: string;
2500
- backgroundColor?: undefined;
2501
- } | {
2492
+ _focusVisible: {
2493
+ boxShadow: string;
2494
+ outline: string;
2495
+ _active: {
2496
+ backgroundColor: string;
2497
+ boxShadow: string;
2498
+ };
2499
+ };
2502
2500
  _disabled: {
2503
2501
  backgroundColor: string;
2504
2502
  boxShadow: string;
2505
2503
  color: string;
2506
2504
  pointerEvents: string;
2507
2505
  };
2508
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2509
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2510
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2506
+ boxShadow: string;
2507
+ backgroundColor?: undefined;
2508
+ } | {
2511
2509
  _hover: {
2512
2510
  backgroundColor: string;
2513
2511
  boxShadow: string;
@@ -2519,6 +2517,20 @@ declare const theme: {
2519
2517
  backgroundColor: string;
2520
2518
  boxShadow: string;
2521
2519
  };
2520
+ _focusVisible: {
2521
+ boxShadow: string;
2522
+ outline: string;
2523
+ _active: {
2524
+ backgroundColor: string;
2525
+ boxShadow: string;
2526
+ };
2527
+ };
2528
+ _disabled: {
2529
+ backgroundColor: string;
2530
+ boxShadow: string;
2531
+ color: string;
2532
+ pointerEvents: string;
2533
+ };
2522
2534
  backgroundColor: string;
2523
2535
  boxShadow: string;
2524
2536
  };
@@ -2534,15 +2546,6 @@ declare const theme: {
2534
2546
  borderRadius: string;
2535
2547
  } | {
2536
2548
  "button&, a&, label&, &.is-clickable": {
2537
- _disabled: {
2538
- backgroundColor: string;
2539
- boxShadow: string;
2540
- color: string;
2541
- pointerEvents: string;
2542
- };
2543
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2544
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2545
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2546
2549
  _hover: {
2547
2550
  backgroundColor: string;
2548
2551
  boxShadow: string;
@@ -2554,18 +2557,23 @@ declare const theme: {
2554
2557
  backgroundColor: string;
2555
2558
  boxShadow: string;
2556
2559
  };
2557
- boxShadow: string;
2558
- backgroundColor?: undefined;
2559
- } | {
2560
+ _focusVisible: {
2561
+ boxShadow: string;
2562
+ outline: string;
2563
+ _active: {
2564
+ backgroundColor: string;
2565
+ boxShadow: string;
2566
+ };
2567
+ };
2560
2568
  _disabled: {
2561
2569
  backgroundColor: string;
2562
2570
  boxShadow: string;
2563
2571
  color: string;
2564
2572
  pointerEvents: string;
2565
2573
  };
2566
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2567
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2568
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2574
+ boxShadow: string;
2575
+ backgroundColor?: undefined;
2576
+ } | {
2569
2577
  _hover: {
2570
2578
  backgroundColor: string;
2571
2579
  boxShadow: string;
@@ -2577,6 +2585,20 @@ declare const theme: {
2577
2585
  backgroundColor: string;
2578
2586
  boxShadow: string;
2579
2587
  };
2588
+ _focusVisible: {
2589
+ boxShadow: string;
2590
+ outline: string;
2591
+ _active: {
2592
+ backgroundColor: string;
2593
+ boxShadow: string;
2594
+ };
2595
+ };
2596
+ _disabled: {
2597
+ backgroundColor: string;
2598
+ boxShadow: string;
2599
+ color: string;
2600
+ pointerEvents: string;
2601
+ };
2580
2602
  backgroundColor: string;
2581
2603
  boxShadow: string;
2582
2604
  };
package/dist/index.js CHANGED
@@ -711,6 +711,7 @@ var init_Button = __esm({
711
711
  react.Flex,
712
712
  {
713
713
  justifyContent: "space-between",
714
+ flex: 1,
714
715
  alignItems: "center",
715
716
  gap: 1,
716
717
  visibility: isLoading ? "hidden" : "visible",
@@ -1668,15 +1669,7 @@ var init_DateField = __esm({
1668
1669
  paddingTop: "2px"
1669
1670
  },
1670
1671
  props.label
1671
- ), /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { ...fieldProps, paddingTop: "3", paddingBottom: "0.5" }, state2.segments.map((segment, i) => /* @__PURE__ */ React69__namespace.default.createElement(
1672
- DateTimeSegment,
1673
- {
1674
- ref: i === 0 ? ref : void 0,
1675
- key: i,
1676
- segment,
1677
- state: state2
1678
- }
1679
- ))), /* @__PURE__ */ React69__namespace.default.createElement(
1672
+ ), /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5" }, state2.segments.map((segment, i) => /* @__PURE__ */ React69__namespace.default.createElement(DateTimeSegment, { key: i, segment, state: state2 }))), /* @__PURE__ */ React69__namespace.default.createElement(
1680
1673
  "input",
1681
1674
  {
1682
1675
  type: "hidden",
@@ -3672,18 +3665,6 @@ var init_box_shadow_utils = __esm({
3672
3665
  };
3673
3666
  }
3674
3667
  });
3675
-
3676
- // src/theme/utils/focus-utils.ts
3677
- var focusVisible;
3678
- var init_focus_utils = __esm({
3679
- "src/theme/utils/focus-utils.ts"() {
3680
- focusVisible = ({ notFocus, focus }) => ({
3681
- _focus: focus,
3682
- _focusVisible: focus,
3683
- "&[data-focus]:not([data-focus-visible])": notFocus
3684
- });
3685
- }
3686
- });
3687
3668
  function NumericStepper({
3688
3669
  name: nameProp,
3689
3670
  id: idProp,
@@ -3801,7 +3782,6 @@ var init_NumericStepper = __esm({
3801
3782
  "src/input/NumericStepper.tsx"() {
3802
3783
  init_src();
3803
3784
  init_box_shadow_utils();
3804
- init_focus_utils();
3805
3785
  VerySmallButton = (props) => {
3806
3786
  return /* @__PURE__ */ React69__namespace.default.createElement(
3807
3787
  exports.IconButton,
@@ -3810,12 +3790,9 @@ var init_NumericStepper = __esm({
3810
3790
  size: "xs",
3811
3791
  minWidth: "24px",
3812
3792
  minHeight: "24px",
3813
- sx: focusVisible({
3814
- notFocus: { boxShadow: "none" },
3815
- focus: {
3816
- boxShadow: "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white"
3817
- }
3818
- }),
3793
+ _focusVisible: {
3794
+ boxShadow: "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white"
3795
+ },
3819
3796
  ...props
3820
3797
  }
3821
3798
  );
@@ -11172,6 +11149,18 @@ var init_foundations = __esm({
11172
11149
  init_styles();
11173
11150
  }
11174
11151
  });
11152
+
11153
+ // src/theme/utils/focus-utils.ts
11154
+ var focusVisible;
11155
+ var init_focus_utils = __esm({
11156
+ "src/theme/utils/focus-utils.ts"() {
11157
+ focusVisible = ({ notFocus, focus }) => ({
11158
+ _focus: focus,
11159
+ _focusVisible: focus,
11160
+ "&[data-focus]:not([data-focus-visible])": notFocus
11161
+ });
11162
+ }
11163
+ });
11175
11164
  var helpers, config3, accordion_default;
11176
11165
  var init_accordion2 = __esm({
11177
11166
  "src/theme/components/accordion.ts"() {
@@ -11555,6 +11544,8 @@ var init_button2 = __esm({
11555
11544
  baseStyle: {
11556
11545
  border: 0,
11557
11546
  borderRadius: "xl",
11547
+ display: "flex",
11548
+ alignItems: "center",
11558
11549
  transitionProperty: "common",
11559
11550
  transitionDuration: "normal",
11560
11551
  textWrap: "wrap",
@@ -11791,7 +11782,6 @@ var init_card2 = __esm({
11791
11782
  "src/theme/components/card.ts"() {
11792
11783
  init_foundations();
11793
11784
  init_box_shadow_utils();
11794
- init_focus_utils();
11795
11785
  config7 = react.defineStyleConfig({
11796
11786
  baseStyle: (props) => ({
11797
11787
  appearance: "none",
@@ -11807,21 +11797,15 @@ var init_card2 = __esm({
11807
11797
  ...getColorSchemeClickableProps(props),
11808
11798
  _hover: getColorSchemeHoverProps(props),
11809
11799
  _active: getColorSchemeActiveProps(props),
11810
- ...focusVisible({
11811
- focus: {
11812
- boxShadow: getBoxShadowString({
11813
- borderColor: themeTools.mode("greenHaze", "azure")(props),
11814
- borderWidth: 2,
11815
- isInset: false
11816
- }),
11817
- outline: "none",
11818
- _active: getColorSchemeActiveProps(props)
11819
- },
11820
- notFocus: {
11821
- ...getColorSchemeClickableProps(props),
11822
- _active: getColorSchemeActiveProps(props)
11823
- }
11824
- }),
11800
+ _focusVisible: {
11801
+ boxShadow: getBoxShadowString({
11802
+ borderColor: themeTools.mode("greenHaze", "azure")(props),
11803
+ borderWidth: 2,
11804
+ isInset: false
11805
+ }),
11806
+ outline: "none",
11807
+ _active: getColorSchemeActiveProps(props)
11808
+ },
11825
11809
  _disabled: {
11826
11810
  backgroundColor: "platinum",
11827
11811
  boxShadow: getBoxShadowString({
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, 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, 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, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-UIM4MXLY.mjs';
1
+ export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, 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, 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, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-2OBDF3T7.mjs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vygruppen/spor-react",
3
- "version": "6.2.0",
3
+ "version": "6.2.2",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
package/src/button/Button.tsx CHANGED
@@ -116,6 +116,7 @@ export const Button = forwardRef<ButtonProps, "button">((props, ref) => {
116
116
  )}
117
117
  <Flex
118
118
  justifyContent="space-between"
119
+ flex={1}
119
120
  alignItems="center"
120
121
  gap={1}
121
122
  visibility={isLoading ? "hidden" : "visible"}
package/src/datepicker/DateField.tsx CHANGED
@@ -52,14 +52,9 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
52
52
  {props.label}
53
53
  </FormLabel>
54
54
  )}
55
- <Flex {...fieldProps} paddingTop="3" paddingBottom="0.5">
55
+ <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">
56
56
  {state.segments.map((segment, i) => (
57
- <DateTimeSegment
58
- ref={i === 0 ? ref : undefined}
59
- key={i}
60
- segment={segment}
61
- state={state}
62
- />
57
+ <DateTimeSegment key={i} segment={segment} state={state} />
63
58
  ))}
64
59
  </Flex>
65
60
  <input
package/src/input/NumericStepper.tsx CHANGED
@@ -14,7 +14,6 @@ import {
14
14
  useTranslation,
15
15
  } from "..";
16
16
  import { getBoxShadowString } from "../theme/utils/box-shadow-utils";
17
- import { focusVisible } from "../theme/utils/focus-utils";
18
17
 
19
18
  type NumericStepperProps = {
20
19
  /** The name of the input field */
@@ -197,13 +196,10 @@ const VerySmallButton = (props: VerySmallButtonProps) => {
197
196
  size="xs"
198
197
  minWidth="24px"
199
198
  minHeight="24px"
200
- sx={focusVisible({
201
- notFocus: { boxShadow: "none" },
202
- focus: {
203
- boxShadow:
204
- "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white",
205
- },
206
- })}
199
+ _focusVisible={{
200
+ boxShadow:
201
+ "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white",
202
+ }}
207
203
  {...props}
208
204
  />
209
205
  );
package/src/theme/components/button.ts CHANGED
@@ -7,6 +7,8 @@ const config = defineStyleConfig({
7
7
  baseStyle: {
8
8
  border: 0,
9
9
  borderRadius: "xl",
10
+ display: "flex",
11
+ alignItems: "center",
10
12
  transitionProperty: "common",
11
13
  transitionDuration: "normal",
12
14
  textWrap: "wrap",
package/src/theme/components/card.ts CHANGED
@@ -2,7 +2,6 @@ import { defineStyleConfig } from "@chakra-ui/react";
2
2
  import { mode } from "@chakra-ui/theme-tools";
3
3
  import { colors } from "../foundations";
4
4
  import { getBoxShadowString } from "../utils/box-shadow-utils";
5
- import { focusVisible } from "../utils/focus-utils";
6
5
 
7
6
  const config = defineStyleConfig({
8
7
  baseStyle: (props: any) => ({
@@ -20,21 +19,15 @@ const config = defineStyleConfig({
20
19
  ...getColorSchemeClickableProps(props),
21
20
  _hover: getColorSchemeHoverProps(props),
22
21
  _active: getColorSchemeActiveProps(props),
23
- ...focusVisible({
24
- focus: {
25
- boxShadow: getBoxShadowString({
26
- borderColor: mode("greenHaze", "azure")(props),
27
- borderWidth: 2,
28
- isInset: false,
29
- }),
30
- outline: "none",
31
- _active: getColorSchemeActiveProps(props),
32
- },
33
- notFocus: {
34
- ...getColorSchemeClickableProps(props),
35
- _active: getColorSchemeActiveProps(props),
36
- },
37
- }),
22
+ _focusVisible: {
23
+ boxShadow: getBoxShadowString({
24
+ borderColor: mode("greenHaze", "azure")(props),
25
+ borderWidth: 2,
26
+ isInset: false,
27
+ }),
28
+ outline: "none",
29
+ _active: getColorSchemeActiveProps(props),
30
+ },
38
31
  _disabled: {
39
32
  backgroundColor: "platinum",
40
33
  boxShadow: getBoxShadowString({
package/tsconfig.json CHANGED
@@ -3,6 +3,6 @@
3
3
  "include": ["."],
4
4
  "exclude": ["dist", "build", "node_modules"],
5
5
  "compilerOptions": {
6
- "rootDir": "."
7
- }
6
+ "rootDir": ".",
7
+ },
8
8
  }