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