[material-ui] Convert CircularProgress to support Pigment CSS

apps/pigment-css-next-app/src/app/material-ui/react-progress/page.tsx

@@ -0,0 +1,100 @@
+'use client';
+import * as React from 'react';
+import CircularColor from '../../../../../../docs/data/material/components/progress/CircularColor';
+import CircularDeterminate from '../../../../../../docs/data/material/components/progress/CircularDeterminate';
+import CircularIndeterminate from '../../../../../../docs/data/material/components/progress/CircularIndeterminate';
+import CircularIntegration from '../../../../../../docs/data/material/components/progress/CircularIntegration';
+import CircularUnderLoad from '../../../../../../docs/data/material/components/progress/CircularUnderLoad';
+import CircularWithValueLabel from '../../../../../../docs/data/material/components/progress/CircularWithValueLabel';
+import CustomizedProgressBars from '../../../../../../docs/data/material/components/progress/CustomizedProgressBars';
+import DelayingAppearance from '../../../../../../docs/data/material/components/progress/DelayingAppearance';
+import LinearBuffer from '../../../../../../docs/data/material/components/progress/LinearBuffer';
+import LinearColor from '../../../../../../docs/data/material/components/progress/LinearColor';
+import LinearDeterminate from '../../../../../../docs/data/material/components/progress/LinearDeterminate';
+import LinearIndeterminate from '../../../../../../docs/data/material/components/progress/LinearIndeterminate';
+import LinearWithValueLabel from '../../../../../../docs/data/material/components/progress/LinearWithValueLabel';
+
+export default function Progress() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Circular Color</h2>
+        <div className="demo-container">
+          <CircularColor />
+        </div>
+      </section>
+      <section>
+        <h2> Circular Determinate</h2>
+        <div className="demo-container">
+          <CircularDeterminate />
+        </div>
+      </section>
+      <section>
+        <h2> Circular Indeterminate</h2>
+        <div className="demo-container">
+          <CircularIndeterminate />
+        </div>
+      </section>
+      <section>
+        <h2> Circular Integration</h2>
+        <div className="demo-container">
+          <CircularIntegration />
+        </div>
+      </section>
+      <section>
+        <h2> Circular Under Load</h2>
+        <div className="demo-container">
+          <CircularUnderLoad />
+        </div>
+      </section>
+      <section>
+        <h2> Circular With Value Label</h2>
+        <div className="demo-container">
+          <CircularWithValueLabel />
+        </div>
+      </section>
+      <section>
+        <h2> Customized Progress Bars</h2>
+        <div className="demo-container">
+          <CustomizedProgressBars />
+        </div>
+      </section>
+      <section>
+        <h2> Delaying Appearance</h2>
+        <div className="demo-container">
+          <DelayingAppearance />
+        </div>
+      </section>
+      <section>
+        <h2> Linear Buffer</h2>
+        <div className="demo-container">
+          <LinearBuffer />
+        </div>
+      </section>
+      <section>
+        <h2> Linear Color</h2>
+        <div className="demo-container">
+          <LinearColor />
+        </div>
+      </section>
+      <section>
+        <h2> Linear Determinate</h2>
+        <div className="demo-container">
+          <LinearDeterminate />
+        </div>
+      </section>
+      <section>
+        <h2> Linear Indeterminate</h2>
+        <div className="demo-container">
+          <LinearIndeterminate />
+        </div>
+      </section>
+      <section>
+        <h2> Linear With Value Label</h2>
+        <div className="demo-container">
+          <LinearWithValueLabel />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}

apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import MaterialUILayout from '../../Layout';
+import CircularColor from '../../../../../docs/data/material/components/progress/CircularColor.tsx';
+import CircularDeterminate from '../../../../../docs/data/material/components/progress/CircularDeterminate.tsx';
+import CircularIndeterminate from '../../../../../docs/data/material/components/progress/CircularIndeterminate.tsx';
+import CircularIntegration from '../../../../../docs/data/material/components/progress/CircularIntegration.tsx';
+import CircularUnderLoad from '../../../../../docs/data/material/components/progress/CircularUnderLoad.tsx';
+import CircularWithValueLabel from '../../../../../docs/data/material/components/progress/CircularWithValueLabel.tsx';
+import CustomizedProgressBars from '../../../../../docs/data/material/components/progress/CustomizedProgressBars.tsx';
+import DelayingAppearance from '../../../../../docs/data/material/components/progress/DelayingAppearance.tsx';
+import LinearBuffer from '../../../../../docs/data/material/components/progress/LinearBuffer.tsx';
+import LinearColor from '../../../../../docs/data/material/components/progress/LinearColor.tsx';
+import LinearDeterminate from '../../../../../docs/data/material/components/progress/LinearDeterminate.tsx';
+import LinearIndeterminate from '../../../../../docs/data/material/components/progress/LinearIndeterminate.tsx';
+import LinearWithValueLabel from '../../../../../docs/data/material/components/progress/LinearWithValueLabel.tsx';
+
+export default function Progress() {
+  return (
+    <MaterialUILayout>
+      <h1>Progress</h1>
+      <section>
+        <h2> Circular Color</h2>
+        <div className="demo-container">
+          <CircularColor />
+        </div>
+      </section>
+      <section>
+        <h2> Circular Determinate</h2>
+        <div className="demo-container">
+          <CircularDeterminate />
+        </div>
+      </section>
+      <section>
+        <h2> Circular Indeterminate</h2>
+        <div className="demo-container">
+          <CircularIndeterminate />
+        </div>
+      </section>
+      <section>
+        <h2> Circular Integration</h2>
+        <div className="demo-container">
+          <CircularIntegration />
+        </div>
+      </section>
+      <section>
+        <h2> Circular Under Load</h2>
+        <div className="demo-container">
+          <CircularUnderLoad />
+        </div>
+      </section>
+      <section>
+        <h2> Circular With Value Label</h2>
+        <div className="demo-container">
+          <CircularWithValueLabel />
+        </div>
+      </section>
+      <section>
+        <h2> Customized Progress Bars</h2>
+        <div className="demo-container">
+          <CustomizedProgressBars />
+        </div>
+      </section>
+      <section>
+        <h2> Delaying Appearance</h2>
+        <div className="demo-container">
+          <DelayingAppearance />
+        </div>
+      </section>
+      <section>
+        <h2> Linear Buffer</h2>
+        <div className="demo-container">
+          <LinearBuffer />
+        </div>
+      </section>
+      <section>
+        <h2> Linear Color</h2>
+        <div className="demo-container">
+          <LinearColor />
+        </div>
+      </section>
+      <section>
+        <h2> Linear Determinate</h2>
+        <div className="demo-container">
+          <LinearDeterminate />
+        </div>
+      </section>
+      <section>
+        <h2> Linear Indeterminate</h2>
+        <div className="demo-container">
+          <LinearIndeterminate />
+        </div>
+      </section>
+      <section>
+        <h2> Linear With Value Label</h2>
+        <div className="demo-container">
+          <LinearWithValueLabel />
+        </div>
+      </section>
+    </MaterialUILayout>
+  );
+}

packages/mui-material/src/CircularProgress/CircularProgress.js

@@ -4,12 +4,12 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import { keyframes, css } from '@mui/system';
+import { keyframes, css, createUseThemeProps, styled } from '../zero-styled';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
 import { getCircularProgressUtilityClass } from './circularProgressClasses';
 
