beem-component 2.1.22 → 2.1.23

package/dist/components/Card_v2/Card.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BmCardv2 = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-const _excluded = ["className", "children", "borderColor", "borderWidth"];
+const _excluded = ["className", "children", "borderColor", "borderWidth", "contentHeight"];
 /* eslint-disable func-style */
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 _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); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -23,10 +24,11 @@ const hexToRgba = function (hex) {
     const g = parseInt(normalizedHex.slice(2, 4), 16);
     const b = parseInt(normalizedHex.slice(4, 6), 16);
     return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
-  } catch (e) {
+  } catch (_unused) {
     return "rgba(0, 0, 0, ".concat(opacity, ")");
   }
 };
+const CardContext = /*#__PURE__*/(0, _react.createContext)({});
 const StyledCard = _styledComponents.default.div.withConfig({
   displayName: "Card__StyledCard"
 })(["background-color:var(--card,#fff);color:var(--card-foreground,#000);display:flex;flex-direction:column;gap:1.5rem;border-radius:0.75rem;border-style:solid;border-color:", ";border-width:", ";width:100%;"], _ref => {
@@ -49,25 +51,49 @@ const Title = _styledComponents.default.h4.withConfig({
 const Description = _styledComponents.default.p.withConfig({
   displayName: "Card__Description"
 })(["color:var(--muted-foreground,#666);margin:0;"]);
-const Content = _styledComponents.default.div.withConfig({
-  displayName: "Card__Content"
-})(["min-height:200px;padding:0 1.5rem;max-height:calc(100vh - 28.5714rem);overflow-y:auto;scrollbar-width:thin;scrollbar-color:", " transparent;&::-webkit-scrollbar-thumb{background:", ";border-radius:0.6429rem;transition:background 0.2s ease;}&::-webkit-scrollbar-thumb:hover{background:", ";}&:last-child{padding-bottom:1.5rem;}@media (max-width:54.8571rem){max-height:calc(100vh - 17.8572rem);}"], () => hexToRgba('#33b1ba', 0.2), () => hexToRgba('#33b1ba', 0.3), () => hexToRgba('#33b1ba', 0.3));
+const ContentWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Card__ContentWrapper"
+})(["min-height:", ";padding:0 1.5rem;max-height:calc(100vh - 28.5714rem);overflow-y:auto;scrollbar-width:thin;scrollbar-color:", " transparent;&::-webkit-scrollbar-thumb{background:", ";border-radius:0.6429rem;transition:background 0.2s ease;}&::-webkit-scrollbar-thumb:hover{background:", ";}&:last-child{padding-bottom:1.5rem;}@media (max-width:54.8571rem){max-height:calc(100vh - 17.8572rem);}"], _ref3 => {
+  let {
+    $contentHeight
+  } = _ref3;
+  return $contentHeight || '14.2857rem';
+}, () => hexToRgba('#33b1ba', 0.2), () => hexToRgba('#33b1ba', 0.3), () => hexToRgba('#33b1ba', 0.4));
+function Content(_ref4) {
+  let {
+    children,
+    style
+  } = _ref4;
+  const {
+    contentHeight
+  } = (0, _react.useContext)(CardContext);
+  return /*#__PURE__*/_react.default.createElement(ContentWrapper, {
+    $contentHeight: contentHeight,
+    style: style
+  }, children);
+}
 const Footer = _styledComponents.default.div.withConfig({
   displayName: "Card__Footer"
 })(["display:flex;justify-content:space-between;align-items:center;padding:0 1.5rem 1.5rem 1.5rem;gap:1rem;@media (max-width:42.8571rem){flex-direction:column;align-items:stretch;& > *{width:100%;}}"]);
-function CardComponent(_ref3) {
+function CardComponent(_ref5) {
   let {
       className,
       children,
       borderColor,
-      borderWidth
-    } = _ref3,
-    props = _objectWithoutProperties(_ref3, _excluded);
-  return /*#__PURE__*/_react.default.createElement(StyledCard, _extends({
+      borderWidth,
+      contentHeight
+    } = _ref5,
+    props = _objectWithoutProperties(_ref5, _excluded);
+  const contextValue = {
+    contentHeight
+  };
+  return /*#__PURE__*/_react.default.createElement(CardContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(StyledCard, _extends({
     className: className,
     borderColor: borderColor,
     borderWidth: borderWidth
-  }, props), children);
+  }, props), children));
 }
 const BmCardv2 = exports.BmCardv2 = Object.assign(CardComponent, {
   Header,

package/package.json

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

package/src/App.js

@@ -17,7 +17,7 @@ import React from 'react';
 // import PeopleIcon from '@mui/icons-material/People';
 // import BusinessIcon from '@mui/icons-material/Business';
 
-import { BmChat, GlobalStyle } from './lib/components';
+import { BmChat, GlobalStyle, BmCardv2, BmButton } from './lib/components';
 // import AlertBox from './lib/components/Alert/Alert';
 
 // import ProgressIndicator from './lib/components/newProgress';
@@ -842,6 +842,39 @@ const Chat = () => {
           </BmChat.Details>
         )
       )}
+      <BmCardv2 borderColor="#d62a2af" borderWidth="1.5px" contentHeight="0">
+        <BmCardv2.Header>
+          <BmCardv2.Title>Appointment Summary</BmCardv2.Title>
+          <BmCardv2.Description>
+            This BmCardv2 shows a quick overview of your booking.
+          </BmCardv2.Description>
+        </BmCardv2.Header>
+        <BmCardv2.Content>
+          <p>
+            <strong>Type:</strong> Consultation
+          </p>
+          <p>
+            <strong>Date:</strong> June 24, 2025
+          </p>
+          <p>
+            <strong>Doctor:</strong> Dr. Smith
+          </p>
+        </BmCardv2.Content>
+        <BmCardv2.Footer>
+          <BmButton width="100%" size="medium" variant="primary">
+            Edit
+          </BmButton>
+          <BmButton
+            borderColor="#000000"
+            width="100%"
+            size="medium"
+            variant="secondary"
+            color="#000000"
+          >
+            Cancel
+          </BmButton>
+        </BmCardv2.Footer>
+      </BmCardv2>
     </>
   );
 };

