From 16dfaff405fdee91c168b271c8a138ee48285d55 Mon Sep 17 00:00:00 2001
From: Ali Sasani Babak <ababak@nuclera.com>
Date: Fri, 15 Sep 2023 17:49:44 +0100
Subject: [PATCH] add css and tailwind demo for tabs component

---
 .../UnstyledTabsIntroduction/css/index.js     | 136 ++++++++++++++++++
 .../UnstyledTabsIntroduction/css/index.tsx    | 136 ++++++++++++++++++
 .../UnstyledTabsIntroduction.tsx.preview      |   0
 .../system/index.js}                          |   0
 .../system/index.tsx}                         |   0
 .../system/index.tsx.preview                  |  10 ++
 .../tailwind/index.js                         | 103 +++++++++++++
 .../tailwind/index.tsx                        |  85 +++++++++++
 .../tailwind/index.tsx.preview                |  10 ++
 docs/data/base/components/tabs/tabs.md        |   2 +-
 10 files changed, 481 insertions(+), 1 deletion(-)
 create mode 100644 docs/data/base/components/tabs/UnstyledTabsIntroduction/css/index.js
 create mode 100644 docs/data/base/components/tabs/UnstyledTabsIntroduction/css/index.tsx
 rename docs/data/base/components/tabs/{ => UnstyledTabsIntroduction/system}/UnstyledTabsIntroduction.tsx.preview (100%)
 rename docs/data/base/components/tabs/{UnstyledTabsIntroduction.js => UnstyledTabsIntroduction/system/index.js} (100%)
 rename docs/data/base/components/tabs/{UnstyledTabsIntroduction.tsx => UnstyledTabsIntroduction/system/index.tsx} (100%)
 create mode 100644 docs/data/base/components/tabs/UnstyledTabsIntroduction/system/index.tsx.preview
 create mode 100644 docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.js
 create mode 100644 docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx
 create mode 100644 docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx.preview

diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction/css/index.js b/docs/data/base/components/tabs/UnstyledTabsIntroduction/css/index.js
new file mode 100644
index 00000000000000..f95fe3b505ec3d
--- /dev/null
+++ b/docs/data/base/components/tabs/UnstyledTabsIntroduction/css/index.js
@@ -0,0 +1,136 @@
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import { Tabs } from '@mui/base/Tabs';
+import { TabsList } from '@mui/base/TabsList';
+import { TabPanel } from '@mui/base/TabPanel';
+import { buttonClasses } from '@mui/base/Button';
+import { Tab, tabClasses } from '@mui/base/Tab';
+
+export default function UnstyledTabsIntroduction() {
+  return (
+    <React.Fragment>
+      <Tabs defaultValue={0}>
+        <TabsList className="CustomTabsListIntroduction">
+          <Tab className="CustomTabIntroduction" value={0}>
+            My account
+          </Tab>
+          <Tab className="CustomTabIntroduction" value={1}>
+            Profile
+          </Tab>
+          <Tab className="CustomTabIntroduction" value={2}>
+            Language
+          </Tab>
+        </TabsList>
+        <TabPanel className="CustomTabPanelIntroduction" value={0}>
+          My account page
+        </TabPanel>
+        <TabPanel className="CustomTabPanelIntroduction" value={1}>
+          Profile page
+        </TabPanel>
+        <TabPanel className="CustomTabPanelIntroduction" value={2}>
+          Language page
+        </TabPanel>
+      </Tabs>
+      <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: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+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>
+      {`
+      .CustomTabsListIntroduction {
+        min-width: 400px;
+        background-color: ${cyan[500]};
+        border-radius: 12px;
+        margin-bottom: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-content: space-between;
+        box-shadow: 0px 4px 6px ${isDarkMode ? grey[900] : grey[200]};
+      }
+
+      .CustomTabIntroduction {
+        font-family: 'IBM Plex Sans', sans-serif;
+        color: #fff;
+        cursor: pointer;
+        font-size: 0.875rem;
+        font-weight: 600;
+        background-color: transparent;
+        width: 100%;
+        padding: 10px 12px;
+        margin: 6px;
+        border: none;
+        border-radius: 7px;
+        display: flex;
+        justify-content: center;
+      }
+
+      .CustomTabIntroduction:hover {
+        background-color: ${cyan[400]};
+      }
+
+      .CustomTabIntroduction:focus {
+        color: #fff;
+        outline: 3px solid ${cyan[200]};
+      }
+
+      .CustomTabIntroduction.${tabClasses.selected} {
+        background-color: #fff;
+        color: ${cyan[600]};
+      }
+
+      .CustomTabIntroduction.${buttonClasses.disabled} {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .CustomTabPanelIntroduction {
+        width: 100%;
+        font-family: 'IBM Plex Sans', sans-serif;
+        font-size: 0.875rem;
+        padding: 20px 12px;
+        background: ${isDarkMode ? grey[900] : '#fff'};
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        border-radius: 12px;
+        opacity: 0.6;
+      }
+      `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction/css/index.tsx b/docs/data/base/components/tabs/UnstyledTabsIntroduction/css/index.tsx
new file mode 100644
index 00000000000000..f95fe3b505ec3d
--- /dev/null
+++ b/docs/data/base/components/tabs/UnstyledTabsIntroduction/css/index.tsx
@@ -0,0 +1,136 @@
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import { Tabs } from '@mui/base/Tabs';
+import { TabsList } from '@mui/base/TabsList';
+import { TabPanel } from '@mui/base/TabPanel';
+import { buttonClasses } from '@mui/base/Button';
+import { Tab, tabClasses } from '@mui/base/Tab';
+
+export default function UnstyledTabsIntroduction() {
+  return (
+    <React.Fragment>
+      <Tabs defaultValue={0}>
+        <TabsList className="CustomTabsListIntroduction">
+          <Tab className="CustomTabIntroduction" value={0}>
+            My account
+          </Tab>
+          <Tab className="CustomTabIntroduction" value={1}>
+            Profile
+          </Tab>
+          <Tab className="CustomTabIntroduction" value={2}>
+            Language
+          </Tab>
+        </TabsList>
+        <TabPanel className="CustomTabPanelIntroduction" value={0}>
+          My account page
+        </TabPanel>
+        <TabPanel className="CustomTabPanelIntroduction" value={1}>
+          Profile page
+        </TabPanel>
+        <TabPanel className="CustomTabPanelIntroduction" value={2}>
+          Language page
+        </TabPanel>
+      </Tabs>
+      <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: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+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>
+      {`
+      .CustomTabsListIntroduction {
+        min-width: 400px;
+        background-color: ${cyan[500]};
+        border-radius: 12px;
+        margin-bottom: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-content: space-between;
+        box-shadow: 0px 4px 6px ${isDarkMode ? grey[900] : grey[200]};
+      }
+
+      .CustomTabIntroduction {
+        font-family: 'IBM Plex Sans', sans-serif;
+        color: #fff;
+        cursor: pointer;
+        font-size: 0.875rem;
+        font-weight: 600;
+        background-color: transparent;
+        width: 100%;
+        padding: 10px 12px;
+        margin: 6px;
+        border: none;
+        border-radius: 7px;
+        display: flex;
+        justify-content: center;
+      }
+
+      .CustomTabIntroduction:hover {
+        background-color: ${cyan[400]};
+      }
+
+      .CustomTabIntroduction:focus {
+        color: #fff;
+        outline: 3px solid ${cyan[200]};
+      }
+
+      .CustomTabIntroduction.${tabClasses.selected} {
+        background-color: #fff;
+        color: ${cyan[600]};
+      }
+
+      .CustomTabIntroduction.${buttonClasses.disabled} {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .CustomTabPanelIntroduction {
+        width: 100%;
+        font-family: 'IBM Plex Sans', sans-serif;
+        font-size: 0.875rem;
+        padding: 20px 12px;
+        background: ${isDarkMode ? grey[900] : '#fff'};
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        border-radius: 12px;
+        opacity: 0.6;
+      }
+      `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction.tsx.preview b/docs/data/base/components/tabs/UnstyledTabsIntroduction/system/UnstyledTabsIntroduction.tsx.preview
similarity index 100%
rename from docs/data/base/components/tabs/UnstyledTabsIntroduction.tsx.preview
rename to docs/data/base/components/tabs/UnstyledTabsIntroduction/system/UnstyledTabsIntroduction.tsx.preview
diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction.js b/docs/data/base/components/tabs/UnstyledTabsIntroduction/system/index.js
similarity index 100%
rename from docs/data/base/components/tabs/UnstyledTabsIntroduction.js
rename to docs/data/base/components/tabs/UnstyledTabsIntroduction/system/index.js
diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction.tsx b/docs/data/base/components/tabs/UnstyledTabsIntroduction/system/index.tsx
similarity index 100%
rename from docs/data/base/components/tabs/UnstyledTabsIntroduction.tsx
rename to docs/data/base/components/tabs/UnstyledTabsIntroduction/system/index.tsx
diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction/system/index.tsx.preview b/docs/data/base/components/tabs/UnstyledTabsIntroduction/system/index.tsx.preview
new file mode 100644
index 00000000000000..036845502e3951
--- /dev/null
+++ b/docs/data/base/components/tabs/UnstyledTabsIntroduction/system/index.tsx.preview
@@ -0,0 +1,10 @@
+<Tabs defaultValue={0}>
+  <StyledTabsList>
+    <StyledTab value={0}>My account</StyledTab>
+    <StyledTab value={1}>Profile</StyledTab>
+    <StyledTab value={2}>Language</StyledTab>
+  </StyledTabsList>
+  <StyledTabPanel value={0}>My account page</StyledTabPanel>
+  <StyledTabPanel value={1}>Profile page</StyledTabPanel>
+  <StyledTabPanel value={2}>Language page</StyledTabPanel>
+</Tabs>
\ No newline at end of file
diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.js b/docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.js
new file mode 100644
index 00000000000000..24fd3912593102
--- /dev/null
+++ b/docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.js
@@ -0,0 +1,103 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { Tabs } from '@mui/base/Tabs';
+import { TabsList as BaseTabsList } from '@mui/base/TabsList';
+import { TabPanel as BaseTabPanel } from '@mui/base/TabPanel';
+import { Tab as BaseTab } from '@mui/base/Tab';
+
+export default function UnstyledTabsIntroduction() {
+  return (
+    <Tabs defaultValue={0}>
+      <TabsList>
+        <Tab value={0}>My account</Tab>
+        <Tab value={1}>Profile</Tab>
+        <Tab value={2}>Language</Tab>
+      </TabsList>
+      <TabPanel value={0}>My account page</TabPanel>
+      <TabPanel value={1}>Profile page</TabPanel>
+      <TabPanel value={2}>Language page</TabPanel>
+    </Tabs>
+  );
+}
+
+const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn);
+
+const TabsList = React.forwardRef((props, ref) => {
+  const { className, ...other } = props;
+  return (
+    <BaseTabsList
+      ref={ref}
+      className={clsx(
+        'mb-4 rounded-xl bg-purple-500 flex font-sans items-center justify-center content-between min-w-tabs-list shadow-lg',
+        className,
+      )}
+      {...other}
+    />
+  );
+});
+
+TabsList.propTypes = {
+  className: PropTypes.string,
+};
+
+const Tab = React.forwardRef((props, ref) => {
+  return (
+    <BaseTab
+      ref={ref}
+      {...props}
+      slotProps={{
+        ...props.slotProps,
+        root: (ownerState) => {
+          const resolvedSlotProps = resolveSlotProps(
+            props.slotProps?.root,
+            ownerState,
+          );
+          return {
+            ...resolvedSlotProps,
+            className: clsx(
+              `font-sans ${
+                ownerState.selected
+                  ? 'text-purple-500 bg-white'
+                  : 'text-white bg-transparent focus:text-white hover:bg-purple-400'
+              } ${
+                ownerState.disabled
+                  ? 'cursor-not-allowed opacity-50'
+                  : 'cursor-pointer'
+              } text-sm leading-[1.3] font-semibold w-full py-2.5 px-3 m-1.5 border-0 rounded-md flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
+              resolvedSlotProps?.className,
+            ),
+          };
+        },
+      }}
+    />
+  );
+});
+
+Tab.propTypes = {
+  /**
+   * The props used for each slot inside the Tab.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+};
+
+const TabPanel = React.forwardRef((props, ref) => {
+  const { className, ...other } = props;
+  return (
+    <BaseTabPanel
+      ref={ref}
+      className={clsx(
+        'py-5 px-3 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 rounded-xl opacity-60 w-full font-sans text-sm',
+        className,
+      )}
+      {...other}
+    />
+  );
+});
+
+TabPanel.propTypes = {
+  className: PropTypes.string,
+};
diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx b/docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx
new file mode 100644
index 00000000000000..e4581686c50075
--- /dev/null
+++ b/docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx
@@ -0,0 +1,85 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import { Tabs } from '@mui/base/Tabs';
+import { TabsList as BaseTabsList, TabsListProps } from '@mui/base/TabsList';
+import { TabPanel as BaseTabPanel, TabPanelProps } from '@mui/base/TabPanel';
+import { Tab as BaseTab, TabProps } from '@mui/base/Tab';
+
+export default function UnstyledTabsIntroduction() {
+  return (
+    <Tabs defaultValue={0}>
+      <TabsList>
+        <Tab value={0}>My account</Tab>
+        <Tab value={1}>Profile</Tab>
+        <Tab value={2}>Language</Tab>
+      </TabsList>
+      <TabPanel value={0}>My account page</TabPanel>
+      <TabPanel value={1}>Profile page</TabPanel>
+      <TabPanel value={2}>Language page</TabPanel>
+    </Tabs>
+  );
+}
+
+const resolveSlotProps = (fn: any, args: any) =>
+  typeof fn === 'function' ? fn(args) : fn;
+
+const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>((props, ref) => {
+  const { className, ...other } = props;
+  return (
+    <BaseTabsList
+      ref={ref}
+      className={clsx(
+        'mb-4 rounded-xl bg-purple-500 flex font-sans items-center justify-center content-between min-w-tabs-list shadow-lg',
+        className,
+      )}
+      {...other}
+    />
+  );
+});
+
+const Tab = React.forwardRef<HTMLButtonElement, TabProps>((props, ref) => {
+  return (
+    <BaseTab
+      ref={ref}
+      {...props}
+      slotProps={{
+        ...props.slotProps,
+        root: (ownerState) => {
+          const resolvedSlotProps = resolveSlotProps(
+            props.slotProps?.root,
+            ownerState,
+          );
+          return {
+            ...resolvedSlotProps,
+            className: clsx(
+              `font-sans ${
+                ownerState.selected
+                  ? 'text-purple-500 bg-white'
+                  : 'text-white bg-transparent focus:text-white hover:bg-purple-400'
+              } ${
+                ownerState.disabled
+                  ? 'cursor-not-allowed opacity-50'
+                  : 'cursor-pointer'
+              } text-sm leading-[1.3] font-semibold w-full py-2.5 px-3 m-1.5 border-0 rounded-md flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
+              resolvedSlotProps?.className,
+            ),
+          };
+        },
+      }}
+    />
+  );
+});
+
+const TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>((props, ref) => {
+  const { className, ...other } = props;
+  return (
+    <BaseTabPanel
+      ref={ref}
+      className={clsx(
+        'py-5 px-3 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 rounded-xl opacity-60 w-full font-sans text-sm',
+        className,
+      )}
+      {...other}
+    />
+  );
+});
diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx.preview
new file mode 100644
index 00000000000000..4b3b0829672faf
--- /dev/null
+++ b/docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx.preview
@@ -0,0 +1,10 @@
+<Tabs defaultValue={0}>
+  <TabsList>
+    <Tab value={0}>My account</Tab>
+    <Tab value={1}>Profile</Tab>
+    <Tab value={2}>Language</Tab>
+  </TabsList>
+  <TabPanel value={0}>My account page</TabPanel>
+  <TabPanel value={1}>Profile page</TabPanel>
+  <TabPanel value={2}>Language page</TabPanel>
+</Tabs>
\ No newline at end of file
diff --git a/docs/data/base/components/tabs/tabs.md b/docs/data/base/components/tabs/tabs.md
index 768a599ba7490e..c7c4a607acb732 100644
--- a/docs/data/base/components/tabs/tabs.md
+++ b/docs/data/base/components/tabs/tabs.md
@@ -24,7 +24,7 @@ Tabs are implemented using a collection of related components:
 - `<TabPanel />` - the card that hosts the content associated with a tab.
 - `<Tabs />` - the top-level component that wraps the Tabs List and Tab Panel components so that tabs and their panels can communicate with one another.
 
-{{"demo": "UnstyledTabsIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}}
+{{"demo": "UnstyledTabsIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}
 
 ## Components