beem-component 2.1.9 → 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

@@ -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.10",
   "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({
@@ -1016,6 +1017,17 @@ 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
@@ -1023,7 +1035,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}

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;
 `;