@bikdotai/bik-component-library 0.0.9 → 0.0.10

package/dist/esm/components/TypographyStyle.js

@@ -1,88 +1,88 @@
-import t from"styled-components";import{COLORS as e,FONTS as i}from"../constants/Theme.js";const o=t=>t+"px";t.div`
+import t from"styled-components";import{COLORS as e,FONTS as i}from"../constants/Theme.js";const o=t=>t+"px",n=t.div`
 	font-family: Inter;
 	color: ${t=>t.color||e.text.primary};
 	font-weight: ${t=>i.titleLarge.fontWeight};
 	font-size: ${t=>o(i.titleLarge.fontSize)};
 	line-height: ${t=>o(i.titleLarge.lineHeight)};
-`,t.div`
+`,r=t.div`
 	font-family: Inter;
 	color: ${t=>t.color||e.text.primary};
 	font-weight: ${t=>i.titleMedium.fontWeight};
 	font-size: ${t=>o(i.titleMedium.fontSize)};
 	line-height: ${t=>o(i.titleMedium.lineHeight)};
-`,t.div`
+`,l=t.div`
 	font-family: Inter;
 	color: ${t=>t.color||e.text.primary};
 	font-weight: ${t=>i.titleRegular.fontWeight};
 	font-size: ${t=>o(i.titleRegular.fontSize)};
 	line-height: ${t=>o(i.titleRegular.lineHeight)};
-`;const n=t.div`
+`,f=t.div`
 	font-family: Inter;
 	color: ${t=>t.color||e.text.primary};
 	font-weight: ${t=>i.titleSmall.fontWeight};
 	font-size: ${t=>o(i.titleSmall.fontSize)};
 	line-height: ${t=>o(i.titleSmall.lineHeight)};
-`;t.div`
+`,g=t.div`
 	font-family: Inter;
 	color: ${t=>t.color||e.text.primary};
 	font-weight: ${t=>i.display.fontWeight};
 	font-size: ${t=>o(i.display.fontSize)};
 	line-height: ${t=>o(i.display.lineHeight)};
-`,t.div`
+`,a=t.div`
 	font-family: Inter;
 	color: ${t=>t.color||e.text.primary};
 	font-weight: ${t=>i.bodyPrimary.fontWeight};
 	font-size: ${t=>o(i.bodyLarge.fontSize)};
 	line-height: ${t=>o(i.bodyLarge.lineHeight)};
-`;const r=t.div`
+`,h=t.div`
 	font-family: Inter;
 	color: ${t=>t.color||e.text.primary};
 	font-weight: ${t=>i.bodyPrimary.fontWeight};
 	font-size: ${t=>o(i.bodyPrimary.fontSize)};
 	line-height: ${t=>o(i.bodyPrimary.lineHeight)};
-`,l=t.div`
+`,$=t.div`
 	font-family: Inter;
 	color: ${t=>e.content.primary};
 	font-weight: ${t=>i.bodySecondary.fontWeight};
 	font-size: ${t=>o(i.bodySecondary.fontSize)};
 	line-height: ${t=>o(i.bodySecondary.lineHeight)};
-`;t(r)`
+`,c=t(h)`
 	text-decoration: underline;
 	color: ${t=>e.content.brand};
 	text-decoration-color: ${t=>e.content.brand};
 	cursor: pointer;
-`,t(l)`
+`,y=t($)`
 	text-decoration: underline;
 	color: ${t=>e.content.brand};
 	text-decoration-color: ${t=>e.content.brand};
 	cursor: pointer;
-`;const f=t.div`
+`,d=t.div`
 	font-family: Inter;
 	color: ${t=>t.color||e.text.primary};
 	font-weight: ${t=>i.caption.fontWeight};
 	font-size: ${t=>o(i.caption.fontSize)};
 	line-height: ${t=>o(i.caption.lineHeight)};
-`;t.div`
+`,m=t.div`
 	color: ${t=>t.color||e.text.primary};
 	font-weight: ${t=>i.tiny.fontWeight};
 	font-size: ${t=>o(i.tiny.fontSize)};
 	line-height: ${t=>o(i.tiny.lineHeight)};
