[POC] Use ThemeCSSProvider as replacement for ThemeProvider

docs/data/material/integrations/tailwindcss/TailwindCard.js

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Avatar from '@mui/material/Avatar';
+import AvatarGroup from '@mui/material/AvatarGroup';
+
+function JobCard({ jobTitle, team, status, applicants, avatarColors }) {
+  const isActive = status === 'Active';
+  return (
+    <Card className="rounded-2xl border border-neutral-200 dark:border-neutral-700 shadow-none">
+      <CardContent className="p-5">
+        <div className="flex items-start justify-between mb-4">
+          <div className="flex items-center gap-3">
+            <div className="h-10 w-10 rounded-xl bg-indigo-100 dark:bg-indigo-950 flex items-center justify-center text-indigo-700 dark:text-indigo-300 font-semibold text-base">
+              {jobTitle[0]}
+            </div>
+            <div>
+              <p className="font-semibold text-neutral-900 dark:text-neutral-100 text-sm leading-tight">
+                {jobTitle}
+              </p>
+              <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                {team}
+              </p>
+            </div>
+          </div>
+          <Chip
+            label={status}
+            size="small"
+            className={
+              isActive
+                ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400 border-0 font-medium'
+                : 'bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-400 border-0 font-medium'
+            }
+          />
+        </div>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <AvatarGroup max={3}>
+              {avatarColors.map((color, i) => (
+                <Avatar
+                  key={i}
+                  sx={{ width: 28, height: 28, fontSize: 12, bgcolor: color }}
+                />
+              ))}
+            </AvatarGroup>
+            <span className="text-xs text-neutral-500 dark:text-neutral-400">
+              {applicants} applicants
+            </span>
+          </div>
+          <span className="text-xs text-neutral-400 dark:text-neutral-500">
+            Remote
+          </span>
+        </div>
+      </CardContent>
+      <CardActions className="px-5 pb-4 pt-0">
+        <Button
+          size="small"
+          className="rounded-full normal-case text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-950 text-sm"
+        >
+          View details
+        </Button>
+        <Button
+          size="small"
+          variant="contained"
+          className="rounded-full normal-case bg-indigo-600 hover:bg-indigo-700 shadow-none text-sm ml-auto"
+        >
+          Apply
+        </Button>
+      </CardActions>
+    </Card>
+  );
+}
+
+JobCard.propTypes = {
+  applicants: PropTypes.number.isRequired,
+  avatarColors: PropTypes.arrayOf(PropTypes.string).isRequired,
+  jobTitle: PropTypes.string.isRequired,
+  status: PropTypes.oneOf(['Active', 'Pending']).isRequired,
+  team: PropTypes.string.isRequired,
+};
+
+export default function TailwindCard() {
+  return (
+    <div className="grid grid-cols-1 gap-4 w-full max-w-sm sm:max-w-2xl sm:grid-cols-2">
+      <JobCard
+        jobTitle="Frontend Developer"
+        team="Design Systems"
+        status="Active"
+        applicants={24}
+        avatarColors={['#6366f1', '#8b5cf6', '#ec4899']}
+      />
+      <JobCard
+        jobTitle="Backend Engineer"
+        team="Platform"
+        status="Pending"
+        applicants={11}
+        avatarColors={['#0ea5e9', '#14b8a6', '#f59e0b']}
+      />
+    </div>
+  );
+}

docs/data/material/integrations/tailwindcss/TailwindCard.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Avatar from '@mui/material/Avatar';
+import AvatarGroup from '@mui/material/AvatarGroup';
+
+interface JobCardProps {
+  jobTitle: string;
+  team: string;
+  status: 'Active' | 'Pending';
+  applicants: number;
+  avatarColors: string[];
+}
+
+function JobCard({
+  jobTitle,
+  team,
+  status,
+  applicants,
+  avatarColors,
+}: JobCardProps) {
+  const isActive = status === 'Active';
+  return (
+    <Card className="rounded-2xl border border-neutral-200 dark:border-neutral-700 shadow-none">
+      <CardContent className="p-5">
+        <div className="flex items-start justify-between mb-4">
+          <div className="flex items-center gap-3">
+            <div className="h-10 w-10 rounded-xl bg-indigo-100 dark:bg-indigo-950 flex items-center justify-center text-indigo-700 dark:text-indigo-300 font-semibold text-base">
+              {jobTitle[0]}
+            </div>
+            <div>
+              <p className="font-semibold text-neutral-900 dark:text-neutral-100 text-sm leading-tight">
+                {jobTitle}
+              </p>
+              <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                {team}
+              </p>
+            </div>
+          </div>
+          <Chip
+            label={status}
+            size="small"
+            className={
+              isActive
+                ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400 border-0 font-medium'
+                : 'bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-400 border-0 font-medium'
+            }
+          />
+        </div>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <AvatarGroup max={3}>
+              {avatarColors.map((color, i) => (
+                <Avatar
+                  key={i}
+                  sx={{ width: 28, height: 28, fontSize: 12, bgcolor: color }}
+                />
+              ))}
+            </AvatarGroup>
+            <span className="text-xs text-neutral-500 dark:text-neutral-400">
+              {applicants} applicants
+            </span>
+          </div>
+          <span className="text-xs text-neutral-400 dark:text-neutral-500">
+            Remote
+          </span>
+        </div>
+      </CardContent>
+      <CardActions className="px-5 pb-4 pt-0">
+        <Button
+          size="small"
+          className="rounded-full normal-case text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-950 text-sm"
+        >
+          View details
+        </Button>
+        <Button
+          size="small"
+          variant="contained"
+          className="rounded-full normal-case bg-indigo-600 hover:bg-indigo-700 shadow-none text-sm ml-auto"
+        >
+          Apply
+        </Button>
+      </CardActions>
+    </Card>
+  );
+}
+
+export default function TailwindCard() {
+  return (
+    <div className="grid grid-cols-1 gap-4 w-full max-w-sm sm:max-w-2xl sm:grid-cols-2">
+      <JobCard
+        jobTitle="Frontend Developer"
+        team="Design Systems"
+        status="Active"
+        applicants={24}
+        avatarColors={['#6366f1', '#8b5cf6', '#ec4899']}
+      />
+      <JobCard
+        jobTitle="Backend Engineer"
+        team="Platform"
+        status="Pending"
+        applicants={11}
+        avatarColors={['#0ea5e9', '#14b8a6', '#f59e0b']}
+      />
+    </div>
+  );
+}

