hplx-react-elements-dev 1.1.14 → 1.1.16

package/dist/esm/alert/Alert.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { AlertProps } from "../types";
+declare const Alert: React.FC<AlertProps>;
+export default Alert;

package/dist/esm/index.d.ts

@@ -32,3 +32,4 @@ export { default as InputTagDropdownItem } from "./inputTag/InputTagDropdownItem
 export { default as CalendarView } from "./calendarView/CalendarView";
 export { default as PopUpModal } from "./popUpModal/PopUpModal";
 export { default as ImageCarousel } from "./carousel/imageCarousel";
+export { default as Alert } from "./alert/Alert";

package/dist/esm/index.js

@@ -2069,7 +2069,7 @@ var getTypeClassName = function getTypeClassName(type) {
       break;
 
     case "Text xs":
-      className = "hplxt-font-inter  hplxt-leading-11 hplxt-text-0 hplxt-tracking-1";
+      className = "hplxt-font-inter hplxt-leading-10 hplxt-text-1 hplxt-tracking-1";
       break;
 
     default:
@@ -2959,6 +2959,10 @@ var getSizeClassName$6 = function getSizeClassName(size) {
   var className;
 
   switch (size) {
+    case "xs":
+      className = "hplxt-w-10 hplxt-h-11";
+      break;
+
     case "sm":
       className = "hplxt-w-16 hplxt-h-16";
       break;
@@ -3013,7 +3017,7 @@ var OtpField = function OtpField(_a) {
   };
 
   return jsxRuntime.exports.jsxs("div", __assign({
-    className: "otpfield"
+    className: "otpfield hplxt-inline-flex hplxt-flex-col ".concat(Boolean(label) || Boolean(hint_text) || Boolean(errorMsg) ? "hplxt-gap-y-1.5" : "")
   }, {
     children: [Boolean(label) && jsxRuntime.exports.jsx("div", __assign({
       className: "hplxt-text-Gray-700 hplxt-mb-1"
@@ -3035,14 +3039,14 @@ var OtpField = function OtpField(_a) {
         onFocus: handleFocus,
         onBlur: handleBlur
       })), jsxRuntime.exports.jsx("div", __assign({
-        className: "hplxt-flex hplxt-pointer-events-none"
+        className: "hplxt-flex hplxt-pointer-events-none  ".concat(size === "xs" || size === "sm" ? "hplxt-gap-2" : "hplxt-gap-3")
       }, {
         children: Array(digits).fill("").map(function (_, index) {
           return jsxRuntime.exports.jsxs("div", __assign({
             className: "hplxt-flex hplxt-items-center hplxt-justify-center"
           }, {
             children: [digits === 6 && index === 3 && jsxRuntime.exports.jsx("div", __assign({
-              className: "hplxt-text-Gray-300"
+              className: "hplxt-text-Gray-300 hplxt-mr-2"
             }, {
               children: jsxRuntime.exports.jsx(Typography, __assign({
                 type: "Display xl",
@@ -3051,10 +3055,10 @@ var OtpField = function OtpField(_a) {
                 children: "-"
               }))
             })), jsxRuntime.exports.jsx("div", __assign({
-              className: "hplxt-flex hplxt-items-center hplxt-justify-center hplxt-border-1 ".concat(errorMsg ? "hplxt-border-Error-300" : "hplxt-border-Gray-300", " ").concat(disabled ? "hplxt-bg-Gray-50" : typeof value === "string" && value.length === index && "hplxt-bg-White ".concat(errorMsg ? "hover:hplxt-shadow-xs-error ".concat(active && "hplxt-shadow-xs-error") : "hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary ".concat(active && "hplxt-border-Primary-300 hplxt-shadow-xs-primary")), " hplxt-rounded-lg hplxt-mx-1 ").concat(getSizeClassName$6(size))
+              className: "hplxt-flex hplxt-items-center hplxt-justify-center hplxt-border-1 ".concat(errorMsg ? "hplxt-border-Error-300" : "hplxt-border-Gray-300", " ").concat(disabled ? "hplxt-bg-Gray-50" : typeof value === "string" && value.length === index && "hplxt-bg-White ".concat(errorMsg ? "hover:hplxt-shadow-xs-error ".concat(active && "hplxt-shadow-xs-error") : "hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary ".concat(active && "hplxt-border-Primary-300 hplxt-shadow-xs-primary")), " hplxt-rounded-lg ").concat(getSizeClassName$6(size))
             }, {
               children: typeof value === "string" && !!value[index] ? jsxRuntime.exports.jsx(Typography, __assign({
-                type: size === "lg" ? "Display xl" : "Display lg",
+                type: size === "lg" ? "Display xl" : size === "xs" ? "Display xs" : "Display lg",
                 variant: "Medium"
               }, {
                 children: value[index]
@@ -3062,7 +3066,7 @@ var OtpField = function OtpField(_a) {
                 className: "hplxt-text-Gray-300"
               }, {
                 children: jsxRuntime.exports.jsx(Typography, __assign({
-                  type: size === "lg" ? "Display xl" : "Display lg",
+                  type: size === "lg" ? "Display xl" : size === "xs" ? "Display xs" : "Display lg",
                   variant: "Medium"
                 }, {
                   children: "0"
@@ -3076,7 +3080,7 @@ var OtpField = function OtpField(_a) {
       className: "".concat(errorMsg ? "hplxt-text-Error-500" : "hplxt-text-Gray-500 hplxt-mt-1")
     }, {
       children: jsxRuntime.exports.jsx(Typography, __assign({
-        type: "Text sm",
+        type: size === "xs" ? "Text xs" : "Text sm",
         variant: "Regular"
       }, {
         children: errorMsg ? String(errorMsg) : jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
@@ -20728,4 +20732,51 @@ var ImageCarousel = function ImageCarousel(_a) {
   );
 };
 
-export { AddSuggestion, Avatar, Badge, BadgeGroup, Button, ButtonGroups, CalendarView, Card, Checkbox, CheckboxGroup, CheckboxGroupItem, CollapsibleCard, DatePicker, DoubleInput, DropdownField, DropdownItems as DropdownItem, ImageCarousel, InputField, InputFieldSplit, InputTag, InputTagDropdownItem, MessageToast, NestedDropdown, OtpField, PopUpModal, ProgressBar, ProgressCircle, RadioBtn, SingleDatePicker, Slider, TextAreaField, ToggleSwitch, Tooltip, Typography };
+var VARIANT_CLASSNAMES = {
+  Info: "hplxt-border-Blue-200 hplxt-bg-Blue-50",
+  Warning: "hplxt-border-Warning-200 hplxt-bg-Warning-50",
+  Error: "hplxt-border-Error-200 hplxt-bg-Error-50",
+  Success: "hplxt-border-Success-200 hplxt-bg-Success-50"
+};
+var ICON_CLASSNAMES = {
+  Info: "hx_info-filled hplxt-text-Blue-600",
+  Warning: "hx_warning-filled hplxt-text-Error-600",
+  Error: "hx_info-filled hplxt-text-Error-600",
+  Success: "hx_checkmark-circle-filled hplxt-text-Success-600"
+};
+
+var Alert = function Alert(_a) {
+  var type = _a.type,
+      message = _a.message,
+      showCloseIcon = _a.showCloseIcon;
+
+  var _b = useState(true),
+      showAlert = _b[0],
+      setShowAlert = _b[1];
+
+  if (!showAlert) return null;
+  return jsxRuntime.exports.jsxs("div", __assign({
+    className: "hplxt-flex hplxt-justify-between hplxt-items-center hplxt-gap-2.5 hplxt-p-2.5 hplxt-border hplxt-rounded ".concat(VARIANT_CLASSNAMES[type])
+  }, {
+    children: [jsxRuntime.exports.jsxs("div", __assign({
+      className: "hplxt-flex hplxt-justify-between hplxt-items-center hplxt-gap-2.5"
+    }, {
+      children: [jsxRuntime.exports.jsx("i", {
+        className: "hplxt-text-5 ".concat(ICON_CLASSNAMES[type])
+      }), jsxRuntime.exports.jsx(Typography, __assign({
+        variant: "Regular",
+        type: "Text sm",
+        className: "hplxt-text-Primary-900"
+      }, {
+        children: message
+      }))]
+    })), showCloseIcon && jsxRuntime.exports.jsx("i", {
+      className: "hx_close",
+      onClick: function onClick() {
+        return setShowAlert(false);
+      }
+    })]
+  }));
+};
+
+export { AddSuggestion, Alert, Avatar, Badge, BadgeGroup, Button, ButtonGroups, CalendarView, Card, Checkbox, CheckboxGroup, CheckboxGroupItem, CollapsibleCard, DatePicker, DoubleInput, DropdownField, DropdownItems as DropdownItem, ImageCarousel, InputField, InputFieldSplit, InputTag, InputTagDropdownItem, MessageToast, NestedDropdown, OtpField, PopUpModal, ProgressBar, ProgressCircle, RadioBtn, SingleDatePicker, Slider, TextAreaField, ToggleSwitch, Tooltip, Typography };

package/dist/esm/types.d.ts

@@ -103,7 +103,7 @@ export interface InputFieldSplitProps {
     };
     inputProps: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 }
-type otpSizeType = "lg" | "md" | "sm";
+type otpSizeType = "lg" | "md" | "sm" | "xs";
 export interface OtpFieldProps {
     label?: string;
     hint_text?: string;
@@ -476,4 +476,11 @@ export interface CarouselProps {
     carouselIndicator?: boolean;
     autoPlay?: boolean;
 }
+type AlertType = "Success" | "Info" | "Error" | "Warning";
+export interface AlertProps {
+    type: AlertType;
+    message: string;
+    showCloseIcon?: boolean;
+    fullWidth?: boolean;
+}
 export {};

package/package.json

@@ -9,7 +9,7 @@
     "frontend",
     "healthplix"
   ],
-  "version": "1.1.14",
+  "version": "1.1.16",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",