-`;const g=t.div`
+`,s=t.div`
 	font-family: Inter;
 	color: ${t=>t.color||e.text.primary};
 	font-weight: ${t=>i.buttonLarge.fontWeight};
 	font-size: ${t=>o(i.buttonLarge.fontSize)};
 	line-height: ${t=>o(i.buttonLarge.lineHeight)};
-`,a=t.div`
+`,p=t.div`
 	font-family: Inter;
 	color: ${t=>t.color||e.text.primary};
 	font-weight: ${t=>i.buttonRegular.fontWeight};
 	font-size: ${t=>o(i.buttonRegular.fontSize)};
 	line-height: ${t=>o(i.buttonRegular.lineHeight)};
-`;t.div`
+`,z=t.div`
 	font-family: Inter;
 	color: ${t=>t.color||e.text.primary};
 	font-weight: ${t=>i.subHeading.fontWeight};
 	font-size: ${t=>o(i.subHeading.fontSize)};
 	line-height: ${t=>o(i.subHeading.lineHeight)};
-`;export{f as BodyCaption,r as BodyPrimary,l as BodySecondary,g as ButtonLarge,a as ButtonRegular,n as TitleSmall};
+`;export{d as BodyCaption,a as BodyLarge,h as BodyPrimary,c as BodyPrimaryLink,$ as BodySecondary,y as BodySecondaryLink,m as BodyTiny,s as ButtonLarge,p as ButtonRegular,g as Display,z as SubHeading,n as TitleLarge,r as TitleMedium,l as TitleRegular,f as TitleSmall};

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

