@stratakit/mui 0.2.1 → 0.3.1

package/dist/DEV/~components/MuiCard.js

@@ -0,0 +1,102 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Role } from "@ariakit/react/role";
+import {
+  forwardRef,
+  useEventHandlers,
+  useMergedRefs
+} from "@stratakit/foundations/secret-internals";
+import { MuiButtonBase } from "./MuiButtonBase.js";
+const MuiCardContext = React.createContext(void 0);
+const MuiCard = forwardRef(
+  (props, forwardedRef) => {
+    const { role, ...rest } = props;
+    const [actionAreaElement, setActionAreaElement] = React.useState(void 0);
+    const handleActionAreaClick = (event) => {
+      if (!actionAreaElement) return;
+      if (!(event.target instanceof Element)) return;
+      if (event.target.closest("a, button, [role=button]")) return;
+      const selection = window.getSelection();
+      if (selection && !selection.isCollapsed) return;
+      actionAreaElement.click();
+    };
+    return /* @__PURE__ */ jsx(
+      MuiCardContext.Provider,
+      {
+        value: { actionAreaElement, setActionAreaElement },
+        children: /* @__PURE__ */ jsx(
+          Role,
+          {
+            render: /* @__PURE__ */ jsx("article", {}),
+            ...rest,
+            "data-_sk-actionable": actionAreaElement ? "" : void 0,
+            onClick: useEventHandlers(props.onClick, handleActionAreaClick),
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  }
+);
+DEV: MuiCard.displayName = "MuiCard";
+const MuiCardActionArea = forwardRef(
+  (props, forwardedRef) => {
+    const { role, ...rest } = props;
+    const context = React.useContext(MuiCardContext);
+    return /* @__PURE__ */ jsx(
+      MuiButtonBase,
+      {
+        ...rest,
+        ref: useMergedRefs(context?.setActionAreaElement, forwardedRef)
+      }
+    );
+  }
+);
+DEV: MuiCardActionArea.displayName = "MuiCardActionArea";
+const MEDIA_COMPONENTS = ["audio", "iframe", "img", "picture", "video"];
+function extractBackgroundImageUrl(style) {
+  const backgroundImage = style?.backgroundImage;
+  if (!backgroundImage?.startsWith("url(")) return void 0;
+  if (!['"', "'"].includes(backgroundImage[4])) return void 0;
+  return backgroundImage.slice(5, -2);
+}
+const MuiCardMedia = forwardRef(
+  (props, forwardedRef) => {
+    const [tagName, setTagName] = React.useState(void 0);
+    const determineTagName = React.useCallback(
+      (element) => {
+        if (!element) return;
+        setTagName(element.tagName.toLowerCase());
+      },
+      []
+    );
+    const isMediaComponent = MEDIA_COMPONENTS.includes(tagName ?? "");
+    const src = isMediaComponent ? extractBackgroundImageUrl(props.style) : void 0;
+    const style = (() => {
+      if (!isMediaComponent) return props.style;
+      const { backgroundImage, ...restStyle } = props.style ?? {};
+      return restStyle;
+    })();
+    const role = (() => {
+      if (!isMediaComponent) return props.role;
+      if (props.role === "img") return void 0;
+      return props.role;
+    })();
+    return /* @__PURE__ */ jsx(
+      Role.div,
+      {
+        ...props,
+        ...src ? { src } : {},
+        role,
+        style,
+        ref: useMergedRefs(determineTagName, forwardedRef)
+      }
+    );
+  }
+);
+DEV: MuiCardMedia.displayName = "MuiCardMedia";
+export {
+  MuiCard,
+  MuiCardActionArea,
+  MuiCardMedia
+};

package/dist/DEV/~components/MuiChip.js

@@ -0,0 +1,84 @@
+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
+        }
+      )
+    }
+  );
+});
+DEV: MuiChip.displayName = "MuiChip";
+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
+      }
+    );
+  }
+);
+DEV: MuiChipLabel.displayName = "MuiChipLabel";
+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, {})
+      ]
+    }
+  );
+});
+DEV: MuiChipDeleteIcon.displayName = "MuiChipDeleteIcon";
+export {
+  MuiChip,
+  MuiChipDeleteIcon,
+  MuiChipLabel
+};

package/dist/DEV/~components/MuiDivider.js

@@ -0,0 +1,15 @@
+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 });
+});
+DEV: MuiDivider.displayName = "MuiDivider";
+export {
+  MuiDivider
+};

package/dist/DEV/~components/MuiIconButton.js

@@ -0,0 +1,17 @@
+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 });
+  }
+);
+DEV: MuiIconButton.displayName = "MuiIconButton";
+export {
+  MuiIconButton
+};

package/dist/DEV/~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 });
+  }
+);
+DEV: MuiSnackbar.displayName = "MuiSnackbar";
+export {
+  MuiSnackbar
+};

