@bikdotai/bik-component-library 0.0.553-beta.1 → 0.0.553

package/dist/esm/components/side-modal/SideModal.style.js

@@ -1,8 +1,8 @@
-import e,{css as t}from"styled-components";import{COLORS as o}from"../../constants/Theme.js";import{ComponentZindex as i}from"../../constants/zindex.js";const r=e.div`
+import e,{css as t}from"styled-components";import{COLORS as i}from"../../constants/Theme.js";import{ComponentZindex as o}from"../../constants/zindex.js";const r=e.div`
 	position: fixed;
 	top: 0;
 	left: 0;
-	z-index: ${e=>e.zIndex||i.SIDE_MODAL};
+	z-index: ${e=>e.zIndex||o.SIDE_MODAL};
 	height: 100%;
 	width: 100%;
 	background-color: rgba(0, 0, 0, 0.4);
@@ -12,7 +12,7 @@ import e,{css as t}from"styled-components";import{COLORS as o}from"../../constan
 `,n=e.div`
 	height: 100%;
 	width: ${e=>e.width||"566px"};
-	background: ${o.surface.standard};
+	background: ${i.surface.standard};
 	position: relative;
 	display: flex;
 	flex-direction: column;
@@ -25,25 +25,23 @@ import e,{css as t}from"styled-components";import{COLORS as o}from"../../constan
 	flex-direction: row;
 	align-items: center;
 	justify-content: space-between;
-	background: ${o.surface.standard};
+	background: ${i.surface.standard};
 	padding: 0px 24px;
-	border-bottom: 1px solid ${o.stroke.primary};
+	border-bottom: 1px solid ${i.stroke.primary};
 	svg:hover {
 		cursor: pointer;
-		background: ${o.background.base};
-		border-radius: 4px;
 	}
