@mui/internal-core-docs 0.0.1 → 9.0.0-canary.1

package/HighlightedCodeWithTabs/HighlightedCodeWithTabs.js

@@ -0,0 +1,362 @@
+import * as React from 'react';
+import { styled, alpha } from '@mui/material/styles';
+import { Tabs } from '@mui/base/Tabs';
+import { TabsList as TabsListBase } from '@mui/base/TabsList';
+import { TabPanel as TabPanelBase } from '@mui/base/TabPanel';
+import { Tab as TabBase } from '@mui/base/Tab';
+import useLocalStorageState from '@mui/utils/useLocalStorageState';
+import { HighlightedCode } from "../HighlightedCode/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PACKAGE_MANAGER_ORDER = new Map(['npm', 'pnpm', 'yarn'].map((manager, index) => [manager, index]));
+export const CodeTabList = styled(TabsListBase)(({
+  theme
+}) => ({
+  display: 'flex',
+  gap: theme.spacing(0.5),
+  borderLeft: '1px solid',
+  borderRight: '1px solid',
+  overflowX: 'auto',
+  ...theme.applyDarkStyles({
+    backgroundColor: alpha(theme.palette.primaryDark[800], 0.2)
+  }),
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      padding: theme.spacing(1.5, 1)
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      padding: theme.spacing(1)
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      borderTop: 'none'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      borderTop: '1px solid'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      borderBottom: 'none'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      borderBottom: '1px solid'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      borderTopLeftRadius: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      borderTopLeftRadius: (theme.vars || theme).shape.borderRadius
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      borderTopRightRadius: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      borderTopRightRadius: (theme.vars || theme).shape.borderRadius
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      borderColor: (theme.vars || theme).palette.divider
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      borderColor: (theme.vars || theme).palette.primaryDark[700]
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      backgroundColor: alpha(theme.palette.grey[50], 0.2)
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      backgroundColor: (theme.vars || theme).palette.primaryDark[900]
+    }
+  }]
+}));
+export const CodeTabPanel = styled(TabPanelBase)({
+  '& pre': {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    '& code': {}
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      marginTop: -1
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      marginTop: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      '& pre': {
+        marginTop: 0
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      '& pre': {
+        marginTop: -1
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.mounted,
+    style: {
+      '& pre': {
+        '& code': {
+          opacity: 1
+        }
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.mounted,
+    style: {
+      '& pre': {
+        '& code': {
+          opacity: 0
+        }
+      }
+    }
+  }]
+});
+export const CodeTab = styled(TabBase)(({
+  theme
+}) => ({
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      border: '1px solid transparent',
+      fontSize: theme.typography.pxToRem(13)
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      border: 'none',
+      fontSize: theme.typography.pxToRem(12)
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      color: (theme.vars || theme).palette.text.tertiary
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      color: (theme.vars || theme).palette.grey[500]
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      fontFamily: theme.typography.fontFamily
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      fontFamily: theme.typography.fontFamilyCode
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      fontWeight: theme.typography.fontWeightMedium
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      fontWeight: theme.typography.fontWeightBold
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState?.contained,
+    style: {
+      transition: 'background, color, 100ms ease'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      transition: 'unset'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained,
+    style: {
+      '&:hover': {
+        backgroundColor: alpha(theme.palette.primaryDark[500], 0.5),
+        color: (theme.vars || theme).palette.grey[400]
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState?.contained && ownerState.mounted,
+    style: {
+      '&.base--selected': {
+        color: '#FFF',
+        '&::after': {
+          content: "''",
+          position: 'absolute',
+          left: 0,
+          bottom: '-8px',
+          height: 2,
+          width: '100%',
+          bgcolor: (theme.vars || theme).palette.primary.light
+        }
+      }
+    }
+  }],
+  ...theme.unstable_sx({
+    flex: '0 0 auto',
+    height: 26,
+    p: '2px 8px',
+    bgcolor: 'transparent',
+    lineHeight: 1.2,
+    outline: 'none',
+    minWidth: 45,
+    cursor: 'pointer',
+    borderRadius: 99,
+    position: 'relative',
+    '&:hover': {
+      backgroundColor: (theme.vars || theme).palette.divider
+    },
+    '&:focus-visible': {
+      outline: '3px solid',
+      outlineOffset: '1px',
+      outlineColor: (theme.vars || theme).palette.primary.light
+    }
+  })
+}));
+export function HighlightedCodeWithTabs(props) {
+  const {
+    tabs,
+    storageKey
+  } = props;
+  const availableTabs = React.useMemo(() => {
+    const result = tabs.map(({
+      tab
+    }) => tab);
+    if (storageKey === 'package-manager') {
+      result.sort((a, b) => (PACKAGE_MANAGER_ORDER.get(a) ?? Infinity) - (PACKAGE_MANAGER_ORDER.get(b) ?? Infinity));
+    }
+    return result;
+  }, [storageKey, tabs]);
+  const [activeTab, setActiveTab] = useLocalStorageState(storageKey ?? null, availableTabs[0]);
+  // During hydration, activeTab is null, default to first value.
+  const defaultizedActiveTab = activeTab ?? availableTabs[0];
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const handleChange = (event, newValue) => {
+    setActiveTab(newValue);
+  };
+  const ownerState = {
+    mounted
+  };
+  return /*#__PURE__*/_jsxs(Tabs, {
+    selectionFollowsFocus: true,
+    value: defaultizedActiveTab,
+    onChange: handleChange,
+    children: [/*#__PURE__*/_jsx(CodeTabList, {
+      ownerState: ownerState,
+      children: tabs.map(({
+        tab
+      }) => /*#__PURE__*/_jsx(CodeTab, {
+        ownerState: ownerState,
+        value: tab,
+        children: tab
+      }, tab))
+    }), tabs.map(({
+      tab,
+      language,
+      code
+    }) => /*#__PURE__*/_jsx(CodeTabPanel, {
+      ownerState: ownerState,
+      value: tab,
+      children: /*#__PURE__*/_jsx(HighlightedCode, {
+        language: language || 'bash',
+        code: typeof code === 'function' ? code(tab) : code
+      })
+    }, tab))]
+  });
+}

package/HighlightedCodeWithTabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./HighlightedCodeWithTabs.js";
+export { HighlightedCodeWithTabs as default } from "./HighlightedCodeWithTabs.js";

package/HighlightedCodeWithTabs/index.js

@@ -0,0 +1,2 @@
+export * from "./HighlightedCodeWithTabs.js";
+export { HighlightedCodeWithTabs as default } from "./HighlightedCodeWithTabs.js";

package/IconImage/IconImage.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Theme } from '@mui/material/styles';
+import { SxProps } from '@mui/system';
+export type IconImageProps = {
+  name: 'product-core' | 'product-advanced' | 'product-toolpad' | 'product-templates' | 'product-designkits' | 'pricing/x-plan-pro' | 'pricing/x-plan-premium' | 'pricing/x-plan-community' | 'pricing/yes' | 'pricing/no' | 'pricing/time' | 'companies/spotify' | 'companies/amazon' | 'companies/nasa' | 'companies/netflix' | 'companies/unity' | 'companies/shutterstock' | 'companies/southwest' | 'companies/siemens' | 'companies/deloitte' | 'companies/apple' | 'companies/twitter' | 'companies/salesforce' | 'companies/verizon' | 'companies/atandt' | 'companies/patreon' | 'companies/ebay' | 'companies/samsung' | 'companies/volvo' | 'companies/tesla' | string;
+  height?: number;
+  mode?: '' | 'light' | 'dark';
+  sx?: SxProps<Theme>;
+  width?: number;
+} & Omit<React.JSX.IntrinsicElements['img'], 'ref'>;
+export default function IconImage(props: IconImageProps): import("react/jsx-runtime").JSX.Element;

package/IconImage/IconImage.js

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { ThemeOptionsContext } from "../ThemeContext/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Img = styled('img')({
+  display: 'inline-block',
+  verticalAlign: 'bottom'
+});
+let neverHydrated = true;
+export default function IconImage(props) {
+  const {
+    height: heightProp,
+    name,
+    width: widthProp,
+    mode: modeProp,
+    ...other
+  } = props;
+  const themeOptions = React.useContext(ThemeOptionsContext);
+  const [firstRender, setFirstRender] = React.useState(true);
+  React.useEffect(() => {
+    setFirstRender(false);
+    neverHydrated = false;
+  }, []);
+  let defaultWidth;
+  let defaultHeight;
+  const mode = modeProp ?? themeOptions.paletteMode;
+  if (name.startsWith('product-')) {
+    defaultWidth = 36;
+    defaultHeight = 36;
+  } else if (name.startsWith('pricing/x-plan-')) {
+    defaultWidth = 17;
+    defaultHeight = 20;
+  } else if (['pricing/yes', 'pricing/no', 'pricing/time'].includes(name)) {
+    defaultWidth = 18;
+    defaultHeight = 18;
+  }
+  const width = widthProp ?? defaultWidth;
+  const height = heightProp ?? defaultHeight;
+
+  // First time render with a theme depend image
+  if (firstRender && neverHydrated && mode !== '') {
+    if (other.loading === 'eager') {
+      return /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(Img, {
+          className: "only-light-mode-v2",
+          src: `/static/branding/${name}-light.svg`,
+          alt: "",
+          width: width,
+          height: height,
+          ...other,
+          loading: "lazy"
+        }), /*#__PURE__*/_jsx(Img, {
+          className: "only-dark-mode-v2",
+          src: `/static/branding/${name}-dark.svg`,
+          alt: "",
+          width: width,
+          height: height,
+          ...other,
+          loading: "lazy"
+        })]
+      });
+    }
+
+    // Prevent hydration mismatch between the light and dark mode image source.
+    return /*#__PURE__*/_jsx(Box, {
+      component: "span",
+      sx: {
+        width,
+        height,
+        display: 'inline-block'
+      }
+    });
+  }
+  return /*#__PURE__*/_jsx(Img, {
+    src: `/static/branding/${name}${mode ? `-${mode}` : ''}.svg`,
+    alt: "",
+    loading: "lazy",
+    width: width,
+    height: height,
+    ...other
+  });
+}