package/dist/DEV/~components/MuiStepper.js

@@ -0,0 +1,21 @@
+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 });
+  }
+);
+DEV: MuiStepIcon.displayName = "MuiStepIcon";
+export {
+  MuiStepIcon
+};

package/dist/DEV/~components/MuiTable.js

@@ -0,0 +1,23 @@
+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 }) });
+  }
+);
+DEV: MuiTableHead.displayName = "MuiTableHead";
+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 });
+  }
+);
+DEV: MuiTableCell.displayName = "MuiTableCell";
+export {
+  MuiTableCell,
+  MuiTableHead
+};

package/dist/Icon.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Icon } from "@stratakit/foundations";
 declare const ArrowDownIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const CheckmarkIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
 declare const CaretsUpDownIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
 declare const ChevronDownIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
 declare const ChevronLeftIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
@@ -8,8 +9,9 @@ declare const ChevronLeftDoubleIcon: React.ForwardRefExoticComponent<Omit<React.
 declare const ChevronRightIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
 declare const ChevronRightDoubleIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
 declare const DismissIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const DismissCircleIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
 declare const ErrorIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
 declare const InfoIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
 declare const SuccessIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
 declare const WarningIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export { Icon, ArrowDownIcon, CaretsUpDownIcon, ChevronDownIcon, ChevronLeftIcon, ChevronLeftDoubleIcon, ChevronRightIcon, ChevronRightDoubleIcon, DismissIcon, InfoIcon, SuccessIcon, WarningIcon, ErrorIcon, };
+export { Icon, ArrowDownIcon, CheckmarkIcon, CaretsUpDownIcon, ChevronDownIcon, ChevronLeftIcon, ChevronLeftDoubleIcon, ChevronRightIcon, ChevronRightDoubleIcon, DismissIcon, DismissCircleIcon, InfoIcon, SuccessIcon, WarningIcon, ErrorIcon, };

package/dist/Icon.js

@@ -3,12 +3,14 @@ import * as React from "react";
 import { Icon } from "@stratakit/foundations";
 import svgArrowDown from "@stratakit/icons/arrow-down.svg";
 import svgCaretsUpDown from "@stratakit/icons/carets-up-down.svg";
+import svgCheckmark from "@stratakit/icons/checkmark.svg";
 import svgChevronDown from "@stratakit/icons/chevron-down.svg";
 import svgChevronLeft from "@stratakit/icons/chevron-left.svg";
 import svgChevronLeftDouble from "@stratakit/icons/chevron-left-double.svg";
 import svgChevronRight from "@stratakit/icons/chevron-right.svg";
 import svgChevronRightDouble from "@stratakit/icons/chevron-right-double.svg";
 import svgDismiss from "@stratakit/icons/dismiss.svg";
+import svgDismissCircle from "@stratakit/icons/dismiss-circle.svg";
 import svgError from "@stratakit/icons/error.svg";
 import svgInfo from "@stratakit/icons/info.svg";
 import svgStatusSuccess from "@stratakit/icons/status-success.svg";
@@ -23,6 +25,7 @@ function createIconComponent(href) {
   });
 }
 const ArrowDownIcon = createIconComponent(svgArrowDown);
+const CheckmarkIcon = createIconComponent(svgCheckmark);
 const CaretsUpDownIcon = createIconComponent(svgCaretsUpDown);
 const ChevronDownIcon = createIconComponent(svgChevronDown);
 const ChevronLeftIcon = createIconComponent(svgChevronLeft);
@@ -30,6 +33,7 @@ const ChevronLeftDoubleIcon = createIconComponent(svgChevronLeftDouble);
 const ChevronRightIcon = createIconComponent(svgChevronRight);
 const ChevronRightDoubleIcon = createIconComponent(svgChevronRightDouble);
 const DismissIcon = createIconComponent(svgDismiss);
+const DismissCircleIcon = createIconComponent(svgDismissCircle);
 const ErrorIcon = createIconComponent(svgError);
 const InfoIcon = createIconComponent(svgInfo);
 const SuccessIcon = createIconComponent(svgStatusSuccess);
