@ncino/styles 9.2.0-preview.3 → 9.2.0

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

@@ -0,0 +1,170 @@
+export declare const MUIGatorTableOverrides: {
+    MuiPaper: {
+        styleOverrides: {
+            root: {
+                borderRadius: string;
+                boxShadow: string;
+                '&:has(.MuiToolbar-root + .MuiTableContainer-root)': {
+                    '.MuiToolbar-root': {
+                        background: string;
+                        marginBottom: string;
+                        borderRadius: string;
+                        display: string;
+                        gap: string;
+                    };
+                };
+            };
+        };
+    };
+    MuiTableContainer: {
+        styleOverrides: {
+            root: {
+                backgroundColor: string;
+                borderRadius: string;
+                overflow: string;
+                boxShadow: string;
+            };
+        };
+    };
+    MuiTable: {
+        styleOverrides: {
+            root: {
+                borderCollapse: "separate";
+                borderSpacing: number;
+                width: string;
+            };
+        };
+    };
+    MuiTableHead: {
+        styleOverrides: {
+            root: {
+                '& .MuiTableCell-head': {
+                    backgroundColor: string;
+                    color: string;
+                    fontWeight: number;
+                    borderBottom: string;
+                    '&:hover': {
+                        backgroundColor: string;
+                    };
+                };
+            };
+        };
+    };
+    MuiTableBody: {
+        styleOverrides: {
+            root: {
+                '& .MuiTableRow-root': {
+                    backgroundColor: string;
+                    transition: string;
+                    '&:hover': {
+                        backgroundColor: string;
+                    };
+                    '&.Mui-selected': {
+                        backgroundColor: string;
+                        '&:hover': {
+                            backgroundColor: string;
+                        };
+                    };
+                    '&:last-child .MuiTableCell-root': {
+                        borderBottom: string;
+                    };
+                };
+            };
+        };
+    };
+    MuiTableRow: {
+        styleOverrides: {
+            root: {
+                '&:not(:has(.MuiCheckbox-root)) .MuiTableCell-root': {
+                    padding: string;
+                    '&:first-of-type': {
+                        paddingLeft: number;
+                    };
+                };
+                '&.Mui-selected': {
+                    backgroundColor: string;
+                };
+            };
+        };
+    };
+    MuiTableCell: {
+        styleOverrides: {
+            root: {
+                fontFamily: string;
+                fontSize: string;
+                color: string;
+                borderBottom: string;
+                letterSpacing: string;
+                '&:first-of-type': {
+                    paddingLeft: number;
+                };
+            };
+            head: {
+                fontWeight: number;
+                fontSize: string;
+                color: string;
+                backgroundColor: string;
+                borderBottom: string;
+                letterSpacing: string;
+                '&:first-of-type': {
+                    paddingLeft: number;
+                };
+            };
+            body: {
+                fontSize: string;
+                fontWeight: number;
+            };
+            paddingCheckbox: {
+                width: string;
+                padding: string;
+            };
+            sizeSmall: {
+                padding: string;
+            };
+        };
+    };
+    MuiTablePagination: {
+        styleOverrides: {
+            root: {
+                color: string;
+                fontSize: string;
+                padding: string;
+                borderTop: string;
+            };
+            toolbar: {
+                minHeight: string;
+                paddingLeft: number;
+                paddingRight: number;
+            };
+            selectLabel: {
+                margin: number;
+            };
+            displayedRows: {
+                margin: number;
+            };
+            select: {
+                color: string;
+                fontSize: string;
+                fontWeight: number;
+            };
+            input: {
+                border: string;
+                padding: number;
+                textDecoration: string;
+                textUnderlineOffset: string;
+                textDecorationColor: string;
+                '&:focus': {
+                    borderRadius: string;
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+                '&:hover': {
+                    textDecorationColor: string;
+                };
+            };
+            selectIcon: {
+                color: string;
+            };
+        };
+    };
+};

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

@@ -0,0 +1,163 @@
+/**
+ * Gator Design System - MUI Tabs Component Overrides
+ *
+ * Maps Gator Tabs design specifications to MUI Tabs and Tab components.
+ * Supports small, medium, and large size variants with proper styling.
+ */
+export declare const MUIGatorTabsOverrides: {
+    MuiTabs: {
+        defaultProps: {
+            size: "medium";
+            TabIndicatorProps: {
+                style: {
+                    height: string;
+                };
+            };
+        };
+        variants: ({
+            props: {
+                size: "small";
+            };
+            style: {
+                '& .MuiTab-root': {
+                    padding: string;
+                    fontSize: string;
+                    '&:hover:not(.Mui-selected)': {
+                        paddingBottom: string;
+                    };
+                    borderRadius?: undefined;
+                    border?: undefined;
+                    borderBottom?: undefined;
+                    background?: undefined;
+                    '&:hover'?: undefined;
+                    '&.Mui-selected'?: undefined;
+                };
+                borderBottom?: undefined;
+                position?: undefined;
+                '&::after'?: undefined;
+                '& span[class*="MuiTabs-indicator"]'?: undefined;
+                '& .MuiTabs-flexContainer'?: undefined;
+            };
+        } | {
+            props: {
+                size: "large";
+            };
+            style: {
+                borderBottom: string;
+                position: "relative";
+                '&::after': {
+                    content: string;
+                    position: string;
+                    bottom: number;
+                    left: number;
+                    right: number;
+                    height: string;
+                    width: string;
+                    backgroundColor: string;
+                };
+                '& span[class*="MuiTabs-indicator"]': {
+                    display: string;
+                };
+                '& .MuiTabs-flexContainer': {
+                    gap: string;
+                };
+                '& .MuiTab-root': {
+                    borderRadius: string;
+                    border: string;
+                    borderBottom: string;
+                    padding: string;
+                    fontSize: string;
+                    background: string;
+                    '&:hover': {
+                        backgroundColor: string;
+                        borderTop: string;
+                        borderLeft: string;
+                        borderRight: string;
+                        borderBottom: string;
+                        padding: string;
+                    };
+                    '&.Mui-selected': {
+                        border: string;
+                        background: string;
+                        position: string;
+                        '&::after': {
+                            content: string;
+                            position: string;
+                            bottom: number;
+                            left: number;
+                            right: number;
+                            height: string;
+                            backgroundColor: string;
+                            zIndex: string;
+                        };
+                        '&:hover': {
+                            borderTop: string;
+                            borderLeft: string;
+                            borderRight: string;
+                            borderBottom: string;
+                            backgroundColor: string;
+                        };
+                    };
+                    '&:hover:not(.Mui-selected)'?: undefined;
+                };
+            };
+        })[];
+        styleOverrides: {
+            root: {
+                minHeight: string;
+                borderBottom: string;
+            };
+            indicator: {
+                backgroundColor: string;
+                height: string;
+            };
+            flexContainer: {
+                display: string;
+                marginBottom: string;
+            };
+        };
+    };
+    MuiTab: {
+        defaultProps: {
+            disableRipple: boolean;
+        };
+        styleOverrides: {
+            root: {
+                fontFamily: string;
+                fontWeight: string;
+                textTransform: string;
+                color: string;
+                display: string;
+                minHeight: string;
+                minWidth: string;
+                border: string;
+                borderBottom: string;
+                background: string;
+                backgroundColor: string;
+                cursor: string;
+                padding: string;
+                fontSize: string;
+                '&:hover': {
+                    backgroundColor: string;
+                    borderBottom: string;
+                    '&:not(.Mui-selected)': {
+                        paddingBottom: string;
+                    };
+                };
+                '&.Mui-selected': {
+                    color: string;
+                    fontWeight: string;
+                    borderBottom: string;
+                    '&:hover': {
+                        borderBottom: string;
+                    };
+                };
+                '&.Mui-focusVisible': {
+                    outline: string;
+                    outlineOffset: string;
+                    borderRadius: string;
+                };
+            };
+        };
+    };
+};

package/dist/types/gator/themes/components/text-field.d.ts

@@ -0,0 +1,100 @@
+export declare const MUIGatorTextFieldOverrides: {
+    MuiInputLabel: {
+        defaultProps: {
+            shrink: boolean;
+        };
+    };
+    MuiInputBase: {
+        styleOverrides: {
+            root: {
+                borderRadius: string;
+                fontSize: string;
+                lineHeight: string;
+                background: string;
+                padding: string;
+                border: string;
+                marginTop: string;
+                '&:before': {
+                    display: string;
+                };
+                '&:after': {
+                    display: string;
+                };
+                '&:hover': {
+                    borderColor: string;
+                };
+                '&.Mui-focused': {
+                    outline: string;
+                };
+                '&.Mui-disabled': {
+                    background: string;
+                    color: string;
+                    borderColor: string;
+                };
+                '&.Mui-error': {
+                    borderColor: string;
+                };
+                '&.Mui-readOnly': {
+                    background: string;
+                    borderColor: string;
+                };
+            };
+            input: {
+                padding: number;
+                color: string;
+                fontSize: string;
+                lineHeight: string;
+                '&::placeholder': {
+                    color: string;
+                    opacity: number;
+                };
+            };
+        };
+    };
+    MuiOutlinedInput: {
+        defaultProps: {
+            notched: boolean;
+        };
+        styleOverrides: {
+            root: {
+                padding: number;
+                fieldset: {
+                    display: string;
+                };
+                input: {
+                    padding: string;
+                };
+            };
+        };
+    };
+    MuiFilledInput: {
+        defaultProps: {
+            disableUnderline: boolean;
+        };
+        styleOverrides: {
+            root: {
+                backgroundColor: string;
+                '&:hover': {
+                    backgroundColor: string;
+                };
+                '&.Mui-focused': {
+                    backgroundColor: string;
+                };
+                '&.Mui-disabled': {
+                    backgroundColor: string;
+                };
+                '&.Mui-readOnly': {
+                    backgroundColor: string;
+                };
+            };
+            input: {
+                padding: number;
+            };
+        };
+    };
+    MuiTextField: {
+        defaultProps: {
+            variant: "standard";
+        };
+    };
+};

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

@@ -0,0 +1,92 @@
+export declare const gatorColorValues: {
+    brand: {
+        main: string;
+        light: string;
+        dark: string;
+        contrastText: string;
+    };
+    error: {
+        main: string;
+        light: string;
+        dark: string;
+        contrastText: string;
+    };
+    success: {
+        main: string;
+        light: string;
+        dark: string;
+        contrastText: string;
+    };
+    warning: {
+        main: string;
+        light: string;
+        dark: string;
+        contrastText: string;
+    };
+    info: {
+        main: string;
+        light: string;
+        dark: string;
+        contrastText: string;
+    };
+    ai: {
+        main: string;
+        light: string;
+        dark: string;
+        contrastText: string;
+    };
+    secondary: {
+        main: string;
+        light: string;
+        dark: string;
+        contrastText: string;
+    };
+    neutral: {
+        0: string;
+        10: string;
+        20: string;
+        30: string;
+        35: string;
+        40: string;
+        45: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+    };
+    background: {
+        default: string;
+        paper: string;
+    };
+    divider: string;
+};
+export declare const gatorTypography: {
+    fontFamily: {
+        body: string;
+        headings: string;
+    };
+    fontWeight: {
+        regular: number;
+        medium: number;
+        semiBold: number;
+        bold: number;
+    };
+};
+export declare const gatorSpacing = 8;
+export declare const gatorBorderRadius: {
+    none: number;
+    xsmall: number;
+    small: number;
+    medium: number;
+    large: number;
+    xlarge: number;
+    xxlarge: number;
+    xxxlarge: number;
+    circle: number;
+};
+export declare const gatorShadows: [string, ...string[]];

package/dist/types/gator/tokens/primitive-inline.d.ts

@@ -0,0 +1,2 @@
+import { default as primitiveCSS } from './primitive.tokens.css?inline';
+export default primitiveCSS;

package/dist/types/gator/tokens/semantic-inline.d.ts

@@ -0,0 +1,2 @@
+import { default as semanticCSS } from './semantic.tokens.css?inline';
+export default semanticCSS;

package/dist/types/gator/types/mui-augmentations.d.ts

@@ -0,0 +1,49 @@
+import { PaletteColor, PaletteColorOptions } from '@mui/material/styles';
+declare module '@mui/material/Badge' {
+    interface BadgePropsVariantOverrides {
+        tile: true;
+    }
+}
+declare module '@mui/material/Button' {
+    interface ButtonPropsColorOverrides {
+        ai: true;
+        neutral: true;
+    }
+}
+declare module '@mui/material/Chip' {
+    interface ChipPropsColorOverrides {
+        ai: true;
+    }
+}
+declare module '@mui/material/Fab' {
+    interface FabPropsSizeOverrides {
+        xlarge: true;
+    }
+}
+declare module '@mui/material/Paper' {
+    interface PaperPropsVariantOverrides {
+        elevated: true;
+        'small-left': true;
+        'small-right': true;
+        'full-image': true;
+    }
+}
+declare module '@mui/material/styles' {
+    interface Palette {
+        ai: PaletteColor;
+        neutral: PaletteColor;
+    }
+    interface PaletteOptions {
+        ai?: PaletteColorOptions;
+        neutral?: PaletteColorOptions;
+    }
+}
+declare module '@mui/material/Tabs' {
+    interface TabsOwnProps {
+        /**
+         * The size of the tabs.
+         * @default 'medium'
+         */
+        size?: 'small' | 'medium' | 'large';
+    }
+}

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference path="./gator/types/mui-augmentations.d.ts" />
+
+import './gator/types/mui-augmentations';
+
+export { gatorMUITheme as default, gatorMUITheme } from './gator/themes/MUIGatorTheme';
+export type {} from './gator/types/mui-augmentations';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ncino/styles",
   "author": "nCino",
-  "version": "9.2.0-preview.3",
+  "version": "9.2.0",
   "description": "nCino Shared Web Component Styling",
   "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
   "publishConfig": {
@@ -12,17 +12,46 @@
     "url": "git@github.com:ncino/force-sdk-web-components.git"
   },
   "private": false,
+  "types": "./dist/types/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/types/index.d.ts"
+      ],
+      "gator/themes/MUIGatorTheme": [
+        "./dist/types/gator/themes/MUIGatorTheme.d.ts"
+      ]
+    }
+  },
   "exports": {
-    "./gator": "./src/gator/gator-global-styles.css",
-    "./gator/themes/MUIGatorTheme": "./src/gator/themes/MUIGatorTheme.ts",
-    "./gator/tokens/primitive": "./src/gator/tokens/primitive.tokens.css",
-    "./gator/tokens/semantic": "./src/gator/tokens/semantic.tokens.css"
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./gator": {
+      "import": "./dist/gator/gator-global-styles.css"
+    },
+    "./gator/themes/MUIGatorTheme": {
+      "types": "./dist/types/gator/themes/MUIGatorTheme.d.ts",
+      "import": "./dist/gator/themes/MUIGatorTheme.js"
+    },
+    "./gator/tokens/primitive": {
+      "import": "./dist/gator/tokens/primitive.tokens.css"
+    },
+    "./gator/tokens/primitive-inline": {
+      "types": "./dist/types/gator/tokens/primitive-inline.d.ts",
+      "import": "./dist/gator/tokens/primitive-inline.js"
+    },
+    "./gator/tokens/semantic": {
+      "import": "./dist/gator/tokens/semantic.tokens.css"
+    },
+    "./gator/tokens/semantic-inline": {
+      "types": "./dist/types/gator/tokens/semantic-inline.d.ts",
+      "import": "./dist/gator/tokens/semantic-inline.js"
+    }
   },
   "files": [
-    "src/**/*.ts",
-    "src/**/*.d.ts",
-    "src/**/*.css",
-    "src/**/*.woff2"
+    "dist"
   ],
   "bugs": {
     "url": "https://github.com/ncino/force-sdk-web-components/issues"
@@ -31,6 +60,16 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4"
   },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19.2.3",
+    "glob": "^13.0.0",
+    "rimraf": "^6.1.2",
+    "typescript": "^5.9.3",
+    "vite": "7.3.0",
+    "vite-plugin-dts": "4.5.4",
+    "vite-plugin-static-copy": "^3.1.4"
+  },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -38,6 +77,7 @@
   "homepage": "https://github.com/ncino/force-sdk-web-components#readme",
   "customElements": "custom-elements.json",
   "scripts": {
-    "build": "echo '..Building nCino Styles'"
+    "build": "rimraf dist && vite build",
+    "build:watch": "rimraf dist && vite build --watch"
   }
 }