Merge branch 'main' of github.com:heroui-inc/heroui into canary

apps/docs/app/layout.tsx

@@ -12,7 +12,7 @@ import {siteConfig} from "@/config/site";
 import {fonts} from "@/config/fonts";
 import {Navbar} from "@/components/navbar";
 import {Footer} from "@/components/footer";
-import {PhBanner} from "@/components/ph-banner";
+import {ProBanner} from "@/components/pro-banner";
 
 export const metadata: Metadata = {
   title: {
@@ -82,7 +82,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
       >
         <Providers themeProps={{attribute: "class", defaultTheme: "dark"}}>
           <div className="relative flex flex-col" id="app-container">
-            <PhBanner />
+            <ProBanner />
             <Navbar mobileRoutes={manifest.mobileRoutes} routes={manifest.routes} />
             {children}
             <Analytics mode="production" />

apps/docs/components/ads/carbon-ad/carbon-ad.tsx

@@ -11,7 +11,7 @@ import {useIsMounted} from "@/hooks/use-is-mounted";
 import {__PROD__, __ENABLE_ADS__} from "@/utils";
 
 const EA_PROVIDER_RATIO = 0.85;
-const PRODUCT_HUNT_ENABLED = true;
+const PRODUCT_HUNT_ENABLED = false;
 
 const PH_INFO = {
   description: "Join the conversation and help us get #1 Product of the Week! ↗",

apps/docs/components/docs/toc.tsx

@@ -6,7 +6,7 @@ import {Divider, Spacer} from "@heroui/react";
 import {ChevronCircleTopLinearIcon} from "@heroui/shared-icons";
 import scrollIntoView from "scroll-into-view-if-needed";
 
-import {PHCallout} from "./ph-callout";
+import {HeroUIProCallout} from "./heroui-pro-callout";
 
 import {Heading} from "@/libs/docs/utils";
 import {useScrollSpy} from "@/hooks/use-scroll-spy";
@@ -124,7 +124,7 @@ export const DocsToc: FC<DocsTocProps> = ({headings}) => {
           </li>
         </ul>
       </div>
-      <PHCallout />
+      <HeroUIProCallout />
     </div>
   );
 };

apps/docs/content/blog/v2.3.0.mdx

@@ -44,7 +44,7 @@ our new CLI, and several enhancements and bug fixes.
 
 Requirements:
 
-- [Tailwind CSS 3.4](https://v3.tailwindcss.com/) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
+- [Tailwind CSS 3.4](https://v3.tailwindcss.com/) (For Tailwind CSS v4, please refer to our [Tailwind v4 Migration Guide](https://www.heroui.com/docs/guide/tailwind-v4))
 
 Upgrade today by running one of the following commands:
 

apps/docs/content/docs/frameworks/astro.mdx

@@ -8,7 +8,7 @@ description: How to use HeroUI with Astro
 Requirements:
 
 - [React 18](https://reactjs.org/) or later
-- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/astro) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
+- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/astro) (For Tailwind CSS v4, please refer to our [Tailwind v4 Migration Guide](https://www.heroui.com/docs/guide/tailwind-v4))
 - [Framer Motion 11.9](https://www.framer.com/motion/) or later
 
 ------

apps/docs/content/docs/frameworks/laravel.mdx

@@ -10,7 +10,7 @@ Requirements:
 - [Laravel 11](https://laravel.com/)
 - [PHP v8.2](https://www.php.net/)
 - [React 18](https://reactjs.org/) or later
-- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/laravel#vite) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
+- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/laravel#vite) (For Tailwind CSS v4, please refer to our [Tailwind v4 Migration Guide](https://www.heroui.com/docs/guide/tailwind-v4))
 - [Framer Motion 11.9](https://www.framer.com/motion/) or later
 
 ------

apps/docs/content/docs/frameworks/nextjs.mdx

@@ -10,7 +10,7 @@ Requirements:
 
 - [Next.js 12](https://nextjs.org/) or later
 - [React 18](https://reactjs.org/) or later
-- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/nextjs) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
+- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/nextjs) (For Tailwind CSS v4, please refer to our [Tailwind v4 Migration Guide](https://www.heroui.com/docs/guide/tailwind-v4))
 - [Framer Motion 11.9](https://www.framer.com/motion/) or later
 
 ------

apps/docs/content/docs/frameworks/remix.mdx

@@ -8,7 +8,7 @@ description: How to use HeroUI with Remix
 Requirements:
 
 - [React 18](https://reactjs.org/) or later
-- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/remix) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
+- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/remix) (For Tailwind CSS v4, please refer to our [Tailwind v4 Migration Guide](https://www.heroui.com/docs/guide/tailwind-v4))
 - [Framer Motion 11.9](https://www.framer.com/motion/) or later
 
 ------

apps/docs/content/docs/frameworks/vite.mdx

@@ -9,7 +9,7 @@ Requirements:
 
 - [Vite 2](https://vitejs.dev/) or later
 - [React 18](https://reactjs.org/) or later
-- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/vite#react) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
+- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/vite#react) (For Tailwind CSS v4, please refer to our [Tailwind v4 Migration Guide](https://www.heroui.com/docs/guide/tailwind-v4))
 - [Framer Motion 11.9](https://www.framer.com/motion/) or later
 
 ------

apps/docs/content/docs/guide/installation.mdx

@@ -8,7 +8,7 @@ description: Get started with HeroUI in the official documentation, and learn mo
 Requirements:
 
 - [React 18](https://reactjs.org/) or later
-- [Tailwind CSS 3.4](https://v3.tailwindcss.com/) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
+- [Tailwind CSS 3.4](https://v3.tailwindcss.com/) (For Tailwind CSS v4, please refer to our [Tailwind v4 Migration Guide](https://www.heroui.com/docs/guide/tailwind-v4))
 - [Framer Motion 11.9](https://www.framer.com/motion/) or later
 
 ---

apps/docs/content/docs/guide/tailwind-v4.mdx

@@ -5,7 +5,7 @@ description: Learn how to migrate your Tailwind v4 project to HeroUI.
 
 # Tailwind v4
 
-TailwindCSS v4 is now available in Beta! This guide will help you migrate your existing TailwindCSS v4 project to HeroUI.
+TailwindCSS v4 is now available in Beta! This guide will help you migrate your existing TailwindCSS v4 project to HeroUI. The demonstration is available at https://beta.heroui.com/.
 
 ---
 
@@ -32,14 +32,46 @@ TailwindCSS v4 is now available in Beta! This guide will help you migrate your e
 
 ### Update CSS Import
 
+#### Without `tailwind.config.js`
+
+Since Tailwind v4 favors a CSS-first approach, `tailwind.config.js` will not be required. 
+
+Create `hero.ts` file
+
+```tsx
+// hero.ts
+import { heroui } from "@heroui/react";
+export default heroui();
+```
+
+Update your main css file
+
 ```diff-js
-// tailwind.config.js
+// your main css file
 - @tailwind base;
 - @tailwind components;
 - @tailwind utilities;
 
 + @import "tailwindcss";
-+ @config "../../tailwind.config.js"
++ @plugin './hero.ts';
+// Note: You may need to change the path to fit your project structure
++ @source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
++ @custom-variant dark (&:is(.dark *));
+```
+
+#### With `tailwind.config.js`
+
+In Tailwind v4, `tailwind.config.js` is still supported for backward compatibility. If you still need to use it, you can load it explicity as below.
+
+```diff-js
+// your main css file
+- @tailwind base;
+- @tailwind components;
+- @tailwind utilities;
+
++ @import "tailwindcss";
+// Note: You may need to change the path to fit your project structure
++ @config "../../tailwind.config.js";
 ```
 
 ### Update PostCSS Configuration