@@ -37,11 +41,13 @@ const WarningIcon = createIconComponent(svgWarning);
 export {
   ArrowDownIcon,
   CaretsUpDownIcon,
+  CheckmarkIcon,
   ChevronDownIcon,
   ChevronLeftDoubleIcon,
   ChevronLeftIcon,
   ChevronRightDoubleIcon,
   ChevronRightIcon,
+  DismissCircleIcon,
   DismissIcon,
   ErrorIcon,
   Icon,

package/dist/Root.d.ts

@@ -1,5 +1,7 @@
 import * as React from "react";
-interface RootProps extends React.ComponentPropsWithoutRef<"div"> {
+import { Root as StrataKitRoot } from "@stratakit/foundations";
+import type { BaseProps } from "@stratakit/foundations/secret-internals";
+interface RootProps extends BaseProps<"div">, Pick<React.ComponentProps<typeof StrataKitRoot>, "rootNode"> {
     children?: React.ReactNode;
     /**
      * The color scheme to use for all components on the page.
@@ -16,5 +18,5 @@ interface RootProps extends React.ComponentPropsWithoutRef<"div"> {
  * </Root>
  * ```
  */
-declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
+declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 export { Root };

package/dist/Root.internal.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+/** This is similar to MUI's `StyledEngineProvider` but with a custom Emotion cache. */
+export declare function StyledEngineProvider({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/Root.internal.js

@@ -0,0 +1,77 @@
+import { c as _c } from "react-compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
+function StyledEngineProvider(t0) {
+  const $ = _c(3);
+  const {
+    children
+  } = t0;
+  const [cache] = React.useState(_temp);
+  let t1;
+  if ($[0] !== cache || $[1] !== children) {
+    t1 = jsx(CacheProvider, {
+      value: cache,
+      children
+    });
+    $[0] = cache;
+    $[1] = children;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+function _temp() {
+  return createEmotionCache();
+}
+function createEmotionCache() {
+  const cache = createCache({
+    key: "css",
+    speedy: true,
+    // This injects styles using the `insertRule` API.
+    stylisPlugins: [prefixer]
+  });
+  const prevInsert = cache.insert;
+  cache.insert = (...args) => {
+    if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
+      args[1].styles = `@layer mui {${args[1].styles}}`;
+    }
+    return prevInsert(...args);
+  };
+  return cache;
+}
+function prefixer(element) {
+  if (element.length > -1 && !element.return && element.type === "decl") {
+    element.return = prefix(element.value, element.length);
+  }
+}
+function prefix(value, length) {
+  switch (hash(value, length)) {
+    // color-adjust
+    case 5103:
+      return `-webkit-print-${value}${value}`;
+    // box-decoration-break
+    case 3005:
+    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+    case 4855:
+    // user-select, hyphens, text-size-adjust
+    case 4246:
+    case 6968:
+    case 2756:
+      return `-webkit-${value}${value}`;
+  }
+  return value;
+}
+function hash(value, length) {
+  return (value.charCodeAt(0) | 0) ^ 45 ? (((length << 2 ^ (value.charCodeAt(0) | 0)) << 2 ^ (value.charCodeAt(1) | 0)) << 2 ^ (value.charCodeAt(2) | 0)) << 2 ^ (value.charCodeAt(3) | 0) : 0;
+}
+export {
+  StyledEngineProvider
+};

package/dist/Root.js

@@ -1,23 +1,23 @@
 import { c as _c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { StyledEngineProvider, ThemeProvider, useColorScheme } from "@mui/material/styles";
+import { ThemeProvider, useColorScheme } from "@mui/material/styles";
 import { Root as StrataKitRoot } from "@stratakit/foundations";
-import { RootContext, useSafeContext } from "@stratakit/foundations/secret-internals";
+import { forwardRef, RootContext, useSafeContext } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
 import { createTheme } from "./createTheme.js";
+import { StyledEngineProvider } from "./Root.internal.js";
 import css from "./styles.css.js";
 const theme = createTheme();
 const packageName = "@stratakit/mui";
-const key = `${packageName}@${"0.2.1"}`;
-const Root = React.forwardRef((props, forwardedRef) => {
+const key = `${packageName}@${"0.3.1"}`;
+const Root = forwardRef((props, forwardedRef) => {
   const {
     children,
     colorScheme,
     ...rest
   } = props;
   return /* @__PURE__ */ jsx(StyledEngineProvider, {
-    enableCssLayer: true,
     children: /* @__PURE__ */ jsxs(ThemeProvider, {
       theme,
       defaultMode: colorScheme,
@@ -32,16 +32,18 @@ const Root = React.forwardRef((props, forwardedRef) => {
     })
   });
 });
-const RootInner = React.forwardRef((props, forwardedRef) => {
+const RootInner = forwardRef((props, forwardedRef) => {
   const {
     children,
     colorScheme,
+    rootNode,
     ...rest
   } = props;
   return /* @__PURE__ */ jsx(StrataKitRoot, {
     ...rest,
     className: cx("\u{1F95D}MuiRoot", props.className),
     colorScheme,
+    rootNode,
     synchronizeColorScheme: true,
     ref: forwardedRef,
     children
@@ -77,7 +79,7 @@ function Styles() {
   const $ = _c(4);
   const rootContext = useSafeContext(RootContext);
   if (!rootContext.versions?.has(packageName)) {
-    rootContext.versions?.set(packageName, "0.2.1");
+    rootContext.versions?.set(packageName, "0.3.1");
   }
   const {
     rootNode,