From 0a78d0a5613e827004d68ebe0693392abdc4751f Mon Sep 17 00:00:00 2001
From: Hyeonjong <nianelo4@gmail.com>
Date: Mon, 26 Aug 2024 23:40:18 +0900
Subject: [PATCH 1/4] Add unstyled sheet component

---
 packages/tailwind-joy/src/components.ts       |  1 +
 .../tailwind-joy/src/components/Sheet.tsx     | 68 +++++++++++++++++++
 .../src/plugins/safelist-generator.ts         |  2 +
 3 files changed, 71 insertions(+)
 create mode 100644 packages/tailwind-joy/src/components/Sheet.tsx

diff --git a/packages/tailwind-joy/src/components.ts b/packages/tailwind-joy/src/components.ts
index fccff2d..7c5f983 100644
--- a/packages/tailwind-joy/src/components.ts
+++ b/packages/tailwind-joy/src/components.ts
@@ -7,3 +7,4 @@ export { IconButton } from './components/IconButton';
 export { LinearProgress } from './components/LinearProgress';
 export { Radio } from './components/Radio';
 export { RadioGroup } from './components/RadioGroup';
+export { Sheet } from './components/Sheet';
diff --git a/packages/tailwind-joy/src/components/Sheet.tsx b/packages/tailwind-joy/src/components/Sheet.tsx
new file mode 100644
index 0000000..cf9f30e
--- /dev/null
+++ b/packages/tailwind-joy/src/components/Sheet.tsx
@@ -0,0 +1,68 @@
+import { clsx } from 'clsx';
+import type { ComponentProps } from 'react';
+import { forwardRef } from 'react';
+import { twMerge } from 'tailwind-merge';
+import type { BaseVariants, GeneratorInput } from '@/base/types';
+import { r } from '../base/alias';
+import {
+  addPrefix,
+  hover,
+  focus,
+  active,
+  disabled,
+  toColorClass,
+  backgroundColor,
+  borderColor,
+  textColor,
+  toVariableClass,
+} from '../base/modifier';
+import { baseTokens, colorTokens } from '../base/tokens';
+
+function sheetRootVariants(
+  props?: BaseVariants & {
+    //
+  },
+) {
+  const {
+    color,
+    size,
+    variant,
+    //
+  } = props ?? {};
+
+  return twMerge(
+    clsx([
+      'tj-sheet-root group/tj-sheet',
+      //
+    ]),
+  );
+}
+
+interface SheetRootVariants extends BaseVariants {}
+
+type SheetRootProps = Omit<ComponentProps<'div'>, keyof SheetRootVariants> &
+  SheetRootVariants;
+
+export const Sheet = forwardRef<HTMLDivElement, SheetRootProps>(
+  function SheetRoot(
+    { children, className, color, size, variant, ...otherProps },
+    ref,
+  ) {
+    return (
+      <div
+        ref={ref}
+        className={twMerge(sheetRootVariants(), className)}
+        {...otherProps}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+export const generatorInputs: GeneratorInput[] = [
+  {
+    generatorFn: sheetRootVariants,
+    variants: {},
+  },
+];
diff --git a/packages/tailwind-joy/src/plugins/safelist-generator.ts b/packages/tailwind-joy/src/plugins/safelist-generator.ts
index 83438c7..2009a9b 100644
--- a/packages/tailwind-joy/src/plugins/safelist-generator.ts
+++ b/packages/tailwind-joy/src/plugins/safelist-generator.ts
@@ -8,6 +8,7 @@ import { generatorInputs as iconButtonClassNameGeneratorInputs } from '../compon
 import { generatorInputs as linearProgressClassNameGeneratorInputs } from '../components/LinearProgress';
 import { generatorInputs as radioClassNameGeneratorInputs } from '../components/Radio';
 import { generatorInputs as radioGroupClassNameGeneratorInputs } from '../components/RadioGroup';
+import { generatorInputs as sheetClassNameGeneratorInputs } from '../components/Sheet';
 import { generatorInputs as adaptedIconClassNameGeneratorInputs } from '../components/internal/class-adapter';
 
 const SPACE = ' ';
@@ -23,6 +24,7 @@ const inputs: GeneratorInput[] = [
   ...linearProgressClassNameGeneratorInputs,
   ...radioClassNameGeneratorInputs,
   ...radioGroupClassNameGeneratorInputs,
+  ...sheetClassNameGeneratorInputs,
 ];
 
 function generate() {

From 376e6e32708ec224a5e2997f7bf70a17651f9bce Mon Sep 17 00:00:00 2001
From: Hyeonjong <nianelo4@gmail.com>
Date: Tue, 27 Aug 2024 08:59:45 +0900
Subject: [PATCH 2/4] Write sheet component document using joy ui component

---
 apps/website/docs/apis/sheet.md               | 52 +++++++++++++++++++
 .../docs/components/surfaces/_category_.json  |  4 ++
 .../docs/components/surfaces/sheet.mdx        | 48 +++++++++++++++++
 3 files changed, 104 insertions(+)
 create mode 100644 apps/website/docs/apis/sheet.md
 create mode 100644 apps/website/docs/components/surfaces/_category_.json
 create mode 100644 apps/website/docs/components/surfaces/sheet.mdx

diff --git a/apps/website/docs/apis/sheet.md b/apps/website/docs/apis/sheet.md
new file mode 100644
index 0000000..e9e8095
--- /dev/null
+++ b/apps/website/docs/apis/sheet.md
@@ -0,0 +1,52 @@
+---
+sidebar_position: 10
+title: <Sheet />
+---
+
+# Sheet API
+
+<AvailableFrom version="0.3.0" />
+
+API reference docs for the React Sheet component.
+Learn about the props of this exported module.
+
+## Demos
+
+:::tip
+
+For examples and details on the usage of this React component, visit the component demo pages:
+
+- [Sheet](../components/sheet)
+
+:::
+
+## Import
+
+```jsx
+import { Sheet } from 'tailwind-joy/components';
+```
+
+## Props
+
+:::info
+
+The `ref` is forwarded to the root element.
+
+:::
+
+By default, props available for HTML `<div>` are also available for RadioGroup component.
+Other props are as follows:
+
+### `color`
+
+The color of the component.
+
+- Type: `'primary' | 'neutral' | 'danger' | 'success' | 'warning'`
+- Default: `'neutral'`
+
+### `variant`
+
+The variant of the component.
+
+- Type: `'solid' | 'soft' | 'outlined' | 'plain'`
+- Default: `'plain'`
diff --git a/apps/website/docs/components/surfaces/_category_.json b/apps/website/docs/components/surfaces/_category_.json
new file mode 100644
index 0000000..f2fe13e
--- /dev/null
+++ b/apps/website/docs/components/surfaces/_category_.json
@@ -0,0 +1,4 @@
+{
+  "label": "Surfaces",
+  "position": 4
+}
diff --git a/apps/website/docs/components/surfaces/sheet.mdx b/apps/website/docs/components/surfaces/sheet.mdx
new file mode 100644
index 0000000..2edd9c6
--- /dev/null
+++ b/apps/website/docs/components/surfaces/sheet.mdx
@@ -0,0 +1,48 @@
+---
+sidebar_position: 3
+slug: /components/sheet
+---
+
+import { Sheet as JoySheet } from '@mui/joy';
+
+# Sheet
+
+<AvailableFrom version="0.3.0" />
+
+Sheet is a generic container that supports Tailwind-Joy's variants.
+
+## Basics
+
+The `Sheet` component, in addition to the variants, also has access to the `color` prop, allowing you to use every palette of the theme.
+
+export function SheetBasics() {
+  return (
+    <DisplayStand>
+      <JoySheet variant="outlined" color="neutral" className="p-8">
+        Hello world!
+      </JoySheet>
+    </DisplayStand>
+  );
+}
+
+<SheetBasics />
+
+```jsx
+import { Sheet } from 'tailwind-joy/components';
+
+export function SheetBasics() {
+  return (
+    <div>
+      <Sheet variant="outlined" color="neutral" className="p-8">
+        Hello world!
+      </Sheet>
+    </div>
+  );
+}
+```
+
+## API
+
+See the documentation below for a complete reference to all of the props available to the components mentioned here.
+
+- [`<Sheet />`](../apis/sheet)

From 20d8e26ef6db969c62748acb1a8c44035acdb0f9 Mon Sep 17 00:00:00 2001
From: Hyeonjong <nianelo4@gmail.com>
Date: Tue, 27 Aug 2024 23:19:43 +0900
Subject: [PATCH 3/4] Implements sheet component

---
 .../tailwind-joy/src/components/Sheet.tsx     | 98 ++++++++++++++-----
 1 file changed, 71 insertions(+), 27 deletions(-)

diff --git a/packages/tailwind-joy/src/components/Sheet.tsx b/packages/tailwind-joy/src/components/Sheet.tsx
index cf9f30e..5a89f0c 100644
--- a/packages/tailwind-joy/src/components/Sheet.tsx
+++ b/packages/tailwind-joy/src/components/Sheet.tsx
@@ -1,58 +1,98 @@
 import { clsx } from 'clsx';
 import type { ComponentProps } from 'react';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
 import type { BaseVariants, GeneratorInput } from '@/base/types';
-import { r } from '../base/alias';
-import {
-  addPrefix,
-  hover,
-  focus,
-  active,
-  disabled,
-  toColorClass,
-  backgroundColor,
-  borderColor,
-  textColor,
-  toVariableClass,
-} from '../base/modifier';
+import { toVariableClass } from '../base/modifier';
 import { baseTokens, colorTokens } from '../base/tokens';
 
 function sheetRootVariants(
-  props?: BaseVariants & {
-    //
+  props?: Pick<BaseVariants, 'color' | 'variant'> & {
+    childRadius?: boolean;
   },
 ) {
-  const {
-    color,
-    size,
-    variant,
-    //
-  } = props ?? {};
+  const { color = 'neutral', variant = 'plain', childRadius } = props ?? {};
+  const resolvedBgToken =
+    baseTokens[color][`${variant}Bg`] || baseTokens.background.surface;
 
   return twMerge(
     clsx([
       'tj-sheet-root group/tj-sheet',
-      //
+      color !== 'neutral' || variant === 'solid'
+        ? '[--Icon-color:currentColor]'
+        : toVariableClass(baseTokens.text.icon, 'Icon-color'),
+      toVariableClass(resolvedBgToken, 'ListItem-stickyBackground'),
+      toVariableClass(resolvedBgToken, 'Sheet-background'),
+      childRadius && [
+        '[--List-radius:calc(var(--tj-Sheet-childRadius)-var(--variant-borderWidth,0px))]',
+        '[--unstable_actionRadius:calc(var(--tj-Sheet-childRadius)-var(--variant-borderWidth,0px))]',
+      ],
+      colorTokens.background.surface,
+      'relative',
+      'text-[1rem]',
+      'leading-normal',
+      colorTokens.text.secondary,
+      [
+        variant === 'outlined'
+          ? '[--variant-borderWidth:1px] [border-width:var(--variant-borderWidth)] border-solid'
+          : '[--variant-borderWidth:0px]',
+        colorTokens[color][`${variant}Color`],
+        colorTokens[color][`${variant}Bg`],
+        colorTokens[color][`${variant}Border`],
+      ],
     ]),
   );
 }
 
-interface SheetRootVariants extends BaseVariants {}
+interface SheetRootVariants extends Pick<BaseVariants, 'color' | 'variant'> {}
 
 type SheetRootProps = Omit<ComponentProps<'div'>, keyof SheetRootVariants> &
   SheetRootVariants;
 
 export const Sheet = forwardRef<HTMLDivElement, SheetRootProps>(
   function SheetRoot(
-    { children, className, color, size, variant, ...otherProps },
+    { children, className, style, color, variant, ...otherProps },
     ref,
   ) {
+    const resolvedClassNames = twMerge(className).split(' ');
+    const resolvedBorderRadiusWithArbitraryValue = useMemo(() => {
+      const regExp = /^rounded-\[([^\]]+)\]$/;
+
+      return resolvedClassNames
+        .filter((text) => regExp.test(text))
+        .at(0)
+        ?.replace(regExp, '$1');
+    }, [resolvedClassNames]);
+    const resolvedBorderRadiusWithArbitraryProperty = useMemo(() => {
+      const regExp = /^\[border-radius:([^\]]+)\]$/;
+
+      return resolvedClassNames
+        .filter((text) => regExp.test(text))
+        .at(0)
+        ?.replace(regExp, '$1');
+    }, [resolvedClassNames]);
+
+    const instanceChildRadius =
+      resolvedBorderRadiusWithArbitraryProperty ||
+      resolvedBorderRadiusWithArbitraryValue;
+
     return (
       <div
         ref={ref}
-        className={twMerge(sheetRootVariants(), className)}
+        className={twMerge(
+          sheetRootVariants({
+            color,
+            variant,
+            childRadius: instanceChildRadius !== undefined,
+          }),
+          className,
+        )}
         {...otherProps}
+        style={{
+          ...style,
+          // @ts-expect-error
+          '--tj-Sheet-childRadius': instanceChildRadius,
+        }}
       >
         {children}
       </div>
@@ -63,6 +103,10 @@ export const Sheet = forwardRef<HTMLDivElement, SheetRootProps>(
 export const generatorInputs: GeneratorInput[] = [
   {
     generatorFn: sheetRootVariants,
-    variants: {},
+    variants: {
+      color: ['primary', 'neutral', 'danger', 'success', 'warning'],
+      variant: ['solid', 'soft', 'outlined', 'plain'],
+      childRadius: [false, true],
+    },
   },
 ];

From f7fec35a0134ff18237b2ef59734359bdfd7e8d0 Mon Sep 17 00:00:00 2001
From: Hyeonjong <nianelo4@gmail.com>
Date: Tue, 27 Aug 2024 23:46:18 +0900
Subject: [PATCH 4/4] Replace joy ui components

---
 apps/website/docs/components/surfaces/sheet.mdx | 6 ++----
 apps/website/src/theme/MDXComponents.js         | 2 ++
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/website/docs/components/surfaces/sheet.mdx b/apps/website/docs/components/surfaces/sheet.mdx
index 2edd9c6..2cc3b2d 100644
--- a/apps/website/docs/components/surfaces/sheet.mdx
+++ b/apps/website/docs/components/surfaces/sheet.mdx
@@ -3,8 +3,6 @@ sidebar_position: 3
 slug: /components/sheet
 ---
 
-import { Sheet as JoySheet } from '@mui/joy';
-
 # Sheet
 
 <AvailableFrom version="0.3.0" />
@@ -18,9 +16,9 @@ The `Sheet` component, in addition to the variants, also has access to the `colo
 export function SheetBasics() {
   return (
     <DisplayStand>
-      <JoySheet variant="outlined" color="neutral" className="p-8">
+      <Sheet variant="outlined" color="neutral" className="p-8">
         Hello world!
-      </JoySheet>
+      </Sheet>
     </DisplayStand>
   );
 }
diff --git a/apps/website/src/theme/MDXComponents.js b/apps/website/src/theme/MDXComponents.js
index 6964354..837b93d 100644
--- a/apps/website/src/theme/MDXComponents.js
+++ b/apps/website/src/theme/MDXComponents.js
@@ -11,6 +11,7 @@ import {
   LinearProgress,
   Radio,
   RadioGroup,
+  Sheet,
 } from 'tailwind-joy/components';
 import { AvailableFrom } from '@site/src/components/docs/AvailableFrom';
 import { DeprecatedIn } from '@site/src/components/docs/DeprecatedIn';
@@ -35,6 +36,7 @@ export default {
   LinearProgress,
   Radio,
   RadioGroup,
+  Sheet,
 
   // --------------------------------