beem-component 2.1.9 → 2.1.11

package/dist/components/BmCustomCardTitle/CustomCardTitle.js

@@ -147,6 +147,9 @@ const Description = _styledComponents.default.p.withConfig({
   } = _ref20;
   return variant === 'confirmation' ? '0.875rem' : '1rem';
 });
+const ImageWrapper = _styledComponents.default.div.withConfig({
+  displayName: "CustomCardTitle__ImageWrapper"
+})(["width:100%;aspect-ratio:1 / 1;overflow:hidden;border-radius:0.75rem;margin-top:1rem;img{width:100%;height:100%;object-fit:cover;display:block;}"]);
 const BmCustomCardTitle = _ref21 => {
   let {
     icon: Icon,
@@ -154,7 +157,8 @@ const BmCustomCardTitle = _ref21 => {
     title,
     description,
     variant = 'booking',
-    withStripe = false
+    withStripe = false,
+    imageSrc
   } = _ref21;
   const content = /*#__PURE__*/_react.default.createElement(CardContainer, {
     variant: variant
@@ -165,7 +169,10 @@ const BmCustomCardTitle = _ref21 => {
     variant: variant
   }, title), description && /*#__PURE__*/_react.default.createElement(Description, {
     variant: variant
-  }, description));
+  }, description), imageSrc && /*#__PURE__*/_react.default.createElement(ImageWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
+    src: imageSrc,
+    alt: title || 'Card image'
+  })));
   return withStripe ? /*#__PURE__*/_react.default.createElement(BackgroundStripe, {
     themeColor: themeColor,
     variant: variant

package/dist/components/BmCustomCardTitle/CustomCardTitle.stories.js

@@ -20,6 +20,7 @@ const iconOptions = {
   Clock: _AccessTime.default,
   Heart: _Favorite.default
 };
+const imgs = 'https://i.imgur.com/HiAzUHl.jpeg';
 const Template = args => {
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -35,7 +36,8 @@ Default.args = {
   title: 'Book Your Medical Appointment',
   description: 'Schedule a 30-minute consultation with our healthcare specialists',
   variant: 'booking',
-  withStripe: true
+  withStripe: true,
+  imageSrc: imgs
 };
 Default.argTypes = {
   icon: {
@@ -65,6 +67,10 @@ Default.argTypes = {
     control: {
       type: 'boolean'
     }
+  },
+  imageSrc: {
+    control: 'text',
+    description: 'URL of the image to display in the card'
   }
 };
 var _default = exports.default = {
@@ -73,13 +79,14 @@ var _default = exports.default = {
   argTypes: Default.argTypes
 };
 const Example = () => {
-  /*#__PURE__*/_react.default.createElement(_CustomCardTitle.default, {
+  return /*#__PURE__*/_react.default.createElement(_CustomCardTitle.default, {
     icon: _CalendarTodayOutlined.default,
     themeColor: "#33B1BA",
     title: "Book Your Medical Appointment",
     description: "Schedule a 30-minute consultation with our healthcare specialists",
     variant: "booking",
-    withStripe: true
+    withStripe: true,
+    imageSrc: imgs
   });
 };
 exports.Example = Example;

package/dist/components/BmTabv2/BmTabV2..js

@@ -0,0 +1,72 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabPanel = TabPanel;
+exports.Tabs = Tabs;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Utility
+const cn = function () {
+  for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
+    classes[_key] = arguments[_key];
+  }
+  return classes.filter(Boolean).join(' ');
+};
+
+// Styled components
+
+const TabsContainer = _styledComponents.default.div.withConfig({
+  displayName: "BmTabV2__TabsContainer"
+})(["display:flex;flex-direction:column;gap:0.5rem;@media (max-width:640px){gap:0.25rem;}"]);
+const TabsList = _styledComponents.default.div.withConfig({
+  displayName: "BmTabV2__TabsList"
+})(["display:flex;flex-wrap:nowrap;background:#f5f5f5;overflow-x:auto;padding:3px;border-radius:8px;&::-webkit-scrollbar{display:none;}"]);
+const TabButton = _styledComponents.default.button.withConfig({
+  displayName: "BmTabV2__TabButton"
+})(["flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0.5rem 0.75rem;font-size:0.875rem;font-weight:500;white-space:nowrap;border:1px solid transparent;border-radius:8px;background:transparent;color:#333;cursor:pointer;transition:all 0.2s;", " &:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;}&:disabled{pointer-events:none;opacity:0.5;}svg{flex-shrink:0;pointer-events:none;width:1rem;height:1rem;}"], _ref => {
+  let {
+    active
+  } = _ref;
+  return active && (0, _styledComponents.css)(["background:#ffffff;color:#111111;border-color:#ddd;"]);
+});
+const TabContent = _styledComponents.default.div.withConfig({
+  displayName: "BmTabV2__TabContent"
+})(["flex:1;padding:0.5rem 0;"]);
+
+// Main Tabs component
+
+// eslint-disable-next-line func-style
+function Tabs(_ref2) {
+  let {
+    defaultValue = 0,
+    children,
+    className
+  } = _ref2;
+  const [activeIndex, setActiveIndex] = (0, _react.useState)(defaultValue);
+
+  // Get all children that are type of TabPanel (so we can match titles & content)
+  const tabPanels = _react.default.Children.toArray(children).filter(child => child.type.displayName === 'TabPanel');
+  return /*#__PURE__*/_react.default.createElement(TabsContainer, {
+    className: cn(className)
+  }, /*#__PURE__*/_react.default.createElement(TabsList, null, tabPanels.map((panel, index) => /*#__PURE__*/_react.default.createElement(TabButton
+  // eslint-disable-next-line react/no-array-index-key
+  , {
+    key: index,
+    active: activeIndex === index,
+    onClick: () => setActiveIndex(index)
+  }, panel.props.title))), /*#__PURE__*/_react.default.createElement(TabContent, null, tabPanels[activeIndex] && tabPanels[activeIndex].props.children));
+}
+
+// Individual Tab panel component
+// eslint-disable-next-line func-style
+function TabPanel(_ref3) {
+  let {
+    children
+  } = _ref3;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+}
+TabPanel.displayName = 'TabPanel';

package/dist/components/DepartmentCard/DepartmentCard.js

@@ -92,7 +92,7 @@ const BmDepartmentCard = _ref6 => {
     onClick: onDelete
   }, DeleteIcon && /*#__PURE__*/_react.default.createElement(DeleteIcon, {
     fontSize: "small"
-  })))), /*#__PURE__*/_react.default.createElement(CardDescription, null, description)), /*#__PURE__*/_react.default.createElement(Content, null, resourcesCount && /*#__PURE__*/_react.default.createElement(ResourceText, null, resourcesCount, " Resources"), /*#__PURE__*/_react.default.createElement(StatusRow, null, /*#__PURE__*/_react.default.createElement(StatusDot, {
+  })))), /*#__PURE__*/_react.default.createElement(CardDescription, null, description)), /*#__PURE__*/_react.default.createElement(Content, null, /*#__PURE__*/_react.default.createElement(ResourceText, null, resourcesCount, " Resources"), /*#__PURE__*/_react.default.createElement(StatusRow, null, /*#__PURE__*/_react.default.createElement(StatusDot, {
     isActive: isActive
   }), /*#__PURE__*/_react.default.createElement(StatusText, null, isActive ? 'Active' : 'Inactive'))));
 };

