@luscii-healthtech/web-ui 2.42.0 → 2.44.0

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export declare type CardProps = {
+    title: string;
+    children: React.ReactNode;
+    dataTestId?: string;
+};
+/**
+ * Card component that centralizes itself inside a container.
+ * Specific variant made with w-135 to suffice the use case needed,
+ * more variants can be added.
+ */
+export declare const Card: React.FC<CardProps>;

package/dist/index.d.ts

@@ -77,3 +77,4 @@ export { IconProps } from "./components/Icons/types/IconProps.type";
 export * from "./components/Icons";
 export { Divider } from "./components/Divider/Divider";
 export { FullPageModal } from "./components/Modal/FullPageModal";
+export { Card, type CardProps } from "./components/Card/Card";

package/dist/web-ui-tailwind.css

@@ -645,6 +645,12 @@ video {
   margin-left: calc(1rem * calc(1 - var(--space-x-reverse)));
 }
 
+.space-y-6 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--space-y-reverse));
+}
+
 .space-x-6 > :not(template) ~ :not(template) {
   --space-x-reverse: 0;
   margin-right: calc(1.5rem * var(--space-x-reverse));
@@ -2218,6 +2224,10 @@ video {
   width: 33rem;
 }
 
+.w-135 {
+  width: 33.75rem;
+}
+
 .w-216 {
   width: 54rem;
 }

package/dist/web-ui.cjs.development.js

@@ -1168,7 +1168,8 @@ var ListItem = function ListItem(_ref) {
     text: title
   }), subtitle && /*#__PURE__*/React__default.createElement(Text, {
     text: subtitle,
-    type: "sm"
+    type: "sm",
+    color: "slate-500"
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "flex-grow"
   }), accessories);
@@ -6795,7 +6796,7 @@ function GenericForm(_ref) {
   }, [defaultValues]);
   var handleSubmit = useFormReturn.handleSubmit;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-4"
+    className: "space-y-6"
   }, /*#__PURE__*/React__default.createElement(Form, {
     fields: fields,
     useFormReturn: useFormReturn
@@ -6816,7 +6817,7 @@ function Form(_ref2) {
   var fields = _ref2.fields,
       useFormReturn = _ref2.useFormReturn;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-4"
+    className: "space-y-6"
   }, fields.map(function (props) {
     return FormFieldMapper(props, useFormReturn);
   }));
@@ -7863,6 +7864,26 @@ var FullPageModal = function FullPageModal(_ref) {
   }, children)));
 };
 
+/**
+ * Card component that centralizes itself inside a container.
+ * Specific variant made with w-135 to suffice the use case needed,
+ * more variants can be added.
+ */
+
+var Card = function Card(_ref) {
+  var title = _ref.title,
+      children = _ref.children,
+      dataTestId = _ref.dataTestId;
+  return /*#__PURE__*/React__default.createElement("div", {
+    "data-test-id": dataTestId,
+    className: "flex flex-col p-6 mx-auto bg-white rounded-lg w-135"
+  }, /*#__PURE__*/React__default.createElement(Title, {
+    className: "mb-6",
+    type: "sm",
+    text: title
+  }), children);
+};
+
 exports.AccordionList = AccordionList;
 exports.AddIcon = AddIcon;
 exports.AlertsIcon = AlertsIcon;
@@ -7871,6 +7892,7 @@ exports.Badge = Badge;
 exports.BellIcon = BellIcon;
 exports.Breadcrumbs = Breadcrumbs;
 exports.CRUDPage = CRUDPage;
+exports.Card = Card;
 exports.Carousel = Carousel;
 exports.CenteredHero = CenteredHero;
 exports.ChartIcon = ChartIcon;