@stratakit/mui 0.2.1 → 0.3.1

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type Chip from "@mui/material/Chip";
+import type { BaseProps } from "@stratakit/foundations/secret-internals";
+type ChipProps = React.ComponentProps<typeof Chip>;
+interface MuiChipProps extends BaseProps<"div">, Pick<ChipProps, "deleteLabel"> {
+}
+declare const MuiChip: React.ForwardRefExoticComponent<MuiChipProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+declare const MuiChipLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
+declare const MuiChipDeleteIcon: React.ForwardRefExoticComponent<Omit<import("@mui/material/IconButton").IconButtonOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "className" | "color" | "style" | "tabIndex" | "children" | "render" | "label" | "component" | "classes" | "sx" | "disabled" | "disableFocusRipple" | "loading" | "loadingIndicator" | "size" | "LinkComponent" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "edge">, "ref"> & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+export { MuiChip, MuiChipLabel, MuiChipDeleteIcon };

package/dist/~components/MuiChip.js

@@ -0,0 +1,83 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Role } from "@ariakit/react/role";
+import { VisuallyHidden } from "@ariakit/react/visually-hidden";
+import IconButton from "@mui/material/IconButton";
+import { useTheme } from "@mui/material/styles";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import { DismissCircleIcon } from "../Icon.js";
+import { MuiButtonBase } from "./MuiButtonBase.js";
+const MuiChipContext = React.createContext(void 0);
+const MuiChip = forwardRef((props, forwardedRef) => {
+  const {
+    role,
+    deleteLabel,
+    ...rest
+  } = props;
+  const clearId = React.useId();
+  const [labelId, setLabelId] = React.useState(void 0);
+  const isClickable = props.className?.includes("MuiChip-clickable") ?? false;
+  return /* @__PURE__ */ jsx(MuiChipContext.Provider, {
+    value: {
+      labelId,
+      setLabelId,
+      clearId,
+      isClickable,
+      deleteLabel
+    },
+    children: /* @__PURE__ */ jsx(Role.div, {
+      ...rest,
+      role: role === "button" ? void 0 : role,
+      tabIndex: void 0,
+      ref: forwardedRef
+    })
+  });
+});
+const MuiChipLabel = forwardRef((props, forwardedRef) => {
+  const defaultId = React.useId();
+  const {
+    id = defaultId,
+    ...rest
+  } = props;
+  const {
+    setLabelId,
+    isClickable
+  } = React.useContext(MuiChipContext) ?? {};
+  React.useEffect(() => {
+    if (!setLabelId) return;
+    setLabelId(id);
+    return () => {
+      setLabelId(void 0);
+    };
+  }, [id, setLabelId]);
+  const Component = isClickable ? MuiButtonBase : Role.span;
+  return /* @__PURE__ */ jsx(Component, {
+    id,
+    ...rest,
+    ref: forwardedRef
+  });
+});
+const MuiChipDeleteIcon = forwardRef((props, forwardedRef) => {
+  const theme = useTheme();
+  const defaultLabel = theme.components?.MuiAutocomplete?.defaultProps?.clearText ?? "Clear";
+  const {
+    clearId,
+    labelId,
+    deleteLabel = defaultLabel
+  } = React.useContext(MuiChipContext) ?? {};
+  return /* @__PURE__ */ jsxs(IconButton, {
+    "aria-labelledby": `${clearId} ${labelId}`,
+    size: "small",
+    ...props,
+    ref: forwardedRef,
+    children: [/* @__PURE__ */ jsx(VisuallyHidden, {
+      id: clearId,
+      children: deleteLabel
+    }), /* @__PURE__ */ jsx(DismissCircleIcon, {})]
+  });
+});
+export {
+  MuiChip,
+  MuiChipDeleteIcon,
+  MuiChipLabel
+};

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

@@ -0,0 +1,6 @@
+import type { DividerOwnProps } from "@mui/material/Divider";
+import type { BaseProps } from "@stratakit/foundations/secret-internals";
+interface MuiDividerProps extends BaseProps<"hr">, Pick<DividerOwnProps, "children"> {
+}
+declare const MuiDivider: import("react").ForwardRefExoticComponent<MuiDividerProps & import("react").RefAttributes<HTMLElement | HTMLHRElement>>;
+export { MuiDivider };

