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