@kvdbil/components 8.3.0 → 8.3.4

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 (10) hide show
  1. package/cjs/components/CheckBox/index.js +23 -25
  2. package/cjs/components/RadioButton/index.js +19 -17
  3. package/cjs/components/Textfield/index.js +1 -1
  4. package/cjs/shared/helpers.js +1 -1
  5. package/esm/components/CheckBox/index.js +25 -27
  6. package/esm/components/RadioButton/index.js +5 -3
  7. package/esm/components/Textfield/index.js +1 -1
  8. package/esm/shared/helpers.js +1 -1
  9. package/package.json +1 -1
  10. package/types/components/CheckBox/index.d.ts +4 -5
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"),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`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../shared/helpers.js"),o=require("../../theme.js"),s=require("../../typography/BodyText/index.js"),i=require("../../icons/components/CheckmarkIcon.js"),a=require("../IconButton.js");function l(m){return m&&typeof m=="object"&&"default"in m?m:{default:m}}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,9 +16,9 @@
16
16
  }
17
17
  `},u=r.css`
18
18
  cursor: default;
19
- border: 2px solid ${i.default.colors.gray.light2};
19
+ border: 2px solid ${o.default.colors.gray.light2};
20
20
  `,h=r.css`
21
- background: ${i.default.colors.gray.light2};
21
+ background: ${o.default.colors.gray.light2};
22
22
  `,p=c.default.div`
23
23
  display: flex;
24
24
  align-items: center;
@@ -30,36 +30,34 @@
30
30
  height: 100%;
31
31
  margin: 0;
32
32
  padding: 0;
33
+ outline: none;
34
+ cursor: pointer;
35
+ z-index: 1;
36
+ ${m=>n[m.boxSize]};
33
37
 
34
38
  :focus-visible {
35
- outline: none;
36
- height: calc(100% + 1rem);
37
- width: calc(100% + 1rem);
38
- top: -0.5rem;
39
- left: -0.5rem;
40
- appearance: initial;
41
- border-radius: 10rem;
42
39
  transition: background-color 400ms;
43
- ${o.BackgroundStyles}
40
+ ${a.BackgroundStyles}
44
41
  }
45
- `,m=c.default.span`
42
+ `,x=c.default.span`
46
43
  box-sizing: border-box;
47
44
  cursor: pointer;
48
45
  display: flex;
49
46
  position: relative;
50
47
  align-items: center;
51
48
  justify-content: center;
49
+ z-index: 0;
52
50
 
53
- border: 2px solid ${i.default.colors.gray.dark5};
51
+ border: 2px solid ${o.default.colors.gray.dark5};
54
52
 
55
- ${x=>n[x.size]};
53
+ ${m=>n[m.size]};
56
54
 
57
55
  svg {
58
56
  opacity: 0;
59
- color: ${({theme:x})=>x.colors.common.white};
57
+ color: ${({theme:m})=>m.colors.common.white};
60
58
  }
61
59
 
62
- ${x=>{return x.isChecked&&(k=x.color,r.css`
60
+ ${m=>{return m.isChecked&&(y=m.color,r.css`
63
61
  svg {
64
62
  opacity: 1;
65
63
  }
@@ -67,15 +65,15 @@
67
65
  :hover {
68
66
  }
69
67
 
70
- background: ${i.default.colors[k].main};
71
- border: 2px solid ${i.default.colors[k].main};
72
- `);var k}};
73
- ${x=>x.isDisabled&&u};
68
+ background: ${o.default.colors[y].main};
69
+ border: 2px solid ${o.default.colors[y].main};
70
+ `);var y}};
71
+ ${m=>m.isDisabled&&u};
74
72
 
75
- ${x=>x.isChecked&&x.isDisabled&&h};
76
- `,f=c.default(a.BodyText)`
77
- cursor: ${({isDisabled:x})=>x?"default":"pointer"};
73
+ ${m=>m.isChecked&&m.isDisabled&&h};
74
+ `,g=c.default(s.BodyText)`
75
+ cursor: ${({isDisabled:m})=>m?"default":"pointer"};
78
76
  user-select: none;
