@bikdotai/bik-component-library 0.0.40 → 0.0.41-2.beta.1

package/dist/esm/components/dynamic-tabs/DynamicTabs.js

@@ -0,0 +1 @@
+import{jsx as o}from"react/jsx-runtime";import{useState as e,useEffect as r}from"react";import{DEFAULT_THEME as t}from"../../constants/Theme.js";import{BodySecondary as d}from"../TypographyStyle.js";const i=i=>{const[s,l]=e(0),{tabsInfo:n,tabStyleInfo:a}=i;return r((()=>{void 0!==i.selectedTabId&&null!==i.selectedTabId&&l(i.selectedTabId)}),[i.selectedTabId]),o("div",{children:o("div",Object.assign({style:{display:"flex",alignItems:"center",borderColor:t.colorsV2.stroke.primary,backgroundColor:t.colorsV2.surface.standard}},{children:n.map(((e,r)=>{var i,c,p,b,u,y,f;const g="CAPSULE"===a.type?null!==(c=null===(i=a.style)||void 0===i?void 0:i.borderTopLeftRadius)&&void 0!==c?c:20:0===r&&"SQUARE"===a.type?(null===(p=a.style)||void 0===p?void 0:p.borderTopLeftRadius)?a.style.borderTopLeftRadius:4:0,m="CAPSULE"===a.type?null!==(u=null===(b=a.style)||void 0===b?void 0:b.borderTopLeftRadius)&&void 0!==u?u:20:r===n.length-1&&"SQUARE"===a.type?(null===(y=a.style)||void 0===y?void 0:y.borderTopLeftRadius)?a.style.borderTopLeftRadius:4:0,R=e.id===s?t.colorsV2.content.brand:t.colorsV2.stroke.primary;return o("div",Object.assign({onClick:()=>{(o=>{l(o.id),o.action(o.text)})(e)},style:{cursor:"pointer",display:"flex",flex:1,width:"110px",borderTop:`1px solid ${R}`,borderBottom:`1px solid ${R}`,borderLeft:`1px solid ${R}`,borderRight:`${r===n.length-1&&"SQUARE"===a.type||"CAPSULE"===a.type||e.id===s?1:0}px solid ${R}`,backgroundColor:e.id===s?t.colorsV2.background.brandLight:t.colorsV2.surface.standard,borderTopLeftRadius:g,borderBottomLeftRadius:g,borderTopRightRadius:m,borderBottomRightRadius:m,padding:"8px 24px",marginRight:null===(f=a.style)||void 0===f?void 0:f.marginRight,justifyContent:"space-around"}},{children:o(d,Object.assign({style:{color:e.id===s?t.colorsV2.content.brand:t.colorsV2.content.secondary}},{children:e.text}))}),e.id)}))}))})};export{i as DynamicTabs};

package/dist/esm/components/dynamic-tabs/index.d.ts

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

package/dist/esm/components/fab-menu/FABMenu.d.ts

@@ -21,4 +21,5 @@ export declare const FABMenu: React.FC<{
     isRound?: boolean;
     dropPosition?: DROP_POSITION;
     menuAligment?: MENU_ALIGNMENT;
+    version?: '1.0' | '2.0';
 }>;

package/dist/esm/components/fab-menu/FABMenu.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{OpenedDropdown as o}from"../dropdown/OpenedDropdown/components/OpennedDropdown.js";import{FloatingActionButton as n}from"../floating-action-button/FloatingActionButton.js";import"../floating-action-button/FloatingActionButton.styles.js";const i=i=>{const{onSelect:e,menuOptions:d,buttonWidth:r,buttonHeight:l,buttonColor:p,buttonPosition:u,menuWidth:c,menuHeight:s,buttonIcon:a,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:h,tooltipText:b,zIndex:P,isRound:x,dropPosition:f,menuAligment:j,tooltipWidth:w}=i;return t("div",{children:t(n,Object.assign({icon:a,width:r,height:l,color:p,position:u,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:h,tooltipText:b,zIndex:P,isRound:x,dropPosition:f,menuAligment:j,tootipWidth:w},{children:t(o,{options:d,height:s||90,width:`${c}px`,onSelect:e})}))})};export{i as FABMenu};
+import{jsx as t}from"react/jsx-runtime";import{OpenedDropdown as o}from"../dropdown/OpenedDropdown/components/OpennedDropdown.js";import{FloatingActionButton as n}from"../floating-action-button/FloatingActionButton.js";import"../floating-action-button/FloatingActionButton.styles.js";const i=i=>{const{onSelect:e,menuOptions:d,buttonWidth:r,buttonHeight:l,buttonColor:p,buttonPosition:u,menuWidth:s,menuHeight:c,buttonIcon:a,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:h,tooltipText:b,zIndex:P,isRound:x,dropPosition:f,menuAligment:j,tooltipWidth:w}=i;return t("div",{children:t(n,Object.assign({icon:a,width:r,height:l,color:p,position:u,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:h,tooltipText:b,zIndex:P,isRound:x,dropPosition:f,menuAligment:j,tootipWidth:w},{children:t(o,{options:d,height:c||90,width:`${s}px`,onSelect:e,version:i.version})}))})};export{i as FABMenu};

package/dist/esm/components/file-uploader/FileUploader.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { FileUploaderProps } from "./Models";
+export declare const FileUploader: React.FC<FileUploaderProps>;

package/dist/esm/components/file-uploader/FileUploader.js

