@ncino/styles 10.1.0 → 10.2.0

package/dist/gator/themes/MUIGatorTheme.js

@@ -4,8 +4,8 @@ import * as s from "./components/autocomplete.js";
 import * as l from "./components/avatar.js";
 import * as m from "./components/badge.js";
 import * as g from "./components/button.js";
-import * as h from "./components/card.js";
-import * as c from "./components/checkbox.js";
+import * as c from "./components/card.js";
+import * as h from "./components/checkbox.js";
 import * as f from "./components/chip.js";
 import * as p from "./components/dialog.js";
 import * as d from "./components/fab.js";
@@ -17,13 +17,14 @@ 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";
+import * as z from "./components/toggle-button.js";
+import { createTheme as O } from "@mui/material/styles";
 /* empty css                              */
 /* empty css                             */
-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) => {
+import { gatorShadows as x, gatorBorderRadius as B, gatorSpacing as H, gatorTypography as t, gatorColorValues as e } from "./utils/themeConfig.js";
+const k = /* @__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": c, "./components/checkbox.ts": h, "./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, "./components/toggle-button.ts": z }), w = Object.values(k).reduce((n, i) => (Object.keys(i).forEach((o) => {
   o.startsWith("MUIGator") && o.includes("Override") && Object.assign(n, i[o]);
-}), n), {}), w = {
+}), n), {}), M = {
   palette: {
     mode: "light",
     primary: e.brand,
@@ -156,13 +157,13 @@ const B = /* @__PURE__ */ Object.assign({ "./components/accordion.ts": a, "./com
   },
   spacing: H,
   shape: {
-    borderRadius: x.xsmall
+    borderRadius: B.xsmall
   },
-  shadows: O,
+  shadows: x,
   // Component-specific default props
   components: {
     // Component overrides
-    ...k,
+    ...w,
     // Additional component overrides not in separate files
     MuiLink: {
       styleOverrides: {
@@ -177,8 +178,8 @@ const B = /* @__PURE__ */ Object.assign({ "./components/accordion.ts": a, "./com
       }
     }
   }
-}, R = z(w);
+}, D = O(M);
 export {
-  R as default,
-  R as gatorMUITheme
+  D as default,
+  D as gatorMUITheme
 };

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

@@ -8,7 +8,6 @@ const r = {
       root: {
         textTransform: "none",
         fontWeight: o.fontWeight.semiBold,
-        height: "fit-content",
         "&.Mui-focusVisible": {
           boxShadow: "none",
           outline: "2px solid var(--color-border-focus)",
@@ -19,17 +18,23 @@ const r = {
         }
       },
       sizeLarge: {
-        padding: "var(--spacing-7) var(--spacing-8)",
+        height: "3rem",
+        minWidth: "6rem",
+        padding: "0 var(--spacing-8)",
         fontSize: "var(--font-size-body-1)",
         lineHeight: "var(--line-height-body-1)"
       },
       sizeMedium: {
-        padding: "var(--spacing-6) var(--spacing-8)",
+        height: "2.25rem",
+        minWidth: "4rem",
+        padding: "0 var(--spacing-8)",
         fontSize: "var(--font-size-body-2)",
         lineHeight: "var(--line-height-body-2)"
       },
       sizeSmall: {
-        padding: "var(--spacing-4) var(--spacing-7)",
+        height: "1.75rem",
+        minWidth: "3.5rem",
+        padding: "0 var(--spacing-7)",
         fontSize: "var(--font-size-body-3)",
         lineHeight: "var(--line-height-body-3)"
       },

package/dist/gator/themes/components/toggle-button.js

@@ -0,0 +1,90 @@
+import { gatorBorderRadius as r, gatorTypography as a } from "../utils/themeConfig.js";
+const t = {
+  MuiToggleButtonGroup: {
+    styleOverrides: {
+      grouped: ({ theme: o }) => ({
+        "&:not(:first-of-type)": {
+          marginLeft: 0,
+          borderLeft: "none",
+          borderRadius: 0
+        },
+        "&:first-of-type": {
+          borderRadius: `${r.xsmall}px 0 0 ${r.xsmall}px`
+        },
+        "&:last-of-type": {
+          borderRadius: `0 ${r.xsmall}px ${r.xsmall}px 0`
+        },
+        "&:only-child": {
+          borderRadius: `${r.xsmall}px`
+        }
+      })
+    }
+  }
+}, e = {
+  MuiToggleButton: {
+    defaultProps: {
+      disableRipple: !0
+    },
+    styleOverrides: {
+      root: ({ theme: o }) => ({
+        textTransform: "none",
+        fontWeight: a.fontWeight.semiBold,
+        border: `1px solid ${o.palette.primary.main}`,
+        borderRadius: `${r.xsmall}px`,
+        color: o.palette.primary.main,
+        backgroundColor: "transparent",
+        whiteSpace: "nowrap",
+        "&.Mui-focusVisible": {
+          boxShadow: "none",
+          outline: `2px solid ${o.palette.primary.main}`,
+          outlineOffset: "2px"
+        },
+        "&:hover": {
+          boxShadow: o.shadows[2],
+          backgroundColor: "transparent"
+        },
+        "&.Mui-selected": {
+          color: o.palette.primary.contrastText,
+          backgroundColor: o.palette.primary.main,
+          borderColor: o.palette.primary.main,
+          "&:hover": {
+            boxShadow: o.shadows[2],
+            backgroundColor: o.palette.primary.main
+          }
+        },
+        "&.Mui-disabled": {
+          color: o.palette.text.disabled,
+          backgroundColor: "transparent",
+          borderColor: o.palette.divider
+        },
+        "&.Mui-disabled.Mui-selected": {
+          color: o.palette.text.disabled,
+          backgroundColor: o.palette.action.disabledBackground,
+          borderColor: o.palette.action.disabledBackground
+        }
+      }),
+      sizeLarge: ({ theme: o }) => ({
+        height: "3rem",
+        padding: `${o.spacing(1.5)} ${o.spacing(2)}`,
+        fontSize: o.typography.body1.fontSize,
+        lineHeight: o.typography.body1.lineHeight
+      }),
+      sizeMedium: ({ theme: o }) => ({
+        height: "2.25rem",
+        padding: `${o.spacing(1.125)} ${o.spacing(2)}`,
+        fontSize: o.typography.body2.fontSize,
+        lineHeight: o.typography.body2.lineHeight
+      }),
+      sizeSmall: ({ theme: o }) => ({
+        height: "1.75rem",
+        padding: `${o.spacing(0.625)} ${o.spacing(1.5)}`,
+        fontSize: o.typography.caption.fontSize,
+        lineHeight: o.typography.caption.lineHeight
+      })
+    }
+  }
+};
+export {
+  t as MUIGatorToggleButtonGroupOverrides,
+  e as MUIGatorToggleButtonOverrides
+};

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

@@ -7,7 +7,6 @@ export declare const MUIGatorButtonOverrides: {
             root: {
                 textTransform: string;
                 fontWeight: number;
-                height: string;
                 '&.Mui-focusVisible': {
                     boxShadow: string;
                     outline: string;
@@ -18,16 +17,22 @@ export declare const MUIGatorButtonOverrides: {
                 };
             };
             sizeLarge: {
+                height: string;
+                minWidth: string;
                 padding: string;
                 fontSize: string;
                 lineHeight: string;
             };
             sizeMedium: {
+                height: string;
+                minWidth: string;
                 padding: string;
                 fontSize: string;
                 lineHeight: string;
             };
             sizeSmall: {
+                height: string;
+                minWidth: string;
                 padding: string;
                 fontSize: string;
                 lineHeight: string;

package/dist/types/gator/themes/components/toggle-button.d.ts

@@ -0,0 +1,86 @@
+export declare const MUIGatorToggleButtonGroupOverrides: {
+    MuiToggleButtonGroup: {
+        styleOverrides: {
+            grouped: ({ theme }: any) => {
+                '&:not(:first-of-type)': {
+                    marginLeft: number;
+                    borderLeft: string;
+                    borderRadius: number;
+                };
+                '&:first-of-type': {
+                    borderRadius: string;
+                };
+                '&:last-of-type': {
+                    borderRadius: string;
+                };
+                '&:only-child': {
+                    borderRadius: string;
+                };
+            };
+        };
+    };
+};
+export declare const MUIGatorToggleButtonOverrides: {
+    MuiToggleButton: {
+        defaultProps: {
+            disableRipple: boolean;
+        };
+        styleOverrides: {
+            root: ({ theme }: any) => {
+                textTransform: string;
+                fontWeight: number;
+                border: string;
+                borderRadius: string;
+                color: any;
+                backgroundColor: string;
+                whiteSpace: string;
+                '&.Mui-focusVisible': {
+                    boxShadow: string;
+                    outline: string;
+                    outlineOffset: string;
+                };
+                '&:hover': {
+                    boxShadow: any;
+                    backgroundColor: string;
+                };
+                '&.Mui-selected': {
+                    color: any;
+                    backgroundColor: any;
+                    borderColor: any;
+                    '&:hover': {
+                        boxShadow: any;
+                        backgroundColor: any;
+                    };
+                };
+                '&.Mui-disabled': {
+                    color: any;
+                    backgroundColor: string;
+                    borderColor: any;
+                };
+                '&.Mui-disabled.Mui-selected': {
+                    color: any;
+                    backgroundColor: any;
+                    borderColor: any;
+                };
+            };
+            sizeLarge: ({ theme }: any) => {
+                height: string;
+                padding: string;
+                fontSize: any;
+                lineHeight: any;
+            };
+            sizeMedium: ({ theme }: any) => {
+                height: string;
+                padding: string;
+                fontSize: any;
+                lineHeight: any;
+            };
+            sizeSmall: ({ theme }: any) => {
+                height: string;
+                padding: string;
+                fontSize: any;
+                lineHeight: any;
+            };
+        };
+    };
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ncino/styles",
   "author": "nCino",
-  "version": "10.1.0",
+  "version": "10.2.0",
   "description": "nCino Shared Web Component Styling",
   "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
   "publishConfig": {
@@ -66,7 +66,7 @@
     "glob": "^13.0.0",
     "rimraf": "^6.1.2",
     "typescript": "^5.9.3",
-    "vite": "7.3.0",
+    "vite": "7.3.2",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-static-copy": "^3.3.0"
   },