+const useThemeProps = createUseThemeProps('MuiCircularProgress');
+
 const SIZE = 44;
 
 const circularRotateKeyframe = keyframes`
@@ -39,6 +39,14 @@ const circularDashKeyframe = keyframes`
   }
 `;
 
+const rotateAnimation = css`
+  animation: ${circularRotateKeyframe} 1.4s linear infinite;
+`;
+
+const dashAnimation = css`
+  animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
+`;
+
 const useUtilityClasses = (ownerState) => {
   const { classes, variant, color, disableShrink } = ownerState;
 
@@ -63,22 +71,39 @@ const CircularProgressRoot = styled('span', {
       styles[`color${capitalize(ownerState.color)}`],
     ];
   },
-})(
-  ({ ownerState, theme }) => ({
-    display: 'inline-block',
-    ...(ownerState.variant === 'determinate' && {
-      transition: theme.transitions.create('transform'),
-    }),
-    ...(ownerState.color !== 'inherit' && {
-      color: (theme.vars || theme).palette[ownerState.color].main,
-    }),
-  }),
-  ({ ownerState }) =>
-    ownerState.variant === 'indeterminate' &&
-    css`
-      animation: ${circularRotateKeyframe} 1.4s linear infinite;
-    `,
-);
+})(({ theme }) => ({
+  display: 'inline-block',
+  variants: [
+    {
+      props: {
+        variant: 'determinate',
+      },
+      style: {
+        transition: theme.transitions.create('transform'),
+      },
+    },
+    {
+      props: {
+        variant: 'indeterminate',
+      },
+      style:
+        // For Styled-components v4+: https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12
+        rotateAnimation !== 'string'
+          ? rotateAnimation
+          : {
+              animation: `${circularRotateKeyframe} 1.4s linear infinite`,
+            },
+    },
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette.main)
+      .map(([color]) => ({
+        props: { color },
+        style: {
+          color: (theme.vars || theme).palette[color].main,
+        },
+      })),
+  ],
+}));
 
 const CircularProgressSVG = styled('svg', {
   name: 'MuiCircularProgress',
@@ -100,27 +125,40 @@ const CircularProgressCircle = styled('circle', {
       ownerState.disableShrink && styles.circleDisableShrink,
     ];
   },
-})(
-  ({ ownerState, theme }) => ({
-    stroke: 'currentColor',
-    // Use butt to follow the specification, by chance, it's already the default CSS value.
-    // strokeLinecap: 'butt',
-    ...(ownerState.variant === 'determinate' && {
-      transition: theme.transitions.create('stroke-dashoffset'),
-    }),
-    ...(ownerState.variant === 'indeterminate' && {
-      // Some default value that looks fine waiting for the animation to kicks in.
-      strokeDasharray: '80px, 200px',
-      strokeDashoffset: 0, // Add the unit to fix a Edge 16 and below bug.
-    }),
-  }),
-  ({ ownerState }) =>
-    ownerState.variant === 'indeterminate' &&
-    !ownerState.disableShrink &&
-    css`
-      animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
-    `,
-);
+})(({ theme }) => ({
+  stroke: 'currentColor',
+  variants: [
+    {
+      props: {
+        variant: 'determinate',
+      },
+      style: {
+        transition: theme.transitions.create('stroke-dashoffset'),
+      },
+    },
+    {
+      props: {
+        variant: 'indeterminate',
+      },
+      style: {
+        // Some default value that looks fine waiting for the animation to kicks in.
+        strokeDasharray: '80px, 200px',
+        strokeDashoffset: 0, // Add the unit to fix a Edge 16 and below bug.
+      },
+    },
+    {
+      // For Styled-components v4+: https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12
+      props: ({ ownerState }) =>
+        ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
+      style:
+        typeof dashAnimation !== 'string'
+          ? dashAnimation
+          : {
+              animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`,
+            },
+    },
+  ],
+}));
 
 /**
  * ## ARIA

packages/mui-material/src/zero-styled/index.ts

@@ -1,6 +1,6 @@
 import useThemeProps from '../styles/useThemeProps';
 
-export { keyframes } from '@mui/system';
+export { css, keyframes } from '@mui/system';
 
 export { default as styled } from '../styles/styled';
 

packages/pigment-css-react/package.json

@@ -127,26 +127,8 @@
       "require": "./utils/index.js",
       "default": "./utils/index.js"
     },
-    "./exports/generateAtomics": {
-      "default": "./exports/generateAtomics.js"
-    },
-    "./exports/keyframes": {
-      "default": "./exports/keyframes.js"
-    },
-    "./exports/styled": {
-      "default": "./exports/styled.js"
-    },
-    "./exports/sx-plugin": {
-      "default": "./exports/sx-plugin.js"
-    },
-    "./exports/remove-prop-types-plugin": {
-      "default": "./exports/remove-prop-types-plugin.js"
-    },
-    "./exports/sx": {
-      "default": "./exports/sx.js"
-    },
-    "./exports/createUseThemeProps": {
-      "default": "./exports/createUseThemeProps.js"
+    "./exports/*": {
+      "default": "./exports/*.js"
     },
     "./Box": {
       "types": "./build/Box.d.ts",