@vygruppen/spor-react 11.1.4 → 11.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/.turbo/turbo-build.log +8 -8
  2. package/CHANGELOG.md +17 -0
  3. package/dist/index.d.mts +29 -18
  4. package/dist/index.d.ts +29 -18
  5. package/dist/index.js +44 -10
  6. package/dist/index.mjs +45 -11
  7. package/package.json +2 -2
  8. package/src/input/Textarea.tsx +42 -2
  9. package/src/theme/components/textarea.ts +3 -3
  10. package/src/theme/foundations/spacing.ts +1 -0
package/.turbo/turbo-build.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @vygruppen/spor-react@11.1.4 build
2
+ > @vygruppen/spor-react@11.2.0 build
3
3
  > tsup src/index.tsx --dts --treeshake --format cjs,esm
4
4
 
5
5
  CLI Building entry: src/index.tsx
@@ -9,10 +9,10 @@
9
9
  CJS Build start
10
10
  ESM Build start
11
11
  DTS Build start
12
- CJS dist/index.js 449.60 KB
13
- CJS ⚡️ Build success in 1977ms
14
- ESM dist/index.mjs 430.10 KB
15
- ESM ⚡️ Build success in 1978ms
16
- DTS ⚡️ Build success in 15382ms
17
- DTS dist/index.d.ts 343.31 KB
18
- DTS dist/index.d.mts 343.31 KB
12
+ CJS dist/index.js 450.58 KB
13
+ CJS ⚡️ Build success in 1965ms
14
+ ESM dist/index.mjs 431.05 KB
15
+ ESM ⚡️ Build success in 1966ms
16
+ DTS ⚡️ Build success in 15759ms
17
+ DTS dist/index.d.ts 343.51 KB
18
+ DTS dist/index.d.mts 343.51 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @vygruppen/spor-react
2
2
 
3
+ ## 11.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 2453bf1: Added 2.5 to spacing
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [2453bf1]
12
+ - @vygruppen/spor-design-tokens@3.9.0
13
+
14
+ ## 11.1.5
15
+
16
+ ### Patch Changes
17
+
18
+ - 7c47e93: Fix(TextArea): Overlapping of label and text
19
+
3
20
  ## 11.1.4
4
21
 
5
22
  ### Patch Changes
