ci(changesets): version packages (#5755)

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

.changeset/nervous-icons-draw.md

@@ -1,7 +0,0 @@
----
-"@heroui/date-input": patch
-"@heroui/calendar": patch
-"@heroui/system": patch
----
-
-remove `@interationalized/date` from system

.changeset/olive-hairs-listen.md

@@ -1,5 +0,0 @@
----
-"@heroui/tabs": patch
----
-
-fix tabs handleClick (#5357)

.changeset/six-flowers-do.md

@@ -1,45 +0,0 @@
----
-"@heroui/use-aria-accordion-item": patch
-"@heroui/use-aria-modal-overlay": patch
-"@heroui/use-aria-multiselect": patch
-"@heroui/use-aria-accordion": patch
-"@heroui/autocomplete": patch
-"@heroui/number-input": patch
-"@heroui/breadcrumbs": patch
-"@heroui/date-picker": patch
-"@heroui/date-input": patch
-"@heroui/pagination": patch
-"@heroui/use-aria-button": patch
-"@heroui/accordion": patch
-"@heroui/input-otp": patch
-"@heroui/calendar": patch
-"@heroui/checkbox": patch
-"@heroui/dropdown": patch
-"@heroui/use-aria-link": patch
-"@heroui/use-draggable": patch
-"@heroui/listbox": patch
-"@heroui/popover": patch
-"@heroui/snippet": patch
-"@heroui/tooltip": patch
-"@heroui/avatar": patch
-"@heroui/button": patch
-"@heroui/navbar": patch
-"@heroui/select": patch
-"@heroui/slider": patch
-"@heroui/switch": patch
-"@heroui/input": patch
-"@heroui/modal": patch
-"@heroui/radio": patch
-"@heroui/table": patch
-"@heroui/toast": patch
-"@heroui/card": patch
-"@heroui/chip": patch
-"@heroui/link": patch
-"@heroui/menu": patch
-"@heroui/tabs": patch
-"@heroui/user": patch
-"@heroui/system": patch
-"@heroui/react": patch
----
-
-bump RA versions

.changeset/thick-dogs-march.md

@@ -1,45 +0,0 @@
----
-"@heroui/scroll-shadow": patch
-"@heroui/autocomplete": patch
-"@heroui/number-input": patch
-"@heroui/breadcrumbs": patch
-"@heroui/date-picker": patch
-"@heroui/date-input": patch
-"@heroui/pagination": patch
-"@heroui/accordion": patch
-"@heroui/input-otp": patch
-"@heroui/calendar": patch
-"@heroui/checkbox": patch
-"@heroui/dropdown": patch
-"@heroui/progress": patch
-"@heroui/skeleton": patch
-"@heroui/listbox": patch
-"@heroui/popover": patch
-"@heroui/snippet": patch
-"@heroui/tooltip": patch
-"@heroui/avatar": patch
-"@heroui/button": patch
-"@heroui/drawer": patch
-"@heroui/navbar": patch
-"@heroui/ripple": patch
-"@heroui/select": patch
-"@heroui/slider": patch
-"@heroui/switch": patch
-"@heroui/alert": patch
-"@heroui/badge": patch
-"@heroui/image": patch
-"@heroui/input": patch
-"@heroui/modal": patch
-"@heroui/radio": patch
-"@heroui/table": patch
-"@heroui/toast": patch
-"@heroui/card": patch
-"@heroui/chip": patch
-"@heroui/form": patch
-"@heroui/link": patch
-"@heroui/menu": patch
-"@heroui/tabs": patch
-"@heroui/user": patch
----
-
-bump system peer dependencies

.github/workflows/QA.yaml

@@ -4,6 +4,7 @@ on:
   pull_request:
     branches:
       - canary
+      - beta/release-next
 
 jobs:
   build:

.github/workflows/pre-release.yaml

@@ -28,6 +28,12 @@ jobs:
       - name: Install
         uses: ./.github/common-actions/install
 
+      - name: Check if pre.json exists
+        id: check_if_pre_json_exists
+        uses: andstor/file-existence-action@v3.0.0
+        with:
+          files: ".changeset/pre.json"
+
       - name: Debug condition values
         run: |
           echo "pre.json exists: ${{ steps.check_if_pre_json_exists.outputs.files_exists }}"
@@ -35,12 +41,6 @@ jobs:
           echo "Contains version packages: ${{ contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
           echo "Full condition would be: ${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
 
-      - name: Check if pre.json exists
-        id: check_if_pre_json_exists
-        uses: andstor/file-existence-action@v3.0.0
-        with:
-          files: ".changeset/pre.json"
-
       - name: Get pre-release changesets
         id: get-pre-release-changesets
         uses: notiz-dev/github-action-json-property@release

.lintstagedrc.cjs

@@ -1,4 +1,6 @@
 const {relative} = require("path");
+const escape = require('shell-quote').quote
+const isWin = process.platform === 'win32'
 
 const {ESLint} = require("eslint");
 
@@ -9,18 +11,24 @@ const removeIgnoredFiles = async (files) => {
   const isIgnored = await Promise.all(relativePaths.map((file) => eslint.isPathIgnored(file)));
   const filteredFiles = files.filter((_, i) => !isIgnored[i]);
 
-  return filteredFiles.join(" ");
+  return filteredFiles;
 };
 
 module.exports = {
   "**/*.{js,ts,jsx,tsx}": async (files) => {
     const filesToLint = await removeIgnoredFiles(files);
 
-    return [`eslint --max-warnings=0 --fix ${filesToLint}`];
+    return filesToLint.map((filename) =>
+      `"${isWin ? filename : escape([filename])}"`
+    ).map((file) => `eslint --max-warnings=0 --fix ${file}`);
   },
   "**/*.css": async (files) => {
     const filesToLint = await removeIgnoredFiles(files);
 
-    return [`prettier --config .prettierrc.json --ignore-path --write ${filesToLint}`];
+    return filesToLint.map((filename) =>
+      `"${isWin ? filename : escape([filename])}"`
+    ).map(
+      (file) => `prettier --config .prettierrc.json --ignore-path --write ${file}`
+    );
   },
 };

.nvmrc

@@ -1 +1 @@
-v20.16.0
+v22.14.0

.vscode/settings.json

@@ -5,10 +5,13 @@
     "source.fixAll.eslint": "explicit"
   },
   "tailwindCSS.experimental.configFile": {
-    "packages/storybook/tailwind.config.js": ["packages/core/theme/**/*", "packages/components/**/*"],
-    "apps/docs/tailwind.config.js": "apps/docs/**/*"
+    "apps/docs/styles/globals.css": "apps/docs/**/*",
+    "packages/storybook/.storybook/style.css": ["packages/core/theme/**/*", "packages/components/**/*"],
   },
   "tailwindCSS.experimental.classRegex": [
     ["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"]
   ],
+  "cSpell.words": [
+    "heroui"
+  ],
 }

CONTRIBUTING.md

