@ncino/styles 9.2.0-preview.3 → 9.2.0

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

@@ -0,0 +1,201 @@
+import { default as React } from 'react';
+export declare const MUIGatorChipOverrides: {
+    MuiChip: {
+        defaultProps: {
+            variant: "outlined";
+            deleteIcon: React.FunctionComponentElement<import('@mui/material/OverridableComponent').DefaultComponentProps<import('@mui/material/SvgIcon').SvgIconTypeMap<{}, "svg">>>;
+        };
+        styleOverrides: {
+            root: {
+                fontFamily: string;
+                fontWeight: number;
+                borderRadius: string;
+                padding: number;
+                gap: string;
+                '&.Mui-disabled': {
+                    opacity: number;
+                    backgroundColor: string;
+                    color: string;
+                    borderColor: string;
+                };
+            };
+            sizeSmall: {
+                height: string;
+                fontSize: string;
+                lineHeight: string;
+                padding: string;
+                '& .MuiChip-icon': {
+                    fontSize: string;
+                };
+            };
+            sizeMedium: {
+                height: string;
+                fontSize: string;
+                lineHeight: string;
+                padding: string;
+                '& .MuiChip-icon': {
+                    fontSize: string;
+                };
+            };
+            outlined: {
+                backgroundColor: string;
+                border: string;
+                '&:hover': {
+                    backgroundColor: string;
+                };
+                '&:focus': {
+                    backgroundColor: string;
+                };
+            };
+            clickable: {
+                cursor: "pointer";
+                userSelect: "none";
+                '&:hover': {
+                    backgroundColor: string;
+                };
+                '&:active': {
+                    backgroundColor: string;
+                    boxShadow: string;
+                };
+            };
+            clickableColorPrimary: {
+                '&:hover': {
+                    backgroundColor: string;
+                };
+            };
+            deletable: {
+                '&:focus': {
+                    backgroundColor: string;
+                };
+            };
+            colorPrimary: {
+                backgroundColor: string;
+                color: string;
+                '&:hover': {
+                    backgroundColor: string;
+                };
+            };
+            outlinedPrimary: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+                '&:hover': {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+            };
+            colorSuccess: {
+                backgroundColor: string;
+                color: string;
+                '&:hover': {
+                    backgroundColor: string;
+                };
+            };
+            outlinedSuccess: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+                '&:hover': {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+            };
+            colorError: {
+                backgroundColor: string;
+                color: string;
+                '&:hover': {
+                    backgroundColor: string;
+                };
+            };
+            outlinedError: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+                '&:hover': {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+            };
+            colorWarning: {
+                backgroundColor: string;
+                color: string;
+                '&:hover': {
+                    backgroundColor: string;
+                };
+            };
+            outlinedWarning: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+                '&:hover': {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+            };
+            colorInfo: {
+                backgroundColor: string;
+                color: string;
+                '&:hover': {
+                    backgroundColor: string;
+                };
+            };
+            outlinedInfo: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+                '&:hover': {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+            };
+            colorAi: {
+                background: string;
+                color: string;
+                '&:hover': {
+                    background: string;
+                };
+            };
+            outlinedAi: {
+                background: string;
+                color: string;
+                borderColor: string;
+                '&:hover': {
+                    background: string;
+                };
+            };
+            icon: {
+                color: string;
+                margin: number;
+            };
+            deleteIcon: {
+                color: string;
+                '&:hover': {
+                    color: string;
+                };
+            };
+            deleteIconSmall: {
+                fontSize: string;
+            };
+            deleteIconMedium: {
+                fontSize: string;
+            };
+            avatar: {
+                margin: number;
+                color: string;
+            };
+            avatarSmall: {
+                width: string;
+                height: string;
+                fontSize: string;
+            };
+            avatarMedium: {
+                width: string;
+                height: string;
+                fontSize: string;
+            };
+            label: {
+                padding: string;
+            };
+        };
+    };
+};

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