package/dist/index.d.mts CHANGED
@@ -6822,10 +6822,10 @@ declare const theme: {
6822
6822
  minHeight: string;
6823
6823
  verticalAlign: string;
6824
6824
  appearance: string;
6825
- paddingTop: number;
6825
+ borderTop: string;
6826
6826
  "&:not(:placeholder-shown)": {
6827
6827
  "&:has(+ label)": {
6828
- paddingTop: number;
6828
+ borderTop: string;
6829
6829
  };
6830
6830
  "& + label": {
6831
6831
  transform: string;
@@ -7584,7 +7584,7 @@ declare const theme: {
7584
7584
  sizes?: {
7585
7585
  "2xs": {
7586
7586
  container: {
7587
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | {
7587
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | {
7588
7588
  sm: string;
7589
7589
  md: string;
7590
7590
  lg: string;
@@ -7592,7 +7592,7 @@ declare const theme: {
7592
7592
  } | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96;
7593
7593
  };
7594
7594
  excessLabel: {
7595
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7595
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7596
7596
  sm: string;
7597
7597
  md: string;
7598
7598
  lg: string;
@@ -7602,7 +7602,7 @@ declare const theme: {
7602
7602
  };
7603
7603
  xs: {
7604
7604
  container: {
7605
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7605
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7606
7606
  sm: string;
7607
7607
  md: string;
7608
7608
  lg: string;
@@ -7610,7 +7610,7 @@ declare const theme: {
7610
7610
  };
7611
7611
  };
7612
7612
  excessLabel: {
7613
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7613
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7614
7614
  sm: string;
7615
7615
  md: string;
7616
7616
  lg: string;
@@ -7620,7 +7620,7 @@ declare const theme: {
7620
7620
  };
7621
7621
  sm: {
7622
7622
  container: {
7623
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7623
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7624
7624
  sm: string;
7625
7625
  md: string;
7626
7626
  lg: string;
@@ -7628,7 +7628,7 @@ declare const theme: {
7628
7628
  };
7629
7629
  };
7630
7630
  excessLabel: {
7631
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7631
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7632
7632
  sm: string;
7633
7633
  md: string;
7634
7634
  lg: string;
@@ -7638,7 +7638,7 @@ declare const theme: {
7638
7638
  };
7639
7639
  md: {
7640
7640
  container: {
7641
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7641
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7642
7642
  sm: string;
7643
7643
  md: string;
7644
7644
  lg: string;
@@ -7646,7 +7646,7 @@ declare const theme: {
7646
7646
  };
7647
7647
  };
7648
7648
  excessLabel: {
7649
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7649
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7650
7650
  sm: string;
7651
7651
  md: string;
7652
7652
  lg: string;
@@ -7656,7 +7656,7 @@ declare const theme: {
7656
7656
  };
7657
7657
  lg: {
7658
7658
  container: {
7659
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7659
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7660
7660
  sm: string;
7661
7661
  md: string;
7662
7662
  lg: string;
@@ -7664,7 +7664,7 @@ declare const theme: {
7664
7664
  };
7665
7665
  };
7666
7666
  excessLabel: {
7667
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7667
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7668
7668
  sm: string;
7669
7669
  md: string;
7670
7670
  lg: string;
@@ -7674,7 +7674,7 @@ declare const theme: {
7674
7674
  };
7675
7675
  xl: {
7676
7676
  container: {
7677
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7677
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7678
7678
  sm: string;
7679
7679
  md: string;
7680
7680
  lg: string;
@@ -7682,7 +7682,7 @@ declare const theme: {
7682
7682
  };
7683
7683
  };
7684
7684
  excessLabel: {
7685
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7685
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7686
7686
  sm: string;
7687
7687
  md: string;
7688
7688
  lg: string;
@@ -7692,7 +7692,7 @@ declare const theme: {
7692
7692
  };
7693
7693
  "2xl": {
7694
7694
  container: {
7695
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7695
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7696
7696
  sm: string;
7697
7697
  md: string;
7698
7698
  lg: string;
@@ -7700,7 +7700,7 @@ declare const theme: {
7700
7700
  };
7701
7701
  };
7702
7702
  excessLabel: {
7703
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7703
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7704
7704
  sm: string;
7705
7705
  md: string;
7706
7706
  lg: string;
@@ -7710,7 +7710,7 @@ declare const theme: {
7710
7710
  };
7711
7711
  full: {
7712
7712
  container: {
7713
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7713
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7714
7714
  sm: string;
7715
7715
  md: string;
7716
7716
  lg: string;
@@ -7718,7 +7718,7 @@ declare const theme: {
7718
7718
  };
7719
7719
  };
7720
7720
  excessLabel: {
7721
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7721
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7722
7722
  sm: string;
7723
7723
  md: string;
7724
7724
  lg: string;
@@ -8995,6 +8995,7 @@ declare const theme: {
8995
8995
  11: string;
8996
8996
  1.5: string;
8997
8997
  0.5: string;
8998
+ 2.5: string;
8998
8999
  };
8999
9000
  spacing: Record<keyof {
9000
9001
  0: {
@@ -9022,6 +9023,11 @@ declare const theme: {
9022
9023
  number: number;
9023
9024
  };
9024
9025
  };
9026
+ 2.5: {
9027
+ value: {
9028
+ number: number;
9029
+ };
9030
+ };
9025
9031
  3: {
9026
9032
  value: {
9027
9033
  number: number;
@@ -9099,6 +9105,11 @@ declare const theme: {
9099
9105
  number: number;
9100
9106
  };
9101
9107
  };
9108
+ 2.5: {
9109
+ value: {
9110
+ number: number;
9111
+ };
9112
+ };
9102
9113
  3: {
9103
9114
  value: {
9104
9115
  number: number;
package/dist/index.d.ts CHANGED
@@ -6822,10 +6822,10 @@ declare const theme: {
6822
6822
  minHeight: string;
6823
6823
  verticalAlign: string;
6824
6824
  appearance: string;
6825
- paddingTop: number;
6825
+ borderTop: string;
6826
6826
  "&:not(:placeholder-shown)": {
6827
6827
  "&:has(+ label)": {
6828
- paddingTop: number;
6828
+ borderTop: string;
6829
6829
  };
6830
6830
  "& + label": {
6831
6831
  transform: string;
@@ -7584,7 +7584,7 @@ declare const theme: {
7584
7584
  sizes?: {
7585
7585
  "2xs": {
7586
7586
  container: {
7587
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | {
7587
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | {
7588
7588
  sm: string;
7589
7589
  md: string;
7590
7590
  lg: string;
@@ -7592,7 +7592,7 @@ declare const theme: {
7592
7592
  } | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96;
7593
7593
  };
7594
7594
  excessLabel: {
7595
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7595
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7596
7596
  sm: string;
7597
7597
  md: string;
7598
7598
  lg: string;
@@ -7602,7 +7602,7 @@ declare const theme: {
7602
7602
  };
7603
7603
  xs: {
7604
7604
  container: {
7605
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7605
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7606
7606
  sm: string;
7607
7607
  md: string;
7608
7608
  lg: string;
@@ -7610,7 +7610,7 @@ declare const theme: {
7610
7610
  };
7611
7611
  };
7612
7612
  excessLabel: {
7613
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7613
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7614
7614
  sm: string;
7615
7615
  md: string;
7616
7616
  lg: string;
@@ -7620,7 +7620,7 @@ declare const theme: {
7620
7620
  };
7621
7621
  sm: {
7622
7622
  container: {
7623
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7623
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7624
7624
  sm: string;
7625
7625
  md: string;
7626
7626
  lg: string;
@@ -7628,7 +7628,7 @@ declare const theme: {
7628
7628
  };
7629
7629
  };
7630
7630
  excessLabel: {
7631
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7631
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7632
7632
  sm: string;
7633
7633
  md: string;
7634
7634
  lg: string;
@@ -7638,7 +7638,7 @@ declare const theme: {
7638
7638
  };
7639
7639
  md: {
7640
7640
  container: {
7641
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7641
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7642
7642
  sm: string;
7643
7643
  md: string;
7644
7644
  lg: string;
@@ -7646,7 +7646,7 @@ declare const theme: {
7646
7646
  };
7647
7647
  };
7648
7648
  excessLabel: {
7649
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7649
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7650
7650
  sm: string;
7651
7651
  md: string;
7652
7652
  lg: string;
@@ -7656,7 +7656,7 @@ declare const theme: {
7656
7656
  };
7657
7657
  lg: {
7658
7658
  container: {
7659
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7659
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7660
7660
  sm: string;
7661
7661
  md: string;
7662
7662
  lg: string;
@@ -7664,7 +7664,7 @@ declare const theme: {
7664
7664
  };
7665
7665
  };
7666
7666
  excessLabel: {
7667
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7667
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7668
7668
  sm: string;
7669
7669
  md: string;
7670
7670
  lg: string;
@@ -7674,7 +7674,7 @@ declare const theme: {
7674
7674
  };
7675
7675
  xl: {
7676
7676
  container: {
7677
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7677
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7678
7678
  sm: string;
7679
7679
  md: string;
7680
7680
  lg: string;
@@ -7682,7 +7682,7 @@ declare const theme: {
7682
7682
  };
7683
7683
  };
7684
7684
  excessLabel: {
7685
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7685
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7686
7686
  sm: string;
7687
7687
  md: string;
7688
7688
  lg: string;
@@ -7692,7 +7692,7 @@ declare const theme: {
7692
7692
  };
7693
7693
  "2xl": {
7694
7694
  container: {
7695
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7695
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7696
7696
  sm: string;
7697
7697
  md: string;
7698
7698
  lg: string;
@@ -7700,7 +7700,7 @@ declare const theme: {
7700
7700
  };
7701
7701
  };
7702
7702
  excessLabel: {
7703
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7703
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7704
7704
  sm: string;
7705
7705
  md: string;
7706
7706
  lg: string;
@@ -7710,7 +7710,7 @@ declare const theme: {
7710
7710
  };
7711
7711
  full: {
7712
7712
  container: {
7713
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7713
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7714
7714
  sm: string;
7715
7715
  md: string;
7716
7716
  lg: string;
@@ -7718,7 +7718,7 @@ declare const theme: {
7718
7718
  };
7719
7719
  };
7720
7720
  excessLabel: {
7721
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7721
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 2.5 | 24 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7722
7722
  sm: string;
7723
7723
  md: string;
7724
7724
  lg: string;
@@ -8995,6 +8995,7 @@ declare const theme: {
8995
8995
  11: string;
8996
8996
  1.5: string;
8997
8997
  0.5: string;
8998
+ 2.5: string;
8998
8999
  };
8999
9000
  spacing: Record<keyof {
9000
9001
  0: {
@@ -9022,6 +9023,11 @@ declare const theme: {
9022
9023
  number: number;
9023
9024
  };
9024
9025
  };
9026
+ 2.5: {
9027
+ value: {
9028
+ number: number;
9029
+ };
9030
+ };
9025
9031
  3: {
9026
9032
  value: {
9027
9033
  number: number;
@@ -9099,6 +9105,11 @@ declare const theme: {
9099
9105
  number: number;
9100
9106
  };
9101
9107
  };
9108
+ 2.5: {
9109
+ value: {
9110
+ number: number;
9111
+ };
9112
+ };
9102
9113
  3: {
9103
9114
  value: {
9104
9115
  number: number;
package/dist/index.js CHANGED
@@ -2012,6 +2012,28 @@ var Switch = react.forwardRef(
2012
2012
  return /* @__PURE__ */ React86__namespace.default.createElement(react.Switch, { as, size: size2, ...props, ref });
2013
2013
  }
2014
2014
  );
2015
+ var useLabelHeight = (label) => {
2016
+ const labelRef = React86.useRef(null);
2017
+ const [labelHeight, setLabelHeight] = React86.useState(0);
2018
+ React86.useLayoutEffect(() => {
2019
+ const updateLabelHeight = () => {
2020
+ if (labelRef.current) {
2021
+ setLabelHeight(labelRef.current.offsetHeight);
2022
+ }
2023
+ };
2024
+ const observer = new ResizeObserver(updateLabelHeight);
2025
+ if (labelRef.current) {
2026
+ observer.observe(labelRef.current);
2027
+ }
2028
+ setTimeout(updateLabelHeight, 0);
2029
+ return () => {
2030
+ if (labelRef.current) {
2031
+ observer.unobserve(labelRef.current);
2032
+ }
2033
+ };
2034
+ }, [label]);
2035
+ return { labelRef, labelHeight };
2036
+ };
2015
2037
  var Textarea = react.forwardRef((props, ref) => {
2016
2038
  const {
2017
2039
  spacingProps,
@@ -2020,15 +2042,26 @@ var Textarea = react.forwardRef((props, ref) => {
2020
2042
  const formControlProps = react.useFormControlContext();
2021
2043
  const fallbackId = `textarea-${React86.useId()}`;
2022
2044
  const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
2023
- return /* @__PURE__ */ React86__namespace.default.createElement(react.InputGroup, { position: "relative", ...spacingProps }, /* @__PURE__ */ React86__namespace.default.createElement(react.Textarea, { ...rest, id: inputId, ref, placeholder: " " }), label && /* @__PURE__ */ React86__namespace.default.createElement(
2024
- react.FormLabel,
2045
+ const { labelRef, labelHeight } = useLabelHeight(label);
2046
+ return /* @__PURE__ */ React86__namespace.default.createElement(
2047
+ react.InputGroup,
2025
2048
  {
2026
- htmlFor: inputId,
2027
- id: `${inputId}-label`,
2028
- pointerEvents: "none"
2049
+ position: "relative",
2050
+ ...spacingProps,
2051
+ style: { "--label-height": `${labelHeight}px` }
2029
2052
  },
2030
- label
2031
- ));
2053
+ /* @__PURE__ */ React86__namespace.default.createElement(react.Textarea, { ...rest, id: inputId, ref, placeholder: " " }),
2054
+ label && /* @__PURE__ */ React86__namespace.default.createElement(
2055
+ react.FormLabel,
2056
+ {
2057
+ ref: labelRef,
2058
+ htmlFor: inputId,
2059
+ id: `${inputId}-label`,
2060
+ pointerEvents: "none"
2061
+ },
2062
+ label
2063
+ )
2064
+ );
2032
2065
  });
2033
2066
  function getSpacingProps(props) {
2034
2067
  const {
@@ -14491,13 +14524,14 @@ var tabs_default = config40;
14491
14524
  var config41 = react.defineStyleConfig({
14492
14525
  baseStyle: (props) => ({
14493
14526
  ...inputBaseStyle(props).field,
14494
- minHeight: "5rem",
14527
+ minHeight: "calc(var(--label-height) + 4rem)",
14495
14528
  verticalAlign: "top",
14496
14529
  appearance: "none",
14497
- paddingTop: 2,
14530
+ borderTop: "0.8rem solid transparent",
14498
14531
  "&:not(:placeholder-shown)": {
14499
14532
  "&:has(+ label)": {
14500
- paddingTop: 4
14533
+ borderTop: "var(--label-height) solid transparent"
14534
+ // use border in stead of padding to avoid problems with scrolling
14501
14535
  },
14502
14536
  "& + label": {
14503
14537
  transform: "scale(0.825) translateY(-10px)"
package/dist/index.mjs CHANGED
@@ -4,7 +4,7 @@ export { tokens12 as tokens };
4
4
  import { forwardRef, Divider as Divider$1, Stack as Stack$1, Box, useMultiStyleConfig, chakra, Flex, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, FormLabel as FormLabel$1, useFormControlContext, InputGroup, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, IconButton as IconButton$1, Switch as Switch$1, Textarea as Textarea$1, useStyleConfig, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Center, ButtonGroup as ButtonGroup$1, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover as Popover$1, PopoverTrigger, Portal, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, Heading, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Drawer as Drawer$1, DrawerOverlay, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
5
5
  export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
6
6
  import * as React86 from 'react';
7
- import React86__default, { forwardRef as forwardRef$1, useRef, useState, useEffect, useId, useContext, createContext, useCallback, useMemo, useLayoutEffect } from 'react';
7
+ import React86__default, { forwardRef as forwardRef$1, useRef, useState, useEffect, useId, useContext, createContext, useLayoutEffect, useCallback, useMemo } from 'react';
8
8
  import { CloseOutline24Icon, SearchOutline24Icon, CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowLeftFill24Icon, ArrowLeftFill30Icon, ArrowRightFill18Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ServiceFill24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
9
9
  import { usePopover, DismissButton, Overlay, useOverlayTrigger, useButton, useDateSegment, useDateField, useDatePicker, I18nProvider, useDialog, useFilter, useComboBox, useListBox, useOption, useListBoxSection, useSelect, HiddenSelect, useProgressBar, useCalendar, useDateRangePicker, useCalendarGrid, useRangeCalendar, useTimeField, useCalendarCell } from 'react-aria';
10
10
  import { useOverlayTriggerState, useDateFieldState, useDatePickerState, useComboBoxState, useSelectState, Item, useCalendarState, useDateRangePickerState, useTimeFieldState, useRangeCalendarState } from 'react-stately';
@@ -1992,6 +1992,28 @@ var Switch = forwardRef(
1992
1992
  return /* @__PURE__ */ React86__default.createElement(Switch$1, { as, size: size2, ...props, ref });
1993
1993
  }
1994
1994
  );
1995
+ var useLabelHeight = (label) => {
1996
+ const labelRef = useRef(null);
1997
+ const [labelHeight, setLabelHeight] = useState(0);
1998
+ useLayoutEffect(() => {
1999
+ const updateLabelHeight = () => {
2000
+ if (labelRef.current) {
2001
+ setLabelHeight(labelRef.current.offsetHeight);
2002
+ }
2003
+ };
2004
+ const observer = new ResizeObserver(updateLabelHeight);
2005
+ if (labelRef.current) {
2006
+ observer.observe(labelRef.current);
2007
+ }
2008
+ setTimeout(updateLabelHeight, 0);
2009
+ return () => {
2010
+ if (labelRef.current) {
2011
+ observer.unobserve(labelRef.current);
2012
+ }
2013
+ };
2014
+ }, [label]);
2015
+ return { labelRef, labelHeight };
2016
+ };
1995
2017
  var Textarea = forwardRef((props, ref) => {
1996
2018
  const {
1997
2019
  spacingProps,
@@ -2000,15 +2022,26 @@ var Textarea = forwardRef((props, ref) => {
2000
2022
  const formControlProps = useFormControlContext();
2001
2023
  const fallbackId = `textarea-${useId()}`;
2002
2024
  const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
2003
- return /* @__PURE__ */ React86__default.createElement(InputGroup, { position: "relative", ...spacingProps }, /* @__PURE__ */ React86__default.createElement(Textarea$1, { ...rest, id: inputId, ref, placeholder: " " }), label && /* @__PURE__ */ React86__default.createElement(
2004
- FormLabel$1,
2025
+ const { labelRef, labelHeight } = useLabelHeight(label);
2026
+ return /* @__PURE__ */ React86__default.createElement(
2027
+ InputGroup,
2005
2028
  {
2006
- htmlFor: inputId,
2007
- id: `${inputId}-label`,
2008
- pointerEvents: "none"
2029
+ position: "relative",
2030
+ ...spacingProps,
2031
+ style: { "--label-height": `${labelHeight}px` }
2009
2032
  },
2010
- label
2011
- ));
2033
+ /* @__PURE__ */ React86__default.createElement(Textarea$1, { ...rest, id: inputId, ref, placeholder: " " }),
2034
+ label && /* @__PURE__ */ React86__default.createElement(
2035
+ FormLabel$1,
2036
+ {
2037
+ ref: labelRef,
2038
+ htmlFor: inputId,
2039
+ id: `${inputId}-label`,
2040
+ pointerEvents: "none"
2041
+ },
2042
+ label
2043
+ )
2044
+ );
2012
2045
  });
2013
2046
  function getSpacingProps(props) {
2014
2047
  const {
@@ -14471,13 +14504,14 @@ var tabs_default = config40;
14471
14504
  var config41 = defineStyleConfig$1({
14472
14505
  baseStyle: (props) => ({
14473
14506
  ...inputBaseStyle(props).field,
14474
- minHeight: "5rem",
14507
+ minHeight: "calc(var(--label-height) + 4rem)",
14475
14508
  verticalAlign: "top",
14476
14509
  appearance: "none",
14477
- paddingTop: 2,
14510
+ borderTop: "0.8rem solid transparent",
14478
14511
  "&:not(:placeholder-shown)": {
14479
14512
  "&:has(+ label)": {
14480
- paddingTop: 4
14513
+ borderTop: "var(--label-height) solid transparent"
14514
+ // use border in stead of padding to avoid problems with scrolling
14481
14515
  },
14482
14516
  "& + label": {
14483
14517
  transform: "scale(0.825) translateY(-10px)"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vygruppen/spor-react",
3
- "version": "11.1.4",
3
+ "version": "11.2.0",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
@@ -22,7 +22,7 @@
22
22
  "@emotion/react": "^11.11.4",
23
23
  "@emotion/styled": "^11.11.5",
24
24
  "@internationalized/date": "^3.5.4",
25
- "@vygruppen/spor-design-tokens": "^3.7.0",
25
+ "@vygruppen/spor-design-tokens": "^3.9.0",
26
26
  "@vygruppen/spor-icon-react": "^3.12.0",
27
27
  "@vygruppen/spor-loader": "^0.4.0",
28
28
  "awesome-phonenumber": "^5.11.0",
package/src/input/Textarea.tsx CHANGED
@@ -6,11 +6,44 @@ import {
6
6
  useFormControlContext,
7
7
  InputGroup,
8
8
  } from "@chakra-ui/react";
9
- import React, { useId } from "react";
9
+ import React, { useId, useLayoutEffect, useRef, useState } from "react";
10
10
 
11
11
  export type TextareaProps = Exclude<ChakraTextareaProps, "size"> & {
12
12
  label?: string;
13
13
  };
14
+
15
+ /**
16
+ * Hook to calculate the height of the label element to adjust spacing for the input for floating label.
17
+ */
18
+ const useLabelHeight = (label: string | undefined) => {
19
+ const labelRef = useRef<HTMLLabelElement>(null);
20
+ const [labelHeight, setLabelHeight] = useState(0);
21
+
22
+ useLayoutEffect(() => {
23
+ const updateLabelHeight = () => {
24
+ if (labelRef.current) {
25
+ setLabelHeight(labelRef.current.offsetHeight);
26
+ }
27
+ };
28
+
29
+ const observer = new ResizeObserver(updateLabelHeight);
30
+ if (labelRef.current) {
31
+ observer.observe(labelRef.current);
32
+ }
33
+
34
+ // Initial calculation with a slight delay to ensure CSS is applied
35
+ setTimeout(updateLabelHeight, 0);
36
+
37
+ return () => {
38
+ if (labelRef.current) {
39
+ observer.unobserve(labelRef.current);
40
+ }
41
+ };
42
+ }, [label]);
43
+
44
+ return { labelRef, labelHeight };
45
+ };
46
+
14
47
  /**
15
48
  * Text area that works with the `FormControl` component.
16
49
  *
@@ -31,11 +64,18 @@ export const Textarea = forwardRef<TextareaProps, "textarea">((props, ref) => {
31
64
  const fallbackId = `textarea-${useId()}`;
32
65
  const inputId = props.id ?? formControlProps?.id ?? fallbackId;
33
66
 
67
+ const { labelRef, labelHeight } = useLabelHeight(label);
68
+
34
69
  return (
35
- <InputGroup position="relative" {...spacingProps}>
70
+ <InputGroup
71
+ position="relative"
72
+ {...spacingProps}
73
+ style={{ "--label-height": `${labelHeight}px` } as React.CSSProperties}
74
+ >
36
75
  <ChakraTextarea {...rest} id={inputId} ref={ref} placeholder=" " />
37
76
  {label && (
38
77
  <FormLabel
78
+ ref={labelRef}
39
79
  htmlFor={inputId}
40
80
  id={`${inputId}-label`}
41
81
  pointerEvents="none"
package/src/theme/components/textarea.ts CHANGED
@@ -4,13 +4,13 @@ import { inputBaseStyle, inputVariant } from "../utils/input-utils";
4
4
  const config = defineStyleConfig({
5
5
  baseStyle: (props) => ({
6
6
  ...inputBaseStyle(props).field,
7
- minHeight: "5rem",
7
+ minHeight: "calc(var(--label-height) + 4rem)",
8
8
  verticalAlign: "top",
9
9
  appearance: "none",
10
- paddingTop: 2,
10
+ borderTop: "0.8rem solid transparent",
11
11
  "&:not(:placeholder-shown)": {
12
12
  "&:has(+ label)": {
13
- paddingTop: 4,
13
+ borderTop: "var(--label-height) solid transparent", // use border in stead of padding to avoid problems with scrolling
14
14
  },
15
15
  "& + label": {
16
16
  transform: "scale(0.825) translateY(-10px)",
package/src/theme/foundations/spacing.ts CHANGED
@@ -7,6 +7,7 @@ type Spacing = {
7
7
  1: Token;
8
8
  1.5: Token;
9
9
  2: Token;
10
+ 2.5: Token;
10
11
  3: Token;
11
12
  4: Token;
12
13
  5: Token;