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

package/dist/esm/components/toaster/Toaster.styled.js

@@ -0,0 +1,35 @@
+import t from"styled-components";import{COLORS as o}from"../../constants/Theme.js";const i=t.div`
+	--toastify-color-light: #fff;
+	--toastify-color-dark: #121212;
+	--toastify-color-info: ${o.background.inverse};
+	--toastify-color-success: ${o.content.positive};
+	--toastify-color-error: ${o.content.negative};
+	--toastify-text-color-light: ${o.content.primary};
+	--toastify-toast-width: ${t=>t.width||"fit-content"};
+	--toastify-toast-min-height: ${t=>t.height||"44px"};
+	--toastify-toast-max-height: ${t=>t.height||"44px"};
+	font-family: inherit;
+
+	.custom-position {
+		position: relative;
+	}
+	.Toastify__toast {
+		padding: 6px;
+
+	.Toastify__close-button {
+		display: block;
+		margin: auto;
+	}
+
+	.Toastify__toast-body{
+		padding: 0 6px;
+	}
+
+	.Toastify__progress-bar-theme--colored.Toastify__progress-bar--default {
+		background: ${o.content.brand};
+	}
+
+	.Toastify__toast-body > div:last-child {
+		display: flex;
+	}
+`;export{i as ToasterStyled};

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

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

package/dist/esm/components/tooltips/CustomisedTooltip.d.ts

@@ -0,0 +1,25 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import React from 'react';
+export declare enum TooltipPlacement {
+    Top = "top",
+    Bottom = "bottom",
+    Right = "right",
+    Left = "left",
+    Auto_Start = "auto-start",
+    Auto = "auto",
+    Auto_end = "auto-end",
+    Top_Start = "top-start",
+    Top_End = "top-end",
+    Right_Start = "right-start",
+    Right_End = "right-end",
+    Bottom_End = "bottom-end",
+    Bottom_Start = "bottom-start",
+    Left_End = "left-end",
+    Left_Start = "left-start"
+}
+export declare const CustomisedTooltip: React.FC<{
+    tooltipContent: JSX.Element;
+    tooltipTriggerContent: JSX.Element;
+    tooltipPlacement: TooltipPlacement;
+    showOnHover: boolean;
+}>;

package/dist/esm/components/tooltips/CustomisedTooltip.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{useState as o,useRef as e}from"react";import{OverlayTrigger as r,Tooltip as n}from"react-bootstrap";var a;!function(t){t.Top="top",t.Bottom="bottom",t.Right="right",t.Left="left",t.Auto_Start="auto-start",t.Auto="auto",t.Auto_end="auto-end",t.Top_Start="top-start",t.Top_End="top-end",t.Right_Start="right-start",t.Right_End="right-end",t.Bottom_End="bottom-end",t.Bottom_Start="bottom-start",t.Left_End="left-end",t.Left_Start="left-start"}(a||(a={}));const i=a=>{const{tooltipContent:i,tooltipPlacement:s,tooltipTriggerContent:c,showOnHover:l}=a,[p,d]=o(!1),m=e(null);return t(r,Object.assign({placement:s,target:m.current,show:p,overlay:t(n,Object.assign({id:`tooltip-${s}`},{children:i}))},{children:t("div",Object.assign({ref:m,onMouseEnter:()=>{l&&d(!0)},onMouseLeave:()=>{l&&d(!1)},onClick:()=>{l||d(!p)}},{children:c}))}),s)};export{i as CustomisedTooltip,a as TooltipPlacement};

package/dist/esm/components/tooltips/Tooltip.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { TooltipInternalProps } from "./TooltipInternal";
+type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+export interface TooltipProps extends TooltipInternalProps {
+    width?: number;
+    placement?: Placement;
+    children: ReactNode;
+}
+export declare const Tooltip: FunctionComponent<TooltipProps>;
+export {};

package/dist/esm/components/tooltips/Tooltip.js

@@ -0,0 +1 @@
+import{jsxs as t,Fragment as n,jsx as r}from"react/jsx-runtime";import i from"@tippyjs/react";import o from"react";import e from"./TooltipInternal.js";import{COLORS as p}from"../../constants/Theme.js";const l=`\n  .tippy-content {\n    padding: 0px;\n  }\n  .tippy-arrow {\n    \tcolor: ${t=>p.content.primary};\n  }\n`,m=p=>o.isValidElement(p.children)?t(n,{children:[r("style",{children:l}),r(i,Object.assign({visible:!0,placement:p.placement||"right",maxWidth:p.width,animation:"fade",arrow:!0,content:r(e,{title:p.title,body:p.body,buttonProps:p.buttonProps})},{children:p.children}))]}):null;export{m as Tooltip};

package/dist/esm/components/tooltips/TooltipInternal.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent } from 'react';
+import { ButtonProps } from "../button/model";
+export interface TooltipInternalProps {
+    title?: string;
+    body: string;
+    buttonProps?: ButtonProps;
+}
+type Props = TooltipInternalProps;
+declare const TooltipInternal: FunctionComponent<Props>;
+export default TooltipInternal;

package/dist/esm/components/tooltips/TooltipInternal.js

