beem-component 2.1.8 → 2.1.10

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

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CardWrapper = _styledComponents.default.div.withConfig({
+  displayName: "DepartmentCard__CardWrapper"
+})(["overflow:hidden;border-radius:0.5rem;border:1px solid #e5e7eb;border-top:4px solid ", ";background-color:#ffffff;opacity:", ";transition:opacity 0.3s;"], _ref => {
+  let {
+    borderTopColor
+  } = _ref;
+  return borderTopColor || '#cccccc';
+}, _ref2 => {
+  let {
+    isActive
+  } = _ref2;
+  return isActive ? 1 : 0.5;
+});
+const Header = _styledComponents.default.div.withConfig({
+  displayName: "DepartmentCard__Header"
+})(["padding:1rem 1rem 0.5rem 1rem;"]);
+const TitleRow = _styledComponents.default.div.withConfig({
+  displayName: "DepartmentCard__TitleRow"
+})(["display:flex;justify-content:space-between;align-items:flex-start;"]);
+const CardTitle = _styledComponents.default.h3.withConfig({
+  displayName: "DepartmentCard__CardTitle"
+})(["font-size:1.125rem;margin:0;"]);
+const CardDescription = _styledComponents.default.p.withConfig({
+  displayName: "DepartmentCard__CardDescription"
+})(["font-size:0.875rem;color:#6b7280;margin-top:0.25rem;"]);
+const Content = _styledComponents.default.div.withConfig({
+  displayName: "DepartmentCard__Content"
+})(["margin-top:1rem;padding:0 1rem 0.5rem 1rem;display:flex;justify-content:space-between;align-items:center;"]);
+const ResourceText = _styledComponents.default.span.withConfig({
+  displayName: "DepartmentCard__ResourceText"
+})(["font-size:0.875rem;color:#6b7280;"]);
+const StatusRow = _styledComponents.default.div.withConfig({
+  displayName: "DepartmentCard__StatusRow"
+})(["display:flex;align-items:center;"]);
+const StatusDot = _styledComponents.default.span.withConfig({
+  displayName: "DepartmentCard__StatusDot"
+})(["flex-shrink:0;width:0.5rem;height:0.5rem;margin-right:0.5rem;border-radius:9999px;background-color:", ";"], _ref3 => {
+  let {
+    isActive
+  } = _ref3;
+  return isActive ? '#22c55e' : '#9ca3af';
+});
+const StatusText = _styledComponents.default.span.withConfig({
+  displayName: "DepartmentCard__StatusText"
+})(["font-size:0.75rem;color:#6b7280;"]);
+const IconButtonsContainer = _styledComponents.default.div.withConfig({
+  displayName: "DepartmentCard__IconButtonsContainer"
+})(["display:flex;gap:0.25rem;"]);
+const IconButton = _styledComponents.default.button.withConfig({
+  displayName: "DepartmentCard__IconButton"
+})(["background:none;border:none;padding:0;height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;color:", ";&:hover{color:", ";}"], _ref4 => {
+  let {
+    destructive
+  } = _ref4;
+  return destructive ? '#ef4444' : 'inherit';
+}, _ref5 => {
+  let {
+    destructive
+  } = _ref5;
+  return destructive ? '#ef4444' : '#374151';
+});
+const BmDepartmentCard = _ref6 => {
+  let {
+    borderTopColor = '#cccccc',
+    isActive = true,
+    name,
+    description,
+    resourcesCount,
+    onEdit,
+    onDelete,
+    EditIcon,
+    DeleteIcon
+  } = _ref6;
+  return /*#__PURE__*/_react.default.createElement(CardWrapper, {
+    borderTopColor: borderTopColor,
+    isActive: isActive
+  }, /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(TitleRow, null, /*#__PURE__*/_react.default.createElement(CardTitle, null, name), /*#__PURE__*/_react.default.createElement(IconButtonsContainer, null, /*#__PURE__*/_react.default.createElement(IconButton, {
+    onClick: onEdit
+  }, EditIcon && /*#__PURE__*/_react.default.createElement(EditIcon, {
+    fontSize: "small"
+  })), /*#__PURE__*/_react.default.createElement(IconButton, {
+    destructive: true,
+    onClick: onDelete
+  }, DeleteIcon && /*#__PURE__*/_react.default.createElement(DeleteIcon, {
+    fontSize: "small"
+  })))), /*#__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'))));
+};
+var _default = exports.default = BmDepartmentCard;

package/dist/components/DepartmentCard/DepartmentCard.stories.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Inactive = exports.Active = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+var _DepartmentCard = _interopRequireDefault(require("./DepartmentCard"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _default = exports.default = {
+  title: 'Components/BmDepartmentCard',
+  component: _DepartmentCard.default,
+  argTypes: {
+    borderTopColor: {
+      control: 'color'
+    },
+    isActive: {
+      control: 'boolean'
+    },
+    name: {
+      control: 'text'
+    },
+    description: {
+      control: 'text'
+    },
+    resourcesCount: {
+      control: 'number'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_DepartmentCard.default, _extends({}, args, {
+  EditIcon: _Edit.default,
+  DeleteIcon: _Delete.default
+}));
+const Active = exports.Active = Template.bind({});
+Active.args = {
+  borderTopColor: '#3b82f6',
+  isActive: true,
+  name: 'Radiology',
+  description: 'Handles imaging and scans for diagnosis',
+  resourcesCount: 5
+};
+const Inactive = exports.Inactive = Template.bind({});
+Inactive.args = {
+  borderTopColor: '#ef4444',
+  isActive: false,
+  name: 'Cardiology',
+  description: 'Provides heart-related care and surgeries',
+  resourcesCount: 3
+};

package/dist/components/ResourceCard/ResourceCard.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable react/no-array-index-key */
+
+const CardWrapper = _styledComponents.default.div.withConfig({
+  displayName: "ResourceCard__CardWrapper"
+})(["overflow:hidden;border:1px solid #e5e7eb;border-radius:0.5rem;border-top:4px solid ", ";background-color:#ffffff;opacity:", ";transition:opacity 0.3s;"], _ref => {
+  let {
+    borderTopColor
+  } = _ref;
+  return borderTopColor || '#cccccc';
+}, _ref2 => {
+  let {
+    isActive
+  } = _ref2;
+  return isActive ? 1 : 0.5;
+});
+const Header = _styledComponents.default.div.withConfig({
+  displayName: "ResourceCard__Header"
+})(["padding:1rem 1rem 0.5rem 1rem;"]);
+const TitleRow = _styledComponents.default.div.withConfig({
+  displayName: "ResourceCard__TitleRow"
+})(["display:flex;justify-content:space-between;align-items:flex-start;"]);
+const TitleContainer = _styledComponents.default.div.withConfig({
+  displayName: "ResourceCard__TitleContainer"
+})(["display:flex;flex-direction:column;"]);
+const CardTitle = _styledComponents.default.h3.withConfig({
+  displayName: "ResourceCard__CardTitle"
+})(["font-size:1.125rem;margin:0;"]);
+const BadgeRow = _styledComponents.default.div.withConfig({
+  displayName: "ResourceCard__BadgeRow"
+})(["display:flex;gap:0.5rem;margin-top:0.25rem;flex-wrap:wrap;"]);
+const Badge = _styledComponents.default.span.withConfig({
+  displayName: "ResourceCard__Badge"
+})(["display:inline-flex;align-items:center;border:1px solid #e5e7eb;border-radius:0.375rem;padding:0.125rem 0.5rem;font-size:0.75rem;background-color:#f9fafb;color:", ";"], _ref3 => {
+  let {
+    color
+  } = _ref3;
+  return color || 'inherit';
+});
+const IconsContainer = _styledComponents.default.div.withConfig({
+  displayName: "ResourceCard__IconsContainer"
+})(["display:flex;gap:0.25rem;"]);
+const IconButton = _styledComponents.default.button.withConfig({
+  displayName: "ResourceCard__IconButton"
+})(["background:none;border:none;padding:0;height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;color:", ";&:hover{color:", ";}"], _ref4 => {
+  let {
+    destructive
+  } = _ref4;
+  return destructive ? '#ef4444' : 'inherit';
+}, _ref5 => {
+  let {
+    destructive
+  } = _ref5;
+  return destructive ? '#ef4444' : '#374151';
+});
+const Content = _styledComponents.default.div.withConfig({
+  displayName: "ResourceCard__Content"
+})(["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;font-size:0.875rem;"]);
+const Value = _styledComponents.default.span.withConfig({
+  displayName: "ResourceCard__Value"
+})(["color:#374151;font-size:0.875rem;"]);
+const Footer = _styledComponents.default.div.withConfig({
+  displayName: "ResourceCard__Footer"
+})(["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 => {
+  let {
+    isActive
+  } = _ref6;
+  return isActive ? '#22c55e' : '#9ca3af';
+});
+const StatusText = _styledComponents.default.span.withConfig({
+  displayName: "ResourceCard__StatusText"
+})(["font-size:0.75rem;color:#6b7280;"]);
+const BmResourceCard = _ref7 => {
+  let {
+    borderTopColor = '#cccccc',
+    isActive = true,
+    name,
+    type,
+    resourceBadges = [],
+    departmentName,
+    email,
+    phone,
+    capacity,
+    features,
+    availability,
+    onEdit,
+    onDelete,
+    EditIcon,
+    DeleteIcon
+  } = _ref7;
+  return /*#__PURE__*/_react.default.createElement(CardWrapper, {
+    borderTopColor: borderTopColor,
+    isActive: isActive
+  }, /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(TitleRow, null, /*#__PURE__*/_react.default.createElement(TitleContainer, null, /*#__PURE__*/_react.default.createElement(CardTitle, null, name), /*#__PURE__*/_react.default.createElement(BadgeRow, null, /*#__PURE__*/_react.default.createElement(Badge, null, type), resourceBadges.map((badge, index) => /*#__PURE__*/_react.default.createElement(Badge, {
+    key: index,
+    color: badge.color
+  }, badge.icon && /*#__PURE__*/_react.default.createElement(badge.icon, {
+    style: {
+      fontSize: 14,
+      marginRight: 4
+    }
+  }), badge.label)))), /*#__PURE__*/_react.default.createElement(IconsContainer, null, /*#__PURE__*/_react.default.createElement(IconButton, {
+    onClick: onEdit
+  }, EditIcon && /*#__PURE__*/_react.default.createElement(EditIcon, {
+    fontSize: "small"
+  })), /*#__PURE__*/_react.default.createElement(IconButton, {
+    destructive: true,
+    onClick: onDelete
+  }, DeleteIcon && /*#__PURE__*/_react.default.createElement(DeleteIcon, {
+    fontSize: "small"
+  }))))), /*#__PURE__*/_react.default.createElement(Content, null, departmentName && /*#__PURE__*/_react.default.createElement(InfoRow, null, /*#__PURE__*/_react.default.createElement(Label, null, "Department:"), /*#__PURE__*/_react.default.createElement(Value, null, departmentName)), type === 'staff' && email && /*#__PURE__*/_react.default.createElement(InfoRow, null, /*#__PURE__*/_react.default.createElement(Label, null, "Email:"), /*#__PURE__*/_react.default.createElement(Value, null, email)), type === 'staff' && phone && /*#__PURE__*/_react.default.createElement(InfoRow, null, /*#__PURE__*/_react.default.createElement(Label, null, "Phone:"), /*#__PURE__*/_react.default.createElement(Value, null, phone)), type === 'room' && capacity && /*#__PURE__*/_react.default.createElement(InfoRow, null, /*#__PURE__*/_react.default.createElement(Label, null, "Capacity:"), /*#__PURE__*/_react.default.createElement(Value, null, capacity)), type === 'room' && features && features.length > 0 && /*#__PURE__*/_react.default.createElement(InfoRow, null, /*#__PURE__*/_react.default.createElement(Label, null, "Features:"), /*#__PURE__*/_react.default.createElement(Value, null, features.join(', '))), availability && /*#__PURE__*/_react.default.createElement(InfoRow, null, /*#__PURE__*/_react.default.createElement(Label, null, "Availability:"), /*#__PURE__*/_react.default.createElement(Value, null, availability))), /*#__PURE__*/_react.default.createElement(Footer, null, /*#__PURE__*/_react.default.createElement(StatusDot, {
+    isActive: isActive
+  }), /*#__PURE__*/_react.default.createElement(StatusText, null, isActive ? 'Active' : 'Inactive')));
+};
+var _default = exports.default = BmResourceCard;

package/dist/components/ResourceCard/ResourceCard.stories.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StaffExample = exports.RoomExample = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+var _CalendarToday = _interopRequireDefault(require("@mui/icons-material/CalendarToday"));
+var _ResourceCard = _interopRequireDefault(require("./ResourceCard"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _default = exports.default = {
+  title: 'Components/BmResourceCard',
+  component: _ResourceCard.default,
+  argTypes: {
+    borderTopColor: {
+      control: 'color'
+    },
+    isActive: {
+      control: 'boolean'
+    },
+    name: {
+      control: 'text'
+    },
+    type: {
+      control: 'text'
+    },
+    departmentName: {
+      control: 'text'
+    },
+    email: {
+      control: 'text'
+    },
+    phone: {
+      control: 'text'
+    },
+    capacity: {
+      control: 'number'
+    },
+    availability: {
+      control: 'text'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_ResourceCard.default, _extends({}, args, {
+  EditIcon: _Edit.default,
+  DeleteIcon: _Delete.default
+}));
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  borderTopColor: '#3b82f6',
+  isActive: true,
+  name: 'Room 101',
+  type: 'room',
+  resourceBadges: [{
+    label: 'Synced',
+    icon: _CalendarToday.default,
+    color: '#10b981'
+  }],
+  departmentName: 'Radiology',
+  capacity: 12,
+  features: ['Projector', 'Whiteboard'],
+  availability: 'Weekdays 9am - 5pm'
+};
+const StaffExample = exports.StaffExample = Template.bind({});
+StaffExample.args = {
+  borderTopColor: '#10b981',
+  isActive: true,
+  name: 'Dr. Sarah Johnson',
+  type: 'staff',
+  resourceBadges: [{
+    label: 'Google Synced',
+    icon: _CalendarToday.default,
+    color: '#3b82f6'
+  }],
+  departmentName: 'Cardiology',
+  email: 'sarah.johnson@hospital.com',
+  phone: '+1 555 123 4567',
+  availability: 'Mon - Fri, 9am - 3pm'
+};
+const RoomExample = exports.RoomExample = Template.bind({});
+RoomExample.args = {
+  borderTopColor: '#f59e0b',
+  isActive: false,
+  name: 'Conference Room B',
+  type: 'room',
+  resourceBadges: [],
+  departmentName: 'Oncology',
+  capacity: 20,
+  features: ['Video Conferencing', 'AC', 'Whiteboard'],
+  availability: 'Available on demand'
+};

package/dist/components/index.js

@@ -178,6 +178,12 @@ Object.defineProperty(exports, "BmCustomCardTitle", {
     return _CustomCardTitle.default;
   }
 });
+Object.defineProperty(exports, "BmDepartmentCard", {
+  enumerable: true,
+  get: function () {
+    return _DepartmentCard.default;
+  }
+});
 Object.defineProperty(exports, "BmEmojiIcon", {
   enumerable: true,
   get: function () {
@@ -310,6 +316,12 @@ Object.defineProperty(exports, "BmQuickReplyIcon", {
     return _iconStyles.BmQuickReplyIcon;
   }
 });
+Object.defineProperty(exports, "BmResourceCard", {
+  enumerable: true,
+  get: function () {
+    return _ResourceCard.default;
+  }
+});
 Object.defineProperty(exports, "BmRouteLink", {
   enumerable: true,
   get: function () {
@@ -479,5 +491,7 @@ var _InfoPanel = _interopRequireDefault(require("./InfoPanel/InfoPanel"));
 var _BmSelector = _interopRequireDefault(require("./BmSelector/BmSelector"));
 var _CustomCardTitle = _interopRequireDefault(require("./BmCustomCardTitle/CustomCardTitle"));
 var _Alert = _interopRequireDefault(require("./Alert/Alert"));
+var _DepartmentCard = _interopRequireDefault(require("./DepartmentCard/DepartmentCard"));
+var _ResourceCard = _interopRequireDefault(require("./ResourceCard/ResourceCard"));
 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); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/package.json

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

package/src/App.js

@@ -4,11 +4,14 @@
 import React, { useState } from 'react';
 // import AbcIcon from '@mui/icons-material/Abc';
 // import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
-// import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import PersonIcon from '@mui/icons-material/Person';
 import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
 import CheckIcon from '@mui/icons-material/Check';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+// import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 // import { Tooltip } from '@mui/material';
 import PeopleIcon from '@mui/icons-material/People';
 // import BusinessIcon from '@mui/icons-material/Business';
@@ -36,8 +39,11 @@ import {
   BmSelectionNotice,
   BmSelector,
   BmCustomCardTitle,
+  BmDepartmentCard,
+  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({
@@ -1011,6 +1017,65 @@ const Chat = () => {
     <>
       <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
+              borderTopColor="#3b82f6" // blue
+              isActive="true"
+              name="Radiology Department"
+              description="Handles imaging and diagnostic scans"
+              resourcesCount={0}
+              onEdit={() => alert('Edit department')}
+              onDelete={() => alert('Delete department')}
+              EditIcon={EditIcon}
+              DeleteIcon={DeleteIcon}
+            />
+
+            <BmDepartmentCard
+              borderTopColor="#f97316" // orange
+              isActive={false}
+              name="Cardiology Department"
+              description="Heart and blood vessel treatments"
+              resourcesCount={5}
+              onEdit={() => alert('Edit department')}
+              onDelete={() => alert('Delete department')}
+              EditIcon={EditIcon}
+              DeleteIcon={DeleteIcon}
+            />
+            <BmResourceCard
+              borderTopColor="#10b981"
+              isActive="true"
+              name="Dr. Jane Smith"
+              type="staff"
+              resourceBadges={[
+                {
+                  label: 'Google Synced',
+                  color: '#10b981',
+                  icon: CalendarTodayIcon,
+                },
+              ]}
+              departmentName="Radiology"
+              email="jane.smith@example.com"
+              phone="+123456789"
+              availability="Mon-Fri 9am-5pm"
+              onEdit={() => alert('Edit resource')}
+              onDelete={() => alert('Delete resource')}
+              EditIcon={EditIcon}
+              DeleteIcon={DeleteIcon}
+            />
+          </div>
+        </div>
         <div>
           <BmInfoPanel.SectionSummary
             iconColor="#33B1BA"

package/src/fonts.scss

@@ -28,7 +28,4 @@
 }
 
 
-@font-face {
-    font-family: 'Inter';
-    src: url('../src/fonts/Inter-regular.woff2')format('woff2'),url('../src/fonts/Inter-Bold.woff2')format('woff2'),url('../src/fonts/Inter-ExtraBold.woff2')format('woff2'),url('../src/fonts/Inter-ExtraLight.woff2')format('woff2'),url('../src/fonts/Inter-medium.woff2')format('woff2'),url('../src/fonts/Inter-SemiBold.woff2')format('woff2');
-}
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

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

@@ -0,0 +1,130 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const CardWrapper = styled.div`
+  overflow: hidden;
+
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
+  border-top: 4px solid ${({ borderTopColor }) => borderTopColor || '#cccccc'};
+
+  background-color: #ffffff;
+  opacity: ${({ isActive }) => (isActive ? 1 : 0.5)};
+  transition: opacity 0.3s;
+`;
+
+const Header = styled.div`
+  padding: 1rem 1rem 0.5rem 1rem;
+`;
+
+const TitleRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+`;
+
+const CardTitle = styled.h3`
+  font-size: 1.125rem;
+  margin: 0;
+`;
+
+const CardDescription = styled.p`
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin-top: 0.25rem;
+`;
+
+const Content = styled.div`
+  margin-top: 1rem;
+  padding: 0 1rem 0.5rem 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const ResourceText = styled.span`
+  font-size: 0.875rem;
+  color: #6b7280;
+`;
+
+const StatusRow = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const StatusDot = styled.span`
+  flex-shrink: 0;
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-right: 0.5rem;
+  border-radius: 9999px;
+  background-color: ${({ isActive }) => (isActive ? '#22c55e' : '#9ca3af')};
+`;
+
+const StatusText = styled.span`
+  font-size: 0.75rem;
+  color: #6b7280;
+`;
+
+const IconButtonsContainer = styled.div`
+  display: flex;
+  gap: 0.25rem;
+`;
+
+const IconButton = styled.button`
+  background: none;
+  border: none;
+  padding: 0;
+  height: 2rem;
+  width: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: ${({ destructive }) => (destructive ? '#ef4444' : 'inherit')};
+
+  &:hover {
+    color: ${({ destructive }) => (destructive ? '#ef4444' : '#374151')};
+  }
+`;
+
+const BmDepartmentCard = ({
+  borderTopColor = '#cccccc',
+  isActive = true,
+  name,
+  description,
+  resourcesCount,
+  onEdit,
+  onDelete,
+  EditIcon,
+  DeleteIcon,
+}) => {
+  return (
+    <CardWrapper borderTopColor={borderTopColor} isActive={isActive}>
+      <Header>
+        <TitleRow>
+          <CardTitle>{name}</CardTitle>
+          <IconButtonsContainer>
+            <IconButton onClick={onEdit}>
+              {EditIcon && <EditIcon fontSize="small" />}
+            </IconButton>
+            <IconButton destructive onClick={onDelete}>
+              {DeleteIcon && <DeleteIcon fontSize="small" />}
+            </IconButton>
+          </IconButtonsContainer>
+        </TitleRow>
+        <CardDescription>{description}</CardDescription>
+      </Header>
+      <Content>
+        <ResourceText>{resourcesCount} Resources</ResourceText>
+
+        <StatusRow>
+          <StatusDot isActive={isActive} />
+          <StatusText>{isActive ? 'Active' : 'Inactive'}</StatusText>
+        </StatusRow>
+      </Content>
+    </CardWrapper>
+  );
+};
+
+export default BmDepartmentCard;

package/src/lib/components/DepartmentCard/DepartmentCard.stories.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import BmDepartmentCard from './DepartmentCard';
+
+export default {
+  title: 'Components/BmDepartmentCard',
+  component: BmDepartmentCard,
+  argTypes: {
+    borderTopColor: { control: 'color' },
+    isActive: { control: 'boolean' },
+    name: { control: 'text' },
+    description: { control: 'text' },
+    resourcesCount: { control: 'number' },
+  },
+};
+
+const Template = (args) => (
+  <BmDepartmentCard {...args} EditIcon={EditIcon} DeleteIcon={DeleteIcon} />
+);
+
+export const Active = Template.bind({});
+Active.args = {
+  borderTopColor: '#3b82f6',
+  isActive: true,
+  name: 'Radiology',
+  description: 'Handles imaging and scans for diagnosis',
+  resourcesCount: 5,
+};
+
+export const Inactive = Template.bind({});
+Inactive.args = {
+  borderTopColor: '#ef4444',
+  isActive: false,
+  name: 'Cardiology',
+  description: 'Provides heart-related care and surgeries',
+  resourcesCount: 3,
+};

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

@@ -0,0 +1,213 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import styled from 'styled-components';
+
+const CardWrapper = styled.div`
+  overflow: hidden;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  border-top: 4px solid ${({ borderTopColor }) => borderTopColor || '#cccccc'};
+  background-color: #ffffff;
+  opacity: ${({ isActive }) => (isActive ? 1 : 0.5)};
+  transition: opacity 0.3s;
+`;
+
+const Header = styled.div`
+  padding: 1rem 1rem 0.5rem 1rem;
+`;
+
+const TitleRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+`;
+
+const TitleContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const CardTitle = styled.h3`
+  font-size: 1.125rem;
+  margin: 0;
+`;
+
+const BadgeRow = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+  flex-wrap: wrap;
+`;
+
+const Badge = styled.span`
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+  background-color: #f9fafb;
+  color: ${({ color }) => color || 'inherit'};
+`;
+
+const IconsContainer = styled.div`
+  display: flex;
+  gap: 0.25rem;
+`;
+
+const IconButton = styled.button`
+  background: none;
+  border: none;
+  padding: 0;
+  height: 2rem;
+  width: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: ${({ destructive }) => (destructive ? '#ef4444' : 'inherit')};
+
+  &:hover {
+    color: ${({ destructive }) => (destructive ? '#ef4444' : '#374151')};
+  }
+`;
+
+const Content = styled.div`
+  margin-top: 1rem;
+  padding: 0 1rem 0.5rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+`;
+
+const InfoRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+`;
+
+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;
+`;
+
+const StatusDot = styled.span`
+  flex-shrink: 0;
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-right: 0.5rem;
+  border-radius: 9999px;
+  background-color: ${({ isActive }) => (isActive ? '#22c55e' : '#9ca3af')};
+`;
+
+const StatusText = styled.span`
+  font-size: 0.75rem;
+  color: #6b7280;
+`;
+
+const BmResourceCard = ({
+  borderTopColor = '#cccccc',
+  isActive = true,
+  name,
+  type,
+  resourceBadges = [],
+  departmentName,
+  email,
+  phone,
+  capacity,
+  features,
+  availability,
+  onEdit,
+  onDelete,
+  EditIcon,
+  DeleteIcon,
+}) => {
+  return (
+    <CardWrapper borderTopColor={borderTopColor} isActive={isActive}>
+      <Header>
+        <TitleRow>
+          <TitleContainer>
+            <CardTitle>{name}</CardTitle>
+            <BadgeRow>
+              <Badge>{type}</Badge>
+              {resourceBadges.map((badge, index) => (
+                <Badge key={index} color={badge.color}>
+                  {badge.icon && (
+                    <badge.icon style={{ fontSize: 14, marginRight: 4 }} />
+                  )}
+                  {badge.label}
+                </Badge>
+              ))}
+            </BadgeRow>
+          </TitleContainer>
+          <IconsContainer>
+            <IconButton onClick={onEdit}>
+              {EditIcon && <EditIcon fontSize="small" />}
+            </IconButton>
+            <IconButton destructive onClick={onDelete}>
+              {DeleteIcon && <DeleteIcon fontSize="small" />}
+            </IconButton>
+          </IconsContainer>
+        </TitleRow>
+      </Header>
+      <Content>
+        {departmentName && (
+          <InfoRow>
+            <Label>Department:</Label>
+            <Value>{departmentName}</Value>
+          </InfoRow>
+        )}
+        {type === 'staff' && email && (
+          <InfoRow>
+            <Label>Email:</Label>
+            <Value>{email}</Value>
+          </InfoRow>
+        )}
+        {type === 'staff' && phone && (
+          <InfoRow>
+            <Label>Phone:</Label>
+            <Value>{phone}</Value>
+          </InfoRow>
+        )}
+        {type === 'room' && capacity && (
+          <InfoRow>
+            <Label>Capacity:</Label>
+            <Value>{capacity}</Value>
+          </InfoRow>
+        )}
+        {type === 'room' && features && features.length > 0 && (
+          <InfoRow>
+            <Label>Features:</Label>
+            <Value>{features.join(', ')}</Value>
+          </InfoRow>
+        )}
+        {availability && (
+          <InfoRow>
+            <Label>Availability:</Label>
+            <Value>{availability}</Value>
+          </InfoRow>
+        )}
+      </Content>
+      <Footer>
+        <StatusDot isActive={isActive} />
+        <StatusText>{isActive ? 'Active' : 'Inactive'}</StatusText>
+      </Footer>
+    </CardWrapper>
+  );
+};
+
+export default BmResourceCard;

package/src/lib/components/ResourceCard/ResourceCard.stories.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import BmResourceCard from './ResourceCard';
+
+export default {
+  title: 'Components/BmResourceCard',
+  component: BmResourceCard,
+  argTypes: {
+    borderTopColor: { control: 'color' },
+    isActive: { control: 'boolean' },
+    name: { control: 'text' },
+    type: { control: 'text' },
+    departmentName: { control: 'text' },
+    email: { control: 'text' },
+    phone: { control: 'text' },
+    capacity: { control: 'number' },
+    availability: { control: 'text' },
+  },
+};
+
+const Template = (args) => (
+  <BmResourceCard {...args} EditIcon={EditIcon} DeleteIcon={DeleteIcon} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  borderTopColor: '#3b82f6',
+  isActive: true,
+  name: 'Room 101',
+  type: 'room',
+  resourceBadges: [
+    { label: 'Synced', icon: CalendarTodayIcon, color: '#10b981' },
+  ],
+  departmentName: 'Radiology',
+  capacity: 12,
+  features: ['Projector', 'Whiteboard'],
+  availability: 'Weekdays 9am - 5pm',
+};
+
+export const StaffExample = Template.bind({});
+StaffExample.args = {
+  borderTopColor: '#10b981',
+  isActive: true,
+  name: 'Dr. Sarah Johnson',
+  type: 'staff',
+  resourceBadges: [
+    { label: 'Google Synced', icon: CalendarTodayIcon, color: '#3b82f6' },
+  ],
+  departmentName: 'Cardiology',
+  email: 'sarah.johnson@hospital.com',
+  phone: '+1 555 123 4567',
+  availability: 'Mon - Fri, 9am - 3pm',
+};
+
+export const RoomExample = Template.bind({});
+RoomExample.args = {
+  borderTopColor: '#f59e0b',
+  isActive: false,
+  name: 'Conference Room B',
+  type: 'room',
+  resourceBadges: [],
+  departmentName: 'Oncology',
+  capacity: 20,
+  features: ['Video Conferencing', 'AC', 'Whiteboard'],
+  availability: 'Available on demand',
+};

package/src/lib/components/index.js

@@ -83,6 +83,8 @@ import BmInfoPanel from './InfoPanel/InfoPanel';
 import BmSelector from './BmSelector/BmSelector';
 import BmCustomCardTitle from './BmCustomCardTitle/CustomCardTitle';
 import BmAlertBox from './Alert/Alert';
+import BmDepartmentCard from './DepartmentCard/DepartmentCard';
+import BmResourceCard from './ResourceCard/ResourceCard';
 
 export {
   BmAccordion,
@@ -163,4 +165,6 @@ export {
   BmSelector,
   BmCustomCardTitle,
   BmAlertBox,
+  BmDepartmentCard,
+  BmResourceCard,
 };