package/src/lib/components/Card_v2/Card.js

@@ -1,5 +1,5 @@
 /* eslint-disable func-style */
-import React from 'react';
+import React, { createContext, useContext } from 'react';
 import styled from 'styled-components';
 
 const hexToRgba = (hex, opacity = 0.6) => {
@@ -12,16 +12,17 @@ const hexToRgba = (hex, opacity = 0.6) => {
     ) {
       throw new Error('Invalid hex');
     }
-
     const r = parseInt(normalizedHex.slice(0, 2), 16);
     const g = parseInt(normalizedHex.slice(2, 4), 16);
     const b = parseInt(normalizedHex.slice(4, 6), 16);
     return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-  } catch (e) {
+  } catch {
     return `rgba(0, 0, 0, ${opacity})`;
   }
 };
 
+const CardContext = createContext({});
+
 const StyledCard = styled.div`
   background-color: var(--card, #fff);
   color: var(--card-foreground, #000);
@@ -53,12 +54,11 @@ const Description = styled.p`
   margin: 0;
 `;
 
-const Content = styled.div`
-  min-height: 200px;
+const ContentWrapper = styled.div`
+  min-height: ${({ $contentHeight }) => $contentHeight || '14.2857rem'};
   padding: 0 1.5rem;
   max-height: calc(100vh - 28.5714rem);
   overflow-y: auto;
-
   scrollbar-width: thin;
   scrollbar-color: ${() => hexToRgba('#33b1ba', 0.2)} transparent;
 
@@ -69,7 +69,7 @@ const Content = styled.div`
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background: ${() => hexToRgba('#33b1ba', 0.3)};
+    background: ${() => hexToRgba('#33b1ba', 0.4)};
   }
 
   &:last-child {
@@ -81,6 +81,15 @@ const Content = styled.div`
   }
 `;
 
+function Content({ children, style }) {
+  const { contentHeight } = useContext(CardContext);
+  return (
+    <ContentWrapper $contentHeight={contentHeight} style={style}>
+      {children}
+    </ContentWrapper>
+  );
+}
+
 const Footer = styled.div`
   display: flex;
   justify-content: space-between;
@@ -91,7 +100,6 @@ const Footer = styled.div`
   @media (max-width: 42.8571rem) {
     flex-direction: column;
     align-items: stretch;
-
     & > * {
       width: 100%;
     }
@@ -103,17 +111,22 @@ function CardComponent({
   children,
   borderColor,
   borderWidth,
+  contentHeight,
   ...props
 }) {
+  const contextValue = { contentHeight };
+
   return (
-    <StyledCard
-      className={className}
-      borderColor={borderColor}
-      borderWidth={borderWidth}
-      {...props}
-    >
-      {children}
-    </StyledCard>
+    <CardContext.Provider value={contextValue}>
+      <StyledCard
+        className={className}
+        borderColor={borderColor}
+        borderWidth={borderWidth}
+        {...props}
+      >
+        {children}
+      </StyledCard>
+    </CardContext.Provider>
   );
 }