@@ -5,5 +5,6 @@ export type CheckBoxProps = {
     isDisabled?: boolean;
     value?: string;
     onValueChange: (checked: boolean, value?: string) => void;
+    controlFromOutside?: boolean;
 };
 export declare const CheckBox: React.FC<CheckBoxProps>;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as s}from"react";import{CheckboxContainer as t,CheckboxIcon as l}from"./CheckBox.styled.js";import{COLORS as n}from"../../constants/Theme.js";const o=s=>i("svg",Object.assign({width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e("rect",{x:"0",y:"0",width:"18",height:"18",rx:"4",fill:s.isDisabled?n.content.inactive:n.background.positive.vibrant}),!s.isPartial&&e("svg",Object.assign({width:"10",height:"9",x:"4",y:"4",viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e("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("rect",{x:"5",y:"8",width:"8",height:"2",rx:"1",fill:n.surface.standard})]})),r=i=>{var n;const[r,a]=s(i.isChecked||!1),[c,d]=s(!1),[h,v]=s(!1);return e(t,Object.assign({onClick:()=>{var e;if(!i.isDisabled){const s=!r;a(s),null===(e=i.onValueChange)||void 0===e||e.call(i,s,i.value)}},onMouseEnter:()=>d(!0),onMouseLeave:()=>d(!1),onMouseDown:()=>v(!0),onMouseUp:()=>v(!1)},{children:e(l,Object.assign({checked:r,hovered:c,clicked:h,isDisabled:i.isDisabled||!1},{children:r&&e(o,{isPartial:null!==(n=i.isPartiallyChecked)&&void 0!==n&&n,isDisabled:i.isDisabled||!1})}))}))};export{r as CheckBox};
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as s,useEffect as t}from"react";import{CheckboxContainer as l,CheckboxIcon as o}from"./CheckBox.styled.js";import{COLORS as n}from"../../constants/Theme.js";const r=s=>i("svg",Object.assign({width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e("rect",{x:"0",y:"0",width:"18",height:"18",rx:"4",fill:s.isDisabled?n.content.inactive:n.background.positive.vibrant}),!s.isPartial&&e("svg",Object.assign({width:"10",height:"9",x:"4",y:"4",viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e("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("rect",{x:"5",y:"8",width:"8",height:"2",rx:"1",fill:n.surface.standard})]})),a=i=>{var n;const[a,d]=s(i.isChecked||!1),[c,h]=s(!1),[u,v]=s(!1);t((()=>{i.controlFromOutside&&d(i.isChecked)}),[i.isChecked,i.controlFromOutside]);return e(l,Object.assign({onClick:()=>{var e,s;if(!i.isDisabled){if(i.controlFromOutside)return void(null===(e=i.onValueChange)||void 0===e||e.call(i,!i.isChecked,i.value));const t=!a;d(t),null===(s=i.onValueChange)||void 0===s||s.call(i,t,i.value)}},onMouseEnter:()=>h(!0),onMouseLeave:()=>h(!1),onMouseDown:()=>v(!0),onMouseUp:()=>v(!1)},{children:e(o,Object.assign({checked:a,hovered:c,clicked:u,isDisabled:i.isDisabled||!1},{children:a&&e(r,{isPartial:null!==(n=i.isPartiallyChecked)&&void 0!==n&&n,isDisabled:i.isDisabled||!1})}))}))};export{a as CheckBox};

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

@@ -3,24 +3,25 @@ import e,{css as i}from"styled-components";import{COLORS as t}from"../../constan
 	align-items: center;
 	cursor: pointer;
 `,r=e.div`
-	width: 14px;
-	height: 14px;
-	border-radius: 4px;
-	border: 2px solid black;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	${e=>e.checked&&i`
-			border: 0px;
-			width: 18px;
-			height: 18px;
-		`}
-	${e=>e.hovered&&i`
-			outline: 3px solid ${t.surface.hovered};
-		`}
+  width: 14px;
+  height: 14px;
+  border-radius: 4px;
+  border: 2px solid black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: content-box;
+  ${e=>e.checked&&i`
+      border: 0px;
+      width: 18px;
+      height: 18px;
+    `}
+  ${e=>e.hovered&&i`
+      outline: 3px solid ${t.surface.hovered};
+    `}
 	${e=>e.clicked&&!e.isDisabled&&i`
-			outline: 3px solid
-				${e.checked?t.stroke.positive.lightAlt:t.surface.hovered};
-			outline-offset: 2px;
-		`}
+      outline: 3px solid
+        ${e.checked?t.stroke.positive.lightAlt:t.surface.hovered};
+      outline-offset: 2px;
+    `}
 `;export{o as CheckboxContainer,r as CheckboxIcon};

package/dist/esm/components/progress-bar/ProgressBarComponent.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import 'bootstrap/dist/css/bootstrap.min.css';
+export interface ProgressBarProps {
+    completed: number;
+    isAnimated: boolean;
+    color?: string;
+    height?: number;
+}
+export declare const ProgressBarComponent: (props: ProgressBarProps) => JSX.Element;
+export declare const ProgressCompletedBar: import("styled-components").StyledComponent<"div", any, {
+    color: string;
+}, never>;

package/dist/esm/components/progress-bar/ProgressBarComponent.js

@@ -0,0 +1,6 @@
+import{jsx as o}from"react/jsx-runtime";import{ProgressBar as t}from"react-bootstrap";import r from"styled-components";import{COLORS as e}from"../../constants/Theme.js";const c=r=>o(n,Object.assign({color:r.color?r.color:e.content.brand},{children:o(t,{animated:r.isAnimated,now:r.completed,style:{height:`${r.height?r.height:8}px`}})})),n=r.div`
+	flex: 50%;
+	.progress-bar {
+		background-color: ${o=>o.color};
+	}
+`;export{c as ProgressBarComponent,n as ProgressCompletedBar};

package/dist/esm/components/progress-bar/index.d.ts

@@ -0,0 +1 @@
+export * from './ProgressBarComponent';

package/dist/esm/components/toaster/Toaster.d.ts

@@ -1,7 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import { ToastPosition } from 'react-toastify';
 import { IconProps } from 'react-toastify/dist/components';
-import 'react-toastify/dist/ReactToastify.css';
 export type ToasterButtonProps = {
     showButton?: boolean;
     onButtonClick?: any;