package/dist/components/ResourceCard/ResourceCard.js

@@ -63,19 +63,19 @@ const IconButton = _styledComponents.default.button.withConfig({
 });
 const Content = _styledComponents.default.div.withConfig({
   displayName: "ResourceCard__Content"
-})(["padding:0 1rem 0.5rem 1rem;display:flex;flex-direction:column;gap:0.5rem;font-size:0.875rem;"]);
+})(["margin-top:1rem;padding:0 1rem 0.5rem 1rem;display:flex;flex-direction:column;gap:0.5rem;font-size:0.875rem;"]);
 const InfoRow = _styledComponents.default.div.withConfig({
   displayName: "ResourceCard__InfoRow"
 })(["display:flex;flex-wrap:wrap;gap:0.25rem;"]);
 const Label = _styledComponents.default.span.withConfig({
   displayName: "ResourceCard__Label"
-})(["color:#6b7280;"]);
+})(["color:#6b7280;font-size:0.875rem;"]);
 const Value = _styledComponents.default.span.withConfig({
   displayName: "ResourceCard__Value"
-})(["color:#374151;"]);
+})(["color:#374151;font-size:0.875rem;"]);
 const Footer = _styledComponents.default.div.withConfig({
   displayName: "ResourceCard__Footer"
-})(["display:flex;justify-content:flex-end;align-items:center;padding:0 1rem 0.75rem 1rem;"]);
+})(["display:flex;justify-content:flex-end;align-items:center;margin-top:1rem;padding:0 1rem 0.75rem 1rem;"]);
 const StatusDot = _styledComponents.default.span.withConfig({
   displayName: "ResourceCard__StatusDot"
 })(["flex-shrink:0;width:0.5rem;height:0.5rem;margin-right:0.5rem;border-radius:9999px;background-color:", ";"], _ref6 => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beem-component",
-  "version": "2.1.9",
+  "version": "2.1.11",
   "private": false,
   "main": "dist/components/index.js",
   "scripts": {

package/src/App.js

@@ -43,6 +43,7 @@ import {
   BmResourceCard,
 } from './lib/components';
 import AlertBox from './lib/components/Alert/Alert';
+import { TabPanel, Tabs } from './lib/components/BmTabv2/BmTabV2.';
 // import ProgressIndicator from './lib/components/newProgress';
 
 // const datsa = JSON.stringify({
@@ -1012,10 +1013,22 @@ const Chat = () => {
 
   const [selectedSlotId, setSelectedSlotId] = useState(null);
   console.log({ selectedSlotId });
+  const imgs = 'https://i.imgur.com/HiAzUHl.jpeg';
   return (
     <>
       <GlobalStyle />
       <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+        <Tabs defaultValue={0}>
+          <TabPanel title="Overview">
+            <p>This is the Overview content.</p>
+          </TabPanel>
+          <TabPanel title="Details">
+            <p>This is the Details content.</p>
+          </TabPanel>
+          <TabPanel title="Settings">
+            <p>This is the Settings content.</p>
+          </TabPanel>
+        </Tabs>
         <div style={{ width: '100%', maxWidth: '900px', margin: '2rem auto' }}>
           <div style={{ maxWidth: 400, margin: '2rem auto' }}>
             <BmDepartmentCard
@@ -1023,7 +1036,7 @@ const Chat = () => {
               isActive="true"
               name="Radiology Department"
               description="Handles imaging and diagnostic scans"
-              // resourcesCount={8}
+              resourcesCount={0}
               onEdit={() => alert('Edit department')}
               onDelete={() => alert('Delete department')}
               EditIcon={EditIcon}
@@ -1086,6 +1099,7 @@ const Chat = () => {
             description="Schedule a 30-minute consultation with our healThcare specialists"
             variant="booking"
             withStripe
+            imageSrc={imgs}
           />
         </div>
         <div>

package/src/lib/components/BmCustomCardTitle/CustomCardTitle.js

@@ -110,6 +110,20 @@ const Description = styled.p`
   }
 `;
 
+const ImageWrapper = styled.div`
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  margin-top: 1rem;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+`;
 const BmCustomCardTitle = ({
   icon: Icon,
   themeColor = '#33B1BA',
@@ -117,6 +131,7 @@ const BmCustomCardTitle = ({
   description,
   variant = 'booking',
   withStripe = false,
+  imageSrc,
 }) => {
   const content = (
     <CardContainer variant={variant}>
@@ -127,6 +142,11 @@ const BmCustomCardTitle = ({
       {description && (
         <Description variant={variant}>{description}</Description>
       )}
+      {imageSrc && (
+        <ImageWrapper>
+          <img src={imageSrc} alt={title || 'Card image'} />
+        </ImageWrapper>
+      )}
     </CardContainer>
   );
 

package/src/lib/components/BmCustomCardTitle/CustomCardTitle.stories.jsx

@@ -15,6 +15,7 @@ const iconOptions = {
   Heart: FavoriteIcon,
 };
 
+const imgs = 'https://i.imgur.com/HiAzUHl.jpeg';
 const Template = (args) => {
   return (
     <div style={{ maxWidth: 500, margin: '2rem auto' }}>
@@ -32,6 +33,7 @@ Default.args = {
     'Schedule a 30-minute consultation with our healthcare specialists',
   variant: 'booking',
   withStripe: true,
+  imageSrc: imgs,
 };
 
 Default.argTypes = {
@@ -63,6 +65,10 @@ Default.argTypes = {
       type: 'boolean',
     },
   },
+  imageSrc: {
+    control: 'text',
+    description: 'URL of the image to display in the card',
+  },
 };
 
 export default {
@@ -72,12 +78,15 @@ export default {
 };
 
 export const Example = () => {
-  <BmCustomCardTitle
-    icon={CalendarTodayOutlinedIcon}
-    themeColor="#33B1BA"
-    title="Book Your Medical Appointment"
-    description="Schedule a 30-minute consultation with our healthcare specialists"
-    variant="booking"
-    withStripe
-  />;
+  return (
+    <BmCustomCardTitle
+      icon={CalendarTodayOutlinedIcon}
+      themeColor="#33B1BA"
+      title="Book Your Medical Appointment"
+      description="Schedule a 30-minute consultation with our healthcare specialists"
+      variant="booking"
+      withStripe
+      imageSrc={imgs}
+    />
+  );
 };

package/src/lib/components/BmTabv2/BmTabV2..js

@@ -0,0 +1,122 @@
+'use client';
+
+import React, { useState } from 'react';
+import styled, { css } from 'styled-components';
+
+// Utility
+const cn = (...classes) => classes.filter(Boolean).join(' ');
+
+// Styled components
+
+const TabsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  @media (max-width: 640px) {
+    gap: 0.25rem;
+  }
+`;
+
+const TabsList = styled.div`
+  display: flex;
+  flex-wrap: nowrap;
+  background: #f5f5f5;
+  overflow-x: auto;
+  padding: 3px;
+  border-radius: 8px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const TabButton = styled.button`
+  flex: 1 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: #333;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  ${({ active }) =>
+    active &&
+    css`
+      background: #ffffff;
+      color: #111111;
+      border-color: #ddd;
+    `}
+
+  &:focus-visible {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  svg {
+    flex-shrink: 0;
+    pointer-events: none;
+    width: 1rem;
+    height: 1rem;
+  }
+`;
+
+const TabContent = styled.div`
+  flex: 1;
+  padding: 0.5rem 0;
+`;
+
+// Main Tabs component
+
+// eslint-disable-next-line func-style
+function Tabs({ defaultValue = 0, children, className }) {
+  const [activeIndex, setActiveIndex] = useState(defaultValue);
+
+  // Get all children that are type of TabPanel (so we can match titles & content)
+  const tabPanels = React.Children.toArray(children).filter(
+    (child) => child.type.displayName === 'TabPanel'
+  );
+
+  return (
+    <TabsContainer className={cn(className)}>
+      <TabsList>
+        {tabPanels.map((panel, index) => (
+          <TabButton
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            active={activeIndex === index}
+            onClick={() => setActiveIndex(index)}
+          >
+            {panel.props.title}
+          </TabButton>
+        ))}
+      </TabsList>
+      <TabContent>
+        {tabPanels[activeIndex] && tabPanels[activeIndex].props.children}
+      </TabContent>
+    </TabsContainer>
+  );
+}
+
+// Individual Tab panel component
+// eslint-disable-next-line func-style
+function TabPanel({ children }) {
+  return <>{children}</>;
+}
+
+TabPanel.displayName = 'TabPanel';
+
+export { Tabs, TabPanel };

package/src/lib/components/DepartmentCard/DepartmentCard.js

@@ -116,9 +116,8 @@ const BmDepartmentCard = ({
         <CardDescription>{description}</CardDescription>
       </Header>
       <Content>
-        {resourcesCount && (
-          <ResourceText>{resourcesCount} Resources</ResourceText>
-        )}
+        <ResourceText>{resourcesCount} Resources</ResourceText>
+
         <StatusRow>
           <StatusDot isActive={isActive} />
           <StatusText>{isActive ? 'Active' : 'Inactive'}</StatusText>

package/src/lib/components/ResourceCard/ResourceCard.js

@@ -73,6 +73,7 @@ const IconButton = styled.button`
 `;
 
 const Content = styled.div`
+  margin-top: 1rem;
   padding: 0 1rem 0.5rem 1rem;
   display: flex;
   flex-direction: column;
@@ -88,16 +89,19 @@ const InfoRow = styled.div`
 
 const Label = styled.span`
   color: #6b7280;
+  font-size: 0.875rem;
 `;
 
 const Value = styled.span`
   color: #374151;
+  font-size: 0.875rem;
 `;
 
 const Footer = styled.div`
   display: flex;
   justify-content: flex-end;
   align-items: center;
+  margin-top: 1rem;
   padding: 0 1rem 0.75rem 1rem;
 `;