@verma-consulting/design-library 0.1.38 → 0.1.40

package/dist/index.d.mts

@@ -67,11 +67,20 @@ declare const FormDialog: ({ open, setOpen, title, actions, children, maxWidth,
     maxWidth?: string | undefined;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const InputFileUpload: ({ name, onChange, title }: {
-    name?: string | undefined;
-    onChange?: (() => null) | undefined;
-    title?: string | undefined;
-}) => react_jsx_runtime.JSX.Element;
+type InputFileUploadProps = {
+    name?: string;
+    onChange?: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
+    /** Primary label (e.g. “Upload document”). */
+    title?: string;
+    /** Secondary line under the title (e.g. accepted types). */
+    subtitle?: string;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    /** Stretch to the width of the parent container. */
+    fullWidth?: boolean;
+};
+declare const InputFileUpload: React__default.FC<InputFileUploadProps>;
 
 type ImageUploadAvatarProps = {
     name?: string;
@@ -162,7 +171,8 @@ interface SearchableSelectProps {
     size?: "small" | "medium";
     style?: React__default.CSSProperties;
     disabled?: boolean;
-    onClear?: () => void;
+    /** If `null` or omitted, the clear control is not shown. Pass a handler to enable clear. */
+    onClear?: (() => void) | null;
     defaultEditMode?: boolean;
     multiple?: boolean;
 }

package/dist/index.d.ts

@@ -67,11 +67,20 @@ declare const FormDialog: ({ open, setOpen, title, actions, children, maxWidth,
     maxWidth?: string | undefined;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const InputFileUpload: ({ name, onChange, title }: {
-    name?: string | undefined;
-    onChange?: (() => null) | undefined;
-    title?: string | undefined;
-}) => react_jsx_runtime.JSX.Element;
+type InputFileUploadProps = {
+    name?: string;
+    onChange?: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
+    /** Primary label (e.g. “Upload document”). */
+    title?: string;
+    /** Secondary line under the title (e.g. accepted types). */
+    subtitle?: string;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    /** Stretch to the width of the parent container. */
+    fullWidth?: boolean;
+};
+declare const InputFileUpload: React__default.FC<InputFileUploadProps>;
 
 type ImageUploadAvatarProps = {
     name?: string;
@@ -162,7 +171,8 @@ interface SearchableSelectProps {
     size?: "small" | "medium";
     style?: React__default.CSSProperties;
     disabled?: boolean;
-    onClear?: () => void;
+    /** If `null` or omitted, the clear control is not shown. Pass a handler to enable clear. */
+    onClear?: (() => void) | null;
     defaultEditMode?: boolean;
     multiple?: boolean;
 }

package/dist/index.js

@@ -393,7 +393,7 @@ var import_icons_material = require("@mui/icons-material");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var BootstrapDialog = (0, import_styles2.styled)(import_material3.Dialog)(({ theme }) => ({
   "& .MuiDialog-paper": {
-    borderRadius: "24px"
+    borderRadius: 24
   },
   "& .MuiDialogContent-root": {
     padding: theme.spacing(4)
@@ -484,6 +484,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, ${(0, import_styles4.alpha)("#374151", 0.8)} 0%, ${(0, import_styles4.alpha)("#1F2937", 0.74)} 100%)` : `linear-gradient(160deg, ${(0, import_styles4.alpha)("#FFFFFF", 0.97)} 0%, ${(0, import_styles4.alpha)("#EEF5FF", 0.86)} 100%)`
+});
 
 // src/InputFileUpload.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -498,33 +501,113 @@ var VisuallyHiddenInput = (0, import_styles5.styled)("input")({
   whiteSpace: "nowrap",
   width: 1
 });
-var InputFileUpload = ({ name = "", onChange = () => null, title = "" }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-  import_material4.Button,
-  {
-    role: void 0,
-    component: "label",
-    size: "small",
-    variant: "contained",
-    tabIndex: -1,
-    startIcon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons_material2.CloudUpload, { fontSize: "inherit" }),
-    sx: {
-      ...(theme) => glassSurface(theme),
-      textTransform: "none",
-      borderRadius: 999,
-      px: 2.25,
-      py: 0.75,
-      color: "text.primary",
-      borderColor: (theme) => (0, import_styles5.alpha)(theme.palette.primary.main, 0.24),
-      "&:hover": {
-        borderColor: (theme) => (0, import_styles5.alpha)(theme.palette.primary.main, 0.42)
-      }
-    },
-    children: [
-      title,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(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 = (0, import_styles5.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_material4.Box,
+    {
+      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: (0, import_styles5.alpha)(
+          t.palette.primary.main,
+          t.palette.mode === "dark" ? 0.35 : 0.28
+        ),
+        "&:hover": !disabled ? {
+          ...glassHover(t),
+          borderColor: (0, import_styles5.alpha)(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 ${(0, import_styles5.alpha)(t.palette.primary.main, 0.45)}`,
+          outlineOffset: 2
+        }
+      }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_material4.Box,
+          {
+            "aria-hidden": true,
+            sx: {
+              flexShrink: 0,
+              width: 44,
+              height: 44,
+              borderRadius: 2,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: (0, import_styles5.alpha)(
+                theme.palette.primary.main,
+                theme.palette.mode === "dark" ? 0.22 : 0.12
+              ),
+              border: `1px solid ${(0, import_styles5.alpha)(theme.palette.primary.main, 0.25)}`,
+              color: "primary.main"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons_material2.CloudUpload, { sx: { fontSize: 22 } })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material4.Box, { sx: { flex: 1, minWidth: 0, textAlign: "left" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_material4.Typography,
+            {
+              variant: "subtitle2",
+              component: "span",
+              display: "block",
+              fontWeight: 700,
+              color: "text.primary",
+              letterSpacing: "-0.01em",
+              children: title
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_material4.Typography,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              display: "block",
+              sx: { mt: 0.25 },
+              children: subtitle
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          VisuallyHiddenInput,
+          {
+            type: "file",
+            name,
+            onChange,
+            accept,
+            multiple,
+            disabled
+          }
+        )
+      ]
+    }
+  );
+};
 var InputFileUpload_default = InputFileUpload;
 
 // src/ImageUploadAvatar.tsx
@@ -707,9 +790,7 @@ var FormSnackBar = ({
   const idRef = (0, import_react3.useRef)(0);
   const prevOpenRef = (0, import_react3.useRef)(!!(snackBar == null ? void 0 : snackBar.open));
   const prevSignatureRef = (0, import_react3.useRef)("");
-  const timersRef = (0, import_react3.useRef)(
-    {}
-  );
+  const timersRef = (0, import_react3.useRef)({});
   const type = (_a2 = snackBar.type) != null ? _a2 : "";
   const message = (_b = snackBar.message) != null ? _b : "";
   const severity = isSnackbarType(type) ? type : "info";
@@ -781,7 +862,7 @@ var FormSnackBar = ({
             sx: {
               width: "100%",
               pointerEvents: "auto",
-              borderRadius: 3,
+              borderRadius: 2,
               px: { xs: 1.25, sm: 1.5 },
               py: 0.875,
               alignItems: "center",
@@ -985,7 +1066,7 @@ var Pill = ({
       color: color || "primary",
       sx: {
         ...glassSurface(theme),
-        borderRadius: "999px",
+        borderRadius: 16,
         padding: "8px 16px",
         minHeight: 38,
         textTransform: "none",
@@ -1068,7 +1149,7 @@ var IOSSwitch = (0, import_styles11.styled)((props) => /* @__PURE__ */ (0, impor
     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 ${(0, import_styles11.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.56)}`,
     backdropFilter: "blur(10px) saturate(145%)",
@@ -1104,7 +1185,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,
@@ -1214,7 +1295,7 @@ var SearchableSelect = import_react6.default.memo(
     size = "small",
     style,
     disabled = false,
-    onClear,
+    onClear = null,
     defaultEditMode = false,
     multiple = false
   }) => {
@@ -1248,8 +1329,6 @@ var SearchableSelect = import_react6.default.memo(
       event.stopPropagation();
       if (onClear) {
         onClear();
-      } else {
-        onChange("");
       }
       setEditMode(false);
       setOpen(false);
@@ -1274,6 +1353,7 @@ var SearchableSelect = import_react6.default.memo(
       }
     }, [selected, multiple]);
     const isValueEmpty = !value.trim();
+    const showClear = onClear != null;
     return editMode ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material13.FormControl, { fullWidth: true, style, disabled, size, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       import_material13.Autocomplete,
       {
@@ -1365,7 +1445,7 @@ var SearchableSelect = import_react6.default.memo(
             InputProps: {
               ...params.InputProps,
               sx: {
-                borderRadius: 1.75,
+                borderRadius: 2,
                 backdropFilter: "blur(10px)",
                 pr: 1.5,
                 background: glassBackground,
@@ -1388,7 +1468,7 @@ var SearchableSelect = import_react6.default.memo(
                 }
               },
               endAdornment: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-                !isValueEmpty && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                showClear && !isValueEmpty && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   import_material13.IconButton,
                   {
                     "aria-label": `clear ${name}`,
@@ -1425,8 +1505,22 @@ var SearchableSelect = import_react6.default.memo(
         className: classes.defaultMode,
         style,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material13.FormLabel, { className: classes.formLabel, sx: { color: "text.secondary" }, children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material13.Typography, { className: classes.formValue, sx: { color: "text.primary" }, children: displayValue })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            import_material13.FormLabel,
+            {
+              className: classes.formLabel,
+              sx: { color: "text.secondary" },
+              children: label
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            import_material13.Typography,
+            {
+              className: classes.formValue,
+              sx: { color: "text.primary" },
+              children: displayValue
+            }
+          )
         ]
       }
     );