@bikdotai/bik-component-library 0.0.12 → 0.0.13-beta.1

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DropdownOption, SingleOption } from '../dropdown/type';
-import { FAB_POSITION } from '../floating-action-button/FloatingActionButton.styles';
+import { DROP_POSITION, FAB_POSITION } from '../floating-action-button/FloatingActionButton.styles';
 import { TooltipPlacement } from '../tooltips';
 export declare const FABMenu: React.FC<{
     onSelect: (selected: SingleOption | SingleOption[]) => void;
@@ -18,4 +18,5 @@ export declare const FABMenu: React.FC<{
     tooltipText?: string;
     zIndex?: number;
     isRound?: boolean;
+    dropPosition?: DROP_POSITION;
 }>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../dropdown/opennedDropdown/components/OpennedDropdown.js"),n=require("../floating-action-button/FloatingActionButton.js");require("../floating-action-button/FloatingActionButton.styles.js");exports.FABMenu=e=>{const{onSelect:i,menuOptions:r,buttonWidth:d,buttonHeight:u,buttonColor:l,buttonPosition:s,menuWidth:c,menuHeight:a,buttonIcon:p,buttonPaddingHorizontal:g,buttonPaddingVertical:b,tooltipPlacement:h,tooltipText:x,zIndex:j,isRound:P}=e;return t.jsx("div",{children:t.jsx(n.FloatingActionButton,Object.assign({icon:p,width:d,height:u,color:l,position:s,buttonPaddingHorizontal:g,buttonPaddingVertical:b,tooltipPlacement:h,tooltipText:x,zIndex:j,isRound:P},{children:t.jsx(o.OpennedDropdown,{options:r,height:a||90,width:c,onSelect:i})}))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../dropdown/opennedDropdown/components/OpennedDropdown.js"),n=require("../floating-action-button/FloatingActionButton.js");require("../floating-action-button/FloatingActionButton.styles.js");exports.FABMenu=e=>{const{onSelect:i,menuOptions:r,buttonWidth:d,buttonHeight:u,buttonColor:s,buttonPosition:l,menuWidth:c,menuHeight:a,buttonIcon:p,buttonPaddingHorizontal:g,buttonPaddingVertical:b,tooltipPlacement:h,tooltipText:x,zIndex:P,isRound:j,dropPosition:m}=e;return t.jsx("div",{children:t.jsx(n.FloatingActionButton,Object.assign({icon:p,width:d,height:u,color:s,position:l,buttonPaddingHorizontal:g,buttonPaddingVertical:b,tooltipPlacement:h,tooltipText:x,zIndex:P,isRound:j,dropPosition:m},{children:t.jsx(o.OpennedDropdown,{options:r,height:a||90,width:c,onSelect:i})}))})};

package/dist/cjs/components/floating-action-button/FloatingActionButton.d.ts

@@ -1,7 +1,7 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import React from 'react';
 import { TooltipPlacement } from '../tooltips/CustomisedTooltip';