@@ -0,0 +1 @@
+import c from"@emotion/styled/base";import{jsxs as b,jsx as t}from"react/jsx-runtime";import{Button as o}from"../button/Button.js";import{TitleSmall as n,BodyCaption as l}from"../TypographyStyle.js";import{COLORS as e}from"../../constants/Theme.js";const y=c("div","production"===process.env.NODE_ENV?{target:"e6ps8400"}:{target:"e6ps8400",label:"TooltipStyled"})("box-shadow:0px 2px 8px rgba(0, 0, 0, 0.12);border-radius:4px;padding:8px;background-color:",(c=>e.content.primary),";color:",(c=>e.content.primaryInverse),";"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvb2x0aXBJbnRlcm5hbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2lDIiwiZmlsZSI6IlRvb2x0aXBJbnRlcm5hbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBqc3ggYXMgX2pzeCwganN4cyBhcyBfanN4cyB9IGZyb20gXCJyZWFjdC9qc3gtcnVudGltZVwiO1xyXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmltcG9ydCB7IEJ1dHRvbiB9IGZyb20gXCIuLi9idXR0b25cIjtcclxuaW1wb3J0IHsgQm9keUNhcHRpb24sIFRpdGxlU21hbGwgfSBmcm9tIFwiLi4vVHlwb2dyYXBoeVN0eWxlXCI7XHJcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gXCIuLi8uLi9jb25zdGFudHMvVGhlbWVcIjtcclxuY29uc3QgVG9vbHRpcFN0eWxlZCA9IHN0eWxlZC5kaXYgYFxuXHRib3gtc2hhZG93OiAwcHggMnB4IDhweCByZ2JhKDAsIDAsIDAsIDAuMTIpO1xuXHRib3JkZXItcmFkaXVzOiA0cHg7XG5cdHBhZGRpbmc6IDhweDtcblx0YmFja2dyb3VuZC1jb2xvcjogJHsocHJvcHMpID0+IENPTE9SUy5jb250ZW50LnByaW1hcnl9O1xuXHRjb2xvcjogJHsocHJvcHMpID0+IENPTE9SUy5jb250ZW50LnByaW1hcnlJbnZlcnNlfTtcbmA7XHJcbmNvbnN0IFRvb2x0aXBJbnRlcm5hbCA9IChwcm9wcykgPT4ge1xyXG4gICAgLy8gVG9kbyAoYXNodXRvc2gpIG1ha2Ugc3VyZSB0aGF0IHRoZSBidXR0b24gd2hpY2ggaXMgcGFzc2VkIGlzIGludmVyc2VcclxuICAgIHJldHVybiAoX2pzeHMoVG9vbHRpcFN0eWxlZCwgeyBjaGlsZHJlbjogW3Byb3BzLnRpdGxlICYmIChfanN4KFRpdGxlU21hbGwsIE9iamVjdC5hc3NpZ24oeyBjb2xvcjogQ09MT1JTLmNvbnRlbnQucHJpbWFyeUludmVyc2UsIHN0eWxlOiB7IG1hcmdpbkJvdHRvbTogJzhweCcgfSB9LCB7IGNoaWxkcmVuOiBwcm9wcy50aXRsZSB9KSkpLCBfanN4KEJvZHlDYXB0aW9uLCBPYmplY3QuYXNzaWduKHsgY29sb3I6IENPTE9SUy5jb250ZW50LnByaW1hcnlJbnZlcnNlLCBzdHlsZTogeyBtYXJnaW5Cb3R0b206IHByb3BzLmJ1dHRvblByb3BzID8gJzhweCcgOiAnMHB4JyB9IH0sIHsgY2hpbGRyZW46IHByb3BzLmJvZHkgfSkpLCBwcm9wcy5idXR0b25Qcm9wcyAmJiBfanN4KEJ1dHRvbiwgT2JqZWN0LmFzc2lnbih7fSwgcHJvcHMuYnV0dG9uUHJvcHMpKV0gfSkpO1xyXG59O1xyXG5leHBvcnQgZGVmYXVsdCBUb29sdGlwSW50ZXJuYWw7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVRvb2x0aXBJbnRlcm5hbC5qcy5tYXAiXX0= */")),g=c=>b(y,{children:[c.title&&t(n,Object.assign({color:e.content.primaryInverse,style:{marginBottom:"8px"}},{children:c.title})),t(l,Object.assign({color:e.content.primaryInverse,style:{marginBottom:c.buttonProps?"8px":"0px"}},{children:c.body})),c.buttonProps&&t(o,Object.assign({},c.buttonProps))]});export{g as default};

package/dist/esm/components/tooltips/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Tooltip';
+export * from './CustomisedTooltip';

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const ZeroState: React.FC<{
+    title: string;
+    subTitle?: string;
+    IconHolderStyle?: React.CSSProperties;
+    style?: React.CSSProperties /** now this component is extendable through styled-component */;
+}>;

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

@@ -0,0 +1,17 @@
+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 s}from"../../constants/Theme.js";import l from"../../assets/icons/alert.svg.js";const i=n.div`
+	background: ${s.surface.standard};
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	flex: 1;
+`,c=n.div`
+	background: ${s.background.base};
+	width: 48px;
+	height: 48px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	border-radius: 24px;
+`,a=n=>{let{subTitle:a,title:d,IconHolderStyle:m,style:p}=n;return e(i,Object.assign({style:null!=p?p:{}},{children:[t(c,Object.assign({style:null!=m?m:{}},{children:t(l,{color:s.content.placeholder,height:24,width:24})})),t(r,Object.assign({style:{marginTop:8,color:s.content.primary}},{children:null!=d?d:"No results found"})),!!a&&t(o,Object.assign({style:{marginTop:4,color:s.content.secondary}},{children:a}))]}))};export{a as ZeroState};