From 8f311828ea6be9e13b76e42bfd76971520e3501f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= <wingkwong.code@gmail.com>
Date: Thu, 6 Feb 2025 00:36:29 +0800
Subject: [PATCH 1/7] fix(docs): failed to install dependencies in StackBlitz
 (#4639)

---
 apps/docs/components/sandpack/use-sandpack.ts |  6 +++---
 apps/docs/hooks/use-stackblitz.ts             | 13 ++++++++++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/docs/components/sandpack/use-sandpack.ts b/apps/docs/components/sandpack/use-sandpack.ts
index 3aef20633c..d117b92d30 100644
--- a/apps/docs/components/sandpack/use-sandpack.ts
+++ b/apps/docs/components/sandpack/use-sandpack.ts
@@ -177,9 +177,9 @@ export const useSandpack = ({
     dependencies,
     entry: entryFile,
     devDependencies: {
-      autoprefixer: "^10.4.14",
-      postcss: "^8.4.21",
-      tailwindcss: "^3.2.7",
+      autoprefixer: "10.4.20",
+      postcss: "8.4.49",
+      tailwindcss: "3.4.17",
     },
   };
 
diff --git a/apps/docs/hooks/use-stackblitz.ts b/apps/docs/hooks/use-stackblitz.ts
index ac29ace473..28dc868626 100644
--- a/apps/docs/hooks/use-stackblitz.ts
+++ b/apps/docs/hooks/use-stackblitz.ts
@@ -52,7 +52,18 @@ export function useStackblitz(props: UseSandpackProps) {
   "dependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    ${Object.entries(omit(dependencies as any, ["react", "react-dom"]))
+    ${Object.entries(
+      omit(dependencies as any, [
+        "react",
+        "react-dom",
+        "react-dom/client",
+        "@vitejs/plugin-react",
+        "vite",
+        "autoprefixer",
+        "postcss",
+        "tailwindcss",
+      ]),
+    )
       .map(([key, value]) => `"${key}": "${value}"`)
       .join(",\n    ")}
   },

From c992e7314f59cb17ef499f7d712b3a4c9cab9c24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= <wingkwong.code@gmail.com>
Date: Thu, 6 Feb 2025 00:39:35 +0800
Subject: [PATCH 2/7] chore(Docs): remove step 2 from "Using use-theme-hook"
 (#4797)

---
 .../content/docs/customization/dark-mode.mdx   | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/apps/docs/content/docs/customization/dark-mode.mdx b/apps/docs/content/docs/customization/dark-mode.mdx
index a2c3132249..be49a4a8ab 100644
--- a/apps/docs/content/docs/customization/dark-mode.mdx
+++ b/apps/docs/content/docs/customization/dark-mode.mdx
@@ -204,24 +204,6 @@ Install `@heroui/use-theme` in your project.
   }}
 /> 
 
-### Add the current theme to the main element
-
-```jsx
-// App.tsx or App.jsx
-import React from "react";
-import {useTheme} from "@heroui/use-theme";
-
-export default function App() {
-  const {theme} = useTheme();
-
-  return (
-    <main className={`${theme} text-foreground bg-background`}>
-      <App />
-    </main>
-  )
-}
-```
-
 ### Add the theme switcher
 
 Add the theme switcher to your app.

From f2d1f2e84d6b6582029b69a1099c778c7fdf1db9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= <wingkwong.code@gmail.com>
Date: Thu, 6 Feb 2025 04:49:30 +0800
Subject: [PATCH 3/7] fix(docs): incorrect code Modal placement (#4652)

---
 .../components/modal/placement.raw.jsx        | 79 ++++---------------
 1 file changed, 16 insertions(+), 63 deletions(-)

diff --git a/apps/docs/content/components/modal/placement.raw.jsx b/apps/docs/content/components/modal/placement.raw.jsx
index 6d1869b01d..75aa9f1332 100644
--- a/apps/docs/content/components/modal/placement.raw.jsx
+++ b/apps/docs/content/components/modal/placement.raw.jsx
@@ -1,10 +1,10 @@
+import {useState} from "react";
 import {
   Modal,
   ModalContent,
   ModalHeader,
   ModalBody,
   ModalFooter,
-  ModalProps,
   Button,
   useDisclosure,
   RadioGroup,
@@ -13,22 +13,27 @@ import {
 
 export default function App() {
   const {isOpen, onOpen, onOpenChange} = useDisclosure();
-  const [scrollBehavior, setScrollBehavior] =
-    React.useState < ModalProps["scrollBehavior"] > "inside";
+  const [modalPlacement, setModalPlacement] = useState("auto");
 
   return (
-    <div className="flex flex-col gap-2">
-      <Button onPress={onOpen}>Open Modal</Button>
+    <div className="flex px-10 min-h-[80vh] justify-center items-center flex-col gap-4">
+      <Button className="max-w-fit" onPress={onOpen}>
+        Open Modal
+      </Button>
       <RadioGroup
-        label="Select scroll behavior"
+        label="Select modal placement"
         orientation="horizontal"
-        value={scrollBehavior}
-        onValueChange={setScrollBehavior}
+        value={modalPlacement}
+        onValueChange={setModalPlacement}
       >
-        <Radio value="inside">inside</Radio>
-        <Radio value="outside">outside</Radio>
+        <Radio value="auto">auto</Radio>
+        <Radio value="top">top</Radio>
+        <Radio value="bottom">bottom</Radio>
+        <Radio value="center">center</Radio>
+        <Radio value="top-center">top-center</Radio>
+        <Radio value="bottom-center">bottom-center</Radio>
       </RadioGroup>
-      <Modal isOpen={isOpen} scrollBehavior={scrollBehavior} onOpenChange={onOpenChange}>
+      <Modal isOpen={isOpen} placement={modalPlacement} onOpenChange={onOpenChange}>
         <ModalContent>
           {(onClose) => (
             <>
@@ -44,58 +49,6 @@ export default function App() {
                   risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
                   quam.
                 </p>
-                <p>
-                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
-                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
-                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
-                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
-                  deserunt nostrud ad veniam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
-                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
-                  quam. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
-                  dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis
-                  sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit
-                  incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod
-                  et. Culpa deserunt nostrud ad veniam.
-                </p>
-                <p>
-                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia
-                  eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi
-                  consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
-                  deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing
-                  elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
-                  hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute
-                  tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
-                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris
-                  do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod
-                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
-                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
-                  quam.
-                </p>
-                <p>
-                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
-                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
-                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
-                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
-                  deserunt nostrud ad veniam.
-                </p>
-                <p>
-                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia
-                  eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi
-                  consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
-                  deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing
-                  elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
-                  hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute
-                  tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
-                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris
-                  do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod
-                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-                </p>
               </ModalBody>
               <ModalFooter>
                 <Button color="danger" variant="light" onPress={onClose}>

From f386f1f1c870d7b49fd46c826f866bccb8b78d89 Mon Sep 17 00:00:00 2001
From: Praharsh Bhatt <30700808+praharshbhatt@users.noreply.github.com>
Date: Wed, 5 Feb 2025 16:26:16 -0500
Subject: [PATCH 4/7] docs: update DatePicker example to remove "time" label as
 time selection is not supported in this example (#4443)

---
 .../content/components/date-picker/min-and-max-date.raw.jsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx b/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx
index 27b9de3908..fa298223b1 100644
--- a/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx
+++ b/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx
@@ -8,7 +8,7 @@ export default function App() {
         <h3>Min date</h3>
         <DatePicker
           defaultValue={today(getLocalTimeZone()).subtract({days: 1})}
-          label="Date and time"
+          label="Date"
           minValue={today(getLocalTimeZone())}
         />
       </div>
@@ -16,7 +16,7 @@ export default function App() {
         <h3>Max date</h3>
         <DatePicker
           defaultValue={today(getLocalTimeZone()).add({days: 1})}
-          label="Date and time"
+          label="Date"
           maxValue={today(getLocalTimeZone())}
         />
       </div>

From 131554519b25d336831af50bc2c117e0f0940e76 Mon Sep 17 00:00:00 2001
From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Date: Tue, 11 Feb 2025 10:33:54 +0900
Subject: [PATCH 5/7] feat(button): export PressEvent for onPress event typing

---
 .changeset/large-bears-poke.md          | 5 +++++
 packages/components/button/src/index.ts | 1 +
 2 files changed, 6 insertions(+)
 create mode 100644 .changeset/large-bears-poke.md

diff --git a/.changeset/large-bears-poke.md b/.changeset/large-bears-poke.md
new file mode 100644
index 0000000000..8e8bce528d
--- /dev/null
+++ b/.changeset/large-bears-poke.md
@@ -0,0 +1,5 @@
+---
+"@heroui/button": patch
+---
+
+export PressEvent for onPress event typing (#4818)
diff --git a/packages/components/button/src/index.ts b/packages/components/button/src/index.ts
index 3ea2ab6c78..030275dcc1 100644
--- a/packages/components/button/src/index.ts
+++ b/packages/components/button/src/index.ts
@@ -4,6 +4,7 @@ import ButtonGroup from "./button-group";
 // export types
 export type {ButtonProps} from "./button";
 export type {ButtonGroupProps} from "./button-group";
+export type {PressEvent} from "@react-types/shared";
 
 // export hooks
 export {useButton} from "./use-button";

From 280d796a6fa66af9d76640a995a8da32afc391a8 Mon Sep 17 00:00:00 2001
From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Date: Tue, 11 Feb 2025 10:44:39 +0900
Subject: [PATCH 6/7] revert unnecessary changes

---
 apps/docs/components/sandpack/use-sandpack.ts |  6 +-
 .../date-picker/min-and-max-date.raw.jsx      |  4 +-
 .../components/modal/placement.raw.jsx        | 79 +++++++++++++++----
 .../content/docs/customization/dark-mode.mdx  | 30 +++++--
 apps/docs/hooks/use-stackblitz.ts             | 13 +--
 5 files changed, 93 insertions(+), 39 deletions(-)

diff --git a/apps/docs/components/sandpack/use-sandpack.ts b/apps/docs/components/sandpack/use-sandpack.ts
index d117b92d30..3aef20633c 100644
--- a/apps/docs/components/sandpack/use-sandpack.ts
+++ b/apps/docs/components/sandpack/use-sandpack.ts
@@ -177,9 +177,9 @@ export const useSandpack = ({
     dependencies,
     entry: entryFile,
     devDependencies: {
-      autoprefixer: "10.4.20",
-      postcss: "8.4.49",
-      tailwindcss: "3.4.17",
+      autoprefixer: "^10.4.14",
+      postcss: "^8.4.21",
+      tailwindcss: "^3.2.7",
     },
   };
 
diff --git a/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx b/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx
index fa298223b1..27b9de3908 100644
--- a/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx
+++ b/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx
@@ -8,7 +8,7 @@ export default function App() {
         <h3>Min date</h3>
         <DatePicker
           defaultValue={today(getLocalTimeZone()).subtract({days: 1})}
-          label="Date"
+          label="Date and time"
           minValue={today(getLocalTimeZone())}
         />
       </div>
@@ -16,7 +16,7 @@ export default function App() {
         <h3>Max date</h3>
         <DatePicker
           defaultValue={today(getLocalTimeZone()).add({days: 1})}
-          label="Date"
+          label="Date and time"
           maxValue={today(getLocalTimeZone())}
         />
       </div>
diff --git a/apps/docs/content/components/modal/placement.raw.jsx b/apps/docs/content/components/modal/placement.raw.jsx
index 75aa9f1332..6d1869b01d 100644
--- a/apps/docs/content/components/modal/placement.raw.jsx
+++ b/apps/docs/content/components/modal/placement.raw.jsx
@@ -1,10 +1,10 @@
-import {useState} from "react";
 import {
   Modal,
   ModalContent,
   ModalHeader,
   ModalBody,
   ModalFooter,
+  ModalProps,
   Button,
   useDisclosure,
   RadioGroup,
@@ -13,27 +13,22 @@ import {
 
 export default function App() {
   const {isOpen, onOpen, onOpenChange} = useDisclosure();
-  const [modalPlacement, setModalPlacement] = useState("auto");
+  const [scrollBehavior, setScrollBehavior] =
+    React.useState < ModalProps["scrollBehavior"] > "inside";
 
   return (
-    <div className="flex px-10 min-h-[80vh] justify-center items-center flex-col gap-4">
-      <Button className="max-w-fit" onPress={onOpen}>
-        Open Modal
-      </Button>
+    <div className="flex flex-col gap-2">
+      <Button onPress={onOpen}>Open Modal</Button>
       <RadioGroup
-        label="Select modal placement"
+        label="Select scroll behavior"
         orientation="horizontal"
-        value={modalPlacement}
-        onValueChange={setModalPlacement}
+        value={scrollBehavior}
+        onValueChange={setScrollBehavior}
       >
-        <Radio value="auto">auto</Radio>
-        <Radio value="top">top</Radio>
-        <Radio value="bottom">bottom</Radio>
-        <Radio value="center">center</Radio>
-        <Radio value="top-center">top-center</Radio>
-        <Radio value="bottom-center">bottom-center</Radio>
+        <Radio value="inside">inside</Radio>
+        <Radio value="outside">outside</Radio>
       </RadioGroup>
-      <Modal isOpen={isOpen} placement={modalPlacement} onOpenChange={onOpenChange}>
+      <Modal isOpen={isOpen} scrollBehavior={scrollBehavior} onOpenChange={onOpenChange}>
         <ModalContent>
           {(onClose) => (
             <>
@@ -49,6 +44,58 @@ export default function App() {
                   risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
                   quam.
                 </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
+                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
+                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
+                  dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis
+                  sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit
+                  incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod
+                  et. Culpa deserunt nostrud ad veniam.
+                </p>
+                <p>
+                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia
+                  eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi
+                  consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing
+                  elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
+                  hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute
+                  tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
+                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris
+                  do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod
+                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
+                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
+                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam.
+                </p>
+                <p>
+                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia
+                  eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi
+                  consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing
+                  elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
+                  hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute
+                  tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
+                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris
+                  do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod
+                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
+                </p>
               </ModalBody>
               <ModalFooter>
                 <Button color="danger" variant="light" onPress={onClose}>
diff --git a/apps/docs/content/docs/customization/dark-mode.mdx b/apps/docs/content/docs/customization/dark-mode.mdx
index be49a4a8ab..d3f8a5223f 100644
--- a/apps/docs/content/docs/customization/dark-mode.mdx
+++ b/apps/docs/content/docs/customization/dark-mode.mdx
@@ -57,7 +57,7 @@ Install `next-themes` in your project.
 
 Wrap your app with the `ThemeProvider` component from `next-themes`.
 
-Go to your `app/providers.tsx` or `app/providers.jsx` (create it if it doesn't exist) and wrap the 
+Go to your `app/providers.tsx` or `app/providers.jsx` (create it if it doesn't exist) and wrap the
 Component with the `HeroUIProvider` and the `next-themes` provider components.
 
 
@@ -112,7 +112,7 @@ export function ThemeSwitcher() {
 };
 ```
 
-> **Note**: You can use any theme name you want, but make sure it exists in your 
+> **Note**: You can use any theme name you want, but make sure it exists in your
 `tailwind.config.js` file. See [Create Theme](/docs/customization/create-theme) for more details.
 
 </Steps>
@@ -187,10 +187,10 @@ export const ThemeSwitcher = () => {
 
 ## Using use-theme hook
 
-In case you're using plain React with [Vite](/docs/frameworks/vite) or [Create React App](https://create-react-app.dev/) 
+In case you're using plain React with [Vite](/docs/frameworks/vite) or [Create React App](https://create-react-app.dev/)
 you can use the [@heroui/use-theme](https://github.com/heroui-inc/heroui/tree/canary/packages/hooks/use-theme) hook to switch between themes.
 
-<Steps> 
+<Steps>
 
 ### Install @heroui/use-theme
 
@@ -202,7 +202,25 @@ Install `@heroui/use-theme` in your project.
     yarn: 'yarn add @heroui/use-theme',
     pnpm: 'pnpm add @heroui/use-theme',
   }}
-/> 
+/>
+
+### Add the current theme to the main element
+
+```jsx
+// App.tsx or App.jsx
+import React from "react";
+import {useTheme} from "@heroui/use-theme";
+
+export default function App() {
+  const {theme} = useTheme();
+
+  return (
+    <main className={`${theme} text-foreground bg-background`}>
+      <App />
+    </main>
+  )
+}
+```
 
 ### Add the theme switcher
 
@@ -231,4 +249,4 @@ export const ThemeSwitcher = () => {
 `tailwind.config.js` file. See [Create Theme](/docs/customization/create-theme) for more details.
 
 
-</Steps>
+</Steps>
\ No newline at end of file
diff --git a/apps/docs/hooks/use-stackblitz.ts b/apps/docs/hooks/use-stackblitz.ts
index 28dc868626..ac29ace473 100644
--- a/apps/docs/hooks/use-stackblitz.ts
+++ b/apps/docs/hooks/use-stackblitz.ts
@@ -52,18 +52,7 @@ export function useStackblitz(props: UseSandpackProps) {
   "dependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    ${Object.entries(
-      omit(dependencies as any, [
-        "react",
-        "react-dom",
-        "react-dom/client",
-        "@vitejs/plugin-react",
-        "vite",
-        "autoprefixer",
-        "postcss",
-        "tailwindcss",
-      ]),
-    )
+    ${Object.entries(omit(dependencies as any, ["react", "react-dom"]))
       .map(([key, value]) => `"${key}": "${value}"`)
       .join(",\n    ")}
   },

From ae922a068337282ec38b7b5e90cb313dbba9a637 Mon Sep 17 00:00:00 2001
From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Date: Tue, 11 Feb 2025 10:50:02 +0900
Subject: [PATCH 7/7] chore: format

---
 apps/docs/content/docs/customization/dark-mode.mdx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/docs/content/docs/customization/dark-mode.mdx b/apps/docs/content/docs/customization/dark-mode.mdx
index d3f8a5223f..a2c3132249 100644
--- a/apps/docs/content/docs/customization/dark-mode.mdx
+++ b/apps/docs/content/docs/customization/dark-mode.mdx
@@ -57,7 +57,7 @@ Install `next-themes` in your project.
 
 Wrap your app with the `ThemeProvider` component from `next-themes`.
 
-Go to your `app/providers.tsx` or `app/providers.jsx` (create it if it doesn't exist) and wrap the
+Go to your `app/providers.tsx` or `app/providers.jsx` (create it if it doesn't exist) and wrap the 
 Component with the `HeroUIProvider` and the `next-themes` provider components.
 
 
@@ -112,7 +112,7 @@ export function ThemeSwitcher() {
 };
 ```
 
-> **Note**: You can use any theme name you want, but make sure it exists in your
+> **Note**: You can use any theme name you want, but make sure it exists in your 
 `tailwind.config.js` file. See [Create Theme](/docs/customization/create-theme) for more details.
 
 </Steps>
@@ -187,10 +187,10 @@ export const ThemeSwitcher = () => {
 
 ## Using use-theme hook
 
-In case you're using plain React with [Vite](/docs/frameworks/vite) or [Create React App](https://create-react-app.dev/)
+In case you're using plain React with [Vite](/docs/frameworks/vite) or [Create React App](https://create-react-app.dev/) 
 you can use the [@heroui/use-theme](https://github.com/heroui-inc/heroui/tree/canary/packages/hooks/use-theme) hook to switch between themes.
 
-<Steps>
+<Steps> 
 
 ### Install @heroui/use-theme
 
@@ -202,7 +202,7 @@ Install `@heroui/use-theme` in your project.
     yarn: 'yarn add @heroui/use-theme',
     pnpm: 'pnpm add @heroui/use-theme',
   }}
-/>
+/> 
 
 ### Add the current theme to the main element
 
@@ -249,4 +249,4 @@ export const ThemeSwitcher = () => {
 `tailwind.config.js` file. See [Create Theme](/docs/customization/create-theme) for more details.
 
 
-</Steps>
\ No newline at end of file
+</Steps>