@verma-consulting/design-library 0.1.56 → 0.1.58

package/dist/index.d.mts

@@ -33,8 +33,15 @@ type TablePaginationDesignProps = React.ComponentProps<typeof MuiTablePagination
  */
 declare const TablePagination: React.ForwardRefExoticComponent<Omit<TablePaginationDesignProps, "ref"> & React.RefAttributes<unknown>>;
 
+/** Self-contained stack so the wordmark looks consistent without app-level typography theme. */
+declare const LOGO_FONT_STACK = "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"";
 type LogoProps = {
     loggedIn?: boolean;
+    /**
+     * Layout only (not the same as CSS `text-align`):
+     * - `false` — one row: logo and company name side by side.
+     * - `true` — column: logo centered on top, company name centered below.
+     */
     centered?: boolean;
     organization?: {
         name?: string;
@@ -45,6 +52,13 @@ type LogoProps = {
     defaultLogo?: React__default.ReactNode;
     companyComponent?: React__default.ReactNode;
     handleClick?: () => void;
+    /**
+     * When true (default), any MUI `Typography` inside `companyComponent` inherits the same
+     * wordmark styling (font stack, weight, truncation). Turn off for full custom layouts.
+     */
+    harmonizeCompanyTypography?: boolean;
+    /** Merged onto the `companyComponent` wrapper `Box`. */
+    companySlotSx?: object;
 };
 declare const Logo: React__default.FC<LogoProps>;
 
@@ -232,4 +246,4 @@ type OTPFieldProps = {
 };
 declare const OTPField: React__default.FC<OTPFieldProps>;
 
-export { CountrySelect, type CountryType, EmptyState, FormDialog, FormDrawer, FormPopover, FormSnackBar, IOSSwitch, ImageUploadAvatar, InputFileUpload, Loader, Logo, OTPField, type OTPFieldProps, PhoneNumberField, Pill, SearchableSelect, SkeletonBar, StatusPill, TabPanel, TablePagination, type TablePaginationDesignProps };
+export { CountrySelect, type CountryType, EmptyState, FormDialog, FormDrawer, FormPopover, FormSnackBar, IOSSwitch, ImageUploadAvatar, InputFileUpload, LOGO_FONT_STACK, Loader, Logo, OTPField, type OTPFieldProps, PhoneNumberField, Pill, SearchableSelect, SkeletonBar, StatusPill, TabPanel, TablePagination, type TablePaginationDesignProps };

package/dist/index.d.ts

@@ -33,8 +33,15 @@ type TablePaginationDesignProps = React.ComponentProps<typeof MuiTablePagination
  */
 declare const TablePagination: React.ForwardRefExoticComponent<Omit<TablePaginationDesignProps, "ref"> & React.RefAttributes<unknown>>;
 
+/** Self-contained stack so the wordmark looks consistent without app-level typography theme. */
+declare const LOGO_FONT_STACK = "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"";
 type LogoProps = {
     loggedIn?: boolean;
+    /**
+     * Layout only (not the same as CSS `text-align`):
+     * - `false` — one row: logo and company name side by side.
+     * - `true` — column: logo centered on top, company name centered below.
+     */
     centered?: boolean;
     organization?: {
         name?: string;
@@ -45,6 +52,13 @@ type LogoProps = {
     defaultLogo?: React__default.ReactNode;
     companyComponent?: React__default.ReactNode;
     handleClick?: () => void;
+    /**
+     * When true (default), any MUI `Typography` inside `companyComponent` inherits the same
+     * wordmark styling (font stack, weight, truncation). Turn off for full custom layouts.
+     */
+    harmonizeCompanyTypography?: boolean;
+    /** Merged onto the `companyComponent` wrapper `Box`. */
+    companySlotSx?: object;
 };
 declare const Logo: React__default.FC<LogoProps>;
 
@@ -232,4 +246,4 @@ type OTPFieldProps = {
 };
 declare const OTPField: React__default.FC<OTPFieldProps>;
 
-export { CountrySelect, type CountryType, EmptyState, FormDialog, FormDrawer, FormPopover, FormSnackBar, IOSSwitch, ImageUploadAvatar, InputFileUpload, Loader, Logo, OTPField, type OTPFieldProps, PhoneNumberField, Pill, SearchableSelect, SkeletonBar, StatusPill, TabPanel, TablePagination, type TablePaginationDesignProps };
+export { CountrySelect, type CountryType, EmptyState, FormDialog, FormDrawer, FormPopover, FormSnackBar, IOSSwitch, ImageUploadAvatar, InputFileUpload, LOGO_FONT_STACK, Loader, Logo, OTPField, type OTPFieldProps, PhoneNumberField, Pill, SearchableSelect, SkeletonBar, StatusPill, TabPanel, TablePagination, type TablePaginationDesignProps };

package/dist/index.js

@@ -40,6 +40,7 @@ __export(index_exports, {
   IOSSwitch: () => IOSSwitch_default,
   ImageUploadAvatar: () => ImageUploadAvatar_default,
   InputFileUpload: () => InputFileUpload_default,
+  LOGO_FONT_STACK: () => LOGO_FONT_STACK,
   Loader: () => Loader_default,
   Logo: () => Logo_default,
   OTPField: () => OTPField_default,
@@ -276,6 +277,66 @@ var import_styles19 = require("@mui/styles");
 var import_react = require("react");
 var import_material2 = require("@mui/material");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var LOGO_FONT_STACK = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"';
+var wordmarkCore = {
+  fontFamily: LOGO_FONT_STACK,
+  fontWeight: 600,
+  letterSpacing: "-0.015em",
+  lineHeight: 1.35,
+  color: "text.primary"
+};
+function wordmarkSx(centered) {
+  return {
+    ...wordmarkCore,
+    ...centered ? {
+      fontSize: "1.0625rem",
+      textAlign: "center",
+      wordBreak: "break-word"
+    } : {
+      fontSize: "0.9375rem",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    }
+  };
+}
+function companySlotTypographySx(centered) {
+  return {
+    "& .MuiTypography-root": {
+      ...wordmarkCore,
+      fontSize: centered ? "1.0625rem" : "0.9375rem",
+      textAlign: centered ? "center" : "inherit",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      maxWidth: "100%"
+    }
+  };
+}
+function CompanySlot({
+  centered,
+  maxWidth,
+  harmonizeCompanyTypography,
+  companySlotSx,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_material2.Box,
+    {
+      sx: {
+        width: "100%",
+        maxWidth,
+        minWidth: 0,
+        display: "flex",
+        justifyContent: centered ? "center" : "flex-start",
+        alignItems: "center",
+        ...harmonizeCompanyTypography ? companySlotTypographySx(centered) : null,
+        ...companySlotSx
+      },
+      children
+    }
+  );
+}
 var Logo = (0, import_react.memo)(
   ({
     loggedIn = false,
@@ -283,7 +344,9 @@ var Logo = (0, import_react.memo)(
     organization = null,
     defaultLogo = null,
     handleClick = () => null,
-    companyComponent = null
+    companyComponent = null,
+    harmonizeCompanyTypography = true,
+    companySlotSx
   }) => {
     var _a2;
     const theme = (0, import_material2.useTheme)();
@@ -291,6 +354,13 @@ var Logo = (0, import_react.memo)(
     const maxWidth = mdMatches ? 160 : 320;
     const companyName = (organization == null ? void 0 : organization.name) || "\u2013";
     const logoUrl = (_a2 = organization == null ? void 0 : organization.logo) == null ? void 0 : _a2.url;
+    const avatarSx = {
+      fontFamily: LOGO_FONT_STACK,
+      bgcolor: "primary.main",
+      fontWeight: 600,
+      letterSpacing: "-0.02em"
+    };
+    const wm = wordmarkSx(centered);
     if (centered) {
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         import_material2.Grid,
@@ -303,35 +373,31 @@ var Logo = (0, import_react.memo)(
           sx: { cursor: "pointer" },
           onClick: handleClick,
           children: [
-            (logoUrl || defaultLogo) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Grid, { item: true, children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            (logoUrl || defaultLogo) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Grid, { item: true, sx: { display: "flex", justifyContent: "center" }, children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               import_material2.Avatar,
               {
                 alt: companyName || "avatar",
                 src: logoUrl,
                 sx: {
                   width: 64,
-                  // slightly bigger
                   height: 64,
-                  bgcolor: "primary.main",
-                  fontSize: 20,
-                  fontWeight: "bold"
+                  fontSize: "1.125rem",
+                  ...avatarSx
                 },
                 imgProps: { loading: "lazy" },
                 children: (companyName == null ? void 0 : companyName.charAt(0)) || "?"
               }
             ) : defaultLogo }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Grid, { item: true, sx: { maxWidth, textAlign: "center" }, children: loggedIn ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              import_material2.Typography,
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Grid, { item: true, sx: { maxWidth, width: "100%", textAlign: "center" }, children: loggedIn ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Typography, { component: "span", sx: wm, children: companyName }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              CompanySlot,
               {
-                variant: "h6",
-                sx: {
-                  fontFamily: "Courier, monospace",
-                  fontWeight: "bold",
-                  color: "primary.main"
-                },
-                children: companyName
+                centered: true,
+                maxWidth,
+                harmonizeCompanyTypography,
+                companySlotSx,
+                children: companyComponent
               }
-            ) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Box, { sx: { display: "flex", justifyContent: "center" }, children: companyComponent }) })
+            ) })
           ]
         }
       );
@@ -348,7 +414,7 @@ var Logo = (0, import_react.memo)(
         },
         onClick: handleClick,
         children: [
-          (logoUrl || defaultLogo) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Box, { sx: { mr: 1, display: "flex", alignItems: "center" }, children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          (logoUrl || defaultLogo) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Box, { sx: { mr: 1.25, display: "flex", alignItems: "center" }, children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             import_material2.Avatar,
             {
               alt: companyName || "avatar",
@@ -356,30 +422,23 @@ var Logo = (0, import_react.memo)(
               sx: {
                 width: 36,
                 height: 36,
-                bgcolor: "primary.main",
-                fontSize: 14,
-                fontWeight: "bold"
+                fontSize: "0.875rem",
+                ...avatarSx
               },
               imgProps: { loading: "lazy" },
               children: (companyName == null ? void 0 : companyName.charAt(0)) || "?"
             }
           ) : defaultLogo }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Box, { sx: { maxWidth, flexShrink: 1, minWidth: 0 }, children: loggedIn ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_material2.Typography,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Box, { sx: { maxWidth, flexShrink: 1, minWidth: 0 }, children: loggedIn ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Typography, { component: "span", sx: wm, children: companyName }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            CompanySlot,
             {
-              variant: "h6",
-              noWrap: true,
-              sx: {
-                textOverflow: "ellipsis",
-                overflow: "hidden",
-                whiteSpace: "nowrap",
-                fontFamily: "Courier, monospace",
-                fontWeight: "bold",
-                color: "primary.main"
-              },
-              children: companyName
+              centered: false,
+              maxWidth,
+              harmonizeCompanyTypography,
+              companySlotSx,
+              children: companyComponent
             }
-          ) }) : companyComponent })
+          ) })
         ]
       }
     );