-import { FAB_POSITION } from './FloatingActionButton.styles';
+import { DROP_POSITION, FAB_POSITION } from './FloatingActionButton.styles';
 export declare const FloatingActionButton: React.FC<{
     onClick?: () => void;
     children?: React.ReactNode;
@@ -16,4 +16,5 @@ export declare const FloatingActionButton: React.FC<{
     tooltipPlacement?: TooltipPlacement;
     zIndex?: number;
     isRound?: boolean;
+    dropPosition?: DROP_POSITION;
 }>;

package/dist/cjs/components/floating-action-button/FloatingActionButton.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("react-bootstrap"),i=require("../../constants/Theme.js"),n=require("../tooltips/CustomisedTooltip.js"),e=require("../../assets/icons/question-mark.svg.js"),r=require("./FloatingActionButton.styles.js");const s=o=>{const{width:i,height:s,color:l,onClick:c,icon:d,tooltipPlacement:a,tooltipText:h,isRound:u}=o;return h?t.jsx(n.CustomisedTooltip,{tooltipContent:t.jsx(t.Fragment,{children:h}),tooltipTriggerContent:t.jsx(r.FloatingActionButtonContainer,Object.assign({width:i,height:s,color:l,onClick:c,isRound:u},{children:d||t.jsx(e.default,{width:22,height:22})})),tooltipPlacement:a,showOnHover:!0}):t.jsx(t.Fragment,{children:t.jsx(r.FloatingActionButtonContainer,Object.assign({width:i,height:s,color:l,onClick:c,isRound:u},{children:d||t.jsx(e.default,{width:22,height:22})}))})};exports.FloatingActionButton=e=>{const{icon:l,onClick:c,children:d,tooltipText:a,isRound:h=!0,width:u=48,height:g=48,color:p=i.COLORS.background.inverse,position:j=r.FAB_POSITION.TOP_LEFT,buttonPaddingHorizontal:x=20,buttonPaddingVertical:m=20,zIndex:C=1,tooltipPlacement:w=n.TooltipPlacement.Auto}=e;return t.jsx(t.Fragment,{children:t.jsx(r.FloatingActionButtonOuterContainer,Object.assign({width:u,height:g,color:p,position:j,buttonPaddingHorizontal:x,buttonPaddingVertical:m,zIndex:C},{children:t.jsx(r.StyledDropdown,{children:d?t.jsxs(t.Fragment,{children:[t.jsx(r.DropdownToggleContainer,{children:t.jsx(s,{width:u,height:g,color:p,tooltipPlacement:w,onClick:c,tooltipText:a,icon:l,position:j,isRound:h})}),t.jsx(o.Dropdown.Menu,{children:d})]}):t.jsx(s,{width:u,height:g,color:p,tooltipPlacement:w,onClick:c,tooltipText:a,icon:l,position:j,isRound:h})})}))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("react"),i=require("react-bootstrap"),n=require("../../constants/Theme.js"),e=require("../tooltips/CustomisedTooltip.js"),r=require("../../assets/icons/question-mark.svg.js"),s=require("./FloatingActionButton.styles.js");const l=o=>{const{width:i,height:n,color:l,onClick:c,icon:d,tooltipPlacement:a,tooltipText:h,isRound:u,isDropdownOpen:p}=o;return h?t.jsx(e.CustomisedTooltip,{isTooltipVisible:!p,tooltipContent:t.jsx(t.Fragment,{children:h}),tooltipTriggerContent:t.jsx(s.FloatingActionButtonContainer,Object.assign({width:i,height:n,color:l,onClick:c,isRound:u},{children:d||t.jsx(r.default,{width:22,height:22})})),tooltipPlacement:a,showOnHover:!0}):t.jsx(t.Fragment,{children:t.jsx(s.FloatingActionButtonContainer,Object.assign({width:i,height:n,color:l,onClick:c,isRound:u},{children:d||t.jsx(r.default,{width:22,height:22})}))})};exports.FloatingActionButton=r=>{const{icon:c,onClick:d,children:a,tooltipText:h,isRound:u=!0,width:p=48,height:g=48,color:j=n.COLORS.background.inverse,position:x=s.FAB_POSITION.TOP_LEFT,buttonPaddingHorizontal:O=20,buttonPaddingVertical:w=20,zIndex:P=1,tooltipPlacement:T=e.TooltipPlacement.Auto,dropPosition:m=s.DROP_POSITION.DOWN}=r,[C,b]=o.useState(!1);return t.jsx(t.Fragment,{children:t.jsx(s.FloatingActionButtonOuterContainer,Object.assign({width:p,height:g,color:j,position:x,buttonPaddingHorizontal:O,buttonPaddingVertical:w,zIndex:P},{children:t.jsx(s.StyledDropdown,Object.assign({onToggle:(t,o)=>{b(t)},drop:m},{children:a?t.jsxs(t.Fragment,{children:[t.jsx(s.DropdownToggleContainer,Object.assign({drop:m},{children:t.jsx(l,{width:p,height:g,color:j,tooltipPlacement:T,onClick:d,tooltipText:h,icon:c,position:x,isRound:u,isDropdownOpen:C})})),t.jsx(i.Dropdown.Menu,{children:a})]}):t.jsx(l,{width:p,height:g,color:j,tooltipPlacement:T,onClick:d,tooltipText:h,icon:c,position:x,isRound:u,isDropdownOpen:C})}))}))})};

package/dist/cjs/components/floating-action-button/FloatingActionButton.styles.d.ts

@@ -5,6 +5,14 @@ export declare enum FAB_POSITION {
     BOTTOM_LEFT = "bottom left",
     BOTTOM_RIGHT = "botton right"
 }
+export declare enum DROP_POSITION {
+    UP = "up",
+    UP_CENTERED = "up-centered",
+    START = "start",
+    END = "end",
+    DOWN = "down",
+    DOWN_CENTERED = "down-centered"
+}
 export declare const FloatingActionButtonContainer: import("styled-components").StyledComponent<"div", any, {
     width: number;
     height: number;

package/dist/cjs/components/floating-action-button/FloatingActionButton.styles.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react-bootstrap"),o=require("styled-components"),e=require("../../constants/Theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i,n=r(o);exports.FAB_POSITION=void 0,(i=exports.FAB_POSITION||(exports.FAB_POSITION={})).TOP_LEFT="top left",i.TOP_RIGHT="top right",i.BOTTOM_LEFT="bottom left",i.BOTTOM_RIGHT="botton right";const d=n.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react-bootstrap"),o=require("styled-components"),e=require("../../constants/Theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i,n,d=r(o);exports.FAB_POSITION=void 0,(i=exports.FAB_POSITION||(exports.FAB_POSITION={})).TOP_LEFT="top left",i.TOP_RIGHT="top right",i.BOTTOM_LEFT="bottom left",i.BOTTOM_RIGHT="botton right",exports.DROP_POSITION=void 0,(n=exports.DROP_POSITION||(exports.DROP_POSITION={})).UP="up",n.UP_CENTERED="up-centered",n.START="start",n.END="end",n.DOWN="down",n.DOWN_CENTERED="down-centered";const p=d.default.div`
 	width: ${t=>t.width}px;
 	height: ${t=>t.height}px;
 	background: ${t=>t.color};
@@ -7,7 +7,7 @@
 	align-items: center;
 	cursor: pointer;
 	display: flex;
-`,a=n.default.div`
+`,a=d.default.div`
 	display: flex;
 	border-radius: 50%;
 	flex-direction: column;
@@ -17,7 +17,7 @@
 	height: ${t=>t.height}px;
 	z-index: ${t=>t.zIndex};
 	${t=>t.position===exports.FAB_POSITION.BOTTOM_RIGHT?`right: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===exports.FAB_POSITION.BOTTOM_LEFT?`left: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===exports.FAB_POSITION.TOP_LEFT?`left: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:t.position===exports.FAB_POSITION.TOP_RIGHT?`right: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:""};
-`,p=n.default(t.Dropdown)`
+`,s=d.default(t.Dropdown)`
 	.filter-container {
 		.single-row {
 			display: flex;
@@ -64,6 +64,11 @@
 		border-top: 0.3em solid ${e.COLORS.content.primary};
 		display: none;
 	}
+
+	.dropdown-toggle::before {
+		border-top: 0.3em solid ${e.COLORS.content.primary};
+		display: none;
+	}
 	.dropdown-menu {
 		min-width: 12rem;
 		padding: 0 0;
@@ -74,7 +79,7 @@
 		text-decoration: none;
 		background-color: ${e.COLORS.background.positive.light};
 	}
-`,s=n.default(t.Dropdown.Toggle)`
+`,l=d.default(t.Dropdown.Toggle)`
 	border-radius: 4px;
 	display: flex;
 	flex-direction: row;
@@ -84,4 +89,4 @@
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
-`;exports.DropdownToggleContainer=s,exports.FloatingActionButtonContainer=d,exports.FloatingActionButtonOuterContainer=a,exports.StyledDropdown=p;
+`;exports.DropdownToggleContainer=l,exports.FloatingActionButtonContainer=p,exports.FloatingActionButtonOuterContainer=a,exports.StyledDropdown=s;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import 'bootstrap/dist/css/bootstrap.min.css';
 export interface ProgressBarProps {
     completed: number;
     isAnimated: boolean;
@@ -7,6 +6,9 @@ export interface ProgressBarProps {
     height?: number;
 }
 export declare const ProgressBarComponent: (props: ProgressBarProps) => JSX.Element;
-export declare const ProgressCompletedBar: import("styled-components").StyledComponent<"div", any, {
+export declare const ProgressCompletedBar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     color: string;
-}, never>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,6 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react-bootstrap"),t=require("styled-components"),o=require("../../constants/Theme.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const n=s(t).default.div`
-	flex: 50%;
-	.progress-bar {
-		background-color: ${e=>e.color};
-	}
-`;exports.ProgressBarComponent=t=>e.jsx(n,Object.assign({color:t.color?t.color:o.COLORS.content.brand},{children:e.jsx(r.ProgressBar,{animated:t.isAnimated,now:t.completed,style:{height:`${t.height?t.height:8}px`}})})),exports.ProgressCompletedBar=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("@emotion/styled/base"),e=require("react/jsx-runtime"),b=require("react-bootstrap"),t=require("../../constants/Theme.js");function o(c){return c&&"object"==typeof c&&"default"in c?c:{default:c}}const s=o(c).default("div","production"===process.env.NODE_ENV?{target:"e17nsuvt0"}:{target:"e17nsuvt0",label:"ProgressCompletedBar"})("flex:50%;.progress-bar{background-color:",(c=>c.color),";}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlByb2dyZXNzQmFyQ29tcG9uZW50LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPK0MiLCJmaWxlIjoiUHJvZ3Jlc3NCYXJDb21wb25lbnQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsganN4IGFzIF9qc3ggfSBmcm9tIFwicmVhY3QvanN4LXJ1bnRpbWVcIjtcclxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5pbXBvcnQgeyBQcm9ncmVzc0JhciB9IGZyb20gJ3JlYWN0LWJvb3RzdHJhcCc7XHJcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gXCIuLi8uLi9jb25zdGFudHMvVGhlbWVcIjtcclxuZXhwb3J0IGNvbnN0IFByb2dyZXNzQmFyQ29tcG9uZW50ID0gKHByb3BzKSA9PiB7XHJcbiAgICByZXR1cm4gKF9qc3goUHJvZ3Jlc3NDb21wbGV0ZWRCYXIsIE9iamVjdC5hc3NpZ24oeyBjb2xvcjogcHJvcHMuY29sb3IgPyBwcm9wcy5jb2xvciA6IENPTE9SUy5jb250ZW50LmJyYW5kIH0sIHsgY2hpbGRyZW46IF9qc3goUHJvZ3Jlc3NCYXIsIHsgYW5pbWF0ZWQ6IHByb3BzLmlzQW5pbWF0ZWQsIG5vdzogcHJvcHMuY29tcGxldGVkLCBzdHlsZTogeyBoZWlnaHQ6IGAke3Byb3BzLmhlaWdodCA/IHByb3BzLmhlaWdodCA6IDh9cHhgIH0gfSkgfSkpKTtcclxufTtcclxuZXhwb3J0IGNvbnN0IFByb2dyZXNzQ29tcGxldGVkQmFyID0gc3R5bGVkLmRpdiBgXG5cdGZsZXg6IDUwJTtcblx0LnByb2dyZXNzLWJhciB7XG5cdFx0YmFja2dyb3VuZC1jb2xvcjogJHsocHJvcHMpID0+IHByb3BzLmNvbG9yfTtcblx0fVxuYDtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9UHJvZ3Jlc3NCYXJDb21wb25lbnQuanMubWFwIl19 */"));exports.ProgressBarComponent=c=>e.jsx(s,Object.assign({color:c.color?c.color:t.COLORS.content.brand},{children:e.jsx(b.ProgressBar,{animated:c.isAnimated,now:c.completed,style:{height:`${c.height?c.height:8}px`}})})),exports.ProgressCompletedBar=s;

package/dist/cjs/components/toaster/Toaster.styled.d.ts

@@ -1,4 +1,8 @@
-export declare const ToasterStyled: import("styled-components").StyledComponent<"div", any, {
+/// <reference types="react" />
+export declare const ToasterStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     width?: string | undefined;
     height?: string | undefined;
-}, never>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;