@@ -0,0 +1 @@
+import{jsx as e,Fragment as i,jsxs as l}from"react/jsx-runtime";import{useState as o}from"react";import{Button as t}from"../button/Button.js";import{Curtain as a}from"../curtain/Curtain.js";import{CURTAIN_TYPES as s,CURTAIN_MODE as d}from"../curtain/CurtainHelper.js";import{FileUploaderStyle as r,FileUploadedStyle as n}from"./FileUploaderStyle.js";import{Input as c}from"../input/Input.js";import{ProgressBarComponent as p}from"../progress-bar/ProgressBarComponent.js";import{Tooltip as h}from"../tooltips/Tooltip.js";import{TitleMedium as m,BodySecondary as f,BodyCaption as u,ButtonLarge as v}from"../TypographyStyle.js";import{COLORS as _}from"../../constants/Theme.js";import g from"../../assets/icons/check.svg.js";import b from"../../assets/icons/file.svg.js";import y from"../../assets/icons/filePdf.svg.js";import j from"../../assets/icons/image.svg.js";import U from"../../assets/icons/triangle_error.svg.js";import O from"../../assets/icons/upload.svg.js";import w from"../../assets/icons/videoRecorder.svg.js";const N=N=>{var E,F;const[C,T]=o(""),[L,M]=o(""),[x,P]=o(null),[D,S]=o(!1),[$,z]=o(),[G,R]=o((null===(E=N.fileUploadRules.allowedFormats.split(",").map((e=>{var i,l;return null===(l=null===(i=null==e?void 0:e.split("/"))||void 0===i?void 0:i.at(-1))||void 0===l?void 0:l.toUpperCase()})))||void 0===E?void 0:E.join("/"))||"FILE"),k=e=>{const i=e.split(".").pop();if(null==N?void 0:N.fileName)return`${N.fileName}.${i}`;const l=new Date;return e.split(".")[0]+"_"+l.getTime().toString()+"."+i},V=e=>{if(!e)return"0 Bytes";const i=Math.floor(Math.log(e)/Math.log(1024));return`${parseFloat((e/Math.pow(1024,i)).toFixed(2))} ${["Bytes","KB","MB"][i]}`},A=e=>{var i;T("");const l=null===(i=null==e?void 0:e.files)||void 0===i?void 0:i[0],o=(e=>{if(!e)return"Please upload an file before saving!";const i=N.fileUploadRules.allowedSize[e.type.toLowerCase()];return i?e.size>i?`Max file size that can be added is ${V(i)}`:"":"Uploaded file type is not supported!"})(l);T(o),o?N.onError(o):(P(l),B(l),S(!0))},B=e=>{var i,l;if(!C){const o=k(e.name),t=(null===(i=o.split(".").at(-1))||void 0===i?void 0:i.toUpperCase())||"FILE";R(t),null===(l=N.uploadFile)||void 0===l||l.call(N,e,o).then((i=>{const l=((e,i,l)=>{const o=new Date;return{fileId:o.getTime().toString(),fileName:l,fileSize:V(e.size),fileType:e.type,fileUrl:i,uploadType:"FileUpload",uploadDate:o}})(e,i,o);S(!1),z(l)})).catch((e=>{const i=(null==e?void 0:e.message)||"Unknown technical error occured while uploading file!";N.onError(i)}))}},W=e=>{var i;e&&((e=>{try{return new URL(e),!0}catch(e){return!1}})(e)?null===(i=N.getFileMetaFromUrl)||void 0===i||i.call(N,e).then((i=>{var l,o;if(i&&i.type&&(null===(l=i.type.split("/").at(-1))||void 0===l?void 0:l.toLowerCase())===G.toLowerCase()){const l=N.fileUploadRules.allowedSize[i.type.toLowerCase()];if(l)if(i.size>l)M(`Max file size that can be added is ${V(l)}`);else{const l=(null===(o=i.type.split("/").at(-1))||void 0===o?void 0:o.toUpperCase())||"FILE";R(l);const t=k(`file.${l.toLowerCase()}`),a=new Date;z({fileId:a.getTime().toString(),fileName:t,fileSize:V(i.size),fileType:i.type,fileUrl:e,uploadType:"URL",uploadDate:a}),P(null)}else M("Uploaded file type is not supported!")}else M(`Please enter a valid ${G.toLowerCase()} URL`)}),(e=>{var i;return M(null!==(i=null==e?void 0:e.message)&&void 0!==i?i:"Please enter a valid image URL")})):M(`Please enter a valid ${G.toLowerCase()} URL`))},H=(i,l,o)=>"IMAGE"===I[G]?e(j,{color:i,height:l,width:o}):"VIDEO"===I[G]?e(w,{color:i,height:l,width:o}):"PDF"===I[G]?e(y,{color:i,height:l,width:o}):e(b,{color:i,height:l,width:o});return e(i,{children:$&&(null===(F=Object.keys($))||void 0===F?void 0:F.length)?l(n,Object.assign({className:"fileUploaded"},{children:[l("div",Object.assign({className:"fileUploaded__header"},{children:[e("div",Object.assign({className:"fileUploaded__header__icon"},{children:e(g,{color:_.content.primaryInverse,height:46,width:40})})),e("div",Object.assign({className:"fileUploaded__header__title"},{children:l(m,{children:[G," uploaded successfully"]})}))]})),l("div",Object.assign({className:"fileUploaded__body"},{children:[l("div",Object.assign({className:"fileUploaded__body__file-detail"},{children:[e("div",Object.assign({className:"fileUploaded__body__file-detail__icon"},{children:H(_.content.secondary,22,18)})),e("div",Object.assign({className:"fileUploaded__body__file-detail__name"},{children:e(f,Object.assign({style:{overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"}},{children:null==$?void 0:$.fileName}))})),e("div",Object.assign({className:"fileUploaded__body__file-detail__size"},{children:null==$?void 0:$.fileSize}))]})),l("div",Object.assign({className:"fileUploaded__body__buttons"},{children:[e("div",Object.assign({className:"fileUploaded__body__buttons__edit"},{children:e(t,{buttonText:"Edit",buttonType:"secondary",matchParentWidth:!0,onClick:()=>{var e;z({}),null===(e=N.fileUploadRules.allowedFormats.split(",").map((e=>{var i,l;return null===(l=null===(i=null==e?void 0:e.split("/"))||void 0===i?void 0:i.at(-1))||void 0===l?void 0:l.toUpperCase()})))||void 0===e||e.join("/")}})})),e("div",Object.assign({className:"fileUploaded__body__buttons__done"},{children:e(t,{buttonText:"Done",buttonType:"primary",matchParentWidth:!0,onClick:()=>N.onSuccess(x,$)})}))]}))]}))]})):l(r,Object.assign({showProgressBar:D},{children:[l("div",Object.assign({className:"fileUploader"},{children:[l("div",Object.assign({className:"fileUploader__header"},{children:[e("div",Object.assign({className:"fileUploader__header__icon"},{children:H(_.content.secondary,36,30)})),e(h,Object.assign({body:G,placement:"top"},{children:e("div",Object.assign({className:"fileUploader__header__title"},{children:e(m,Object.assign({style:{display:"block",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},{children:D?"Document upload in progress":`Upload ${G}`}))}))})),e("div",Object.assign({className:"fileUploader__header__caption"},{children:e(f,Object.assign({style:{color:_.content.secondary}},{children:D?`Your ${G} is getting loaded. This may take a couple of minutes.`:`${G.includes("/")?"Files":G+" format"} • Max ${V(Math.max(...Object.values(N.fileUploadRules.allowedSize)))}`}))}))]})),e("div",Object.assign({className:"fileUploader__body"},{children:l(i,D?{children:[e("div",Object.assign({className:"fileUploader__body__progress-bar"},{children:e(p,{completed:N.uploadProgress,isAnimated:!0})})),e("div",Object.assign({className:"fileUploader__body__cancel-button"},{children:e(t,{buttonType:"tertiaryGray",buttonText:"cancel",onClick:()=>{S(!1),P(null),z({})}})}))]}:{children:[e("div",Object.assign({className:"fileUploader__body__link"},{children:e(c,{type:"text",onChangeText:()=>M(""),placeholder:`Enter URL of the ${G.includes("/")?"file":G.toLowerCase()}`,width:"100%",height:"48px",labelText:`${G.includes("/")?"File":G} link`,errorMessage:L,onBlur:e=>W(e.target.value)})})),l("div",Object.assign({className:"fileUploader__body__divider"},{children:[e("div",{className:"left"}),e("div",Object.assign({className:"title"},{children:e(u,Object.assign({style:{color:_.content.secondary}},{children:"Or upload from device"}))})),e("div",{className:"right"})]})),l("div",Object.assign({className:"fileUploader__body__upload"},{children:[e("label",Object.assign({htmlFor:"file-upload-button",className:"file-upload-label"},{children:l("div",Object.assign({className:"file-uploader"},{children:[e("div",{children:e(O,{height:18,width:18})}),e("div",{children:e(v,Object.assign({style:{color:_.content.brand}},{children:"Upload"}))})]}))})),e("input",{id:"file-upload-button",type:"file",accept:N.fileUploadRules.allowedFormats,style:{opacity:0,position:"absolute",zIndex:-1},onChange:e=>A(e.target)})]}))]})}))]})),C&&e("div",Object.assign({className:"fileUploadError"},{children:e(a,{type:s.NEGATIVE,mode:d.LIGHT,text:C,hideCrossIcon:!0,icon:()=>e(U,{height:16,width:19,color:_.content.negative})})}))]}))})},I={PDF:"PDF",JPG:"IMAGE",JPEG:"IMAGE",PNG:"IMAGE",GIF:"IMAGE",SVG:"IMAGE",MP4:"VIDEO",MKV:"VIDEO",AVI:"VIDEO",WMV:"VIDEO",FILE:"FILE"};export{N as FileUploader};

package/dist/esm/components/file-uploader/FileUploaderStyle.d.ts

@@ -0,0 +1,7 @@
+export declare const FileUploaderStyle: import("styled-components").StyledComponent<"div", any, {
+    showProgressBar: boolean;
+    width?: string | undefined;
+}, never>;
+export declare const FileUploadedStyle: import("styled-components").StyledComponent<"div", any, {
+    width?: string | undefined;
+}, never>;

package/dist/esm/components/file-uploader/FileUploaderStyle.js

@@ -0,0 +1,166 @@
+import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const r=e.div`
+	height: 100%;
+	width: 440px;
+	border: 1px dashed ${i.stroke.primary};
+	border-radius: 4px;
+	gap: 24px;
+	align-items: cneter;
+	background-color: ${i.surface.subdued};
+	.fileUploader {
+		display: flex;
+		flex-direction: column;
+		padding: 24px;
+		gap: 32px;
+		&__header {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			gap: 8px;
+			&__icon {
+				cursor: default;
+				display: flex;
+				width: 80px;
+				height: 80px;
+				background-color: ${i.background.base};
+				border-radius: 50%;
+				align-items: center;
+				justify-content: center;
+			}
+			&__title {
+				cursor: default;
+				display: flex;
+				width: calc(100% - 24px);
+				justify-content: center;
+				padding-top: 8px;
+			}
+			&__caption {
+				cursor: default;
+			}
+		}
+		&__body {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+			&__divider {
+				display: flex;
+				.left {
+					border-top: 1px solid ${i.stroke.primary};
+					flex-grow: 1;
+					margin-top: 8px;
+					margin-right: 8px;
+				}
+				.right {
+					border-top: 1px solid ${i.stroke.primary};
+					flex-grow: 1;
+					margin-top: 8px;
+					margin-left: 8px;
+				}
+			}
+			&__upload {
+				display: flex;
+				flex-direction: row;
+				width: 100%;
+				height: 40px;
+				border: 1px solid ${i.content.brand};
+				border-radius: 4px;
+				label {
+					width: 100%;
+					height: 100%;
+					cursor: pointer;
+					.file-uploader {
+						display: flex;
+						flex-direction: row;
+						width: 100%;
+						height: 100%;
+						align-items: center;
+						justify-content: center;
+						color: ${i.content.brand};
+						gap: 10px;
+					}
+				}
+			}
+			&__cancel-button {
+				align-self: center;
+			}
+		}
+	}
+
+	.fileUploadError {
+		height: 36px;
+		width: 100%;
+		position: relative;
+	}
+`,t=e.div`
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 440px;
+	border: 1px dashed ${i.stroke.primary};
+	border-radius: 4px;
+	gap: 24px;
+	align-items: cneter;
+	background-color: ${i.surface.subdued};
+	padding: 60px 16px;
+	.fileUploaded {
+		width: 100%;
+		&__header {
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			align-items: center;
+			justify-content: center;
+			gap: 16px;
+			&__icon {
+				display: flex;
+				width: 80px;
+				height: 80px;
+				background-color: ${i.background.positive.vibrant};
+				border-radius: 50%;
+				align-items: center;
+				justify-content: center;
+			}
+		}
+		&__body {
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			gap: 24px;
+			&__file-detail {
+				display: flex;
+				flex-direction: row;
+				height: 56px;
+				background-color: ${i.surface.standard};
+				border: 1px solid ${i.stroke.primary};
+				border-radius: 4px;
+				align-items: center;
+				padding: 16px;
+				gap: 12px;
+				&__icon {
+					display: flex;
+					width: fit-content;
+				}
+				&__name {
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+				}
+				&__size {
+					display: flex;
+					margin-left: auto;
+					width: fit-content;
+				}
+			}
+			&__buttons {
+				display: flex;
+				flex-direction: row;
+				gap: 12px;
+				&__edit,
+				&__done {
+					display: flex;
+					flex: 1;
+				}
+			}
+		}
+	}
+`;export{t as FileUploadedStyle,r as FileUploaderStyle};

package/dist/esm/components/file-uploader/Models.d.ts

@@ -0,0 +1,34 @@
+export interface FileMetaData {
+    fileId: string;
+    fileName: string;
+    fileSize: string;
+    fileType: string;
+    fileUrl: string;
+    uploadType: 'URL' | 'FileUpload';
+    uploadDate: Date;
+}
+export interface FileUploadRules {
+    allowedFormats: string;
+    allowedSize: {
+        [key: string]: number;
+    };
+}
+export interface FileUploaderInterface {
+    onFileUpload: (file: File, metaData: FileMetaData) => void;
+    fileUploadRules: FileUploadRules;
+    onError: (error: string) => void;
+}
+export interface FileMetaFromUrl {
+    type: string;
+    size: number;
+}
+export interface FileUploaderProps {
+    uploadFile?: (file: File, fileName: string) => Promise<string>;
+    getFileMetaFromUrl?: (url: string) => Promise<FileMetaFromUrl>;
+    fileUploadRules: FileUploadRules;
+    onError: (error: string) => void;
+    uploadProgress: number;
+    onCancel: () => void;
+    onSuccess: (file: File, fileMeta: FileMetaData) => void;
+    fileName?: string;
+}

package/dist/esm/components/file-uploader/index.d.ts

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

package/dist/esm/components/file-uploader/useMockUrlUpload.d.ts

@@ -0,0 +1,8 @@
+import { FileMetaFromUrl } from "./Models";
+interface URLUploadOptions {
+    getFileMetaFromUrl: (url: string) => Promise<FileMetaFromUrl>;
+    error?: string;
+    success?: boolean;
+}
+declare const useMockUrlUpload: () => URLUploadOptions;
+export default useMockUrlUpload;

package/dist/esm/components/image-compress/ImageCompress.d.ts

@@ -1,7 +1,11 @@
+export interface CompressImageOptions {
+    maxSizeMB?: number;
+}
 export interface CompressImageReturnType {
     base64: string;
     compressedFile: File;
 }
 export declare class ImageService {
-    static compressImage: (file: File) => Promise<CompressImageReturnType>;
+    static base64ToImage: (base64String: string) => File;
+    static compressImage: (file: File, options?: CompressImageOptions) => Promise<CompressImageReturnType>;
 }

package/dist/esm/components/image-compress/ImageCompress.js

@@ -1 +1 @@
-import{__awaiter as e}from"../../_virtual/_tslib.js";import r from"browser-image-compression";class i{}Object.defineProperty(i,"compressImage",{enumerable:!0,configurable:!0,writable:!0,value:i=>e(void 0,void 0,void 0,(function*(){let e=i,o="";try{const t={maxSizeMB:i.size/1024/1024*.8,maxWidthOrHeight:1920,useWebWorker:!0};i.size/1024/1024>1&&(e=yield r(i,t)),o=yield r.getDataUrlFromFile(e)}catch(e){console.error(e)}return{base64:o,compressedFile:e}}))});export{i as ImageService};
+import{__awaiter as e}from"../../_virtual/_tslib.js";import r from"browser-image-compression";class t{}Object.defineProperty(t,"base64ToImage",{enumerable:!0,configurable:!0,writable:!0,value:e=>{const r=atob(e.split(",")[1]),t=e.split(",")[0].split(":")[1].split(";")[0],i=new ArrayBuffer(r.length),o=new Uint8Array(i);for(let e=0;e<r.length;e++)o[e]=r.charCodeAt(e);const l=new Blob([i],{type:t});return new File([l],"image",{type:t})}}),Object.defineProperty(t,"compressImage",{enumerable:!0,configurable:!0,writable:!0,value:(t,i)=>e(void 0,void 0,void 0,(function*(){let e=t,o="";const l=i?i.maxSizeMB:t.size/1024/1024*.8;try{const i={maxSizeMB:l,maxWidthOrHeight:1920,useWebWorker:!0};t.size/1024/1024>.1&&(e=yield r(t,i)),o=yield r.getDataUrlFromFile(e)}catch(e){console.error(e)}return{base64:o,compressedFile:e}}))});export{t as ImageService};

package/dist/esm/components/image-cropper/BikImageCropper.d.ts

@@ -0,0 +1,9 @@
+import 'react-image-crop/dist/ReactCrop.css';
+export interface BikImageCropperProps {
+    aspectRatio?: number;
+    src: string;
+    onCropComplete: (base64String: string, didChange: boolean) => void;
+    onCancel: () => void;
+}
+export declare const BikImageCropper: (props: BikImageCropperProps) => import("react/jsx-runtime").JSX.Element;
+export default BikImageCropper;

package/dist/esm/components/image-cropper/BikImageCropper.js

@@ -0,0 +1 @@
+import{__awaiter as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{useState as i}from"react";import o from"react-image-crop";import{StyledModal as r}from"../modals/styledModal.js";const n=n=>{const[a,c]=i(!1),[l,d]=i(void 0),[h,s]=i({width:0,height:0}),g=(e,i,o,r)=>t(void 0,void 0,void 0,(function*(){const t=document.createElement("canvas");t.width=i.width,t.height=i.height;const n=t.getContext("2d");if(!n)throw new Error("Failed to get 2D context of canvas.");n.drawImage(e,i.x*o,i.y*r,i.width*o,i.height*r,0,0,i.width,i.height);try{return t.toDataURL("image/png")}catch(t){throw new Error("Failed to create blob for cropped image.")}}));return e(r,Object.assign({open:!0,onClose:n.onCancel,centralContainerStyles:{width:700,maxHeight:700},headingTitle:"Crop Image",primaryButton:{buttonText:"Save",onClick:()=>{var e;e=l,t(void 0,void 0,void 0,(function*(){var t,i;if(n.src&&(null==e?void 0:e.width)&&(null==e?void 0:e.height)){const i=new Image;i.src=n.src;const o=i.naturalWidth/h.width,r=i.naturalHeight/h.height,c=yield g(i,e,o,r);null===(t=null==n?void 0:n.onCropComplete)||void 0===t||t.call(n,c,a)}else null===(i=null==n?void 0:n.onCropComplete)||void 0===i||i.call(n,n.src,a)}))}}},{children:e("div",Object.assign({style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"}},{children:e("div",{children:e(o,Object.assign({crop:l,onChange:t=>{d(t)},circularCrop:!1,onDragStart:()=>{c(!0)},aspect:n.aspectRatio},{children:e("img",{style:{maxWidth:700,maxHeight:550,objectFit:"contain"},src:n.src,alt:"image cropper",onLoad:t=>{const e=t.target,i=e.width;s({width:i,height:e.height})}})}))})}))}))};export{n as BikImageCropper,n as default};

package/dist/esm/components/image-cropper/BikImagePipeline/BikImagePipeline.d.ts

@@ -0,0 +1,30 @@
+import { CompressImageOptions } from "../../image-compress";
+import { BikImageCropperProps } from "..";
+/**
+ * Todos
+ * 	- Add option to pass https url in the src / edit an image
+ */
+export interface BikImagePipelineProps {
+    fileTitle?: string;
+    cropOptions?: Partial<BikImageCropperProps>;
+    compressionOptions?: CompressImageOptions;
+    currentImage: {
+        src?: string;
+    };
+    options: {
+        upload: boolean;
+        crop?: boolean;
+        compress?: boolean;
+        uploadToFirestorage?: boolean;
+    };
+    onCancel: () => void;
+    onFinish: (base64String: string, file?: File, url?: string) => void;
+    fileUploadOptions?: {
+        path: string;
+        uploadProgress: number;
+        uploadFile: (file: File, path: string) => Promise<string>;
+        error?: string;
+        success?: boolean;
+    };
+}
+export declare const BikImagePipeline: ({ cropOptions, fileTitle, compressionOptions, currentImage, options, onFinish, onCancel, fileUploadOptions, }: BikImagePipelineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/image-cropper/BikImagePipeline/BikImagePipeline.js

@@ -0,0 +1 @@
+import{jsx as o,Fragment as e,jsxs as r}from"react/jsx-runtime";import{useRef as t,useState as s,useEffect as a,useCallback as i}from"react";import{ImageService as p}from"../../image-compress/ImageCompress.js";import{StateInterface as l}from"../../states/StateComponent.js";import"../../../_virtual/_tslib.js";import{StateModalComponent as n}from"../../states-modal/StateModalComponent.js";import"../../modals/styledModal.js";import{BikImageCropper as c}from"../BikImageCropper.js";const d=d=>{let{cropOptions:m,fileTitle:u,compressionOptions:g,currentImage:h,options:f,onFinish:C,onCancel:w,fileUploadOptions:y}=d;const b=t(null),[j,F]=s(),[R,v]=s(h),[I,T]=s(!1);a((()=>{f.upload?(F("upload"),setTimeout((()=>{k()}),500)):f.crop?F("crop"):f.compress?F("compress"):f.uploadToFirestorage?F("cloud-upload"):T(!0)}),[f.upload,f.crop,f.compress,f.uploadToFirestorage]);const O=i(((o,e)=>{if(!f.uploadToFirestorage)return C(o,e),void T(!0);F("cloud-upload"),y&&y.uploadFile(e,y.path).then((r=>{C(o,e,r),T(!0)})).catch((o=>{console.log("starting err process with ")}))}),[]),E=o=>{o||w();const e=p.base64ToImage(o);f.compress?(F("compress"),p.compressImage(e,g).then((o=>{if(!o)return T(!0),void w();O(o.base64,o.compressedFile)}))):O(o,e)},k=()=>{b.current.click()};return I?o(e,{}):"cloud-upload"===j?!y||y.success?o(e,{}):y.error?o("div",{children:o(n,{states:l.ERROR,heading:"Error while uploading",subline:"Please check your image and try again",isButtonEnabled:!1,width:300,onClose:()=>{T(!0),w()}})}):o("div",{children:o(n,{states:l.LOADING,heading:`Uploading your ${u||"photo"}`,subline:`Please wait while we upload your ${u||"photo"}`,isButtonEnabled:!1,width:300})}):r(e,{children:[f.upload&&o("input",{ref:b,type:"file",accept:"image/*",style:{display:"none"},onChange:o=>{const e=o.target.files[0],r=new FileReader;r.onload=()=>{var o;v({src:r.result}),o=r.result,f.crop?F("crop"):E(o)},e&&r.readAsDataURL(e)}}),"crop"===j&&o(c,{src:R.src,onCropComplete:o=>{v({src:o}),E(o)},aspectRatio:m.aspectRatio,onCancel:w})]})};export{d as BikImagePipeline};

package/dist/esm/components/image-cropper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BikImageCropper';
+export * from './BikImagePipeline/BikImagePipeline';

package/dist/esm/components/image-cropper/useMockFileUpload.d.ts

@@ -0,0 +1,8 @@
+interface FileUploadOptions {
+    uploadProgress: number;
+    uploadFile: (file: File, path: string) => Promise<string>;
+    error?: string;
+    success?: boolean;
+}
+declare const useMockFileUpload: () => FileUploadOptions;
+export default useMockFileUpload;

package/dist/esm/components/input/Input-helper.d.ts

@@ -0,0 +1,6 @@
+import { InputTypeI } from "./Input";
+export declare const isFunction: (fn: any) => boolean;
+export declare const validateInput: (inputText: string | number, type: InputTypeI, rangeValidation?: {
+    min?: number;
+    max?: number;
+}) => [boolean, string];

package/dist/esm/components/input/Input-helper.js

@@ -0,0 +1 @@
+import{phone as n}from"phone";const e=n=>n&&"function"==typeof n,r=function(e,r){let t,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};const a=["phonenumber","zip","number"].includes(r),l=a?e?Number(e):null:e;if(null==l||""===l)return[!0,""];if(a&&String(l).length&&(i.min&&l<i.min||i.max&&l>i.max))return[!1,`Enter valid number between ${i.min} and ${i.max}`];if("email"===r)return t=/(.+)@(.+){2,}\.(.+){2,}/,l.match(t)?[!0,""]:[!1,"Enter a valid email id"];if("url"===r)return t=/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/,l.match(t)?[!0,""]:[!1,"Enter a valid url"];if("number"===r)return l>=0?[!0,""]:[!1,"Enter a valid number"];if("zip"===r)return 6===String(l).trim().length?[!0,""]:[!1,"Enter a valid zip code"];if("phonenumber"===r){const{isValid:e}=n("+"+String(l));return e?[!0,""]:[!1,"Enter a valid phonenumber"]}return(null==l?void 0:l.trim().length)>0?[!0,""]:[!1,"Enter a valid data"]};export{e as isFunction,r as validateInput};

package/dist/esm/components/input/Input.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 export type InputVariant = 'default' | 'small';
 export type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'none';
-export type InputTypeI = 'number' | 'email' | 'text' | 'multiline';
+export type InputTypeI = 'number' | 'email' | 'text' | 'multiline' | 'url' | 'zip' | 'phonenumber' | 'password';
 export interface InputProps {
     noErrorHint?: boolean;
     placeholder?: string;
@@ -35,9 +35,20 @@ export interface InputProps {
     suffixText?: string;
     prefixText?: string;
     value?: string;
+    reset?: boolean;
     onBlur?: (e: any) => void;
-    onFocus?: () => void;
+    onFocus?: (e: any) => void;
     isActive?: boolean;
     id?: string;
+    onReferenceInit?: (element: HTMLInputElement | HTMLTextAreaElement) => void;
+    rangeValidation?: {
+        min: number;
+        max: number;
+    };
+    noKeyDownChange?: boolean;
+    skipFocus?: boolean;
+    version?: '1.0' | '2.0';
+    textControl?: boolean;
+    noMaxCharCheck?: boolean;
 }
-export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;

package/dist/esm/components/input/Input.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import{forwardRef as n,useState as l,useContext as r,useEffect as o}from"react";import{Button as a}from"../button/Button.js";import{BodySecondary as s}from"../TypographyStyle.js";import c from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as d}from"./context/InputStyleProvider.js";import{RootContainer as u,InputFooter as v,InputWrapper as h,IconHolder as p,PrefixHolder as f,InputContainer as g,InputContainerSmall as m,SuffixHolder as x,InputHeader as y,MaxCharStyle as b}from"./Input.styled.js";const j=e=>e&&"function"==typeof e,C=n(((n,C)=>{var w,I,O,T;const{placeholder:k,leftIcon:A,rightIcon:B,labelText:L,maxCharLimit:S,isRequired:D,hintText:E,type:F,state:z,validate:H,variant:K,button:M,suffixText:R,prefixText:q,onChangeText:N,value:P,noErrorHint:W}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},n),G=null==A?void 0:A.icon,J=null==B?void 0:B.icon,[Q,U]=l(!1),[V,X]=l(!1),[Y,Z]=l(),$="small"===K?"18px":"22px",_=r(d);o((()=>{X(!!n.isActive)}),[n.isActive]),o((()=>{Z(n.errorMessage)}),[n.errorMessage]),o((()=>{U(!1),("invalid"===n.state||Y)&&U(!0)}),[n.state,Y]),o((()=>{U(!!Y)}),[Y]);const ee=function(e){if(j(e)){for(var t=arguments.length,i=new Array(t>1?t-1:0),n=1;n<t;n++)i[n-1]=arguments[n];e(...i)}},te=e=>{N(P||"",e),![8].includes(e.which)&&S>0&&e.target.value.length===S&&e.preventDefault()},ie=e=>{const t=e.target.value;if(N(t,e),!H||!j(H))return;const[i,n]=H(t);U(!i),Z(n)},ne=()=>{var l;return e(i,{children:["multiline"!==F&&t("input",{id:n.id,style:null!==(l=null==_?void 0:_.input)&&void 0!==l?l:{},ref:C,type:F,value:P,onFocus:()=>(X(!0),void ee(n.onFocus)),onBlur:e=>(e=>{var t;X(!1),ee(null===(t=n.onBlur)||void 0===t?void 0:t.call(n,e))})(e),placeholder:k||"Enter here",onChange:ie,onKeyDown:e=>te(e)}),"multiline"===F&&t("textarea",{value:P,ref:C,onFocus:()=>X(!0),onBlur:()=>X(!1),placeholder:k||"Enter here",onChange:ie,onKeyDown:e=>te(e)})]})};return e(u,Object.assign({width:n.width,height:n.height,state:z,type:F,style:null!==(w=null==_?void 0:_.RootContainer)&&void 0!==w?w:{}},{children:[!W&&(!!E||!!Y)&&e(v,Object.assign({invalid:!!Y},{children:[!!Y&&t(c,{width:16,height:16}),Y||E]})),e(h,Object.assign({variant:K,state:z,width:n.width,isActive:"active"===z||V,isInvalid:Q,style:null!==(I=null==_?void 0:_.InputWrapper)&&void 0!==I?I:{}},{children:[!!G&&t(p,Object.assign({variant:K,iconSize:$,onClick:()=>ee(null==A?void 0:A.callback),isLeft:!0,style:null!==(O=null==_?void 0:_.IconHolder)&&void 0!==O?O:{}},{children:t(G,{})})),!!q&&t(f,Object.assign({variant:K},{children:q})),"default"===K&&t(g,{children:ne()}),"small"===K&&t(m,{children:ne()}),!!J&&t(p,Object.assign({variant:K,iconSize:$,onClick:()=>ee(null==B?void 0:B.callback),isLeft:!1},{children:t(J,{})})),!!R&&t(x,Object.assign({variant:K},{children:R})),M&&M.text&&t(a,{buttonText:M.text,onClick:()=>ee(null==M?void 0:M.onClick)})]})),(!!L||!!S)&&"default"===K&&e(y,Object.assign({invalid:Q},{children:[e(s,{children:[L,D?t("span",{children:"*"}):""]}),S>0&&e(b,{children:[null===(T=n.value)||void 0===T?void 0:T.length,"/",S]})]}))]}))}));C.displayName="Input";export{C as Input};
+import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as i,useState as r,useContext as l,useRef as o,useEffect as a}from"react";import{Button as s}from"../button/Button.js";import{isFunction as c,validateInput as u}from"./Input-helper.js";import{BodySecondary as v}from"../TypographyStyle.js";import d from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as h}from"./context/InputStyleProvider.js";import{RootContainer as p,InputFooter as g,InputWrapper as f,IconHolder as m,PrefixHolder as x,InputContainer as y,InputContainerSmall as b,SuffixHolder as j,InputHeader as C,MaxCharStyle as w}from"./Input.styled.js";const I=i(((i,I)=>{var O,k,L,T,D;const{placeholder:A,leftIcon:E,rightIcon:F,labelText:M,maxCharLimit:z,isRequired:B,hintText:S,type:K,state:R,validate:H,variant:q,button:N,suffixText:P,prefixText:V,onChangeText:W,value:G,noErrorHint:J,reset:Q,rangeValidation:U,noKeyDownChange:X,version:Y,noMaxCharCheck:Z}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},i),$=null==E?void 0:E.icon,_=null==F?void 0:F.icon,[ee,te]=r(!1),[ne,ie]=r(!1),[re,le]=r(),oe="small"===q?"18px":"22px",ae=l(h),[se,ce]=r(),ue=o(null),ve=null!=I?I:ue;a((()=>{ce(G)}),[G]),a((()=>{var e;ve.current&&(null===(e=i.onReferenceInit)||void 0===e||e.call(i,ve.current))}),[ve]),a((()=>{const e=ve.current;if(e)return e.addEventListener("wheel",ge,{passive:!1}),()=>{e.removeEventListener("wheel",ge)}}),[]),a((()=>{Q&&ce("")}),[Q]),a((()=>{var e;ie(!!i.isActive),i.isActive&&(null===(e=ve.current)||void 0===e||e.focus())}),[i.isActive]),a((()=>{le(i.errorMessage)}),[i.errorMessage]),a((()=>{var e;te(!1),("invalid"===i.state||re)&&te(!0),"active"===i.state&&(null===(e=ve.current)||void 0===e||e.focus())}),[i.state,re]),a((()=>{te(!!re)}),[re]);const de=function(e){if(c(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},he=()=>"zip"===K?6:60,pe=e=>{const t=z||he();if(X||W(G||"",e),Z)return;const n=e.target.value;![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},ge=e=>{e.preventDefault()},fe=e=>{const t=e.target.value,n=z||he();if(!Z&&n>0&&t.length>=n)return void e.preventDefault();W(t,e),i.textControl||ce(t);const r=H||u;if(!r||!c(r))return;const[l,o]=r(t,K,U);te(!l),le(i.errorMessage?i.errorMessage:o)},me=e=>{var t;i.skipFocus||ie(!0),de(null===(t=i.onFocus)||void 0===t?void 0:t.call(i,e))},xe=e=>{var t;i.skipFocus||ie(!1),de(null===(t=i.onBlur)||void 0===t?void 0:t.call(i,e))},ye=()=>{var r;return e(n,{children:["multiline"!==K&&t("input",{id:i.id,style:null!==(r=null==ae?void 0:ae.input)&&void 0!==r?r:{},ref:ve,type:["phonenumber","zip","number"].includes(K)?"number":K,value:se,onFocus:e=>me(e),onBlur:e=>xe(e),placeholder:A||"Enter here",onChange:fe,onKeyDown:e=>pe(e)}),"multiline"===K&&t("textarea",{value:se,ref:ve,onFocus:e=>me(e),onBlur:e=>xe(e),placeholder:A||"Enter here",onChange:fe,onKeyDown:e=>pe(e),maxLength:z>0?z:void 0})]})};return e(p,Object.assign({width:i.width,height:i.height,state:R,type:K,style:null!==(O=null==ae?void 0:ae.RootContainer)&&void 0!==O?O:{}},{children:[!J&&(!!S||!!re)&&e(g,Object.assign({invalid:!!re},{children:[!!re&&t(d,{width:16,height:16}),re||S]})),e(f,Object.assign({variant:q,state:R,width:i.width,isActive:"active"===R||ne,isInvalid:ee,style:null!==(k=null==ae?void 0:ae.InputWrapper)&&void 0!==k?k:{},version:Y,height:i.height},{children:[!!$&&t(m,Object.assign({variant:q,iconSize:oe,onClick:()=>de(null==E?void 0:E.callback),isLeft:!0,style:null!==(L=null==ae?void 0:ae.IconHolder)&&void 0!==L?L:{}},{children:t($,{})})),!!V&&t(x,Object.assign({variant:q},{children:V})),"default"===q&&t(y,Object.assign({height:i.height,type:i.type},{children:ye()})),"small"===q&&t(b,Object.assign({height:i.height,type:i.type},{children:ye()})),!!_&&t(m,Object.assign({variant:q,iconSize:oe,onClick:()=>de(null==F?void 0:F.callback),isLeft:!1},{children:t(_,{})})),!!P&&t(j,Object.assign({variant:q},{children:P})),N&&N.text&&t(s,{buttonText:N.text,onClick:()=>de(null==N?void 0:N.onClick)})]})),(!!M||!!z)&&e(C,Object.assign({invalid:ee},{children:[e(v,{children:[M,B?t("span",{children:"*"}):""]}),z>0&&e(w,{children:[null!==(D=null===(T=i.value)||void 0===T?void 0:T.length)&&void 0!==D?D:0,"/",z]})]}))]}))}));I.displayName="Input";export{I as Input};

package/dist/esm/components/input/Input.styled.d.ts

@@ -10,6 +10,7 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     isInvalid?: boolean | undefined;
     state?: InputStateI | undefined;
     variant?: InputVariant | undefined;
+    version?: "1.0" | "2.0" | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconHolder: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -30,6 +31,9 @@ export declare const InputContainer: import("@emotion/styled").StyledComponent<{
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
+} & {
+    height?: string | undefined;
+    type?: InputTypeI | undefined;
 }, {}, {}>;
 export declare const InputContainerSmall: import("@emotion/styled").StyledComponent<{
     [x: string]: any;
@@ -42,6 +46,9 @@ export declare const InputContainerSmall: import("@emotion/styled").StyledCompon
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
+} & {
+    height?: string | undefined;
+    type?: InputTypeI | undefined;
 }, {}, {}>;
 export declare const InputHeader: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;