@kvdbil/components 14.3.17 → 14.3.18

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