package/IconImage/index.d.ts

@@ -0,0 +1 @@
+export { default, type IconImageProps } from "./IconImage.js";

package/IconImage/index.js

@@ -0,0 +1 @@
+export { default } from "./IconImage.js";

package/InfoCard/InfoCard.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { TypographyProps } from '@mui/material/Typography';
+import { LinkProps } from "../Link/index.js";
+interface GlowingIconContainerProps {
+  icon: React.ReactNode;
+}
+export declare function GlowingIconContainer({
+  icon
+}: GlowingIconContainerProps): import("react/jsx-runtime").JSX.Element;
+interface InfoCardProps {
+  classNameDescription?: string;
+  classNameTitle?: string;
+  description?: string;
+  icon?: React.ReactNode;
+  link?: string;
+  prefetch?: LinkProps['prefetch'];
+  svg?: React.ReactNode;
+  title: string;
+  titleProps?: TypographyProps;
+}
+export declare function InfoCard(props: InfoCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/InfoCard/InfoCard.js

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import { Link } from "../Link/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function GlowingIconContainer({
+  icon
+}) {
+  return /*#__PURE__*/_jsx(Box, {
+    sx: theme => ({
+      width: 36,
+      height: 36,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexShrink: 0,
+      borderRadius: 1,
+      border: '1px solid',
+      borderColor: 'primary.200',
+      bgcolor: 'primary.50',
+      boxShadow: `0px 0 0 2px ${alpha(theme.palette.primary[500], 0.1)}, 0px 2px 12px 0px rgba(234, 237, 241, 0.3) inset`,
+      '& .MuiSvgIcon-root': {
+        fontSize: theme.typography.pxToRem(18)
+      },
+      ...theme.applyDarkStyles({
+        borderColor: alpha(theme.palette.primary[400], 0.25),
+        bgcolor: alpha(theme.palette.primary[900], 0.2),
+        boxShadow: `0 0 0 2px ${alpha(theme.palette.primary[600], 0.1)}, 0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset`
+      })
+    }),
+    children: icon
+  });
+}
+export function InfoCard(props) {
+  const {
+    classNameDescription,
+    classNameTitle,
+    description,
+    icon,
+    link,
+    svg,
+    title,
+    titleProps,
+    ...other
+  } = props;
+  return /*#__PURE__*/_jsxs(Paper, {
+    variant: "outlined",
+    component: link ? Link : 'div',
+    href: link,
+    ...(link ? {
+      noLinkStyle: true,
+      // Fix overloading with prefetch={false}, only prefetch on hover.
+      prefetch: false
+    } : {}),
+    sx: theme => ({
+      p: 2.5,
+      height: '100%',
+      background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+      ...theme.applyDarkStyles({
+        bgcolor: alpha(theme.palette.primaryDark[800], 0.25),
+        background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+        borderColor: 'primaryDark.700'
+      })
+    }),
+    ...other,
+    children: [svg && svg, icon && /*#__PURE__*/_jsx(GlowingIconContainer, {
+      icon: icon
+    }), /*#__PURE__*/_jsx(Typography, {
+      component: "h3",
+      variant: "body2",
+      className: classNameTitle,
+      ...titleProps,
+      sx: [{
+        fontWeight: 'semiBold',
+        color: 'text.primary',
+        mt: icon ? 2 : 0,
+        mb: description ? 0.5 : 0
+      }, ...(Array.isArray(titleProps?.sx) ? titleProps.sx : [titleProps?.sx])],
+      children: title
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      sx: {
+        color: 'text.secondary'
+      },
+      className: classNameDescription,
+      children: description
+    })]
+  });
+}

