[material-ui] Export Pigment CSS layout components

apps/local-ui-lib/package.json

@@ -3,6 +3,6 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@pigment-css/react": "^0.0.13"
+    "@pigment-css/react": "^0.0.16"
   }
 }

apps/pigment-css-next-app/package.json

@@ -9,7 +9,7 @@
     "clean": "rimraf .next"
   },
   "dependencies": {
-    "@pigment-css/react": "^0.0.13",
+    "@pigment-css/react": "^0.0.16",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
     "@mui/lab": "workspace:^",
@@ -24,7 +24,7 @@
     "next": "latest"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "^0.0.14",
+    "@pigment-css/nextjs-plugin": "^0.0.16",
     "@types/node": "^20.5.7",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",

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

@@ -0,0 +1,27 @@
+'use client';
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/PigmentContainer';
+
+export default function ContainerPage() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Fixed Container</h2>
+        <div className="demo-container">
+          <Container fixed>
+            <Box sx={{ bgcolor: '#cfe8fc', height: '30vh' }} />
+          </Container>
+        </div>
+      </section>
+      <section>
+        <h2> Simple Container</h2>
+        <div className="demo-container">
+          <Container maxWidth="sm">
+            <Box sx={{ bgcolor: '#cfe8fc', height: '30vh' }} />
+          </Container>
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}

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

@@ -0,0 +1,74 @@
+'use client';
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Grid from '@mui/material/PigmentGrid';
+import { styled } from '@pigment-css/react';
+
+const Item = styled(Paper)(({ theme }) => ({
+  backgroundColor: '#fff',
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+  ...theme.applyStyles('dark', {
+    backgroundColor: '#1A2027',
+  }),
+}));
+
+export default function GridPage() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Basic Grid</h2>
+        <div className="demo-container">
+          <Box sx={{ flexGrow: 1 }}>
+            <Grid container spacing={2}>
+              <Grid size={{ xs: 8 }}>
+                <Item>xs=8</Item>
+              </Grid>
+              <Grid size={{ xs: 4 }}>
+                <Item>xs=4</Item>
+              </Grid>
+              <Grid size={{ xs: 4 }}>
+                <Item>xs=4</Item>
+              </Grid>
+              <Grid size={{ xs: 8 }}>
+                <Item>xs=8</Item>
+              </Grid>
+            </Grid>
+          </Box>
+        </div>
+      </section>
+      <section>
+        <h2> Columns Grid</h2>
+        <div className="demo-container">
+          <Box sx={{ flexGrow: 1 }}>
+            <Grid container spacing={2} columns={16}>
+              <Grid size={{ xs: 8 }}>
+                <Item>xs=8</Item>
+              </Grid>
+              <Grid size={{ xs: 8 }}>
+                <Item>xs=8</Item>
+              </Grid>
+            </Grid>
+          </Box>
+        </div>
+      </section>
+      <section>
+        <h2> Responsive Grid</h2>
+        <div className="demo-container">
+          <Box sx={{ flexGrow: 1 }}>
+            <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
+              {Array.from(Array(6)).map((_, index) => (
+                <Grid size={{ xs: 2, sm: 4, md: 4, lg: 3 }} key={index}>
+                  <Item>xs=2</Item>
+                </Grid>
+              ))}
+            </Grid>
+          </Box>
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}

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

@@ -0,0 +1,54 @@
+'use client';
+import * as React from 'react';
+import Divider from '@mui/material/Divider';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/PigmentStack';
+import { styled } from '@pigment-css/react';
+
+const Item = styled(Paper)(({ theme }) => ({
+  backgroundColor: '#fff',
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+  ...theme.applyStyles('dark', {
+    backgroundColor: '#1A2027',
+  }),
+}));
+
+export default function StackPage() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Basic Stack</h2>
+        <div className="demo-container">
+          <Stack spacing={2}>
+            <Item>Item 1</Item>
+            <Item>Item 2</Item>
+            <Item>Item 3</Item>
+          </Stack>
+        </div>
+      </section>
+      <section>
+        <h2> Divider Stack</h2>
+        <div className="demo-container">
+          <Stack direction="row" divider={<Divider orientation="vertical" flexItem />} spacing={2}>
+            <Item>Item 1</Item>
+            <Item>Item 2</Item>
+            <Item>Item 3</Item>
+          </Stack>
+        </div>
+      </section>
+      <section>
+        <h2> Responsive Stack</h2>
+        <div className="demo-container">
+          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={{ xs: 1, sm: 2, md: 4 }}>
+            <Item>Item 1</Item>
+            <Item>Item 2</Item>
+            <Item>Item 3</Item>
+          </Stack>
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}

