ci(changesets): version packages (#5482)

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

.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/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/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/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}
@@ -74,7 +74,7 @@ export const SmallLogo: React.FC<LogoProps> = ({
 export const LargeLogo: React.FC<LogoProps> = ({auto, className, ...props}) => (
   <svg
     className={cn(
-      "data-[auto=true]:hidden data-[auto=true]:sm:block block text-foreground",
+      "data-[auto=true]:hidden sm:data-[auto=true]:block block text-foreground",
       className,
     )}
     data-auto={dataAttr(auto)}

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

@@ -260,7 +260,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/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

@@ -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]",
@@ -193,11 +193,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 +220,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 +337,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/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 as any, [
+          "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": 24825, "formatted": "24.8K" },
+  "forks": 1838,
+  "subscribers": 89,
+  "openIssues": 246
 }

apps/docs/config/routes.json

@@ -40,8 +40,7 @@
           "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 +213,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 +298,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 +334,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 +358,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 +376,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 +389,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 +408,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 +427,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 +472,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"

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

@@ -21,7 +21,7 @@ export default function App() {
               </label>
               <select
                 aria-label="Select currency"
-                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"
                 defaultValue="USD"
                 id="currency"
                 name="currency"

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

@@ -64,7 +64,7 @@ export default function App() {
         ref={ref}
         className={cn(
           className,
-          isActive && "text-white bg-gradient-to-br from-indigo-500 to-pink-500 font-bold",
+          isActive && "text-white bg-linear-to-br from-indigo-500 to-pink-500 font-bold",
         )}
         onClick={() => setPage(value)}
       >

apps/docs/content/components/pagination/custom-items.raw.tsx

@@ -79,7 +79,7 @@ export default function App() {
         ref={ref}
         className={cn(
           className,
-          isActive && "text-white bg-gradient-to-br from-indigo-500 to-pink-500 font-bold",
+          isActive && "text-white bg-linear-to-br from-indigo-500 to-pink-500 font-bold",
         )}
         onClick={() => setPage(value)}
       >

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

@@ -4,10 +4,10 @@ export default function App() {
   return (
     <Pagination
       classNames={{
-        wrapper: "gap-0 overflow-visible h-8 rounded border border-divider",
+        wrapper: "gap-0 overflow-visible h-8 rounded-sm border border-divider",
         item: "w-8 h-8 text-small rounded-none bg-transparent",
         cursor:
-          "bg-gradient-to-b shadow-lg from-default-500 to-default-800 dark:from-default-300 dark:to-default-100 text-white font-bold",
+          "bg-linear-to-b shadow-lg from-default-500 to-default-800 dark:from-default-300 dark:to-default-100 text-white font-bold",
       }}
       total={10}
     />

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

@@ -12,7 +12,7 @@ export default function App() {
         ],
         content: [
           "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",
         ],
       }}

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

@@ -6,7 +6,7 @@ export default function App() {
       classNames={{
         base: "max-w-md",
         track: "drop-shadow-md border border-default",
-        indicator: "bg-gradient-to-r from-pink-500 to-yellow-500",
+        indicator: "bg-linear-to-r from-pink-500 to-yellow-500",
         label: "tracking-wider font-medium text-default-600",
         value: "text-foreground/60",
       }}

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

@@ -215,7 +215,7 @@ export default function App() {
       {(user) => (
         <SelectItem 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/select/custom-render-value.raw.jsx

@@ -217,12 +217,7 @@ export default function App() {
       renderValue={(items) => {
         return items.map((item) => (
           <div key={item.key} className="flex items-center gap-2">
-            <Avatar
-              alt={item.data.name}
-              className="flex-shrink-0"
-              size="sm"
-              src={item.data.avatar}
-            />
+            <Avatar alt={item.data.name} className="shrink-0" size="sm" src={item.data.avatar} />
             <div className="flex flex-col">
               <span>{item.data.name}</span>
               <span className="text-default-500 text-tiny">({item.data.email})</span>
@@ -234,7 +229,7 @@ export default function App() {
       {(user) => (
         <SelectItem 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/select/custom-render-value.raw.tsx

@@ -231,12 +231,7 @@ export default function App() {
       renderValue={(items: SelectedItems<User>) => {
         return items.map((item) => (
           <div key={item.key} className="flex items-center gap-2">
-            <Avatar
-              alt={item.data?.name}
-              className="flex-shrink-0"
-              size="sm"
-              src={item.data?.avatar}
-            />
+            <Avatar alt={item.data?.name} className="shrink-0" size="sm" src={item.data?.avatar} />
             <div className="flex flex-col">
               <span>{item.data?.name}</span>
               <span className="text-default-500 text-tiny">({item.data?.email})</span>
@@ -248,7 +243,7 @@ export default function App() {
       {(user) => (
         <SelectItem 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/select/custom-styles.raw.jsx

@@ -238,12 +238,7 @@ export default function App() {
       renderValue={(items) => {
         return items.map((item) => (
           <div key={item.key} className="flex items-center gap-2">
-            <Avatar
-              alt={item.data.name}
-              className="flex-shrink-0"
-              size="sm"
-              src={item.data.avatar}
-            />
+            <Avatar alt={item.data.name} className="shrink-0" size="sm" src={item.data.avatar} />
             <div className="flex flex-col">
               <span>{item.data.name}</span>
               <span className="text-default-500 text-tiny">({item.data.email})</span>
@@ -256,7 +251,7 @@ export default function App() {
       {(user) => (
         <SelectItem 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/select/end-content.raw.jsx

@@ -0,0 +1,69 @@
+import {Select, SelectItem} from "@heroui/react";
+
+export const PetIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M19.0803 15.7203C18.4903 12.1903 15.1003 9.32031 11.5203 9.32031C7.63028 9.32031 4.21028 12.4703 3.88028 16.3503C3.75028 17.8503 4.23028 19.2703 5.22028 20.3403C6.20028 21.4103 7.58028 22.0003 9.08028 22.0003H13.7603C15.4503 22.0003 16.9303 21.3403 17.9403 20.1503C18.9503 18.9603 19.3503 17.3803 19.0803 15.7203Z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.2796 7.86C11.8978 7.86 13.2096 6.54819 13.2096 4.93C13.2096 3.31181 11.8978 2 10.2796 2C8.66141 2 7.34961 3.31181 7.34961 4.93C7.34961 6.54819 8.66141 7.86 10.2796 7.86Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.94 9.02844C18.2876 9.02844 19.38 7.93601 19.38 6.58844C19.38 5.24086 18.2876 4.14844 16.94 4.14844C15.5924 4.14844 14.5 5.24086 14.5 6.58844C14.5 7.93601 15.5924 9.02844 16.94 9.02844Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.5496 12.9313C21.6266 12.9313 22.4996 12.0582 22.4996 10.9812C22.4996 9.90429 21.6266 9.03125 20.5496 9.03125C19.4727 9.03125 18.5996 9.90429 18.5996 10.9812C18.5996 12.0582 19.4727 12.9313 20.5496 12.9313Z"
+        fill="currentColor"
+      />
+      <path
+        d="M3.94 10.9816C5.28757 10.9816 6.38 9.88914 6.38 8.54156C6.38 7.19399 5.28757 6.10156 3.94 6.10156C2.59243 6.10156 1.5 7.19399 1.5 8.54156C1.5 9.88914 2.59243 10.9816 3.94 10.9816Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <Select
+      className="max-w-xs"
+      defaultSelectedKeys={["cat"]}
+      endContent={<PetIcon />}
+      label="Favorite Animal"
+      placeholder="Select an animal"
+    >
+      {animals.map((animal) => (
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}