@verma-consulting/design-library 0.1.12 → 0.1.14

package/dist/index.mjs

@@ -158,13 +158,22 @@ import { Box } from "@mui/material";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var TabPanel = (props) => {
   const { children, value, index, ...other } = props;
-  return /* @__PURE__ */ jsx2("div", { role: "tabpanel", hidden: value !== index, id: `simple-tabpanel-${index}`, ...other, children: value === index && /* @__PURE__ */ jsx2(Box, { sx: { p: 2 }, children }) });
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      role: "tabpanel",
+      hidden: value !== index,
+      id: `simple-tabpanel-${index}`,
+      ...other,
+      children: value === index && /* @__PURE__ */ jsx2(Box, { sx: { p: 1 }, children })
+    }
+  );
 };
 var TabPanel_default = TabPanel;
 
 // src/index.tsx
 import {
-  useTheme as useTheme7,
+  useTheme as useTheme9,
   styled as styled5,
   createTheme,
   ThemeProvider
@@ -299,12 +308,12 @@ var Logo_default = Logo;
 import { styled } from "@mui/material/styles";
 import {
   useTheme as useTheme2,
+  useMediaQuery as useMediaQuery2,
   Dialog,
   DialogTitle,
   DialogContent,
   DialogActions,
-  IconButton as IconButton2,
-  useMediaQuery as useMediaQuery2
+  IconButton as IconButton2
 } from "@mui/material";
 import { useTheme as useTheme3 } from "@mui/material/styles";
 import { Close } from "@mui/icons-material";
@@ -319,21 +328,37 @@ var BootstrapDialog = styled(Dialog)(({ theme }) => ({
 }));
 var BootstrapDialogTitle = (props) => {
   const { children, onClose, ...other } = props;
-  return /* @__PURE__ */ jsxs3(DialogTitle, { sx: { m: 2, p: 2 }, ...other, children: [
-    children,
-    onClose ? /* @__PURE__ */ jsx4(
-      IconButton2,
-      {
-        onClick: onClose,
-        sx: {
-          position: "absolute",
-          right: 8,
-          top: 8
-        },
-        children: /* @__PURE__ */ jsx4(Close, { color: "primary" })
-      }
-    ) : null
-  ] });
+  return /* @__PURE__ */ jsxs3(
+    DialogTitle,
+    {
+      sx: {
+        px: 3,
+        py: 3,
+        pt: 3.5,
+        pb: 2.5,
+        fontSize: "1.25rem",
+        fontWeight: 600,
+        letterSpacing: "0.02em",
+        lineHeight: 1.35
+      },
+      ...other,
+      children: [
+        children,
+        onClose ? /* @__PURE__ */ jsx4(
+          IconButton2,
+          {
+            onClick: onClose,
+            sx: {
+              position: "absolute",
+              right: 16,
+              top: 16
+            },
+            children: /* @__PURE__ */ jsx4(Close, { color: "primary" })
+          }
+        ) : null
+      ]
+    }
+  );
 };
 var FormDialog = ({ open = false, setOpen, title = "", actions, children, maxWidth = "lg", ...props }) => {
   const theme = useTheme2();
@@ -595,10 +620,121 @@ var Loader = ({ size = 48, color = "primary" }) => {
 };
 var Loader_default = Loader;
 
+// src/SkeletonBar.tsx
+import { Box as Box4, useTheme as useTheme4 } from "@mui/material";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var SHIMMER_KEYFRAMES = {
+  "@keyframes skeletonShimmer": {
+    "0%": { backgroundPosition: "200% 0" },
+    "100%": { backgroundPosition: "-200% 0" }
+  }
+};
+var SkeletonBar = ({
+  width = "100%",
+  height = 24,
+  sx = {}
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const theme = useTheme4();
+  const base = theme.palette.mode === "dark" ? (_b = (_a = theme.palette.grey) == null ? void 0 : _a[700]) != null ? _b : "#424242" : (_d = (_c = theme.palette.grey) == null ? void 0 : _c[200]) != null ? _d : "#e0e0e0";
+  const highlight = theme.palette.mode === "dark" ? (_f = (_e = theme.palette.grey) == null ? void 0 : _e[600]) != null ? _f : "#616161" : (_h = (_g = theme.palette.grey) == null ? void 0 : _g[100]) != null ? _h : "#f5f5f5";
+  return /* @__PURE__ */ jsx9(
+    Box4,
+    {
+      sx: {
+        ...SHIMMER_KEYFRAMES,
+        borderRadius: 2,
+        height,
+        width,
+        maxWidth: "100%",
+        overflow: "hidden",
+        background: `linear-gradient(90deg, ${base} 0%, ${highlight} 20%, ${base} 40%, ${base} 100%)`,
+        backgroundSize: "200% 100%",
+        animation: "skeletonShimmer 1.4s ease-in-out infinite",
+        ...sx
+      }
+    }
+  );
+};
+var SkeletonBar_default = SkeletonBar;
+
+// src/EmptyState.tsx
+import React4 from "react";
+import { Box as Box5, Typography as Typography3, useTheme as useTheme5 } from "@mui/material";
+import { StorageOutlined } from "@mui/icons-material";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var EmptyState = ({ label, m = 8, icon }) => {
+  var _a, _b, _c, _d;
+  const theme = useTheme5();
+  const text = label != null ? label : "No data here";
+  const iconColor = theme.palette.mode === "dark" ? (_b = (_a = theme.palette.grey) == null ? void 0 : _a[600]) != null ? _b : "rgba(255,255,255,0.25)" : (_d = (_c = theme.palette.grey) == null ? void 0 : _c[300]) != null ? _d : "rgba(0,0,0,0.18)";
+  const iconEl = icon != null && React4.isValidElement(icon) ? icon : /* @__PURE__ */ jsx10(
+    StorageOutlined,
+    {
+      sx: {
+        fontSize: 72,
+        color: iconColor,
+        display: "block"
+      }
+    }
+  );
+  return /* @__PURE__ */ jsxs6(
+    Box5,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: 140,
+        m,
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsx10(
+          Box5,
+          {
+            sx: {
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              pointerEvents: "none",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: iconEl
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          Typography3,
+          {
+            variant: "subtitle1",
+            align: "center",
+            sx: {
+              position: "relative",
+              zIndex: 1,
+              fontWeight: 600,
+              fontSize: "1rem",
+              letterSpacing: "0.01em",
+              color: "text.secondary",
+              maxWidth: 360,
+              lineHeight: 1.5
+            },
+            children: text
+          }
+        )
+      ]
+    }
+  );
+};
+var EmptyState_default = EmptyState;
+
 // src/Pill.tsx
-import { Button as Button2, Typography as Typography3, Icon, useTheme as useTheme4 } from "@mui/material";
+import { Button as Button2, Typography as Typography4, Icon, useTheme as useTheme6 } from "@mui/material";
 import { makeStyles as makeStyles3 } from "@mui/styles";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var useStyles3 = makeStyles3((theme) => ({
   button: {
     padding: "4px 8px 4px 8px",
@@ -622,9 +758,9 @@ var Pill = ({
   label = "",
   disabled = false
 }) => {
-  const theme = useTheme4();
+  const theme = useTheme6();
   const classes = useStyles3();
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     Button2,
     {
       variant: isSelected ? "contained" : "outlined",
@@ -635,8 +771,8 @@ var Pill = ({
         textTransform: "none"
       },
       onClick,
-      children: /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center" }, children: [
-        leftIcon && /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center" }, children: [
+        leftIcon && /* @__PURE__ */ jsx11(
           Icon,
           {
             className: leftIcon,
@@ -646,8 +782,8 @@ var Pill = ({
             "data-testid": "pill-left-icon"
           }
         ),
-        /* @__PURE__ */ jsx9(Typography3, { variant: "subtitle", color: "inherit", fontWeight: "bold", children: label }),
-        rightIcon && /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx11(Typography4, { variant: "subtitle", color: "inherit", fontWeight: "bold", children: label }),
+        rightIcon && /* @__PURE__ */ jsx11(
           Icon,
           {
             className: rightIcon,
@@ -666,8 +802,8 @@ var Pill_default = Pill;
 // src/IOSSwitch.tsx
 import { styled as styled4 } from "@mui/material/styles";
 import Switch from "@mui/material/Switch";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var IOSSwitch = styled4((props) => /* @__PURE__ */ jsx10(Switch, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props }))(({ theme }) => ({
+import { jsx as jsx12 } from "react/jsx-runtime";
+var IOSSwitch = styled4((props) => /* @__PURE__ */ jsx12(Switch, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props }))(({ theme }) => ({
   width: 46,
   height: 30,
   padding: 0,
@@ -717,14 +853,14 @@ var IOSSwitch_default = IOSSwitch;
 // src/StatusPill.tsx
 import { Chip } from "@mui/material";
 import { userStatus } from "@verma-consulting/common-library";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var statusColorMap = {
   [userStatus.Pending]: "warning",
   [userStatus.Active]: "success",
   [userStatus.Inactive]: "error",
   [userStatus.Invited]: "info"
 };
-var StatusPill = ({ status }) => /* @__PURE__ */ jsx11(
+var StatusPill = ({ status }) => /* @__PURE__ */ jsx13(
   Chip,
   {
     label: status,
@@ -739,7 +875,7 @@ var StatusPill_default = StatusPill;
 import { useState as useState2 } from "react";
 import { Tooltip as Tooltip2, IconButton as IconButton4, Popover } from "@mui/material";
 import { MoreHoriz } from "@mui/icons-material";
-import { Fragment, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var FormPopover = ({ row, children, title }) => {
   const [anchorEl, setAnchorEl] = useState2(null);
   const handleClick = (event) => {
@@ -749,8 +885,8 @@ var FormPopover = ({ row, children, title }) => {
     setAnchorEl(null);
   };
   const open = Boolean(anchorEl);
-  return /* @__PURE__ */ jsxs7(Fragment, { children: [
-    /* @__PURE__ */ jsx12(Tooltip2, { title, children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs8(Fragment, { children: [
+    /* @__PURE__ */ jsx14(Tooltip2, { title, children: /* @__PURE__ */ jsx14(
       IconButton4,
       {
         onClick: handleClick,
@@ -765,10 +901,10 @@ var FormPopover = ({ row, children, title }) => {
             backgroundColor: "#f0f0f0"
           }
         },
-        children: /* @__PURE__ */ jsx12(MoreHoriz, { fontSize: "inherit", color: "primary" })
+        children: /* @__PURE__ */ jsx14(MoreHoriz, { fontSize: "inherit", color: "primary" })
       }
     ) }),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx14(
       Popover,
       {
         open,
@@ -786,18 +922,18 @@ var FormPopover = ({ row, children, title }) => {
 var FormPopover_default = FormPopover;
 
 // src/SearchableSelect.tsx
-import React5, { useEffect as useEffect2, useRef as useRef2, useState as useState3, useMemo } from "react";
+import React6, { useEffect as useEffect2, useRef as useRef2, useState as useState3, useMemo } from "react";
 import {
   Autocomplete,
   TextField,
-  Typography as Typography4,
+  Typography as Typography5,
   FormLabel as FormLabel2,
   FormControl as FormControl2,
   IconButton as IconButton5
 } from "@mui/material";
 import { Clear as Clear2 } from "@mui/icons-material";
 import { makeStyles as makeStyles4 } from "@mui/styles";
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var useStyles4 = makeStyles4(() => ({
   defaultMode: {
     padding: "14px 8px",
@@ -816,7 +952,7 @@ var useStyles4 = makeStyles4(() => ({
     whiteSpace: "pre-wrap"
   }
 }));
-var SearchableSelect = React5.memo(
+var SearchableSelect = React6.memo(
   ({
     name,
     label,
@@ -884,7 +1020,7 @@ var SearchableSelect = React5.memo(
       }
     }, [selected, multiple]);
     const isValueEmpty = !value.trim();
-    return editMode ? /* @__PURE__ */ jsx13(FormControl2, { fullWidth: true, style, disabled, size, children: /* @__PURE__ */ jsx13(
+    return editMode ? /* @__PURE__ */ jsx15(FormControl2, { fullWidth: true, style, disabled, size, children: /* @__PURE__ */ jsx15(
       Autocomplete,
       {
         multiple,
@@ -914,7 +1050,7 @@ var SearchableSelect = React5.memo(
         autoHighlight: true,
         getOptionLabel: (option) => option.label,
         isOptionEqualToValue: (option, val) => option.value === val.value,
-        renderInput: (params) => /* @__PURE__ */ jsx13(
+        renderInput: (params) => /* @__PURE__ */ jsx15(
           TextField,
           {
             ...params,
@@ -924,7 +1060,7 @@ var SearchableSelect = React5.memo(
             inputRef,
             InputProps: {
               ...params.InputProps,
-              endAdornment: /* @__PURE__ */ jsx13(Fragment2, { children: !isValueEmpty && /* @__PURE__ */ jsx13(
+              endAdornment: /* @__PURE__ */ jsx15(Fragment2, { children: !isValueEmpty && /* @__PURE__ */ jsx15(
                 IconButton5,
                 {
                   "aria-label": `clear ${name}`,
@@ -934,7 +1070,7 @@ var SearchableSelect = React5.memo(
                     backgroundColor: "transparent",
                     boxShadow: "none"
                   },
-                  children: /* @__PURE__ */ jsx13(Clear2, { fontSize: "inherit" })
+                  children: /* @__PURE__ */ jsx15(Clear2, { fontSize: "inherit" })
                 }
               ) })
             }
@@ -945,7 +1081,7 @@ var SearchableSelect = React5.memo(
           setOpen(false);
         }
       }
-    ) }) : /* @__PURE__ */ jsxs8(
+    ) }) : /* @__PURE__ */ jsxs9(
       "div",
       {
         ref: wrapperRef,
@@ -958,8 +1094,8 @@ var SearchableSelect = React5.memo(
         className: classes.defaultMode,
         style,
         children: [
-          /* @__PURE__ */ jsx13(FormLabel2, { className: classes.formLabel, children: label }),
-          /* @__PURE__ */ jsx13(Typography4, { className: classes.formValue, children: displayValue })
+          /* @__PURE__ */ jsx15(FormLabel2, { className: classes.formLabel, children: label }),
+          /* @__PURE__ */ jsx15(Typography5, { className: classes.formValue, children: displayValue })
         ]
       }
     );
@@ -970,15 +1106,15 @@ var SearchableSelect_default = SearchableSelect;
 // src/FormDrawer.tsx
 import {
   Drawer,
-  Typography as Typography5,
-  Box as Box4,
+  Typography as Typography6,
+  Box as Box6,
   IconButton as IconButton6,
   Grid as Grid2,
-  useTheme as useTheme5,
+  useTheme as useTheme7,
   useMediaQuery as useMediaQuery3
 } from "@mui/material";
 import { Close as Close2 } from "@mui/icons-material";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var FormDrawer = ({
   open,
   setOpen,
@@ -986,9 +1122,9 @@ var FormDrawer = ({
   actions,
   children
 }) => {
-  const theme = useTheme5();
+  const theme = useTheme7();
   const mdMatches = useMediaQuery3(theme.breakpoints.down("md"));
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     Drawer,
     {
       anchor: mdMatches ? "bottom" : "right",
@@ -1004,9 +1140,9 @@ var FormDrawer = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx14(Box4, { p: 3, borderBottom: "1px solid #eee", children: /* @__PURE__ */ jsxs9(Grid2, { container: true, children: [
-          /* @__PURE__ */ jsx14(Grid2, { item: true, children: title && /* @__PURE__ */ jsx14(Typography5, { variant: "h6", fontWeight: "bold", children: title }) }),
-          /* @__PURE__ */ jsx14(Grid2, { item: true, children: /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx16(Box6, { p: 3, borderBottom: "1px solid #eee", children: /* @__PURE__ */ jsxs10(Grid2, { container: true, children: [
+          /* @__PURE__ */ jsx16(Grid2, { item: true, children: title && /* @__PURE__ */ jsx16(Typography6, { variant: "h6", fontWeight: "bold", children: title }) }),
+          /* @__PURE__ */ jsx16(Grid2, { item: true, children: /* @__PURE__ */ jsx16(
             IconButton6,
             {
               size: "medium",
@@ -1017,13 +1153,13 @@ var FormDrawer = ({
                 right: 8,
                 zIndex: 2
               },
-              children: /* @__PURE__ */ jsx14(Close2, { fontSize: "inherit" })
+              children: /* @__PURE__ */ jsx16(Close2, { fontSize: "inherit" })
             }
           ) })
         ] }) }),
-        /* @__PURE__ */ jsx14(Box4, { flex: 1, overflow: "auto", p: 3, children }),
-        actions && /* @__PURE__ */ jsx14(
-          Box4,
+        /* @__PURE__ */ jsx16(Box6, { flex: 1, overflow: "auto", p: 3, children }),
+        actions && /* @__PURE__ */ jsx16(
+          Box6,
           {
             p: 2,
             borderTop: "1px solid #eee",
@@ -1049,15 +1185,15 @@ import {
   useState as useState4
 } from "react";
 import {
-  Box as Box5,
+  Box as Box7,
   Stack,
   TextField as TextField2,
   MenuItem,
-  useTheme as useTheme6,
+  useTheme as useTheme8,
   useMediaQuery as useMediaQuery4
 } from "@mui/material";
 import { constants } from "@verma-consulting/common-library";
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 var PhoneNumberField = ({
   value = "",
   onChange,
@@ -1068,7 +1204,7 @@ var PhoneNumberField = ({
   autoFocus = false,
   onBlur
 }) => {
-  const theme = useTheme6();
+  const theme = useTheme8();
   const smMatches = useMediaQuery4(theme.breakpoints.down("sm"));
   const countries = constants.COUNTRIES || [];
   const [country, setCountry] = useState4(defaultCountry);
@@ -1159,14 +1295,14 @@ var PhoneNumberField = ({
       onBlur == null ? void 0 : onBlur();
     }
   };
-  return /* @__PURE__ */ jsx15(
-    Box5,
+  return /* @__PURE__ */ jsx17(
+    Box7,
     {
       ref: wrapperRef,
       onFocusCapture: () => setIsFocused(true),
       onBlurCapture: handleWrapperBlur,
       sx: { display: "flex", alignItems: "center", width: "100%" },
-      children: /* @__PURE__ */ jsxs10(
+      children: /* @__PURE__ */ jsxs11(
         Stack,
         {
           direction: "row",
@@ -1174,7 +1310,7 @@ var PhoneNumberField = ({
           alignItems: "center",
           sx: { width: "100%" },
           children: [
-            /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsx17(
               TextField2,
               {
                 select: true,
@@ -1201,7 +1337,7 @@ var PhoneNumberField = ({
                   },
                   onClose: () => setSelectOpen(false)
                 },
-                children: countries.map((option) => /* @__PURE__ */ jsxs10(MenuItem, { value: option.code, children: [
+                children: countries.map((option) => /* @__PURE__ */ jsxs11(MenuItem, { value: option.code, children: [
                   option.code,
                   " (+",
                   option.phone,
@@ -1209,7 +1345,7 @@ var PhoneNumberField = ({
                 ] }, option.code))
               }
             ),
-            /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsx17(
               TextField2,
               {
                 label,
@@ -1242,6 +1378,7 @@ var PhoneNumberField = ({
 var PhoneNumberField_default = PhoneNumberField;
 export {
   ClearableSelect_default as ClearableSelect,
+  EmptyState_default as EmptyState,
   FormDialog_default as FormDialog,
   FormDrawer_default as FormDrawer,
   FormPopover_default as FormPopover,
@@ -1254,12 +1391,13 @@ export {
   PhoneNumberField_default as PhoneNumberField,
   Pill_default as Pill,
   SearchableSelect_default as SearchableSelect,
+  SkeletonBar_default as SkeletonBar,
   StatusPill_default as StatusPill,
   TabPanel_default as TabPanel,
   ThemeProvider,
   createTheme,
   makeStyles5 as makeStyles,
   styled5 as styled,
-  useTheme7 as useTheme
+  useTheme9 as useTheme
 };
 //# sourceMappingURL=index.mjs.map