@stratakit/mui 0.2.1 → 0.3.0

package/dist/createTheme.js

@@ -1,5 +1,15 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Role } from "@ariakit/react/role";
+import OutlinedInput from "@mui/material/OutlinedInput";
 import { createTheme as createMuiTheme } from "@mui/material/styles";
+import { MuiBadge } from "./~components/MuiBadge.js";
+import { MuiButtonBase } from "./~components/MuiButtonBase.js";
+import { MuiCard, MuiCardActionArea } from "./~components/MuiCard.js";
+import { MuiChip, MuiChipDeleteIcon, MuiChipLabel } from "./~components/MuiChip.js";
+import { MuiIconButton } from "./~components/MuiIconButton.js";
+import { MuiSnackbar } from "./~components/MuiSnackbar.js";
+import { MuiTableCell, MuiTableHead } from "./~components/MuiTable.js";
 import { ArrowDownIcon, CaretsUpDownIcon, ChevronDownIcon, ChevronLeftDoubleIcon, ChevronLeftIcon, ChevronRightDoubleIcon, ChevronRightIcon, DismissIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "./Icon.js";
 function createTheme() {
   const palette = {
@@ -43,6 +53,40 @@ function createTheme() {
       button: {
         textTransform: "none"
         // Disable all-caps on buttons and tabs
+      },
+      // These are only hardcoded here as fallback. The CSS will take precedence.
+      body1: {
+        fontSize: 16
+      },
+      body2: {
+        fontSize: 14
+      },
+      h1: {
+        fontSize: 48
+      },
+      h2: {
+        fontSize: 40
+      },
+      h3: {
+        fontSize: 32
+      },
+      h4: {
+        fontSize: 28
+      },
+      h5: {
+        fontSize: 24
+      },
+      h6: {
+        fontSize: 20
+      },
+      caption: {
+        fontSize: 12
+      },
+      subtitle1: {
+        fontSize: 12
+      },
+      subtitle2: {
+        fontSize: 11
       }
     },
     shadows: [
@@ -61,13 +105,31 @@ function createTheme() {
       // biome-ignore lint/suspicious/noExplicitAny: MUI expects 25 items in the shadows array
     ],
     components: {
+      MuiAppBar: {
+        defaultProps: {
+          component: Role.header
+        }
+      },
+      MuiAccordion: {
+        defaultProps: {
+          component: Role.div,
+          slotProps: {
+            region: {
+              role: void 0,
+              "aria-labelledby": void 0
+            }
+          }
+        }
+      },
       MuiAccordionSummary: {
         defaultProps: {
+          component: Role.div,
           expandIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {})
         }
       },
       MuiAlert: {
         defaultProps: {
+          component: Role.div,
           variant: "outlined",
           iconMapping: {
             error: /* @__PURE__ */ jsx(ErrorIcon, {}),
@@ -77,6 +139,11 @@ function createTheme() {
           }
         }
       },
+      MuiAlertTitle: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
       MuiAutocomplete: {
         defaultProps: {
           popupIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
@@ -85,58 +152,216 @@ function createTheme() {
             paper: {
               elevation: 8
               // match Menu elevation
+            },
+            clearIndicator: {
+              tabIndex: 0
+              // make clear indicator focusable
             }
           }
         }
       },
+      MuiAvatar: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
+      MuiAvatarGroup: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
+      MuiBackdrop: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
+      MuiBadge: {
+        defaultProps: {
+          component: MuiBadge,
+          color: "secondary"
+        }
+      },
+      MuiBottomNavigation: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
       MuiBreadcrumbs: {
         defaultProps: {
+          component: Role.nav,
           separator: /* @__PURE__ */ jsx(ChevronRightIcon, {})
         }
       },
       MuiButtonBase: {
         defaultProps: {
+          component: MuiButtonBase,
           disableRipple: true
           // https://mui.com/material-ui/getting-started/faq/#how-can-i-disable-the-ripple-effect-globally
         }
       },
       MuiButton: {
         defaultProps: {
+          component: MuiButtonBase,
           color: "secondary",
           variant: "contained"
         }
       },
       MuiButtonGroup: {
         defaultProps: {
+          component: Role.div,
           color: "secondary",
           disableRipple: true
           // ButtonGroup overrides Button's disableRipple so we need to set it here as well
         }
       },
-      MuiChip: {
+      MuiCard: {
+        defaultProps: {
+          component: MuiCard
+        }
+      },
+      MuiCardActionArea: {
+        defaultProps: {
+          component: MuiCardActionArea
+        }
+      },
+      MuiCardContent: {
         defaultProps: {
-          deleteIcon: /* @__PURE__ */ jsx(DismissIcon, {})
+          component: Role.div
+        }
+      },
+      MuiCardHeader: {
+        defaultProps: {
+          component: Role.div,
+          slotProps: {
+            title: {
+              component: Role.h2
+            }
+          }
+        }
+      },
+      MuiCardMedia: {
+        defaultProps: {
+          component: Role.div
         }
       },
       MuiCheckbox: {
         defaultProps: {
-          disableRipple: true
+          component: Role.span,
+          disableRipple: true,
           // Checkbox doesn't inherit from ButtonBase
+          icon: /* @__PURE__ */ jsx(Fragment, {}),
+          checkedIcon: /* @__PURE__ */ jsx(Fragment, {}),
+          indeterminateIcon: /* @__PURE__ */ jsx(Fragment, {})
         }
       },
-      MuiInputLabel: {
+      MuiChip: {
         defaultProps: {
-          shrink: true
-          // Removes label animation and masked border from TextField
+          component: MuiChip,
+          deleteIcon: /* @__PURE__ */ jsx(MuiChipDeleteIcon, {}),
+          slotProps: {
+            label: {
+              component: MuiChipLabel
+            }
+          }
+        }
+      },
+      MuiContainer: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
+      MuiDialog: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
+      MuiDialogContentText: {
+        defaultProps: {
+          component: Role.p
+        }
+      },
+      MuiDialogTitle: {
+        defaultProps: {
+          component: Role.h2
+        }
+      },
+      MuiDivider: {
+        defaultProps: {
+          component: withRenderProp(Role, "hr")
+        }
+      },
+      MuiDrawer: {
+        defaultProps: {
+          component: Role.div
         }
       },
       MuiFab: {
         defaultProps: {
+          component: MuiButtonBase,
           color: "primary"
         }
       },
+      MuiFormControl: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
+      MuiFormHelperText: {
+        defaultProps: {
+          component: Role.p
+        }
+      },
+      MuiFormLabel: {
+        defaultProps: {
+          component: Role.label
+        }
+      },
+      MuiGrid: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
+      MuiGridLegacy: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
+      MuiIcon: {
+        defaultProps: {
+          component: Role.span
+        }
+      },
+      MuiIconButton: {
+        defaultProps: {
+          component: MuiIconButton,
+          color: "secondary"
+        }
+      },
+      MuiImageList: {
+        defaultProps: {
+          component: Role.ul
+        }
+      },
+      MuiImageListItem: {
+        defaultProps: {
+          component: Role.li
+        }
+      },
+      MuiInputAdornment: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
+      MuiInputLabel: {
+        defaultProps: {
+          component: Role.label,
+          shrink: true
+          // Removes label animation and masked border from TextField
+        }
+      },
       MuiLink: {
         defaultProps: {
+          component: Role.a,
           color: "textPrimary"
         },
         variants: [{
@@ -183,6 +408,60 @@ function createTheme() {
           }
         }]
       },
+      MuiList: {
+        defaultProps: {
+          component: Role.ul
+        }
+      },
+      MuiListItem: {
+        defaultProps: {
+          component: Role.li
+        }
+      },
+      MuiListItemButton: {
+        defaultProps: {
+          component: MuiButtonBase
+        }
+      },
+      MuiListItemText: {
+        defaultProps: {
+          slotProps: {
+            primary: {
+              variant: "inherit"
+            }
+          }
+        }
+      },
+      MuiListSubheader: {
+        defaultProps: {
+          component: Role.li
+        }
+      },
+      MuiMenu: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
+      MuiMenuItem: {
+        defaultProps: {
+          component: Role.li
+        }
+      },
+      MuiMenuList: {
+        defaultProps: {
+          component: Role.ul
+        }
+      },
+      MuiMobileStepper: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
+      MuiModal: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
       MuiOutlinedInput: {
         defaultProps: {
           notched: false
@@ -191,6 +470,7 @@ function createTheme() {
       },
       MuiPaginationItem: {
         defaultProps: {
+          component: MuiButtonBase,
           slots: {
             previous: ChevronLeftIcon,
             next: ChevronRightIcon,
@@ -199,11 +479,152 @@ function createTheme() {
           }
         }
       },
+      MuiPaper: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
+      MuiPopover: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
+      MuiRadio: {
+        defaultProps: {
+          component: Role.span,
+          disableRipple: true,
+          // Radio doesn't inherit from ButtonBase
+          icon: /* @__PURE__ */ jsx(Fragment, {}),
+          checkedIcon: /* @__PURE__ */ jsx(Fragment, {})
+        }
+      },
+      MuiRating: {
+        defaultProps: {
+          component: Role.span
+        }
+      },
       MuiSelect: {
         defaultProps: {
           IconComponent: CaretsUpDownIcon
         }
       },
+      MuiNativeSelect: {
+        defaultProps: {
+          input: /* @__PURE__ */ jsx(OutlinedInput, {}),
+          IconComponent: CaretsUpDownIcon
+        }
+      },
+      MuiSkeleton: {
+        defaultProps: {
+          component: Role.span
+        }
+      },
+      MuiSlider: {
+        defaultProps: {
+          component: Role.span
+        }
+      },
+      MuiSnackbar: {
+        defaultProps: {
+          slotProps: {
+            root: {
+              component: MuiSnackbar
+            }
+          }
+        }
+      },
+      MuiSnackbarContent: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
+      MuiStack: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
+      MuiStep: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
+      MuiSwitch: {
+        defaultProps: {
+          component: Role.span
+        }
+      },
+      MuiStepper: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
+      MuiSvgIcon: {
+        defaultProps: {
+          component: Role.svg
+        }
+      },
+      MuiSwipeableDrawer: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
+      MuiTabs: {
+        defaultProps: {
+          component: Role.div
+        }
+      },
+      MuiTable: {
+        defaultProps: {
+          component: withRenderProp(Role, "table")
+        }
+      },
+      MuiTableBody: {
+        defaultProps: {
+          component: withRenderProp(Role, "tbody")
+        }
+      },
+      MuiTableCell: {
+        defaultProps: {
+          component: MuiTableCell
+        }
+      },
+      MuiTableContainer: {
+        defaultProps: {
+          component: withRenderProp(Role, "div")
+        }
+      },
+      MuiTableFooter: {
+        defaultProps: {
+          component: withRenderProp(Role, "tfoot")
+        }
+      },
+      MuiTableHead: {
+        defaultProps: {
+          component: MuiTableHead
+        }
+      },
+      MuiTablePagination: {
+        defaultProps: {
+          component: withRenderProp(Role, "td"),
+          slotProps: {
+            root: {
+              colSpan: 999
+            }
+          }
+        }
+      },
+      MuiTableRow: {
+        defaultProps: {
+          component: withRenderProp(Role, "tr")
+        }
+      },
+      MuiTableSortLabel: {
+        defaultProps: {
+          component: Role.span,
+          // TODO: This should use sort-ascending and sort-descending icons, but that requires disabling MUI's built-in icon rotation.
+          IconComponent: ArrowDownIcon
+        }
+      },
       MuiTablePaginationActions: {
         defaultProps: {
           slots: {
@@ -214,20 +635,59 @@ function createTheme() {
           }
         }
       },
-      MuiTableSortLabel: {
+      MuiTextField: {
         defaultProps: {
-          // TODO: This should use sort-ascending and sort-descending icons, but that requires disabling MUI's built-in icon rotation.
-          IconComponent: ArrowDownIcon
+          component: Role.div
+        }
+      },
+      MuiToggleButton: {
+        defaultProps: {
+          component: MuiIconButton
+        }
+      },
+      MuiToolbar: {
+        defaultProps: {
+          component: Role.div
         }
       },
       MuiTooltip: {
         defaultProps: {
           describeChild: true
         }
+      },
+      MuiTypography: {
+        defaultProps: {
+          variant: "body2",
+          variantMapping: {
+            h1: Role.h1,
+            h2: Role.h2,
+            h3: Role.h3,
+            h4: Role.h4,
+            h5: Role.h5,
+            h6: Role.h6,
+            subtitle1: Role.h6,
+            subtitle2: Role.h6,
+            body1: Role.p,
+            body2: Role.p,
+            inherit: Role.p,
+            button: Role.span,
+            caption: Role.span,
+            overline: Role.span
+          }
+        }
       }
     }
   });
 }
+function withRenderProp(Role2, DefaultTagName) {
+  return React.forwardRef((props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(Role2, {
+      render: /* @__PURE__ */ jsx(DefaultTagName, {}),
+      ...props,
+      ref: forwardedRef
+    });
+  });
+}
 export {
   createTheme
 };