ci(changesets): version packages (#5482 )

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
chore: consolidated version part 2
2025-07-14 18:39:50 -03:00 · 2025-07-14 18:32:56 -03:00 · 2025-07-14 17:50:05 -03:00 · 2025-07-04 11:30:47 -03:00 · 2025-07-01 18:29:10 +08:00 · 2025-06-29 13:18:39 -03:00
527 changed files with 23901 additions and 9730 deletions
@@ -1,7 +0,0 @@
---
-"@heroui/date-input": patch
-"@heroui/calendar": patch
-"@heroui/system": patch
---
-
-remove `@interationalized/date` from system
@@ -1,5 +0,0 @@
---
-"@heroui/tabs": patch
---
-
-fix tabs handleClick (#5357)
@@ -1,45 +0,0 @@
---
-"@heroui/use-aria-accordion-item": patch
-"@heroui/use-aria-modal-overlay": patch
-"@heroui/use-aria-multiselect": patch
-"@heroui/use-aria-accordion": patch
-"@heroui/autocomplete": patch
-"@heroui/number-input": patch
-"@heroui/breadcrumbs": patch
-"@heroui/date-picker": patch
-"@heroui/date-input": patch
-"@heroui/pagination": patch
-"@heroui/use-aria-button": patch
-"@heroui/accordion": patch
-"@heroui/input-otp": patch
-"@heroui/calendar": patch
-"@heroui/checkbox": patch
-"@heroui/dropdown": patch
-"@heroui/use-aria-link": patch
-"@heroui/use-draggable": patch
-"@heroui/listbox": patch
-"@heroui/popover": patch
-"@heroui/snippet": patch
-"@heroui/tooltip": patch
-"@heroui/avatar": patch
-"@heroui/button": patch
-"@heroui/navbar": patch
-"@heroui/select": patch
-"@heroui/slider": patch
-"@heroui/switch": patch
-"@heroui/input": patch
-"@heroui/modal": patch
-"@heroui/radio": patch
-"@heroui/table": patch
-"@heroui/toast": patch
-"@heroui/card": patch
-"@heroui/chip": patch
-"@heroui/link": patch
-"@heroui/menu": patch
-"@heroui/tabs": patch
-"@heroui/user": patch
-"@heroui/system": patch
-"@heroui/react": patch
---
-
-bump RA versions
@@ -1,45 +0,0 @@
---
-"@heroui/scroll-shadow": patch
-"@heroui/autocomplete": patch
-"@heroui/number-input": patch
-"@heroui/breadcrumbs": patch
-"@heroui/date-picker": patch
-"@heroui/date-input": patch
-"@heroui/pagination": patch
-"@heroui/accordion": patch
-"@heroui/input-otp": patch
-"@heroui/calendar": patch
-"@heroui/checkbox": patch
-"@heroui/dropdown": patch
-"@heroui/progress": patch
-"@heroui/skeleton": patch
-"@heroui/listbox": patch
-"@heroui/popover": patch
-"@heroui/snippet": patch
-"@heroui/tooltip": patch
-"@heroui/avatar": patch
-"@heroui/button": patch
-"@heroui/drawer": patch
-"@heroui/navbar": patch
-"@heroui/ripple": patch
-"@heroui/select": patch
-"@heroui/slider": patch
-"@heroui/switch": patch
-"@heroui/alert": patch
-"@heroui/badge": patch
-"@heroui/image": patch
-"@heroui/input": patch
-"@heroui/modal": patch
-"@heroui/radio": patch
-"@heroui/table": patch
-"@heroui/toast": patch
-"@heroui/card": patch
-"@heroui/chip": patch
-"@heroui/form": patch
-"@heroui/link": patch
-"@heroui/menu": patch
-"@heroui/tabs": patch
-"@heroui/user": patch
---
-
-bump system peer dependencies
@@ -4,6 +4,7 @@ on:
  pull_request:
    branches:
      - canary
+      - beta/release-next

 jobs:
  build:
@@ -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
@@ -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}`
+    );
  },
 };
@@ -1 +1 @@
-v20.16.0
+v22.14.0
@@ -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"
+  ],
 }
@@ -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:

@@ -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
@@ -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) {
@@ -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} />
@@ -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
@@ -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>
@@ -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",
      ],
    }),
    [],
@@ -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>
+  );
+}
@@ -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>
@@ -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} />
@@ -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>
@@ -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"],
      }}
@@ -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}
@@ -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}
    >
@@ -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"
              >
@@ -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}
@@ -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]" />,
@@ -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}
      />
@@ -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}
@@ -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}
        />
@@ -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]",
@@ -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}
            />
@@ -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)}
@@ -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
@@ -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"
@@ -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",
      },
@@ -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>
@@ -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}
    />
@@ -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&nbsp;
+            HeroUI v2.8.0&nbsp;
            <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}
              />
            }
@@ -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"
@@ -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"
@@ -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}
      />
@@ -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,
@@ -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}
                  >
@@ -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>
@@ -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;
 }
@@ -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>
@@ -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}
            />
@@ -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!",
    },
  },
 });
@@ -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}
            />
@@ -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()],
+});
+`;
@@ -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}
@@ -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,
@@ -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);
@@ -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",
@@ -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
 }
@@ -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"
        }
      ]
    }
@@ -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
      }}
    >
@@ -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.
@@ -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"],
@@ -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>
@@ -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>
@@ -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 = {
@@ -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 />}
@@ -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",
@@ -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
@@ -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"
              >
@@ -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"
@@ -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",
        },
      },
    },
@@ -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",
        },
      },
    },
@@ -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"
    >
@@ -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={{
@@ -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"
@@ -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"
@@ -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"
                            />
@@ -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"
@@ -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"
              >
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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
@@ -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>
@@ -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">
@@ -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}
        >
@@ -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"
              >
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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}
@@ -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"
@@ -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"
@@ -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)}
      >
@@ -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)}
      >
@@ -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}
    />
@@ -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",
        ],
      }}
@@ -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",
      }}
@@ -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>
--- a/Show More
+++ b/Show More