[docs][joy] Build TS versions for Checkbox component demos

docs/data/joy/components/checkbox/BasicCheckbox.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Checkbox from '@mui/joy/Checkbox';
+
+export default function BasicCheckbox() {
+  return (
+    <Box sx={{ display: 'flex', gap: 3 }}>
+      <Checkbox label="Label" />
+      <Checkbox label="Label" defaultChecked />
+    </Box>
+  );
+}

docs/data/joy/components/checkbox/BasicCheckbox.tsx.preview

@@ -0,0 +1,2 @@
+<Checkbox label="Label" />
+<Checkbox label="Label" defaultChecked />

docs/data/joy/components/checkbox/CheckboxColors.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Checkbox from '@mui/joy/Checkbox';
+
+export default function CheckboxColors() {
+  return (
+    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
+      <Checkbox label="Primary" color="primary" defaultChecked />
+      <Checkbox label="Neutral" color="neutral" defaultChecked />
+      <Checkbox label="Danger" color="danger" defaultChecked />
+      <Checkbox label="Info" color="info" defaultChecked />
+      <Checkbox label="Success" color="success" defaultChecked />
+      <Checkbox label="Warning" color="warning" defaultChecked />
+    </Box>
+  );
+}

docs/data/joy/components/checkbox/CheckboxColors.tsx.preview

@@ -0,0 +1,6 @@
+<Checkbox label="Primary" color="primary" defaultChecked />
+<Checkbox label="Neutral" color="neutral" defaultChecked />
+<Checkbox label="Danger" color="danger" defaultChecked />
+<Checkbox label="Info" color="info" defaultChecked />
+<Checkbox label="Success" color="success" defaultChecked />
+<Checkbox label="Warning" color="warning" defaultChecked />

docs/data/joy/components/checkbox/CheckboxSizes.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Checkbox from '@mui/joy/Checkbox';
+
+export default function CheckboxSizes() {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
+      <Checkbox label="Small" size="sm" defaultChecked />
+      <Checkbox label="Medium" size="md" defaultChecked />
+      <Checkbox label="Large" size="lg" defaultChecked />
+    </Box>
+  );
+}

docs/data/joy/components/checkbox/CheckboxSizes.tsx.preview

@@ -0,0 +1,3 @@
+<Checkbox label="Small" size="sm" defaultChecked />
+<Checkbox label="Medium" size="md" defaultChecked />
+<Checkbox label="Large" size="lg" defaultChecked />

docs/data/joy/components/checkbox/CheckboxVariants.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Checkbox from '@mui/joy/Checkbox';
+
+export default function CheckboxVariants() {
+  return (
+    <Box sx={{ display: 'flex', gap: 3 }}>
+      <Checkbox label="Solid" variant="solid" defaultChecked />
+      <Checkbox label="Soft" variant="soft" defaultChecked />
+      <Checkbox label="Outlined" variant="outlined" defaultChecked />
+      <Checkbox label="Plain" variant="plain" defaultChecked />
+    </Box>
+  );
+}

docs/data/joy/components/checkbox/CheckboxVariants.tsx.preview

@@ -0,0 +1,4 @@
+<Checkbox label="Solid" variant="solid" defaultChecked />
+<Checkbox label="Soft" variant="soft" defaultChecked />
+<Checkbox label="Outlined" variant="outlined" defaultChecked />
+<Checkbox label="Plain" variant="plain" defaultChecked />

docs/data/joy/components/checkbox/ExampleButtonCheckbox.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import Checkbox from '@mui/joy/Checkbox';
+import List from '@mui/joy/List';
+import ListItem from '@mui/joy/ListItem';
+import ListItemDecorator from '@mui/joy/ListItemDecorator';
+import LaptopIcon from '@mui/icons-material/Laptop';
+import TvIcon from '@mui/icons-material/Tv';
+import PhoneAndroidIcon from '@mui/icons-material/PhoneAndroid';
+
+export default function ExampleButtonCheckbox() {
+  const [value, setValue] = React.useState<string[]>([]);
+  return (
+    <List
+      variant="outlined"
+      aria-label="Screens"
+      role="group"
+      orientation="horizontal"
+      sx={{
+        bgcolor: 'background.body',
+        flexGrow: 0,
+        '--List-gap': '8px',
+        '--List-padding': '8px',
+        '--List-radius': '8px',
+      }}
+    >
+      {['Mobile', 'Laptop', 'Monitor'].map((item) => (
+        <ListItem key={item}>
+          <ListItemDecorator
+            sx={{
+              zIndex: 2,
+              pointerEvents: 'none',
+              ...(value.includes(item) && { color: 'text.primary' }),
+            }}
+          >
+            {
+              {
+                Mobile: <PhoneAndroidIcon />,
+                Laptop: <LaptopIcon />,
+                Monitor: <TvIcon />,
+              }[item]
+            }
+          </ListItemDecorator>
+          <Checkbox
+            disableIcon
+            overlay
+            label={item}
+            checked={value.includes(item)}
+            color="neutral"
+            variant={value.includes(item) ? 'outlined' : 'plain'}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              if (event.target.checked) {
+                setValue((val) => [...val, item]);
+              } else {
+                setValue((val) => val.filter((text) => text !== item));
+              }
+            }}
+            slotProps={{
+              action: ({ checked }) => ({
+                sx: {
+                  bgcolor: checked ? 'background.level1' : 'transparent',
+                  boxShadow: checked ? 'sm' : 'none',
+                },
+              }),
+            }}
+          />
+        </ListItem>
+      ))}
+    </List>
+  );
+}

docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js