docs/data/material/integrations/tailwindcss/TailwindCard.tsx.preview

@@ -0,0 +1,14 @@
+<JobCard
+  jobTitle="Frontend Developer"
+  team="Design Systems"
+  status="Active"
+  applicants={24}
+  avatarColors={['#6366f1', '#8b5cf6', '#ec4899']}
+/>
+<JobCard
+  jobTitle="Backend Engineer"
+  team="Platform"
+  status="Pending"
+  applicants={11}
+  avatarColors={['#0ea5e9', '#14b8a6', '#f59e0b']}
+/>

docs/data/material/integrations/tailwindcss/TailwindDisabledState.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import Slider from '@mui/material/Slider';
+import Switch from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Stack from '@mui/material/Stack';
+
+export default function TailwindDisabledState() {
+  return (
+    <Stack spacing={4} sx={{ maxWidth: 320, width: '100%' }}>
+      <div>
+        <p className="text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-3">
+          Volume — enabled vs disabled
+        </p>
+        <Stack spacing={2}>
+          {/* Tailwind's `mui-disabled:` variant adds opacity only when the
+               component has the `Mui-disabled` class applied by MUI */}
+          <Slider
+            defaultValue={70}
+            className="mui-disabled:opacity-40 mui-disabled:cursor-not-allowed"
+          />
+          <Slider
+            defaultValue={70}
+            disabled
+            className="mui-disabled:opacity-40 mui-disabled:cursor-not-allowed"
+          />
+        </Stack>
+      </div>
+      <div>
+        <p className="text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">
+          Notifications — enabled vs disabled
+        </p>
+        <Stack spacing={1}>
+          <FormControlLabel
+            label="Marketing emails"
+            control={<Switch className="mui-disabled:opacity-50" />}
+          />
+          <FormControlLabel
+            label="Product updates (disabled)"
+            control={<Switch disabled className="mui-disabled:opacity-50" />}
+          />
+        </Stack>
+      </div>
+    </Stack>
+  );
+}

docs/data/material/integrations/tailwindcss/TailwindDisabledState.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import Slider from '@mui/material/Slider';
+import Switch from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Stack from '@mui/material/Stack';
+
+export default function TailwindDisabledState() {
+  return (
+    <Stack spacing={4} sx={{ maxWidth: 320, width: '100%' }}>
+      <div>
+        <p className="text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-3">
+          Volume — enabled vs disabled
+        </p>
+        <Stack spacing={2}>
+          {/* Tailwind's `mui-disabled:` variant adds opacity only when the
+              component has the `Mui-disabled` class applied by MUI */}
+          <Slider
+            defaultValue={70}
+            className="mui-disabled:opacity-40 mui-disabled:cursor-not-allowed"
+          />
+          <Slider
+            defaultValue={70}
+            disabled
+            className="mui-disabled:opacity-40 mui-disabled:cursor-not-allowed"
+          />
+        </Stack>
+      </div>
+      <div>
+        <p className="text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">
+          Notifications — enabled vs disabled
+        </p>
+        <Stack spacing={1}>
+          <FormControlLabel
+            label="Marketing emails"
+            control={<Switch className="mui-disabled:opacity-50" />}
+          />
+          <FormControlLabel
+            label="Product updates (disabled)"
+            control={<Switch disabled className="mui-disabled:opacity-50" />}
+          />
+        </Stack>
+      </div>
+    </Stack>
+  );
+}

docs/data/material/integrations/tailwindcss/TailwindFilterChips.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+
+const tags = ['React', 'TypeScript', 'CSS', 'Performance', 'Testing'];
+
+export default function TailwindFilterChips() {
+  const [selected, setSelected] = React.useState(['React', 'TypeScript']);
+
+  const handleChange = (_, newSelected) => {
+    setSelected(newSelected);
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <ToggleButtonGroup
+        value={selected}
+        onChange={handleChange}
+        className="flex-wrap gap-2 border-0"
+      >
+        {tags.map((tag) => (
+          <ToggleButton
+            key={tag}
+            value={tag}
+            className="
+              rounded-full px-4 py-1 text-sm normal-case m-0
+              border border-neutral-300 dark:border-neutral-600
+              bg-white dark:bg-neutral-900
+              text-neutral-700 dark:text-neutral-300
+              hover:bg-neutral-50 dark:hover:bg-neutral-800
+              mui-selected:bg-indigo-600 mui-selected:text-white
+              mui-selected:border-indigo-600 dark:mui-selected:bg-indigo-700
+            "
+          >
+            {tag}
+          </ToggleButton>
+        ))}
+      </ToggleButtonGroup>
+      <p className="text-sm text-neutral-500 dark:text-neutral-400">
+        {selected.length === 0
+          ? 'No filters active'
+          : `Active: ${selected.join(', ')}`}
+      </p>
+    </div>
+  );
+}