hplx-react-elements-dev 1.0.0

package/README.md

@@ -0,0 +1,43 @@
+# Healthplix element library
+
+Atomic elements
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). Build on node v16.13.0 and npm version 8.1.0
+
+# How to Use 
+
+In your project directory, run:
+### `npm i hplx-ui-element hplx-ui-icons`
+
+Important : Integrate Tailwind Css
+Optional : Install Formik & Yup for forms
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm i`
+
+Installs dependancies into node_modules
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm run storybook`
+
+Launches the storybook in the interactive watch mode.\
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

package/dist/esm/components/Badges/Badge.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BadgeType } from "../types";
+declare const Badge: ({ size, colour, textField, icon, iconFile, onClick, onLeftIconClick, onRightIconClick, }: BadgeType) => JSX.Element;
+export default Badge;

package/dist/esm/components/Badges/Badge.js

@@ -0,0 +1,60 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Typography from "../typography/Typography";
+import { getColourClassName } from "../common";
+import Avatar from "../avatar/Avatar";
+//Sizes can be one of the following
+// sm-Small,
+// md-Medium,
+// lg-Large,
+var getPaddingClassName = function (size) {
+    var className = "flex flex-row px-2 rounded-full justify-content-center items-center ";
+    switch (size) {
+        case "sm":
+            className = className + "h-[22px]";
+            break;
+        case "md":
+            className = className + "h-6";
+            break;
+        case "lg":
+            className = className + "h-7 ";
+            break;
+        default:
+            className = className + "h-6 ";
+            break;
+    }
+    return className;
+};
+var getSizeClassName = function (size) {
+    var className;
+    switch (size) {
+        case "sm":
+            className = "Text xs";
+            break;
+        case "md":
+            className = "Text sm";
+            break;
+        case "lg":
+            className = "Text sm";
+            break;
+        default:
+            className = "Text sm";
+            break;
+    }
+    return className;
+};
+var Badge = function (_a) {
+    var size = _a.size, colour = _a.colour, 
+    // textColour,
+    textField = _a.textField, icon = _a.icon, iconFile = _a.iconFile, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, _c = _a.onLeftIconClick, onLeftIconClick = _c === void 0 ? function () { } : _c, _d = _a.onRightIconClick, onRightIconClick = _d === void 0 ? function () { } : _d;
+    return (_jsx("form", { children: _jsxs("div", __assign({ 
+            // {...textProps}
+            className: [
+                getColourClassName(colour),
+                getSizeClassName(size),
+                getPaddingClassName(size),
+                // getTextColourClassName(textColour),
+            ].join(" "), onClick: onClick }, { children: [_jsx("div", { children: iconFile === "avatar" && icon === "Only" && (_jsx("div", __assign({ "data-testid": "badge-avatar", className: "flex  rounded-full my-auto mx-auto px-0.5 relative items-center " }, { children: _jsx(Avatar, { url: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80", name: "", placeholder: false, size: "Text xxs", text: false }) }))) }), _jsx("div", { children: icon && iconFile && icon === "Left" && (_jsx("span", __assign({ onClick: onLeftIconClick, className: "".concat(iconFile), "data-testid": "left-icon" }, { children: " " }))) }), textField && (_jsx(Typography, __assign({ variant: "Regular", type: getSizeClassName(size) }, { children: textField }))), _jsx("div", { children: icon && iconFile && icon === "Right" && (_jsx("span", { "data-testid": "right-icon", onClick: onRightIconClick, className: "".concat(iconFile, " ") })) })] })) }));
+};
+export default Badge;
+//# sourceMappingURL=Badge.js.map

package/dist/esm/components/Badges/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../src/components/Badges/Badge.tsx"],"names":[],"mappings":";;AACA,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC,mCAAmC;AACnC,YAAY;AACZ,aAAa;AACb,YAAY;AAEZ,IAAM,mBAAmB,GAAG,UAAC,IAAY;IACvC,IAAI,SAAS,GACX,sEAAsE,CAAC;IACzE,QAAQ,IAAI,EAAE;QACZ,KAAK,IAAI;YACP,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;YACnC,MAAM;QACR,KAAK,IAAI;YACP,SAAS,GAAG,SAAS,GAAG,KAAK,CAAC;YAC9B,MAAM;QACR,KAAK,IAAI;YACP,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;YAC/B,MAAM;QACR;YACE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;YAC/B,MAAM;KACT;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,IAAM,gBAAgB,GAAG,UAAC,IAAY;IACpC,IAAI,SAAkC,CAAC;IACvC,QAAQ,IAAI,EAAE;QACZ,KAAK,IAAI;YACP,SAAS,GAAG,SAAS,CAAC;YACtB,MAAM;QACR,KAAK,IAAI;YACP,SAAS,GAAG,SAAS,CAAC;YACtB,MAAM;QACR,KAAK,IAAI;YACP,SAAS,GAAG,SAAS,CAAC;YACtB,MAAM;QACR;YACE,SAAS,GAAG,SAAS,CAAC;YACtB,MAAM;KACT;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,IAAM,KAAK,GAAG,UAAC,EAUH;QATV,IAAI,UAAA,EACJ,MAAM,YAAA;IACN,cAAc;IACd,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,eAAkB,EAAlB,OAAO,mBAAG,cAAO,CAAC,KAAA,EAClB,uBAA0B,EAA1B,eAAe,mBAAG,cAAO,CAAC,KAAA,EAC1B,wBAA2B,EAA3B,gBAAgB,mBAAG,cAAO,CAAC,KAAA;IAE3B,OAAO,CACL,yBACE;YACE,iBAAiB;YACjB,SAAS,EAAE;gBACT,kBAAkB,CAAC,MAAM,CAAC;gBAC1B,gBAAgB,CAAC,IAAI,CAAC;gBACtB,mBAAmB,CAAC,IAAI,CAAC;gBACzB,sCAAsC;aACvC,CAAC,IAAI,CAAC,GAAG,CAAC,EACX,OAAO,EAAE,OAAO,iBAEhB,wBAEG,QAAQ,KAAK,QAAQ,IAAI,IAAI,KAAK,MAAM,IAAI,CAC3C,sCACc,cAAc,EAC1B,SAAS,EAAC,kEAAkE,gBAE5E,KAAC,MAAM,IACL,GAAG,EACD,8DAA8D,EAEhE,IAAI,EAAE,EAAE,EACR,WAAW,EAAE,KAAK,EAClB,IAAI,EAAE,UAAU,EAChB,IAAI,EAAE,KAAK,GACH,IACN,CACP,GACG,EACN,wBACG,IAAI,IAAI,QAAQ,IAAI,IAAI,KAAK,MAAM,IAAI,CACtC,wBACE,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,UAAG,QAAQ,CAAE,iBACZ,WAAW,gBAEtB,GAAG,IACC,CACR,GACG,EAEL,SAAS,IAAI,CACZ,KAAC,UAAU,aAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC,gBACvD,SAAS,IACC,CACd,EACD,wBAEG,IAAI,IAAI,QAAQ,IAAI,IAAI,KAAK,OAAO,IAAI,CACvC,8BACc,YAAY,EACxB,OAAO,EAAE,gBAAgB,EACzB,SAAS,EAAE,UAAG,QAAQ,MAAG,GACnB,CACT,GACG,KACF,GACD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/esm/components/avatar/Avatar.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { AvatarProps } from "../types";
+declare const Avatar: (props: AvatarProps) => JSX.Element;
+export default Avatar;

package/dist/esm/components/avatar/Avatar.js

@@ -0,0 +1,141 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Typography from "../typography/Typography";
+var ICON_ANGLE = 135;
+var getSize = function (size) {
+    var s;
+    var p;
+    switch (size) {
+        case "Display xs":
+            s = "w-16 h-16";
+            p = 32;
+            break;
+        case "Text xl":
+            s = "w-14 h-14";
+            p = 28;
+            break;
+        case "Text lg":
+            s = "w-12 h-12";
+            p = 24;
+            break;
+        case "Text md":
+            s = "w-10 h-10";
+            p = 20;
+            break;
+        case "Text sm":
+            s = "w-8 h-8";
+            p = 16;
+            break;
+        case "Text xs":
+            s = "w-6 h-6";
+            p = 12;
+            break;
+        case "Text xxs":
+            s = "w-4 h-4";
+            p = 8;
+            break;
+        default:
+            s = "w-10 h-10";
+            p = 20;
+            break;
+    }
+    return { s: s, p: p };
+};
+var getStatusSize = function (size) {
+    var s;
+    var p;
+    switch (size) {
+        case "Display xs":
+            s = "w-5 h-5";
+            p = 10;
+            break;
+        case "Text xl":
+            s = "w-[18px] h-[18px]";
+            p = 9;
+            break;
+        case "Text lg":
+            s = "w-4 h-4";
+            p = 8;
+            break;
+        case "Text md":
+            s = "w-3.5 h-3.5";
+            p = 7;
+            break;
+        case "Text sm":
+            s = "w-3 h-3";
+            p = 6;
+            break;
+        case "Text xs":
+            s = "w-2.5 h-2.5";
+            p = 5;
+            break;
+        case "Text xxs":
+            s = "w-2 h-2";
+            p = 4;
+            break;
+        default:
+            s = "w-3.5 h-3.5";
+            p = 7;
+            break;
+    }
+    return { s: s, p: p };
+};
+function Status(props) {
+    var _a = props || {}, sizeClassName = _a.sizeClassName, _b = _a.statusIcon, statusIcon = _b === void 0 ? "" : _b, CompanyLogo = _a.CompanyLogo;
+    // Green Online status
+    if (statusIcon === "online") {
+        return (_jsx("div", { "data-testid": "status-online", className: "".concat(sizeClassName, " rounded-full bg-Success-500 border-White border-1") }));
+    }
+    //  Offline status
+    if (statusIcon === "offline") {
+        return (_jsx("div", { "data-testid": "status-offline", className: "".concat(sizeClassName, " rounded-full bg-Gray-300 border-White border-1") }));
+    }
+    // Healthplix company logo
+    if (statusIcon === "company" && CompanyLogo) {
+        return (_jsx("div", __assign({ "data-testid": "status-company", className: "".concat(sizeClassName) }, { children: _jsx(CompanyLogo, { width: "100%", height: "100%" }) })));
+    }
+    else {
+        return _jsx("div", { "data-testid": "status-None" });
+    }
+}
+function Icon(props) {
+    var _a = props || {}, _b = _a.name, name = _b === void 0 ? "" : _b, url = _a.url, _c = _a.size, size = _c === void 0 ? "Text md" : _c, _d = _a.placeholder, placeholder = _d === void 0 ? false : _d, _e = _a.text, text = _e === void 0 ? false : _e;
+    //abstract user image
+    if (placeholder === true && text === false) {
+        return (_jsx("div", { "data-testid": "icon-abstract", className: "hx_person text-Primary-700" }));
+    }
+    //actual user image
+    if (url !== "" && placeholder === false && text === false) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        var _f = useState(false), hasError = _f[0], setHasError_1 = _f[1];
+        return hasError ? (_jsx("div", { "data-testid": "icon-abstract", className: "hx_person text-Primary-700" })) : (_jsx("img", { "data-testid": "icon-img", src: url, alt: name, className: "w-[100%] h-[100%]", onError: function () { return setHasError_1(true); } }));
+    }
+    //user Initials
+    if (name !== "" && text === true && placeholder === false) {
+        return (_jsx(Typography, __assign({ "data-testid": "icon-initial", className: "uppercase", variant: "Medium", type: size }, { children: _jsx("div", __assign({ className: "text-Primary-600" }, { children: name
+                    .split(" ")
+                    .map(function (n) { return n[0]; })
+                    .join("") })) })));
+    }
+    else {
+        return (_jsx("div", { "data-testid": "icon-abstract", className: "hx_person text-Primary-700" }));
+    }
+}
+var Avatar = function (props) {
+    var _a = props || {}, _b = _a.shape, shape = _b === void 0 ? "rounded-full" : _b, _c = _a.name, name = _c === void 0 ? "" : _c, _d = _a.url, url = _d === void 0 ? "" : _d, _e = _a.size, size = _e === void 0 ? "Text md" : _e, _f = _a.placeholder, placeholder = _f === void 0 ? false : _f, _g = _a.text, text = _g === void 0 ? false : _g, CompanyLogo = _a.CompanyLogo, _h = _a.statusIcon, statusIcon = _h === void 0 ? "none" : _h;
+    var _j = getSize(size), sizeClassName = _j.s, sizePixels = _j.p;
+    var sizeStatusClassName = getStatusSize(size).s;
+    return (_jsxs("div", __assign({ className: "relative inline-block" }, { children: [_jsx("div", __assign({ className: "".concat(sizeClassName, " ").concat(shape, " flex justify-center items-center bg-Primary-50 active:ring-4 active:ring-Primary-100 overflow-hidden") }, { children: _jsx(Icon, { text: text, placeholder: placeholder, name: name, url: url, size: size }) })), _jsx("div", __assign({ className: " absolute ", style: {
+                    bottom: shape !== "rounded-full" ? 0 :
+                        sizePixels -
+                            4 +
+                            sizePixels * Math.cos((ICON_ANGLE * Math.PI) / 180),
+                    left: shape !== "rounded-full" ? 2 * sizePixels * Math.sin((ICON_ANGLE * Math.PI) / 180) :
+                        sizePixels -
+                            4 +
+                            sizePixels * Math.sin((ICON_ANGLE * Math.PI) / 180),
+                } }, { children: _jsx(Status, { statusIcon: statusIcon, sizeClassName: sizeStatusClassName, CompanyLogo: CompanyLogo }) }))] })));
+};
+export default Avatar;
+//# sourceMappingURL=Avatar.js.map

package/dist/esm/components/avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/badgeGroup/BadgeGroup.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BadgeGroupProps } from "../types";
+declare const BadgeGroup: ({ size, colour, theme, iconfile, text, textMessage, groupType, onClick, onRightIconClick, }: BadgeGroupProps) => JSX.Element;
+export default BadgeGroup;

package/dist/esm/components/badgeGroup/BadgeGroup.js

@@ -0,0 +1,82 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Typography from "../typography/Typography";
+import { getColourClassName1, getColourClassName2 } from "../common";
+//Sizes can be one of the following
+// md-Medium,
+// lg-Large,
+var getPaddingClassName1 = function (size) {
+    var className = "flex flex-row px-2 rounded-2xl justify-content-center items-center ";
+    switch (size) {
+        case "md":
+            className = className + "h-[30px]";
+            break;
+        case "lg":
+            className = className + "h-8 ";
+            break;
+        default:
+            className = className + "h-[30px] ";
+            break;
+    }
+    return className;
+};
+var getPaddingClassName2 = function (size) {
+    var className = "flex flex-row px-2 mx-1 rounded-2xl justify-content-center items-center ";
+    switch (size) {
+        case "md":
+            className = className + "h-[22px]";
+            break;
+        case "lg":
+            className = className + "h-6 ";
+            break;
+        default:
+            className = className + "h-[22px] ";
+            break;
+    }
+    return className;
+};
+var getSizeClassName = function (size) {
+    var className;
+    switch (size) {
+        case "md":
+            className = "Text xs";
+            break;
+        case "lg":
+            className = "Text sm";
+            break;
+        default:
+            className = "Text xs";
+            break;
+    }
+    return className;
+};
+var BadgeGroup = function (_a) {
+    var size = _a.size, colour = _a.colour, theme = _a.theme, iconfile = _a.iconfile, text = _a.text, textMessage = _a.textMessage, groupType = _a.groupType, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, _c = _a.onRightIconClick, onRightIconClick = _c === void 0 ? function () { } : _c;
+    return (_jsxs("form", { children: [groupType === "Leading" && (_jsxs("div", __assign({ 
+                // {...textProps}
+                className: [
+                    getColourClassName1(colour, theme),
+                    getSizeClassName(size),
+                    getPaddingClassName1(size),
+                ].join(" "), onClick: onClick }, { children: [_jsx("div", __assign({ 
+                        // {...textProps}
+                        className: [
+                            getColourClassName2(colour, theme),
+                            getSizeClassName(size),
+                            getPaddingClassName2(size),
+                        ].join(" "), onClick: onClick }, { children: textMessage && (_jsx(Typography, __assign({ variant: "Regular", type: getSizeClassName(size) }, { children: text }))) })), text && (_jsx(Typography, __assign({ variant: "Regular", type: getSizeClassName(size) }, { children: textMessage }))), iconfile && (_jsx("span", { "data-testid": "badgeGoup-Icon", onClick: onRightIconClick, className: "".concat(iconfile) }))] }))), groupType === "Trailing" && (_jsxs("div", __assign({ 
+                // {...textProps}
+                className: [
+                    getColourClassName1(colour, theme),
+                    getSizeClassName(size),
+                    getPaddingClassName1(size),
+                ].join(" "), onClick: onClick }, { children: [text && (_jsx(Typography, __assign({ variant: "Regular", type: getSizeClassName(size) }, { children: textMessage }))), _jsxs("div", __assign({ 
+                        // {...textProps}
+                        className: [
+                            getColourClassName2(colour, theme),
+                            getSizeClassName(size),
+                            getPaddingClassName2(size),
+                        ].join(" "), onClick: onClick }, { children: [textMessage && (_jsx(Typography, __assign({ variant: "Regular", type: getSizeClassName(size) }, { children: text }))), iconfile && (_jsx("span", { "data-testid": "badgeGoup-Icon", onClick: onRightIconClick, className: "".concat(iconfile) }))] }))] })))] }));
+};
+export default BadgeGroup;
+//# sourceMappingURL=BadgeGroup.js.map

package/dist/esm/components/badgeGroup/BadgeGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeGroup.js","sourceRoot":"","sources":["../../../../src/components/badgeGroup/BadgeGroup.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/button/Button.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ButtonProps } from "../types";
+declare const Button: ({ hierarchy, size, textField, icon, iconFile, disabled, onClick, ...textProps }: ButtonProps) => JSX.Element;
+export default Button;

package/dist/esm/components/button/Button.js

@@ -0,0 +1,90 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Typography from "../typography/Typography";
+//getHierarchyClassName is used to get the properties of button based on the hierarchy and the disabled status
+var getHierarchyClassName = function (hierarchy, disabled) {
+    switch (hierarchy) {
+        case "Primary":
+            return disabled
+                ? "bg-Primary-200 text-White content-center" //Disabled Primary Button
+                : "bg-Primary-600 active:bg-Primary-600 hover:bg-Primary-700 focus:outline-bg-Primary-200 focus:ring shadow-xs text-White";
+        case "Secondary":
+            return disabled
+                ? "bg-Primary-25 text-Primary-300" //Disabled Secondary Button
+                : "bg-Primary-50 active:bg-Primary-50 hover:bg-Primary-100 focus:outline-bg-Primary-200 focus:ring shadow-xs text-Primary-700";
+        case "Secondary-Grey":
+            return disabled
+                ? "bg-White text-Gray-300 border-solid border border-Gray-200" //Disabled Secondary-Grey Button
+                : "bg-white border-solid border border-Gray-300 active:bg-white hover:bg-Gray-25 focus shadow-xs text-Gray-700";
+        case "Tertiary":
+            return disabled
+                ? "text-Gray-300" //Disabled Tertiary Button
+                : "active:bg-white hover:bg-Primary-50 focus text-Primary-700";
+        case "Tertiary-Grey":
+            return disabled
+                ? "text-Gray-300" //Disabled Tertiary-Grey Button
+                : "active:bg-white hover:bg-Gray-50 focus text-Gray-700";
+        case "Link-Colour":
+            return disabled
+                ? "text-Gray-300" //Disabled Link-Colour Button
+                : "text-Primary-700 active:bg-white hover:text-Primary-800 focus:text-Primary-700 ";
+        case "Link-Grey":
+            return disabled
+                ? "text-Gray-300" //Disabled Link-Grey Button
+                : "text-Gray-500 active:bg-white hover:text-Gray-700";
+        default:
+            return "bg-Primary-600 active:bg-Primary-600 hover:bg-Primary-700 focus:outline-bg-Primary-200 focus:ring shadow-xs text-White";
+    }
+};
+//getSizeClassName is used to get the size of the button
+var getSizeClassName = function (size) {
+    switch (size) {
+        case "sm":
+            return "Text xs";
+        case "md":
+            return "Text sm";
+        case "lg":
+            return "Text sm";
+        case "xl":
+            return "Text md";
+        case "2xl":
+            return "Text md";
+        default:
+            return "Text md";
+    }
+};
+// getPaddingClassName is used to get the padding of the button and placement of content in the button
+var getPaddingClassName = function (size, icon, iconFile) {
+    switch (size) {
+        case "sm":
+            return icon && iconFile && icon === "Only"
+                ? "h-8 w-[34px] px-[5.8px]"
+                : "h-8 px-4";
+        case "md":
+            return icon && iconFile && icon === "Only"
+                ? "h-9 w-[42px] px-[9.8px]"
+                : "h-9 px-4";
+        case "lg":
+            return icon && iconFile && icon === "Only"
+                ? "h-10 w-[42px] px-[9.8px]"
+                : "h-10 px-4";
+        case "xl":
+            return icon && iconFile && icon === "Only"
+                ? "h-11 w-[46px] px-[11.8px]"
+                : "h-11 px-4";
+        case "2xl":
+            return icon && iconFile && icon === "Only"
+                ? "h-12 w-[50px] px-[13.8px]"
+                : "h-12 px-4";
+        default:
+            return icon && iconFile && icon === "Only"
+                ? "h-8 w-[34px] px-[5.8px]"
+                : "h-8 px-4";
+    }
+};
+var Button = function (_a) {
+    var hierarchy = _a.hierarchy, size = _a.size, textField = _a.textField, _b = _a.icon, icon = _b === void 0 ? "No" : _b, iconFile = _a.iconFile, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, textProps = __rest(_a, ["hierarchy", "size", "textField", "icon", "iconFile", "disabled", "onClick"]);
+    return (_jsxs("button", __assign({ className: "truncate text-center inline-flex items-center ".concat(getHierarchyClassName(hierarchy, disabled), " ").concat(getPaddingClassName(size, icon, iconFile), " rounded-lg") }, textProps, { onClick: onClick, disabled: disabled }, { children: [icon && iconFile && icon === "Left" && (_jsx("span", { className: iconFile.toString() })), textField && icon !== "Only" && (_jsx(Typography, __assign({ variant: "Medium", type: getSizeClassName(size) }, { children: textField }))), icon && iconFile && icon === "Only" && (_jsx("span", { className: iconFile.toString() })), icon && iconFile && icon === "Right" && (_jsx("span", { className: iconFile.toString() }))] })));
+};
+export default Button;
+//# sourceMappingURL=Button.js.map

package/dist/esm/components/button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/button/Button.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/button/index.d.ts

@@ -0,0 +1,2 @@
+import Button from "./Button";
+export default Button;

package/dist/esm/components/button/index.js

@@ -0,0 +1,3 @@
+import Button from "./Button";
+export default Button;
+//# sourceMappingURL=index.js.map

package/dist/esm/components/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,eAAe,MAAM,CAAC"}

package/dist/esm/components/buttonGroups/ButtonGroups.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ButtonGroupsProps } from "../types";
+declare const ButtonGroups: ({ field, form, options, disabled, ...ButtonGroupsProps }: ButtonGroupsProps) => JSX.Element;
+export default ButtonGroups;

package/dist/esm/components/buttonGroups/ButtonGroups.js

@@ -0,0 +1,53 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Typography from "../typography/Typography";
+var ButtonGroups = function (_a) {
+    var field = _a.field, form = _a.form, options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, ButtonGroupsProps = __rest(_a, ["field", "form", "options", "disabled"]);
+    var _c = field || {}, _d = _c.name, name = _d === void 0 ? "" : _d, value = _c.value;
+    var _e = useState(-1), hovered = _e[0], setHovered = _e[1];
+    var setFieldValue = (form || {}).setFieldValue;
+    // const touch = touched && touched[name];
+    // const error = errors && errors[name];
+    // const errorMsg = touch && error ? error : undefined;
+    var handleChange = function (buttonValue) {
+        return function (_) {
+            buttonValue && setFieldValue && setFieldValue(name, buttonValue);
+        };
+    };
+    var onMouseEnterHandler = function (index) { return function () {
+        setHovered(index);
+    }; };
+    var onMouseLeaveHandler = function () {
+        setHovered(-1);
+    };
+    return (_jsx("div", __assign({ className: "border-1 border-Gray-300 rounded-lg flex overflow-hidden" }, { children: !!options &&
+            options.constructor === Array &&
+            options.map(function (option, index) {
+                var _a = option || {}, end_icon = _a.end_icon, start_icon = _a.start_icon, label = _a.label, buttonValue = _a.value;
+                var isSelected = value && buttonValue === value;
+                console.log(isSelected);
+                var isHovered = index === hovered;
+                return (_jsxs("button", __assign({ disabled: disabled, onMouseEnter: onMouseEnterHandler(index), onMouseLeave: onMouseLeaveHandler, className: "flex items-center justify-center flex-1 h-10\n              ".concat(!disabled && isSelected ? "bg-Primary-50" : "bg-White", "\n              ").concat(index + 1 !== options.length && "border-r-1 border-Gray-300"), onClick: handleChange(buttonValue) }, ButtonGroupsProps, { children: [Boolean(start_icon) && (_jsx("div", __assign({ className: "flex items-center pl-2 ".concat(!label && "pr-2", " ").concat(disabled
+                                ? "text-Gray-300"
+                                : isSelected
+                                    ? "text-Primary-700"
+                                    : isHovered
+                                        ? "text-Gray-800"
+                                        : "text-Gray-500") }, { children: _jsx("span", { className: start_icon }) }))), Boolean(label) && (_jsx("div", __assign({ className: "px-2 ".concat(disabled
+                                ? "text-Gray-300"
+                                : isSelected
+                                    ? "text-Primary-700"
+                                    : isHovered
+                                        ? "text-Gray-800"
+                                        : "text-Gray-700") }, { children: _jsx(Typography, __assign({ variant: "Medium", type: "Text sm" }, { children: label })) }))), Boolean(end_icon) && (_jsx("div", __assign({ className: "flex items-center pr-2 ".concat(!label && "pl-2", " ").concat(disabled
+                                ? "text-Gray-300"
+                                : isSelected
+                                    ? "text-Primary-700"
+                                    : isHovered
+                                        ? "text-Gray-800"
+                                        : "text-Gray-500") }, { children: _jsx("span", { className: end_icon }) })))] }), buttonValue || index));
+            }) })));
+};
+export default ButtonGroups;
+//# sourceMappingURL=ButtonGroups.js.map

package/dist/esm/components/buttonGroups/ButtonGroups.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroups.js","sourceRoot":"","sources":["../../../../src/components/buttonGroups/ButtonGroups.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CardType } from "../types";
+declare const Card: ({ title }: CardType) => JSX.Element;
+export default Card;

package/dist/esm/components/card/Card.js

@@ -0,0 +1,12 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from "../button";
+var Card = function (_a) {
+    var title = _a.title;
+    var handleFooterBtnClick = function () {
+        console.log("footer btn clicked");
+    };
+    return (_jsxs("div", __assign({ className: "relative flex flex-col h-100 " }, { children: [_jsx("div", __assign({ className: "w-full flex p-4 items-center text-center bg-Gray-100 h-20 absolute top-0" }, { children: title })), _jsx("div", __assign({ className: "overflow-y-scroll h-80 my-20" }, { children: _jsxs("div", { children: [_jsx("h3", { children: "Card body" }), _jsx("div", { children: "Card content 1" }), _jsx("div", { children: "Card content" }), _jsx("div", { children: "Card content" }), _jsx("div", { children: "Card content" }), _jsx("div", { children: "Card content" }), _jsx("div", { children: "Card content" }), _jsx("div", { children: "Card content" }), _jsx("div", { children: "Card content" }), _jsx("div", { children: "Card content" }), _jsx("div", { children: "Card content" }), _jsx("div", { children: "Card content" }), _jsx("div", { children: "Card content" }), _jsx("div", { children: "Card content" }), _jsx("div", { children: "Card content" }), _jsx("div", { children: "Card content" })] }) })), _jsxs("div", __assign({ className: "w-full  flex p-4 items-center text-center border-t border-Gray-200 h-20 absolute bottom-0" }, { children: ["footer", _jsx(Button, { hierarchy: "Primary", size: "sm", textField: "Card footer button", disabled: false, onClick: handleFooterBtnClick })] }))] })));
+};
+export default Card;
+//# sourceMappingURL=Card.js.map

package/dist/esm/components/card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/card/Card.tsx"],"names":[],"mappings":";;AAAA,OAAO,MAAM,MAAM,WAAW,CAAC;AAG/B,IAAM,IAAI,GAAG,UAAC,EAAmB;QAAjB,KAAK,WAAA;IACnB,IAAM,oBAAoB,GAAG;QAC3B,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;IACpC,CAAC,CAAC;IAEF,OAAO,CACL,wBAAK,SAAS,EAAC,+BAA+B,iBAC5C,uBAAK,SAAS,EAAC,0EAA0E,gBACtF,KAAK,IACF,EACN,uBAAK,SAAS,EAAC,8BAA8B,gBAC3C,0BACE,qCAAkB,EAClB,2CAAyB,EACzB,yCAAuB,EACvB,yCAAuB,EACvB,yCAAuB,EACvB,yCAAuB,EACvB,yCAAuB,EACvB,yCAAuB,EACvB,yCAAuB,EACvB,yCAAuB,EACvB,yCAAuB,EACvB,yCAAuB,EACvB,yCAAuB,EACvB,yCAAuB,EACvB,yCAAuB,EACvB,yCAAuB,IACnB,IACF,EACN,wBAAK,SAAS,EAAC,2FAA2F,2BAExG,KAAC,MAAM,IACL,SAAS,EAAC,SAAS,EACnB,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,oBAAoB,EAC9B,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,oBAAoB,GAC7B,KACE,KACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/esm/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CheckboxProps } from "../types";
+declare const Checkbox: ({ size, text, secondaryText, disabled, onClick }: CheckboxProps) => JSX.Element;
+export default Checkbox;