@kvdbil/components 15.0.2 → 15.0.3

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 (4) hide show
  1. package/cjs/components/RadioButton/index.js +27 -22
  2. package/esm/components/RadioButton/index.js +20 -15
  3. package/package.json +1 -1
  4. package/package.json.tmp +1 -1
package/cjs/components/RadioButton/index.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),i=require("../../shared/helpers.js"),s=require("../../theme.js"),o=require("../../typography/BodyText/index.js");require("../../shared/media-queries.js");var a,l=(a=r)&&a.__esModule?a:{default:a};const t={regular:r.css`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),s=require("../../shared/helpers.js"),i=require("../../theme.js"),o=require("../../typography/BodyText/index.js"),a=require("../IconButton.js");require("../../shared/media-queries.js");var l,t=(l=r)&&l.__esModule?l:{default:l};const c={regular:r.css`
2
2
  .circle {
3
3
  &--outer {
4
4
  height: 24px;
@@ -29,76 +29,81 @@
29
29
 
30
30
  .circle {
31
31
  &--inner {
32
- background-color: ${s.default.colors.gray.light1};
32
+ background-color: ${i.default.colors.gray.light1};
33
33
  }
34
34
 
35
35
  &--outer {
36
- border: 2px solid ${s.default.colors.gray.light1};
36
+ border: 2px solid ${i.default.colors.gray.light1};
37
37
  }
38
38
  }
39
- `,c=r.css`
39
+ `,n=r.css`
40
40
  .circle {
41
41
  &--inner {
42
42
  opacity: 1;
43
- background-color: ${s.default.colors.gray.light1};
43
+ background-color: ${i.default.colors.gray.light1};
44
44
  }
45
45
  }
46
- `,n=l.default.div`
46
+ `,u=t.default.div`
47
47
  display: flex;
48
48
  align-items: center;
49
49
  box-sizing: border-box;
50
- `,u=l.default.span`
50
+ `,h=t.default.span`
51
51
  cursor: pointer;
52
52
  display: flex;
53
53
  position: relative;
54
54
  align-items: center;
55
55
  justify-content: center;
56
56
 
57
- ${e=>t[e.size]};
57
+ ${e=>c[e.size]};
58
58
 
59
- ${e=>!e.isDisabled&&e.isChecked&&((e,i)=>r.css`
59
+ ${e=>!e.isDisabled&&e.isChecked&&((e,s)=>r.css`
60
60
  .circle {
61
61
  &--inner {
62
62
  opacity: 1;
63
- background-color: ${s.default.colors[e].main};
63
+ background-color: ${i.default.colors[e].main};
64
64
  }
65
65
 
66
66
  &--outer {
67
67
  border: 2px solid
68
- ${i?s.default.colors.error.dark:s.default.colors[e].main};
68
+ ${s?i.default.colors.error.dark:i.default.colors[e].main};
69
69
  }
70
70
  }
71
71
  `)(e.color,e.$hasError)};
72
72
  ${e=>e.isDisabled&&d};
73
73
 
74
- ${e=>e.isChecked&&e.isDisabled&&c};
75
- `,h=l.default.input`
76
- position: fixed;
74
+ ${e=>e.isChecked&&e.isDisabled&&n};
75
+ `,b=t.default.input`
76
+ position: absolute;
77
77
  opacity: 0;
78
78
  margin: 0;
79
- ${e=>!e.$isDisabled&&"cursor: pointer;"}
79
+ ${e=>!e.isDisabled&&"cursor: pointer;"}
80
80
  z-index: 1;
81
- ${e=>t[e.$size]};
82
- `,b=l.default.span`
81
+ ${e=>c[e.$size]};
82
+
83
+ :focus-visible {
84
+ transition: background-color 400ms;
85
+ ${a.BackgroundStyles}
86
+ }
87
+ `,p=t.default.span`
83
88
  display: flex;
84
89
  box-sizing: border-box;
85
90
  border-radius: 50%;
86
91
 
87
92
  border: 2px solid
88
- ${e=>e.$hasError?s.default.colors.error.dark:s.default.colors.gray.light1};
89
- `,p=l.default.span`
93
+ ${e=>e.$hasError?i.default.colors.error.dark:i.default.colors.gray.light1};
94
+ `,g=t.default.span`
90
95
  box-sizing: border-box;
91
96
  opacity: 0;
92
97
  margin: auto;
93
98
  border-radius: 50%;
94
- background-color: ${s.default.colors.gray.light1};
99
+ background-color: ${i.default.colors.gray.light1};
95
100
 
96
101
  position: absolute;
97
102
  top: 0;
98
103
  left: 0;
99
- `,x=l.default(o.BodyText)`
104
+ `,x=t.default(o.BodyText)`
100
105
  cursor: ${({isDisabled:e})=>e?"default":"pointer"};
101
106
  user-select: none;
102
107
  color: ${({theme:e,isDisabled:r})=>r?e.colors.text.disabled:e.colors.text.dark};
103
108
  margin-left: 0.5rem;
104
- `,g=({name:r=i.generateNameHash("radio-button"),size:s="regular",checked:o=!1,isDisabled:a=!1,color:l="secondary",label:t,hasError:d,...c})=>e.jsxs(n,{children:[e.jsxs(u,{size:s,color:l,isChecked:o,isDisabled:a,$hasError:d,children:[e.jsx(h,{"data-validate":"checked",checked:o,type:"radio",name:r,id:r,disabled:a,"aria-label":r,"aria-checked":o,className:"circle circle--outer",$size:s,$isDisabled:a,...c}),e.jsx(b,{className:"circle circle--outer",$hasError:d,children:e.jsx(p,{className:"circle circle--inner"})})]}),t&&e.jsx(x,{as:"label",htmlFor:r,isDisabled:a,children:t})]});exports.RadioButton=g,exports.default=g;
109
+ `,f=({name:r=s.generateNameHash("radio-button"),size:i="regular",checked:o=!1,isDisabled:a=!1,color:l="secondary",label:t,hasError:c,...d})=>e.jsxs(u,{children:[e.jsxs(h,{size:i,color:l,isChecked:o,isDisabled:a,$hasError:c,children:[e.jsx(b,{"data-validate":"checked",checked:o,type:"radio",name:r,id:r,disabled:a,"aria-label":r,"aria-checked":o,className:"circle circle--outer",$size:i,isDisabled:a,color:l,...d}),e.jsx(p,{className:"circle circle--outer",$hasError:c,children:e.jsx(g,{className:"circle circle--inner"})})]}),t&&e.jsx(x,{as:"label",htmlFor:r,isDisabled:a,children:t})]});exports.RadioButton=f,exports.default=f;
package/esm/components/RadioButton/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import{jsxs as n,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled-components";import{generateNameHash as m}from"../../shared/helpers.js";import e from"../../theme.js";import{BodyText as u}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const x=s`
1
+ import{jsxs as b,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled-components";import{generateNameHash as g}from"../../shared/helpers.js";import e from"../../theme.js";import{BodyText as m}from"../../typography/BodyText/index.js";import{BackgroundStyles as x}from"../IconButton.js";import"../../shared/media-queries.js";const $=s`
2
2
  .circle {
3
3
  &--outer {
4
4
  height: 24px;
@@ -11,7 +11,7 @@ import{jsxs as n,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled
11
11
  transform: scale(0.6);
12
12
  }
13
13
  }
14
- `,$=s`
14
+ `,f=s`
15
15
  .circle {
16
16
  &--outer {
17
17
  height: 32px;
@@ -24,7 +24,7 @@ import{jsxs as n,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled
24
24
  transform: scale(0.6);
25
25
  }
26
26
  }
27
- `,h={regular:x,large:$},f=s`
27
+ `,h={regular:$,large:f},y=s`
28
28
  cursor: default;
29
29
 
30
30
  .circle {
@@ -36,14 +36,14 @@ import{jsxs as n,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled
36
36
  border: 2px solid ${e.colors.gray.light1};
37
37
  }
38
38
  }
39
- `,y=s`
39
+ `,k=s`
40
40
  .circle {
41
41
  &--inner {
42
42
  opacity: 1;
43
43
  background-color: ${e.colors.gray.light1};
44
44
  }
45
45
  }
46
- `,k=(r,i)=>s`
46
+ `,D=(r,i)=>s`
47
47
  .circle {
48
48
  &--inner {
49
49
  opacity: 1;
@@ -59,7 +59,7 @@ import{jsxs as n,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled
59
59
  display: flex;
60
60
  align-items: center;
61
61
  box-sizing: border-box;
62
- `,D=o.span`
62
+ `,E=o.span`
63
63
  cursor: pointer;
64
64
  display: flex;
65
65
  position: relative;
@@ -68,17 +68,22 @@ import{jsxs as n,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled
68
68
 
69
69
  ${r=>h[r.size]};
70
70
 
71
- ${r=>!r.isDisabled&&r.isChecked&&k(r.color,r.$hasError)};
72
- ${r=>r.isDisabled&&f};
71
+ ${r=>!r.isDisabled&&r.isChecked&&D(r.color,r.$hasError)};
72
+ ${r=>r.isDisabled&&y};
73
73
 
74
- ${r=>r.isChecked&&r.isDisabled&&y};
75
- `,E=o.input`
76
- position: fixed;
74
+ ${r=>r.isChecked&&r.isDisabled&&k};
75
+ `,v=o.input`
76
+ position: absolute;
77
77
  opacity: 0;
78
78
  margin: 0;
79
- ${r=>!r.$isDisabled&&"cursor: pointer;"}
79
+ ${r=>!r.isDisabled&&"cursor: pointer;"}
80
80
  z-index: 1;
81
81
  ${r=>h[r.$size]};
82
+
83
+ :focus-visible {
84
+ transition: background-color 400ms;
85
+ ${x}
86
+ }
82
87
  `,w=o.span`
83
88
  display: flex;
84
89
  box-sizing: border-box;
@@ -86,7 +91,7 @@ import{jsxs as n,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled
86
91
 
87
92
  border: 2px solid
88
93
  ${r=>r.$hasError?e.colors.error.dark:e.colors.gray.light1};
89
- `,C=o.span`
94
+ `,B=o.span`
90
95
  box-sizing: border-box;
91
96
  opacity: 0;
92
97
  margin: auto;
@@ -96,9 +101,9 @@ import{jsxs as n,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled
96
101
  position: absolute;
97
102
  top: 0;
98
103
  left: 0;
99
- `,N=o(u)`
104
+ `,C=o(m)`
100
105
  cursor: ${({isDisabled:r})=>r?"default":"pointer"};
101
106
  user-select: none;
102
107
  color: ${({theme:r,isDisabled:i})=>i?r.colors.text.disabled:r.colors.text.dark};
103
108
  margin-left: 0.5rem;
104
- `,b=({name:r=m("radio-button"),size:i="regular",checked:c=!1,isDisabled:a=!1,color:p="secondary",label:t,hasError:d,...g})=>n(z,{children:[n(D,{size:i,color:p,isChecked:c,isDisabled:a,$hasError:d,children:[l(E,{"data-validate":"checked",checked:c,type:"radio",name:r,id:r,disabled:a,"aria-label":r,"aria-checked":c,className:"circle circle--outer",$size:i,$isDisabled:a,...g}),l(w,{className:"circle circle--outer",$hasError:d,children:l(C,{className:"circle circle--inner"})})]}),t&&l(N,{as:"label",htmlFor:r,isDisabled:a,children:t})]});export{b as RadioButton,b as default};
109
+ `,p=({name:r=g("radio-button"),size:i="regular",checked:c=!1,isDisabled:a=!1,color:t="secondary",label:d,hasError:n,...u})=>b(z,{children:[b(E,{size:i,color:t,isChecked:c,isDisabled:a,$hasError:n,children:[l(v,{"data-validate":"checked",checked:c,type:"radio",name:r,id:r,disabled:a,"aria-label":r,"aria-checked":c,className:"circle circle--outer",$size:i,isDisabled:a,color:t,...u}),l(w,{className:"circle circle--outer",$hasError:n,children:l(B,{className:"circle circle--inner"})})]}),d&&l(C,{as:"label",htmlFor:r,isDisabled:a,children:d})]});export{p as RadioButton,p as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kvdbil/components",
3
- "version": "15.0.2",
3
+ "version": "15.0.3",
4
4
  "sideEffects": false,
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
package/package.json.tmp CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kvdbil/components",
3
- "version": "15.0.2",
3
+ "version": "15.0.3",
4
4
  "sideEffects": false,
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",