@bikdotai/bik-component-library 0.0.541-beta.lb-4 → 0.0.541-beta.lb-5

package/dist/cjs/components/checkBox/CheckBox.d.ts

@@ -13,5 +13,6 @@ export type CheckBoxProps = {
     checkboxBorderColor?: string;
     boldOnChecked?: boolean;
     style?: React.CSSProperties;
+    enableHover?: boolean;
 };
 export declare const CheckBox: React.FC<CheckBoxProps>;

package/dist/cjs/components/checkBox/CheckBox.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("react"),i=require("./CheckBox.styled.js"),l=require("../TypographyStyle.js"),t=require("../../constants/Theme.js");const a=s=>e.jsxs("svg",Object.assign({width:s.isSmall?"16":"18",height:s.isSmall?"16":"18",viewBox:s.isSmall?"0 0 16 16":"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e.jsx("rect",{x:"0",y:"0",width:s.isSmall?"16":"18",height:s.isSmall?"16":"18",rx:"4",fill:s.isDisabled?t.COLORS.content.inactive:t.COLORS.background.positive.vibrant}),!s.isPartial&&e.jsx("svg",Object.assign({width:s.isSmall?"8":"10",height:s.isSmall?"7":"9",x:"4",y:"4",viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z",fill:"white"})})),s.isPartial&&e.jsx("rect",{x:"5",y:s.isSmall?"7":"8",width:s.isSmall?"6":"8",height:"2",rx:"1",fill:t.COLORS.surface.standard})]}));exports.CheckBox=r=>{var o;const[d,c]=s.useState(r.isChecked||!1),[n,h]=s.useState(r.isPartiallyChecked||!1),[x,b]=s.useState(r.isDisabled||!1),[S,C]=s.useState(!1),[u,O]=s.useState(!1);s.useEffect((()=>{c(r.isChecked)}),[r.isChecked]),s.useEffect((()=>{b(r.isDisabled||!1)}),[r.isDisabled]),s.useEffect((()=>{h(r.isPartiallyChecked||!1)}),[r.isPartiallyChecked]);return e.jsxs(i.CheckboxContainer,Object.assign({onClick:e=>{var s;if(!r.isDisabled){const i=!d;n?h(!n):c(i),null===(s=r.onValueChange)||void 0===s||s.call(r,i,r.value,e)}},onMouseEnter:()=>C(!r.skipHoverState),onMouseLeave:()=>C(!1),onMouseDown:()=>O(!r.skipHoverState),onMouseUp:()=>O(!1),isDisabled:x,style:null!==(o=r.style)&&void 0!==o?o:{}},{children:[e.jsx(i.CheckboxIcon,Object.assign({checked:d,hovered:S,clicked:u,isDisabled:x,size:r.size,borderColor:r.checkboxBorderColor},{children:d&&e.jsx(a,{isPartial:n||!1,isDisabled:x,isSmall:"SMALL"===r.size})})),r.label?r.boldOnChecked&&d?e.jsx(l.TitleSmall,Object.assign({color:r.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary},{children:r.label})):"SMALL"===r.size||"SMALL"===r.labelSize?e.jsx(l.BodySecondary,Object.assign({color:r.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary},{children:r.label})):e.jsx(l.BodyPrimary,Object.assign({color:r.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary},{children:r.label})):e.jsx(e.Fragment,{}),r.rightComponent]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("react"),i=require("./CheckBox.styled.js"),l=require("../TypographyStyle.js"),t=require("../../constants/Theme.js");const a=s=>e.jsxs("svg",Object.assign({width:s.isSmall?"16":"18",height:s.isSmall?"16":"18",viewBox:s.isSmall?"0 0 16 16":"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e.jsx("rect",{x:"0",y:"0",width:s.isSmall?"16":"18",height:s.isSmall?"16":"18",rx:"4",fill:s.isDisabled?t.COLORS.content.inactive:t.COLORS.background.positive.vibrant}),!s.isPartial&&e.jsx("svg",Object.assign({width:s.isSmall?"8":"10",height:s.isSmall?"7":"9",x:"4",y:"4",viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z",fill:"white"})})),s.isPartial&&e.jsx("rect",{x:"5",y:s.isSmall?"7":"8",width:s.isSmall?"6":"8",height:"2",rx:"1",fill:t.COLORS.surface.standard})]}));exports.CheckBox=r=>{var o;const[d,n]=s.useState(r.isChecked||!1),[c,h]=s.useState(r.isPartiallyChecked||!1),[b,x]=s.useState(r.isDisabled||!1),[S,C]=s.useState(!1),[u,O]=s.useState(!1);s.useEffect((()=>{n(r.isChecked)}),[r.isChecked]),s.useEffect((()=>{x(r.isDisabled||!1)}),[r.isDisabled]),s.useEffect((()=>{h(r.isPartiallyChecked||!1)}),[r.isPartiallyChecked]);return e.jsxs(i.CheckboxContainer,Object.assign({onClick:e=>{var s;if(!r.isDisabled){const i=!d;c?h(!c):n(i),null===(s=r.onValueChange)||void 0===s||s.call(r,i,r.value,e)}},onMouseEnter:()=>C(!r.skipHoverState),onMouseLeave:()=>C(!1),onMouseDown:()=>O(!r.skipHoverState),onMouseUp:()=>O(!1),isDisabled:b,enableHover:r.enableHover,style:null!==(o=r.style)&&void 0!==o?o:{}},{children:[e.jsx(i.CheckboxIcon,Object.assign({checked:d,hovered:S,clicked:u,isDisabled:b,size:r.size,borderColor:r.checkboxBorderColor},{children:d&&e.jsx(a,{isPartial:c||!1,isDisabled:b,isSmall:"SMALL"===r.size})})),r.label?r.boldOnChecked&&d?e.jsx(l.TitleSmall,Object.assign({color:r.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary},{children:r.label})):"SMALL"===r.size||"SMALL"===r.labelSize?e.jsx(l.BodySecondary,Object.assign({color:r.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary},{children:r.label})):e.jsx(l.BodyPrimary,Object.assign({color:r.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary},{children:r.label})):e.jsx(e.Fragment,{}),r.rightComponent]}))};

