@kvdbil/components 8.2.1 → 8.3.0

package/cjs/components/CheckBox/index.js

@@ -78,4 +78,4 @@
   user-select: none;
   color: ${({theme:x,isDisabled:k})=>k?x.colors.text.disabled:x.colors.text.dark};
   margin-left: 0.5rem;
-`,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;
+`,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;

package/cjs/components/IconButton.js

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components");function o(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}var i=o(e),r=o(t);const c=t.css`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components");function o(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}var i=o(e),r=o(t);const n=t.css`
   background-color: transparent;
-`,n=t.css`
+`,c=t.css`
   background-color: ${({theme:s,color:b})=>s.colors[b].main};
   opacity: 0.1;
-  ${s=>s.isDisabled&&c};
+  ${s=>s.isDisabled&&n};
 `,a=r.default.div`
   cursor: ${s=>s.isDisabled?"default":"pointer"};
   outline: none;
@@ -20,7 +20,7 @@
   :hover {
     .button-background {
       transition: background-color ${"400ms"};
-      ${n}
+      ${c}
     }
   }
 
@@ -28,14 +28,14 @@
     .button-background {
       transition: background-color ${"400ms"};
       animation: FocusRipple ${"1500ms"} 0ms infinite alternate-reverse;
-      ${n}
+      ${c}
     }
   }
 
   :active {
     .button-background {
       animation: ActiveRipple ${"750ms"};
-      ${n}
+      ${c}
     }
   }
 
@@ -72,4 +72,4 @@
 
   position: absolute;
   border-radius: 10rem;
-`;exports.BackgroundStyles=n,exports.default=({children:s,isActive:b,isDisabled:p,onClick:d,color:f})=>i.default.createElement(a,{color:f,isActive:b,isDisabled:p,onClick:u=>{u.stopPropagation(),u.preventDefault(),u.persist(),p||typeof d!="function"||d(u)},onKeyDown:u=>{u.key!=="Enter"||p||typeof d!="function"||(u.persist(),d(u))},tabIndex:p?void 0:0},i.default.createElement(l,{className:"button-background"}),s);
+`;exports.BackgroundStyles=c,exports.default=({children:s,isActive:b,isDisabled:p,onClick:d,noTabIndex:f=!1,color:m})=>i.default.createElement(a,{color:m,isActive:b,isDisabled:p,onClick:u=>{u.stopPropagation(),u.preventDefault(),u.persist(),p||typeof d!="function"||d(u)},onKeyDown:u=>{u.key!=="Enter"||p||typeof d!="function"||(u.persist(),d(u))},tabIndex:p||f?void 0:0},i.default.createElement(l,{className:"button-background"}),s);

package/esm/components/CheckBox/index.js

@@ -1,4 +1,4 @@
-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`
+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`
   width: 24px;
   height: 24px;
 
@@ -6,7 +6,7 @@ import o from"react";import c,{css as r}from"styled-components";import{generateN
     width: 15px;
     height: 15px;
   }
-`,y=r`
+`,f=r`
   width: 32px;
   height: 32px;
 
@@ -14,7 +14,7 @@ import o from"react";import c,{css as r}from"styled-components";import{generateN
     width: 22px;
     height: 22px;
   }
-`,f={regular:k,large:y},$=r`
+`,k={regular:y,large:f},$=r`
   cursor: default;
   border: 2px solid ${i.colors.gray.light2};
 `,v=e=>r`
@@ -29,11 +29,11 @@ import o from"react";import c,{css as r}from"styled-components";import{generateN
   border: 2px solid ${i.colors[e].main};
 `,C=r`
   background: ${i.colors.gray.light2};
-`,j=c.div`
+`,j=s.div`
   display: flex;
   align-items: center;
   box-sizing: border-box;
-`,w=c.input.attrs({type:"checkbox"})`
+`,w=s.input.attrs({type:"checkbox"})`
   position: absolute;
   appearance: none;
   width: 100%;
@@ -52,7 +52,7 @@ import o from"react";import c,{css as r}from"styled-components";import{generateN
     transition: background-color 400ms;
     ${u}
   }
-`,z=c.span`
+`,z=s.span`
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
@@ -62,7 +62,7 @@ import o from"react";import c,{css as r}from"styled-components";import{generateN
 
   border: 2px solid ${i.colors.gray.dark5};
 
-  ${e=>f[e.size]};
+  ${e=>k[e.size]};
 
   svg {
     opacity: 0;
@@ -73,9 +73,9 @@ import o from"react";import c,{css as r}from"styled-components";import{generateN
   ${e=>e.isDisabled&&$};
 
   ${e=>e.isChecked&&e.isDisabled&&C};
-`,B=c(g)`
+`,B=s(g)`
   cursor: ${({isDisabled:e})=>e?"default":"pointer"};
   user-select: none;
   color: ${({theme:e,isDisabled:t})=>t?e.colors.text.disabled:e.colors.text.dark};
   margin-left: 0.5rem;
-`,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};
+`,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};

package/esm/components/IconButton.js

@@ -1,10 +1,10 @@
-import i from"react";import a,{css as s}from"styled-components";const m=s`
+import a from"react";import i,{css as s}from"styled-components";const f=s`
   background-color: transparent;
-`,l="400ms",f="1500ms",b="750ms",c=s`
+`,l="400ms",b="1500ms",k="750ms",c=s`
   background-color: ${({theme:o,color:r})=>o.colors[r].main};
   opacity: 0.1;
-  ${o=>o.isDisabled&&m};
-`,k=a.div`
+  ${o=>o.isDisabled&&f};
+`,g=i.div`
   cursor: ${o=>o.isDisabled?"default":"pointer"};
   outline: none;
 
@@ -27,14 +27,14 @@ import i from"react";import a,{css as s}from"styled-components";const m=s`
   :focus {
     .button-background {
       transition: background-color ${l};
-      animation: FocusRipple ${f} 0ms infinite alternate-reverse;
+      animation: FocusRipple ${b} 0ms infinite alternate-reverse;
       ${c}
     }
   }
 
   :active {
     .button-background {
-      animation: ActiveRipple ${b};
+      animation: ActiveRipple ${k};
       ${c}
     }
   }
