@ncino/styles 10.0.4 → 10.1.0

package/dist/gator/themes/MUIGatorTheme.js

@@ -7,22 +7,23 @@ import * as g from "./components/button.js";
 import * as h from "./components/card.js";
 import * as c from "./components/checkbox.js";
 import * as f from "./components/chip.js";
-import * as d from "./components/dialog.js";
-import * as p from "./components/fab.js";
+import * as p from "./components/dialog.js";
+import * as d from "./components/fab.js";
 import * as y from "./components/form-control.js";
-import * as u from "./components/radio.js";
-import * as _ from "./components/select.js";
-import * as b from "./components/switch.js";
-import * as v from "./components/table.js";
-import * as F from "./components/tabs.js";
-import * as W from "./components/text-field.js";
-import { createTheme as S } from "@mui/material/styles";
+import * as u from "./components/menu.js";
+import * as _ from "./components/radio.js";
+import * as b from "./components/select.js";
+import * as v from "./components/switch.js";
+import * as F from "./components/table.js";
+import * as W from "./components/tabs.js";
+import * as S from "./components/text-field.js";
+import { createTheme as z } from "@mui/material/styles";
 /* empty css                              */
 /* empty css                             */
-import { gatorShadows as z, gatorBorderRadius as O, gatorSpacing as x, gatorTypography as t, gatorColorValues as e } from "./utils/themeConfig.js";
-const H = /* @__PURE__ */ Object.assign({ "./components/accordion.ts": a, "./components/alert.ts": r, "./components/autocomplete.ts": s, "./components/avatar.ts": l, "./components/badge.ts": m, "./components/button.ts": g, "./components/card.ts": h, "./components/checkbox.ts": c, "./components/chip.ts": f, "./components/dialog.ts": d, "./components/fab.ts": p, "./components/form-control.ts": y, "./components/radio.ts": u, "./components/select.ts": _, "./components/switch.ts": b, "./components/table.ts": v, "./components/tabs.ts": F, "./components/text-field.ts": W }), B = Object.values(H).reduce((n, i) => (Object.keys(i).forEach((o) => {
+import { gatorShadows as O, gatorBorderRadius as x, gatorSpacing as H, gatorTypography as t, gatorColorValues as e } from "./utils/themeConfig.js";
+const B = /* @__PURE__ */ Object.assign({ "./components/accordion.ts": a, "./components/alert.ts": r, "./components/autocomplete.ts": s, "./components/avatar.ts": l, "./components/badge.ts": m, "./components/button.ts": g, "./components/card.ts": h, "./components/checkbox.ts": c, "./components/chip.ts": f, "./components/dialog.ts": p, "./components/fab.ts": d, "./components/form-control.ts": y, "./components/menu.ts": u, "./components/radio.ts": _, "./components/select.ts": b, "./components/switch.ts": v, "./components/table.ts": F, "./components/tabs.ts": W, "./components/text-field.ts": S }), k = Object.values(B).reduce((n, i) => (Object.keys(i).forEach((o) => {
   o.startsWith("MUIGator") && o.includes("Override") && Object.assign(n, i[o]);
-}), n), {}), k = {
+}), n), {}), w = {
   palette: {
     mode: "light",
     primary: e.brand,
@@ -153,15 +154,15 @@ const H = /* @__PURE__ */ Object.assign({ "./components/accordion.ts": a, "./com
       letterSpacing: "var(--letter-spacing-default)"
     }
   },
-  spacing: x,
+  spacing: H,
   shape: {
-    borderRadius: O.xsmall
+    borderRadius: x.xsmall
   },
-  shadows: z,
+  shadows: O,
   // Component-specific default props
   components: {
     // Component overrides
-    ...B,
+    ...k,
     // Additional component overrides not in separate files
     MuiLink: {
       styleOverrides: {
@@ -176,8 +177,8 @@ const H = /* @__PURE__ */ Object.assign({ "./components/accordion.ts": a, "./com
       }
     }
   }
-}, C = S(k);
+}, R = z(w);
 export {
-  C as default,
-  C as gatorMUITheme
+  R as default,
+  R as gatorMUITheme
 };

package/dist/gator/themes/components/menu.js

@@ -0,0 +1,65 @@
+const r = {
+  MuiMenu: {
+    defaultProps: {
+      disableAutoFocusItem: !1
+    },
+    styleOverrides: {
+      paper: ({ theme: o }) => ({
+        maxWidth: "16rem",
+        marginTop: o.spacing(0.5),
+        borderRadius: o.shape.borderRadius * 4,
+        boxShadow: o.shadows[3],
+        backgroundColor: o.palette.background.default,
+        backgroundImage: "none"
+      }),
+      list: ({ theme: o }) => ({
+        padding: `${o.spacing(1)} 0`
+      })
+    }
+  },
+  MuiMenuItem: {
+    defaultProps: {
+      disableRipple: !0
+    },
+    styleOverrides: {
+      root: ({ theme: o }) => ({
+        fontFamily: o.typography.fontFamily,
+        fontSize: o.typography.body1.fontSize,
+        lineHeight: o.typography.body1.lineHeight,
+        color: o.palette.text.primary,
+        padding: `${o.spacing(1)} ${o.spacing(2)}`,
+        minHeight: "unset",
+        "&:hover": {
+          backgroundColor: o.palette.primary.light
+        },
+        "&.Mui-focusVisible": {
+          outline: `2px solid ${o.palette.primary.main}`,
+          outlineOffset: "-2px",
+          backgroundColor: "transparent"
+        },
+        "&.Mui-selected": {
+          backgroundColor: o.palette.primary.light,
+          fontWeight: o.typography.fontWeightBold,
+          "&:hover": {
+            backgroundColor: o.palette.primary.light
+          }
+        },
+        "&.Mui-disabled": {
+          opacity: 1,
+          color: o.palette.text.disabled
+        }
+      })
+    }
+  },
+  MuiDivider: {
+    styleOverrides: {
+      root: ({ theme: o }) => ({
+        borderColor: o.palette.divider,
+        margin: `${o.spacing(0.5)} 0`
+      })
+    }
+  }
+};
+export {
+  r as MUIGatorMenuOverrides
+};

package/dist/gator/themes/utils/themeConfig.js

@@ -103,7 +103,7 @@ const F = {
   },
   divider: "#BFBFBF"
   // --color-border-primary / --color-neutral-50
-}, a = {
+}, r = {
   fontFamily: {
     body: '"Open Sans", system-ui, -apple-system, sans-serif',
     headings: '"Lexend Deca", system-ui, -apple-system, sans-serif'
@@ -114,7 +114,46 @@ const F = {
     semiBold: 600,
     bold: 700
   }
-}, r = 8, x = {
+}, a = 8, e = {
+  0: "0",
+  // --spacing-0:  0px
+  1: "0.0625rem",
+  // --spacing-1:  1px
+  2: "0.125rem",
+  // --spacing-2:  2px
+  3: "0.25rem",
+  // --spacing-3:  4px
+  4: "0.3125rem",
+  // --spacing-4:  5px
+  5: "0.5rem",
+  // --spacing-5:  8px
+  6: "0.5625rem",
+  // --spacing-6:  9px
+  7: "0.75rem",
+  // --spacing-7:  12px
+  8: "1rem",
+  // --spacing-8:  16px
+  9: "1.25rem",
+  // --spacing-9:  20px
+  10: "1.5rem",
+  // --spacing-10: 24px
+  11: "2rem",
+  // --spacing-11: 32px
+  12: "2.5rem",
+  // --spacing-12: 40px
+  13: "3rem",
+  // --spacing-13: 48px
+  14: "3.5rem",
+  // --spacing-14: 56px
+  15: "4rem",
+  // --spacing-15: 64px
+  16: "4.5rem",
+  // --spacing-16: 72px
+  17: "5rem",
+  // --spacing-17: 80px
+  18: "7.5rem"
+  // --spacing-18: 120px
+}, x = {
   none: 0,
   // --border-radius-no-radius
   xsmall: 2,
@@ -150,6 +189,7 @@ export {
   x as gatorBorderRadius,
   F as gatorColorValues,
   p as gatorShadows,
-  r as gatorSpacing,
-  a as gatorTypography
+  a as gatorSpacing,
+  e as gatorSpacingScale,
+  r as gatorTypography
 };

package/dist/types/gator/themes/components/menu.d.ts

@@ -0,0 +1,62 @@
+export declare const MUIGatorMenuOverrides: {
+    MuiMenu: {
+        defaultProps: {
+            disableAutoFocusItem: boolean;
+        };
+        styleOverrides: {
+            paper: ({ theme }: any) => {
+                maxWidth: string;
+                marginTop: any;
+                borderRadius: number;
+                boxShadow: any;
+                backgroundColor: any;
+                backgroundImage: string;
+            };
+            list: ({ theme }: any) => {
+                padding: string;
+            };
+        };
+    };
+    MuiMenuItem: {
+        defaultProps: {
+            disableRipple: boolean;
+        };
+        styleOverrides: {
+            root: ({ theme }: any) => {
+                fontFamily: any;
+                fontSize: any;
+                lineHeight: any;
+                color: any;
+                padding: string;
+                minHeight: string;
+                '&:hover': {
+                    backgroundColor: any;
+                };
+                '&.Mui-focusVisible': {
+                    outline: string;
+                    outlineOffset: string;
+                    backgroundColor: string;
+                };
+                '&.Mui-selected': {
+                    backgroundColor: any;
+                    fontWeight: any;
+                    '&:hover': {
+                        backgroundColor: any;
+                    };
+                };
+                '&.Mui-disabled': {
+                    opacity: number;
+                    color: any;
+                };
+            };
+        };
+    };
+    MuiDivider: {
+        styleOverrides: {
+            root: ({ theme }: any) => {
+                borderColor: any;
+                margin: string;
+            };
+        };
+    };
+};

package/dist/types/gator/themes/utils/themeConfig.d.ts

@@ -78,6 +78,27 @@ export declare const gatorTypography: {
     };
 };
 export declare const gatorSpacing = 8;
+export declare const gatorSpacingScale: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    11: string;
+    12: string;
+    13: string;
+    14: string;
+    15: string;
+    16: string;
+    17: string;
+    18: string;
+};
 export declare const gatorBorderRadius: {
     none: number;
     xsmall: number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ncino/styles",
   "author": "nCino",
-  "version": "10.0.4",
+  "version": "10.1.0",
   "description": "nCino Shared Web Component Styling",
   "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
   "publishConfig": {