@@ -0,0 +1,58 @@
+export declare const MUIGatorDialogOverrides: {
+    MuiDialog: {
+        defaultProps: {
+            fullWidth: boolean;
+        };
+        styleOverrides: {
+            paper: {
+                background: string;
+            };
+            paperFullScreen: {
+                '.MuiDialogTitle-root': {
+                    textAlign: string;
+                };
+                '.MuiDialogActions-root': {
+                    background: string;
+                    padding: string;
+                    justifyContent: string;
+                };
+            };
+        };
+    };
+    MuiDialogTitle: {
+        styleOverrides: {
+            root: {
+                background: string;
+                fontSize: string;
+                lineHeight: string;
+                padding: string;
+            };
+        };
+    };
+    MuiDialogContent: {
+        styleOverrides: {
+            root: {
+                padding: string;
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+    };
+    MuiDialogActions: {
+        styleOverrides: {
+            root: ({ theme }: {
+                theme: any;
+            }) => {
+                [x: number]: {
+                    flexDirection: string;
+                    gap: string;
+                    '& > *': {
+                        width: string;
+                        margin: string;
+                    };
+                };
+                padding: string;
+            };
+        };
+    };
+};

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

@@ -0,0 +1,78 @@
+export declare const MUIGatorFabOverrides: {
+    MuiFab: {
+        defaultProps: {
+            disableRipple: boolean;
+            color: "primary";
+            size: "small";
+        };
+        styleOverrides: {
+            root: {
+                boxShadow: string;
+                textTransform: string;
+                padding: string;
+                height: string;
+                width: string;
+                '&:hover': {
+                    boxShadow: string;
+                    backgroundColor: string;
+                };
+                '&:active': {
+                    backgroundColor: string;
+                };
+                '&.Mui-focusVisible': {
+                    boxShadow: string;
+                    outline: string;
+                    outlineOffset: string;
+                };
+                '&.Mui-disabled': {
+                    backgroundColor: string;
+                    color: string;
+                };
+            };
+            primary: {
+                backgroundColor: string;
+                color: string;
+            };
+            sizeSmall: {
+                '& .MuiSvgIcon-root': {
+                    fontSize: string;
+                };
+            };
+            sizeMedium: {
+                '& .MuiSvgIcon-root': {
+                    fontSize: string;
+                };
+            };
+            sizeLarge: {
+                '& .MuiSvgIcon-root': {
+                    fontSize: string;
+                };
+            };
+            circular: {
+                borderRadius: string;
+            };
+            extended: {
+                borderRadius: string;
+                padding: string;
+                minWidth: string;
+                height: string;
+                gap: string;
+            };
+        };
+        variants: {
+            props: {
+                size: "xlarge";
+            };
+            style: {
+                '& .MuiSvgIcon-root': {
+                    fontSize: string;
+                };
+            };
+        }[];
+    };
+};
+declare module '@mui/material/Fab' {
+    interface FabPropsSizeOverrides {
+        xlarge: true;
+    }
+}

package/dist/types/gator/themes/components/form-control.d.ts

@@ -0,0 +1,86 @@
+export declare const MUIGatorFormControlOverrides: {
+    MuiFormControl: {
+        styleOverrides: {
+            root: {
+                '& .MuiFormLabel-root': {
+                    fontFamily: string;
+                    fontSize: string;
+                    lineHeight: string;
+                    color: string;
+                    letterSpacing: string;
+                    fontWeight: number;
+                    marginBottom: string;
+                    position: string;
+                    transform: string;
+                    '&.Mui-focused': {
+                        color: string;
+                    };
+                    '&.Mui-disabled': {
+                        color: string;
+                    };
+                };
+                '& .MuiFormHelperText-root': {
+                    fontFamily: string;
+                    fontSize: string;
+                    lineHeight: string;
+                    color: string;
+                    letterSpacing: string;
+                    marginLeft: number;
+                    marginTop: string;
+                    '&.Mui-error': {
+                        color: string;
+                    };
+                };
+            };
+        };
+    };
+    MuiFormLabel: {
+        styleOverrides: {
+            root: {
+                fontFamily: string;
+                fontSize: string;
+                lineHeight: string;
+                color: string;
+                letterSpacing: string;
+                fontWeight: number;
+                '&.Mui-error': {
+                    color: string;
+                };
+            };
+        };
+    };
+    MuiFormControlLabel: {
+        styleOverrides: {
+            root: {
+                marginLeft: number;
+                marginRight: number;
+                gap: string;
+                alignItems: string;
+                '& .MuiFormControlLabel-label': {
+                    fontFamily: string;
+                    fontSize: string;
+                    lineHeight: string;
+                    color: string;
+                    letterSpacing: string;
+                    paddingTop: string;
+                };
+                '&.Mui-disabled .MuiFormControlLabel-label': {
+                    color: string;
+                };
+                '&.Mui-error .MuiFormLabel-root': {
+                    color: string;
+                };
+                '& .MuiCheckbox-root': {
+                    marginLeft: string;
+                };
+            };
+        };
+    };
+    MuiFormGroup: {
+        styleOverrides: {
+            root: {
+                gap: string;
+            };
+        };
+    };
+};

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

@@ -0,0 +1,45 @@
+/**
+ * Gator Design System - MUI Radio & Radio Group Component Overrides
+ *
+ * Maps Gator Radio design specifications to MUI Radio and RadioGroup components.
+ * Supports all interactive states (default, hover, focus, disabled, error) aligned with Gator tokens.
+ */
+export declare const MUIGatorRadioOverrides: {
+    MuiRadio: {
+        defaultProps: {
+            disableFocusRipple: boolean;
+            disableTouchRipple: boolean;
+        };
+        styleOverrides: {
+            root: {
+                padding: string;
+                color: string;
+                '&:hover svg': {
+                    fill: string;
+                };
+                '&.Mui-focusVisible': {
+                    outline: string;
+                    outlineOffset: string;
+                };
+                '&.Mui-checked': {
+                    color: string;
+                };
+                '&.Mui-disabled': {
+                    color: string;
+                };
+                '.Mui-error &': {
+                    color: string;
+                    '&:hover': {
+                        backgroundColor: string;
+                    };
+                };
+                '.Mui-error &.Mui-checked': {
+                    color: string;
+                };
+                '.Mui-error &:hover svg': {
+                    fill: string;
+                };
+            };
+        };
+    };
+};

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

@@ -0,0 +1,64 @@
+export declare const MUIGatorSelectOverrides: {
+    MuiSelect: {
+        defaultProps: {
+            MenuProps: {
+                PaperProps: {
+                    sx: {
+                        backgroundColor: string;
+                        maxHeight: string;
+                        marginTop: string;
+                        borderRadius: string;
+                        boxShadow: string;
+                        '& .MuiMenuItem-root': {
+                            padding: string;
+                            minHeight: string;
+                            fontFamily: string;
+                            fontSize: string;
+                            lineHeight: string;
+                            color: string;
+                            '&:hover': {
+                                backgroundColor: string;
+                            };
+                            '&.Mui-focusVisible': {
+                                outline: string;
+                                outlineOffset: string;
+                                backgroundColor: string;
+                            };
+                            '&.Mui-selected': {
+                                backgroundColor: string;
+                                color: string;
+                                fontWeight: number;
+                                paddingLeft: string;
+                                '::before': {
+                                    content: string;
+                                    display: string;
+                                    marginRight: string;
+                                    color: string;
+                                    fontWeight: number;
+                                };
+                                '&:hover': {
+                                    backgroundColor: string;
+                                };
+                            };
+                            '&.Mui-disabled': {
+                                opacity: number;
+                                color: string;
+                            };
+                        };
+                    };
+                };
+            };
+            IconComponent: any;
+        };
+        styleOverrides: {
+            root: {
+                '& .MuiSelect-select': {
+                    padding: string;
+                };
+            };
+            icon: {
+                right: string;
+            };
+        };
+    };
+};

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

@@ -0,0 +1,105 @@
+/**
+ * Gator Design System - MUI Switch Component Overrides
+ *
+ * Maps Gator Switch design specifications to MUI Switch component.
+ * Based on ngcSwitch component styling (packages/web-components/src/components/switch/gator/).
+ *
+ * Supports interactive states:
+ * - Default (unchecked) with gray track
+ * - Checked with brand color track
+ * - Disabled with gray track (no shadow)
+ * - Focus with brand color outline
+ * - Hover with ripple effect on thumb
+ *
+ * Reference: packages/web-components/src/components/switch/gator/switch.gator.scss
+ */
+export declare const MUIGatorSwitchOverrides: {
+    MuiFormControlLabel: {
+        styleOverrides: {
+            root: {
+                marginLeft: number;
+                marginRight: number;
+                '& .MuiFormControlLabel-label': {
+                    marginLeft: string;
+                    fontFamily: string;
+                    fontSize: string;
+                    color: string;
+                };
+                '&.Mui-disabled .MuiFormControlLabel-label': {
+                    color: string;
+                };
+            };
+        };
+    };
+    MuiSwitch: {
+        defaultProps: {
+            disableRipple: boolean;
+        };
+        styleOverrides: {
+            root: {
+                width: string;
+                height: string;
+                padding: number;
+                overflow: string;
+                '&:hover .MuiSwitch-switchBase:not(.Mui-disabled):not(.Mui-checked) .MuiSwitch-thumb': {
+                    outline: string;
+                };
+                '&:hover .MuiSwitch-switchBase.Mui-checked:not(.Mui-disabled) .MuiSwitch-thumb': {
+                    outline: string;
+                };
+                '&:active .MuiSwitch-switchBase:not(.Mui-disabled):not(.Mui-checked) .MuiSwitch-thumb': {
+                    outline: string;
+                };
+                '&:active .MuiSwitch-switchBase.Mui-checked:not(.Mui-disabled) .MuiSwitch-thumb': {
+                    outline: string;
+                };
+            };
+            switchBase: {
+                padding: string;
+                top: number;
+                left: number;
+                '&.Mui-checked': {
+                    transform: string;
+                    '& + .MuiSwitch-track': {
+                        backgroundColor: string;
+                        opacity: number;
+                    };
+                };
+                '&.Mui-disabled': {
+                    '& + .MuiSwitch-track': {
+                        backgroundColor: string;
+                        opacity: number;
+                    };
+                    '& .MuiSwitch-thumb': {
+                        boxShadow: string;
+                        outline: string;
+                    };
+                    '& .MuiSwitch-thumb:hover': {
+                        outline: string;
+                    };
+                };
+                '&.Mui-focusVisible + .MuiSwitch-track': {
+                    outline: string;
+                    outlineOffset: string;
+                };
+            };
+            track: {
+                width: string;
+                height: string;
+                borderRadius: string;
+                backgroundColor: string;
+                opacity: number;
+                border: string;
+                transition: string;
+            };
+            thumb: {
+                width: string;
+                height: string;
+                borderRadius: string;
+                backgroundColor: string;
+                boxShadow: string;
+                color: string;
+            };
+        };
+    };
+};