@@ -1124,6 +1183,16 @@ var EmptyState_default = EmptyState;
 var import_material10 = require("@mui/material");
 var import_styles9 = require("@mui/material/styles");
 var import_jsx_runtime11 = require("react/jsx-runtime");
+function glassSurface2(theme) {
+  return {
+    backdropFilter: "blur(12px)",
+    WebkitBackdropFilter: "blur(12px)",
+    backgroundColor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : "rgba(255,255,255,0.88)"
+  };
+}
+function isSemanticColor(c) {
+  return c === "warning" || c === "success" || c === "error" || c === "secondary" || c === "info";
+}
 function renderIconSlot(node, side) {
   if (node == null) return null;
   const spacing = side === "left" ? { pr: 1 } : { ml: 1 };
@@ -1166,23 +1235,46 @@ var Pill = ({
   disabled = false
 }) => {
   const theme = (0, import_styles9.useTheme)();
+  const semantic = isSemanticColor(color);
+  const buttonColor = semantic ? color : color === "inherit" ? "inherit" : color != null ? color : "primary";
+  const neutralChrome = !semantic;
+  const hoverShadow = theme.palette.mode === "dark" ? "0 10px 22px rgba(0,0,0,0.34)" : "0 10px 20px rgba(15,23,42,0.14)";
+  let chromeSx;
+  if (neutralChrome) {
+    chromeSx = {
+      borderColor: isSelected ? (0, import_styles9.alpha)(theme.palette.primary.main, 0.34) : (0, import_styles9.alpha)(theme.palette.text.primary, 0.18),
+      color: isSelected ? "primary.main" : "text.primary",
+      "&:hover": {
+        ...glassSurface2(theme),
+        borderColor: (0, import_styles9.alpha)(theme.palette.primary.main, 0.42),
+        boxShadow: hoverShadow
+      }
+    };
+  } else {
+    const c = color;
+    const main = theme.palette[c].main;
+    chromeSx = {
+      borderColor: isSelected ? (0, import_styles9.alpha)(main, 0.34) : (0, import_styles9.alpha)(main, 0.18),
+      color: `${c}.main`,
+      "&:hover": {
+        ...glassSurface2(theme),
+        borderColor: (0, import_styles9.alpha)(main, 0.42),
+        boxShadow: hoverShadow
+      }
+    };
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_material10.Button,
     {
       variant: isSelected ? "contained" : "outlined",
-      color: color != null ? color : "primary",
+      color: buttonColor,
       sx: {
-        ...glassSurface(theme),
+        ...glassSurface2(theme),
         borderRadius: 16,
         padding: "8px 16px",
         minHeight: 38,
         textTransform: "none",
-        borderColor: isSelected ? (0, import_styles9.alpha)(theme.palette.primary.main, 0.34) : (0, import_styles9.alpha)(theme.palette.text.primary, 0.18),
-        color: isSelected ? "primary.main" : "text.primary",
-        "&:hover": {
-          borderColor: (0, import_styles9.alpha)(theme.palette.primary.main, 0.42),
-          boxShadow: theme.palette.mode === "dark" ? "0 10px 22px rgba(0,0,0,0.34)" : "0 10px 20px rgba(15,23,42,0.14)"
-        }
+        ...chromeSx
       },
       onClick,
       disabled,
@@ -2480,6 +2572,7 @@ var OTPField_default = OTPField;
   IOSSwitch,
   ImageUploadAvatar,
   InputFileUpload,
+  LOGO_FONT_STACK,
   Loader,
   Logo,
   OTPField,