@stratakit/mui 0.4.0 → 0.4.1

package/dist/~components/MuiTable.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
 declare const MuiTableHead: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLTableSectionElement>>;
+declare const MuiTableBody: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLTableSectionElement>>;
 declare const MuiTableCell: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLTableDataCellElement>>;
-export { MuiTableHead, MuiTableCell };
+export { MuiTableBody, MuiTableCell, MuiTableHead };

package/dist/~components/MuiTable.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Role } from "@ariakit/react/role";
+import { ThemeProvider } from "@mui/material/styles";
 import { forwardRef } from "@stratakit/foundations/secret-internals";
 const MuiTableHeadContext = React.createContext(false);
 const MuiTableHead = forwardRef((props, forwardedRef) => {
@@ -13,6 +14,28 @@ const MuiTableHead = forwardRef((props, forwardedRef) => {
     })
   });
 });
+const MuiTableBody = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(ThemeProvider, {
+    theme: (outerTheme) => ({
+      ...outerTheme,
+      components: {
+        ...outerTheme.components,
+        MuiTableRow: {
+          defaultProps: {
+            ...outerTheme.components?.MuiTableRow?.defaultProps,
+            hover: true
+            // Only enable `hover` for rows inside TableBody.
+          }
+        }
+      }
+    }),
+    children: /* @__PURE__ */ jsx(Role, {
+      render: /* @__PURE__ */ jsx("tbody", {}),
+      ...props,
+      ref: forwardedRef
+    })
+  });
+});
 const MuiTableCell = forwardRef((props, forwardedRef) => {
   const inHeader = React.useContext(MuiTableHeadContext);
   const Component = inHeader ? "th" : "td";
@@ -23,6 +46,7 @@ const MuiTableCell = forwardRef((props, forwardedRef) => {
   });
 });
 export {
+  MuiTableBody,
   MuiTableCell,
   MuiTableHead
 };

package/dist/~components/MuiToggleButton.d.ts

@@ -0,0 +1,6 @@
+import type { ToggleButtonOwnProps } from "@mui/material/ToggleButton";
+import type { BaseProps } from "@stratakit/foundations/secret-internals";
+interface MuiToggleButtonProps extends BaseProps<"button">, Pick<ToggleButtonOwnProps, "label" | "labelPlacement"> {
+}
+declare const MuiToggleButton: import("react").ForwardRefExoticComponent<MuiToggleButtonProps & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
+export { MuiToggleButton };

