Set up docs page

docs/data/base/components/textarea/TextareaIntroduction/css/index.js

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { Textarea } from '@mui/base/Textarea';
+import { useTheme } from '@mui/system';
+
+export default function TextareaIntroduction() {
+  return (
+    <React.Fragment>
+      <Textarea
+        className="CustomTextareaIntroduction"
+        aria-label="empty textarea"
+        placeholder="Empty"
+      />
+      <Styles />
+    </React.Fragment>
+  );
+}
+const cyan = {
+  50: '#E9F8FC',
+  100: '#BDEBF4',
+  200: '#99D8E5',
+  300: '#66BACC',
+  400: '#1F94AD',
+  500: '#0D5463',
+  600: '#094855',
+  700: '#063C47',
+  800: '#043039',
+  900: '#022127',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <style>
+      {`
+      .CustomTextareaIntroduction {
+        box-sizing: border-box;
+        width: 320px;
+        font-family: 'IBM Plex Sans', sans-serif;
+        font-size: 0.875rem;
+        font-weight: 400;
+        line-height: 1.5;
+        padding: 12px;
+        border-radius: 12px 12px 0 12px;
+        color: ${isDarkMode ? grey[300] : grey[900]};
+        background: ${isDarkMode ? grey[900] : '#fff'};
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        box-shadow: 0px 2px 24px ${isDarkMode ? cyan[900] : cyan[100]};
+      }
+
+     .CustomTextareaIntroduction:hover {
+        border-color: ${cyan[400]};
+      }
+
+     .CustomTextareaIntroduction:focus {
+        border-color: ${cyan[400]};
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
+        outline: none;
+      }
+
+      // firefox
+      .CustomTextareaIntroduction:focus-visible {
+        outline: 0;
+      }
+    `}
+    </style>
+  );
+}

docs/data/base/components/textarea/TextareaIntroduction/css/index.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { Textarea } from '@mui/base/Textarea';
+import { useTheme } from '@mui/system';
+
+export default function TextareaIntroduction() {
+  return (
+    <React.Fragment>
+      <Textarea
+        className="CustomTextareaIntroduction"
+        aria-label="empty textarea"
+        placeholder="Empty"
+      />
+      <Styles />
+    </React.Fragment>
+  );
+}
+const cyan = {
+  50: '#E9F8FC',
+  100: '#BDEBF4',
+  200: '#99D8E5',
+  300: '#66BACC',
+  400: '#1F94AD',
+  500: '#0D5463',
+  600: '#094855',
+  700: '#063C47',
+  800: '#043039',
+  900: '#022127',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <style>
+      {`
+      .CustomTextareaIntroduction {
+        box-sizing: border-box;
+        width: 320px;
+        font-family: 'IBM Plex Sans', sans-serif;
+        font-size: 0.875rem;
+        font-weight: 400;
+        line-height: 1.5;
+        padding: 12px;
+        border-radius: 12px 12px 0 12px;
+        color: ${isDarkMode ? grey[300] : grey[900]};
+        background: ${isDarkMode ? grey[900] : '#fff'};
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        box-shadow: 0px 2px 24px ${isDarkMode ? cyan[900] : cyan[100]};
+      }
+
+     .CustomTextareaIntroduction:hover {
+        border-color: ${cyan[400]};
+      }
+
+     .CustomTextareaIntroduction:focus {
+        border-color: ${cyan[400]};
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
+        outline: none;
+      }
+
+      // firefox
+      .CustomTextareaIntroduction:focus-visible {
+        outline: 0;
+      }
+    `}
+    </style>
+  );
+}

docs/data/base/components/textarea/TextareaIntroduction/css/index.tsx.preview

@@ -0,0 +1,8 @@
+<React.Fragment>
+  <Textarea
+    className="CustomTextareaIntroduction"
+    aria-label="empty textarea"
+    placeholder="Empty"
+  />
+  <Styles />
+</React.Fragment>