@@ -62,7 +62,7 @@ import i from"react";import a,{css as s}from"styled-components";const m=s`
       clip-path: circle(50%);
     }
   }
-`,g=a.div`
+`,h=i.div`
   top: 0;
   left: 0;
 
@@ -72,4 +72,4 @@ import i from"react";import a,{css as s}from"styled-components";const m=s`
 
   position: absolute;
   border-radius: 10rem;
-`,h=({children:o,isActive:r,isDisabled:e,onClick:n,color:p})=>{const u=t=>{t.key==="Enter"&&!e&&typeof n=="function"&&(t.persist(),n(t))},d=t=>{t.stopPropagation(),t.preventDefault(),t.persist(),!e&&typeof n=="function"&&n(t)};return i.createElement(k,{color:p,isActive:r,isDisabled:e,onClick:d,onKeyDown:u,tabIndex:e?void 0:0},i.createElement(g,{className:"button-background"}),o)};export{c as BackgroundStyles,h as default};
+`,y=({children:o,isActive:r,isDisabled:e,onClick:n,noTabIndex:p=!1,color:u})=>{const d=t=>{t.key==="Enter"&&!e&&typeof n=="function"&&(t.persist(),n(t))},m=t=>{t.stopPropagation(),t.preventDefault(),t.persist(),!e&&typeof n=="function"&&n(t)};return a.createElement(g,{color:u,isActive:r,isDisabled:e,onClick:m,onKeyDown:d,tabIndex:e||p?void 0:0},a.createElement(h,{className:"button-background"}),o)};export{c as BackgroundStyles,y as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "8.2.1",
+  "version": "8.3.0",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/types/components/CheckBox/index.d.ts

@@ -5,7 +5,7 @@ export interface CheckBoxProps {
     size?: CheckboxSize;
     value?: string;
     color?: Color;
-    checked: boolean;
+    checked?: boolean;
     isDisabled?: boolean;
     onClick?(): void;
     label?: ReactNode;

package/types/components/IconButton.d.ts

@@ -9,7 +9,8 @@ interface Props {
     children: ReactNode;
     isActive: boolean;
     isDisabled: boolean;
+    noTabIndex?: boolean;
     onClick?(event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>): void;
 }
-declare const IconButton: ({ children, isActive, isDisabled, onClick, color, }: Props) => JSX.Element;
+declare const IconButton: ({ children, isActive, isDisabled, onClick, noTabIndex, color, }: Props) => JSX.Element;
 export default IconButton;