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

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

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{OpennedDropdown as o}from"../dropdown/opennedDropdown/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:c,buttonPosition:u,menuWidth:a,menuHeight:p,buttonIcon:s,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:b,tooltipText:h,zIndex:P,isRound:x}=i;return t("div",{children:t(n,Object.assign({icon:s,width:r,height:l,color:c,position:u,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:b,tooltipText:h,zIndex:P,isRound:x},{children:t(o,{options:d,height:p||90,width:a,onSelect:e})}))})};export{i as FABMenu};
+import{jsx as t}from"react/jsx-runtime";import{OpennedDropdown as o}from"../dropdown/opennedDropdown/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:c,buttonPosition:p,menuWidth:u,menuHeight:s,buttonIcon:a,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:b,tooltipText:h,zIndex:P,isRound:x,dropPosition:f}=i;return t("div",{children:t(n,Object.assign({icon:a,width:r,height:l,color:c,position:p,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:b,tooltipText:h,zIndex:P,isRound:x,dropPosition:f},{children:t(o,{options:d,height:s||90,width:u,onSelect:e})}))})};export{i as FABMenu};

package/dist/esm/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/esm/components/floating-action-button/FloatingActionButton.js

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

package/dist/esm/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/esm/components/floating-action-button/FloatingActionButton.styles.js

@@ -1,4 +1,4 @@
-import{Dropdown as t}from"react-bootstrap";import o from"styled-components";import{COLORS as i}from"../../constants/Theme.js";var e;!function(t){t.TOP_LEFT="top left",t.TOP_RIGHT="top right",t.BOTTOM_LEFT="bottom left",t.BOTTOM_RIGHT="botton right"}(e||(e={}));const r=o.div`
+import{Dropdown as t}from"react-bootstrap";import o from"styled-components";import{COLORS as e}from"../../constants/Theme.js";var i,r;!function(t){t.TOP_LEFT="top left",t.TOP_RIGHT="top right",t.BOTTOM_LEFT="bottom left",t.BOTTOM_RIGHT="botton right"}(i||(i={})),function(t){t.UP="up",t.UP_CENTERED="up-centered",t.START="start",t.END="end",t.DOWN="down",t.DOWN_CENTERED="down-centered"}(r||(r={}));const n=o.div`
 	width: ${t=>t.width}px;
 	height: ${t=>t.height}px;
 	background: ${t=>t.color};
@@ -7,7 +7,7 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 	align-items: center;
 	cursor: pointer;
 	display: flex;
-`,n=o.div`
+`,d=o.div`
 	display: flex;
 	border-radius: 50%;
 	flex-direction: column;
@@ -16,8 +16,8 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 	width: ${t=>t.width}px;
 	height: ${t=>t.height}px;
 	z-index: ${t=>t.zIndex};
-	${t=>t.position===e.BOTTOM_RIGHT?`right: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===e.BOTTOM_LEFT?`left: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===e.TOP_LEFT?`left: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:t.position===e.TOP_RIGHT?`right: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:""};
-`,d=o(t)`
+	${t=>t.position===i.BOTTOM_RIGHT?`right: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===i.BOTTOM_LEFT?`left: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===i.TOP_LEFT?`left: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:t.position===i.TOP_RIGHT?`right: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:""};
+`,p=o(t)`
 	.filter-container {
 		.single-row {
 			display: flex;
@@ -26,7 +26,7 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 			justify-content: flex-start;
 			gap: 8px;
 			padding: 14px;
-			border-bottom: 1px solid ${i.stroke.primary};
+			border-bottom: 1px solid ${e.stroke.primary};
 
 			:last-child {
 				border-bottom: none !important;
@@ -35,15 +35,15 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 	}
 	button {
 		border: 1px solid
-			${t=>"true"===t.active?i.stroke.positive.lightAlt:i.stroke.primary};
+			${t=>"true"===t.active?e.stroke.positive.lightAlt:e.stroke.primary};
 		border-radius: 4px;
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
 		padding: 6px 8px;
-		background: ${t=>"true"===t.active?i.background.positive.light:i.surface.standard};
-		color: ${t=>"true"===t.active?i.content.positive:i.content.primary};
+		background: ${t=>"true"===t.active?e.background.positive.light:e.surface.standard};
+		color: ${t=>"true"===t.active?e.content.positive:e.content.primary};
 	}
 
 	.btn-primary:hover,
@@ -51,8 +51,8 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 	.btn-primary:focus,
 	.btn-primary.dropdown-toggle,
 	.show > .btn-primary.dropdown-toggle {
-		color: ${t=>"true"===t.active?i.content.positive:i.content.primary};
-		background-color: ${t=>"true"===t.active?i.background.positive.light:"transparent"};
+		color: ${t=>"true"===t.active?e.content.positive:e.content.primary};
+		background-color: ${t=>"true"===t.active?e.background.positive.light:"transparent"};
 		border: none;
 	}
 	.btn:focus {
@@ -61,7 +61,12 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 	}
 
 	.dropdown-toggle::after {
-		border-top: 0.3em solid ${i.content.primary};
+		border-top: 0.3em solid ${e.content.primary};
+		display: none;
+	}
+
+	.dropdown-toggle::before {
+		border-top: 0.3em solid ${e.content.primary};
 		display: none;
 	}
 	.dropdown-menu {
@@ -70,9 +75,9 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 	}
 	.dropdown-item:active,
 	.dropdown-item:hover {
-		color: ${i.content.positive};
+		color: ${e.content.positive};
 		text-decoration: none;
-		background-color: ${i.background.positive.light};
+		background-color: ${e.background.positive.light};
 	}
 `,a=o(t.Toggle)`
 	border-radius: 4px;
@@ -84,4 +89,4 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
-`;export{a as DropdownToggleContainer,e as FAB_POSITION,r as FloatingActionButtonContainer,n as FloatingActionButtonOuterContainer,d as StyledDropdown};
+`;export{r as DROP_POSITION,a as DropdownToggleContainer,i as FAB_POSITION,n as FloatingActionButtonContainer,d as FloatingActionButtonOuterContainer,p as StyledDropdown};

package/dist/esm/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/esm/components/progress-bar/ProgressBarComponent.js

@@ -1,6 +1 @@
-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};
+import c from"@emotion/styled/base";import{jsx as b}from"react/jsx-runtime";import{ProgressBar as o}from"react-bootstrap";import{COLORS as t}from"../../constants/Theme.js";const l=c=>b(I,Object.assign({color:c.color?c.color:t.content.brand},{children:b(o,{animated:c.isAnimated,now:c.completed,style:{height:`${c.height?c.height:8}px`}})})),I=c("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 */"));export{l as ProgressBarComponent,I as ProgressCompletedBar};

package/dist/esm/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>, {}>;