-	${e=>{let{headerStyle:o}=e;return t`
-		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
+	${e=>{let{headerStyle:i}=e;return t`
+		${Object.keys(i).map((e=>`${e}: ${i[e]};`)).join("\n")}
 	`}}
 `,s=e.div`
 	overflow-y: auto;
 	padding: 24px;
 	height: ${e=>e.hideFooter?"calc(100% - 60px)":"calc(100% - 120px)"};
-	${e=>{let{bodyStyle:o}=e;return t`
-		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
+	${e=>{let{bodyStyle:i}=e;return t`
+		${Object.keys(i).map((e=>`${e}: ${i[e]};`)).join("\n")}
 	`}}
-`,a=e.div`
+`,p=e.div`
 	height: 60px;
 	width: 100%;
 	position: sticky;
@@ -52,14 +50,14 @@ import e,{css as t}from"styled-components";import{COLORS as o}from"../../constan
 	flex-direction: ${e=>e.footerDirection||"row"};
 	justify-content: space-between;
 	align-items: center;
-	background: ${o.surface.standard};
-	border-top: 1px solid ${o.stroke.primary};
+	background: ${i.surface.standard};
+	border-top: 1px solid ${i.stroke.primary};
 	padding: 0px 24px;
-	${e=>{let{footerStyle:o}=e;return t`
-		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
+	${e=>{let{footerStyle:i}=e;return t`
+		${Object.keys(i).map((e=>`${e}: ${i[e]};`)).join("\n")}
 	`}}
-`,p=e.div`
+`,a=e.div`
 	display: flex;
 	flex-direction: ${e=>e.footerDirection||"row"};
 	gap: 8px;
-`;export{p as FooterButtonWrapper,s as SideModalBody,n as SideModalContainer,a as SideModalFooter,d as SideModalHeader,r as SideModalStyle};
+`;export{a as FooterButtonWrapper,s as SideModalBody,n as SideModalContainer,p as SideModalFooter,d as SideModalHeader,r as SideModalStyle};

package/dist/esm/components/zeroState/ZeroState.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 export declare const ZeroState: React.FC<{
-    isLoading?: boolean;
     title: string;
     subTitle?: string;
     IconHolderStyle?: React.CSSProperties;

package/dist/esm/components/zeroState/ZeroState.js

@@ -1,12 +1,12 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"styled-components";import{Spinner as r}from"../spinner/Spinner.js";import{TitleRegular as o,BodyCaption as i}from"../TypographyStyle.js";import{COLORS as s}from"../../constants/Theme.js";import l from"../../assets/icons/alert.svg.js";const c=n.div`
-	background: ${s.surface.standard};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"styled-components";import{TitleRegular as r,BodyCaption as o}from"../TypographyStyle.js";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/alert.svg.js";const s=n.div`
+	background: ${i.surface.standard};
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	flex: 1;
-`,a=n.div`
-	background: ${s.background.base};
+`,c=n.div`
+	background: ${i.background.base};
 	width: 48px;
 	height: 48px;
 	display: flex;
@@ -14,4 +14,4 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"styled-component
 	align-items: center;
 	justify-content: center;
 	border-radius: 24px;
-`,d=n=>{let{subTitle:d,title:m,IconHolderStyle:p,style:g,isLoading:u}=n;return e(c,Object.assign({style:null!=g?g:{}},{children:[u?t(r,{size:"large",color:s.stroke.brand}):t(a,Object.assign({style:null!=p?p:{}},{children:t(l,{color:s.content.placeholder,height:24,width:24})})),t(o,Object.assign({style:{marginTop:8,color:s.content.primary}},{children:u?"Loading...":m||"No results found"})),!!d&&!u&&t(i,Object.assign({style:{marginTop:4,color:s.content.secondary,textAlign:"center",maxWidth:184}},{children:d}))]}))};export{d as ZeroState};
+`,a=n=>{let{subTitle:a,title:d,IconHolderStyle:m,style:p}=n;return e(s,Object.assign({style:null!=p?p:{}},{children:[t(c,Object.assign({style:null!=m?m:{}},{children:t(l,{color:i.content.placeholder,height:24,width:24})})),t(r,Object.assign({style:{marginTop:8,color:i.content.primary}},{children:null!=d?d:"No results found"})),!!a&&t(o,Object.assign({style:{marginTop:4,color:i.content.secondary,textAlign:"center",maxWidth:184}},{children:a}))]}))};export{a as ZeroState};

package/dist/esm/utils/StringUtils.d.ts

@@ -9,5 +9,4 @@ export default class StringUtils {
     static firstLetters: (string: string) => string;
     static capitaliseFirstLetterOfString(string: string): string;
     static toCapitilize(string?: string): string;
-    static truncateText: (text: string, maxLength: number) => string;
 }

package/dist/esm/utils/StringUtils.js

@@ -1 +1 @@
-class e{static convertToTitleCase(e){const t=(e=e.toLowerCase()).split(" ");for(let e=0;e<t.length;e++)t[e]=t[e].charAt(0).toUpperCase()+t[e].slice(1);return t.join(" ")}static getAvatarText(e){if(e){const t=e.match(/\b(\w)/g),r=null==t?void 0:t.join("");return r?r.substring(0,2).toUpperCase():"C"}return""}static capitaliseFirstLetterOfString(e){return e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()}static toCapitilize(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return e.charAt(0).toUpperCase()+e.slice(1)}}Object.defineProperty(e,"normalizeName",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>{const r=e.split(t).join(" ");return r[0].toUpperCase()+r.slice(1)}}),Object.defineProperty(e,"capitalize",{enumerable:!0,configurable:!0,writable:!0,value:e=>{var t;return e.charAt(0).toUpperCase()+(null===(t=e.slice(1))||void 0===t?void 0:t.toLowerCase())}}),Object.defineProperty(e,"pluralize",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>0===t||t>1?e+"s":e}),Object.defineProperty(e,"getFullPhoneNumber",{enumerable:!0,configurable:!0,writable:!0,value:e=>e?"+91"+e.slice(e.length-10):""}),Object.defineProperty(e,"detectUrl",{enumerable:!0,configurable:!0,writable:!0,value:e=>e.match(/(((https?:\/\/)|(www\.))[^\s]+)/g)}),Object.defineProperty(e,"firstLetters",{enumerable:!0,configurable:!0,writable:!0,value:e=>{let t="";return e.split(" ").forEach((e=>{e.length&&(t+=e[0])})),t.substr(0,2)}}),Object.defineProperty(e,"truncateText",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>(null==e?void 0:e.length)>t?e.slice(0,t)+"...":e});export{e as default};
+class e{static convertToTitleCase(e){const t=(e=e.toLowerCase()).split(" ");for(let e=0;e<t.length;e++)t[e]=t[e].charAt(0).toUpperCase()+t[e].slice(1);return t.join(" ")}static getAvatarText(e){if(e){const t=e.match(/\b(\w)/g),r=null==t?void 0:t.join("");return r?r.substring(0,2).toUpperCase():"C"}return""}static capitaliseFirstLetterOfString(e){return e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()}static toCapitilize(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return e.charAt(0).toUpperCase()+e.slice(1)}}Object.defineProperty(e,"normalizeName",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>{const r=e.split(t).join(" ");return r[0].toUpperCase()+r.slice(1)}}),Object.defineProperty(e,"capitalize",{enumerable:!0,configurable:!0,writable:!0,value:e=>{var t;return e.charAt(0).toUpperCase()+(null===(t=e.slice(1))||void 0===t?void 0:t.toLowerCase())}}),Object.defineProperty(e,"pluralize",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>0===t||t>1?e+"s":e}),Object.defineProperty(e,"getFullPhoneNumber",{enumerable:!0,configurable:!0,writable:!0,value:e=>e?"+91"+e.slice(e.length-10):""}),Object.defineProperty(e,"detectUrl",{enumerable:!0,configurable:!0,writable:!0,value:e=>e.match(/(((https?:\/\/)|(www\.))[^\s]+)/g)}),Object.defineProperty(e,"firstLetters",{enumerable:!0,configurable:!0,writable:!0,value:e=>{let t="";return e.split(" ").forEach((e=>{e.length&&(t+=e[0])})),t.substr(0,2)}});export{e as default};

