@kvdbil/components 14.2.16 → 14.3.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 (4) hide show
  1. package/cjs/components/CheckBox/index.js +20 -18
  2. package/esm/components/CheckBox/index.js +25 -23
  3. package/package.json +1 -1
  4. package/types/components/CheckBox/index.d.ts +2 -1
package/cjs/components/CheckBox/index.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var b=require("react"),t=require("styled-components"),x=require("../../icons/components/CheckmarkIcon.js"),f=require("../../shared/helpers.js"),i=require("../../theme.js"),g=require("../../typography/BodyText/index.js"),m=require("../IconButton.js");function n(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}require("../../shared/media-queries.js");var o=n(b),s=n(t);const u={regular:t.css`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var x=require("react"),o=require("styled-components"),f=require("../../icons/components/CheckmarkIcon.js"),g=require("../../shared/helpers.js"),t=require("../../theme.js"),m=require("../../typography/BodyText/index.js"),k=require("../IconButton.js");function n(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}require("../../shared/media-queries.js");var s=n(x),i=n(o);const u={regular:o.css`
2
2
  width: 24px;
3
3
  height: 24px;
4
4
 
@@ -6,7 +6,7 @@
6
6
  width: 15px;
7
7
  height: 15px;
8
8
  }
9
- `,large:t.css`
9
+ `,large:o.css`
10
10
  width: 32px;
11
11
  height: 32px;
12
12
 
@@ -14,17 +14,19 @@
14
14
  width: 22px;
15
15
  height: 22px;
16
16
  }
17
- `},y=t.css`
17
+ `},y=o.css`
18
18
  cursor: default;
19
- border: 2px solid ${i.default.colors.gray.light2};
20
- `,k=t.css`
21
- background: ${i.default.colors.gray.light2};
19
+ border: 2px solid ${t.default.colors.gray.light2};
20
+ `,$=o.css`
21
+ background: ${t.default.colors.gray.light2};
22
22
  z-index: 1;
23
- `,$=s.default.div`
23
+ `,v=o.css`
24
+ border: 2px solid ${t.default.colors.error.dark};
25
+ `,z=i.default.div`
24
26
  display: flex;
25
27
  align-items: flex-start;
26
28
  box-sizing: border-box;
27
- `,v=s.default.input.attrs({type:"checkbox"})`
29
+ `,j=i.default.input.attrs({type:"checkbox"})`
28
30
  position: absolute;
29
31
  appearance: none;
30
32
  width: 100%;
@@ -38,9 +40,9 @@
38
40
 
39
41
  :focus-visible {
40
42
  transition: background-color 400ms;
41
- ${m.BackgroundStyles}
43
+ ${k.BackgroundStyles}
42
44
  }
43
- `,z=s.default.span`
45
+ `,q=i.default.span`
44
46
  box-sizing: border-box;
45
47
  cursor: pointer;
46
48
  display: flex;
@@ -49,7 +51,7 @@
49
51
  justify-content: center;
50
52
  z-index: 0;
51
53
 
52
- border: 2px solid ${i.default.colors.gray.dark5};
54
+ border: 2px solid ${t.default.colors.gray.dark5};
53
55
 
54
56
  ${e=>u[e.size]};
55
57
 
@@ -58,7 +60,7 @@
58
60
  color: ${({theme:e})=>e.colors.common.white};
59
61
  }
60
62
 
