@bikdotai/bik-component-library 0.0.796-beta.4 → 0.0.796-beta.5

package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Styles.js

@@ -1,287 +0,0 @@
-import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../TypographyStyle.js";import{COLORS as o,BASE_COLORS as r,FONTS as n}from"../../../constants/Theme.js";const d=e.div`
-	background-color: #28034e;
-	width: 72px;
-	justify-content: space-between;
-	position: sticky;
-	top: 0;
-	left: 0;
-	z-index: 10;
-	overflow-y: auto;
-	height: 100vh;
-
-	.bik-header-logo {
-		padding: 8px 8px 0 8px;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		width: 100%;
-		cursor: pointer;
-		img {
-			width: 100%;
-			height: 100%;
-			object-fit: container;
-		}
-	}
-`,a=e.div`
-	margin: 0px 0px 16px;
-	padding-bottom: 8px;
-`,p=e.div``,s=e.div`
-	padding: 0px 6px;
-	margin-bottom: 6px;
-	> * {
-		gap: 4px;
-	}
-`,b=e.div`
-	position: absolute;
-	right: 5px;
-	background: ${o.stroke.warning.vibrant} !important;
-	font-size: 7.7px;
-	font-family: 'Inter';
-	line-height: 10px;
-	padding: 2px 9.27px 2px 9.27px;
-	border-radius: 16px 16px 0px 16px;
-	background: ${o.background.inverse};
-	${e=>{let{isLastSticky:i}=e;return i&&t`
-			@media (min-height: 768px) {
-				bottom: 116px;
-				z-index: 1;
-			}
-		`}}
-`,x=e.div`
-	position: absolute;
-	right: 10px;
-	margin-top: -5px;
-	${e=>{let{isLastSticky:i}=e;return i&&t`
-			@media (min-height: 768px) {
-				bottom: 116px;
-				z-index: 1;
-			}
-		`}}
-	${e=>{let{is2ndLastSticky:i}=e;return i&&t`
-			@media (min-height: 768px) {
-				bottom: 48px;
-				z-index: 1;
-			}
-		`}}
-`,c=e.div`
-	display: flex;
-	flex-direction: column;
-	border-radius: 10px;
-	align-items: center;
-	justify-content: space-around;
-	cursor: pointer;
-	> * {
-		gap: 10px;
-	}
-	padding: 8px;
-
-	${e=>{let{isNew:i}=e;return i&&t`
-			padding-top: 14px;
-		`}}
-
-	${e=>{let{isActive:i}=e;return i&&t`
-			border-radius: 8px;
-			background-color: ${r.brand[850]};
-			color: ${o.content.primaryInverse};
-			box-shadow: inset 0 0 0 1px ${o.stroke.brandSubdued};
-		`}}
-
-	${e=>{let{isHovered:i}=e;return i&&t`
-			background: ${o.background.brandHovered};
-			border-radius: 8px;
-		`}}
-
-	${e=>{let{isActive:i,isHovered:o}=e;return i&&o&&t`
-			border-radius: 8px;
-			border: 1px solid ${r.brand[700]};
-			background-color: ${r.brand[800]};
-		`}}
-
-
-	${e=>{let{isLastSticky:i}=e;return i&&t`
-			@media (min-height: 768px) {
-				position: absolute;
-				bottom: 72px;
-				left: 6px;
-				right: 6px;
-			}
-		`}}
-
-	${e=>{let{is2ndLastSticky:i}=e;return i&&t`
-			@media (min-height: 768px) {
-				position: absolute;
-				bottom: 8px;
-				left: 6px;
-				right: 6px;
-			}
-		`}}
-
-	${e=>{let{stickyBottom:i}=e;return void 0!==i&&t`
-			@media (min-height: 768px) {
-				position: absolute;
-				bottom: ${i}px;
-				left: 6px;
-				right: 6px;
-			}
-		`}}
-`,l=e.div`
-	display: flex;
-	flex-direction: row;
-	cursor: pointer;
-`,u=e(i)`
-	user-select: none;
-	color: ${e=>{let{isActive:t}=e;return t?o.content.primaryInverse:o.content.secondaryInverse}};
-	margin-bottom: 0px;
-	text-align: center;
-`,g=e.div`
-	.transform-class {
-		position: relative;
-		animation: animatebottom 0.2s;
-		transition-timing-function: ease-out;
-	}
-	@keyframes animatebottom {
-		from {
-			opacity: 0;
-		}
-
-		to {
-			opacity: 1;
-		}
-	}
-	.sidebar-right-menu {
-		position: ${e=>e.postion?e.postion:"sticky"};
-		top: ${e=>e.top?e.top:0}px;
-		left: ${e=>e.left?e.left:0}px; //72
-		width: ${e=>e.width?e.width:240}px;
-		z-index: ${e=>e.zIndex?e.zIndex:2};
-		background-color: ${e=>"brand"==e.theme?o.background.inverse:o.surface.standard};
-		height: ${e=>e.isNewSidebar?"fit-content":"100vh"};
-		display: flex;
-		flex-direction: column;
-		padding: 4px;
-		border-radius: ${e=>e.isNewSidebar?"8px":""};
-
-		.sidebar-bridge {
-			position: absolute;
-			right: 100%;
-			top: 0;
-			width: 6px;
-			height: 100%;
-		}
-	}
-
-	.sub-child-menu {
-		display: flex;
-		align-items: center;
-		justify-content: flex-start;
-		margin-bottom: ${e=>e.isNewSidebar?"":"8px"};
-		cursor: pointer;
-		background: ${e=>"brand"==e.theme?o.background.inverse:"transparent"};
-		border-radius: 4px;
-		.sub-child-text {
-			color: ${e=>"brand"==e.theme?o.surface.standard:""};
-			margin-bottom: 0px;
-			padding: 8px 12px;
-			font-size: ${n.caption.fontSize}px;
-			line-height: ${n.caption.lineHeight}px;
-			font-weight: ${n.caption.fontWeight};
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-		.sub-child-new-tag {
-			padding: 2px 9px 2px 9px;
-			border-radius: 16px;
-			background-color: rgba(254, 192, 45, 1);
-			font-family: Inter;
-			font-size: 7px;
-			font-weight: 600;
-			line-height: 10px;
-			color: rgba(40, 3, 78, 1);
-		}
-		.sub-child-active-text {
-			display: none;
-		}
-		.active-bold-weight {
-			font-weight: 600;
-			color: ${e=>e.isNewSidebar?o.background.warning.vibrant:""};
-		}
-		.sub-child-active-menu-style {
-			color: ${e=>e.isNewSidebar?o.background.warning.vibrant:""};
-		}
-	}
-	.sub-child-menu:hover {
-		background: ${e=>"brand"==e.theme?o.background.brandHovered:o.background.base};
-		border-radius: 4px;
-	}
-	.sub-child-active-menu {
-		background: ${e=>"brand"==e.theme?o.background.brandHovered:o.background.base};
-		border-radius: 4px;
-		border: ${e=>"brand"==e.theme?`1px solid ${o.stroke.brandSubdued}`:"none"};
-		.sub-child-active-text {
-			background: ${e=>"brand"==e.theme?o.stroke.brandSubdued:o.background.warning.vibrant};
-		}
-	}
-	.sub-child-active-menu:hover {
-		background: ${e=>"brand"==e.theme?o.background.inverseLight:o.background.base};
-		border-radius: 4px;
-		border: ${e=>"brand"==e.theme?`1px solid ${o.stroke.brandSubdued}`:"none"};
-		.sub-child-active-text {
-			background: ${e=>"brand"==e.theme?o.stroke.brandSubdued:o.background.warning.vibrant};
-		}
-	}
-	.sub-child-display-name {
-		padding: 14px 12px;
-		color: ${e=>"brand"==e.theme?o.content.secondaryInverse:o.text.secondary};
-	}
-	.lower-sticky-panel {
-		position: ${e=>e.isNewSidebar?"relative":"absolute"};
-		bottom: ${e=>e.isNewSidebar?"":"16px"};
-		margin-top: ${e=>e.isNewSidebar?"auto":""};
-		margin-bottom: ${e=>e.isNewSidebar?"16px":""};
-		.title-text {
-			padding: 8px 12px;
-			text-align: center;
-		}
-		.upgrade-button {
-			margin: auto;
-		}
-	}
-	.sidebar-skeleton {
-		padding: 8px;
-	}
-`,m=e.div`
-	.sidebar-right-menu {
-		border-radius: 8px;
-		border: 0.5px solid var(--stroke-color-stroke-primary, #e0e0e0);
-		box-shadow: 0px 0px 12px 0px rgba(222, 236, 255, 0.6);
-		position: ${e=>e.postion?e.postion:"sticky"};
-		top: ${e=>e.top?e.top:void 0}px;
-		bottom: 10px;
-		left: ${e=>e.left?e.left:0}px; //72
-		z-index: ${e=>e.zIndex?e.zIndex:2};
-		background-color: ${e=>"brand"==e.theme?"#381062":o.surface.standard};
-		display: flex;
-		flex-direction: column;
-		padding: 4px;
-		gap: 4px;
-		min-height: 100px;
-		overflow-y: auto;
-	}
-	.each-menu {
-		padding: 8px;
-		gap: 4px;
-		display: flex;
-		flex-direction: column;
-		justify-content: flex-start;
-		align-items: flex-start;
-		border-bottom: 0.5px solid #e0e0e0;
-		cursor: pointer;
-		max-width: 320px;
-		&:hover {
-			background-color: ${o.background.base};
-			border-radius: 8px;
-		}
-	}
-`;export{a as MainSideBarV2MenuWrapper,p as SibeBarV2MenuItem,d as SideBarV2Container,x as SidebarLockedChannel,s as SidebarMainMenu,l as SidebarMenuItemContainer,c as SidebarMenuItemInner,u as SidebarMenuItemText,b as SidebarNewTag,m as SidebarV2PopupContainer,g as SimpleSidebarV2Container};

package/dist/esm/components/bik-layout/BikSidebarV2/SimpleSidebarV2.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { SimpleSidebarV2Props } from './SidebarV2.model';
-export declare const SimpleSidebarV2: React.FC<SimpleSidebarV2Props>;

package/dist/esm/components/bik-layout/BikSidebarV2/SimpleSidebarV2.js

@@ -1 +0,0 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as s}from"react";import{COLORS as n}from"../../../constants/Theme.js";import{Button as a}from"../../button/Button.js";import{NavigationHyperlink as t}from"../../navigation-hyperlink/NavigationHyperlink.js";import{BodyCaption as r,TitleSmall as l}from"../../TypographyStyle.js";import{SimpleSidebarV2Container as o}from"./SidebarV2Styles.js";const c=c=>{const{menuList:d,activeMenu:u,theme:m,showAccessUpgradePanel:p=!1,header:h,width:b,zIndex:g,left:v,postion:y,top:N,router:j,onMouseLeaveOnMenu:f,onMouseEnterOnMenu:k,onMenuClick:O,onUpgrade:w,isNewSidebar:x}=c,[M,S]=s(u),T=(s,n)=>i("div",Object.assign({className:"sub-child-menu  "+((null==M?void 0:M.key)==(null==s?void 0:s.key)?"sub-child-active-menu":""),onClick:()=>{S(s),O(s,!s.page)},"aria-hidden":"true"},{children:[e("span",{className:(null==M?void 0:M.key)==(null==s?void 0:s.key)&&"brand"==m?"sub-child-active-text":""}),e(r,Object.assign({className:"sub-child-text "+((null==M?void 0:M.key)==(null==s?void 0:s.key)&&"white"==m?"active-bold-weight":"")},{children:null==s?void 0:s.displayName})),s.isNew&&e("div",Object.assign({className:"sub-child-new-tag"},{children:"NEW"}))]}),n);return e(o,Object.assign({width:b,zIndex:g,left:v,theme:m,postion:y,top:N,isNewSidebar:x},{children:i("div",Object.assign({id:"_sub-menu",className:"sidebar-right-menu transform-class",onMouseLeave:f,onMouseEnter:k},{children:[e("div",{className:"sidebar-bridge"}),i("div",{children:[!x&&e(r,Object.assign({className:"sub-child-display-name"},{children:h})),null==d?void 0:d.map(((i,s)=>i.page?e(t,Object.assign({href:i.page,router:j},{children:T(i,s)})):T(i,s)))]}),p&&i("div",Object.assign({className:"lower-sticky-panel"},{children:[e(l,Object.assign({className:"title-text",style:{color:n.surface.standard}},{children:"Upgrade plan to access this feature."})),e(a,{className:"upgrade-button",buttonText:"Upgrade plan",buttonType:"primary",size:"small",inverse:!0,onClick:()=>w?w():""})]}))]}),"_sub-menu")}))};export{c as SimpleSidebarV2};