@verma-consulting/design-library 0.1.39 → 0.1.40

package/dist/index.mjs

@@ -212,7 +212,7 @@ var TablePagination_default = TablePagination;
 
 // src/index.tsx
 import {
-  useTheme as useTheme12,
+  useTheme as useTheme13,
   styled as styled5,
   createTheme,
   ThemeProvider
@@ -358,7 +358,7 @@ import { Close } from "@mui/icons-material";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var BootstrapDialog = styled(Dialog)(({ theme }) => ({
   "& .MuiDialog-paper": {
-    borderRadius: "24px"
+    borderRadius: 24
   },
   "& .MuiDialogContent-root": {
     padding: theme.spacing(4)
@@ -432,8 +432,8 @@ var FormDialog = ({
 var FormDialog_default = FormDialog;
 
 // src/InputFileUpload.tsx
-import { alpha as alpha3, styled as styled2 } from "@mui/material/styles";
-import { Button } from "@mui/material";
+import { alpha as alpha3, styled as styled2, useTheme as useTheme4 } from "@mui/material/styles";
+import { Box as Box3, Typography as Typography2 } from "@mui/material";
 import { CloudUpload } from "@mui/icons-material";
 
 // src/glassStyles.ts
@@ -449,6 +449,9 @@ var glassSurface = (theme) => ({
   WebkitBackdropFilter: "blur(18px) saturate(155%)",
   boxShadow: theme.palette.mode === "dark" ? "0 16px 40px rgba(0,0,0,0.34)" : "0 14px 34px rgba(15, 23, 42, 0.12)"
 });
+var glassHover = (theme) => ({
+  background: theme.palette.mode === "dark" ? `linear-gradient(160deg, ${alpha2("#374151", 0.8)} 0%, ${alpha2("#1F2937", 0.74)} 100%)` : `linear-gradient(160deg, ${alpha2("#FFFFFF", 0.97)} 0%, ${alpha2("#EEF5FF", 0.86)} 100%)`
+});
 
 // src/InputFileUpload.tsx
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -463,38 +466,118 @@ var VisuallyHiddenInput = styled2("input")({
   whiteSpace: "nowrap",
   width: 1
 });
-var InputFileUpload = ({ name = "", onChange = () => null, title = "" }) => /* @__PURE__ */ jsxs3(
-  Button,
-  {
-    role: void 0,
-    component: "label",
-    size: "small",
-    variant: "contained",
-    tabIndex: -1,
-    startIcon: /* @__PURE__ */ jsx5(CloudUpload, { fontSize: "inherit" }),
-    sx: {
-      ...(theme) => glassSurface(theme),
-      textTransform: "none",
-      borderRadius: 999,
-      px: 2.25,
-      py: 0.75,
-      color: "text.primary",
-      borderColor: (theme) => alpha3(theme.palette.primary.main, 0.24),
-      "&:hover": {
-        borderColor: (theme) => alpha3(theme.palette.primary.main, 0.42)
-      }
-    },
-    children: [
-      title,
-      /* @__PURE__ */ jsx5(VisuallyHiddenInput, { type: "file", name, onChange })
-    ]
-  }
-);
+var InputFileUpload = ({
+  name = "",
+  onChange = () => null,
+  title = "Choose file",
+  subtitle = "Tap to browse",
+  accept,
+  multiple,
+  disabled = false,
+  fullWidth = false
+}) => {
+  const theme = useTheme4();
+  return /* @__PURE__ */ jsxs3(
+    Box3,
+    {
+      component: "label",
+      sx: (t) => ({
+        ...glassSurface(t),
+        display: fullWidth ? "flex" : "inline-flex",
+        alignItems: "center",
+        gap: 2,
+        width: fullWidth ? "100%" : "auto",
+        maxWidth: "100%",
+        px: 2.25,
+        py: 1.75,
+        borderRadius: 2.5,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.52 : 1,
+        pointerEvents: disabled ? "none" : "auto",
+        transition: "box-shadow 0.2s ease, transform 0.2s ease",
+        borderStyle: "dashed",
+        borderWidth: 1,
+        borderColor: alpha3(
+          t.palette.primary.main,
+          t.palette.mode === "dark" ? 0.35 : 0.28
+        ),
+        "&:hover": !disabled ? {
+          ...glassHover(t),
+          borderColor: alpha3(t.palette.primary.main, 0.45),
+          boxShadow: t.palette.mode === "dark" ? "0 12px 28px rgba(0,0,0,0.38)" : "0 12px 28px rgba(15, 23, 42, 0.12)"
+        } : void 0,
+        "&:focus-within": {
+          outline: `2px solid ${alpha3(t.palette.primary.main, 0.45)}`,
+          outlineOffset: 2
+        }
+      }),
+      children: [
+        /* @__PURE__ */ jsx5(
+          Box3,
+          {
+            "aria-hidden": true,
+            sx: {
+              flexShrink: 0,
+              width: 44,
+              height: 44,
+              borderRadius: 2,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: alpha3(
+                theme.palette.primary.main,
+                theme.palette.mode === "dark" ? 0.22 : 0.12
+              ),
+              border: `1px solid ${alpha3(theme.palette.primary.main, 0.25)}`,
+              color: "primary.main"
+            },
+            children: /* @__PURE__ */ jsx5(CloudUpload, { sx: { fontSize: 22 } })
+          }
+        ),
+        /* @__PURE__ */ jsxs3(Box3, { sx: { flex: 1, minWidth: 0, textAlign: "left" }, children: [
+          /* @__PURE__ */ jsx5(
+            Typography2,
+            {
+              variant: "subtitle2",
+              component: "span",
+              display: "block",
+              fontWeight: 700,
+              color: "text.primary",
+              letterSpacing: "-0.01em",
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            Typography2,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              display: "block",
+              sx: { mt: 0.25 },
+              children: subtitle
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx5(
+          VisuallyHiddenInput,
+          {
+            type: "file",
+            name,
+            onChange,
+            accept,
+            multiple,
+            disabled
+          }
+        )
+      ]
+    }
+  );
+};
 var InputFileUpload_default = InputFileUpload;
 
 // src/ImageUploadAvatar.tsx
 import { useEffect, useRef, useState } from "react";
-import { Box as Box3, IconButton as IconButton2 } from "@mui/material";
+import { Box as Box4, IconButton as IconButton2 } from "@mui/material";
 import { alpha as alpha4, styled as styled3 } from "@mui/material/styles";
 import { CloudUpload as CloudUpload2, Close as CloseIcon } from "@mui/icons-material";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -508,7 +591,7 @@ var HiddenInput = styled3("input")({
   clip: "rect(0 0 0 0)",
   border: 0
 });
-var Wrapper = styled3(Box3, {
+var Wrapper = styled3(Box4, {
   shouldForwardProp: (prop) => prop !== "variant" && prop !== "size"
 })(({ theme, size, variant }) => ({
   position: "relative",
@@ -529,7 +612,7 @@ var PreviewImg = styled3("img")({
   objectFit: "cover",
   display: "block"
 });
-var Overlay = styled3(Box3)(({ theme }) => ({
+var Overlay = styled3(Box4)(({ theme }) => ({
   position: "absolute",
   inset: 0,
   display: "flex",
@@ -637,12 +720,8 @@ var ImageUploadAvatar_default = ImageUploadAvatar;
 
 // src/FormSnackBar.tsx
 import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
-import {
-  Alert,
-  Grow,
-  IconButton as IconButton3
-} from "@mui/material";
-import { alpha as alpha5, useTheme as useTheme4 } from "@mui/material/styles";
+import { Alert, Grow, IconButton as IconButton3 } from "@mui/material";
+import { alpha as alpha5, useTheme as useTheme5 } from "@mui/material/styles";
 import CloseIcon2 from "@mui/icons-material/Close";
 import { constants } from "@verma-consulting/common-library";
 import { jsx as jsx7 } from "react/jsx-runtime";
@@ -671,14 +750,12 @@ var FormSnackBar = ({
   autoHideDuration = 3500
 }) => {
   var _a2, _b;
-  const theme = useTheme4();
+  const theme = useTheme5();
   const [queue, setQueue] = useState2([]);
   const idRef = useRef2(0);
   const prevOpenRef = useRef2(!!(snackBar == null ? void 0 : snackBar.open));
   const prevSignatureRef = useRef2("");
-  const timersRef = useRef2(
-    {}
-  );
+  const timersRef = useRef2({});
   const type = (_a2 = snackBar.type) != null ? _a2 : "";
   const message = (_b = snackBar.message) != null ? _b : "";
   const severity = isSnackbarType(type) ? type : "info";
@@ -750,7 +827,7 @@ var FormSnackBar = ({
             sx: {
               width: "100%",
               pointerEvents: "auto",
-              borderRadius: 3,
+              borderRadius: 2,
               px: { xs: 1.25, sm: 1.5 },
               py: 0.875,
               alignItems: "center",
@@ -837,7 +914,7 @@ var Loader = ({ size = 48, color = "primary" }) => {
 var Loader_default = Loader;
 
 // src/SkeletonBar.tsx
-import { Box as Box4, useTheme as useTheme5 } from "@mui/material";
+import { Box as Box5, useTheme as useTheme6 } from "@mui/material";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var SHIMMER_KEYFRAMES = {
   "@keyframes skeletonShimmer": {
@@ -851,11 +928,11 @@ var SkeletonBar = ({
   sx = {}
 }) => {
   var _a2, _b, _c, _d, _e, _f, _g, _h;
-  const theme = useTheme5();
+  const theme = useTheme6();
   const base = theme.palette.mode === "dark" ? (_b = (_a2 = theme.palette.grey) == null ? void 0 : _a2[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,
+    Box5,
     {
       sx: {
         ...SHIMMER_KEYFRAMES,
@@ -876,11 +953,11 @@ var SkeletonBar_default = SkeletonBar;
 
 // src/EmptyState.tsx
 import React5 from "react";
-import { Box as Box5, Typography as Typography2, useTheme as useTheme6 } from "@mui/material";
+import { Box as Box6, Typography as Typography3, useTheme as useTheme7 } from "@mui/material";
 import { DatasetOutlined } from "@mui/icons-material";
 import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var EmptyState = ({ label, m = 8, icon }) => {
-  const theme = useTheme6();
+  const theme = useTheme7();
   const text = label != null ? label : "No data created yet";
   const iconColor = theme.palette.mode === "dark" ? "rgba(255,255,255,0.42)" : "rgba(0,0,0,0.42)";
   const labelColor = theme.palette.mode === "dark" ? "rgba(255,255,255,0.50)" : "rgba(0,0,0,0.38)";
@@ -895,7 +972,7 @@ var EmptyState = ({ label, m = 8, icon }) => {
     }
   );
   return /* @__PURE__ */ jsxs5(
-    Box5,
+    Box6,
     {
       sx: {
         display: "flex",
@@ -911,7 +988,7 @@ var EmptyState = ({ label, m = 8, icon }) => {
       children: [
         iconEl,
         /* @__PURE__ */ jsx10(
-          Typography2,
+          Typography3,
           {
             variant: "body2",
             align: "center",
@@ -933,8 +1010,8 @@ var EmptyState = ({ label, m = 8, icon }) => {
 var EmptyState_default = EmptyState;
 
 // src/Pill.tsx
-import { Button as Button2, Typography as Typography3, Icon } from "@mui/material";
-import { alpha as alpha7, useTheme as useTheme7 } from "@mui/material/styles";
+import { Button, Typography as Typography4, Icon } from "@mui/material";
+import { alpha as alpha7, useTheme as useTheme8 } from "@mui/material/styles";
 import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var Pill = ({
   variant = "filter",
@@ -946,15 +1023,15 @@ var Pill = ({
   label = "",
   disabled = false
 }) => {
-  const theme = useTheme7();
+  const theme = useTheme8();
   return /* @__PURE__ */ jsx11(
-    Button2,
+    Button,
     {
       variant: isSelected ? "contained" : "outlined",
       color: color || "primary",
       sx: {
         ...glassSurface(theme),
-        borderRadius: "999px",
+        borderRadius: 16,
         padding: "8px 16px",
         minHeight: 38,
         textTransform: "none",
@@ -978,7 +1055,7 @@ var Pill = ({
             "data-testid": "pill-left-icon"
           }
         ),
-        /* @__PURE__ */ jsx11(Typography3, { variant: "subtitle2", color: "inherit", fontWeight: 700, children: label }),
+        /* @__PURE__ */ jsx11(Typography4, { variant: "subtitle2", color: "inherit", fontWeight: 700, children: label }),
         rightIcon && /* @__PURE__ */ jsx11(
           Icon,
           {
@@ -1037,7 +1114,7 @@ var IOSSwitch = styled4((props) => /* @__PURE__ */ jsx12(Switch, { focusVisibleC
     boxShadow: theme.palette.mode === "dark" ? "0 2px 8px rgba(0,0,0,0.38)" : "0 2px 6px rgba(15,23,42,0.24)"
   },
   "& .MuiSwitch-track": {
-    borderRadius: 30 / 2,
+    borderRadius: 16,
     background: theme.palette.mode === "light" ? "linear-gradient(120deg, rgba(245,248,255,0.92) 0%, rgba(224,232,245,0.92) 100%)" : "linear-gradient(120deg, rgba(55,65,81,0.74) 0%, rgba(31,41,55,0.8) 100%)",
     border: `1px solid ${alpha8("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.56)}`,
     backdropFilter: "blur(10px) saturate(145%)",
@@ -1052,7 +1129,7 @@ var IOSSwitch_default = IOSSwitch;
 
 // src/StatusPill.tsx
 import { Chip } from "@mui/material";
-import { alpha as alpha9, useTheme as useTheme8 } from "@mui/material/styles";
+import { alpha as alpha9, useTheme as useTheme9 } from "@mui/material/styles";
 import { userStatus } from "@verma-consulting/common-library";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var statusColorMap = {
@@ -1063,7 +1140,7 @@ var statusColorMap = {
 };
 var StatusPill = ({ status }) => {
   var _a2, _b, _c;
-  const theme = useTheme8();
+  const theme = useTheme9();
   return /* @__PURE__ */ jsx13(
     Chip,
     {
@@ -1073,7 +1150,7 @@ var StatusPill = ({ status }) => {
         ...glassSurface(theme),
         minHeight: 38,
         fontWeight: 700,
-        borderRadius: "999px",
+        borderRadius: 16,
         px: 1.25,
         letterSpacing: "0.01em",
         color: (_a2 = statusColorMap[status]) != null ? _a2 : theme.palette.text.primary,
@@ -1149,12 +1226,12 @@ import React7, { useEffect as useEffect3, useRef as useRef3, useState as useStat
 import {
   Autocomplete,
   TextField,
-  Typography as Typography4,
+  Typography as Typography5,
   FormLabel,
   FormControl,
   IconButton as IconButton5
 } from "@mui/material";
-import { alpha as alpha10, useTheme as useTheme9 } from "@mui/material/styles";
+import { alpha as alpha10, useTheme as useTheme10 } from "@mui/material/styles";
 import { Clear } from "@mui/icons-material";
 import { makeStyles as makeStyles2 } from "@mui/styles";
 import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -1194,7 +1271,7 @@ var SearchableSelect = React7.memo(
     defaultEditMode = false,
     multiple = false
   }) => {
-    const theme = useTheme9();
+    const theme = useTheme10();
     const classes = useStyles2();
     const wrapperRef = useRef3(null);
     const inputRef = useRef3(null);
@@ -1340,7 +1417,7 @@ var SearchableSelect = React7.memo(
             InputProps: {
               ...params.InputProps,
               sx: {
-                borderRadius: 1.75,
+                borderRadius: 2,
                 backdropFilter: "blur(10px)",
                 pr: 1.5,
                 background: glassBackground,
@@ -1400,8 +1477,22 @@ var SearchableSelect = React7.memo(
         className: classes.defaultMode,
         style,
         children: [
-          /* @__PURE__ */ jsx15(FormLabel, { className: classes.formLabel, sx: { color: "text.secondary" }, children: label }),
-          /* @__PURE__ */ jsx15(Typography4, { className: classes.formValue, sx: { color: "text.primary" }, children: displayValue })
+          /* @__PURE__ */ jsx15(
+            FormLabel,
+            {
+              className: classes.formLabel,
+              sx: { color: "text.secondary" },
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx15(
+            Typography5,
+            {
+              className: classes.formValue,
+              sx: { color: "text.primary" },
+              children: displayValue
+            }
+          )
         ]
       }
     );
@@ -1412,11 +1503,11 @@ var SearchableSelect_default = SearchableSelect;
 // src/FormDrawer.tsx
 import {
   Drawer,
-  Typography as Typography5,
-  Box as Box6,
+  Typography as Typography6,
+  Box as Box7,
   IconButton as IconButton6,
   Grid as Grid2,
-  useTheme as useTheme10,
+  useTheme as useTheme11,
   useMediaQuery as useMediaQuery3
 } from "@mui/material";
 import { alpha as alpha11 } from "@mui/material/styles";
@@ -1429,7 +1520,7 @@ var FormDrawer = ({
   actions,
   children
 }) => {
-  const theme = useTheme10();
+  const theme = useTheme11();
   const mdMatches = useMediaQuery3(theme.breakpoints.down("md"));
   return /* @__PURE__ */ jsxs9(
     Drawer,
@@ -1448,12 +1539,12 @@ var FormDrawer = ({
       },
       children: [
         /* @__PURE__ */ jsx16(
-          Box6,
+          Box7,
           {
             p: 3,
             borderBottom: `1px solid ${alpha11(theme.palette.divider, 0.36)}`,
             children: /* @__PURE__ */ jsxs9(Grid2, { container: true, children: [
-              /* @__PURE__ */ jsx16(Grid2, { item: true, children: title && /* @__PURE__ */ jsx16(Typography5, { variant: "h6", fontWeight: "bold", children: title }) }),
+              /* @__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,
                 {
@@ -1472,9 +1563,9 @@ var FormDrawer = ({
             ] })
           }
         ),
-        /* @__PURE__ */ jsx16(Box6, { flex: 1, overflow: "auto", p: 3, children }),
+        /* @__PURE__ */ jsx16(Box7, { flex: 1, overflow: "auto", p: 3, children }),
         actions && /* @__PURE__ */ jsx16(
-          Box6,
+          Box7,
           {
             p: 2,
             borderTop: `1px solid ${alpha11(theme.palette.divider, 0.36)}`,
@@ -1502,11 +1593,11 @@ import {
   useState as useState5
 } from "react";
 import {
-  Box as Box7,
+  Box as Box8,
   Stack,
   TextField as TextField2,
   MenuItem,
-  useTheme as useTheme11,
+  useTheme as useTheme12,
   useMediaQuery as useMediaQuery4
 } from "@mui/material";
 import { alpha as alpha12 } from "@mui/material/styles";
@@ -1522,7 +1613,7 @@ var PhoneNumberField = ({
   autoFocus = false,
   onBlur
 }) => {
-  const theme = useTheme11();
+  const theme = useTheme12();
   const smMatches = useMediaQuery4(theme.breakpoints.down("sm"));
   const countries = constants2.COUNTRIES || [];
   const glassInputSx = {
@@ -1623,7 +1714,7 @@ var PhoneNumberField = ({
     }
   };
   return /* @__PURE__ */ jsx17(
-    Box7,
+    Box8,
     {
       ref: wrapperRef,
       onFocusCapture: () => setIsFocused(true),
@@ -1727,6 +1818,6 @@ export {
   createTheme,
   makeStyles3 as makeStyles,
   styled5 as styled,
-  useTheme12 as useTheme
+  useTheme13 as useTheme
 };
 //# sourceMappingURL=index.mjs.map