apps/pigment-css-next-app/src/app/page.tsx

@@ -1,5 +1,8 @@
 import Image from 'next/image';
 import { styled, css } from '@pigment-css/react';
+import PigmentStack from '@mui/material/PigmentStack';
+import PigmentContainer from '@mui/material/PigmentContainer';
+import PigmentHidden from '@mui/material/PigmentHidden';
 import styles from './page.module.css';
 
 const visuallyHidden = css({
@@ -91,92 +94,101 @@ const Description = styled.div({
 
 export default function Home() {
   return (
-    <Main>
-      <div className={visuallyHidden}>I am invisible</div>
-      <Description>
-        <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>src/app/page.tsx</code>
-        </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener"
-          >
-            By{' '}
+    <PigmentHidden implementation="css" only="xs">
+      <PigmentContainer maxWidth="md">
+        <Main>
+          <PigmentStack spacing={2}>
+            <div>Test</div>
+            <div>Test</div>
+            <div>Test</div>
+          </PigmentStack>
+          <div className={visuallyHidden}>I am invisible</div>
+          <Description>
+            <p>
+              Get started by editing&nbsp;
+              <code className={styles.code}>src/app/page.tsx</code>
+            </p>
+            <div>
+              <a
+                href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+                target="_blank"
+                rel="noopener"
+              >
+                By{' '}
+                <Image
+                  src="/vercel.svg"
+                  alt="Vercel Logo"
+                  className={styles.vercelLogo}
+                  width={100}
+                  height={24}
+                  priority
+                />
+              </a>
+            </div>
+          </Description>
+
+          <div className={styles.center}>
             <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
+              className={styles.logo}
+              src="/next.svg"
+              alt="Next.js Logo"
+              width={180}
+              height={37}
               priority
             />
-          </a>
-        </div>
-      </Description>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
+          </div>
 
-      <div className={styles.grid}>
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener"
-        >
-          <h2>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p>Find in-depth information about Next.js features and API.</p>
-        </a>
+          <div className={styles.grid}>
+            <a
+              href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+              className={styles.card}
+              target="_blank"
+              rel="noopener"
+            >
+              <h2>
+                Docs <span>-&gt;</span>
+              </h2>
+              <p>Find in-depth information about Next.js features and API.</p>
+            </a>
 
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener"
-        >
-          <h2>
-            Learn <span>-&gt;</span>
-          </h2>
-          <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
-        </a>
+            <a
+              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+              className={styles.card}
+              target="_blank"
+              rel="noopener"
+            >
+              <h2>
+                Learn <span>-&gt;</span>
+              </h2>
+              <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
+            </a>
 
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener"
-        >
-          <h2>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p>Explore the Next.js 13 playground.</p>
-        </a>
+            <a
+              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+              className={styles.card}
+              target="_blank"
+              rel="noopener"
+            >
+              <h2>
+                Templates <span>-&gt;</span>
+              </h2>
+              <p>Explore the Next.js 13 playground.</p>
+            </a>
 
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p>Instantly deploy your Next.js site to a shareable URL with Vercel.</p>
-        </a>
-      </div>
-    </Main>
+            <a
+              href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+              className={styles.card}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <h2>
+                Deploy <span>-&gt;</span>
+              </h2>
+              <p>Instantly deploy your Next.js site to a shareable URL with Vercel.</p>
+            </a>
+          </div>
+        </Main>
+      </PigmentContainer>
+    </PigmentHidden>
   );
 }

apps/pigment-css-vite-app/package.json

@@ -9,7 +9,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@pigment-css/react": "^0.0.13",
+    "@pigment-css/react": "^0.0.16",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
     "@mui/lab": "workspace:^",
@@ -27,7 +27,7 @@
   "devDependencies": {
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@pigment-css/vite-plugin": "^0.0.13",
+    "@pigment-css/vite-plugin": "^0.0.16",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",