package/package.json

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

package/dist/cjs/components/dropdown/ChipInput.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { SingleOption } from './type';
-interface ChipInputProps {
-    placeholder?: string;
-    chips: SingleOption[];
-    onDeleteChip: (chip: SingleOption) => void;
-    containerStyle?: React.CSSProperties;
-    isDropdownOpened?: boolean;
-    sizeToUse?: 'default' | 'small';
-}
-declare const ChipInput: React.FC<ChipInputProps>;
-export default ChipInput;

package/dist/cjs/components/dropdown/ChipInput.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("../../utils/StringUtils.js"),l=require("../../constants/Theme.js"),r=require("../../assets/icons/chevronDown.svg.js"),n=require("../../assets/icons/cross.svg.js"),i=require("../tag/Tag.js"),o=require("../TypographyStyle.js"),c=require("./Common.styled.js");exports.default=a=>{let{chips:d,onDeleteChip:h,containerStyle:g={},sizeToUse:u="default",isDropdownOpened:j,placeholder:p="Select.."}=a;const[x,O]=t.useState(),[b,y]=t.useState(0);return t.useEffect((()=>{if(!d)return;let e=0;const t=(e=>1===e.length?100:2===e.length?40:34)(d);let s=d.filter((s=>(e+=s.label.length,e<=t)));console.log("test options",s),console.log("test chips",d),0===s.length&&d.length>0&&(s=[d[0]]),O(s),y(d.length-s.length)}),[d]),e.jsxs(c.ChipInputWrapper,Object.assign({style:Object.assign({},g)},{children:[e.jsxs("div",Object.assign({className:"chips-container"},{children:[null==x?void 0:x.map(((t,l)=>e.jsx("div",Object.assign({style:{zIndex:2}},{children:e.jsx(i.Tag,Object.assign({tagText:s.default.truncateText(t.selectedLabel||t.label,40),TrailingIcon:()=>e.jsx(n.default,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>{h(t)}})},{children:t.selectedLabel||t.label}))}),l))),!!b&&e.jsx(o.BodyCaption,Object.assign({color:l.COLORS.content.placeholder},{children:`+${b} more`})),0===d.length&&e.jsx("div",Object.assign({style:{color:l.COLORS.content.placeholder}},{children:p}))]})),e.jsx("div",{children:e.jsx(r.default,{style:{transform:j?"rotate(180deg)":"rotate(0deg)"},width:"small"===u?20:24,height:"small"===u?20:24,color:l.COLORS.content.primary})})]}))};

package/dist/esm/components/dropdown/ChipInput.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { SingleOption } from './type';
-interface ChipInputProps {
-    placeholder?: string;
-    chips: SingleOption[];
-    onDeleteChip: (chip: SingleOption) => void;
-    containerStyle?: React.CSSProperties;
-    isDropdownOpened?: boolean;
-    sizeToUse?: 'default' | 'small';
-}
-declare const ChipInput: React.FC<ChipInputProps>;
-export default ChipInput;

package/dist/esm/components/dropdown/ChipInput.js

@@ -1 +0,0 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as s,useEffect as o}from"react";import l from"../../utils/StringUtils.js";import{COLORS as n}from"../../constants/Theme.js";import r from"../../assets/icons/chevronDown.svg.js";import i from"../../assets/icons/cross.svg.js";import{Tag as c}from"../tag/Tag.js";import{BodyCaption as a}from"../TypographyStyle.js";import{ChipInputWrapper as h}from"./Common.styled.js";const g=g=>{let{chips:m,onDeleteChip:d,containerStyle:p={},sizeToUse:j="default",isDropdownOpened:f,placeholder:b="Select.."}=g;const[y,u]=s(),[v,O]=s(0);return o((()=>{if(!m)return;let e=0;const t=(e=>1===e.length?100:2===e.length?40:34)(m);let s=m.filter((s=>(e+=s.label.length,e<=t)));console.log("test options",s),console.log("test chips",m),0===s.length&&m.length>0&&(s=[m[0]]),u(s),O(m.length-s.length)}),[m]),e(h,Object.assign({style:Object.assign({},p)},{children:[e("div",Object.assign({className:"chips-container"},{children:[null==y?void 0:y.map(((e,s)=>t("div",Object.assign({style:{zIndex:2}},{children:t(c,Object.assign({tagText:l.truncateText(e.selectedLabel||e.label,40),TrailingIcon:()=>t(i,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>{d(e)}})},{children:e.selectedLabel||e.label}))}),s))),!!v&&t(a,Object.assign({color:n.content.placeholder},{children:`+${v} more`})),0===m.length&&t("div",Object.assign({style:{color:n.content.placeholder}},{children:b}))]})),t("div",{children:t(r,{style:{transform:f?"rotate(180deg)":"rotate(0deg)"},width:"small"===j?20:24,height:"small"===j?20:24,color:n.content.primary})})]}))};export{g as default};