package/InfoCard/index.d.ts

@@ -0,0 +1 @@
+export * from "./InfoCard.js";

package/InfoCard/index.js

@@ -0,0 +1 @@
+export * from "./InfoCard.js";

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Call-Em-All
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Link/Link.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { LinkProps as NextLinkProps } from 'next/link';
+import { LinkProps as MuiLinkProps } from '@mui/material/Link';
+/**
+ * File to keep in sync with:
+ *
+ * - /packages/mui-docs/src/Link/Link.tsx
+ * - /examples/material-ui-nextjs-pages-router/src/Link.js
+ * - /examples/material-ui-nextjs-pages-router-ts/src/Link.tsx
+ * - /examples/material-ui-nextjs-ts-v4-v5-migration/src/Link.tsx
+ */
+interface NextLinkComposedProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>, Omit<NextLinkProps, 'href' | 'as' | 'passHref' | 'onMouseEnter' | 'onClick' | 'onTouchStart'> {
+  to: NextLinkProps['href'];
+  linkAs?: NextLinkProps['as'];
+}
+export declare const NextLinkComposed: React.ForwardRefExoticComponent<NextLinkComposedProps & React.RefAttributes<HTMLAnchorElement>>;
+export type LinkProps = {
+  activeClassName?: string;
+  as?: NextLinkProps['as'];
+  href: NextLinkProps['href'];
+  linkAs?: NextLinkProps['as'];
+  noLinkStyle?: boolean;
+} & Omit<NextLinkComposedProps, 'to' | 'linkAs' | 'href'> & Omit<MuiLinkProps, 'href'>;
+export declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export {};