@@ -196,7 +196,7 @@ pnpm build
 npm run build
 ```
 
-> Note: ensure that you have at least Node.js 20.16.0 as well as pnpm 9.6.0 or higher installed on your machine to run the scripts
+> Note: ensure that you have at least Node.js 22 as well as pnpm 10 or higher installed on your machine to run the scripts
 
 6. Send your pull request:
 

apps/docs/app/blog/layout.tsx

@@ -9,7 +9,7 @@ interface DocsLayoutProps {
 export default function DocsLayout({children}: DocsLayoutProps) {
   return (
     <>
-      <main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
+      <main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 grow">
         {children}
       </main>
       <div

apps/docs/app/docs/[[...slug]]/page.tsx

@@ -13,14 +13,13 @@ import {CONTENT_PATH, TAG} from "@/libs/docs/config";
 import {getHeadings} from "@/libs/docs/utils";
 
 interface DocPageProps {
-  params: {
-    slug: string[];
-  };
+  params: Promise<{slug: string[]}>;
 }
 
 async function getDocFromParams({params}: DocPageProps) {
-  const slug = params.slug?.join("/") || "";
-  const doc = allDocs.find((doc) => doc.slugAsParams === slug);
+  const {slug} = await params;
+  const paramsSlug = slug?.join("/") || "";
+  const doc = allDocs.find((doc) => doc.slugAsParams === paramsSlug);
 
   if (!doc) {
     null;
@@ -72,9 +71,11 @@ export async function generateMetadata({params}: DocPageProps): Promise<Metadata
 }
 
 export async function generateStaticParams(): Promise<DocPageProps["params"][]> {
-  return allDocs.map((doc) => ({
-    slug: doc.slugAsParams.split("/"),
-  }));
+  return allDocs.map((doc) =>
+    Promise.resolve({
+      slug: doc.slugAsParams.split("/"),
+    }),
+  );
 }
 
 export default async function DocPage({params}: DocPageProps) {

apps/docs/app/docs/layout.tsx

@@ -11,7 +11,7 @@ interface DocsLayoutProps {
 export default function DocsLayout({children}: DocsLayoutProps) {
   return (
     <>
-      <main className="relative container mx-auto max-w-8xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
+      <main className="relative container mx-auto max-w-8xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 grow">
         <div className="grid grid-cols-12">
           <div className="hidden overflow-visible relative z-10 lg:block lg:col-span-2 mt-8 pr-4">
             <DocsSidebar routes={manifest.routes} />

apps/docs/app/examples/navbar/layout.tsx

@@ -1,5 +1,5 @@
 const Content = () => (
-  <div className="px-6 flex gap-4 flex-col pb-16 flex-grow">
+  <div className="px-6 flex gap-4 flex-col pb-16 grow">
     <h1 className="mt-4 font-bold text-4xl">Lorem ipsum dolor sit amet</h1>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut

apps/docs/app/examples/perf/client-page.tsx

@@ -101,7 +101,7 @@ const MyInput = extendVariants(Input, {
         inputWrapper: [
           "bg-zinc-100",
           "border",
-          "shadow",
+          "shadow-sm",
           "transition-colors",
           "focus-within:bg-zinc-100",
           "data-[hover=true]:border-zinc-600",
@@ -138,7 +138,7 @@ const MyInput = extendVariants(Input, {
     },
     radius: {
       xs: {
-        inputWrapper: "rounded",
+        inputWrapper: "rounded-sm",
       },
       sm: {
         inputWrapper: "rounded-[4px]",
@@ -454,7 +454,7 @@ export default function HeroUIPerf() {
           classNames: {
             base: [
               "before:content-[''] before:rounded-t-medium before:fixed before:w-full before:h-14 before:z-10",
-              "before:top-0 before:left-0 before:bg-gradient-to-b before:from-default-50",
+              "before:top-0 before:left-0 before:bg-linear-to-b before:from-default-50",
             ],
           },
         }}
@@ -468,7 +468,7 @@ export default function HeroUIPerf() {
         {(item) => (
           <SelectItem key={item.id} textValue={item.name}>
             <div className="flex gap-2 items-center">
-              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+              <Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
               <div className="flex flex-col">
                 <span className="text-small">{item.name}</span>
                 <span className="text-tiny text-default-400">{item.email}</span>

apps/docs/app/examples/table/custom-styles/page.tsx

@@ -467,7 +467,7 @@ export default function Page() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-none text-default-400 text-small"
+              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
@@ -519,13 +519,13 @@ export default function Page() {
       td: [
         // changing the rows border radius
         // first
-        "group-data-[first=true]:first:before:rounded-none",
-        "group-data-[first=true]:last:before:rounded-none",
+        "first:group-data-[first=true]:before:rounded-none",
+        "last:group-data-[first=true]:before:rounded-none",
         // middle
         "group-data-[middle=true]:before:rounded-none",
         // last
-        "group-data-[last=true]:first:before:rounded-none",
-        "group-data-[last=true]:last:before:rounded-none",
+        "first:group-data-[last=true]:before:rounded-none",
+        "last:group-data-[last=true]:before:rounded-none",
       ],
     }),
     [],

apps/docs/app/examples/table/sort-icon/page.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  getKeyValue,
+  Spinner,
+} from "@heroui/react";
+import {SortIcon} from "@heroui/shared-icons";
+import {useAsyncList} from "@react-stately/data";
+import {useState} from "react";
+
+type SWCharacter = {
+  name: string;
+  height: string;
+  mass: string;
+  birth_year: string;
+};
+
+export default function Page() {
+  const [isLoading, setIsLoading] = useState(true);
+
+  let list = useAsyncList<SWCharacter>({
+    async load({signal}) {
+      let res = await fetch(`https://swapi.py4e.com/api/people/?search`, {
+        signal,
+      });
+      let json = await res.json();
+
+      setIsLoading(false);
+
+      return {
+        items: json.results,
+      };
+    },
+    async sort({items, sortDescriptor}) {
+      return {
+        items: items.sort((a, b) => {
+          let first = a[sortDescriptor.column as keyof SWCharacter];
+          let second = b[sortDescriptor.column as keyof SWCharacter];
+          let cmp = (parseInt(first) || first) < (parseInt(second) || second) ? -1 : 1;
+
+          if (sortDescriptor.direction === "descending") {
+            cmp *= -1;
+          }
+
+          return cmp;
+        }),
+      };
+    },
+  });
+
+  return (
+    <div className="p-6">
+      <Table
+        aria-label="Example table with client side sorting"
+        classNames={{
+          table: "min-h-[400px]",
+        }}
+        sortDescriptor={list.sortDescriptor}
+        sortIcon={SortIcon}
+        onSortChange={list.sort}
+      >
+        <TableHeader>
+          <TableColumn key="name" allowsSorting>
+            Name
+          </TableColumn>
+          <TableColumn key="height" allowsSorting>
+            Height
+          </TableColumn>
+          <TableColumn key="mass" allowsSorting>
+            Mass
+          </TableColumn>
+          <TableColumn key="birth_year" allowsSorting>
+            Birth year
+          </TableColumn>
+        </TableHeader>
+        <TableBody
+          isLoading={isLoading}
+          items={list.items}
+          loadingContent={<Spinner label="Loading..." />}
+        >
+          {(item) => (
+            <TableRow key={item.name}>
+              {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

apps/docs/app/examples/table/use-case/page.tsx

@@ -459,7 +459,7 @@ export default function Page() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-none text-default-400 text-small"
+              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>

apps/docs/app/layout.tsx

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

apps/docs/app/page.tsx

@@ -17,7 +17,7 @@ import {HeroUIProSection} from "@/components/marketing/heroui-pro-section";
 
 export default async function Home() {
   return (
-    <main className="container mx-auto max-w-7xl px-6 flex-grow">
+    <main className="container mx-auto max-w-7xl px-6 grow">
       <section className="flex flex-col items-center justify-center">
         <Hero />
         <FeaturesGrid features={landingContent.topFeatures} />

apps/docs/app/playground/page.tsx

@@ -5,7 +5,7 @@ import PlaygroundTabs from "./playground-tabs";
 export default function FigmaPage() {
   return (
     <>
-      <main className="prose prose-neutral relative container mx-auto max-w-3xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
+      <main className="prose prose-neutral relative container mx-auto max-w-3xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 grow">
         <section className="w-full flex flex-col items-center mt-12 gap-6">
           <div className="text-center">
             <h1 className="mb-2">Playground</h1>

apps/docs/components/cmdk.tsx

@@ -63,7 +63,7 @@ const cmdk = tv({
       "h-14",
       "font-sans",
       "text-lg",
-      "outline-none",
+      "outline-solid outline-transparent",
       "rounded-none",
       "bg-transparent",
       "text-default-700",
@@ -81,7 +81,7 @@ const cmdk = tv({
       "justify-between",
       "items-center",
       "rounded-lg",
-      "shadow",
+      "shadow-xs",
       "bg-content2/50",
       "active:opacity-70",
       "cursor-pointer",
@@ -397,10 +397,10 @@ export const Cmdk: FC<{}> = () => {
           "mt-[20vh]",
           "border-small",
           "dark:border-default-100",
-          "supports-[backdrop-filter]:bg-background/80",
-          "dark:supports-[backdrop-filter]:bg-background/30",
-          "supports-[backdrop-filter]:backdrop-blur-md",
-          "supports-[backdrop-filter]:backdrop-saturate-150",
+          "supports-backdrop-filter:bg-background/80",
+          "dark:supports-backdrop-filter:bg-background/30",
+          "supports-backdrop-filter:backdrop-blur-md",
+          "supports-backdrop-filter:backdrop-saturate-150",
         ],
         backdrop: ["bg-black/80"],
       }}

apps/docs/components/copy-button.tsx

@@ -2,6 +2,7 @@ import type {ButtonProps} from "@heroui/react";
 
 import {useClipboard} from "@heroui/use-clipboard";
 import {memo} from "react";
+import {Tooltip} from "@heroui/react";
 
 import {PreviewButton} from "./preview-button";
 
@@ -32,7 +33,17 @@ export const CopyButton = memo<CopyButtonProps>(({value, className, ...buttonPro
     copy(value);
   };
 
-  return <PreviewButton className={className} icon={icon} onPress={handleCopy} {...buttonProps} />;
+  return (
+    <Tooltip
+      key={copied ? "copied" : "copy"}
+      className="text-xs px-2"
+      closeDelay={0}
+      content={copied ? "Copied!" : "Copy"}
+      radius="md"
+    >
+      <PreviewButton className={className} icon={icon} onPress={handleCopy} {...buttonProps} />
+    </Tooltip>
+  );
 });
 
 CopyButton.displayName = "CopyButton";

apps/docs/components/demo-code-modal.tsx

@@ -37,8 +37,8 @@ export const DemoCodeModal: FC<DemoCodeModalProps> = ({isOpen, code, title, subt
   return (
     <Modal
       classNames={{
-        backdrop: "z-[100002]", // to appear above the navbar
-        wrapper: "z-[100003]", // to appear above the backdrop
+        backdrop: "z-100002", // to appear above the navbar
+        wrapper: "z-100003", // to appear above the backdrop
       }}
       isOpen={isOpen}
       motionProps={{
@@ -71,7 +71,7 @@ export const DemoCodeModal: FC<DemoCodeModalProps> = ({isOpen, code, title, subt
             <CodeWindow
               showCopy
               showWindowIcons
-              className="min-h-[320px] !h-[60vh] max-h-full"
+              className="min-h-[320px] h-[60vh]! max-h-full"
               language="jsx"
               title={fileName}
               value={code}

apps/docs/components/demos/custom-button.tsx

@@ -39,7 +39,7 @@ export const CustomButton = () => {
     <Button
       ref={buttonRef}
       disableRipple
-      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-xl bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:!duration-500 hover:after:scale-150 hover:after:opacity-0"
+      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-xl bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:duration-500! hover:after:scale-150 hover:after:opacity-0"
       size="lg"
       onPress={handleConfetti}
     >

apps/docs/components/demos/music-player.tsx

@@ -52,7 +52,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Like"
-                className="text-default-900/60 data-[hover]:bg-foreground/10 -translate-y-2 translate-x-2"
+                className="text-default-900/60 data-hover:bg-foreground/10 -translate-y-2 translate-x-2"
                 radius="full"
                 variant="light"
                 onPress={() => setLiked((v) => !v)}
@@ -85,7 +85,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Repeat"
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -94,7 +94,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Previous"
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -103,7 +103,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Play"
-                className="w-auto h-auto data-[hover]:bg-foreground/10"
+                className="w-auto h-auto data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -112,7 +112,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Next"
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -121,7 +121,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Shuffle"
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >

apps/docs/components/docs/components/code-demo/code-demo.tsx

@@ -15,7 +15,6 @@ import {useCodeDemo} from "./use-code-demo";
 import WindowResizer from "./window-resizer";
 import {parseDependencies} from "./parse-dependencies";
 
-import {SmallLogo} from "@/components/heroui-logo";
 import {openInChat} from "@/actions/open-in-chat";
 
 const DynamicReactLiveDemo = dynamic(
@@ -273,9 +272,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
                   size="sm"
                   variant="simple"
                 />
-              ) : (
-                <SmallLogo className="w-4 h-4" />
-              )}
+              ) : null}
             </Button>
           )}
         </>

apps/docs/components/docs/components/code-demo/parse-dependencies.ts

@@ -52,6 +52,6 @@ export const parseDependencies = (content: string) => {
 };
 
 const fixedVersions = {
-  "@internationalized/date": "3.8.2",
-  "@react-aria/i18n": "3.12.10",
+  "@internationalized/date": "3.10.0",
+  "@react-aria/i18n": "3.12.13",
 };

apps/docs/components/docs/components/component-links.tsx

@@ -44,7 +44,7 @@ const ButtonLink = ({
     <Button
       isExternal
       as={Link}
-      className="!text-small py-4 bg-default-100 dark:bg-default-50 text-default-700"
+      className="text-small! py-4 bg-default-100 dark:bg-default-50 text-default-700"
       href={href}
       size="sm"
       startContent={startContent}

apps/docs/components/docs/components/package-managers.tsx

@@ -24,6 +24,10 @@ const packageManagers: PackageManager[] = [
     label: "CLI",
     icon: <CLIBoldIcon className="text-lg text-default-600 dark:text-default-400" />,
   },
+  {
+    name: "pnpm",
+    icon: <PnpmIcon className="text-[#F69220]" />,
+  },
   {
     name: "npm",
     icon: <NpmSmallIcon className="text-[#E53E3E]" />,
@@ -32,10 +36,6 @@ const packageManagers: PackageManager[] = [
     name: "yarn",
     icon: <YarnIcon className="text-[#2C8EBB]" />,
   },
-  {
-    name: "pnpm",
-    icon: <PnpmIcon className="text-[#F69220]" />,
-  },
   {
     name: "bun",
     icon: <BunIcon className="text-lg text-[#FBF0DF]" />,

apps/docs/components/docs/heroui-pro-callout.tsx

@@ -18,7 +18,7 @@ export const HeroUIProCallout = () => {
       <div>
         <p className="leading-[1.025] tracking-tight text-center text-large font-semibold">
           Ship&nbsp;
-          <span className="bg-clip-text text-transparent bg-gradient-to-b from-[#5EA2EF] to-[#0072F5]">
+          <span className="bg-clip-text text-transparent bg-linear-to-b from-[#5EA2EF] to-[#0072F5]">
             faster
           </span>
           <br />
@@ -37,7 +37,7 @@ export const HeroUIProCallout = () => {
         </div>
       </div>
       <NextLink
-        className="absolute inset-0 z-[1]"
+        className="absolute inset-0 z-1"
         href="https://heroui.pro/components?utm_source=heroui.com&utm_medium=callout"
         onClick={handleClick}
       />

apps/docs/components/docs/sidebar.tsx

@@ -196,7 +196,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
       aria-expanded={dataAttr(hasChildNodes ? isExpanded : undefined)}
       aria-selected={dataAttr(isSelected)}
       className={clsx(
-        "flex flex-col outline-none w-full tap-highlight-transparent",
+        "flex flex-col outline-solid outline-transparent w-full tap-highlight-transparent",
         hasChildNodes ? "mb-4" : "first:mt-4",
         // focus ring
         ...dataFocusVisibleClasses,
@@ -284,7 +284,7 @@ function Tree<T extends object>(props: CollectionBase<T> & Expandable & Multiple
   return (
     <ScrollArea
       ref={ref}
-      className="h-full max-w-[90%] lg:max-h-[calc(100vh_-_64px)]"
+      className="h-full max-w-full lg:max-h-[calc(100vh_-_64px)]"
       role="tree"
       {...collectionProps}
       scrollViewPortRef={scrollViewPortRef}

apps/docs/components/featurebase/fb-roadmap-link.tsx

@@ -33,7 +33,7 @@ export const FbRoadmapLink = ({className, innerClassName}: Props) => {
       <div className={clsx("relative", innerClassName)}>
         Roadmap
         <Icon
-          className="absolute right-[-10px] top-0 outline-none transition-transform group-data-[hover=true]:translate-y-0.5 [&>path]:stroke-[2.5px]"
+          className="absolute right-[-10px] top-0 outline-solid outline-transparent transition-transform group-data-[hover=true]:translate-y-0.5 [&>path]:stroke-[2.5px]"
           icon={arrowRightUpIcon}
           width={10}
         />

apps/docs/components/gradient-box.tsx

@@ -8,14 +8,14 @@ const styles = tv({
   base: "flex relative w-full h-auto",
   variants: {
     to: {
-      top: "bg-gradient-to-t",
-      right: "bg-gradient-to-r",
-      left: "bg-gradient-to-l",
-      bottom: "bg-gradient-to-b",
-      "top-right": "bg-gradient-to-tr",
-      "top-left": "bg-gradient-to-tl",
-      "bottom-right": "bg-gradient-to-br",
-      "bottom-left": "bg-gradient-to-bl",
+      top: "bg-linear-to-t",
+      right: "bg-linear-to-r",
+      left: "bg-linear-to-l",
+      bottom: "bg-linear-to-b",
+      "top-right": "bg-linear-to-tr",
+      "top-left": "bg-linear-to-tl",
+      "bottom-right": "bg-linear-to-br",
+      "bottom-left": "bg-linear-to-bl",
     },
     color: {
       orange: "from-[#FFB457] to-[#FF705B]",

apps/docs/components/heroui-chat-banner.tsx

@@ -80,7 +80,7 @@ export const HeroUIChatBanner = () => {
             HeroUI Chat
             <Icon
               aria-hidden="true"
-              className="outline-none transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              className="outline-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
               icon={arrowRightIcon}
               width={16}
             />

apps/docs/components/heroui-logo.tsx

@@ -21,7 +21,7 @@ export const SmallLogoOutlined: React.FC<LogoProps> = ({
   ...props
 }) => (
   <svg
-    className={cn("data-[auto=true]:sm:hidden block text-foreground", className)}
+    className={cn("sm:data-[auto=true]:hidden block text-foreground", className)}
     data-auto={dataAttr(auto)}
     fill="none"
     height={height || size || 25}
@@ -51,7 +51,7 @@ export const SmallLogo: React.FC<LogoProps> = ({
   ...props
 }) => (
   <svg
-    className={cn("data-[auto=true]:sm:hidden block text-foreground", className)}
+    className={cn("sm:data-[auto=true]:hidden block text-foreground", className)}
     data-auto={dataAttr(auto)}
     fill="none"
     height={height || size || 25}
@@ -71,58 +71,32 @@ export const SmallLogo: React.FC<LogoProps> = ({
   </svg>
 );
 
-export const LargeLogo: React.FC<LogoProps> = ({auto, className, ...props}) => (
+export const Logo: React.FC<LogoProps> = ({className, ...props}) => (
   <svg
-    className={cn(
-      "data-[auto=true]:hidden data-[auto=true]:sm:block block text-foreground",
-      className,
-    )}
-    data-auto={dataAttr(auto)}
+    className={cn(" text-[#18181B] dark:text-[#FFFFFF]", className)}
     fill="none"
-    viewBox="0 0 384 96"
+    viewBox="0 0 275 84"
     {...props}
   >
-    <path d="M374.28 93.12V0.959961H383.688V93.12H374.28Z" fill="currentColor" />
     <path
-      d="M319.093 95.04C312.053 95.04 305.824 93.5893 300.405 90.688C295.029 87.7866 290.805 83.6906 287.733 78.4C284.661 73.1093 283.125 66.9226 283.125 59.84V1.02396L292.597 0.959961V58.624C292.597 63.4026 293.408 67.5413 295.029 71.04C296.65 74.496 298.762 77.3546 301.365 79.616C304.01 81.8346 306.89 83.4773 310.005 84.544C313.12 85.6106 316.149 86.144 319.093 86.144C322.08 86.144 325.13 85.6106 328.245 84.544C331.36 83.4773 334.218 81.8346 336.821 79.616C339.424 77.3546 341.536 74.496 343.157 71.04C344.778 67.5413 345.589 63.4026 345.589 58.624V0.959961H355.061V59.84C355.061 66.9226 353.525 73.1093 350.453 78.4C347.381 83.648 343.136 87.744 337.717 90.688C332.341 93.5893 326.133 95.04 319.093 95.04Z"
+      d="M0 20.9484V46.0463C0 47.2326 0.609876 48.335 1.61325 48.9623L18.7276 59.6627C21.0083 61.0887 23.9623 59.4432 23.9623 56.7468V35.65C23.9623 34.4362 24.6006 33.3125 25.6413 32.6939L36.081 26.489V80.5589C36.081 83.2462 39.0172 84.8932 41.2985 83.4855L58.9629 72.5851C59.976 71.9599 60.5932 70.852 60.5932 69.6585V17.7361C60.5932 15.0618 57.6826 13.4129 55.4006 14.7942L36.081 26.489V3.44098C36.081 0.773993 33.1845 -0.876045 30.9022 0.490798L1.66918 17.9982C0.633988 18.6182 0 19.7387 0 20.9484Z"
       fill="currentColor"
     />
     <path
-      d="M236.239 95.04C229.37 95.04 223.503 93.4827 218.639 90.368C213.775 87.2534 210.042 82.944 207.439 77.44C204.836 71.936 203.535 65.6214 203.535 58.496C203.535 51.2427 204.858 44.8854 207.503 39.424C210.148 33.9627 213.903 29.7173 218.767 26.688C223.674 23.616 229.498 22.08 236.239 22.08C243.151 22.08 249.039 23.6373 253.903 26.752C258.81 29.824 262.543 34.112 265.103 39.616C267.706 45.0774 269.007 51.3707 269.007 58.496C269.007 65.7494 267.706 72.128 265.103 77.632C262.5 83.0934 258.746 87.36 253.839 90.432C248.932 93.504 243.066 95.04 236.239 95.04ZM236.239 86.016C243.919 86.016 249.636 83.4773 253.391 78.4C257.146 73.28 259.023 66.6454 259.023 58.496C259.023 50.1333 257.124 43.4773 253.327 38.528C249.572 33.5787 243.876 31.104 236.239 31.104C231.076 31.104 226.81 32.2773 223.439 34.624C220.111 36.928 217.615 40.1494 215.951 44.288C214.33 48.384 213.519 53.12 213.519 58.496C213.519 66.816 215.439 73.4933 219.279 78.528C223.119 83.52 228.772 86.016 236.239 86.016Z"
+      d="M125.354 46.1061C125.354 38.9888 122.442 35.7039 116.616 35.7039C109.945 35.7039 105.247 40.175 105.247 50.2123V73.2067H93.2203V9.33333H105.247V32.6927C108.16 27.9479 112.952 25.5754 119.529 25.5754C130.71 25.5754 137.287 32.419 137.287 43.9162V73.2067H125.354V46.1061Z"
       fill="currentColor"
     />
     <path
-      d="M162.5 93.12V24H170.948V40.64L169.284 38.464C170.052 36.416 171.055 34.5387 172.292 32.832C173.529 31.0827 174.873 29.6533 176.324 28.544C178.116 26.9653 180.207 25.7707 182.596 24.96C184.985 24.1067 187.396 23.616 189.828 23.488C192.26 23.3173 194.479 23.488 196.484 24V32.832C193.967 32.192 191.215 32.0427 188.228 32.384C185.241 32.7253 182.489 33.92 179.972 35.968C177.668 37.76 175.94 39.9147 174.788 42.432C173.636 44.9067 172.868 47.552 172.484 50.368C172.1 53.1413 171.908 55.8933 171.908 58.624V93.12H162.5Z"
+      d="M167.054 74.6667C152.114 74.6667 142.625 64.9944 142.625 50.121C142.625 35.4302 152.021 25.5754 167.054 25.5754C183.309 25.5754 192.141 37.0726 189.698 53.2235H154.651C155.309 60.8883 159.819 65.2682 167.054 65.2682C172.973 65.2682 176.544 62.257 177.483 59.2458H189.416C187.537 68.1881 179.269 74.6667 167.054 74.6667ZM154.933 45.2849H178.047C177.953 38.9888 173.819 34.7002 166.772 34.7002C160.477 34.7002 156.061 38.3501 154.933 45.2849Z"
       fill="currentColor"
     />
     <path
-      d="M116.873 95.04C110.132 95.04 104.286 93.5467 99.337 90.56C94.4304 87.5734 90.6117 83.3707 87.881 77.952C85.1504 72.5334 83.785 66.176 83.785 58.88C83.785 51.328 85.129 44.8 87.817 39.296C90.505 33.792 94.281 29.5467 99.145 26.56C104.052 23.5733 109.833 22.08 116.489 22.08C123.316 22.08 129.14 23.6587 133.961 26.816C138.782 29.9307 142.43 34.4107 144.905 40.256C147.38 46.1014 148.51 53.0773 148.297 61.184H138.697V57.856C138.526 48.896 136.585 42.1333 132.873 37.568C129.204 33.0027 123.828 30.72 116.745 30.72C109.321 30.72 103.625 33.1307 99.657 37.952C95.7317 42.7734 93.769 49.6427 93.769 58.56C93.769 67.264 95.7317 74.0267 99.657 78.848C103.625 83.6267 109.236 86.016 116.489 86.016C121.438 86.016 125.748 84.8853 129.417 82.624C133.129 80.32 136.052 77.0134 138.185 72.704L146.953 76.096C144.222 82.112 140.19 86.784 134.857 90.112C129.566 93.3974 123.572 95.04 116.873 95.04ZM99 61.184V53.312H143.241V61.184H99Z"
+      d="M196.257 38.7151C196.257 31.1415 200.485 27.0354 208.566 27.0354H223.975V36.8901H208.284V73.2067H196.257V38.7151Z"
       fill="currentColor"
     />
     <path
-      d="M0 93.12V0.959961H9.408V42.496H60.352V0.959961H69.696V93.12H60.352V51.52H9.408V93.12H0Z"
+      d="M250.289 74.6667C235.067 74.6667 225.389 64.9032 225.389 50.121C225.389 35.3389 235.067 25.5754 250.289 25.5754C265.322 25.5754 275 35.3389 275 50.121C275 64.9032 265.322 74.6667 250.289 74.6667ZM250.289 64.7207C257.805 64.7207 262.785 58.9721 262.785 50.121C262.785 41.27 257.805 35.4302 250.289 35.4302C242.678 35.4302 237.698 41.27 237.698 50.121C237.698 58.9721 242.678 64.7207 250.289 64.7207Z"
       fill="currentColor"
     />
   </svg>
 );
-
-export const HeroUILogo: React.FC<LogoProps> = ({auto, small, outlined, ...props}) => {
-  if (outlined) {
-    return <SmallLogoOutlined {...props} />;
-  }
-
-  if (auto) {
-    return (
-      <div>
-        <SmallLogo auto={auto} {...props} />
-        <LargeLogo auto={auto} {...props} />
-      </div>
-    );
-  }
-
-  if (small) {
-    return <SmallLogo {...props} />;
-  }
-
-  return <LargeLogo auto={auto} {...props} />;
-};

apps/docs/components/marketing/a11y-otb.tsx

@@ -69,7 +69,7 @@ const a11yItems = [
   },
 ];
 
-const iconClasses = "text-2xl text-default-500 pointer-events-none flex-shrink-0";
+const iconClasses = "text-2xl text-default-500 pointer-events-none shrink-0";
 
 export const A11yOtb = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -147,7 +147,7 @@ export const A11yOtb = () => {
               <Button
                 isIconOnly
                 aria-label="Show code"
-                className="absolute top-1 right-1 text-success-50 data-[hover]:bg-foreground/10"
+                className="absolute top-1 right-1 text-success-50 data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
                 onPress={() => setIsModalOpen(true)}
@@ -217,7 +217,7 @@ export const A11yOtb = () => {
                       description="Permanently delete the file"
                       shortcut="⌘⇧D"
                       startContent={
-                        <DeleteDocumentBulkIcon className={clsx(iconClasses, "!text-danger")} />
+                        <DeleteDocumentBulkIcon className={clsx(iconClasses, "text-danger!")} />
                       }
                     >
                       Delete file

apps/docs/components/marketing/custom-themes/custom-themes.tsx

@@ -9,7 +9,7 @@ import {shopCartStyles} from "./styles";
 
 import {title, subtitle, titleWrapper, sectionWrapper} from "@/components/primitives";
 import {PaletteIcon, MagicIcon, GamingConsoleIcon, StarIcon} from "@/components/icons";
-import {HeroUILogo, CodeWindow} from "@/components";
+import {SmallLogoOutlined, CodeWindow} from "@/components";
 import landingContent from "@/content/landing";
 import {useIsMobile} from "@/hooks/use-media-query";
 
@@ -22,8 +22,7 @@ const themesTabs = (isMobile: boolean) => [
       </p>
     ),
     icon: () => (
-      <HeroUILogo
-        outlined
+      <SmallLogoOutlined
         className="text-default-400 group-data-[selected=true]:text-foreground"
         size={isMobile ? 34 : 44}
       />
@@ -260,7 +259,7 @@ export const CustomThemes = () => {
           />
         </div>
       </div>
-      <div className="h-full dark:md:block absolute hidden -bottom-[10%] -left-[15%] -z-[1]">
+      <div className="h-full dark:md:block absolute hidden -bottom-[10%] -left-[15%] -z-1">
         <Image
           removeWrapper
           alt="custom themes background"

apps/docs/components/marketing/custom-themes/styles.ts

@@ -19,10 +19,10 @@ export const shopCartStyles = tv({
       "before:left-0",
       "before:w-full",
       "before:h-full",
-      "before:bg-gradient-to-br",
+      "before:bg-linear-to-br",
       "transition-all",
-      "!ease-soft-spring",
-      "!duration-500",
+      "ease-soft-spring!",
+      "duration-500!",
       "will-change-auto",
       "before:transition-all",
     ],
@@ -40,8 +40,8 @@ export const shopCartStyles = tv({
       "rounded-lg",
       "transition-all",
       "will-change-auto",
-      "!ease-soft-spring",
-      "!duration-300",
+      "ease-soft-spring!",
+      "duration-300!",
     ],
     contentWrapper: "flex flex-col justify-center transition-all h-full min-h-[200px]",
     title: ["relative", "w-full", "flex-none", "text-xl", "font-semibold", "text-foreground"],
@@ -59,7 +59,7 @@ export const shopCartStyles = tv({
       "text-sm",
       "rounded-full",
       // focus ring
-      "group-data-[focus-visible=true]:outline-none",
+      "group-data-[focus-visible=true]:outline-solid outline-transparent",
       "group-data-[focus-visible=true]:ring-2",
       "group-data-[focus-visible=true]:ring-focus",
       "group-data-[focus-visible=true]:ring-offset-2",
@@ -181,7 +181,7 @@ export const shopCartStyles = tv({
           "group-data-[selected=true]:text-white",
           "group-data-[focus-visible=true]:ring-[#EE457E]",
           "group-data-[focus-visible=true]:ring-offset-[#F4E8D1]",
-          "group-data-[focus-visible=true]:dark:ring-offset-[#F4E8D1]",
+          "dark:group-data-[focus-visible=true]:ring-offset-[#F4E8D1]",
         ],
         price: "text-black",
         previousPrice: "text-black/60 ml-2",
@@ -195,7 +195,7 @@ export const shopCartStyles = tv({
           "rounded-sm",
           "data-[focus-visible=true]:ring-[#EE457E]",
           "data-[focus-visible=true]:ring-offset-[#F4E8D1]",
-          "data-[focus-visible=true]:dark:ring-offset-[#F4E8D1]",
+          "dark:data-[focus-visible=true]:ring-offset-[#F4E8D1]",
         ],
         addToBagButton: [
           "border-[#FFD34E]",
@@ -206,7 +206,7 @@ export const shopCartStyles = tv({
           "rounded-sm",
           "data-[focus-visible=true]:ring-[#EE457E]",
           "data-[focus-visible=true]:ring-offset-[#F4E8D1]",
-          "data-[focus-visible=true]:dark:ring-offset-[#F4E8D1]",
+          "dark:data-[focus-visible=true]:ring-offset-[#F4E8D1]",
         ],
         learnMoreButton: "bg-warning/20 text-warning",
       },

apps/docs/components/marketing/dark-mode.tsx

@@ -45,7 +45,7 @@ export const DarkMode = () => {
                   <Button
                     isIconOnly
                     aria-label="Show code"
-                    className="text-white/70 dark:text-black/70 data-[hover]:bg-foreground/10"
+                    className="text-white/70 dark:text-black/70 data-hover:bg-foreground/10"
                     radius="full"
                     variant="light"
                     onPress={() => setIsModalOpen(true)}
@@ -56,7 +56,7 @@ export const DarkMode = () => {
                 <ThemeSwitch
                   classNames={{
                     base: "mt-1 bg-transparent rounded-xl",
-                    wrapper: "!text-white/70 dark:!text-black/70",
+                    wrapper: "text-white/70! dark:text-black/70!",
                   }}
                 />
               </div>

apps/docs/components/marketing/hero/bg-looper.tsx

@@ -14,7 +14,7 @@ export const BgLooper = () => {
         "data-[mounted=true]:opacity-100 transition-opacity",
         "bg-left bg-no-repeat bg-[url('/gradients/looper-pattern.svg')]",
         "after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:z-[-1]",
-        "after:bg-gradient-to-r after:from-transparent after:to-background dark:after:to-black after:z-[-1]",
+        "after:bg-linear-to-r after:from-transparent after:to-background dark:after:to-black after:z-[-1]",
       )}
       data-mounted={isMounted}
     />

apps/docs/components/marketing/hero/floating-components.tsx

@@ -19,7 +19,7 @@ import {FloatingTabs} from "./floating-tabs";
 import {UserTwitterCard} from "@/components/demos/user-twitter-card";
 import {useIsMounted} from "@/hooks/use-is-mounted";
 import {useMediaQuery} from "@/hooks/use-media-query";
-import {HeroUILogo} from "@/components/heroui-logo";
+import {SmallLogo} from "@/components/heroui-logo";
 
 export const FloatingComponents: React.FC<{}> = () => {
   const {theme, setTheme} = useTheme();
@@ -86,7 +86,7 @@ export const FloatingComponents: React.FC<{}> = () => {
           shadow="lg"
         >
           <CardBody>
-            <HeroUILogo small size={60} />
+            <SmallLogo size={60} />
           </CardBody>
         </Card>
 

apps/docs/components/marketing/hero/hero.tsx

@@ -39,11 +39,11 @@ export const Hero = () => {
               content: "font-semibold text-foreground text-xs ",
             }}
             color="primary"
-            href="/blog/v2.7.0"
+            href="/blog/v2.8.0"
             variant="flat"
-            onClick={() => handlePressAnnouncement("HeroUI v2.7.0", "/blog/v2.7.0")}
+            onClick={() => handlePressAnnouncement("HeroUI v2.8.0", "/blog/v2.8.0")}
           >
-            HeroUI v2.7.0 
+            HeroUI v2.8.0 
             <span aria-label="emoji" role="img">
               🔥
             </span>
@@ -67,7 +67,7 @@ export const Hero = () => {
             color="primary"
             endContent={
               <ArrowRightIcon
-                className="group-data-[hover=true]:translate-x-0.5 outline-none transition-transform"
+                className="group-data-[hover=true]:translate-x-0.5 outline-solid outline-transparent transition-transform"
                 strokeWidth={2}
               />
             }

apps/docs/components/marketing/heroui-pro-section.tsx

@@ -61,7 +61,7 @@ export const HeroUIProSection = () => {
         <div className="z-30 flex w-screen h-full flex-col items-start justify-center leading-8 pt-4">
           <Chip
             classNames={{
-              base: "ml-0.5 transition-colors bg-gradient-to-br from-cyan-600 to-blue-600",
+              base: "ml-0.5 transition-colors bg-linear-to-br from-cyan-600 to-blue-600",
               content: "text-tiny font-semibold",
             }}
             color="primary"

apps/docs/components/marketing/heroui-pro-section/heroui-pro-chip.tsx

@@ -3,7 +3,7 @@ import {Chip} from "@heroui/react";
 export const HeroUIProChip = () => (
   <Chip
     classNames={{
-      base: "ml-0.5 transition-colors bg-gradient-to-br from-cyan-600 to-blue-600",
+      base: "ml-0.5 transition-colors bg-linear-to-br from-cyan-600 to-blue-600",
       content: "text-tiny font-semibold",
     }}
     color="primary"

apps/docs/components/marketing/install-banner.tsx

@@ -66,7 +66,7 @@ export const InstallBanner = () => {
               color="secondary"
               endContent={
                 <ArrowRightIcon
-                  className="group-data-[hover=true]:translate-x-0.5 outline-none transition-transform"
+                  className="group-data-[hover=true]:translate-x-0.5 outline-solid outline-transparent transition-transform"
                   strokeWidth={2}
                 />
               }
@@ -119,7 +119,7 @@ export const InstallBanner = () => {
           "data-[mounted=true]:opacity-100 transition-opacity",
           "bg-left bg-no-repeat bg-[url('/gradients/looper-pattern.svg')]",
           "after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:z-[-1]",
-          "after:bg-gradient-to-b after:from-transparent after:to-white/80 dark:after:to-black/20 after:z-[-1]",
+          "after:bg-linear-to-b after:from-transparent after:to-white/80 dark:after:to-black/20 after:z-[-1]",
         )}
         data-mounted={isMounted}
       />

apps/docs/components/marketing/marquee.tsx

@@ -62,7 +62,7 @@ export const Marquee = ({
     >
       <div
         className={cn(
-          "flex w-max items-stretch gap-[--gap]",
+          "flex w-max items-stretch gap-(--gap)",
           {
             "flex-col": vertical,
             "h-full": vertical,

apps/docs/components/marketing/support-client.tsx

@@ -191,7 +191,7 @@ export const Support: FC<SupportProps> = ({sponsors = []}) => {
                   <Button
                     isIconOnly
                     aria-label="Become a sponsor"
-                    className="z-50 w-auto h-auto bg-gradient-to-b from-[#FF1CF7] to-[#7928CA]"
+                    className="z-50 w-auto h-auto bg-linear-to-b from-[#FF1CF7] to-[#7928CA]"
                     radius="full"
                     onPress={handleBecomeSponsor}
                   >

apps/docs/components/mdx-components.tsx

@@ -252,7 +252,7 @@ export const APITable: React.FC<APITableProps> = ({data}) => {
         </TableHeader>
         <TableBody>
           {data.map((item, index) => (
-            <TableRow key={index} className="[&>td]:px-2 [&>td]:py-1.5 [&>td]:first:pt-4">
+            <TableRow key={index} className="[&>td]:px-2 [&>td]:py-1.5 first:[&>td]:pt-4">
               <TableCell className="flex items-center gap-1 font-mono text-small whitespace-nowrap">
                 <InlineCodeChip className={item.deprecated ? "line-through" : ""}>
                   {item.attribute}
@@ -275,7 +275,7 @@ export const APITable: React.FC<APITableProps> = ({data}) => {
                     {/* Mobile popover */}
                     <Components.Popover placement="top">
                       <Components.PopoverTrigger>
-                        <button className="flex items-center gap-1 sm:hidden outline-none">
+                        <button className="flex items-center gap-1 sm:hidden outline-solid outline-transparent">
                           <InfoCircle className="text-default-400" size={16} />
                         </button>
                       </Components.PopoverTrigger>

apps/docs/components/mdx-content.tsx

@@ -2,10 +2,10 @@
 
 import type {MDXComponents as MDXComponentsType} from "mdx/types";
 
-import {useMDXComponent} from "next-contentlayer2/hooks";
-
 import {MDXComponents} from "./mdx-components";
 
+import {useMDXComponent} from "@/hooks/use-mdx-component";
+
 interface MDXContentProps {
   code: string;
 }

apps/docs/components/navbar.tsx

@@ -33,7 +33,7 @@ import {FbRoadmapLink} from "./featurebase/fb-roadmap-link";
 
 import {currentVersion} from "@/utils/version";
 import {siteConfig} from "@/config/site";
-import {LargeLogo, SmallLogo, ThemeSwitch} from "@/components";
+import {Logo, ThemeSwitch} from "@/components";
 import {GithubIcon, SearchLinearIcon} from "@/components/icons";
 import {useIsMounted} from "@/hooks/use-is-mounted";
 import {DocsSidebar} from "@/components/docs/sidebar";
@@ -122,7 +122,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
       }
       startContent={
         <SearchLinearIcon
-          className="text-base text-default-400 pointer-events-none flex-shrink-0"
+          className="text-base text-default-400 pointer-events-none shrink-0"
           size={16}
           strokeWidth={2}
         />
@@ -163,7 +163,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
     <HeroUINavbar
       ref={ref}
       className={clsx({
-        "z-[100001]": isMenuOpen,
+        "z-100001": isMenuOpen,
       })}
       classNames={{
         base: "bg-white/[.90] dark:bg-black/[.65]",
@@ -182,8 +182,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
             href="/"
             onClick={() => handlePressNavbarItem("Home", "/")}
           >
-            <SmallLogo className="w-6 h-6 md:hidden" />
-            <LargeLogo className="h-5 md:h-6" />
+            <Logo className="h-6" />
           </NextLink>
           {versionChip}
           <Chip
@@ -193,11 +192,11 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
               content: "font-semibold text-foreground text-xs ",
             }}
             color="primary"
-            href="/blog/v2.7.0"
+            href="/blog/v2.8.0"
             variant="flat"
-            onClick={() => handlePressNavbarItem("HeroUI v2.7.0", "/blog/v2.7.0")}
+            onClick={() => handlePressNavbarItem("HeroUI v2.8.0", "/blog/v2.8.0")}
           >
-            HeroUI v2.7.0&nbsp;
+            HeroUI v2.8.0&nbsp;
             <span aria-label="emoji" role="img">
               🔥
             </span>
@@ -220,14 +219,14 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
         <NavbarItem className="flex h-full items-center">
           <ThemeSwitch
             classNames={{
-              wrapper: "!text-default-500 dark:!text-default-500",
+              wrapper: "text-default-500! dark:text-default-500!",
             }}
           />
         </NavbarItem>
         <NavbarItem className="flex h-full items-center">
           <button
             className={clsx(
-              "transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-none",
+              "transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-solid outline-transparent",
               // focus ring
               ...dataFocusVisibleClasses,
             )}
@@ -337,7 +336,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
           <ThemeSwitch
             className="border-1 border-default-200 rounded-full h-full min-w-10 min-h-10 flex items-center justify-center"
             classNames={{
-              wrapper: "!text-default-400 dark:!text-default-500",
+              wrapper: "text-default-400! dark:text-default-500!",
             }}
           />
         </NavbarItem>

apps/docs/components/ph-banner.tsx

@@ -97,7 +97,7 @@ export const PhBanner = () => {
             Get 30% off
             <Icon
               aria-hidden="true"
-              className="outline-none transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              className="outline-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
               icon={arrowRightIcon}
               width={16}
             />

apps/docs/components/primitives.ts

@@ -32,7 +32,7 @@ export const title = tv({
   compoundVariants: [
     {
       color: ["violet", "yellow", "blue", "cyan", "green", "pink", "foreground"],
-      class: "bg-clip-text text-transparent bg-gradient-to-b",
+      class: "bg-clip-text text-transparent bg-linear-to-b",
     },
   ],
 });
@@ -41,7 +41,7 @@ export const subtitle = tv({
   base: "w-full md:w-1/2 my-2 text-medium lg:text-large font-normal text-default-500 block max-w-full",
   variants: {
     fullWidth: {
-      true: "!w-full",
+      true: "w-full!",
     },
   },
 });

apps/docs/components/pro-banner.tsx

@@ -51,7 +51,7 @@ export const ProBanner = () => {
         className="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
       >
         <div
-          className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] dark:from-[#F54180] dark:to-[#338EF7] opacity-20 dark:opacity-10"
+          className="aspect-577/310 w-[36.0625rem] bg-linear-to-r from-[#ff80b5] to-[#9089fc] dark:from-[#F54180] dark:to-[#338EF7] opacity-20 dark:opacity-10"
           style={{
             clipPath:
               "polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)",
@@ -63,7 +63,7 @@ export const ProBanner = () => {
         className="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
       >
         <div
-          className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r  from-[#ff80b5] to-[#9089fc] dark:from-[#F54180] dark:to-[#338EF7]  opacity-30 dark:opacity-20"
+          className="aspect-577/310 w-[36.0625rem] bg-linear-to-r  from-[#ff80b5] to-[#9089fc] dark:from-[#F54180] dark:to-[#338EF7]  opacity-30 dark:opacity-20"
           style={{
             clipPath:
               "polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)",
@@ -105,7 +105,7 @@ export const ProBanner = () => {
             HeroUI Pro
             <Icon
               aria-hidden="true"
-              className="outline-none transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              className="outline-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
               icon={arrowRightIcon}
               width={16}
             />

apps/docs/components/random-banner.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import {useState, useEffect} from "react";
+
+import {HeroUIChatBanner} from "@/components/heroui-chat-banner";
+import {ProBanner} from "@/components/pro-banner";
+
+export const RandomBanner = () => {
+  const [showChatBanner, setShowChatBanner] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    const bannerCount = parseInt(sessionStorage.getItem("bannerCount") || "0", 10);
+
+    const shouldShowChat = bannerCount % 2 === 0;
+
+    setShowChatBanner(shouldShowChat);
+
+    sessionStorage.setItem("bannerCount", String(bannerCount + 1));
+  }, []);
+
+  if (showChatBanner === null) {
+    return <div className="h-[47px] border-b border-divider" />;
+  }
+
+  return showChatBanner ? <HeroUIChatBanner /> : <ProBanner />;
+};

apps/docs/components/sandpack/copy-button.tsx

@@ -3,7 +3,7 @@ import {useSandpack} from "@codesandbox/sandpack-react";
 import {Tooltip, Button} from "@heroui/react";
 import {useClipboard} from "@heroui/use-clipboard";
 
-import {CopyLinearIcon} from "@/components/icons";
+import {CheckLinearIcon, CopyLinearIcon} from "@/components/icons";
 
 export const CopyButton = ({code: codeProp}: {code?: string}) => {
   const {copy, copied} = useClipboard();
@@ -16,15 +16,33 @@ export const CopyButton = ({code: codeProp}: {code?: string}) => {
     copy(code);
   };
 
+  const icon = copied ? (
+    <CheckLinearIcon
+      className="text-white dark:text-zinc-500 opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+      data-visible={copied}
+      height={16}
+      size={16}
+      width={16}
+    />
+  ) : (
+    <CopyLinearIcon
+      className="text-white dark:text-zinc-500 opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+      data-visible={!copied}
+      height={16}
+      width={16}
+    />
+  );
+
   return (
     <Tooltip
+      key={copied ? "copied" : "copy"}
       className="text-xs px-2"
       closeDelay={0}
       content={copied ? "Copied!" : "Copy"}
       radius="md"
     >
       <Button isIconOnly size="sm" title="Copy Code" variant="light" onPress={copyHandler}>
-        <CopyLinearIcon className="text-white dark:text-zinc-500" height={16} width={16} />
+        {icon}
       </Button>
     </Tooltip>
   );

apps/docs/components/sandpack/entries.ts

@@ -46,13 +46,21 @@ module.exports = {
 
 export const postcssConfig = `module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 }`;
 
-export const stylesConfig = `@tailwind base;
-@tailwind components;
-@tailwind utilities;`;
+export const stylesConfig = `@import "tailwindcss";
+@config "./tailwind.config.js";`;
 
 export const npmrcConfig = `public-hoist-pattern[]=*@heroui/*`;
+
+export const viteConfig = `import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});
+`;

apps/docs/components/sandpack/language-selector.tsx

@@ -32,7 +32,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({template, onC
         base: "absolute z-10 right-3 bottom-4",
         cursor: "bg-default-600 dark:bg-default-300",
         tabList:
-          "bg-transparent relative before:bg-white/5 before:w-full before:rounded-lg before:h-full before:content-[''] before:block before:z-1 before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100",
+          "bg-transparent relative before:bg-white/5 before:w-full before:rounded-lg before:h-full before:content-[''] before:block before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100",
       }}
       radius="md"
       selectedKey={selectedTemplate}

apps/docs/components/sandpack/use-sandpack.ts

@@ -4,6 +4,7 @@ import type {HighlightedLines} from "./types";
 import {useMemo} from "react";
 import {useTheme} from "next-themes";
 import {useLocalStorage} from "usehooks-ts";
+import {omit} from "lodash";
 
 import {getHighlightedLines, getFileName} from "./utils";
 import {
@@ -13,6 +14,7 @@ import {
   npmrcConfig,
   getHtmlFile,
   rootFile,
+  viteConfig,
 } from "./entries";
 
 export interface UseSandpackProps {
@@ -185,12 +187,50 @@ export const useSandpack = ({
     dependencies,
     entry: entryFile,
     devDependencies: {
-      autoprefixer: "10.4.20",
-      postcss: "8.4.49",
-      tailwindcss: "3.4.17",
+      postcss: "^8.4.21",
+      tailwindcss: "4.1.11",
+      "@tailwindcss/postcss": "4.1.11",
+      "@tailwindcss/vite": "4.1.11",
+      vite: "6.0.6",
     },
   };
 
+  const packageJson = `{
+    "type": "module",
+    "scripts": {
+      "dev": "vite",
+      "build": "vite build",
+      "preview": "vite preview"
+    },
+    "dependencies": {
+      "react": "18.3.1",
+      "react-dom": "18.3.1",
+      ${Object.entries(
+        omit(dependencies, [
+          "react",
+          "react-dom",
+          "react-dom/client",
+          "@vitejs/plugin-react",
+          "vite",
+          "postcss",
+          "tailwindcss",
+          "@tailwindcss/vite",
+          "@tailwindcss/postcss",
+        ]),
+      )
+        .map(([key, value]) => `"${key}": "${value}"`)
+        .join(",\n      ")}
+    },
+    "devDependencies": {
+      "@vitejs/plugin-react": "4.3.4",
+      ${Object.entries(customSetup.devDependencies)
+        .map(([key, value]) => `"${key}": "${value}"`)
+        .join(",\n      ")}
+    },
+    "main": "/index.jsx",
+    "packageManager": "pnpm@9.6.0"
+  }`;
+
   return {
     customSetup,
     files: {
@@ -207,7 +247,7 @@ export const useSandpack = ({
         code: tailwindConfig,
         hidden: true,
       },
-      "postcss.config.js": {
+      "postcss.config.cjs": {
         code: postcssConfig,
         hidden: true,
       },
@@ -219,6 +259,14 @@ export const useSandpack = ({
         code: npmrcConfig,
         hidden: true,
       },
+      "vite.config.js": {
+        code: viteConfig,
+        hidden: true,
+      },
+      "package.json": {
+        code: packageJson,
+        hidden: true,
+      },
     },
     hasTypescript,
     entryFile,

apps/docs/components/scripts/script-providers.tsx

@@ -15,7 +15,7 @@ export function ScriptProviders({ isKapaEnabled = true }: { isKapaEnabled?: bool
   React.useEffect(() => {
     function hideKapa() {
     const kapaElements = document.querySelectorAll('[id^="kapa-"]');
-    const display = pathname === "/docs/components/toast" || pathname === "/blog/v2.7.0" ? "none" : "block";
+    const display = pathname === "/docs/components/toast" || pathname === "/blog/v2.8.0" ? "none" : "block";
 
 
       kapaElements.forEach((element) => (element as HTMLElement).style.display = display);

apps/docs/components/theme-switch.tsx

@@ -76,7 +76,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
               "rounded-lg",
               "flex items-center justify-center",
               "group-data-[selected=true]:bg-transparent",
-              "!text-default-600 dark:!text-default-300",
+              "text-default-600! dark:text-default-300!",
               "pt-0",
               "px-0",
               "mx-0",

apps/docs/config/github-info.json

@@ -1,6 +1,6 @@
 {
-  "stars": { "raw": 24238, "formatted": "24.2K" },
-  "forks": 1769,
-  "subscribers": 88,
-  "openIssues": 346
+  "stars": { "raw": 26880, "formatted": "26.9K" },
+  "forks": 1948,
+  "subscribers": 93,
+  "openIssues": 264
 }

apps/docs/config/routes.json

@@ -34,14 +34,14 @@
           "key": "routing",
           "title": "Routing",
           "keywords": "client side routing, routing, browser routing, heroui, next.js router, react router, remix router",
-          "path": "/docs/guide/routing.mdx"
+          "path": "/docs/guide/routing.mdx",
+          "updated": true
         },
         {
           "key": "forms",
           "title": "Forms",
           "keywords": "forms, form validation, heroui",
-          "path": "/docs/guide/forms.mdx",
-          "updated": true
+          "path": "/docs/guide/forms.mdx"
         },
         {
           "key": "tailwind-v4",
@@ -214,8 +214,7 @@
           "key": "checkbox",
           "title": "Checkbox",
           "keywords": "checkbox, binary choice, selection control, toggle",
-          "path": "/docs/components/checkbox.mdx",
-          "updated": true
+          "path": "/docs/components/checkbox.mdx"
         },
         {
           "key": "checkbox-group",
@@ -300,15 +299,13 @@
           "key": "input-otp",
           "title": "Input OTP",
           "keywords": "input, otp, auth, verification code",
-          "path": "/docs/components/input-otp.mdx",
-          "updated": true
+          "path": "/docs/components/input-otp.mdx"
         },
         {
           "key": "kbd",
           "title": "Kbd",
           "keywords": "keyboard input, shortcut, keys, user input display",
-          "path": "/docs/components/kbd.mdx",
-          "updated": true
+          "path": "/docs/components/kbd.mdx"
         },
         {
           "key": "link",
@@ -338,8 +335,7 @@
           "key": "number-input",
           "title": "Number Input",
           "keywords": "input, numeric input, number input",
-          "path": "/docs/components/number-input.mdx",
-          "newPost": true
+          "path": "/docs/components/number-input.mdx"
         },
         {
           "key": "pagination",
@@ -363,8 +359,7 @@
           "key": "radio-group",
           "title": "Radio Group",
           "keywords": "radio group, selection set, option selection, exclusive choices",
-          "path": "/docs/components/radio-group.mdx",
-          "updated": true
+          "path": "/docs/components/radio-group.mdx"
         },
         {
           "key": "range-calendar",
@@ -382,7 +377,8 @@
           "key": "select",
           "title": "Select",
           "keywords": "select, selection, option list, multiple choice",
-          "path": "/docs/components/select.mdx"
+          "path": "/docs/components/select.mdx",
+          "updated": true
         },
         {
           "key": "skeleton",
@@ -394,7 +390,8 @@
           "key": "slider",
           "title": "Slider",
           "keywords": "slider, range input, value selector, sliding control",
-          "path": "/docs/components/slider.mdx"
+          "path": "/docs/components/slider.mdx",
+          "updated": true
         },
         {
           "key": "snippet",
@@ -412,8 +409,7 @@
           "key": "spinner",
           "title": "Spinner",
           "keywords": "spinner, loading, activity indicator, processing signal",
-          "path": "/docs/components/spinner.mdx",
-          "updated": true
+          "path": "/docs/components/spinner.mdx"
         },
         {
           "key": "switch",
@@ -432,15 +428,14 @@
           "key": "tabs",
           "title": "Tabs",
           "keywords": "tabs, section navigation, categorized content, tabbed interface",
-          "path": "/docs/components/tabs.mdx",
-          "updated": true
+          "path": "/docs/components/tabs.mdx"
         },
         {
           "key": "toast",
           "title": "Toast",
           "keywords": "toast, notification, message",
           "path": "/docs/components/toast.mdx",
-          "newPost": true
+          "updated": true
         },
         {
           "key": "textarea",
@@ -478,15 +473,13 @@
           "key": "cli-api",
           "title": "HeroUI CLI",
           "keywords": "api references, heroui, api, cli",
-          "path": "/docs/api-references/cli-api.mdx",
-          "updated": true
+          "path": "/docs/api-references/cli-api.mdx"
         },
         {
           "key": "heroui-provider",
           "title": "HeroUIProvider",
           "keywords": "api references, heroui, api, heroui provider",
-          "path": "/docs/api-references/heroui-provider.mdx",
-          "updated": true
+          "path": "/docs/api-references/heroui-provider.mdx"
         }
       ]
     }

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

@@ -343,7 +343,7 @@ Popover changes:
       backdrop="opaque"
       placement="right"
       classNames={{
--        base: "py-3 px-4 border border-default-200 bg-gradient-to-br from-white to-default-300 dark:from-default-100 dark:to-default-50",
+-        base: "py-3 px-4 border border-default-200 bg-linear-to-br from-white to-default-300 dark:from-default-100 dark:to-default-50",
 -        arrow: "bg-default-200",
 +        base: [
 +          // the "before" pseudo element is now the popover' arrow
@@ -351,7 +351,7 @@ Popover changes:
 +        ],
 +        content: [ // now we need to use the "content" slot to actually modify the popover' content styles
 +          "py-3 px-4 border border-default-200",
-+          "bg-gradient-to-br from-white to-default-300",
++          "bg-linear-to-br from-white to-default-300",
 +          "dark:from-default-100 dark:to-default-50",
         ],
       }}
@@ -368,7 +368,7 @@ Tooltip changes:
       placement="right"
       content="I am a tooltip"
       classNames={{
--        base: "py-2 px-4 shadow-xl text-black bg-gradient-to-br from-white to-neutral-400",
+-        base: "py-2 px-4 shadow-xl text-black bg-linear-to-br from-white to-neutral-400",
 -        arrow: "bg-neutral-400 dark:bg-white",
 +        base: [
 +          // the "before" pseudo element is now the popover' arrow
@@ -376,7 +376,7 @@ Tooltip changes:
 +        ],
 +        content: [ // now we need to use the "content" slot to actually modify the popover' content styles
 +          "py-2 px-4 shadow-xl",
-+          "text-black bg-gradient-to-br from-white to-neutral-400",
++          "text-black bg-linear-to-br from-white to-neutral-400",
 +        ],
       }}
     >
@@ -413,9 +413,9 @@ Dropdown Changes
     <Dropdown
       showArrow
       classNames={{
--        base: "py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black",
+-        base: "py-1 px-1 border border-default-200 bg-linear-to-br from-white to-default-200 dark:from-default-50 dark:to-black",
 -        arrow: "bg-default-200",
-+        content: "py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black",  // now instead of the "base" slot we use the "content"
++        content: "py-1 px-1 border border-default-200 bg-linear-to-br from-white to-default-200 dark:from-default-50 dark:to-black",  // now instead of the "base" slot we use the "content"
 +        base: "before:bg-default-200",  // the before pseudo element controls the popover's arrow
       }}
     >

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

@@ -0,0 +1,158 @@
+---
+title: "HeroUI v2.8.0"
+description: "TailwindCSS v4, improvements and bug fixes."
+date: "2025-07-15"
+image: "/blog/v2.8.0.jpg"
+tags: ["heroui", "v2.8.0", "release", "tailwind v4", "improvements", "theme"]
+author:
+  name: "WK Wong"
+  username: "@wingkwong"
+  link: "https://github.com/wingkwong"
+  avatar: "https://avatars.githubusercontent.com/u/35857179?v=4"
+---
+
+import closeToast from "@/content/components/toast/close.ts";
+import inputLabelPlacement from "@/content/components/input/label-placements.ts";
+import selectIsClearable from "@/content/components/select/is-clearable.ts";
+import selectEndContent from "@/content/components/select/end-content.ts";
+import tableSortIcon from "@/content/components/table/sort-icon.ts";
+import customTooltipContent from "@/content/components/slider/custom-tooltip.ts";
+
+<img
+  src="/blog/v2.8.0_2x.jpg"
+  width={700}
+  height={350}
+  alt="HeroUI v2.8.0"
+  className="w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
+/>
+
+HeroUI version **v2.8.0** introduces TailwindCSS v4, improvements and bug fixes.
+
+## What's New in v2.8.0?
+
+- [TailwindCSS v4](#tailwindcss-v4) - Support for TailwindCSS and upgrades to various dependencies.
+- [Overlay Enhancement](#overlay-enhancement) - Enhanced overlay and outside interactions across multiple components.
+- [Component Enhancement](#component-enhancement) - Enhanced component capabilities.
+- [What's Next?](#whats-next) - Upcoming features and improvements
+- [Breaking Changes](#breaking-changes) - Important changes that may affect existing implementations
+- [Release Changes](#release-changes) - Detailed list of features, documentation updates, bug fixes and enhancements
+
+<Spacer y={4} />
+
+**Upgrade today by using one of the following methods**:
+
+1. Upgrading HeroUI using the `cli`
+
+<PackageManagers
+  commands={{
+    cli: "heroui upgrade --all",
+    npm: "npx heroui-cli@latest upgrade --all",
+  }}
+/>
+
+2. Upgrading HeroUI using package managers
+
+<PackageManagers
+  commands={{
+    npm: "npm install @heroui/react@latest",
+    pnpm: "pnpm add @heroui/react@latest",
+    yarn: "yarn add @heroui/react@latest",
+    bun: "bun add @heroui/react@latest",
+  }}
+/>
+
+<Spacer y={4} />
+
+## TailwindCSS v4
+
+HeroUI is now compatible with TailwindCSS v4. With this update, HeroUI CLI has also been enhanced to support initializing new starter templates pre-configured with TailwindCSS v4. 
+
+To upgrade your existing projects, please refer to [migration guide](/docs/guide/tailwind-v4#migration-steps).
+
+## Overlay Enhancement
+
+The handling of overlay and outside interaction for components such as Popover, Modal, Dropdown, Select, and Tooltip have been improved to ensure consistent dismissal behaviour.
+
+## Component Enhancement
+
+### Toast
+
+- The return type of `addToast` has been changed from `void` to `string` where the returned string value is the unique key value of the newly created toast.
+- A new method `closeToast(key: string): void` has been introduced to accept a key value of `string` type and provide a way to close the specific toast with its unique key programmatically.
+- The Toast closing order has been updated from Last In, First Out (LIFO) to First In, First Out (FIFO).
+
+<CodeDemo title="Close Toast" files={closeToast} showEditor={false}/>
+
+### Input
+
+The Input component now features a new label placement option `outside-top`. Previously, labels would always remain inside the input field if there was no placeholder. 
+
+The new `outside-top` option ensures that labels are consistently displayed at the top of the input field, regardless of whether a placeholder is present, similar to the existing `outside-left` placement.
+
+<CodeDemo title="Label Placement" files={inputLabelPlacement} />
+
+### Select
+
+Two new properties `isClearable` and `onClear` have been introduced in the Select component. A clear button is visible when a value is slected and a callback function triggered upon clearing the selection for custom handling.
+
+<CodeDemo title="Clearable" files={selectIsClearable} />
+
+`endContent` has been introduced in the Select component.
+
+<CodeDemo title="End Content" files={selectEndContent} />
+
+### Table
+
+The table header previously utilized either a chevron-up or chevron-down icon for sorting, which was not configurable. A new `sortIcon` property has been introduced, allowing users to customize the default sort icon. This icon will only be applied when `allowsSorting` is set to true.
+
+<CodeDemo
+  asIframe
+  title="Sort Icon"
+  resizeEnabled={false}
+  displayMode="visible"
+  files={tableSortIcon}
+  previewHeight="520px"
+  iframeSrc="/examples/table/sort-icon"
+/>
+
+### Slider
+
+The `getTooltipValue` property has been introduced to customize the content displayed in the tooltip by returning a string or a number from the function. The existing `tooltipValueFormatOptions` prop can be used for additional formatting when number is returned. If `tooltipProps.content` is set, it will take precedence over the value generated by `getTooltipValue`.
+
+<CodeDemo title="Custom Tooltip" files={customTooltipContent} />
+
+## What's Next?
+
+We're excited to share that HeroUI v3 (Alpha) is just around the corner! You are expected to create stunning interfaces with 50% smaller bundle size, lightning-fast native CSS animations, and effortless customization that adapts to your design vision. 
+
+As an Alpha version, we're actively gathering feedback and refining the current components, including Button, Accordion, Avatar, TextArea, Checkbox, and more. Your input is invaluable in shaping the future of the library.
+
+## Breaking Changes
+
+- The component style have been updated to align TailwindCSS v4.
+- `loadingIcon` now renames to `loadingComponent` in Toast component
+
+## Release Changes
+
+<Spacer y={1} />
+
+As always, we are incredibly grateful for your continued support and contributions. There are many exciting milestones ahead, and we invite you to join us on this journey.
+
+Special thanks to HeroUI Team members [@winchesHe](https://github.com/winchesHe), [@macci001](https://github.com/macci001), [@Vishvsalvi](https://github.com/Vishvsalvi), and contributors for their contributions to this release.
+
+<Spacer y={6} />
+
+Thanks for reading and happy coding! 🚀
+
+---
+
+## Community
+
+We're excited to see the community adopt HeroUI, raise issues, and provide feedback.
+Whether it's a feature request, bug report, or a project to showcase, please get involved!
+
+<Community />
+
+## Contributing
+
+PRs on HeroUI are always welcome, please see our [contribution guidelines](https://github.com/heroui-inc/heroui/blob/main/CONTRIBUTING.md) to learn how you can contribute to this project.

apps/docs/content/components/alert/custom-impl.raw.jsx

@@ -41,13 +41,13 @@ const styles = {
   base: [
     "bg-slate-100",
     "border",
-    "shadow",
+    "shadow-sm",
     "hover:bg-slate-200",
-    "focus-within:!bg-slate-100",
+    "focus-within:bg-slate-100!",
     "dark:bg-slate-900",
     "dark:hover:bg-slate-800",
     "dark:border-slate-800",
-    "dark:focus-within:!bg-slate-900",
+    "dark:focus-within:bg-slate-900!",
     "cursor-pointer",
   ],
   title: ["text-base", "text-slate-500", "font-bold"],

apps/docs/content/components/autocomplete/custom-items.raw.jsx

@@ -216,7 +216,7 @@ export default function App() {
       {(user) => (
         <AutocompleteItem key={user.id} textValue={user.name}>
           <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <Avatar alt={user.name} className="shrink-0" size="sm" src={user.avatar} />
             <div className="flex flex-col">
               <span className="text-small">{user.name}</span>
               <span className="text-tiny text-default-400">{user.email}</span>

apps/docs/content/components/autocomplete/custom-styles.raw.jsx

@@ -281,7 +281,7 @@ export default function App() {
         <AutocompleteItem key={item.id} textValue={item.name}>
           <div className="flex justify-between items-center">
             <div className="flex gap-2 items-center">
-              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+              <Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
               <div className="flex flex-col">
                 <span className="text-small">{item.name}</span>
                 <span className="text-tiny text-default-400">{item.team}</span>

apps/docs/content/components/autocomplete/fully-controlled.ts

@@ -1,4 +1,4 @@
-import App from "./fully-controlled.raw.tsx?raw";
+import App from "./fully-controlled.raw.jsx?raw";
 import AppTs from "./fully-controlled.raw.tsx?raw";
 
 const react = {

apps/docs/content/components/avatar/custom.raw.jsx

@@ -5,7 +5,7 @@ export default function App() {
     <div className="flex items-center">
       <Avatar
         classNames={{
-          base: "bg-gradient-to-br from-[#FFB457] to-[#FF705B]",
+          base: "bg-linear-to-br from-[#FFB457] to-[#FF705B]",
           icon: "text-black/80",
         }}
         icon={<AvatarIcon />}

apps/docs/content/components/breadcrumbs/custom-styles.raw.jsx

@@ -36,7 +36,7 @@ export default function App() {
   return (
     <Breadcrumbs
       classNames={{
-        list: "bg-gradient-to-br from-violet-500 to-fuchsia-500 shadow-small",
+        list: "bg-linear-to-br from-violet-500 to-fuchsia-500 shadow-small",
       }}
       itemClasses={{
         item: "text-white/60 data-[current=true]:text-white",

apps/docs/content/components/button/custom-styles.raw.jsx

@@ -3,7 +3,7 @@ import {Button} from "@heroui/react";
 export default function App() {
   return (
     <Button
-      className="bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg"
+      className="bg-linear-to-tr from-pink-500 to-yellow-500 text-white shadow-lg"
       radius="full"
     >
       Button

apps/docs/content/components/card/blurred.raw.jsx

@@ -185,7 +185,7 @@ export default function App() {
               </div>
               <Button
                 isIconOnly
-                className="text-default-900/60 data-[hover]:bg-foreground/10 -translate-y-2 translate-x-2"
+                className="text-default-900/60 data-hover:bg-foreground/10! -translate-y-2 translate-x-2"
                 radius="full"
                 variant="light"
                 onPress={() => setLiked((v) => !v)}
@@ -217,7 +217,7 @@ export default function App() {
             <div className="flex w-full items-center justify-center">
               <Button
                 isIconOnly
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10!"
                 radius="full"
                 variant="light"
               >
@@ -225,7 +225,7 @@ export default function App() {
               </Button>
               <Button
                 isIconOnly
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10!"
                 radius="full"
                 variant="light"
               >
@@ -233,7 +233,7 @@ export default function App() {
               </Button>
               <Button
                 isIconOnly
-                className="w-auto h-auto data-[hover]:bg-foreground/10"
+                className="w-auto h-auto data-hover:bg-foreground/10!"
                 radius="full"
                 variant="light"
               >
@@ -241,7 +241,7 @@ export default function App() {
               </Button>
               <Button
                 isIconOnly
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10!"
                 radius="full"
                 variant="light"
               >
@@ -249,7 +249,7 @@ export default function App() {
               </Button>
               <Button
                 isIconOnly
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10!"
                 radius="full"
                 variant="light"
               >

apps/docs/content/components/card/cover-image.raw.jsx

@@ -4,7 +4,7 @@ export default function App() {
   return (
     <div className="max-w-[900px] gap-2 grid grid-cols-12 grid-rows-2 px-8">
       <Card className="col-span-12 sm:col-span-4 h-[300px]">
-        <CardHeader className="absolute z-10 top-1 flex-col !items-start">
+        <CardHeader className="absolute z-10 top-1 flex-col items-start!">
           <p className="text-tiny text-white/60 uppercase font-bold">What to watch</p>
           <h4 className="text-white font-medium text-large">Stream the Acme event</h4>
         </CardHeader>
@@ -16,7 +16,7 @@ export default function App() {
         />
       </Card>
       <Card className="col-span-12 sm:col-span-4 h-[300px]">
-        <CardHeader className="absolute z-10 top-1 flex-col !items-start">
+        <CardHeader className="absolute z-10 top-1 flex-col items-start!">
           <p className="text-tiny text-white/60 uppercase font-bold">Plant a tree</p>
           <h4 className="text-white font-medium text-large">Contribute to the planet</h4>
         </CardHeader>
@@ -28,7 +28,7 @@ export default function App() {
         />
       </Card>
       <Card className="col-span-12 sm:col-span-4 h-[300px]">
-        <CardHeader className="absolute z-10 top-1 flex-col !items-start">
+        <CardHeader className="absolute z-10 top-1 flex-col items-start!">
           <p className="text-tiny text-white/60 uppercase font-bold">Supercharged</p>
           <h4 className="text-white font-medium text-large">Creates beauty like a beast</h4>
         </CardHeader>
@@ -72,7 +72,7 @@ export default function App() {
           src="https://heroui.com/images/card-example-5.jpeg"
         />
         <CardFooter className="absolute bg-black/40 bottom-0 z-10 border-t-1 border-default-600 dark:border-default-100">
-          <div className="flex flex-grow gap-2 items-center">
+          <div className="flex grow gap-2 items-center">
             <Image
               alt="Breathing app icon"
               className="rounded-full w-10 h-11 bg-black"

apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx

@@ -15,7 +15,7 @@ export const CustomCheckbox = (props) => {
       },
       isFocusVisible: {
         true: {
-          base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background",
+          base: "outline-solid outline-transparent ring-2 ring-focus ring-offset-2 ring-offset-background",
         },
       },
     },

apps/docs/content/components/checkbox/custom-implementation.raw.jsx

@@ -40,7 +40,7 @@ export default function App() {
       },
       isFocusVisible: {
         true: {
-          base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background",
+          base: "outline-solid outline-transparent ring-2 ring-focus ring-offset-2 ring-offset-background",
         },
       },
     },

apps/docs/content/components/chip/custom-styles.raw.jsx

@@ -4,8 +4,8 @@ export default function App() {
   return (
     <Chip
       classNames={{
-        base: "bg-gradient-to-br from-indigo-500 to-pink-500 border-small border-white/50 shadow-pink-500/30",
-        content: "drop-shadow shadow-black text-white",
+        base: "bg-linear-to-br from-indigo-500 to-pink-500 border-small border-white/50 shadow-pink-500/30",
+        content: "drop-shadow-xs shadow-black text-white",
       }}
       variant="shadow"
     >

apps/docs/content/components/circular-progress/custom-styles.raw.jsx

@@ -2,7 +2,7 @@ import {CircularProgress, Card, CardBody, CardFooter, Chip} from "@heroui/react"
 
 export default function App() {
   return (
-    <Card className="w-[240px] h-[240px] border-none bg-gradient-to-br from-violet-500 to-fuchsia-500">
+    <Card className="w-[240px] h-[240px] border-none bg-linear-to-br from-violet-500 to-fuchsia-500">
       <CardBody className="justify-center items-center pb-0">
         <CircularProgress
           classNames={{

apps/docs/content/components/date-input/start-end-content.raw.jsx

@@ -37,13 +37,13 @@ export default function App() {
           labelPlacement="outside"
           placeholderValue={new CalendarDate(1995, 11, 6)}
           startContent={
-            <CalendarIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+            <CalendarIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
           }
         />
         <DateInput
           defaultValue={parseDate("2024-04-04")}
           endContent={
-            <CalendarIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+            <CalendarIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
           }
           label="Date Input"
           labelPlacement="outside"

apps/docs/content/components/drawer/backdrop.raw.jsx

@@ -89,7 +89,7 @@ export default function App() {
               <DrawerBody>
                 <Input
                   endContent={
-                    <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                    <MailIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
                   }
                   label="Email"
                   placeholder="Enter your email"
@@ -97,7 +97,7 @@ export default function App() {
                 />
                 <Input
                   endContent={
-                    <LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                    <LockIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
                   }
                   label="Password"
                   placeholder="Enter your password"

apps/docs/content/components/drawer/custom-styles.raw.jsx

@@ -38,7 +38,7 @@ export default function App() {
         hideCloseButton
         backdrop="blur"
         classNames={{
-          base: "data-[placement=right]:sm:m-2 data-[placement=left]:sm:m-2  rounded-medium",
+          base: "sm:data-[placement=right]:m-2 sm:data-[placement=left]:m-2  rounded-medium",
         }}
         isOpen={isOpen}
         onOpenChange={onOpenChange}
@@ -293,28 +293,28 @@ export default function App() {
                         >
                           <Tooltip content="Alex">
                             <Avatar
-                              className="data-[hover=true]:!translate-x-0"
+                              className="data-[hover=true]:translate-x-0!"
                               name="Alex"
                               src="https://i.pravatar.cc/150?u=a04258114e29026708c"
                             />
                           </Tooltip>
                           <Tooltip content="Joe">
                             <Avatar
-                              className="data-[hover=true]:!translate-x-0"
+                              className="data-[hover=true]:translate-x-0!"
                               name="Joe"
                               src="https://i.pravatar.cc/150?u=a04258114e290267084"
                             />
                           </Tooltip>
                           <Tooltip content="John">
                             <Avatar
-                              className="data-[hover=true]:!translate-x-0"
+                              className="data-[hover=true]:translate-x-0!"
                               name="John"
                               src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
                             />
                           </Tooltip>
                           <Tooltip content="Jane">
                             <Avatar
-                              className="data-[hover=true]:!translate-x-0"
+                              className="data-[hover=true]:translate-x-0!"
                               name="Jane"
                               src="https://i.pravatar.cc/150?u=a04258114e29026702d"
                             />

apps/docs/content/components/drawer/form.raw.jsx

@@ -71,7 +71,7 @@ export default function App() {
               <DrawerBody>
                 <Input
                   endContent={
-                    <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                    <MailIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
                   }
                   label="Email"
                   placeholder="Enter your email"
@@ -79,7 +79,7 @@ export default function App() {
                 />
                 <Input
                   endContent={
-                    <LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                    <LockIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
                   }
                   label="Password"
                   placeholder="Enter your password"

apps/docs/content/components/dropdown/custom-items-styles.raw.jsx

@@ -99,7 +99,7 @@ export default function App() {
             className="cursor-default"
             endContent={
               <select
-                className="z-10 outline-none w-16 py-0.5 rounded-md text-tiny group-data-[hover=true]:border-default-500 border-small border-default-300 dark:border-default-200 bg-transparent text-default-500"
+                className="z-10 outline-solid outline-transparent w-16 py-0.5 rounded-md text-tiny group-data-[hover=true]:border-default-500 border-small border-default-300 dark:border-default-200 bg-transparent text-default-500"
                 id="theme"
                 name="theme"
               >

apps/docs/content/components/dropdown/custom-popover-styles.raw.jsx

@@ -119,7 +119,7 @@ export const DeleteDocumentIcon = (props) => {
 };
 
 export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+  const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
 
   return (
     <Dropdown
@@ -127,7 +127,7 @@ export default function App() {
       classNames={{
         base: "before:bg-default-200", // change arrow background
         content:
-          "py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black",
+          "py-1 px-1 border border-default-200 bg-linear-to-br from-white to-default-200 dark:from-default-50 dark:to-black",
       }}
     >
       <DropdownTrigger>

apps/docs/content/components/dropdown/description.raw.jsx

@@ -111,7 +111,7 @@ export const DeleteDocumentIcon = (props) => {
 };
 
 export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+  const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
 
   return (
     <Dropdown>

apps/docs/content/components/dropdown/icons.raw.jsx

@@ -111,7 +111,7 @@ export const DeleteDocumentIcon = (props) => {
 };
 
 export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+  const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
 
   return (
     <Dropdown>

apps/docs/content/components/dropdown/sections.raw.jsx

@@ -119,7 +119,7 @@ export const DeleteDocumentIcon = (props) => {
 };
 
 export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+  const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
 
   return (
     <Dropdown>

apps/docs/content/components/input/custom-impl.raw.jsx

@@ -65,10 +65,10 @@ const styles = {
     "backdrop-blur-xl",
     "backdrop-saturate-200",
     "hover:bg-default-200/70",
-    "focus-within:!bg-default-200/50",
+    "focus-within:bg-default-200/50!",
     "dark:hover:bg-default/70",
-    "dark:focus-within:!bg-default/60",
-    "!cursor-text",
+    "dark:focus-within:bg-default/60!",
+    "cursor-text!",
   ],
 };
 
@@ -100,7 +100,7 @@ const MyInput = forwardRef((props, ref) => {
     type: "search",
     placeholder: "Type to search...",
     startContent: (
-      <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
+      <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none shrink-0" />
     ),
     // custom styles
     classNames: {
@@ -133,7 +133,7 @@ const MyInput = forwardRef((props, ref) => {
   }, [startContent, end, getInputProps, getInnerWrapperProps]);
 
   return (
-    <div className="w-[340px] h-[300px] px-8 rounded-2xl flex justify-center items-center bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
+    <div className="w-[340px] h-[300px] px-8 rounded-2xl flex justify-center items-center bg-linear-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
       <Component {...getBaseProps()}>
         {shouldLabelBeOutside ? labelContent : null}
         <div

apps/docs/content/components/input/custom-styles.raw.jsx

@@ -32,7 +32,7 @@ export const SearchIcon = (props) => {
 
 export default function App() {
   return (
-    <div className="w-[340px] h-[240px] px-8 rounded-2xl flex justify-center items-center bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
+    <div className="w-[340px] h-[240px] px-8 rounded-2xl flex justify-center items-center bg-linear-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
       <Input
         isClearable
         classNames={{
@@ -44,7 +44,7 @@ export default function App() {
           ],
           innerWrapper: "bg-transparent",
           inputWrapper: [
-            "shadow-xl",
+            "shadow-sm",
             "bg-default-200/50",
             "dark:bg-default/60",
             "backdrop-blur-xl",
@@ -53,14 +53,14 @@ export default function App() {
             "dark:hover:bg-default/70",
             "group-data-[focus=true]:bg-default-200/50",
             "dark:group-data-[focus=true]:bg-default/60",
-            "!cursor-text",
+            "cursor-text!",
           ],
         }}
         label="Search"
         placeholder="Type to search..."
         radius="lg"
         startContent={
-          <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
+          <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none shrink-0" />
         }
       />
     </div>

apps/docs/content/components/input/label-placements.raw.jsx

@@ -1,7 +1,7 @@
 import {Input} from "@heroui/react";
 
 export default function App() {
-  const placements = ["inside", "outside", "outside-left"];
+  const placements = ["inside", "outside", "outside-left", "outside-top"];
 
   return (
     <div className="flex flex-col gap-4">

apps/docs/content/components/input/password.raw.jsx

@@ -71,7 +71,7 @@ export default function App() {
       endContent={
         <button
           aria-label="toggle password visibility"
-          className="focus:outline-none"
+          className="focus:outline-solid outline-transparent"
           type="button"
           onClick={toggleVisibility}
         >

apps/docs/content/components/input/start-end-content.raw.jsx

@@ -29,7 +29,7 @@ export default function App() {
           labelPlacement="outside"
           placeholder="you@example.com"
           startContent={
-            <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+            <MailIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
           }
           type="email"
         />
@@ -59,7 +59,7 @@ export default function App() {
       <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
         <Input
           endContent={
-            <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+            <MailIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
           }
           label="Email"
           labelPlacement="outside"
@@ -100,7 +100,7 @@ export default function App() {
           labelPlacement="outside"
           placeholder="heroui"
           startContent={
-            <MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
+            <MailIcon className="text-xl text-default-400 pointer-events-none shrink-0" />
           }
         />
         <Input
@@ -110,7 +110,7 @@ export default function App() {
                 Currency
               </label>
               <select
-                className="outline-none border-0 bg-transparent text-default-400 text-small"
+                className="outline-solid outline-transparent border-0 bg-transparent text-default-400 text-small"
                 id="currency"
                 name="currency"
               >

apps/docs/content/components/listbox/description.raw.jsx

@@ -117,7 +117,7 @@ export const ListboxWrapper = ({children}) => (
 );
 
 export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+  const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
 
   return (
     <ListboxWrapper>

apps/docs/content/components/listbox/icons.raw.jsx

@@ -117,7 +117,7 @@ export const ListboxWrapper = ({children}) => (
 );
 
 export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+  const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
 
   return (
     <ListboxWrapper>

apps/docs/content/components/listbox/sections.raw.jsx

@@ -117,7 +117,7 @@ export const ListboxWrapper = ({children}) => (
 );
 
 export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+  const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
 
   return (
     <ListboxWrapper>

apps/docs/content/components/listbox/top-content.raw.jsx

@@ -250,7 +250,7 @@ export default function App() {
         {(item) => (
           <ListboxItem key={item.id} textValue={item.name}>
             <div className="flex gap-2 items-center">
-              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+              <Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
               <div className="flex flex-col">
                 <span className="text-small">{item.name}</span>
                 <span className="text-tiny text-default-400">{item.email}</span>

apps/docs/content/components/listbox/top-content.raw.tsx

@@ -253,7 +253,7 @@ export default function App() {
         {(item) => (
           <ListboxItem key={item.id} textValue={item.name}>
             <div className="flex gap-2 items-center">
-              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+              <Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
               <div className="flex flex-col">
                 <span className="text-small">{item.name}</span>
                 <span className="text-tiny text-default-400">{item.email}</span>

apps/docs/content/components/modal/custom-backdrop.raw.jsx

@@ -17,7 +17,7 @@ export default function App() {
       <Modal
         backdrop="opaque"
         classNames={{
-          backdrop: "bg-gradient-to-t from-zinc-900 to-zinc-900/10 backdrop-opacity-20",
+          backdrop: "bg-linear-to-t from-zinc-900 to-zinc-900/10 backdrop-opacity-20",
         }}
         isOpen={isOpen}
         onOpenChange={onOpenChange}

apps/docs/content/components/modal/form.raw.jsx

@@ -71,7 +71,7 @@ export default function App() {
               <ModalBody>
                 <Input
                   endContent={
-                    <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                    <MailIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
                   }
                   label="Email"
                   placeholder="Enter your email"
@@ -79,7 +79,7 @@ export default function App() {
                 />
                 <Input
                   endContent={
-                    <LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                    <LockIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
                   }
                   label="Password"
                   placeholder="Enter your password"