package/dist/cjs/components/checkBox/CheckBox.styled.d.ts

@@ -1,5 +1,6 @@
 export declare const CheckboxContainer: import("styled-components").StyledComponent<"div", any, {
     isDisabled?: boolean | undefined;
+    enableHover?: boolean | undefined;
 }, never>;
 export declare const CheckboxIcon: import("styled-components").StyledComponent<"div", any, {
     checked: boolean;

package/dist/cjs/components/checkBox/CheckBox.styled.js

@@ -1,9 +1,14 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),i=require("../../constants/Theme.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=s(e);const o=t.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),s=require("../../constants/Theme.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=i(e);const t=o.default.div`
 	display: inline-flex;
 	gap: 8px;
 	align-items: center;
 	cursor: ${e=>e.isDisabled?"default":"pointer"};
-`,r=t.default.div`
+	${i=>i.enableHover&&e.css`
+			:hover {
+				background: ${s.COLORS.surface.subdued};
+			}
+		`}
+`,r=o.default.div`
 	width: ${e=>"SMALL"===e.size?12:14}px;
 	height: ${e=>"SMALL"===e.size?12:14}px;
 	border-radius: 4px;
@@ -12,24 +17,24 @@
 	justify-content: center;
 	align-items: center;
 	box-sizing: content-box;
-	${s=>{var t;return s.isDisabled?e.css`
-					border: ${"SMALL"===s.size?1.5:2}px solid
-						${i.COLORS.content.inactive};
+	${i=>{var o;return i.isDisabled?e.css`
+					border: ${"SMALL"===i.size?1.5:2}px solid
+						${s.COLORS.content.inactive};
 			  `:e.css`
-					border: ${"SMALL"===s.size?1.5:2}px solid
-						${null!==(t=s.borderColor)&&void 0!==t?t:"black"};
+					border: ${"SMALL"===i.size?1.5:2}px solid
+						${null!==(o=i.borderColor)&&void 0!==o?o:"black"};
 			  `}}
-	${i=>i.checked&&e.css`
+	${s=>s.checked&&e.css`
 			border: 0px;
 			width: 18px;
 			height: 18px;
 		`}
-	${s=>s.hovered&&e.css`
-			outline: 3px solid ${i.COLORS.surface.hovered};
+	${i=>i.hovered&&e.css`
+			outline: 3px solid ${s.COLORS.surface.hovered};
 		`}
-	${s=>s.clicked&&!s.isDisabled&&e.css`
+	${i=>i.clicked&&!i.isDisabled&&e.css`
 			outline: 3px solid
-				${s.checked?i.COLORS.stroke.positive.lightAlt:i.COLORS.surface.hovered};
+				${i.checked?s.COLORS.stroke.positive.lightAlt:s.COLORS.surface.hovered};
 			outline-offset: 2px;
 		`}
-`;exports.CheckboxContainer=o,exports.CheckboxIcon=r;
+`;exports.CheckboxContainer=t,exports.CheckboxIcon=r;

package/dist/esm/components/checkBox/CheckBox.d.ts

@@ -13,5 +13,6 @@ export type CheckBoxProps = {
     checkboxBorderColor?: string;
     boldOnChecked?: boolean;
     style?: React.CSSProperties;
+    enableHover?: boolean;
 };
 export declare const CheckBox: React.FC<CheckBoxProps>;

package/dist/esm/components/checkBox/CheckBox.js

@@ -1 +1 @@
-import{jsxs as e,jsx as i,Fragment as l}from"react/jsx-runtime";import{useState as s,useEffect as t}from"react";import{CheckboxContainer as a,CheckboxIcon as r}from"./CheckBox.styled.js";import{TitleSmall as o,BodySecondary as d,BodyPrimary as n}from"../TypographyStyle.js";import{COLORS as c}from"../../constants/Theme.js";const h=l=>e("svg",Object.assign({width:l.isSmall?"16":"18",height:l.isSmall?"16":"18",viewBox:l.isSmall?"0 0 16 16":"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[i("rect",{x:"0",y:"0",width:l.isSmall?"16":"18",height:l.isSmall?"16":"18",rx:"4",fill:l.isDisabled?c.content.inactive:c.background.positive.vibrant}),!l.isPartial&&i("svg",Object.assign({width:l.isSmall?"8":"10",height:l.isSmall?"7":"9",x:"4",y:"4",viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:i("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z",fill:"white"})})),l.isPartial&&i("rect",{x:"5",y:l.isSmall?"7":"8",width:l.isSmall?"6":"8",height:"2",rx:"1",fill:c.surface.standard})]})),b=b=>{var m;const[g,p]=s(b.isChecked||!1),[v,x]=s(b.isPartiallyChecked||!1),[C,S]=s(b.isDisabled||!1),[w,k]=s(!1),[y,u]=s(!1);t((()=>{p(b.isChecked)}),[b.isChecked]),t((()=>{S(b.isDisabled||!1)}),[b.isDisabled]),t((()=>{x(b.isPartiallyChecked||!1)}),[b.isPartiallyChecked]);return e(a,Object.assign({onClick:e=>{var i;if(!b.isDisabled){const l=!g;v?x(!v):p(l),null===(i=b.onValueChange)||void 0===i||i.call(b,l,b.value,e)}},onMouseEnter:()=>k(!b.skipHoverState),onMouseLeave:()=>k(!1),onMouseDown:()=>u(!b.skipHoverState),onMouseUp:()=>u(!1),isDisabled:C,style:null!==(m=b.style)&&void 0!==m?m:{}},{children:[i(r,Object.assign({checked:g,hovered:w,clicked:y,isDisabled:C,size:b.size,borderColor:b.checkboxBorderColor},{children:g&&i(h,{isPartial:v||!1,isDisabled:C,isSmall:"SMALL"===b.size})})),b.label?b.boldOnChecked&&g?i(o,Object.assign({color:b.isDisabled?c.text.disabled:c.text.primary},{children:b.label})):"SMALL"===b.size||"SMALL"===b.labelSize?i(d,Object.assign({color:b.isDisabled?c.text.disabled:c.text.primary},{children:b.label})):i(n,Object.assign({color:b.isDisabled?c.text.disabled:c.text.primary},{children:b.label})):i(l,{}),b.rightComponent]}))};export{b as CheckBox};
+import{jsxs as e,jsx as i,Fragment as l}from"react/jsx-runtime";import{useState as s,useEffect as a}from"react";import{CheckboxContainer as t,CheckboxIcon as r}from"./CheckBox.styled.js";import{TitleSmall as o,BodySecondary as d,BodyPrimary as n}from"../TypographyStyle.js";import{COLORS as c}from"../../constants/Theme.js";const h=l=>e("svg",Object.assign({width:l.isSmall?"16":"18",height:l.isSmall?"16":"18",viewBox:l.isSmall?"0 0 16 16":"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[i("rect",{x:"0",y:"0",width:l.isSmall?"16":"18",height:l.isSmall?"16":"18",rx:"4",fill:l.isDisabled?c.content.inactive:c.background.positive.vibrant}),!l.isPartial&&i("svg",Object.assign({width:l.isSmall?"8":"10",height:l.isSmall?"7":"9",x:"4",y:"4",viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:i("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z",fill:"white"})})),l.isPartial&&i("rect",{x:"5",y:l.isSmall?"7":"8",width:l.isSmall?"6":"8",height:"2",rx:"1",fill:c.surface.standard})]})),b=b=>{var m;const[v,g]=s(b.isChecked||!1),[p,x]=s(b.isPartiallyChecked||!1),[C,S]=s(b.isDisabled||!1),[w,k]=s(!1),[y,u]=s(!1);a((()=>{g(b.isChecked)}),[b.isChecked]),a((()=>{S(b.isDisabled||!1)}),[b.isDisabled]),a((()=>{x(b.isPartiallyChecked||!1)}),[b.isPartiallyChecked]);return e(t,Object.assign({onClick:e=>{var i;if(!b.isDisabled){const l=!v;p?x(!p):g(l),null===(i=b.onValueChange)||void 0===i||i.call(b,l,b.value,e)}},onMouseEnter:()=>k(!b.skipHoverState),onMouseLeave:()=>k(!1),onMouseDown:()=>u(!b.skipHoverState),onMouseUp:()=>u(!1),isDisabled:C,enableHover:b.enableHover,style:null!==(m=b.style)&&void 0!==m?m:{}},{children:[i(r,Object.assign({checked:v,hovered:w,clicked:y,isDisabled:C,size:b.size,borderColor:b.checkboxBorderColor},{children:v&&i(h,{isPartial:p||!1,isDisabled:C,isSmall:"SMALL"===b.size})})),b.label?b.boldOnChecked&&v?i(o,Object.assign({color:b.isDisabled?c.text.disabled:c.text.primary},{children:b.label})):"SMALL"===b.size||"SMALL"===b.labelSize?i(d,Object.assign({color:b.isDisabled?c.text.disabled:c.text.primary},{children:b.label})):i(n,Object.assign({color:b.isDisabled?c.text.disabled:c.text.primary},{children:b.label})):i(l,{}),b.rightComponent]}))};export{b as CheckBox};

package/dist/esm/components/checkBox/CheckBox.styled.d.ts

@@ -1,5 +1,6 @@
 export declare const CheckboxContainer: import("styled-components").StyledComponent<"div", any, {
     isDisabled?: boolean | undefined;
+    enableHover?: boolean | undefined;
 }, never>;
 export declare const CheckboxIcon: import("styled-components").StyledComponent<"div", any, {
     checked: boolean;

package/dist/esm/components/checkBox/CheckBox.styled.js

@@ -1,9 +1,14 @@
-import e,{css as i}from"styled-components";import{COLORS as o}from"../../constants/Theme.js";const t=e.div`
+import e,{css as i}from"styled-components";import{COLORS as o}from"../../constants/Theme.js";const r=e.div`
 	display: inline-flex;
 	gap: 8px;
 	align-items: center;
 	cursor: ${e=>e.isDisabled?"default":"pointer"};
-`,r=e.div`
+	${e=>e.enableHover&&i`
+			:hover {
+				background: ${o.surface.subdued};
+			}
+		`}
+`,s=e.div`
 	width: ${e=>"SMALL"===e.size?12:14}px;
 	height: ${e=>"SMALL"===e.size?12:14}px;
 	border-radius: 4px;
@@ -12,12 +17,12 @@ import e,{css as i}from"styled-components";import{COLORS as o}from"../../constan
 	justify-content: center;
 	align-items: center;
 	box-sizing: content-box;
-	${e=>{var t;return e.isDisabled?i`
+	${e=>{var r;return e.isDisabled?i`
 					border: ${"SMALL"===e.size?1.5:2}px solid
 						${o.content.inactive};
 			  `:i`
 					border: ${"SMALL"===e.size?1.5:2}px solid
-						${null!==(t=e.borderColor)&&void 0!==t?t:"black"};
+						${null!==(r=e.borderColor)&&void 0!==r?r:"black"};
 			  `}}
 	${e=>e.checked&&i`
 			border: 0px;
@@ -32,4 +37,4 @@ import e,{css as i}from"styled-components";import{COLORS as o}from"../../constan
 				${e.checked?o.stroke.positive.lightAlt:o.surface.hovered};
 			outline-offset: 2px;
 		`}
-`;export{t as CheckboxContainer,r as CheckboxIcon};
+`;export{r as CheckboxContainer,s as CheckboxIcon};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.541-beta.lb-4",
+	"version": "0.0.541-beta.lb-5",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",