@@ -37,6 +37,7 @@ export default function ExampleChoiceChipCheckbox() {
                     sx={{ ml: -0.5, mr: 0.5, zIndex: 2, pointerEvents: 'none' }}
                   />
                 )}
+
                 <Checkbox
                   size="sm"
                   disabled={index === 0}

docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Checkbox from '@mui/joy/Checkbox';
+import List from '@mui/joy/List';
+import ListItem from '@mui/joy/ListItem';
+import Typography from '@mui/joy/Typography';
+import Sheet from '@mui/joy/Sheet';
+import Done from '@mui/icons-material/Done';
+
+export default function ExampleChoiceChipCheckbox() {
+  const [value, setValue] = React.useState<string[]>([]);
+  return (
+    <Sheet
+      variant="outlined"
+      sx={{ width: 360, p: 2, borderRadius: 'sm', bgcolor: 'background.body' }}
+    >
+      <Typography id="rank" level="body2" fontWeight="lg" sx={{ mb: 1.5 }}>
+        Choose amenities
+      </Typography>
+      <Box role="group" aria-labelledby="rank">
+        <List
+          orientation="horizontal"
+          wrap
+          sx={{
+            '--List-gap': '8px',
+            '--List-item-radius': '20px',
+            '--List-item-minHeight': '32px',
+          }}
+        >
+          {['Elevator', 'Washer/Dryer', 'Fireplace', 'Dogs ok', 'Cats ok'].map(
+            (item, index) => (
+              <ListItem key={item}>
+                {value.includes(item) && (
+                  <Done
+                    fontSize="md"
+                    color="primary"
+                    sx={{ ml: -0.5, mr: 0.5, zIndex: 2, pointerEvents: 'none' }}
+                  />
+                )}
+                <Checkbox
+                  size="sm"
+                  disabled={index === 0}
+                  disableIcon
+                  overlay
+                  label={item}
+                  checked={value.includes(item)}
+                  variant={value.includes(item) ? 'soft' : 'outlined'}
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                    if (event.target.checked) {
+                      setValue((val) => [...val, item]);
+                    } else {
+                      setValue((val) => val.filter((text) => text !== item));
+                    }
+                  }}
+                  slotProps={{
+                    action: ({ checked }) => ({
+                      sx: checked
+                        ? {
+                            border: '1px solid',
+                            borderColor: 'primary.500',
+                          }
+                        : {},
+                    }),
+                  }}
+                />
+              </ListItem>
+            ),
+          )}
+        </List>
+      </Box>
+    </Sheet>
+  );
+}

docs/data/joy/components/checkbox/ExampleFilterMemberCheckbox.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import Avatar from '@mui/joy/Avatar';
+import Box from '@mui/joy/Box';
+import Checkbox, { checkboxClasses } from '@mui/joy/Checkbox';
+import List from '@mui/joy/List';
+import ListItem from '@mui/joy/ListItem';
+import Typography from '@mui/joy/Typography';
+import Sheet from '@mui/joy/Sheet';
+
+export default function ExampleFilterMemberCheckbox() {
+  const [members, setMembers] = React.useState([false, true, false]);
+  const toggleMember =
+    (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
+      const newMembers = [...members];
+      newMembers[index] = event.target.checked;
+      setMembers(newMembers);
+    };
+  return (
+    <Sheet
+      variant="outlined"
+      sx={{
+        p: 2,
+        bgcolor: 'background.body',
+        borderRadius: 'sm',
+        width: 360,
+        maxWidth: '100%',
+      }}
+    >
+      <Typography
+        id="member"
+        sx={{
+          textTransform: 'uppercase',
+          fontSize: 'xs2',
+          letterSpacing: 'lg',
+          fontWeight: 'lg',
+          color: 'text.secondary',
+          mb: 2,
+        }}
+      >
+        Team members
+      </Typography>
+      <Box role="group" aria-labelledby="member">
+        <List
+          sx={{
+            [`& .${checkboxClasses.root}`]: {
+              mr: 'auto',
+              flexGrow: 1,
+              alignItems: 'center',
+              flexDirection: 'row-reverse',
+              gap: 1.5,
+            },
+          }}
+        >
+          <ListItem>
+            <Avatar aria-hidden="true" src="/static/images/avatar/1.jpg" />
+            <Checkbox
+              disabled
+              label="Friedrich Oberbrunner"
+              overlay
+              checked={members[0]}
+              onChange={toggleMember(0)}
+            />
+          </ListItem>
+          <ListItem
+            {...(members[1] && {
+              variant: 'soft',
+              color: 'primary',
+            })}
+          >
+            <Avatar aria-hidden="true" src="/static/images/avatar/2.jpg" />
+            <Checkbox
+              overlay
+              label={
+                <React.Fragment>
+                  Adeline O&apos;Reilly{' '}
+                  {members[1] && (
+                    <Typography
+                      aria-hidden="true"
+                      sx={{ display: 'block', fontSize: 'sm', color: 'neutral.500' }}
+                    >
+                      This user is your friend.
+                    </Typography>
+                  )}
+                </React.Fragment>
+              }
+              checked={members[1]}
+              onChange={toggleMember(1)}
+              sx={{ color: 'inherit' }}
+            />
+          </ListItem>
+          <ListItem {...(members[2] && { variant: 'soft', color: 'neutral' })}>
+            <Avatar aria-hidden="true" variant="solid">
+              FP
+            </Avatar>
+            <Checkbox
+              label="Fernando Pidrillio"
+              overlay
+              color="neutral"
+              checked={members[2]}
+              onChange={toggleMember(2)}
+            />
+          </ListItem>
+        </List>
+      </Box>
+    </Sheet>
+  );
+}