61
- ${e=>e.isChecked&&(r=>t.css`
63
+ ${e=>e.isChecked&&(r=>o.css`
62
64
  svg {
63
65
  opacity: 1;
64
66
  }
@@ -66,16 +68,16 @@
66
68
  :hover {
67
69
  }
68
70
 
69
- background: ${i.default.colors[r].main};
70
- border: 2px solid ${i.default.colors[r].main};
71
+ background: ${t.default.colors[r].main};
72
+ border: 2px solid ${t.default.colors[r].main};
71
73
  `)(e.color)};
72
74
  ${e=>e.isDisabled&&y};
73
-
74
- ${e=>e.isChecked&&e.isDisabled&&k};
75
- `,j=s.default(g.BodyText)`
75
+ ${e=>e.hasError&&v};
76
+ ${e=>e.isChecked&&e.isDisabled&&$};
77
+ `,D=i.default(m.BodyText)`
76
78
  flex: 1;
77
79
  cursor: ${({isDisabled:e})=>e?"default":"pointer"};
78
80
  user-select: none;
79
81
  color: ${({theme:e,isDisabled:r})=>r?e.colors.text.disabled:e.colors.text.dark};
80
82
  margin-left: 0.5rem;
81
- `,h=({name:e=f.generateNameHash("check-box"),isDisabled:r=!1,size:a="regular",checked:l=!1,color:d="secondary",label:c,...p})=>o.default.createElement($,null,o.default.createElement(v,{...p,type:"checkbox",checked:l,"data-validate":"checked",name:e,id:e,color:d,disabled:r,isDisabled:r,boxSize:a}),o.default.createElement(z,{size:a,color:d,isChecked:l,isDisabled:r},o.default.createElement(x.default,null)),c&&o.default.createElement(j,{as:"label",htmlFor:e,isDisabled:r},c));exports.CheckBox=h,exports.default=h;
83
+ `,h=({name:e=g.generateNameHash("check-box"),isDisabled:r=!1,size:a="regular",checked:l=!1,color:d="secondary",hasError:p=!1,label:c,...b})=>s.default.createElement(z,null,s.default.createElement(j,{...b,type:"checkbox",checked:l,"data-validate":"checked",name:e,id:e,color:d,disabled:r,isDisabled:r,boxSize:a}),s.default.createElement(q,{size:a,color:d,isChecked:l,isDisabled:r,hasError:p},s.default.createElement(f.default,null)),c&&s.default.createElement(D,{as:"label",htmlFor:e,isDisabled:r},c));exports.CheckBox=h,exports.default=h;
package/esm/components/CheckBox/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import r from"react";import s,{css as i}from"styled-components";import h from"../../icons/components/CheckmarkIcon.js";import{generateNameHash as x}from"../../shared/helpers.js";import t from"../../theme.js";import{BodyText as b}from"../../typography/BodyText/index.js";import{BackgroundStyles as g}from"../IconButton.js";import"../../shared/media-queries.js";const u=i`
1
+ import s from"react";import t,{css as o}from"styled-components";import x from"../../icons/components/CheckmarkIcon.js";import{generateNameHash as b}from"../../shared/helpers.js";import i from"../../theme.js";import{BodyText as g}from"../../typography/BodyText/index.js";import{BackgroundStyles as u}from"../IconButton.js";import"../../shared/media-queries.js";const f=o`
2
2
  width: 24px;
3
3
  height: 24px;
4
4
 
@@ -6,7 +6,7 @@ import r from"react";import s,{css as i}from"styled-components";import h from"..
6
6
  width: 15px;
7
7
  height: 15px;
8
8
  }
9
- `,f=i`
9
+ `,k=o`
10
10
  width: 32px;
11
11
  height: 32px;
12
12
 
@@ -14,10 +14,10 @@ import r from"react";import s,{css as i}from"styled-components";import h from"..
14
14
  width: 22px;
15
15
  height: 22px;
16
16
  }
17
- `,d={regular:u,large:f},k=i`
17
+ `,n={regular:f,large:k},y=o`
18
18
  cursor: default;
19
- border: 2px solid ${t.colors.gray.light2};
20
- `,y=e=>i`
19
+ border: 2px solid ${i.colors.gray.light2};
20
+ `,$=e=>o`
21
21
  svg {
22
22
  opacity: 1;
23
23
  }
@@ -25,16 +25,18 @@ import r from"react";import s,{css as i}from"styled-components";import h from"..
25
25
  :hover {
26
26
  }
27
27
 
28
- background: ${t.colors[e].main};
29
- border: 2px solid ${t.colors[e].main};
30
- `,$=i`
31
- background: ${t.colors.gray.light2};
28
+ background: ${i.colors[e].main};
29
+ border: 2px solid ${i.colors[e].main};
30
+ `,z=o`
31
+ background: ${i.colors.gray.light2};
32
32
  z-index: 1;
33
- `,z=s.div`
33
+ `,v=o`
34
+ border: 2px solid ${i.colors.error.dark};
35
+ `,D=t.div`
34
36
  display: flex;
35
37
  align-items: flex-start;
36
38
  box-sizing: border-box;
37
- `,v=s.input.attrs({type:"checkbox"})`
39
+ `,E=t.input.attrs({type:"checkbox"})`
38
40
  position: absolute;
39
41
  appearance: none;
40
42
  width: 100%;
@@ -44,13 +46,13 @@ import r from"react";import s,{css as i}from"styled-components";import h from"..
44
46
  outline: none;
45
47
  cursor: pointer;
46
48
  z-index: 1;
47
- ${e=>d[e.boxSize]};
49
+ ${e=>n[e.boxSize]};
48
50
 
49
51
  :focus-visible {
50
52
  transition: background-color 400ms;
51
- ${g}
53
+ ${u}
52
54
  }
53
- `,D=s.span`
55
+ `,j=t.span`
54
56
  box-sizing: border-box;
55
57
  cursor: pointer;
56
58
  display: flex;
@@ -59,23 +61,23 @@ import r from"react";import s,{css as i}from"styled-components";import h from"..
59
61
  justify-content: center;
60
62
  z-index: 0;
61
63
 
62
- border: 2px solid ${t.colors.gray.dark5};
64
+ border: 2px solid ${i.colors.gray.dark5};
63
65
 
64
- ${e=>d[e.size]};
66
+ ${e=>n[e.size]};
65
67
 
66
68
  svg {
67
69
  opacity: 0;
68
70
  color: ${({theme:e})=>e.colors.common.white};
69
71
  }
70
72
 
71
- ${e=>e.isChecked&&y(e.color)};
72
- ${e=>e.isDisabled&&k};
73
-
74
- ${e=>e.isChecked&&e.isDisabled&&$};
75
- `,j=s(b)`
73
+ ${e=>e.isChecked&&$(e.color)};
74
+ ${e=>e.isDisabled&&y};
75
+ ${e=>e.hasError&&v};
76
+ ${e=>e.isChecked&&e.isDisabled&&z};
77
+ `,w=t(g)`
76
78
  flex: 1;
77
79
  cursor: ${({isDisabled:e})=>e?"default":"pointer"};
78
80
  user-select: none;
79
- color: ${({theme:e,isDisabled:o})=>o?e.colors.text.disabled:e.colors.text.dark};
81
+ color: ${({theme:e,isDisabled:r})=>r?e.colors.text.disabled:e.colors.text.dark};
80
82
  margin-left: 0.5rem;
81
- `,p=({name:e=x("check-box"),isDisabled:o=!1,size:a="regular",checked:l=!1,color:c="secondary",label:n,...m})=>r.createElement(z,null,r.createElement(v,{...m,type:"checkbox",checked:l,"data-validate":"checked",name:e,id:e,color:c,disabled:o,isDisabled:o,boxSize:a}),r.createElement(D,{size:a,color:c,isChecked:l,isDisabled:o},r.createElement(h,null)),n&&r.createElement(j,{as:"label",htmlFor:e,isDisabled:o},n));export{p as CheckBox,p as default};
83
+ `,p=({name:e=b("check-box"),isDisabled:r=!1,size:a="regular",checked:l=!1,color:c="secondary",hasError:h=!1,label:d,...m})=>s.createElement(D,null,s.createElement(E,{...m,type:"checkbox",checked:l,"data-validate":"checked",name:e,id:e,color:c,disabled:r,isDisabled:r,boxSize:a}),s.createElement(j,{size:a,color:c,isChecked:l,isDisabled:r,hasError:h},s.createElement(x,null)),d&&s.createElement(w,{as:"label",htmlFor:e,isDisabled:r},d));export{p as CheckBox,p as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kvdbil/components",
3
- "version": "14.2.16",
3
+ "version": "14.3.0",
4
4
  "sideEffects": false,
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
package/types/components/CheckBox/index.d.ts CHANGED
@@ -7,7 +7,8 @@ export interface CheckBoxProps extends ComponentPropsWithoutSize {
7
7
  color?: Color;
8
8
  checked?: boolean;
9
9
  isDisabled?: boolean;
10
+ hasError?: boolean;
10
11
  label?: ReactNode;
11
12
  }
12
- export declare const CheckBox: ({ name, isDisabled, size, checked, color, label, ...rest }: CheckBoxProps) => import("react/jsx-runtime").JSX.Element;
13
+ export declare const CheckBox: ({ name, isDisabled, size, checked, color, hasError, label, ...rest }: CheckBoxProps) => import("react/jsx-runtime").JSX.Element;
13
14
  export default CheckBox;