@bikdotai/bik-component-library 0.0.756-beta.0 → 0.0.756-beta.1

package/dist/esm/components/ProgressChecklist/ProgressStepper.js

@@ -1 +0,0 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import i,{useState as l}from"react";import{COLORS as n}from"../../constants/Theme.js";import{Button as d}from"../button/Button.js";const o=o=>{let{steps:s=[],onStepClick:r,isStepperActive:a}=o;var c,p;const h=s.length>0?s:[{id:"step-1",text:"Step One"},{id:"step-2",text:"Step Two"},{id:"step-3",text:"Step Three"}],[g,v]=l(null!==(p=null===(c=h[0])||void 0===c?void 0:c.id)&&void 0!==p?p:null);return e("div",Object.assign({style:{paddingLeft:52}},{children:e("div",Object.assign({style:{margin:0,padding:0,display:"flex",flexDirection:"column",gap:12}},{children:h.map(((l,o)=>{var s,c,p,u,m,x,C;return t(i.Fragment,{children:[t("div",Object.assign({style:{display:"flex",alignItems:"center",gap:8}},{children:[(()=>{var i;const n=(0===o||(null===(i=h[o-1])||void 0===i?void 0:i.isCompleted))&&!0===a,d=!0===l.isCompleted;return e("div",d?Object.assign({style:{width:24,height:24,flex:"0 0 24px"},"aria-hidden":!0},{children:t("svg",Object.assign({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e("rect",{x:"0.5",y:"0.5",width:"23",height:"23",rx:"11.5",fill:"#EFE6F9"}),e("rect",{x:"0.5",y:"0.5",width:"23",height:"23",rx:"11.5",stroke:"#4B1583"}),e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M17.8047 7.52851C18.0651 7.78886 18.0651 8.21097 17.8047 8.47132L10.4714 15.8047C10.2111 16.065 9.78894 16.065 9.5286 15.8047L6.19526 12.4713C5.93491 12.211 5.93491 11.7889 6.19526 11.5285C6.45561 11.2682 6.87772 11.2682 7.13807 11.5285L10 14.3904L16.8619 7.52851C17.1223 7.26816 17.5444 7.26816 17.8047 7.52851Z",fill:"#4B1583"})]}))}):Object.assign({style:{width:24,height:24,borderRadius:30,padding:4,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",background:n?"#4B1583":"transparent",color:n?"#FFFFFF":"#BDBDBD",border:"1px solid "+(n?"#4B1583":"#E0E0E0"),fontSize:12,lineHeight:"12px",flex:"0 0 24px"},"aria-hidden":!0},{children:e("span",Object.assign({style:{fontSize:12,fontWeight:500}},{children:o+1}))}))})(),e("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"flex-start",minWidth:0},"aria-label":`Open ${null!==(c=null!==(s=l.label)&&void 0!==s?s:l.text)&&void 0!==c?c:`step ${o+1}`}`},{children:e(d,{buttonText:null!==(u=null!==(p=l.label)&&void 0!==p?p:l.text)&&void 0!==u?u:`Step ${o+1}`,buttonType:"text",buttonTextColor:l.isCompleted?n.text.secondary:0!==o&&!0!==(null===(m=h[o-1])||void 0===m?void 0:m.isCompleted)||!a?n.content.inactive:"#4B1583",matchParentWidth:!1,size:"small",style:{width:"fit-content",paddingLeft:0,textDecoration:"none",textDecorationLine:"none"},onClick:()=>{var e,t;v(null!==(e=l.id)&&void 0!==e?e:g),(!l.isCompleted&&a&&(0===o||!0===(null===(t=h[o-1])||void 0===t?void 0:t.isCompleted))||l.isCompleted)&&(l.onClick?l.onClick():l.id&&(null==r||r(l.id)))}})})),!l.isCompleted&&(0===o||!0===(null===(x=h[o-1])||void 0===x?void 0:x.isCompleted))&&a&&e("div",Object.assign({style:{width:20,height:20,display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer"},"aria-hidden":!0,onClick:e=>{var t,i;v(null!==(t=l.id)&&void 0!==t?t:g),l.isCompleted||!a||0!==o&&!0!==(null===(i=h[o-1])||void 0===i?void 0:i.isCompleted)||(l.onClick?l.onClick():l.id&&(null==r||r(l.id)))}},{children:e("svg",Object.assign({width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M5.83333 6.66667C5.3731 6.66667 5 6.29357 5 5.83333C5 5.3731 5.3731 5 5.83333 5H14.1667C14.6269 5 15 5.3731 15 5.83333V14.1667C15 14.6269 14.6269 15 14.1667 15C13.7064 15 13.3333 14.6269 13.3333 14.1667V7.84518L6.42259 14.7559C6.09715 15.0814 5.56951 15.0814 5.24408 14.7559C4.91864 14.4305 4.91864 13.9028 5.24408 13.5774L12.1548 6.66667H5.83333Z",fill:"#4B1583"})}))}))]})),o!==h.length-1&&e("div",{"aria-hidden":!0,style:{width:8,height:1,borderRadius:2,background:"#BDBDBD",transform:"rotate(90deg)",marginLeft:8}})]},null!==(C=l.id)&&void 0!==C?C:`step-${o}`)}))}))}))};var s=i.memo(o);export{s as default};

package/dist/esm/components/ProgressChecklist/SimpleChecklistItem.d.ts

@@ -1,21 +0,0 @@
-import React from 'react';
-import { TooltipProps } from '../tooltips/Tooltip';
-interface TagProps {
-    tagText: string | number;
-    variant?: 'regular' | 'circle' | 'compressed';
-    type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
-    theme?: 'light' | 'dark';
-    tooltip?: Omit<TooltipProps, 'children'>;
-}
-interface SimpleChecklistItemProps {
-    header: string;
-    subheader?: string;
-    icon?: React.ReactNode;
-    activeIcon?: React.ReactNode;
-    completedIcon?: React.ReactNode;
-    isActive?: boolean;
-    isCompleted?: boolean;
-    tag?: TagProps;
-}
-declare const SimpleChecklistItem: React.FC<SimpleChecklistItemProps>;
-export default SimpleChecklistItem;

package/dist/esm/components/ProgressChecklist/SimpleChecklistItem.js

@@ -1 +0,0 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{ActiveChecklistIcon as i}from"../../assets/icons/ActiveChecklistIcon.js";import{CompletedChecklistIcon as s}from"../../assets/icons/CompletedChecklistIcon.js";import{InactiveChecklistIcon as l}from"../../assets/icons/InactiveChecklistIcon.js";import{Tag as n}from"../tag/Tag.js";import{Tooltip as o}from"../tooltips/Tooltip.js";import{SingleChecklistMainRow as c,SingleChecklistIconWrapper as r,SingleChecklistContent as a,SingleChecklistHeader as m,SingleChecklistSubheader as p}from"./ProgressChecklist.style.js";const d=d=>{let{header:h,subheader:g,icon:v,activeIcon:j,completedIcon:f,isActive:x,isCompleted:y,tag:u}=d;return e("div",{children:t(c,{children:[e(r,{children:y?null!=f?f:e(s,{}):x?null!=j?j:e(i,{}):null!=v?v:e(l,{})}),t(a,{children:[t("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e(m,Object.assign({completed:y,isActive:x},{children:h})),(null==u?void 0:u.tagText)&&(u.tooltip?e(o,Object.assign({},u.tooltip,{children:e("span",Object.assign({style:{display:"inline-flex"}},{children:e(n,{tagText:u.tagText,variant:u.variant,type:u.type,theme:u.theme})}))})):e(n,{tagText:u.tagText,variant:u.variant,type:u.type,theme:u.theme}))]})),g&&e(p,Object.assign({isActive:x},{children:g}))]})]})})};export{d as default};

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

@@ -1,2 +0,0 @@
-export { default as ProgressChecklist } from './ProgressChecklist';
-export type { ChecklistItemType } from './ProgressChecklist';

package/dist/esm/components/post-live-checklist/PostLiveChecklist.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-export interface ChecklistItem {
-    id: string;
-    isCompleted: boolean;
-    isOpen?: boolean;
-    header: string;
-    image?: string;
-    subHeader?: string;
-}
-export interface ButtonGroupItem {
-    id: string;
-    title: string;
-    icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-}
-export interface PostLiveChecklistProps {
-    title?: string;
-    subtitle?: string;
-    marketingChecklist?: ChecklistItem[];
-    supportChecklist?: ChecklistItem[];
-    onChecklistSetup?: (itemId: string, analyticsButtonId: string) => void;
-    useCaseType?: 'marketing' | 'support' | 'both' | string;
-}
-export declare const PostLiveChecklist: React.FC<PostLiveChecklistProps>;

package/dist/esm/components/post-live-checklist/PostLiveChecklist.js

@@ -1 +0,0 @@
-import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import"../../_virtual/_tslib.js";import r from"../../assets/icons/HeadsetIcon.js";import s from"../../assets/icons/MarketingIcon.js";import{useState as o,useEffect as n}from"react";import{ButtonGroup as a}from"../buttonGroup/ButtonGroup.js";import{PostLiveChecklistItem as l}from"../post-live-checklist-item/PostLiveChecklistItem.js";import{TitleRegular as p,BodySecondary as d}from"../TypographyStyle.js";import{COLORS as m}from"../../constants/Theme.js";const c=c=>{let{title:u="Boost Performance",subtitle:g="Enable these features to make your assistant smarter",marketingChecklist:h=[],supportChecklist:b=[],onChecklistSetup:f,useCaseType:k}=c;var C;const[j,y]=o("marketing"),[v,O]=o("none"),[x,S]=o("marketing");n((()=>{const e=h.filter((e=>!e.isCompleted)).length,t=b.filter((e=>!e.isCompleted)).length;0!==e||0!==t?e>0&&t>0?O("tabs"):(O("list"),e>0&&S("marketing"),t>0&&S("support")):O("none")}),[h,b]);const T=(()=>{const e=[{id:"marketing",title:"Marketing",icon:s},{id:"support",title:"Support",icon:r}];if(!k)return e;return"support"===String(k).toLowerCase()?[e[1],e[0]]:e})();n((()=>{"tabs"===v&&T.length>0&&y(T[0].id)}),[v,k]);const B=e=>e.toUpperCase(),H=(e,t)=>{f&&f(e,t)};if("none"===v)return null;const I="tabs"===v?"marketing"===j?h:b:"marketing"===x?h:b;return e("div",Object.assign({style:{padding:16,border:`1px solid ${m.stroke.primary}`,backgroundColor:m.surface.standard,borderRadius:8}},{children:[e("div",{children:[t(p,Object.assign({color:"#4B1583"},{children:u})),t(d,Object.assign({color:(null===(C=m.content)||void 0===C?void 0:C.secondary)||"#666666"},{children:g}))]}),t("div",Object.assign({style:{marginTop:12}},{children:"tabs"===v?e(i,{children:[t(a,{size:"medium",gap:"12px",iconPosition:"left",onButtonClick:e=>y(e),activeButtonId:j,buttonGroup:T}),t("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:I.map((e=>t(l,{isCompleted:e.isCompleted,isOpen:e.isOpen,header:e.header,image:e.image,subHeader:e.subHeader,onSetup:()=>H(e.id,B(j))},e.id)))}))]}):t("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:I.map((e=>t(l,{isCompleted:e.isCompleted,isOpen:e.isOpen,header:e.header,image:e.image,subHeader:e.subHeader,onSetup:()=>H(e.id,B(x))},e.id)))}))}))]}))};export{c as PostLiveChecklist};

package/dist/esm/components/post-live-checklist/PostLiveChecklist.stories.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-declare const _default: ComponentMeta<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
-export default _default;
-export declare const Default: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
-export declare const WithBothChecklists: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
-export declare const SupportFirstOrdering: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
-export declare const ListModeSupport: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
-export declare const ListModeMarketing: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
-export declare const AllCompleted: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
-export declare const CustomTitles: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
-export declare const WithSomeCompleted: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;

package/dist/esm/components/post-live-checklist/index.d.ts

@@ -1,2 +0,0 @@
-export { PostLiveChecklist } from './PostLiveChecklist';
-export type { PostLiveChecklistProps, ChecklistItem, } from './PostLiveChecklist';

package/dist/esm/components/post-live-checklist-item/PostLiveChecklistItem.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export interface PostLiveChecklistItemProps {
-    isCompleted: boolean;
-    header: string;
-    subHeader?: string;
-    isOpen?: boolean;
-    onSetup?: () => void;
-    image?: string;
-}
-export declare const PostLiveChecklistItem: React.FC<PostLiveChecklistItemProps>;

package/dist/esm/components/post-live-checklist-item/PostLiveChecklistItem.js

@@ -1 +0,0 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{CheckIndicatorIcon as i}from"../../assets/icons/CheckIndicatorIcon.js";import s from"../../assets/icons/chevronDownOutline.svg.js";import n from"../../assets/icons/chevronUpOutline.svg.js";import{useState as r,useEffect as o}from"react";import{Button as c}from"../button/Button.js";import{TitleSmall as l,BodyCaption as d}from"../TypographyStyle.js";import{COLORS as a}from"../../constants/Theme.js";const p=p=>{const{isCompleted:m,header:f,subHeader:g,isOpen:h=!1}=p,{onSetup:u}=p,[y,b]=r(h);return o((()=>{b(h)}),[h]),e("div",Object.assign({style:{backgroundColor:y?a.surface.subdued:a.surface.standard,borderRadius:8}},{children:[e("div",Object.assign({style:{color:a.surface.standard,padding:16,display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center",cursor:m?"default":"pointer"},onClick:()=>!m&&b(!y)},{children:[t(l,Object.assign({color:y?"#4B1583":a.content.primary},{children:f})),m?t(i,{}):t(y?n:s,{width:24,height:24,color:a.content.secondary})]})),t("div",{children:y&&t("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:e("div",Object.assign({style:{padding:16,paddingTop:0,gap:16,display:"flex",flexDirection:"column"}},{children:[t("div",Object.assign({style:{height:200,backgroundColor:"#EFE6F9",borderRadius:8,overflow:"hidden"}},{children:t("img",{src:p.image,alt:"checklist item",style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})})),e("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center",gap:16}},{children:[t("div",Object.assign({style:{flex:2}},{children:t(d,Object.assign({color:a.content.secondary,numberOfLines:3},{children:g}))})),t("div",Object.assign({style:{flex:1,display:"flex",justifyContent:"flex-end"}},{children:t(c,{buttonType:"primary",size:"small",buttonText:"Setup",onClick:()=>{u&&u()}})}))]}))]}))}))})]}))};export{p as PostLiveChecklistItem};

package/dist/esm/components/post-live-checklist-item/index.d.ts

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

package/dist/esm/components/vertical-full-screen-modal/component.d.ts

@@ -1,24 +0,0 @@
-import React from 'react';
-import { VerticalFullScreenModalProps } from './types';
-/**
- * VerticalFullScreenModal - A reusable full-screen modal component
- *
- * This component provides a common full-screen modal structure with:
- * - Fixed height (100vh)
- * - Header section with close button
- * - Scrollable body content
- * - Dynamic footer with configurable buttons
- *
- * @example
- * <VerticalFullScreenModal
- *   headerText="My Modal"
- *   body={<div>Modal content here</div>}
- *   primaryButtonTitle="Save"
- *   onSave={handleSave}
- *   secondaryButtonTitle="Cancel"
- *   secondaryButtonClick={handleCancel}
- *   onClose={handleClose}
- * />
- */
-declare const VerticalFullScreenModal: React.FC<VerticalFullScreenModalProps>;
-export default VerticalFullScreenModal;

package/dist/esm/components/vertical-full-screen-modal/component.js

@@ -1 +0,0 @@
-import{jsx as t,jsxs as o}from"react/jsx-runtime";import n from"../../assets/icons/cross.svg.js";import{Button as e}from"../button/Button.js";import{IconButton as i}from"../icon-button/IconButton.js";import{TitleRegular as r}from"../TypographyStyle.js";import{VerticalModalContainer as s,VerticalModalHeader as a,VerticalModalContent as c,VerticalModalFooter as l}from"./styles.js";const d=d=>{let{headerText:m,body:p,primaryButtonTitle:u,onSave:y,secondaryButtonTitle:h="Cancel",secondaryButtonClick:b,hideSecondaryButton:f=!1,disablePrimaryButton:g=!1,onClose:j,width:x,className:B,modalOffsetPx:C}=d;const T=b||j;return t("div",Object.assign({style:{position:"fixed",top:0,right:C?`${C}px`:"-424px",bottom:0}},{children:o(s,Object.assign({onClick:t=>t.stopPropagation(),onMouseDown:t=>t.stopPropagation(),width:x,className:B},{children:[o(a,{children:[t(r,{children:m}),t(i,{Icon:n,onClick:j})]}),t(c,{children:p}),o(l,Object.assign({addGap:!f},{children:[!f&&t(e,{buttonText:h,buttonType:"tertiaryGray",onClick:T}),t(e,{style:{marginRight:12},buttonText:u,onClick:y,disabled:g})]}))]}))}))};export{d as default};

package/dist/esm/components/vertical-full-screen-modal/index.d.ts

@@ -1,2 +0,0 @@
-export { default as VerticalFullScreenModal } from './component';
-export * from './types';

package/dist/esm/components/vertical-full-screen-modal/styles.d.ts

@@ -1,8 +0,0 @@
-export declare const VerticalModalContainer: import("styled-components").StyledComponent<"div", any, {
-    width?: string | undefined;
-}, never>;
-export declare const VerticalModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const VerticalModalContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const VerticalModalFooter: import("styled-components").StyledComponent<"div", any, {
-    addGap?: boolean | undefined;
-}, never>;

package/dist/esm/components/vertical-full-screen-modal/styles.js

@@ -1,45 +0,0 @@
-import e from"styled-components";import{COLORS as o}from"../../constants/Theme.js";const r=e.div`
-	background-color: ${o.surface.standard};
-	border-radius: 0px;
-	padding: 0;
-	width: ${e=>e.width||"424px"};
-	height: 100vh;
-	display: flex;
-	flex-direction: column;
-	border-left: 1px solid ${o.stroke.primary};
-`,d=e.div`
-	padding: 16px 24px;
-	border-bottom: 1px solid ${o.stroke.primary};
-	background-color: ${o.surface.subdued};
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	flex-shrink: 0;
-	height: 60px;
-`,i=e.div`
-	padding: 16px;
-	background-color: ${o.surface.standard};
-	flex: 1;
-	overflow-x: hidden;
-	overflow-y: auto;
-	display: flex;
-	flex-direction: column;
-	scrollbar-width: none;
-	-ms-overflow-style: none;
-
-	&::-webkit-scrollbar {
-		display: none;
-	}
-`,t=e.div`
-	display: flex;
-	flex-direction: row;
-	gap: 16px;
-	justify-content: flex-end;
-	background: ${o.surface.standard};
-	height: 56px;
-	border-top: 1px solid #${o.stroke.primary};
-	align-items: center;
-	padding: 0 24px;
-	flex-shrink: 0;
-	gap: ${e=>e.addGap?"16px":"0px"};
-`;export{r as VerticalModalContainer,i as VerticalModalContent,t as VerticalModalFooter,d as VerticalModalHeader};

package/dist/esm/components/vertical-full-screen-modal/types.d.ts

@@ -1,27 +0,0 @@
-/// <reference types="react" />
-export interface VerticalFullScreenModalProps {
-    /** Content text to display in the modal header */
-    headerText: string;
-    /** Content to display in the modal body */
-    body: React.ReactNode;
-    /** Title for the primary action button */
-    primaryButtonTitle: string;
-    /** Callback when primary button is clicked */
-    onSave: () => void;
-    /** Optional title for the secondary button */
-    secondaryButtonTitle?: string;
-    /** Optional callback when secondary button is clicked */
-    secondaryButtonClick?: () => void;
-    /** Hide the secondary button if true */
-    hideSecondaryButton?: boolean;
-    /** Disable the primary button */
-    disablePrimaryButton?: boolean;
-    /** Callback when modal is closed */
-    onClose: () => void;
-    /** Optional custom width (default: 424px) */
-    width?: string;
-    /** Optional className for custom styling */
-    className?: string;
-    /** Optional offset for modal positioning */
-    modalOffsetPx?: number;
-}