init project

docs/data/joy/components/switch/ExampleChakraSwitch.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import Switch, { switchClasses } from '@mui/joy/Switch';
+
+export default function ExampleChakraSwitch() {
+  const [checked, setChecked] = React.useState(false);
+  return (
+    <Switch
+      checked={checked}
+      onChange={(event) => setChecked(event.target.checked)}
+      sx={(theme) => ({
+        '--Switch-thumbSize': '16px',
+        '--Switch-trackWidth': '34px',
+        '--Switch-trackHeight': '20px',
+        '--Switch-trackBackground': '#CBD5E0',
+        '&:hover': {
+          '--Switch-trackBackground': '#CBD5E0',
+        },
+        [`&.${switchClasses.checked}`]: {
+          '--Switch-trackBackground': '#3182ce',
+          '&:hover': {
+            '--Switch-trackBackground': '#3182ce',
+          },
+          [`&.${switchClasses.disabled}`]: {
+            '--Switch-trackBackground': '#3182ce',
+          },
+        },
+        [`&.${switchClasses.disabled}`]: {
+          '--Switch-trackBackground': '#CBD5E0',
+          opacity: 0.4,
+        },
+        [theme.getColorSchemeSelector('dark')]: {
+          '--Switch-trackBackground': 'rgba(255, 255, 255, 0.24)',
+          [`&.${switchClasses.checked}`]: {
+            '--Switch-trackBackground': '#90cdf4',
+            '&:hover': {
+              '--Switch-trackBackground': '#90cdf4',
+            },
+            [`&.${switchClasses.disabled}`]: {
+              '--Switch-trackBackground': '#3182ce',
+            },
+          },
+        },
+      })}
+    />
+  );
+}