docs/data/base/components/textarea/TextareaIntroduction/system/index.js

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Textarea as BaseTextarea } from '@mui/base/Textarea';
+import { styled } from '@mui/system';
+
+export default function TextareaIntroduction() {
+  return <Textarea aria-label="empty textarea" placeholder="Empty" />;
+}
+
+const blue = {
+  100: '#DAECFF',
+  200: '#b6daff',
+  400: '#3399FF',
+  500: '#007FFF',
+  600: '#0072E5',
+  900: '#003A75',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+const Textarea = styled(BaseTextarea)(
+  ({ theme }) => `
+  box-sizing: border-box;
+  width: 320px;
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  padding: 8px 12px;
+  border-radius: 8px;
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+
+  &:hover {
+    border-color: ${blue[400]};
+  }
+
+  &:focus {
+    border-color: ${blue[400]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
+  }
+
+  // firefox
+  &:focus-visible {
+    outline: 0;
+  }
+`,
+);

docs/data/base/components/textarea/TextareaIntroduction/system/index.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Textarea as BaseTextarea } from '@mui/base/Textarea';
+import { styled } from '@mui/system';
+
+export default function TextareaIntroduction() {
+  return <Textarea aria-label="empty textarea" placeholder="Empty" />;
+}
+
+const blue = {
+  100: '#DAECFF',
+  200: '#b6daff',
+  400: '#3399FF',
+  500: '#007FFF',
+  600: '#0072E5',
+  900: '#003A75',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+const Textarea = styled(BaseTextarea)(
+  ({ theme }) => `
+  box-sizing: border-box;
+  width: 320px;
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  padding: 8px 12px;
+  border-radius: 8px;
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+
+  &:hover {
+    border-color: ${blue[400]};
+  }
+
+  &:focus {
+    border-color: ${blue[400]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
+  }
+
+  // firefox
+  &:focus-visible {
+    outline: 0;
+  }
+`,
+);

docs/data/base/components/textarea/TextareaIntroduction/system/index.tsx.preview

@@ -0,0 +1 @@
+<Textarea aria-label="empty textarea" placeholder="Empty" />

docs/data/base/components/textarea/TextareaIntroduction/tailwind/index.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Textarea } from '@mui/base/Textarea';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export default function TextareaIntroduction() {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <div className={isDarkMode ? 'dark' : ''} style={{ display: 'flex' }}>
+      <Textarea
+        className="w-80 text-sm font-normal font-sans leading-normal p-3 rounded-xl rounded-br-none shadow-lg shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
+        aria-label="empty textarea"
+        placeholder="Empty"
+      />
+    </div>
+  );
+}

docs/data/base/components/textarea/TextareaIntroduction/tailwind/index.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Textarea } from '@mui/base/Textarea';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export default function TextareaIntroduction() {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <div className={isDarkMode ? 'dark' : ''} style={{ display: 'flex' }}>
+      <Textarea
+        className="w-80 text-sm font-normal font-sans leading-normal p-3 rounded-xl rounded-br-none shadow-lg shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
+        aria-label="empty textarea"
+        placeholder="Empty"
+      />
+    </div>
+  );
+}

docs/data/base/components/textarea/TextareaIntroduction/tailwind/index.tsx.preview

@@ -0,0 +1,5 @@
+<Textarea
+  className="w-80 text-sm font-normal font-sans leading-normal p-3 rounded-xl rounded-br-none shadow-lg shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
+  aria-label="empty textarea"
+  placeholder="Empty"
+/>

docs/data/base/components/textarea/textarea.md

@@ -0,0 +1,22 @@
+---
+productId: base-ui
+title: React Textarea component
+components: Textarea
+githubLabel: 'component: TextareaAutosize'
+---
+
+# Textarea
+
+<p class="description">The Textarea component gives you a textarea HTML element that automatically adjusts its height to match the length of the content within.</p>
+
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
+## Introduction
+
+Textarea is a component that replaces the native `<textarea>` HTML.
+
+The height of the component automatically adjusts as a response to keyboard inputs and window resizing events.
+
+{{"demo": "TextareaIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}

docs/data/base/pages.ts

@@ -33,6 +33,7 @@ const pages: readonly MuiPage[] = [
           { pathname: '/base-ui/react-select', title: 'Select' },
           { pathname: '/base-ui/react-slider', title: 'Slider' },
           { pathname: '/base-ui/react-switch', title: 'Switch' },
+          { pathname: '/base-ui/react-textarea', title: 'Textarea' },
           {
             pathname: '/base-ui/react-toggle-button-group',
             title: 'Toggle Button Group',