79
- color: ${({theme:x,isDisabled:k})=>k?x.colors.text.disabled:x.colors.text.dark};
77
+ color: ${({theme:m,isDisabled:y})=>y?m.colors.text.disabled:m.colors.text.dark};
80
78
  margin-left: 0.5rem;
81
- `,g=({name:x=t.generateNameHash("check-box"),isDisabled:k=!1,size:j="regular",checked:y=!1,color:v="secondary",onClick:q,label:$,...D})=>d.default.createElement(p,null,d.default.createElement(o.default,{noTabIndex:!0,onClick:q,isActive:y,isDisabled:k,color:v},d.default.createElement(b,{...D,checked:y,"data-validate":"checked",name:x,id:x,color:v,disabled:k,isDisabled:k}),d.default.createElement(m,{size:j,color:v,isChecked:y,isDisabled:k},d.default.createElement(s.default,null))),$&&d.default.createElement(f,{as:"label",htmlFor:x,isDisabled:k},$));exports.CheckBox=g,exports.default=g;
79
+ `,f=({name:m=t.generateNameHash("check-box"),isDisabled:y=!1,size:k="regular",checked:$=!1,color:v="secondary",label:j,...q})=>d.default.createElement(p,null,d.default.createElement(b,{...q,type:"checkbox",checked:$,"data-validate":"checked",name:m,id:m,color:v,disabled:y,isDisabled:y,boxSize:k}),d.default.createElement(x,{size:k,color:v,isChecked:$,isDisabled:y},d.default.createElement(i.default,null)),j&&d.default.createElement(g,{as:"label",htmlFor:m,isDisabled:y},j));exports.CheckBox=f,exports.default=f;
package/cjs/components/RadioButton/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"),l=require("../IconButton.js"),i=require("../../typography/BodyText/index.js");function o(y){return y&&typeof y=="object"&&"default"in y?y:{default:y}}require("../../shared/media-queries.js");var s=o(e),d=o(r);const c={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("../IconButton.js"),l=require("../../typography/BodyText/index.js");function o(y){return y&&typeof y=="object"&&"default"in y?y:{default:y}}require("../../shared/media-queries.js");var s=o(e),c=o(r);const d={regular:r.css`
2
2
  .circle {
3
3
  &--outer {
4
4
  height: 24px;
@@ -29,69 +29,71 @@
29
29
 
30
30
  .circle {
31
31
  &--inner {
32
- background-color: ${a.default.colors.gray.light1};
32
+ background-color: ${i.default.colors.gray.light1};
33
33
  }
34
34
 
35
35
  &--outer {
36
- border: 2px solid ${a.default.colors.gray.light1};
36
+ border: 2px solid ${i.default.colors.gray.light1};
37
37
  }
38
38
  }
39
39
  `,u=r.css`
40
40
  .circle {
41
41
  &--inner {
42
42
  opacity: 1;
43
- background-color: ${a.default.colors.gray.light1};
43
+ background-color: ${i.default.colors.gray.light1};
44
44
  }
45
45
  }
46
- `,f=d.default.div`
46
+ `,f=c.default.div`
47
47
  display: flex;
48
48
  align-items: center;
49
49
  box-sizing: border-box;
50
- `,b=d.default.span`
50
+ `,b=c.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
- ${y=>c[y.size]};
57
+ ${y=>d[y.size]};
58
58
 
59
59
  ${y=>{return!y.isDisabled&&y.isChecked&&($=y.color,r.css`
60
60
  .circle {
61
61
  &--inner {
62
62
  opacity: 1;
63
- background-color: ${a.default.colors[$].main};
63
+ background-color: ${i.default.colors[$].main};
64
64
  }
65
65
 
66
66
  &--outer {
67
- border: 2px solid ${a.default.colors[$].main};
67
+ border: 2px solid ${i.default.colors[$].main};
68
68
  }
69
69
  }
70
70
  `);var $}};
71
71
  ${y=>y.isDisabled&&n};
72
72
 
73
73
  ${y=>y.isChecked&&y.isDisabled&&u};
74
- `,p=d.default.input`
75
- display: none;
76
- `,g=d.default.span`
74
+ `,p=c.default.input`
75
+ position: fixed;
76
+ opacity: 0;
77
+ pointer-events: none;
78
+ `,h=c.default.span`
77
79
  display: flex;
78
80
  box-sizing: border-box;
79
81
  border-radius: 50%;
80
82
 
81
- border: 2px solid ${a.default.colors.gray.light1};
82
- `,h=d.default.span`
83
+ border: 2px solid ${i.default.colors.gray.light1};
84
+ `,g=c.default.span`
83
85
  box-sizing: border-box;
84
86
  opacity: 0;
85
87
  margin: auto;
86
88
  border-radius: 50%;
87
- background-color: ${a.default.colors.gray.light1};
89
+ background-color: ${i.default.colors.gray.light1};
88
90
 
89
91
  position: absolute;
90
92
  top: 0;
91
93
  left: 0;
92
- `,m=d.default(i.BodyText)`
94
+ `,m=c.default(l.BodyText)`
93
95
  cursor: ${({isDisabled:y})=>y?"default":"pointer"};
94
96
  user-select: none;
95
97
  color: ${({theme:y,isDisabled:$})=>$?y.colors.text.disabled:y.colors.text.dark};
96
98
  margin-left: 0.5rem;
97
- `,x=({name:y=t.generateNameHash("radio-button"),size:$="regular",checked:D=!1,isDisabled:k=!1,color:j="secondary",onChange:q,label:v,...E})=>s.default.createElement(f,null,s.default.createElement(l.default,{onClick:q,isActive:D,isDisabled:k,color:j},s.default.createElement(p,{"data-validate":"checked",type:"radio",name:y,id:y,onChange:q,disabled:k,...E}),s.default.createElement(b,{size:$,color:j,isChecked:D,isDisabled:k},s.default.createElement(g,{className:"circle circle--outer"},s.default.createElement(h,{className:"circle circle--inner"})))),v&&s.default.createElement(m,{as:"label",htmlFor:y,isDisabled:k},v));exports.RadioButton=x,exports.default=x;
99
+ `,x=({name:y=t.generateNameHash("radio-button"),size:$="regular",checked:v=!1,isDisabled:k=!1,color:D="secondary",onChange:j,label:q,...E})=>s.default.createElement(f,null,s.default.createElement(a.default,{onClick:j,isActive:v,isDisabled:k,color:D},s.default.createElement(p,{"data-validate":"checked",checked:v,type:"radio",name:y,id:y,onChange:j,disabled:k,"aria-label":y,...E}),s.default.createElement(b,{size:$,color:D,isChecked:v,isDisabled:k},s.default.createElement(h,{className:"circle circle--outer"},s.default.createElement(g,{className:"circle circle--inner"})))),q&&s.default.createElement(m,{as:"label",htmlFor:y,isDisabled:k},q));exports.RadioButton=x,exports.default=x;
package/cjs/components/Textfield/index.js CHANGED
@@ -61,4 +61,4 @@
61
61
  ${({centered:g})=>g&&"width: 100%; text-align: center;"}
62
62
  `,b=s.default.span`
63
63
  display: block;
64
- `,x=({placeholder:g="",isDisabled:y=!1,centered:E=!1,hasError:k=!1,className:S,helperText:F,label:q="",onBlur:z=()=>null,onFocus:L=()=>null,forwardRef:P,suffix:w,name:v=a.generateNameHash("text-input"),errors:j,...T})=>{const[B,N]=e.useState(!1),_=Boolean(T.value);return d.default.createElement(u,{className:S},d.default.createElement(h,{isFocused:B,disabled:y,centered:E,hasError:k,hasPlaceholder:!!g},d.default.createElement(m,{...T,id:v,name:v,ref:P,onFocus:$=>{N(!0),L($)},onBlur:$=>{N(!1),z($)},disabled:y,placeholder:q&&!B?"":g}),w&&d.default.createElement(f,null,w)),q&&d.default.createElement(t.Label,{htmlFor:v,isFocused:B,centered:E,hasError:k,hasValue:_,disabled:y},q),(F||j)&&d.default.createElement(p,{centered:E,hasError:k},F&&d.default.createElement(b,null,F),j&&j.map($=>d.default.createElement(b,{key:$},$))))};exports.TextField=x,exports.default=x;
64
+ `,x=({placeholder:g="",isDisabled:y=!1,centered:k=!1,hasError:F=!1,className:S,helperText:q,label:v="",onBlur:z=()=>null,onFocus:L=()=>null,forwardRef:P,suffix:w,name:E=a.generateNameHash("text-input"),errors:j,...T})=>{const[B,N]=e.useState(!1),_=Boolean(T.value);return d.default.createElement(u,{className:S},d.default.createElement(h,{isFocused:B,disabled:y,centered:k,hasError:F,hasPlaceholder:!!g},d.default.createElement(m,{...T,id:E,name:E,"aria-label":E,ref:P,onFocus:$=>{N(!0),L($)},onBlur:$=>{N(!1),z($)},disabled:y,placeholder:v&&!B?"":g}),w&&d.default.createElement(f,null,w)),v&&d.default.createElement(t.Label,{htmlFor:E,isFocused:B,centered:k,hasError:F,hasValue:_,disabled:y},v),(q||j)&&d.default.createElement(p,{centered:k,hasError:F},q&&d.default.createElement(b,null,q),j&&j.map($=>d.default.createElement(b,{key:$},$))))};exports.TextField=x,exports.default=x;
package/cjs/shared/helpers.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.fadedColor=(e,a)=>{if(!/^#?([0-9A-F]{3}){1,2}$/i.test(e))return console.error("Failed to get faded color.",e),e;const t=e.match(e.length<=4?/\w/g:/\w\w/g);if(t){const o=t.map(r=>parseInt(r.length<2?`${r}${r}`:r,16));if(o.every(Number.isInteger)){const[r,s,n]=o;return`rgba(${r}, ${s}, ${n}, ${a||1})`}}return console.error("Failed to get faded color.",e),e},exports.generateNameHash=e=>`${e}-${Math.random().toString(36).replace(/[^a-z]+/g,"").substr(2,10)}`;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.fadedColor=(r,n)=>{if(!/^#?([0-9A-F]{3}){1,2}$/i.test(r))return r;const e=r.match(r.length<=4?/\w/g:/\w\w/g);if(e){const s=e.map(t=>parseInt(t.length<2?`${t}${t}`:t,16));if(s.every(Number.isInteger)){const[t,a,o]=s;return`rgba(${t}, ${a}, ${o}, ${n||1})`}}return r},exports.generateNameHash=r=>`${r}-${Math.random().toString(36).replace(/[^a-z]+/g,"").substr(2,10)}`;
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 y=r`
1
+ import t from"react";import i,{css as r}from"styled-components";import{generateNameHash as m}from"../../shared/helpers.js";import s from"../../theme.js";import{BodyText as x}from"../../typography/BodyText/index.js";import g from"../../icons/components/CheckmarkIcon.js";import{BackgroundStyles as u}from"../IconButton.js";import"../../shared/media-queries.js";const b=r`
2
2
  width: 24px;
3
3
  height: 24px;
4
4
 
@@ -6,7 +6,7 @@ import o from"react";import s,{css as r}from"styled-components";import{generateN
6
6
  width: 15px;
7
7
  height: 15px;
8
8
  }
9
- `,f=r`
9
+ `,k=r`
10
10
  width: 32px;
11
11
  height: 32px;
12
12
 
@@ -14,10 +14,10 @@ import o from"react";import s,{css as r}from"styled-components";import{generateN
14
14
  width: 22px;
15
15
  height: 22px;
16
16
  }
17
- `,k={regular:y,large:f},$=r`
17
+ `,d={regular:b,large:k},y=r`
18
18
  cursor: default;
19
- border: 2px solid ${i.colors.gray.light2};
20
- `,v=e=>r`
19
+ border: 2px solid ${s.colors.gray.light2};
20
+ `,f=e=>r`
21
21
  svg {
22
22
  opacity: 1;
23
23
  }
@@ -25,57 +25,55 @@ import o from"react";import s,{css as r}from"styled-components";import{generateN
25
25
  :hover {
26
26
  }
27
27
 
28
- background: ${i.colors[e].main};
29
- border: 2px solid ${i.colors[e].main};
30
- `,C=r`
31
- background: ${i.colors.gray.light2};
32
- `,j=s.div`
28
+ background: ${s.colors[e].main};
29
+ border: 2px solid ${s.colors[e].main};
30
+ `,$=r`
31
+ background: ${s.colors.gray.light2};
32
+ `,v=i.div`
33
33
  display: flex;
34
34
  align-items: center;
35
35
  box-sizing: border-box;
36
- `,w=s.input.attrs({type:"checkbox"})`
36
+ `,z=i.input.attrs({type:"checkbox"})`
37
37
  position: absolute;
38
38
  appearance: none;
39
39
  width: 100%;
40
40
  height: 100%;
41
41
  margin: 0;
42
42
  padding: 0;
43
+ outline: none;
44
+ cursor: pointer;
45
+ z-index: 1;
46
+ ${e=>d[e.boxSize]};
43
47
 
44
48
  :focus-visible {
45
- outline: none;
46
- height: calc(100% + 1rem);
47
- width: calc(100% + 1rem);
48
- top: -0.5rem;
49
- left: -0.5rem;
50
- appearance: initial;
51
- border-radius: 10rem;
52
49
  transition: background-color 400ms;
53
50
  ${u}
54
51
  }
55
- `,z=s.span`
52
+ `,C=i.span`
56
53
  box-sizing: border-box;
57
54
  cursor: pointer;
58
55
  display: flex;
59
56
  position: relative;
60
57
  align-items: center;
61
58
  justify-content: center;
59
+ z-index: 0;
62
60
 
63
- border: 2px solid ${i.colors.gray.dark5};
61
+ border: 2px solid ${s.colors.gray.dark5};
64
62
 
65
- ${e=>k[e.size]};
63
+ ${e=>d[e.size]};
66
64
 
67
65
  svg {
68
66
  opacity: 0;
69
67
  color: ${({theme:e})=>e.colors.common.white};
70
68
  }
71
69
 
72
- ${e=>e.isChecked&&v(e.color)};
73
- ${e=>e.isDisabled&&$};
70
+ ${e=>e.isChecked&&f(e.color)};
71
+ ${e=>e.isDisabled&&y};
74
72
 
75
- ${e=>e.isChecked&&e.isDisabled&&C};
76
- `,B=s(g)`
73
+ ${e=>e.isChecked&&e.isDisabled&&$};
74
+ `,S=i(x)`
77
75
  cursor: ${({isDisabled:e})=>e?"default":"pointer"};
78
76
  user-select: none;
79
- color: ${({theme:e,isDisabled:t})=>t?e.colors.text.disabled:e.colors.text.dark};
77
+ color: ${({theme:e,isDisabled:o})=>o?e.colors.text.disabled:e.colors.text.dark};
80
78
  margin-left: 0.5rem;
81
- `,l=({name:e=p("check-box"),isDisabled:t=!1,size:d="regular",checked:a=!1,color:c="secondary",onClick:m,label:n,...h})=>o.createElement(j,null,o.createElement(x,{noTabIndex:!0,onClick:m,isActive:a,isDisabled:t,color:c},o.createElement(w,{...h,checked:a,"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:"label",htmlFor:e,isDisabled:t},n));export{l as CheckBox,l as default};
79
+ `,h=({name:e=m("check-box"),isDisabled:o=!1,size:c="regular",checked:n=!1,color:a="secondary",label:l,...p})=>t.createElement(v,null,t.createElement(z,{...p,type:"checkbox",checked:n,"data-validate":"checked",name:e,id:e,color:a,disabled:o,isDisabled:o,boxSize:c}),t.createElement(C,{size:c,color:a,isChecked:n,isDisabled:o},t.createElement(g,null)),l&&t.createElement(S,{as:"label",htmlFor:e,isDisabled:o},l));export{h as CheckBox,h as default};
package/esm/components/RadioButton/index.js CHANGED
@@ -72,7 +72,9 @@ import r from"react";import o,{css as i}from"styled-components";import{generateN
72
72
 
73
73
  ${e=>e.isChecked&&e.isDisabled&&$};
74
74
  `,E=o.input`
75
- display: none;
75
+ position: fixed;
76
+ opacity: 0;
77
+ pointer-events: none;
76
78
  `,j=o.span`
77
79
  display: flex;
78
80
  box-sizing: border-box;
@@ -89,9 +91,9 @@ import r from"react";import o,{css as i}from"styled-components";import{generateN
89
91
  position: absolute;
90
92
  top: 0;
91
93
  left: 0;
92
- `,S=o(h)`
94
+ `,v=o(h)`
93
95
  cursor: ${({isDisabled:e})=>e?"default":"pointer"};
94
96
  user-select: none;
95
97
  color: ${({theme:e,isDisabled:l})=>l?e.colors.text.disabled:e.colors.text.dark};
96
98
  margin-left: 0.5rem;
97
- `,m=({name:e=p("radio-button"),size:l="regular",checked:s=!1,isDisabled:c=!1,color:a="secondary",onChange:n,label:d,...u})=>r.createElement(z,null,r.createElement(g,{onClick:n,isActive:s,isDisabled:c,color:a},r.createElement(E,{"data-validate":"checked",type:"radio",name:e,id:e,onChange:n,disabled:c,...u}),r.createElement(B,{size:l,color:a,isChecked:s,isDisabled:c},r.createElement(j,{className:"circle circle--outer"},r.createElement(C,{className:"circle circle--inner"})))),d&&r.createElement(S,{as:"label",htmlFor:e,isDisabled:c},d));export{m as RadioButton,m as default};
99
+ `,u=({name:e=p("radio-button"),size:l="regular",checked:s=!1,isDisabled:c=!1,color:a="secondary",onChange:n,label:d,...m})=>r.createElement(z,null,r.createElement(g,{onClick:n,isActive:s,isDisabled:c,color:a},r.createElement(E,{"data-validate":"checked",checked:s,type:"radio",name:e,id:e,onChange:n,disabled:c,"aria-label":e,...m}),r.createElement(B,{size:l,color:a,isChecked:s,isDisabled:c},r.createElement(j,{className:"circle circle--outer"},r.createElement(C,{className:"circle circle--inner"})))),d&&r.createElement(v,{as:"label",htmlFor:e,isDisabled:c},d));export{u as RadioButton,u as default};
package/esm/components/Textfield/index.js CHANGED
@@ -61,4 +61,4 @@ import o,{useState as B}from"react";import r,{css as m}from"styled-components";i
61
61
  ${({centered:e})=>e&&"width: 100%; text-align: center;"}
62
62
  `,g=r.span`
63
63
  display: block;
64
- `,y=({placeholder:e="",isDisabled:t=!1,centered:s=!1,hasError:a=!1,className:b,helperText:n,label:d="",onBlur:$=()=>null,onFocus:h=()=>null,forwardRef:k,suffix:u,name:i=w("text-input"),errors:c,...x})=>{const[p,f]=B(!1),F=Boolean(x.value),S=l=>{f(!0),h(l)},v=l=>{f(!1),$(l)};return o.createElement(C,{className:b},o.createElement(L,{isFocused:p,disabled:t,centered:s,hasError:a,hasPlaceholder:!!e},o.createElement(W,{...x,id:i,name:i,ref:k,onFocus:S,onBlur:v,disabled:t,placeholder:d&&!p?"":e}),u&&o.createElement(_,null,u)),d&&o.createElement(E,{htmlFor:i,isFocused:p,centered:s,hasError:a,hasValue:F,disabled:t},d),(n||c)&&o.createElement(q,{centered:s,hasError:a},n&&o.createElement(g,null,n),c&&c.map(l=>o.createElement(g,{key:l},l))))};export{y as TextField,y as default};
64
+ `,y=({placeholder:e="",isDisabled:t=!1,centered:a=!1,hasError:n=!1,className:b,helperText:d,label:i="",onBlur:$=()=>null,onFocus:h=()=>null,forwardRef:k,suffix:u,name:s=w("text-input"),errors:c,...x})=>{const[p,f]=B(!1),F=Boolean(x.value),S=l=>{f(!0),h(l)},v=l=>{f(!1),$(l)};return o.createElement(C,{className:b},o.createElement(L,{isFocused:p,disabled:t,centered:a,hasError:n,hasPlaceholder:!!e},o.createElement(W,{...x,id:s,name:s,"aria-label":s,ref:k,onFocus:S,onBlur:v,disabled:t,placeholder:i&&!p?"":e}),u&&o.createElement(_,null,u)),i&&o.createElement(E,{htmlFor:s,isFocused:p,centered:a,hasError:n,hasValue:F,disabled:t},i),(d||c)&&o.createElement(q,{centered:a,hasError:n},d&&o.createElement(g,null,d),c&&c.map(l=>o.createElement(g,{key:l},l))))};export{y as TextField,y as default};
package/esm/shared/helpers.js CHANGED
@@ -1 +1 @@
1
- const l=r=>{const e=Math.random().toString(36).replace(/[^a-z]+/g,"").substr(2,10);return`${r}-${e}`},c=(r,e)=>{if(!/^#?([0-9A-F]{3}){1,2}$/i.test(r))return console.error("Failed to get faded color.",r),r;const o=r.match(r.length<=4?/\w/g:/\w\w/g);if(o){const a=o.map(t=>parseInt(t.length<2?`${t}${t}`:t,16));if(a.every(Number.isInteger)){const[t,n,s]=a;return`rgba(${t}, ${n}, ${s}, ${e||1})`}}return console.error("Failed to get faded color.",r),r};export{c as fadedColor,l as generateNameHash};
1
+ const c=t=>{const e=Math.random().toString(36).replace(/[^a-z]+/g,"").substr(2,10);return`${t}-${e}`},g=(t,e)=>{if(!/^#?([0-9A-F]{3}){1,2}$/i.test(t))return t;const n=t.match(t.length<=4?/\w/g:/\w\w/g);if(n){const s=n.map(r=>parseInt(r.length<2?`${r}${r}`:r,16));if(s.every(Number.isInteger)){const[r,a,o]=s;return`rgba(${r}, ${a}, ${o}, ${e||1})`}}return t};export{g as fadedColor,c as generateNameHash};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kvdbil/components",
3
- "version": "8.3.0",
3
+ "version": "8.3.4",
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,14 +1,13 @@
1
- import { ReactNode } from 'react';
1
+ import { ComponentPropsWithoutRef, ReactNode } from 'react';
2
2
  import { CheckboxSize, Color } from '../../Types';
3
- export interface CheckBoxProps {
3
+ declare type ComponentPropsWithoutSize = Omit<ComponentPropsWithoutRef<'input'>, 'size'>;
4
+ export interface CheckBoxProps extends ComponentPropsWithoutSize {
4
5
  name?: string;
5
6
  size?: CheckboxSize;
6
- value?: string;
7
7
  color?: Color;
8
8
  checked?: boolean;
9
9
  isDisabled?: boolean;
10
- onClick?(): void;
11
10
  label?: ReactNode;
12
11
  }
13
- export declare const CheckBox: ({ name, isDisabled, size, checked, color, onClick, label, ...rest }: CheckBoxProps) => JSX.Element;
12
+ export declare const CheckBox: ({ name, isDisabled, size, checked, color, label, ...rest }: CheckBoxProps) => JSX.Element;
14
13
  export default CheckBox;