package/dist/~components/MuiToggleButton.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import { MuiButtonBase } from "./MuiButtonBase.js";
+const MuiToggleButton = forwardRef((props, forwardedRef) => {
+  const {
+    label,
+    labelPlacement,
+    ...rest
+  } = props;
+  const classList = props.className?.split(" ") ?? [];
+  const size = (() => {
+    if (classList.includes("MuiToggleButton-sizeSmall")) return "small";
+    if (classList.includes("MuiToggleButton-sizeLarge")) return "large";
+    if (classList.includes("MuiToggleButton-sizeMedium")) return "medium";
+    return void 0;
+  })();
+  if (label) {
+    return /* @__PURE__ */ jsx(Tooltip, {
+      title: label,
+      describeChild: false,
+      placement: labelPlacement,
+      children: /* @__PURE__ */ jsx(MuiButtonBase, {
+        ...rest,
+        render: props.render ?? /* @__PURE__ */ jsx(IconButton, {
+          size
+        }),
+        ref: forwardedRef
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(MuiButtonBase, {
+    ...rest,
+    render: props.render ?? /* @__PURE__ */ jsx(IconButton, {
+      size
+    }),
+    ref: forwardedRef
+  });
+});
+export {
+  MuiToggleButton
+};

package/dist/~components/MuiTypography.d.ts

@@ -0,0 +1,2 @@
+declare const MuiTypography: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "render"> & import("react").RefAttributes<HTMLElement | HTMLParagraphElement>>;
+export { MuiTypography };

package/dist/~components/MuiTypography.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+const variantMapping = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  subtitle1: "h6",
+  subtitle2: "h6",
+  body1: "p",
+  body2: "p",
+  inherit: "p",
+  button: "span",
+  caption: "span",
+  overline: "span"
+};
+const variants = Object.keys(variantMapping);
+const headings = ["h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2"];
+const MuiTypography = forwardRef((props, forwardedRef) => {
+  const classList = props.className?.split(" ").filter(Boolean);
+  const variant = (() => {
+    const variant2 = variants.find((name) => classList?.includes(`MuiTypography-${name}`));
+    return variant2 || "body2";
+  })();
+  const render = (() => {
+    const Element = variantMapping[variant] || "p";
+    return /* @__PURE__ */ jsx(Element, {});
+  })();
+  return /* @__PURE__ */ jsx(Role, {
+    render,
+    ...props,
+    ref: forwardedRef
+  });
+});
+export {
+  MuiTypography
+};

package/dist/~createTheme.js

@@ -5,6 +5,8 @@ import OutlinedInput from "@mui/material/OutlinedInput";
 import StepConnector from "@mui/material/StepConnector";
 import { createTheme as createMuiTheme } from "@mui/material/styles";
 import cx from "classnames";
+import { MuiAutocomplete } from "./~components/MuiAutocomplete.js";
+import { MuiAvatarGroup } from "./~components/MuiAvatarGroup.js";
 import { MuiBadge } from "./~components/MuiBadge.js";
 import { MuiBottomNavigationAction } from "./~components/MuiBottomNavigation.js";
 import { MuiButtonBase } from "./~components/MuiButtonBase.js";
@@ -12,9 +14,12 @@ import { MuiCard, MuiCardActionArea, MuiCardMedia } from "./~components/MuiCard.
 import { MuiChip, MuiChipDeleteIcon, MuiChipLabel } from "./~components/MuiChip.js";
 import { MuiDivider } from "./~components/MuiDivider.js";
 import { MuiIconButton } from "./~components/MuiIconButton.js";
+import { MuiInputLabel } from "./~components/MuiInputLabel.js";
 import { MuiSnackbar } from "./~components/MuiSnackbar.js";
 import { MuiStepIcon } from "./~components/MuiStepper.js";
-import { MuiTableCell, MuiTableHead } from "./~components/MuiTable.js";
+import { MuiTableBody, MuiTableCell, MuiTableHead } from "./~components/MuiTable.js";
+import { MuiToggleButton } from "./~components/MuiToggleButton.js";
+import { MuiTypography } from "./~components/MuiTypography.js";
 import { ArrowDownIcon, CaretsUpDownIcon, ChevronDownIcon, ChevronLeftDoubleIcon, ChevronLeftIcon, ChevronRightDoubleIcon, ChevronRightIcon, DismissIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "./Icon.js";
 function createTheme() {
   const palette = {
@@ -163,6 +168,9 @@ function createTheme() {
             children: ownerState.getOptionLabel(option)
           }, key),
           slotProps: {
+            root: {
+              component: MuiAutocomplete
+            },
             paper: {
               elevation: 8
               // match Menu elevation
@@ -199,7 +207,12 @@ function createTheme() {
       },
       MuiAvatarGroup: {
         defaultProps: {
-          component: Role.div
+          component: MuiAvatarGroup,
+          slotProps: {
+            surplus: {
+              ["data-_sk-surplus"]: ``
+            }
+          }
         }
       },
       MuiBackdrop: {
@@ -315,7 +328,8 @@ function createTheme() {
       },
       MuiDialogContentText: {
         defaultProps: {
-          component: Role.p
+          component: Role.p,
+          variant: "inherit"
         }
       },
       MuiDialogTitle: {
@@ -387,7 +401,7 @@ function createTheme() {
       },
       MuiInputLabel: {
         defaultProps: {
-          component: Role.label,
+          component: MuiInputLabel,
           shrink: true
           // Removes label animation and masked border from TextField
         }
@@ -526,7 +540,12 @@ function createTheme() {
       },
       MuiPopover: {
         defaultProps: {
-          component: Role.div
+          component: Role.div,
+          slotProps: {
+            paper: {
+              role: "dialog"
+            }
+          }
         }
       },
       MuiRadio: {
@@ -561,7 +580,12 @@ function createTheme() {
       },
       MuiSlider: {
         defaultProps: {
-          component: Role.span
+          component: Role.span,
+          slotProps: {
+            valueLabel: {
+              className: "MuiTooltip-tooltip"
+            }
+          }
         }
       },
       MuiSnackbar: {
@@ -636,7 +660,7 @@ function createTheme() {
       },
       MuiTableBody: {
         defaultProps: {
-          component: withRenderProp(Role, "tbody"),
+          component: MuiTableBody,
           role: void 0
           // Removing role="rowgroup". See https://github.com/iTwin/stratakit/pull/1361
         }
@@ -700,7 +724,7 @@ function createTheme() {
       },
       MuiToggleButton: {
         defaultProps: {
-          component: MuiIconButton
+          component: MuiToggleButton
         }
       },
       MuiToolbar: {
@@ -727,22 +751,7 @@ function createTheme() {
       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
-          }
+          component: MuiTypography
         }
       }
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stratakit/mui",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "license": "MIT",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
@@ -45,7 +45,7 @@
     "design system"
   ],
   "dependencies": {
-    "@ariakit/react": "^0.4.21",
+    "@ariakit/react": "^0.4.25",
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
@@ -57,9 +57,9 @@
   "devDependencies": {
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "esbuild": "^0.27.3",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "esbuild": "^0.27.7",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "typescript": "~5.9.3"
   },
   "peerDependencies": {