package/dist/~components/MuiDivider.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+const MuiDivider = forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  const defaultRender = (() => {
+    if (children || props["aria-orientation"] === "vertical") return /* @__PURE__ */ jsx("div", {});
+    return /* @__PURE__ */ jsx("hr", {});
+  })();
+  return /* @__PURE__ */ jsx(Role, {
+    render: defaultRender,
+    ...rest,
+    ref: forwardedRef,
+    children
+  });
+});
+export {
+  MuiDivider
+};

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

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

package/dist/~components/MuiIconButton.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import Tooltip from "@mui/material/Tooltip";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import { MuiButtonBase } from "./MuiButtonBase.js";
+const MuiIconButton = forwardRef((props, forwardedRef) => {
+  const {
+    label,
+    ...rest
+  } = props;
+  if (label) {
+    return /* @__PURE__ */ jsx(Tooltip, {
+      title: label,
+      describeChild: false,
+      children: /* @__PURE__ */ jsx(MuiButtonBase, {
+        ...rest,
+        ref: forwardedRef
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(MuiButtonBase, {
+    ...rest,
+    ref: forwardedRef
+  });
+});
+export {
+  MuiIconButton
+};

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

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

package/dist/~components/MuiSnackbar.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { Portal } from "@ariakit/react/portal";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+const MuiSnackbar = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Portal, {
+    ...props,
+    ref: forwardedRef
+  });
+});
+export {
+  MuiSnackbar
+};

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

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

package/dist/~components/MuiStepper.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import { CheckmarkIcon, ErrorIcon } from "../Icon.js";
+const MuiStepIcon = forwardRef((props, forwardedRef) => {
+  const {
+    children: _,
+    ...rest
+  } = props;
+  const classList = props.className?.split(" ") ?? [];
+  const completed = classList.includes("Mui-completed");
+  const error = classList.includes("Mui-error");
+  const children = (() => {
+    if (error) return /* @__PURE__ */ jsx(ErrorIcon, {});
+    if (completed) return /* @__PURE__ */ jsx(CheckmarkIcon, {});
+  })();
+  return /* @__PURE__ */ jsx(Role.span, {
+    "aria-hidden": "true",
+    ...rest,
+    ref: forwardedRef,
+    children
+  });
+});
+export {
+  MuiStepIcon
+};

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

@@ -0,0 +1,4 @@
+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 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 };

package/dist/~components/MuiTable.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+const MuiTableHeadContext = React.createContext(false);
+const MuiTableHead = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(MuiTableHeadContext.Provider, {
+    value: true,
+    children: /* @__PURE__ */ jsx(Role, {
+      render: /* @__PURE__ */ jsx("thead", {}),
+      ...props,
+      ref: forwardedRef
+    })
+  });
+});
+const MuiTableCell = forwardRef((props, forwardedRef) => {
+  const inHeader = React.useContext(MuiTableHeadContext);
+  const Component = inHeader ? "th" : "td";
+  return /* @__PURE__ */ jsx(Role, {
+    render: /* @__PURE__ */ jsx(Component, {}),
+    ...props,
+    ref: forwardedRef
+  });
+});
+export {
+  MuiTableCell,
+  MuiTableHead
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stratakit/mui",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "license": "MIT",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
@@ -26,10 +26,10 @@
   ],
   "description": "StrataKit theme for Material UI",
   "author": "Bentley Systems",
-  "homepage": "https://github.com/iTwin/design-system",
+  "homepage": "https://github.com/iTwin/stratakit",
   "repository": {
     "type": "git",
-    "url": "https://github.com/iTwin/design-system.git",
+    "url": "https://github.com/iTwin/stratakit.git",
     "directory": "packages/mui"
   },
   "keywords": [
@@ -45,17 +45,21 @@
     "design system"
   ],
   "dependencies": {
-    "@stratakit/foundations": "^0.4.6",
-    "@stratakit/icons": "^0.3.0",
+    "@ariakit/react": "^0.4.21",
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@stratakit/foundations": "^0.4.7",
+    "@stratakit/icons": "^0.3.1",
     "classnames": "^2.5.1",
     "react-compiler-runtime": "^1.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "esbuild": "^0.27.0",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
+    "esbuild": "^0.27.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "typescript": "~5.9.3"
   },
   "peerDependencies": {