ci(changesets): version packages (#1615)

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

.eslintignore

@@ -1,6 +1,7 @@
 .now/*
 .next/*
 *.css
+.changeset
 dist
 esm/*
 public/*

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -21,6 +21,16 @@ body:
          - NextUI's [Discussions tab](https://github.com/nextui-org/nextui/discussions)
 
         The more information you fill in, the better the community can help you.
+  - type: input
+    id: version
+    attributes:
+      label: NextUI Version
+      description: |
+        Please provide the version of NextUI you are using.
+        You can find the version number in the package.json file.
+      placeholder: ex. 2.0.10
+    validations:
+      required: true
   - type: textarea
     id: description
     attributes:

.github/workflows/release.yaml

@@ -33,6 +33,7 @@ jobs:
         uses: changesets/action@v1
         with:
           publish: pnpm release
+          title: "ci(changesets): :package: version packages"
           commit: "ci(changesets): version packages"
           setupGitUser: false
         env:
@@ -48,4 +49,4 @@ jobs:
           pnpm release:dev
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -20,6 +20,7 @@ coverage
 dist/
 storybook-static
 /packages/storybook/public/tailwind.css
+
 # misc
 .DS_Store
 .env

.lintstagedrc.cjs

@@ -13,12 +13,12 @@ const removeIgnoredFiles = async (files) => {
 };
 
 module.exports = {
-  "**/*.{cjs,mjs,js,ts,jsx,tsx}": async (files) => {
+  "**/*.{js,ts,jsx,tsx}": async (files) => {
     const filesToLint = await removeIgnoredFiles(files);
 
     return [`eslint -c .eslintrc.json --max-warnings=0 --fix ${filesToLint}`];
   },
-  "**/*.{css,json,md}": async (files) => {
+  "**/*.css": async (files) => {
     const filesToLint = await removeIgnoredFiles(files);
 
     return [`prettier --config .prettierrc.json --ignore-path --write ${filesToLint}`];

.prettierignore

@@ -2,6 +2,7 @@ dist
 node_modules
 plop
 coverage
+.changeset
 .next
 build
 scripts

CONTRIBUTING.MD

@@ -182,7 +182,7 @@ pnpm test:update src/button  # or npm run test:update src/button
 pnpm build # or npm run build
 ```
 
-> Note: ensure your version of Node is 14 or higher to run scripts
+> Note: ensure your version of Node is 16 or higher to run scripts
 
 6. Send your pull request:
 

apps/docs/app/examples/navbar/with-search-input/page.tsx

@@ -61,7 +61,8 @@ export default function Page() {
           classNames={{
             base: "max-w-full sm:max-w-[10rem] h-10",
             input: "text-small",
-            inputWrapper: "font-normal text-default-500 bg-default-400/20 dark:bg-default-500/20",
+            inputWrapper:
+              "h-full font-normal text-default-500 bg-default-400/20 dark:bg-default-500/20",
           }}
           placeholder="Type to search..."
           startContent={<SearchLinearIcon size={18} />}

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

@@ -179,9 +179,9 @@ const MyButton2 = extendVariants(Button, {
 });
 
 export default function NextUIPerf() {
-  const [textA, setTextA] = useState<string | undefined>("");
-  const [textB, setTextB] = useState<string | undefined>("");
-  const [textC, setTextC] = useState<string | undefined>("");
+  const [textA, setTextA] = useState<string>("");
+  const [textB, setTextB] = useState<string>("");
+  const [textC, setTextC] = useState<string>("");
 
   return (
     <div className="w-full p-24 gap-4 flex flex-col">

apps/docs/app/examples/select/async-items-loading/page.tsx

@@ -0,0 +1,113 @@
+/* eslint-disable no-console */
+"use client";
+
+import {Select, SelectItem} from "@nextui-org/react";
+import {useEffect, useState} from "react";
+import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
+
+type Pokemon = {
+  name: string;
+  url: string;
+};
+
+type UsePokemonListProps = {
+  /** Delay to wait before fetching more items */
+  fetchDelay?: number;
+};
+
+function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) {
+  const [items, setItems] = useState<Pokemon[]>([]);
+  const [hasMore, setHasMore] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+  const [offset, setOffset] = useState(0);
+  const limit = 10; // Number of items per page, adjust as necessary
+
+  const loadPokemon = async (currentOffset: number) => {
+    const controller = new AbortController();
+    const {signal} = controller;
+
+    try {
+      setIsLoading(true);
+
+      if (offset > 0) {
+        // Delay to simulate network latency
+        await new Promise((resolve) => setTimeout(resolve, fetchDelay));
+      }
+
+      let res = await fetch(
+        `https://pokeapi.co/api/v2/pokemon?offset=${currentOffset}&limit=${limit}`,
+        {signal},
+      );
+
+      if (!res.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      let json = await res.json();
+
+      setHasMore(json.next !== null);
+      // Append new results to existing ones
+      setItems((prevItems) => [...prevItems, ...json.results]);
+    } catch (error) {
+      // @ts-ignore
+      if (error.name === "AbortError") {
+        console.log("Fetch aborted");
+      } else {
+        console.error("There was an error with the fetch operation:", error);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadPokemon(offset);
+  }, []);
+
+  const onLoadMore = () => {
+    const newOffset = offset + limit;
+
+    setOffset(newOffset);
+    loadPokemon(newOffset);
+  };
+
+  return {
+    items,
+    hasMore,
+    isLoading,
+    onLoadMore,
+  };
+}
+
+export default function Page() {
+  const [isOpen, setIsOpen] = useState(false);
+  const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500});
+
+  const [, scrollerRef] = useInfiniteScroll({
+    hasMore,
+    isEnabled: isOpen,
+    shouldUseLoader: false, // We don't want to show the loader at the bottom of the list
+    onLoadMore,
+  });
+
+  return (
+    <div className="p-6">
+      <Select
+        className="max-w-xs"
+        isLoading={isLoading}
+        items={items}
+        label="Pick a Pokemon"
+        placeholder="Select a Pokemon"
+        scrollRef={scrollerRef}
+        selectionMode="single"
+        onOpenChange={setIsOpen}
+      >
+        {(item) => (
+          <SelectItem key={item.name} className="capitalize">
+            {item.name}
+          </SelectItem>
+        )}
+      </Select>
+    </div>
+  );
+}

apps/docs/app/examples/table/async-pagination/page.tsx

@@ -11,8 +11,8 @@ import {
   Spinner,
   Pagination,
 } from "@nextui-org/react";
-import {useAsyncList} from "@react-stately/data";
-import {useCallback, useMemo, useState} from "react";
+import {useMemo, useState} from "react";
+import useSWR from "swr";
 
 type SWCharacter = {
   name: string;
@@ -21,50 +21,23 @@ type SWCharacter = {
   birth_year: string;
 };
 
+const fetcher = (...args: Parameters<typeof fetch>) => fetch(...args).then((res) => res.json());
+
 export default function Page() {
   const [page, setPage] = useState(1);
-  const [total, setTotal] = useState(0);
-  const [isLoading, setIsLoading] = useState(true);
+
+  const {data, isLoading} = useSWR<{
+    count: number;
+    results: SWCharacter[];
+  }>(`https://swapi.py4e.com/api/people?page=${page}`, fetcher, {
+    keepPreviousData: true,
+  });
 
   const rowsPerPage = 10;
 
-  let list = useAsyncList<SWCharacter>({
-    async load({signal, cursor}) {
-      // If no cursor is available, then we're loading the first page.
-      // Otherwise, the cursor is the next URL to load, as returned from the previous page.
-      const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal});
-      let json = await res.json();
-
-      setTotal(json.count);
-
-      setIsLoading(false);
-
-      return {
-        items: json.results,
-        cursor: json.next,
-      };
-    },
-  });
-
-  const pages = Math.ceil(total / rowsPerPage);
-
-  const items = useMemo(() => {
-    const start = (page - 1) * rowsPerPage;
-    const end = start + rowsPerPage;
-
-    return list.items.slice(start, end);
-  }, [page, list.items?.length]);
-
-  const onPaginationChange = useCallback(
-    (page: number) => {
-      setIsLoading(true);
-      if (page >= list.items.length / rowsPerPage) {
-        list.loadMore();
-      }
-      setPage(page);
-    },
-    [list.items.length],
-  );
+  const pages = useMemo(() => {
+    return data?.count ? Math.ceil(data.count / rowsPerPage) : 0;
+  }, [data?.count, rowsPerPage]);
 
   return (
     <div className="p-6">
@@ -80,7 +53,7 @@ export default function Page() {
                 color="primary"
                 page={page}
                 total={pages}
-                onChange={onPaginationChange}
+                onChange={(page) => setPage(page)}
               />
             </div>
           ) : null
@@ -96,8 +69,8 @@ export default function Page() {
           <TableColumn key="birth_year">Birth year</TableColumn>
         </TableHeader>
         <TableBody
-          isLoading={isLoading && !items.length}
-          items={items}
+          isLoading={isLoading || data?.results.length === 0}
+          items={data?.results ?? []}
           loadingContent={<Spinner />}
         >
           {(item) => (

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

@@ -105,7 +105,7 @@ const users = [
     email: "kristen.cooper@example.com",
   },
   {
-    key: 6,
+    id: 6,
     name: "Brian Kim",
     role: "P. Manager",
     team: "Management",
@@ -256,7 +256,7 @@ const users = [
   },
 ];
 
-type User = typeof users[0];
+type User = (typeof users)[number];
 
 export default function Page() {
   const [filterValue, setFilterValue] = useState("");

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

@@ -105,7 +105,7 @@ const users = [
     email: "kristen.cooper@example.com",
   },
   {
-    key: 6,
+    id: 6,
     name: "Brian Kim",
     role: "P. Manager",
     team: "Management",
@@ -256,7 +256,7 @@ const users = [
   },
 ];
 
-type User = typeof users[0];
+type User = (typeof users)[number];
 
 export default function Page() {
   const [filterValue, setFilterValue] = useState("");
@@ -271,8 +271,6 @@ export default function Page() {
 
   const [page, setPage] = useState(1);
 
-  const pages = Math.ceil(users.length / rowsPerPage);
-
   const hasSearchFilter = Boolean(filterValue);
 
   const headerColumns = useMemo(() => {
@@ -298,6 +296,8 @@ export default function Page() {
     return filteredUsers;
   }, [users, filterValue, statusFilter]);
 
+  const pages = Math.ceil(filteredItems.length / rowsPerPage);
+
   const items = useMemo(() => {
     const start = (page - 1) * rowsPerPage;
     const end = start + rowsPerPage;
@@ -390,6 +390,11 @@ export default function Page() {
     }
   }, []);
 
+  const onClear = useCallback(() => {
+    setFilterValue("");
+    setPage(1);
+  }, []);
+
   const topContent = useMemo(() => {
     return (
       <div className="flex flex-col gap-4">
@@ -400,7 +405,7 @@ export default function Page() {
             placeholder="Search by name..."
             startContent={<SearchIcon />}
             value={filterValue}
-            onClear={() => setFilterValue("")}
+            onClear={() => onClear()}
             onValueChange={onSearchChange}
           />
           <div className="flex gap-3">
@@ -483,23 +488,22 @@ export default function Page() {
         <span className="w-[30%] text-small text-default-400">
           {selectedKeys === "all"
             ? "All items selected"
-            : `${selectedKeys.size} of ${items.length} selected`}
+            : `${selectedKeys.size} of ${filteredItems.length} selected`}
         </span>
         <Pagination
           isCompact
           showControls
           showShadow
           color="primary"
-          isDisabled={hasSearchFilter}
           page={page}
           total={pages}
           onChange={setPage}
         />
         <div className="hidden sm:flex w-[30%] justify-end gap-2">
-          <Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onPreviousPage}>
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onPreviousPage}>
             Previous
           </Button>
-          <Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onNextPage}>
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onNextPage}>
             Next
           </Button>
         </div>

apps/docs/app/feed.xml/route.ts

@@ -24,7 +24,8 @@ export async function GET() {
       url: `${siteConfig.siteUrl}/blog/${post.slug}`,
       guid: `${siteConfig.siteUrl}/blog/${post.slug}`,
       date: post.date,
-      author: `${author} <${siteConfig.email}>`,
+      // @ts-ignore - name does exist
+      author: `${author.name} <${siteConfig.email}>`,
       categories: post.tags ?? [],
     });
   });

apps/docs/app/figma/page.tsx

@@ -1,6 +1,7 @@
-import {Button, Image, Link} from "@nextui-org/react";
+import {Image} from "@nextui-org/react";
 
 import {Blockquote} from "@/components/docs/components/blockquote";
+import {FigmaButton} from "@/components/figma-button";
 
 export default function FigmaPage() {
   return (
@@ -23,16 +24,7 @@ export default function FigmaPage() {
             width="800"
           />
           <div className="text-center max-w-2xl m-auto">
-            <Button className="max-w-fit" color="default" variant="bordered">
-              <Link
-                isExternal
-                showAnchorIcon
-                className="text-current"
-                href="https://www.figma.com/community/file/1267584376234254760"
-              >
-                Open in Figma
-              </Link>
-            </Button>
+            <FigmaButton />
             <Blockquote color="warning">
               This file is still in development and will be continuously updated.
             </Blockquote>

apps/docs/app/layout.tsx

@@ -53,6 +53,12 @@ export const metadata: Metadata = {
     },
   ],
   creator: "jrgarciadev",
+  alternates: {
+    canonical: "https://nextui.org",
+    types: {
+      "application/rss+xml": [{url: "https://nextui.org/feed.xml", title: "NextUI RSS Feed"}],
+    },
+  },
   viewport:
     "viewport-fit=cover, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",
 };

apps/docs/app/page.tsx

@@ -1,4 +1,4 @@
-import {Spacer} from "@nextui-org/react";
+import {Spacer} from "@nextui-org/spacer";
 
 import {Hero} from "@/components/marketing/hero";
 import {FeaturesGrid} from "@/components/marketing/features-grid";

apps/docs/components/blog-post.tsx

@@ -1,21 +1,31 @@
 "use client";
 
 import {BlogPost} from "contentlayer/generated";
-import {Card, CardFooter, CardBody, CardHeader, Link, Avatar} from "@nextui-org/react";
+import {Card, CardFooter, CardBody, CardHeader, Link, Avatar, Image} from "@nextui-org/react";
 import Balancer from "react-wrap-balancer";
 import {format, parseISO} from "date-fns";
 import NextLink from "next/link";
 import {AnimatePresence, motion} from "framer-motion";
 
 import {useIsMounted} from "@/hooks/use-is-mounted";
+import {trackEvent} from "@/utils/va";
 
 const BlogPostCard = (post: BlogPost) => {
   const isMounted = useIsMounted();
 
+  const handlePress = () => {
+    trackEvent("BlogPostCard - Selection", {
+      name: post.title,
+      action: "click",
+      category: "blog",
+      data: post.url ?? "",
+    });
+  };
+
   return (
     <AnimatePresence>
       {isMounted && (
-        <motion.div
+        <motion.article
           animate={{opacity: 1, y: 0}}
           exit={{opacity: 0, y: 5}}
           initial={{opacity: 0, y: 5}}
@@ -24,9 +34,10 @@ const BlogPostCard = (post: BlogPost) => {
           <Card
             isBlurred
             as={NextLink}
-            className="p-2 border-transparent text-start bg-white/5 dark:bg-default-400/10 backdrop-blur-lg backdrop-saturate-[1.8]"
+            className="p-2 h-full border-transparent text-start bg-white/5 dark:bg-default-400/10 backdrop-blur-lg backdrop-saturate-[1.8]"
             href={post.url}
             isPressable={!!post.url}
+            onPress={handlePress}
           >
             <CardHeader>
               <Link
@@ -35,14 +46,14 @@ const BlogPostCard = (post: BlogPost) => {
                 href={post.url}
                 size="lg"
                 underline="hover"
+                onPress={handlePress}
               >
                 <Balancer>{post.title}</Balancer>
               </Link>
             </CardHeader>
-            <CardBody className="px-3 pt-0 pb-1">
-              <p className="font-normal text-default-600">
-                <Balancer>{post.description}</Balancer>
-              </p>
+            <CardBody className="pt-0 px-2 pb-1">
+              <Image className="mb-4" src={post.image} />
+              <p className="font-normal w-full text-default-600">{post.description}</p>
             </CardBody>
             <CardFooter className="flex justify-between items-center">
               <time className="block text-small text-default-500" dateTime={post.date}>
@@ -51,7 +62,7 @@ const BlogPostCard = (post: BlogPost) => {
               <Avatar size="sm" src={post.author?.avatar} />
             </CardFooter>
           </Card>
-        </motion.div>
+        </motion.article>
       )}
     </AnimatePresence>
   );
@@ -59,7 +70,7 @@ const BlogPostCard = (post: BlogPost) => {
 
 export const BlogPostList = ({posts}: {posts: BlogPost[]}) => {
   return (
-    <div className="mt-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <div className="mt-10 grid gap-4 grid-cols-[repeat(auto-fill,minmax(300px,1fr))]">
       {posts.map((post, idx) => (
         <BlogPostCard key={idx} {...post} />
       ))}

apps/docs/components/cmdk.tsx

@@ -25,6 +25,7 @@ import {
 
 import searchData from "@/config/search-meta.json";
 import {useUpdateEffect} from "@/hooks/use-update-effect";
+import {trackEvent} from "@/utils/va";
 
 const hideOnPaths = ["examples"];
 
@@ -175,6 +176,13 @@ export const Cmdk: FC<{}> = () => {
 
       const matches = intersectionBy(...matchesForEachWord, "objectID").slice(0, MAX_RESULTS);
 
+      trackEvent("Cmdk - Search", {
+        name: "cmdk - search",
+        action: "search",
+        category: "cmdk",
+        data: {query, words, matches: matches?.map((match) => match.url).join(", ")},
+      });
+
       return matches;
     },
     [query],
@@ -190,10 +198,21 @@ export const Cmdk: FC<{}> = () => {
       if (e?.key?.toLowerCase() === "k" && e[hotkey]) {
         e.preventDefault();
         isOpen ? onClose() : onOpen();
+
+        trackEvent("Cmdk - Open/Close", {
+          name: "cmdk - open/close",
+          action: "keydown",
+          category: "cmdk",
+          data: isOpen ? "close" : "open",
+        });
       }
     };
 
     document.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
   }, [isOpen]);
 
   const onItemSelect = useCallback(
@@ -201,6 +220,13 @@ export const Cmdk: FC<{}> = () => {
       onClose();
       router.push(item.url);
       addToRecentSearches(item);
+
+      trackEvent("Cmdk - ItemSelect", {
+        name: item.content,
+        action: "click",
+        category: "cmdk",
+        data: item.url,
+      });
     },
     [router, recentSearches],
   );

apps/docs/components/code-window/code-block.tsx

@@ -108,9 +108,9 @@ function CodeTypewriter({value, className, css, ...props}: any) {
   return (
     <Pre className={className} css={css} {...props}>
       <code
+        dangerouslySetInnerHTML={{__html: value}}
         ref={wrapperRef}
         className={className}
-        dangerouslySetInnerHTML={{__html: value}}
         style={{opacity: 0}}
       />
     </Pre>
@@ -155,7 +155,7 @@ const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>((_props, forw
       {...props}
     >
       {showWindowIcons && <WindowActions title={title} />}
-      <code className={clsx(classes, codeClasses)} dangerouslySetInnerHTML={{__html: result}} />
+      <code dangerouslySetInnerHTML={{__html: result}} className={clsx(classes, codeClasses)} />
     </Pre>
   );
 });

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

@@ -3,6 +3,8 @@
 import {useRef} from "react";
 import {Button} from "@nextui-org/react";
 
+import {trackEvent} from "@/utils/va";
+
 export const CustomButton = () => {
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 
@@ -26,6 +28,11 @@ export const CustomButton = () => {
         x: targetCenterX / clientWidth,
       },
     });
+
+    trackEvent("LandingPage - Confetti Button", {
+      action: "press",
+      category: "landing-page",
+    });
   };
 
   return (

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

@@ -9,6 +9,7 @@ import {useCodeDemo, UseCodeDemoProps} from "./use-code-demo";
 import WindowResizer, {WindowResizerProps} from "./window-resizer";
 
 import {GradientBoxProps} from "@/components/gradient-box";
+import {trackEvent} from "@/utils/va";
 
 const DynamicReactLiveDemo = dynamic(
   () => import("./react-live-demo").then((m) => m.ReactLiveDemo),
@@ -33,9 +34,11 @@ interface CodeDemoProps extends UseCodeDemoProps, WindowResizerProps {
   enableResize?: boolean;
   showTabs?: boolean;
   showPreview?: boolean;
+  hideWindowActions?: boolean;
   showOpenInCodeSandbox?: boolean;
   isPreviewCentered?: boolean;
   resizeEnabled?: boolean;
+  typescriptStrict?: boolean;
   displayMode?: "always" | "visible";
   isGradientBox?: boolean;
   gradientColor?: GradientBoxProps["color"];
@@ -52,8 +55,11 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
   showPreview = true,
   asIframe = false,
   resizeEnabled = true,
+  hideWindowActions = false,
   showSandpackPreview = false,
   isPreviewCentered = false,
+  // when false .js files will be used
+  typescriptStrict = false,
   showOpenInCodeSandbox,
   isGradientBox = false,
   defaultExpanded = false,
@@ -96,6 +102,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
 
     const content = asIframe ? (
       <WindowResizer
+        hideWindowActions={hideWindowActions}
         iframeHeight={previewHeight}
         iframeInitialWidth={iframeInitialWidth}
         iframeSrc={iframeSrc}
@@ -121,6 +128,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
     isGradientBox,
     gradientColor,
     previewHeight,
+    hideWindowActions,
     asIframe,
     showPreview,
     isInView,
@@ -138,6 +146,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
         showEditor={showEditor}
         showOpenInCodeSandbox={showOpenInCodeSandbox || showPreview}
         showPreview={showSandpackPreview}
+        typescriptStrict={typescriptStrict}
       />
     );
 
@@ -172,6 +181,14 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
             panel: "pt-0",
           }}
           variant="underlined"
+          onSelectionChange={(tabKey) => {
+            trackEvent("CodeDemo - Selection", {
+              name: tabKey as string,
+              action: "tabChange",
+              category: "docs",
+              data: tabKey ?? "",
+            });
+          }}
         >
           <Tab key="preview" title="Preview">
             {previewContent}

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

@@ -49,6 +49,7 @@ const resizer = tv({
 
 export interface WindowResizerProps {
   resizeEnabled?: boolean;
+  hideWindowActions?: boolean;
   iframeHeight?: string | number;
   iframeMinWidth?: number;
   iframeSrc?: string;
@@ -70,6 +71,7 @@ const WindowResizer: React.FC<WindowResizerProps> = (props) => {
     iframeSrc,
     iframeTitle,
     resizeEnabled,
+    hideWindowActions = false,
     iframeHeight: height = "420px",
     iframeInitialWidth,
     iframeMinWidth: minWidth = MIN_WIDTH,
@@ -120,7 +122,7 @@ const WindowResizer: React.FC<WindowResizerProps> = (props) => {
           width: isMobile ? "100%" : browserWidth,
         }}
       >
-        <WindowActions className="bg-default-100 dark:bg-default-50" />
+        {!hideWindowActions && <WindowActions className="bg-default-100 dark:bg-default-50" />}
         <motion.iframe ref={iframeRef} className={iframe()} src={iframeSrc} title={iframeTitle} />
       </motion.div>
       {resizeEnabled && (

apps/docs/components/docs/components/codeblock.tsx

@@ -1,8 +1,10 @@
-import React, {forwardRef} from "react";
+import React, {forwardRef, useEffect} from "react";
 import {clsx, getUniqueID} from "@nextui-org/shared-utils";
 import BaseHighlight, {Language, PrismTheme, defaultProps} from "prism-react-renderer";
+import {debounce} from "lodash";
 
 import defaultTheme from "@/libs/prism-theme";
+import {trackEvent} from "@/utils/va";
 
 interface CodeblockProps {
   language: Language;
@@ -60,6 +62,45 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
     const shouldHighlightLine = calculateLinesToHighlight(metastring);
     const isMultiLine = codeString.split("\n").length > 2;
 
+    const lastSelectionText = React.useRef<string | null>(null);
+
+    useEffect(() => {
+      const handleSelectionChange = () => {
+        if (!window.getSelection) return;
+
+        const el = window.getSelection()?.anchorNode?.parentNode;
+
+        if (!el) return;
+
+        const selectionText = window.getSelection()?.toString();
+
+        if (!selectionText) return;
+
+        if (
+          !selectionText ||
+          selectionText === lastSelectionText.current ||
+          !codeString.includes(selectionText)
+        )
+          return;
+
+        lastSelectionText.current = selectionText;
+
+        trackEvent("Codeblock - Selection", {
+          action: "selectText",
+          category: "docs",
+          data: selectionText,
+        });
+      };
+
+      const debouncedHandleSelectionChange = debounce(handleSelectionChange, 1000);
+
+      document.addEventListener("selectionchange", debouncedHandleSelectionChange);
+
+      return () => {
+        document.removeEventListener("selectionchange", debouncedHandleSelectionChange);
+      };
+    }, []);
+
     return (
       <BaseHighlight
         {...defaultProps}

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

@@ -1,12 +1,16 @@
-import {Button, ButtonProps, Link} from "@nextui-org/react";
+import {Button, ButtonProps, Code, Link, Tooltip} from "@nextui-org/react";
+import {ReactNode} from "react";
+import Balancer from "react-wrap-balancer";
 
-import {GithubIcon, NpmIcon, AdobeIcon, StorybookIcon} from "@/components/icons";
+import {GithubIcon, NpmIcon, AdobeIcon, StorybookIcon, NextJsIcon} from "@/components/icons";
 import {COMPONENT_PATH, COMPONENT_THEME_PATH} from "@/libs/github/constants";
+import {trackEvent} from "@/utils/va";
 
 export interface ComponentLinksProps {
   component: string;
   styles?: string;
   storybook?: string;
+  rscCompatible?: boolean;
   reactAriaHook?: string;
 }
 
@@ -14,27 +18,51 @@ const ButtonLink = ({
   children,
   href,
   startContent,
+  tooltip,
   ...props
 }: ButtonProps & {
   href: string;
-}) => (
-  <Button
-    isExternal
-    as={Link}
-    className="!text-small py-4 bg-default-100 dark:bg-default-50 text-default-700"
-    href={href}
-    size="sm"
-    startContent={startContent}
-    {...props}
-  >
-    {children}
-  </Button>
-);
+  tooltip?: string | ReactNode;
+}) => {
+  const handlePress = () => {
+    if (!href) return;
+
+    trackEvent("ComponentLinks - Click", {
+      category: "docs",
+      action: "click",
+      data: href || "",
+    });
+  };
+
+  const button = (
+    <Button
+      isExternal
+      as={Link}
+      className="!text-small py-4 bg-default-100 dark:bg-default-50 text-default-700"
+      href={href}
+      size="sm"
+      startContent={startContent}
+      onPress={handlePress}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+
+  return tooltip ? (
+    <Tooltip className="max-w-[230px]" content={tooltip}>
+      {button}
+    </Tooltip>
+  ) : (
+    button
+  );
+};
 
 export const ComponentLinks = ({
   component,
   storybook,
   styles,
+  rscCompatible,
   reactAriaHook,
 }: ComponentLinksProps) => {
   if (!component) {
@@ -63,6 +91,26 @@ export const ComponentLinks = ({
           React Aria
         </ButtonLink>
       )}
+      {rscCompatible && (
+        <ButtonLink
+          href="https://nextjs.org/docs/app/building-your-application/rendering/server-components"
+          startContent={<NextJsIcon size={18} />}
+          tooltip={
+            <p>
+              <Balancer>
+                This component doesn&apos;t use the
+                <Code className="font-normal bg-transparent px-0 py-0 text-code-mdx">
+                  `use client;`
+                </Code>
+                directive making it compatible with RSC.
+              </Balancer>
+            </p>
+          }
+        >
+          Server component
+        </ButtonLink>
+      )}
+
       <ButtonLink href={`${COMPONENT_PATH}/${component}`} startContent={<GithubIcon size={20} />}>
         Source
       </ButtonLink>

apps/docs/components/docs/components/import-tabs.tsx

@@ -2,6 +2,8 @@ import {Tabs, Tab, Snippet} from "@nextui-org/react";
 
 import Codeblock from "./codeblock";
 
+import {trackEvent} from "@/utils/va";
+
 type PackageManager = {
   key: string;
   name: string;
@@ -32,6 +34,14 @@ export const ImportTabs = ({commands}: ImportTabsProps) => {
         tabList: "relative h-10",
       }}
       variant="underlined"
+      onSelectionChange={(tabKey) => {
+        trackEvent("ImportTabs - Selection", {
+          name: tabKey as string,
+          action: "tabChange",
+          category: "docs",
+          data: commands[tabKey] ?? "",
+        });
+      }}
     >
       {importTabs.map(({key, name}) => {
         if (!commands[key]) return null;
@@ -47,6 +57,14 @@ export const ImportTabs = ({commands}: ImportTabsProps) => {
                 pre: "font-light text-base",
                 copyButton: "text-lg text-default-400",
               }}
+              onCopy={() => {
+                trackEvent("ImportTabs - Copy", {
+                  name,
+                  action: "copyInstallScript",
+                  category: "docs",
+                  data: commands[name] ?? "",
+                });
+              }}
             >
               <Codeblock
                 hideScrollBar

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

@@ -3,6 +3,7 @@ import {Tabs, Tab, Snippet} from "@nextui-org/react";
 import Codeblock from "./codeblock";
 
 import {YarnIcon, NpmSmallIcon, PnpmIcon} from "@/components/icons";
+import {trackEvent} from "@/utils/va";
 
 type PackageManagerName = "npm" | "yarn" | "pnpm";
 
@@ -27,7 +28,7 @@ const packageManagers: PackageManager[] = [
 ];
 
 export interface PackageManagersProps {
-  commands: Partial<Record<PackageManagerName, string>>;
+  commands: Partial<Record<PackageManagerName, React.Key>>;
 }
 
 export const PackageManagers = ({commands}: PackageManagersProps) => {
@@ -39,6 +40,14 @@ export const PackageManagers = ({commands}: PackageManagersProps) => {
         tabList: "h-10",
       }}
       variant="underlined"
+      onSelectionChange={(tabKey) => {
+        trackEvent("PackageManagers - Selection", {
+          name: tabKey as string,
+          action: "tabChange",
+          category: "docs",
+          data: commands[tabKey as unknown as PackageManagerName] ?? "",
+        });
+      }}
     >
       {packageManagers.map(({name, icon}) => {
         if (!commands[name]) return null;
@@ -62,6 +71,14 @@ export const PackageManagers = ({commands}: PackageManagersProps) => {
                 pre: "font-light text-base",
                 copyButton: "text-lg text-zinc-500 mr-2",
               }}
+              onCopy={() => {
+                trackEvent("PackageManagers - Copy", {
+                  name,
+                  action: "copyScript",
+                  category: "docs",
+                  data: commands[name] ?? "",
+                });
+              }}
             >
               <Codeblock removeIndent codeString={commands[name] as string} language="bash" />
             </Snippet>

apps/docs/components/docs/pager.tsx

@@ -1,31 +1,43 @@
 "use client";
 
 import * as React from "react";
-import NextLink from "next/link";
 import {Link} from "@nextui-org/react";
+import {useRouter} from "next/navigation";
 import {ChevronIcon} from "@nextui-org/shared-icons";
 
 import manifest from "@/config/routes.json";
 import {removeFromLast} from "@/utils";
 import {Route} from "@/libs/docs/page";
 import {useDocsRoute} from "@/hooks/use-docs-route";
+import {trackEvent} from "@/utils/va";
 
 export interface FooterNavProps {
   currentRoute?: Route;
 }
 
 export const DocsPager: React.FC<FooterNavProps> = ({currentRoute}) => {
+  const router = useRouter();
+
   const {prevRoute, nextRoute} = useDocsRoute(manifest.routes, currentRoute);
 
+  const handlePress = (path: string) => {
+    trackEvent("DocsPager - Click", {
+      category: "docs",
+      action: "click",
+      data: path || "",
+    });
+
+    router.push(removeFromLast(path || "", "."));
+  };
+
   return (
     <div className="flex w-full justify-between py-20">
       {prevRoute ? (
         <Link
           isBlock
-          as={NextLink}
-          className="flex gap-2"
+          className="cursor-pointer flex gap-2"
           color="foreground"
-          href={removeFromLast(prevRoute.path || "", ".")}
+          onPress={() => handlePress(prevRoute.path || "")}
         >
           <ChevronIcon className="text-primary" height={20} width={20} />
           {prevRoute.title}
@@ -36,10 +48,9 @@ export const DocsPager: React.FC<FooterNavProps> = ({currentRoute}) => {
       {nextRoute && (
         <Link
           isBlock
-          as={NextLink}
-          className="flex gap-1 items-center"
+          className="cursor-pointer flex gap-1 items-center"
           color="foreground"
-          href={removeFromLast(nextRoute.path || "", ".")}
+          onPress={() => handlePress(nextRoute.path || "")}
         >
           {nextRoute.title}
           <ChevronIcon className="rotate-180 text-primary" height={20} width={20} />

apps/docs/components/docs/sidebar.tsx

@@ -26,6 +26,7 @@ import {getRoutePaths} from "./utils";
 import {Route} from "@/libs/docs/page";
 import {TreeKeyboardDelegate} from "@/utils/tree-keyboard-delegate";
 import {useScrollPosition} from "@/hooks/use-scroll-position";
+import {trackEvent} from "@/utils/va";
 
 export interface Props<T> extends Omit<ItemProps<T>, "title">, Route {
   slug?: string;
@@ -88,6 +89,12 @@ function TreeItem<T>(props: TreeItemProps<T>) {
         state.toggleKey(item.key);
       } else {
         router.push(paths.pathname);
+
+        trackEvent("SidebarDocs", {
+          category: "docs",
+          action: "click",
+          data: paths.pathname || "",
+        });
       }
     },
   });

apps/docs/components/figma-button.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import {Button, Link} from "@nextui-org/react";
+
+import {trackEvent} from "@/utils/va";
+
+export const FigmaButton = () => (
+  <Button
+    isExternal
+    showAnchorIcon
+    as={Link}
+    className="max-w-fit text-current"
+    color="default"
+    href="https://www.figma.com/community/file/1267584376234254760"
+    variant="bordered"
+    onPress={() => {
+      trackEvent("FigmaPage - Open Figma Link", {
+        action: "click",
+        category: "figma",
+      });
+    }}
+  >
+    Open in Figma
+  </Button>
+);

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

@@ -14,6 +14,7 @@ import {PaletteIcon, MagicIcon, GamingConsoleIcon, StarIcon} from "@/components/
 import {NextUILogo, CodeWindow} from "@/components";
 import landingContent from "@/content/landing";
 import {useIsMobile} from "@/hooks/use-media-query";
+import {trackEvent} from "@/utils/va";
 
 const themesTabs = (isMobile: boolean) => [
   {
@@ -87,6 +88,12 @@ const CustomThemesExample = ({
 
   const onSelectionChange = (value: React.Key) => {
     onChangeTheme(value as Theme);
+
+    trackEvent("CustomThemes - Selection", {
+      action: "change_theme",
+      category: "landing-page",
+      data: value,
+    });
   };
 
   return (

apps/docs/components/marketing/features-grid.tsx

@@ -6,6 +6,8 @@ import {Card, CardHeader, CardBody, LinkProps, SlotsToClasses} from "@nextui-org
 import {useRouter} from "next/navigation";
 import {LinkIcon} from "@nextui-org/shared-icons";
 
+import {trackEvent} from "@/utils/va";
+
 const styles = tv({
   slots: {
     base: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4",
@@ -38,6 +40,13 @@ export const FeaturesGrid: React.FC<FeaturesGridProps> = ({features, classNames,
   const slots = styles();
 
   const handleClick = (feat: Feature) => {
+    trackEvent("FeaturesGrid - Click", {
+      name: feat.title,
+      action: "click",
+      category: "docs",
+      data: feat.href ?? "",
+    });
+
     if (!feat.href) {
       return;
     }

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

@@ -105,12 +105,14 @@ export const FloatingComponents: React.FC<{}> = () => {
 
         {isMounted && (
           <Tooltip
-            showArrow
             className="text-sm animate-[levitate_14s_ease_infinite]"
             color="secondary"
             content="Developers love Next.js"
             isOpen={!isTablet}
             placement="top"
+            style={{
+              zIndex: 39,
+            }}
           >
             <Button
               className="absolute left-[200px] top-[160px] max-w-fit animate-[levitate_14s_ease_infinite_0.5s]"

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

@@ -9,6 +9,7 @@ import {FloatingComponents} from "./floating-components";
 
 import {title, subtitle} from "@/components/primitives";
 import {GithubIcon} from "@/components/icons";
+import {trackEvent} from "@/utils/va";
 
 const BgLooper = dynamic(() => import("./bg-looper").then((mod) => mod.BgLooper), {
   ssr: false,
@@ -42,6 +43,14 @@ export const Hero = () => {
             href="/docs/guide/introduction"
             radius="full"
             size="lg"
+            onPress={() => {
+              trackEvent("Hero - Get Started", {
+                name: "Get Started",
+                action: "click",
+                category: "landing-page",
+                data: "/docs/guide/introduction",
+              });
+            }}
           >
             Get Started
           </Button>
@@ -56,6 +65,14 @@ export const Hero = () => {
             size="lg"
             startContent={<GithubIcon />}
             variant="bordered"
+            onPress={() => {
+              trackEvent("Hero - Github", {
+                name: "Github",
+                action: "click",
+                category: "landing-page",
+                data: "https://github.com/nextui-org/nextui",
+              });
+            }}
           >
             Github
           </Button>

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

@@ -11,6 +11,7 @@ import {FeaturesGrid} from "./features-grid";
 import {sectionWrapper, subtitle, title} from "@/components/primitives";
 import {GithubIcon, NoteLinearIcon, NextJsIcon} from "@/components/icons";
 import {useIsMounted} from "@/hooks/use-is-mounted";
+import {trackEvent} from "@/utils/va";
 
 const bannerSuggestions = [
   {
@@ -69,6 +70,13 @@ export const InstallBanner = () => {
               href="/docs/guide/installation"
               radius="full"
               size="md"
+              onClick={() => {
+                trackEvent("InstallBanner - Get Started", {
+                  action: "press",
+                  category: "landing-page",
+                  data: "/docs/guide/installation",
+                });
+              }}
             >
               Get Started
             </Button>
@@ -81,6 +89,13 @@ export const InstallBanner = () => {
               size="md"
               startContent={<GithubIcon />}
               variant="bordered"
+              onClick={() => {
+                trackEvent("InstallBanner - Github", {
+                  action: "press",
+                  category: "landing-page",
+                  data: "https://github.com/nextui-org/nextui",
+                });
+              }}
             >
               Github
             </Button>

apps/docs/components/marketing/support.tsx

@@ -12,6 +12,7 @@ import {OpenCollectiveIcon, PatreonIcon, HeartBoldIcon, PlusLinearIcon} from "@/
 import {Sponsor, SPONSOR_TIERS, SPONSOR_COLORS, getTier} from "@/libs/docs/sponsors";
 import {SonarPulse} from "@/components/sonar-pulse";
 import {useIsMobile} from "@/hooks/use-media-query";
+import {trackEvent} from "@/utils/va";
 
 export interface SupportProps {
   sponsors: Sponsor[];
@@ -100,6 +101,14 @@ export const Support: FC<SupportProps> = ({sponsors = []}) => {
     window.open(href, "_blank");
   };
 
+  const handleBecomeSponsor = () => {
+    trackEvent("Support - Become a sponsor", {
+      action: "click",
+      category: "landing-page",
+    });
+
+    handleExternalLinkClick(supportAccounts[0].href);
+  };
   const renderSponsors = useMemo(() => {
     if (!sponsors.length) return null;
 
@@ -181,7 +190,7 @@ export const Support: FC<SupportProps> = ({sponsors = []}) => {
                     aria-label="Become a sponsor"
                     className="z-50 w-auto h-auto bg-gradient-to-b from-[#FF1CF7] to-[#7928CA]"
                     radius="full"
-                    onPress={() => handleExternalLinkClick(supportAccounts[0].href)}
+                    onPress={handleBecomeSponsor}
                   >
                     <PlusLinearIcon
                       className="flex items-center justify-center rounded-full text-white"

apps/docs/components/mdx-components.tsx

@@ -12,6 +12,7 @@ import * as DocsComponents from "@/components/docs/components";
 import * as BlogComponents from "@/components/blog/components";
 import {Codeblock} from "@/components/docs/components";
 import {VirtualAnchor, virtualAnchorEncode} from "@/components";
+import {trackEvent} from "@/utils/va";
 
 const Table: React.FC<{children?: React.ReactNode}> = ({children}) => {
   return (
@@ -144,6 +145,13 @@ const Code = ({
         copyButton: "text-lg text-zinc-500 mr-2",
       }}
       codeString={codeString}
+      onCopy={() => {
+        trackEvent("MDXComponents - Copy", {
+          category: "docs",
+          action: "copyCode",
+          data: codeString,
+        });
+      }}
     >
       <Codeblock codeString={codeString} language={language} metastring={meta} />
     </Components.Snippet>
@@ -153,8 +161,21 @@ const Code = ({
 const Link = ({href, children}: {href?: string; children?: React.ReactNode}) => {
   const isExternal = href?.startsWith("http");
 
+  const handlePress = () => {
+    trackEvent("MDXComponents - Click", {
+      category: "docs",
+      action: "click",
+      data: href || "",
+    });
+  };
+
   return (
-    <Components.Link href={href} isExternal={isExternal} showAnchorIcon={isExternal}>
+    <Components.Link
+      href={href}
+      isExternal={isExternal}
+      showAnchorIcon={isExternal}
+      onPress={handlePress}
+    >
       {children}
     </Components.Link>
   );

apps/docs/components/navbar.tsx

@@ -30,6 +30,7 @@ import {useEffect} from "react";
 import {usePress} from "@react-aria/interactions";
 import {useFocusRing} from "@react-aria/focus";
 
+import {currentVersion} from "@/utils/version";
 import {siteConfig} from "@/config/site";
 import {Route} from "@/libs/docs/page";
 import {LargeLogo, SmallLogo, ThemeSwitch} from "@/components";
@@ -43,6 +44,7 @@ import {
 import {useIsMounted} from "@/hooks/use-is-mounted";
 import {DocsSidebar} from "@/components/docs/sidebar";
 import {useCmdkStore} from "@/components/cmdk";
+import {trackEvent} from "@/utils/va";
 
 export interface NavbarProps {
   routes: Route[];
@@ -73,8 +75,17 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
     setCommandKey(isAppleDevice() ? "command" : "ctrl");
   }, []);
 
+  const handleOpenCmdk = () => {
+    cmdkStore.onOpen();
+    trackEvent("Navbar - Search", {
+      name: "navbar - search",
+      action: "press",
+      category: "cmdk",
+    });
+  };
+
   const {pressProps} = usePress({
-    onPress: () => cmdkStore.onOpen(),
+    onPress: handleOpenCmdk,
   });
   const {focusProps, isFocusVisible} = useFocusRing();
 
@@ -100,7 +111,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
           strokeWidth={2}
         />
       }
-      onPress={() => cmdkStore.onOpen()}
+      onPress={handleOpenCmdk}
     >
       Quick Search...
     </Button>
@@ -120,6 +131,15 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
     }
   };
 
+  const handlePressNavbarItem = (name: string, url: string) => {
+    trackEvent("NavbarItem", {
+      name,
+      action: "press",
+      category: "navbar",
+      data: url,
+    });
+  };
+
   return (
     <NextUINavbar
       ref={ref}
@@ -137,6 +157,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
             aria-label="Home"
             className="flex justify-start items-center gap-2 tap-highlight-transparent transition-opacity active:opacity-50"
             href="/"
+            onClick={() => handlePressNavbarItem("Home", "/")}
           >
             <SmallLogo className="w-6 h-6 md:hidden" />
             <LargeLogo className="h-5 md:h-6" />
@@ -154,7 +175,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
                         size="sm"
                         variant="flat"
                       >
-                        v2.0.0
+                        v{currentVersion}
                       </Button>
                     </DropdownTrigger>
                   </motion.div>
@@ -166,7 +187,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
                 selectionMode="single"
                 onAction={handleVersionChange}
               >
-                <DropdownItem key="v2">v2.0.0</DropdownItem>
+                <DropdownItem key="v2">v{currentVersion}</DropdownItem>
                 <DropdownItem key="v1" endContent={<LinkIcon />}>
                   v1.0.0
                 </DropdownItem>
@@ -183,6 +204,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
               color="foreground"
               data-active={includes(docsPaths, pathname)}
               href="/docs/guide/introduction"
+              onClick={() => handlePressNavbarItem("Docs", "/docs/guide/introduction")}
             >
               Docs
             </NextLink>
@@ -193,6 +215,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
               color="foreground"
               data-active={includes(pathname, "components")}
               href="/docs/components/avatar"
+              onClick={() => handlePressNavbarItem("Components", "/docs/components/avatar")}
             >
               Components
             </NextLink>
@@ -203,6 +226,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
               color="foreground"
               data-active={includes(pathname, "blog")}
               href="/blog"
+              onClick={() => handlePressNavbarItem("Blog", "/blog")}
             >
               Blog
             </NextLink>
@@ -213,6 +237,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
               color="foreground"
               data-active={includes(pathname, "figma")}
               href="/figma"
+              onClick={() => handlePressNavbarItem("Figma", "/figma")}
             >
               Figma
             </NextLink>
@@ -222,10 +247,14 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
               as={NextLink}
               className="hover:bg-default-100 border-default-200/80 dark:border-default-100/80 transition-colors cursor-pointer"
               color="secondary"
-              href="/blog/nextui-v2"
+              href="/blog/v2.1.0"
               variant="dot"
+              onClick={() => handlePressNavbarItem("New components v2.1.0", "/blog/v2.1.0")}
             >
-              Introducing NextUI v2.0
+              New components v2.1.0&nbsp;
+              <span aria-label="party emoji" role="img">
+                🎉
+              </span>
             </Chip>
           </NavbarItem>
         </ul>
@@ -238,6 +267,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
             aria-label="Github"
             className="p-1"
             href="https://github.com/nextui-org/nextui"
+            onClick={() => handlePressNavbarItem("Github", "https://github.com/nextui-org/nextui")}
           >
             <GithubIcon className="text-default-600 dark:text-default-500" />
           </Link>
@@ -269,13 +299,31 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
 
       <NavbarContent className="hidden sm:flex basis-1/5 sm:basis-full" justify="end">
         <NavbarItem className="hidden sm:flex">
-          <Link isExternal aria-label="Twitter" className="p-1" href={siteConfig.links.twitter}>
+          <Link
+            isExternal
+            aria-label="Twitter"
+            className="p-1"
+            href={siteConfig.links.twitter}
+            onPress={() => handlePressNavbarItem("Twitter", siteConfig.links.twitter)}
+          >
             <TwitterIcon className="text-default-600 dark:text-default-500" />
           </Link>
-          <Link isExternal aria-label="Discord" className="p-1" href={siteConfig.links.discord}>
+          <Link
+            isExternal
+            aria-label="Discord"
+            className="p-1"
+            href={siteConfig.links.discord}
+            onPress={() => handlePressNavbarItem("Discord", siteConfig.links.discord)}
+          >
             <DiscordIcon className="text-default-600 dark:text-default-500" />
           </Link>
-          <Link isExternal aria-label="Github" className="p-1" href={siteConfig.links.github}>
+          <Link
+            isExternal
+            aria-label="Github"
+            className="p-1"
+            href={siteConfig.links.github}
+            onPress={() => handlePressNavbarItem("Github", siteConfig.links.github)}
+          >
             <GithubIcon className="text-default-600 dark:text-default-500" />
           </Link>
           <ThemeSwitch />
@@ -291,6 +339,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
               <HeartFilledIcon className="text-danger group-data-[hover=true]:animate-heartbeat" />
             }
             variant="flat"
+            onPress={() => handlePressNavbarItem("Sponsor", siteConfig.links.sponsor)}
           >
             Sponsor
           </Button>

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

@@ -1,16 +1,28 @@
 import React from "react";
 import {usePathname} from "next/navigation";
-import {Tooltip, Link, Button} from "@nextui-org/react";
+import {Tooltip, Button} from "@nextui-org/react";
 import {capitalize, last} from "lodash";
 
 import {BugIcon} from "@/components/icons";
 import {ISSUE_REPORT_URL} from "@/libs/github/constants";
+import {trackEvent} from "@/utils/va";
 
 export const BugReportButton = () => {
   const pathname = usePathname();
 
   const componentTitle = capitalize(last(pathname?.split("/")));
 
+  const handlePress = () => {
+    trackEvent("BugReportButton - Sandpack", {
+      name: "sandpack - bug report",
+      action: "press",
+      category: "docs",
+      data: `${ISSUE_REPORT_URL}${componentTitle}`,
+    });
+
+    window.open(`${ISSUE_REPORT_URL}${componentTitle}`, "_blank");
+  };
+
   return (
     <Tooltip
       className="text-xs px-2"
@@ -19,15 +31,7 @@ export const BugReportButton = () => {
       placement="top"
       radius="md"
     >
-      <Button
-        isExternal
-        isIconOnly
-        as={Link}
-        href={`${ISSUE_REPORT_URL}${componentTitle}`}
-        size="sm"
-        title="Report a bug"
-        variant="light"
-      >
+      <Button isIconOnly size="sm" title="Report a bug" variant="light" onPress={handlePress}>
         <BugIcon className="text-white dark:text-zinc-500" height={16} width={16} />
       </Button>
     </Tooltip>

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

@@ -1,10 +1,14 @@
 import React from "react";
 import {UnstyledOpenInCodeSandboxButton} from "@codesandbox/sandpack-react";
 import {Tooltip, Button} from "@nextui-org/react";
+import {useSandpack} from "@codesandbox/sandpack-react";
 
 import {CodeSandboxIcon} from "@/components/icons";
+import {trackEvent} from "@/utils/va";
 
 export const CodeSandboxButton = () => {
+  const {sandpack} = useSandpack();
+
   return (
     <Tooltip
       className="text-xs px-2"
@@ -13,7 +17,20 @@ export const CodeSandboxButton = () => {
       placement="top"
       radius="md"
     >
-      <Button isIconOnly as="span" size="sm" title="Open in CodeSandbox" variant="light">
+      <Button
+        isIconOnly
+        as="span"
+        size="sm"
+        title="Open in CodeSandbox"
+        variant="light"
+        onPress={() => {
+          trackEvent("CodeSandboxButton - Sandpack", {
+            action: "press",
+            category: "docs",
+            data: sandpack.files[sandpack.activeFile],
+          });
+        }}
+      >
         <UnstyledOpenInCodeSandboxButton
           style={{
             width: "100%",

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

@@ -3,6 +3,7 @@ import {useSandpack} from "@codesandbox/sandpack-react";
 import {Tooltip, Button} from "@nextui-org/react";
 import {useClipboard} from "@nextui-org/use-clipboard";
 
+import {trackEvent} from "@/utils/va";
 import {CopyLinearIcon} from "@/components/icons";
 
 export const CopyButton = () => {
@@ -14,6 +15,13 @@ export const CopyButton = () => {
     const code = sandpack.files[sandpack.activeFile].code;
 
     copy(code);
+
+    trackEvent("CopyButton - Sandpack", {
+      name: "sandpack - copy code",
+      action: "press",
+      category: "docs",
+      data: sandpack.activeFile,
+    });
   };
 
   return (

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

@@ -3,6 +3,7 @@ import {Tabs, Tab} from "@nextui-org/react";
 import {SandpackPredefinedTemplate} from "@codesandbox/sandpack-react";
 
 import {TypescriptIcon, JavascriptIcon} from "@/components/icons";
+import {trackEvent} from "@/utils/va";
 
 interface Props {
   template: SandpackPredefinedTemplate;
@@ -20,6 +21,12 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({template, onC
     setSelectedTemplate(newTemplate);
 
     setTimeout(() => {
+      trackEvent("LanguageSelector - Selection", {
+        name: "template",
+        action: "tabChange",
+        category: "docs",
+        data: newTemplate ?? "",
+      });
       onChange?.(newTemplate);
     }, 250);
   }, [template, onChange]);

apps/docs/components/sandpack/sandpack.tsx

@@ -26,6 +26,7 @@ export const Sandpack: FC<SandpackProps> = ({
   files: filesProp,
   template,
   highlightedLines,
+  typescriptStrict = false,
   showPreview = false,
   showEditor = true,
   defaultExpanded = false,
@@ -41,6 +42,7 @@ export const Sandpack: FC<SandpackProps> = ({
     useSandpack({
       files: filesProp,
       template,
+      typescriptStrict,
       highlightedLines,
     });
 

apps/docs/components/sandpack/theme.ts

@@ -30,8 +30,7 @@ export const nextuiTheme: SandpackTheme = {
   },
   font: {
     body: "Inter var",
-    mono:
-      'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
     size: "14px",
     lineHeight: "1.5rem",
   },

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

@@ -10,6 +10,7 @@ import {useLocalStorage} from "@/hooks/use-local-storage";
 
 export interface UseSandpackProps {
   files?: SandpackFiles;
+  typescriptStrict?: boolean;
   template?: SandpackPredefinedTemplate;
   highlightedLines?: HighlightedLines;
 }
@@ -19,6 +20,7 @@ const importAllReact = 'import * as React from "react";';
 
 export const useSandpack = ({
   files = {},
+  typescriptStrict = false,
   template = "vite-react",
   highlightedLines,
 }: UseSandpackProps) => {
@@ -57,6 +59,12 @@ export const useSandpack = ({
     if (key.includes("App") && !key.includes(mimeType)) {
       return acc;
     }
+    if (typescriptStrict && currentTemplate === "vite-react-ts" && key.includes(".js")) {
+      return acc;
+    }
+    if (currentTemplate === "vite-react" && key.includes(".ts")) {
+      return acc;
+    }
     // @ts-ignore
     acc[key] = files[key];
 
@@ -76,6 +84,11 @@ export const useSandpack = ({
       const aName = getFileName(a);
       const bName = getFileName(b);
 
+      // if bName includes "App" should be first
+      if (bName.includes("App")) {
+        return 1;
+      }
+
       if (aFile?.includes(bName)) {
         return -1;
       }
@@ -90,7 +103,7 @@ export const useSandpack = ({
 
       // Check if the file content includes 'React' import statements, if not, add it
       if (!fileContent.includes(importReact) && !fileContent.includes(importAllReact)) {
-        fileContent = `${importReact}\n${fileContent}\n`;
+        fileContent = `${importReact}\n\n${fileContent}\n`;
       }
 
       // Check if file content includes any other dependencies, if yes, add it to dependencies

apps/docs/components/theme-switch.tsx

@@ -8,6 +8,7 @@ import {clsx} from "@nextui-org/shared-utils";
 import {useIsSSR} from "@react-aria/ssr";
 
 import {SunFilledIcon, MoonFilledIcon} from "@/components/icons";
+import {trackEvent} from "@/utils/va";
 
 export interface ThemeSwitchProps {
   className?: string;
@@ -20,6 +21,12 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
 
   const onChange = () => {
     theme === "light" ? setTheme("dark") : setTheme("light");
+
+    trackEvent("ThemeChange", {
+      action: "click",
+      category: "theme",
+      data: theme === "light" ? "dark" : "light",
+    });
   };
 
   const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} = useSwitch({

apps/docs/components/vercel-callout.tsx

@@ -1,7 +1,10 @@
+"use client";
+
 import React from "react";
 import {Link} from "@nextui-org/react";
 
 import {VercelIcon} from "@/components/icons";
+import {trackEvent} from "@/utils/va";
 
 export const VercelCallout: React.FC<unknown> = () => {
   return (
@@ -9,6 +12,13 @@ export const VercelCallout: React.FC<unknown> = () => {
       isExternal
       className="flex justify-end items-center gap-2 text-foreground"
       href="https://www.vercel.com?utm_source=nextui&utm_marketing=oss"
+      onClick={() => {
+        trackEvent("VercelCallout", {
+          name: "vercel callout",
+          action: "click",
+          category: "footer",
+        });
+      }}
     >
       <p className="font-normal">Deployed on</p>
       <VercelIcon className="text-black dark:text-white" height={18} />

apps/docs/config/fonts.ts

@@ -1,6 +1,6 @@
-import {DM_Sans} from "next/font/google";
+import {Inter} from "next/font/google";
 
-export const fontSans = DM_Sans({
+export const fontSans = Inter({
   variable: "--font-sans",
   adjustFontFallback: true,
   display: "optional",

apps/docs/config/routes.json

@@ -164,8 +164,7 @@
           "key": "chip",
           "title": "Chip",
           "keywords": "chip, tag, label, small actionable entity",
-          "path": "/docs/components/chip.mdx",
-          "newPost": true
+          "path": "/docs/components/chip.mdx"
         },
         {
           "key": "circular-progress",
@@ -183,8 +182,7 @@
           "key": "divider",
           "title": "Divider",
           "keywords": "divider, boundary, separator, section divider",
-          "path": "/docs/components/divider.mdx",
-          "newPost": true
+          "path": "/docs/components/divider.mdx"
         },
         {
           "key": "dropdown",
@@ -208,8 +206,7 @@
           "key": "kbd",
           "title": "Kbd",
           "keywords": "keyboard input, shortcut, keys, user input display",
-          "path": "/docs/components/kbd.mdx",
-          "newPost": true
+          "path": "/docs/components/kbd.mdx"
         },
         {
           "key": "link",
@@ -217,6 +214,13 @@
           "keywords": "link, navigation, href, web page connection",
           "path": "/docs/components/link.mdx"
         },
+        {
+          "key": "listbox",
+          "title": "Listbox",
+          "keywords": "listbox, selection, option list, multiple choice",
+          "path": "/docs/components/listbox.mdx",
+          "newPost": true
+        },
         {
           "key": "modal",
           "title": "Modal",
@@ -253,18 +257,30 @@
           "keywords": "radio group, selection set, option selection, exclusive choices",
           "path": "/docs/components/radio-group.mdx"
         },
+        {
+          "key": "select",
+          "title": "Select",
+          "keywords": "select, selection, option list, multiple choice",
+          "path": "/docs/components/select.mdx",
+          "newPost": true
+        },
         {
           "key": "skeleton",
           "title": "Skeleton",
           "keywords": "skeleton, loading state, placeholder, content preview",
-          "path": "/docs/components/skeleton.mdx",
-          "newPost": true
+          "path": "/docs/components/skeleton.mdx"
         },
         {
           "key": "snippet",
           "title": "Snippet",
           "keywords": "snippet, code block, programming, code example",
-          "path": "/docs/components/snippet.mdx",
+          "path": "/docs/components/snippet.mdx"
+        },
+        {
+          "key": "scroll-shadow",
+          "title": "Scroll Shadow",
+          "keywords": "scroll shadow, scroll indicator, scroll bar, scroll position",
+          "path": "/docs/components/scroll-shadow.mdx",
           "newPost": true
         },
         {
@@ -295,8 +311,7 @@
           "key": "tabs",
           "title": "Tabs",
           "keywords": "tabs, section navigation, categorized content, tabbed interface",
-          "path": "/docs/components/tabs.mdx",
-          "newPost": true
+          "path": "/docs/components/tabs.mdx"
         },
         {
           "key": "textarea",

apps/docs/content/blog/nextui-v2.mdx

@@ -175,7 +175,7 @@ We've added a new function, `extendVariants`, that allows you to customize any N
   height={350}
 />
 
-You can create or override the component `variants`, `defaultVariants` and `componentVariants`.
+You can create or override the component `variants`, `defaultVariants` and `compoundVariants`.
 
 > Check out the [Custom Variants](/docs/customization/custom-variants) documentation for more information.
 
@@ -310,3 +310,16 @@ file helps streamline the process of transforming design ideas into functioning
 To start using **NextUI v2.0**, head over to our [installation guide](/docs/guide/installation).
 
 We can't wait to see the amazing things you'll build with **NextUI v2.0**!
+
+---
+
+## Community
+
+We're excited to see the community adopt NextUI, raise issues, and provide feedback.
+Whether it's a feature request, bug report, or a project to showcase, please get involved!
+
+<Community />
+
+## Contributing
+
+PR's on NextUI are always welcome, please see our [contribution guidelines](https://github.com/nextui-org/nextui/blob/main/CONTRIBUTING.MD) to learn how you can contribute to this project.

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

@@ -0,0 +1,167 @@
+---
+title: "New components v2.1.0 🎉"
+description: "NextUI v2.1.0 is here with new components, Select, Listbox and ScrollShadow."
+date: "2023-08-21"
+image: "/blog/v2.1.0.jpg"
+tags: ["nextui", "select", "listbox", "scroll-shadow", "multi-select"]
+author:
+  name: "Junior Garcia"
+  username: "@jrgarciadev"
+  link: "https://twitter.com/jrgarciadev"
+  avatar: "/avatars/junior-garcia.jpeg"
+---
+
+import {selectContent} from "@/content/components/select";
+import {listboxContent} from "@/content/components/listbox";
+import {scrollShadowContent} from "@/content/components/scroll-shadow";
+
+
+<img
+  src="/blog/v2.1.0.jpg"
+  width={700}
+  height={350}
+  alt="NextUI v2"
+  className="w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
+/>
+
+We are thrilled to announce the latest update to NextUI, version **2.1.0**! This release introduces some game-changing
+additions that many of you have eagerly been waiting for.
+
+First on the list is the highly-anticipated **Select** component. Fully customizable and beautifully designed, supports both single and
+multi-select modes and is accessible out of the box.
+
+But that's not all. We're also rolling out two more incredible components **Listbox** and **ScrollShadow**. The new
+**Listbox** allows you to make list manipulations more efficient and visually appealing. Meanwhile, the
+**ScrollShadow** component adds an elegant shadow effect to scrollable areas, enhancing the UI aesthetics while
+also improving usability.
+
+## Select
+
+Creating a select component that is both accessible and customizable is a challenging task. We've spent a lot of time
+researching and testing different approaches to come up with a solution that works for everyone. The result is a
+component that is easy to use, fully accessible, and highly customizable.
+
+The new **Select** component includes:
+
+- Support for selecting a single option.
+- Support for selecting multiple options.
+- Support for disabled options.
+- Support for sections.
+- Labeling support for accessibility.
+- Exposed to assistive technology as a button with a listbox popup using ARIA (combined with [Listbox](/docs/components/listbox)).
+- Support for description and error message help text linked to the input via ARIA.
+- Support for mouse, touch, and keyboard interactions.
+- Tab stop focus management.
+- Asynchronous options loading.
+- Keyboard support for opening the listbox using the arrow keys, including automatically focusing the first or last item accordingly.
+- Typeahead to allow selecting options by typing text, even without opening the listbox.
+- Browser autofill integration via a hidden native `<select>` element.
+- Support for mobile form navigation via software keyboard.
+- Mobile screen reader listbox dismissal support.
+- And much more...
+
+### Single Select
+
+The single select component is used to select a single option from a list of options. It is a combination of a button
+and a listbox. The button displays the currently selected option and the listbox displays the available options.
+
+<CodeDemo title="Usage" files={selectContent.usage} />
+
+### Multiple Select
+
+The multiple select component can be used to select multiple options from a list of options.
+
+You only need to pass the `selectionMode="multiple"` prop to the `Select` component.
+
+<CodeDemo title="Multiple Selection" files={selectContent.multiple} />
+
+### Multiple Variants
+
+The select component comes with multiple variants.
+
+<CodeDemo title="Variants" files={selectContent.variants} />
+
+
+### Chips Support
+
+The select component is flexible and allows you to render any component as an option and as a selected option.
+
+<CodeDemo title="Multiple Selection with Chips" files={selectContent.multipleWithChips} />
+
+
+### Customizable
+
+The select component is highly customizable, you can customize the selected option, the options, the listbox,
+the popover and the scrollable area.
+
+<CodeDemo title="Custom Styles" files={selectContent.customStyles} />
+
+
+Go to the [Select](/docs/components/select) component page to learn more about sizes, colors, and more.
+
+
+## Listbox
+
+The listbox component allows you to make list manipulations more efficient and visually appealing.
+
+The new **Listbox** component includes:
+
+- Support for single, multiple, or no selection.
+- Exposed to assistive technology as a `listbox` using ARIA.
+- Support for disabled items.
+- Support for sections.
+- Labeling support for accessibility.
+- Support for mouse, touch, and keyboard interactions.
+- Tab stop focus management.
+- Keyboard navigation support including arrow keys, home/end, page up/down, select all, and clear.
+- Automatic scrolling support during keyboard navigation.
+- Typeahead to allow focusing options by typing text.
+
+
+### Usage
+
+<CodeDemo title="Usage" files={listboxContent.usage} />
+
+### Custom Styles
+
+The Listbox components offers multiple customization options. 
+
+<CodeDemo title="Custom Styles" files={listboxContent.customStyles} />
+
+> **Note**: In the above example, we've utilized the [Boxicons](https://boxicons.com/) icons collection.
+
+Go to the [Listbox](/docs/components/listbox) component page to learn more about it.
+
+
+## ScrollShadow
+
+The ScrollShadow component gives a nice shadow effect to scrollable areas. These shadows are handled by using
+the CSS `mask-image` property, which makes the shadows adapt to the background color.
+
+### Usage
+
+<CodeDemo title="Usage" files={scrollShadowContent.usage} />
+
+You can hide the scrollbars, customize the shadows size, change the orientation, and more.
+
+Go to the [ScrollShadow](/docs/components/scroll-shadow) component page to learn more about it.
+
+
+<Spacer y={6}/>
+
+We hope you enjoy these new components and the new features. We're excited to see what you build with them!
+
+Thanks for reading and happy coding! 🚀
+
+---
+
+## Community
+
+We're excited to see the community adopt NextUI, raise issues, and provide feedback.
+Whether it's a feature request, bug report, or a project to showcase, please get involved!
+
+<Community />
+
+## Contributing
+
+PR's on NextUI are always welcome, please see our [contribution guidelines](https://github.com/nextui-org/nextui/blob/main/CONTRIBUTING.MD) to learn how you can contribute to this project.

apps/docs/content/components/button/custom-impl.ts

@@ -1,13 +1,11 @@
 const App = `import {forwardRef} from "react";
+import {useButton, Ripple, Spinner} from "@nextui-org/react";
 
-import {useButton, Drip, Spinner} from "@nextui-org/react";
 
 const MyButton = forwardRef((props, ref) => {
   const {
     domRef,
     children,
-    classNames,
-    drips,
     spinnerSize,
     spinner = <Spinner color="current" size={spinnerSize} />,
     spinnerPlacement,
@@ -16,19 +14,22 @@ const MyButton = forwardRef((props, ref) => {
     isLoading,
     disableRipple,
     getButtonProps,
+    getRippleProps,
   } = useButton({
     ref,
     ...props,
   });
 
+  const {ripples} = getRippleProps();
+
   return (
-    <button ref={domRef} className={classNames} {...getButtonProps()}>
+    <button ref={domRef} {...getButtonProps()}>
       {startContent}
       {isLoading && spinnerPlacement === "start" && spinner}
       {children}
       {isLoading && spinnerPlacement === "end" && spinner}
       {endContent}
-      {!disableRipple && <Drip drips={drips} />}
+      {!disableRipple && <Ripple ripples={ripples} />}
     </button>
   );
 });
@@ -38,8 +39,7 @@ MyButton.displayName = "MyButton";
 export default MyButton;`;
 
 const AppTs = `import {forwardRef} from "react";
-
-import {useButton, Drip, Spinner, ButtonProps as BaseButtonProps} from "@nextui-org/react";
+import {useButton, Ripple, Spinner, ButtonProps as BaseButtonProps} from "@nextui-org/react";
 
 export interface ButtonProps extends BaseButtonProps {}
 
@@ -47,8 +47,6 @@ const MyButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     domRef,
     children,
-    classNames,
-    drips,
     spinnerSize,
     spinner = <Spinner color="current" size={spinnerSize} />,
     spinnerPlacement,
@@ -57,19 +55,22 @@ const MyButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     isLoading,
     disableRipple,
     getButtonProps,
+    getRippleProps,
   } = useButton({
     ref,
     ...props,
   });
 
+  const {ripples} = getRippleProps();
+
   return (
-    <button ref={domRef} className={classNames} {...getButtonProps()}>
+    <button ref={domRef} {...getButtonProps()}>
       {startContent}
       {isLoading && spinnerPlacement === "start" && spinner}
       {children}
       {isLoading && spinnerPlacement === "end" && spinner}
       {endContent}
-      {!disableRipple && <Drip drips={drips} />}
+      {!disableRipple && <Ripple ripples={ripples} />}
     </button>
   );
 });

apps/docs/content/components/card/blurred.ts

@@ -140,7 +140,7 @@ const ShuffleIcon = `export const ShuffleIcon = ({size = 24, width, height, ...p
   </svg>
 );`;
 
-const App = `import {Card, CardFooter, Image, Button, Progress} from "@nextui-org/react";
+const App = `import {Card, CardBody, Image, Button, Progress} from "@nextui-org/react";
 import {HeartIcon} from "./HeartIcon";
 import {PauseCircleIcon} from "./PauseCircleIcon";
 import {NextIcon} from "./NextIcon";

apps/docs/content/components/card/composition.ts

@@ -1,4 +1,4 @@
-const App = `import {Card, CardHeader, CardBody, Avatar, Button} from "@nextui-org/react";
+const App = `import {Card, CardHeader, CardBody, CardFooter, Avatar, Button} from "@nextui-org/react";
 
 export default function App() {
   const [isFollowed, setIsFollowed] = React.useState(false);

apps/docs/content/components/card/cover-image.ts

@@ -73,7 +73,7 @@ export default function App() {
       />
       <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">
-          <img
+          <Image
             alt="Breathing app icon"
             className="rounded-full w-10 h-11 bg-black"
             src="/images/breathing-app-icon.jpeg"

apps/docs/content/components/checkbox-group/index.ts

@@ -4,6 +4,7 @@ import horizontal from "./horizontal";
 import controlled from "./controlled";
 import customStyles from "./custom-styles";
 import customImplementation from "./custom-implementation";
+import invalid from "./invalid";
 
 export const checkboxGroupContent = {
   usage,
@@ -11,5 +12,6 @@ export const checkboxGroupContent = {
   horizontal,
   controlled,
   customStyles,
+  invalid,
   customImplementation,
 };

apps/docs/content/components/checkbox-group/invalid.ts

@@ -0,0 +1,31 @@
+const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  const [isInvalid, setIsInvalid] = React.useState(true);
+
+  return (
+    <CheckboxGroup
+      isRequired
+      description="Select the cities you want to visit"
+      isInvalid={isInvalid}
+      label="Select cities"
+      onValueChange={(value) => {
+        setIsInvalid(value.length < 1);
+      }}
+    >
+      <Checkbox value="buenos-aires">Buenos Aires</Checkbox>
+      <Checkbox value="sydney">Sydney</Checkbox>
+      <Checkbox value="san-francisco">San Francisco</Checkbox>
+      <Checkbox value="london">London</Checkbox>
+      <Checkbox value="tokyo">Tokyo</Checkbox>
+    </CheckboxGroup>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/dropdown/custom-items-styles.ts

@@ -49,6 +49,7 @@ export default function App() {
             "data-[hover=true]:text-foreground",
             "data-[hover=true]:bg-default-100",
             "dark:data-[hover=true]:bg-default-50",
+            "data-[selectable=true]:focus:bg-default-50",
             "data-[pressed=true]:opacity-70",
             "data-[focus-visible=true]:ring-default-500",
           ],

apps/docs/content/components/dropdown/custom-trigger.ts

@@ -1,4 +1,4 @@
-const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, Avatar, User} from "@nextui-org/react";
+const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Avatar, User} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/dropdown/description.ts

@@ -138,6 +138,7 @@ export default function App() {
         <DropdownItem
           key="edit"
           shortcut="⌘⇧E"
+          showDivider
           description="Allows you to edit the file"
           startContent={<EditDocumentIcon className={iconClasses} />}
         >
@@ -145,7 +146,6 @@ export default function App() {
         </DropdownItem>
         <DropdownItem
           key="delete"
-          showDivider
           className="text-danger"
           color="danger"
           shortcut="⌘⇧D"

apps/docs/content/components/dropdown/icons.ts

@@ -142,7 +142,6 @@ export default function App() {
         </DropdownItem>
         <DropdownItem
           key="delete"
-          showDivider
           className="text-danger"
           color="danger"
           shortcut="⌘⇧D"

apps/docs/content/components/dropdown/multiple-selection.ts

@@ -19,7 +19,7 @@ export default function App() {
         </Button>
       </DropdownTrigger>
       <DropdownMenu 
-        aria-label="Single selection actions"
+        aria-label="Multiple selection example"
         variant="flat"
         closeOnSelect={false}
         disallowEmptySelection

apps/docs/content/components/dropdown/sections.ts

@@ -100,7 +100,7 @@ const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => (
   </svg>
 );`;
 
-const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, cn} from "@nextui-org/react";
+const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownSection, DropdownItem, Button, cn} from "@nextui-org/react";
 import {AddNoteIcon} from "./AddNoteIcon.jsx";
 import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx";
 import {EditDocumentIcon} from "./EditDocumentIcon.jsx";

apps/docs/content/components/dropdown/shortcut.ts

@@ -14,7 +14,7 @@ export default function App() {
         <DropdownItem key="new" shortcut="⌘N">New file</DropdownItem>
         <DropdownItem key="copy" shortcut="⌘C">Copy link</DropdownItem>
         <DropdownItem key="edit" shortcut="⌘⇧E">Edit file</DropdownItem>
-        <DropdownItem key="delete" showDivider shortcut="⌘⇧D" className="text-danger" color="danger">
+        <DropdownItem key="delete" shortcut="⌘⇧D" className="text-danger" color="danger">
           Delete file
         </DropdownItem>
       </DropdownMenu>

apps/docs/content/components/dropdown/single-selection.ts

@@ -19,7 +19,7 @@ export default function App() {
         </Button>
       </DropdownTrigger>
       <DropdownMenu 
-        aria-label="Single selection actions"
+        aria-label="Single selection example"
         variant="flat"
         disallowEmptySelection
         selectionMode="single"

apps/docs/content/components/input/error-message.ts

@@ -7,7 +7,7 @@ export default function App() {
       label="Email"
       variant="bordered"
       defaultValue="junior2nextui.org"
-      validationState="invalid"
+      isInvalid={true}
       errorMessage="Please enter a valid email"
       className="max-w-xs"
     />

apps/docs/content/components/input/index.ts

@@ -6,7 +6,7 @@ import sizes from "./sizes";
 import colors from "./colors";
 import variants from "./variants";
 import radius from "./radius";
-import labelPositions from "./label-positions";
+import labelPlacements from "./label-placements";
 import description from "./description";
 import password from "./password";
 import clearButton from "./clear-button";
@@ -26,7 +26,7 @@ export const inputContent = {
   colors,
   variants,
   radius,
-  labelPositions,
+  labelPlacements,
   description,
   password,
   clearButton,

apps/docs/content/components/input/label-placements.ts

@@ -1,7 +1,7 @@
 const App = `import {Input} from "@nextui-org/react";
 
 export default function App() {
-  const positions = [
+  const placements = [
     "inside",
     "outside",
     "outside-left",
@@ -12,13 +12,13 @@ export default function App() {
       <div className="flex flex-col gap-2">
         <h3 className="text-default-500 text-small">Without placeholder</h3>
         <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
-          {positions.map((position) => (
+          {placements.map((placement) => (
             <Input
-              key={position}
+              key={placement}
               type="email"
               label="Email"
-              labelPlacement={position}
-              description={position}
+              labelPlacement={placement}
+              description={placement}
             />
           ))}
         </div>
@@ -26,14 +26,14 @@ export default function App() {
       <div className="flex flex-col gap-2">
         <h3 className="text-default-500 text-small">With placeholder</h3>
         <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
-          {positions.map((position) => (
+          {placements.map((placement) => (
             <Input
-              key={position}
+              key={placement}
               type="email"
               label="Email"
-              labelPlacement={position}
+              labelPlacement={placement}
               placeholder="Enter your email"
-              description={position}
+              description={placement}
             />
           ))}
         </div>

apps/docs/content/components/input/regex-validation.ts

@@ -5,10 +5,10 @@ export default function App() {
 
   const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i);
 
-  const validationState = React.useMemo(() => {
-    if (value === "") return undefined;
+  const isInvalid = React.useMemo(() => {
+    if (value === "") return false;
 
-    return validateEmail(value) ? "valid" : "invalid";
+    return validateEmail(value) ? false : true;
   }, [value]);
 
   return (
@@ -17,9 +17,9 @@ export default function App() {
       type="email"
       label="Email"
       variant="bordered"
-      color={validationState === "invalid" ? "danger" : "success"}
-      errorMessage={validationState === "invalid" && "Please enter a valid email"}
-      validationState={validationState}
+      isInvalid={isInvalid}
+      color={isInvalid ? "danger" : "success"}
+      errorMessage={isInvalid && "Please enter a valid email"}
       onValueChange={setValue}
       className="max-w-xs"
     />

apps/docs/content/components/input/start-end-content.ts

@@ -1,4 +1,4 @@
-const MailFilledIcon = `export const MailFilledIcon = (props) => (
+const MailIcon = `export const MailIcon = (props) => (
   <svg
     aria-hidden="true"
     fill="none"
@@ -17,7 +17,7 @@ const MailFilledIcon = `export const MailFilledIcon = (props) => (
 );`;
 
 const App = `import {Input} from "@nextui-org/react";
-import {MailFilledIcon} from './MailFilledIcon';
+import {MailIcon} from './MailIcon';
 
 export default function App() {
   return (
@@ -29,7 +29,7 @@ export default function App() {
           placeholder="you@example.com"
           labelPlacement="outside"
           startContent={
-            <MailFilledIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+            <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
           }
         />
         <Input
@@ -62,7 +62,7 @@ export default function App() {
           placeholder="you@example.com"
           labelPlacement="outside"
           endContent={
-            <MailFilledIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+            <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
           }
         />
         <Input
@@ -94,7 +94,7 @@ export default function App() {
           placeholder="nextui"
           labelPlacement="outside"
           startContent={
-            <MailFilledIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
+            <MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
           }
           endContent={
             <div className="pointer-events-none flex items-center">
@@ -152,7 +152,7 @@ export default function App() {
 
 const react = {
   "/App.jsx": App,
-  "/MailFilledIcon.jsx": MailFilledIcon,
+  "/MailIcon.jsx": MailIcon,
 };
 
 export default {

apps/docs/content/components/input/variants.ts

@@ -1,7 +1,6 @@
 const App = `import {Input} from "@nextui-org/react";
 
 export default function App() {
-
   const variants = ["flat", "bordered", "underlined", "faded"];
 
   return (

apps/docs/content/components/listbox/custom-styles.ts

@@ -0,0 +1,284 @@
+const BugIcon = `export const BugIcon = (props) => (
+  <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M16.895,6.519l2.813-2.812l-1.414-1.414l-2.846,2.846c-0.233-0.166-0.473-0.321-0.723-0.454 c-1.723-0.91-3.726-0.911-5.45,0c-0.25,0.132-0.488,0.287-0.722,0.453L5.707,2.293L4.293,3.707l2.813,2.812 C6.53,7.242,6.08,8.079,5.756,9H2v2h2.307C4.242,11.495,4.2,11.997,4.2,12.5c0,0.507,0.042,1.013,0.107,1.511H2v2h2.753 c0.013,0.039,0.021,0.08,0.034,0.118c0.188,0.555,0.421,1.093,0.695,1.6c0.044,0.081,0.095,0.155,0.141,0.234l-2.33,2.33 l1.414,1.414l2.11-2.111c0.235,0.254,0.478,0.498,0.736,0.716c0.418,0.354,0.867,0.657,1.332,0.903 c0.479,0.253,0.982,0.449,1.496,0.58C10.911,21.931,11.455,22,12,22s1.089-0.069,1.618-0.204c0.514-0.131,1.017-0.327,1.496-0.58 c0.465-0.246,0.914-0.55,1.333-0.904c0.258-0.218,0.5-0.462,0.734-0.716l2.111,2.111l1.414-1.414l-2.33-2.33 c0.047-0.08,0.098-0.155,0.142-0.236c0.273-0.505,0.507-1.043,0.694-1.599c0.013-0.039,0.021-0.079,0.034-0.118H22v-2h-2.308 c0.065-0.499,0.107-1.004,0.107-1.511c0-0.503-0.042-1.005-0.106-1.5H22V9h-3.756C17.92,8.079,17.47,7.242,16.895,6.519z M8.681,7.748c0.445-0.558,0.96-0.993,1.528-1.294c1.141-0.603,2.442-0.602,3.581,0c0.569,0.301,1.084,0.736,1.53,1.295 c0.299,0.373,0.54,0.8,0.753,1.251H7.927C8.141,8.549,8.381,8.121,8.681,7.748z M17.8,12.5c0,0.522-0.042,1.044-0.126,1.553 c-0.079,0.49-0.199,0.973-0.355,1.436c-0.151,0.449-0.34,0.882-0.559,1.288c-0.217,0.399-0.463,0.772-0.733,1.11 c-0.267,0.333-0.56,0.636-0.869,0.898c-0.31,0.261-0.639,0.484-0.979,0.664s-0.695,0.317-1.057,0.41 c-0.04,0.01-0.082,0.014-0.122,0.023V14h-2v5.881c-0.04-0.009-0.082-0.013-0.122-0.023c-0.361-0.093-0.717-0.23-1.057-0.41 s-0.669-0.403-0.978-0.664c-0.311-0.263-0.604-0.565-0.871-0.899c-0.27-0.337-0.516-0.71-0.731-1.108 c-0.22-0.407-0.408-0.84-0.56-1.289c-0.156-0.463-0.276-0.946-0.356-1.438C6.242,13.544,6.2,13.022,6.2,12.5 c0-0.505,0.041-1.009,0.119-1.5h11.361C17.759,11.491,17.8,11.995,17.8,12.5z"
+      fill="currentColor"
+    />
+  </svg>
+);
+`;
+
+const PullRequestIcon = `export const PullRequestIcon = (props) => (
+  <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M19.01 15.163V7.997C19.005 6.391 17.933 4 15 4V2l-4 3 4 3V6c1.829 0 2.001 1.539 2.01 2v7.163c-1.44.434-2.5 1.757-2.5 3.337 0 1.93 1.57 3.5 3.5 3.5s3.5-1.57 3.5-3.5c0-1.58-1.06-2.903-2.5-3.337zm-1 4.837c-.827 0-1.5-.673-1.5-1.5s.673-1.5 1.5-1.5 1.5.673 1.5 1.5-.673 1.5-1.5 1.5zM9.5 5.5C9.5 3.57 7.93 2 6 2S2.5 3.57 2.5 5.5c0 1.58 1.06 2.903 2.5 3.337v6.326c-1.44.434-2.5 1.757-2.5 3.337C2.5 20.43 4.07 22 6 22s3.5-1.57 3.5-3.5c0-1.58-1.06-2.903-2.5-3.337V8.837C8.44 8.403 9.5 7.08 9.5 5.5zm-5 0C4.5 4.673 5.173 4 6 4s1.5.673 1.5 1.5S6.827 7 6 7s-1.5-.673-1.5-1.5zm3 13c0 .827-.673 1.5-1.5 1.5s-1.5-.673-1.5-1.5S5.173 17 6 17s1.5.673 1.5 1.5z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const ChatIcon = `export const ChatIcon = (props) => (
+  <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M5 18v3.766l1.515-.909L11.277 18H16c1.103 0 2-.897 2-2V8c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h1zM4 8h12v8h-5.277L7 18.234V16H4V8z"
+      fill="currentColor"
+    />
+    <path
+      d="M20 2H8c-1.103 0-2 .897-2 2h12c1.103 0 2 .897 2 2v8c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const PlayCircleIcon = `export const PlayCircleIcon = (props) => (
+  <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"
+      fill="currentColor"
+    />
+    <path d="m9 17 8-5-8-5z" fill="currentColor" />
+  </svg>
+);`;
+
+const LayoutIcon = `export const LayoutIcon = (props) => (
+  <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M19 3H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zm0 2 .001 4H5V5h14zM5 11h8v8H5v-8zm10 8v-8h4.001l.001 8H15z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const TagIcon = `export const TagIcon = (props) => (
+  <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M11.707 2.293A.997.997 0 0 0 11 2H6a.997.997 0 0 0-.707.293l-3 3A.996.996 0 0 0 2 6v5c0 .266.105.52.293.707l10 10a.997.997 0 0 0 1.414 0l8-8a.999.999 0 0 0 0-1.414l-10-10zM13 19.586l-9-9V6.414L6.414 4h4.172l9 9L13 19.586z"
+      fill="currentColor"
+    />
+    <circle cx="8.353" cy="8.353" fill="currentColor" r="1.647" />
+  </svg>
+);`;
+
+const UsersIcon = `export const UsersIcon = (props) => (
+  <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M16.604 11.048a5.67 5.67 0 0 0 .751-3.44c-.179-1.784-1.175-3.361-2.803-4.44l-1.105 1.666c1.119.742 1.8 1.799 1.918 2.974a3.693 3.693 0 0 1-1.072 2.986l-1.192 1.192 1.618.475C18.951 13.701 19 17.957 19 18h2c0-1.789-.956-5.285-4.396-6.952z"
+      fill="currentColor"
+    />
+    <path
+      d="M9.5 12c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2zm1.5 7H8c-3.309 0-6 2.691-6 6v1h2v-1c0-2.206 1.794-4 4-4h3c2.206 0 4 1.794 4 4v1h2v-1c0-3.309-2.691-6-6-6z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const WatchersIcon = `export const WatchersIcons = (props) => (
+  <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="m21.977 13.783-2-9A1.002 1.002 0 0 0 19 4h-3v2h2.198l.961 4.326A4.467 4.467 0 0 0 17.5 10c-1.953 0-3.603 1.258-4.224 3h-2.553c-.621-1.742-2.271-3-4.224-3-.587 0-1.145.121-1.659.326L5.802 6H8V4H5a1 1 0 0 0-.976.783l-2 9 .047.011A4.552 4.552 0 0 0 2 14.5C2 16.981 4.019 19 6.5 19c2.31 0 4.197-1.756 4.449-4h2.102c.252 2.244 2.139 4 4.449 4 2.481 0 4.5-2.019 4.5-4.5 0-.242-.034-.475-.071-.706l.048-.011zM6.5 17C5.122 17 4 15.878 4 14.5S5.122 12 6.5 12 9 13.122 9 14.5 7.878 17 6.5 17zm11 0c-1.379 0-2.5-1.122-2.5-2.5s1.121-2.5 2.5-2.5 2.5 1.122 2.5 2.5-1.121 2.5-2.5 2.5z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const BookIcon = `export const BookIcon = (props) => (
+  <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M6 22h15v-2H6.012C5.55 19.988 5 19.805 5 19s.55-.988 1.012-1H21V4c0-1.103-.897-2-2-2H6c-1.206 0-3 .799-3 3v14c0 2.201 1.794 3 3 3zM5 8V5c0-.805.55-.988 1-1h13v12H5V8z"
+      fill="currentColor"
+    />
+    <path d="M8 6h9v2H8z" fill="currentColor" />
+  </svg>
+);`;
+
+const ChevronRightIcon = `export const ChevronRightIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="1.5"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path d="m9 18 6-6-6-6" />
+  </svg>
+);`;
+
+const IconWrapper = `import {cn} from "@nextui-org/react";
+
+const IconWrapper = ({children, className}) => (
+  <div className={cn(className, "flex items-center rounded-small justify-center w-7 h-7")}>
+    {children}
+  </div>
+);`;
+
+const ItemCounter = `const ItemCounter = ({number}) => (
+  <div className="flex items-center gap-1 text-default-400">
+    <span className="text-small">{number}</span>
+    <ChevronRightIcon className="text-xl" />
+  </div>
+);`;
+
+const App = `import {Listbox, ListboxItem} from "@nextui-org/react";
+import {IconWrapper} from "./IconWrapper";
+import {ItemCounter} from "./ItemCounter";
+import {BugIcon} from "./BugIcon";
+import {PullRequestIcon} from "./PullRequestIcon";
+import {ChatIcon} from "./ChatIcon";
+import {PlayCircleIcon} from "./PlayCircleIcon";
+import {LayoutIcon} from "./LayoutIcon";
+import {TagIcon} from "./TagIcon";
+import {UsersIcon} from "./UsersIcon";
+import {WatchersIcon} from "./WatchersIcon";
+import {BookIcon} from "./BookIcon";
+import {ChevronRightIcon} from "./ChevronRightIcon";
+
+export default function App() {
+  return (
+    <Listbox
+      aria-label="User Menu"
+      onAction={(key) => alert(key)}
+      className="p-0 gap-0 divide-y divide-default-300/50 dark:divide-default-100/80 bg-content1 max-w-[300px] overflow-visible shadow-small rounded-medium"
+      itemClasses={{
+        base: "px-3 first:rounded-t-medium last:rounded-b-medium rounded-none gap-3 h-12 data-[hover=true]:bg-default-100/80",
+      }}
+    >
+      <ListboxItem
+        key="issues"
+        endContent={<ItemCounter number={13} />}
+        startContent={
+          <IconWrapper className="bg-success/10 text-success">
+            <BugIcon className="text-lg " />
+          </IconWrapper>
+        }
+      >
+        Issues
+      </ListboxItem>
+      <ListboxItem
+        key="pull_requests"
+        endContent={<ItemCounter number={6} />}
+        startContent={
+          <IconWrapper className="bg-primary/10 text-primary">
+            <PullRequestIcon className="text-lg " />
+          </IconWrapper>
+        }
+      >
+        Pull Requests
+      </ListboxItem>
+      <ListboxItem
+        key="discussions"
+        endContent={<ItemCounter number={293} />}
+        startContent={
+          <IconWrapper className="bg-secondary/10 text-secondary">
+            <ChatIcon className="text-lg " />
+          </IconWrapper>
+        }
+      >
+        Discussions
+      </ListboxItem>
+      <ListboxItem
+        key="actions"
+        endContent={<ItemCounter number={2} />}
+        startContent={
+          <IconWrapper className="bg-warning/10 text-warning">
+            <PlayCircleIcon className="text-lg " />
+          </IconWrapper>
+        }
+      >
+        Actions
+      </ListboxItem>
+      <ListboxItem
+        key="projects"
+        endContent={<ItemCounter number={4} />}
+        startContent={
+          <IconWrapper className="bg-default/50 text-foreground">
+            <LayoutIcon className="text-lg " />
+          </IconWrapper>
+        }
+      >
+        Projects
+      </ListboxItem>
+      <ListboxItem
+        key="releases"
+        className="group h-auto py-3"
+        endContent={<ItemCounter number={399} />}
+        startContent={
+          <IconWrapper className="bg-primary/10 text-primary">
+            <TagIcon className="text-lg" />
+          </IconWrapper>
+        }
+        textValue="Releases"
+      >
+        <div className="flex flex-col gap-1">
+          <span>Releases</span>
+          <div className="px-2 py-1 rounded-small bg-default-100 group-data-[hover=true]:bg-default-200">
+            <span className="text-tiny text-default-600">@nextui-org/react@2.0.10</span>
+            <div className="flex gap-2 text-tiny">
+              <span className="text-default-500">49 minutes ago</span>
+              <span className="text-success">Latest</span>
+            </div>
+          </div>
+        </div>
+      </ListboxItem>
+      <ListboxItem
+        key="contributors"
+        endContent={<ItemCounter number={79} />}
+        startContent={
+          <IconWrapper className="bg-warning/10 text-warning">
+            <UsersIcon />
+          </IconWrapper>
+        }
+      >
+        Contributors
+      </ListboxItem>
+      <ListboxItem
+        key="watchers"
+        endContent={<ItemCounter number={82} />}
+        startContent={
+          <IconWrapper className="bg-default/50 text-foreground">
+            <WatchersIcons />
+          </IconWrapper>
+        }
+      >
+        Watchers
+      </ListboxItem>
+      <ListboxItem
+        key="license"
+        endContent={<span className="text-small text-default-400">MIT</span>}
+        startContent={
+          <IconWrapper className="bg-danger/10 text-danger dark:text-danger-500">
+            <BookIcon />
+          </IconWrapper>
+        }
+      >
+        License
+      </ListboxItem>
+    </Listbox>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/IconWrapper.jsx": IconWrapper,
+  "/ItemCounter.jsx": ItemCounter,
+  "/BugIcon.jsx": BugIcon,
+  "/PullRequestIcon.jsx": PullRequestIcon,
+  "/ChatIcon.jsx": ChatIcon,
+  "/PlayCircleIcon.jsx": PlayCircleIcon,
+  "/LayoutIcon.jsx": LayoutIcon,
+  "/TagIcon.jsx": TagIcon,
+  "/UsersIcon.jsx": UsersIcon,
+  "/WatchersIcons.jsx": WatchersIcon,
+  "/BookIcon.jsx": BookIcon,
+  "/ChevronRightIcon.jsx": ChevronRightIcon,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/listbox/description.ts

@@ -0,0 +1,169 @@
+const AddNoteIcon = `export const AddNoteIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M7.37 22h9.25a4.87 4.87 0 0 0 4.87-4.87V8.37a4.87 4.87 0 0 0-4.87-4.87H7.37A4.87 4.87 0 0 0 2.5 8.37v8.75c0 2.7 2.18 4.88 4.87 4.88Z"
+      fill="currentColor"
+      opacity={0.4}
+    />
+    <path
+      d="M8.29 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM15.71 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM12 14.75h-1.69V13c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.75H7c-.41 0-.75.34-.75.75s.34.75.75.75h1.81V18c0 .41.34.75.75.75s.75-.34.75-.75v-1.75H12c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M15.5 13.15h-2.17c-1.78 0-3.23-1.44-3.23-3.23V7.75c0-.41-.33-.75-.75-.75H6.18C3.87 7 2 8.5 2 11.18v6.64C2 20.5 3.87 22 6.18 22h5.89c2.31 0 4.18-1.5 4.18-4.18V13.9c0-.42-.34-.75-.75-.75Z"
+      fill="currentColor"
+      opacity={0.4}
+    />
+    <path
+      d="M17.82 2H11.93C9.67 2 7.84 3.44 7.76 6.01c.06 0 .11-.01.17-.01h5.89C16.13 6 18 7.5 18 10.18V16.83c0 .06-.01.11-.01.16 2.23-.07 4.01-1.55 4.01-4.16V6.18C22 3.5 20.13 2 17.82 2Z"
+      fill="currentColor"
+    />
+    <path
+      d="M11.98 7.15c-.31-.31-.84-.1-.84.33v2.62c0 1.1.93 2 2.07 2 .71.01 1.7.01 2.55.01.43 0 .65-.5.35-.8-1.09-1.09-3.03-3.04-4.13-4.16Z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const EditDocumentIcon = `export const EditDocumentIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M15.48 3H7.52C4.07 3 2 5.06 2 8.52v7.95C2 19.94 4.07 22 7.52 22h7.95c3.46 0 5.52-2.06 5.52-5.52V8.52C21 5.06 18.93 3 15.48 3Z"
+      fill="currentColor"
+      opacity={0.4}
+    />
+    <path
+      d="M21.02 2.98c-1.79-1.8-3.54-1.84-5.38 0L14.51 4.1c-.1.1-.13.24-.09.37.7 2.45 2.66 4.41 5.11 5.11.03.01.08.01.11.01.1 0 .2-.04.27-.11l1.11-1.12c.91-.91 1.36-1.78 1.36-2.67 0-.9-.45-1.79-1.36-2.71ZM17.86 10.42c-.27-.13-.53-.26-.77-.41-.2-.12-.4-.25-.59-.39-.16-.1-.34-.25-.52-.4-.02-.01-.08-.06-.16-.14-.31-.25-.64-.59-.95-.96-.02-.02-.08-.08-.13-.17-.1-.11-.25-.3-.38-.51-.11-.14-.24-.34-.36-.55-.15-.25-.28-.5-.4-.76-.13-.28-.23-.54-.32-.79L7.9 10.72c-.35.35-.69 1.01-.76 1.5l-.43 2.98c-.09.63.08 1.22.47 1.61.33.33.78.5 1.28.5.11 0 .22-.01.33-.02l2.97-.42c.49-.07 1.15-.4 1.5-.76l5.38-5.38c-.25-.08-.5-.19-.78-.31Z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M21.07 5.23c-1.61-.16-3.22-.28-4.84-.37v-.01l-.22-1.3c-.15-.92-.37-2.3-2.71-2.3h-2.62c-2.33 0-2.55 1.32-2.71 2.29l-.21 1.28c-.93.06-1.86.12-2.79.21l-2.04.2c-.42.04-.72.41-.68.82.04.41.4.71.82.67l2.04-.2c5.24-.52 10.52-.32 15.82.21h.08c.38 0 .71-.29.75-.68a.766.766 0 0 0-.69-.82Z"
+      fill="currentColor"
+    />
+    <path
+      d="M19.23 8.14c-.24-.25-.57-.39-.91-.39H5.68c-.34 0-.68.14-.91.39-.23.25-.36.59-.34.94l.62 10.26c.11 1.52.25 3.42 3.74 3.42h6.42c3.49 0 3.63-1.89 3.74-3.42l.62-10.25c.02-.36-.11-.7-.34-.95Z"
+      fill="currentColor"
+      opacity={0.399}
+    />
+    <path
+      clipRule="evenodd"
+      d="M9.58 17a.75.75 0 0 1 .75-.75h3.33a.75.75 0 0 1 0 1.5h-3.33a.75.75 0 0 1-.75-.75ZM8.75 13a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </svg>
+);`;
+
+const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);`;
+
+const App = `import {Listbox, ListboxItem, cn} from "@nextui-org/react";
+import {ListboxWrapper} from "./ListboxWrapper";
+import {AddNoteIcon} from "./AddNoteIcon.jsx";
+import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx";
+import {EditDocumentIcon} from "./EditDocumentIcon.jsx";
+import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx";
+
+export default function App() {
+  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+
+  return (
+    <ListboxWrapper>
+      <Listbox variant="flat" aria-label="Listbox menu with descriptions">
+        <ListboxItem
+          key="new"
+          description="Create a new file"
+          startContent={<AddNoteIcon className={iconClasses} />}
+        >
+          New file
+        </ListboxItem>
+        <ListboxItem
+          key="copy"
+          description="Copy the file link"
+          startContent={<CopyDocumentIcon className={iconClasses} />}
+        >
+          Copy link
+        </ListboxItem>
+        <ListboxItem
+          key="edit"
+          showDivider
+          description="Allows you to edit the file"
+          startContent={<EditDocumentIcon className={iconClasses} />}
+        >
+          Edit file
+        </ListboxItem>
+        <ListboxItem
+          key="delete"
+          className="text-danger"
+          color="danger"
+          description="Permanently delete the file"
+          startContent={<DeleteDocumentIcon className={cn(iconClasses, "text-danger")} />}
+        >
+          Delete file
+        </ListboxItem>
+      </Listbox>
+    </ListboxWrapper>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/ListboxWrapper.jsx": ListboxWrapper,
+  "/AddNoteIcon.jsx": AddNoteIcon,
+  "/CopyDocumentIcon.jsx": CopyDocumentIcon,
+  "/EditDocumentIcon.jsx": EditDocumentIcon,
+  "/DeleteDocumentIcon.jsx": DeleteDocumentIcon,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/listbox/disabled-keys.ts

@@ -0,0 +1,36 @@
+const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);`;
+
+const App = `import {Listbox, ListboxItem} from "@nextui-org/react";
+import {ListboxWrapper} from "./ListboxWrapper";
+
+export default function App() {
+  return (
+    <ListboxWrapper>
+      <Listbox
+        aria-label="Example with disabled actions" 
+        disabledKeys={["edit", "delete"]}
+        onAction={(key) => alert(key)}
+      >
+        <ListboxItem key="new">New file</ListboxItem>
+        <ListboxItem key="copy">Copy link</ListboxItem>
+        <ListboxItem key="edit">Edit file</ListboxItem>
+        <ListboxItem key="delete" className="text-danger" color="danger">
+          Delete file
+        </ListboxItem>
+      </Listbox>
+    </ListboxWrapper>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/ListboxWrapper.jsx": ListboxWrapper,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/listbox/dynamic.ts

@@ -0,0 +1,58 @@
+const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);`;
+
+const App = `import {Listbox, ListboxItem} from "@nextui-org/react";
+import {ListboxWrapper} from "./ListboxWrapper";
+
+export default function App() {
+  const items = [
+    {
+      key: "new",
+      label: "New file",
+    },
+    {
+      key: "copy",
+      label: "Copy link",
+    },
+    {
+      key: "edit",
+      label: "Edit file",
+    },
+    {
+      key: "delete",
+      label: "Delete file",
+    }
+  ];
+
+  return (
+    <ListboxWrapper>
+      <Listbox
+        items={items}
+        aria-label="Dynamic Actions"
+        onAction={(key) => alert(key)}
+      >
+        {(item) => (
+          <ListboxItem
+            key={item.key}
+            color={item.key === "delete" ? "danger" : "default"}
+            className={item.key === "delete" ? "text-danger" : ""}
+          >
+            {item.label}
+          </ListboxItem>
+        )}
+      </Listbox>
+    </ListboxWrapper>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/ListboxWrapper.jsx": ListboxWrapper,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/listbox/icons.ts

@@ -0,0 +1,165 @@
+const AddNoteIcon = `export const AddNoteIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M7.37 22h9.25a4.87 4.87 0 0 0 4.87-4.87V8.37a4.87 4.87 0 0 0-4.87-4.87H7.37A4.87 4.87 0 0 0 2.5 8.37v8.75c0 2.7 2.18 4.88 4.87 4.88Z"
+      fill="currentColor"
+      opacity={0.4}
+    />
+    <path
+      d="M8.29 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM15.71 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM12 14.75h-1.69V13c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.75H7c-.41 0-.75.34-.75.75s.34.75.75.75h1.81V18c0 .41.34.75.75.75s.75-.34.75-.75v-1.75H12c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M15.5 13.15h-2.17c-1.78 0-3.23-1.44-3.23-3.23V7.75c0-.41-.33-.75-.75-.75H6.18C3.87 7 2 8.5 2 11.18v6.64C2 20.5 3.87 22 6.18 22h5.89c2.31 0 4.18-1.5 4.18-4.18V13.9c0-.42-.34-.75-.75-.75Z"
+      fill="currentColor"
+      opacity={0.4}
+    />
+    <path
+      d="M17.82 2H11.93C9.67 2 7.84 3.44 7.76 6.01c.06 0 .11-.01.17-.01h5.89C16.13 6 18 7.5 18 10.18V16.83c0 .06-.01.11-.01.16 2.23-.07 4.01-1.55 4.01-4.16V6.18C22 3.5 20.13 2 17.82 2Z"
+      fill="currentColor"
+    />
+    <path
+      d="M11.98 7.15c-.31-.31-.84-.1-.84.33v2.62c0 1.1.93 2 2.07 2 .71.01 1.7.01 2.55.01.43 0 .65-.5.35-.8-1.09-1.09-3.03-3.04-4.13-4.16Z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const EditDocumentIcon = `export const EditDocumentIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M15.48 3H7.52C4.07 3 2 5.06 2 8.52v7.95C2 19.94 4.07 22 7.52 22h7.95c3.46 0 5.52-2.06 5.52-5.52V8.52C21 5.06 18.93 3 15.48 3Z"
+      fill="currentColor"
+      opacity={0.4}
+    />
+    <path
+      d="M21.02 2.98c-1.79-1.8-3.54-1.84-5.38 0L14.51 4.1c-.1.1-.13.24-.09.37.7 2.45 2.66 4.41 5.11 5.11.03.01.08.01.11.01.1 0 .2-.04.27-.11l1.11-1.12c.91-.91 1.36-1.78 1.36-2.67 0-.9-.45-1.79-1.36-2.71ZM17.86 10.42c-.27-.13-.53-.26-.77-.41-.2-.12-.4-.25-.59-.39-.16-.1-.34-.25-.52-.4-.02-.01-.08-.06-.16-.14-.31-.25-.64-.59-.95-.96-.02-.02-.08-.08-.13-.17-.1-.11-.25-.3-.38-.51-.11-.14-.24-.34-.36-.55-.15-.25-.28-.5-.4-.76-.13-.28-.23-.54-.32-.79L7.9 10.72c-.35.35-.69 1.01-.76 1.5l-.43 2.98c-.09.63.08 1.22.47 1.61.33.33.78.5 1.28.5.11 0 .22-.01.33-.02l2.97-.42c.49-.07 1.15-.4 1.5-.76l5.38-5.38c-.25-.08-.5-.19-.78-.31Z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M21.07 5.23c-1.61-.16-3.22-.28-4.84-.37v-.01l-.22-1.3c-.15-.92-.37-2.3-2.71-2.3h-2.62c-2.33 0-2.55 1.32-2.71 2.29l-.21 1.28c-.93.06-1.86.12-2.79.21l-2.04.2c-.42.04-.72.41-.68.82.04.41.4.71.82.67l2.04-.2c5.24-.52 10.52-.32 15.82.21h.08c.38 0 .71-.29.75-.68a.766.766 0 0 0-.69-.82Z"
+      fill="currentColor"
+    />
+    <path
+      d="M19.23 8.14c-.24-.25-.57-.39-.91-.39H5.68c-.34 0-.68.14-.91.39-.23.25-.36.59-.34.94l.62 10.26c.11 1.52.25 3.42 3.74 3.42h6.42c3.49 0 3.63-1.89 3.74-3.42l.62-10.25c.02-.36-.11-.7-.34-.95Z"
+      fill="currentColor"
+      opacity={0.399}
+    />
+    <path
+      clipRule="evenodd"
+      d="M9.58 17a.75.75 0 0 1 .75-.75h3.33a.75.75 0 0 1 0 1.5h-3.33a.75.75 0 0 1-.75-.75ZM8.75 13a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </svg>
+);`;
+
+const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);`;
+
+const App = `import {Listbox, ListboxItem, cn} from "@nextui-org/react";
+import {ListboxWrapper} from "./ListboxWrapper";
+import {AddNoteIcon} from "./AddNoteIcon.jsx";
+import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx";
+import {EditDocumentIcon} from "./EditDocumentIcon.jsx";
+import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx";
+
+export default function App() {
+  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+
+  return (
+    <ListboxWrapper>
+      <Listbox variant="faded" aria-label="Listbox menu with icons">
+        <ListboxItem
+          key="new"
+          startContent={<AddNoteIcon className={iconClasses} />}
+        >
+          New file
+        </ListboxItem>
+        <ListboxItem
+          key="copy"
+          startContent={<CopyDocumentIcon className={iconClasses} />}
+        >
+          Copy link
+        </ListboxItem>
+        <ListboxItem
+          key="edit"
+          showDivider
+          startContent={<EditDocumentIcon className={iconClasses} />}
+        >
+          Edit file
+        </ListboxItem>
+        <ListboxItem
+          key="delete"
+          className="text-danger"
+          color="danger"
+          startContent={<DeleteDocumentIcon className={cn(iconClasses, "text-danger")} />}
+        >
+          Delete file
+        </ListboxItem>
+      </Listbox>
+    </ListboxWrapper>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/ListboxWrapper.jsx": ListboxWrapper,
+  "/AddNoteIcon.jsx": AddNoteIcon,
+  "/CopyDocumentIcon.jsx": CopyDocumentIcon,
+  "/EditDocumentIcon.jsx": EditDocumentIcon,
+  "/DeleteDocumentIcon.jsx": DeleteDocumentIcon,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/listbox/index.ts

@@ -0,0 +1,23 @@
+import usage from "./usage";
+import dynamic from "./dynamic";
+import disabledKeys from "./disabled-keys";
+import variants from "./variants";
+import singleSelection from "./single-selection";
+import multipleSelection from "./multiple-selection";
+import icons from "./icons";
+import description from "./description";
+import sections from "./sections";
+import customStyles from "./custom-styles";
+
+export const listboxContent = {
+  usage,
+  dynamic,
+  disabledKeys,
+  variants,
+  singleSelection,
+  multipleSelection,
+  icons,
+  description,
+  sections,
+  customStyles,
+};

apps/docs/content/components/listbox/multiple-selection.ts

@@ -0,0 +1,48 @@
+const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
+  <div className="w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);`;
+
+const App = `import {Listbox, ListboxItem} from "@nextui-org/react";
+import {ListboxWrapper} from "./ListboxWrapper";
+
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"]));
+
+  const selectedValue = React.useMemo(
+    () => Array.from(selectedKeys).join(", "),
+    [selectedKeys]
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <ListboxWrapper>
+        <Listbox 
+          aria-label="Multiple selection example"
+          variant="flat"
+          disallowEmptySelection
+          selectionMode="multiple"
+          selectedKeys={selectedKeys}
+          onSelectionChange={setSelectedKeys}
+        >
+          <ListboxItem key="text">Text</ListboxItem>
+          <ListboxItem key="number">Number</ListboxItem>
+          <ListboxItem key="date">Date</ListboxItem>
+          <ListboxItem key="single_date">Single Date</ListboxItem>
+          <ListboxItem key="iteration">Iteration</ListboxItem>
+        </Listbox>
+      </ListboxWrapper>
+      <p className="text-small text-default-500">Selected value: {selectedValue}</p>
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/ListboxWrapper.jsx": ListboxWrapper,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/listbox/sections.ts

@@ -0,0 +1,172 @@
+const AddNoteIcon = `export const AddNoteIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M7.37 22h9.25a4.87 4.87 0 0 0 4.87-4.87V8.37a4.87 4.87 0 0 0-4.87-4.87H7.37A4.87 4.87 0 0 0 2.5 8.37v8.75c0 2.7 2.18 4.88 4.87 4.88Z"
+      fill="currentColor"
+      opacity={0.4}
+    />
+    <path
+      d="M8.29 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM15.71 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM12 14.75h-1.69V13c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.75H7c-.41 0-.75.34-.75.75s.34.75.75.75h1.81V18c0 .41.34.75.75.75s.75-.34.75-.75v-1.75H12c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M15.5 13.15h-2.17c-1.78 0-3.23-1.44-3.23-3.23V7.75c0-.41-.33-.75-.75-.75H6.18C3.87 7 2 8.5 2 11.18v6.64C2 20.5 3.87 22 6.18 22h5.89c2.31 0 4.18-1.5 4.18-4.18V13.9c0-.42-.34-.75-.75-.75Z"
+      fill="currentColor"
+      opacity={0.4}
+    />
+    <path
+      d="M17.82 2H11.93C9.67 2 7.84 3.44 7.76 6.01c.06 0 .11-.01.17-.01h5.89C16.13 6 18 7.5 18 10.18V16.83c0 .06-.01.11-.01.16 2.23-.07 4.01-1.55 4.01-4.16V6.18C22 3.5 20.13 2 17.82 2Z"
+      fill="currentColor"
+    />
+    <path
+      d="M11.98 7.15c-.31-.31-.84-.1-.84.33v2.62c0 1.1.93 2 2.07 2 .71.01 1.7.01 2.55.01.43 0 .65-.5.35-.8-1.09-1.09-3.03-3.04-4.13-4.16Z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const EditDocumentIcon = `export const EditDocumentIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M15.48 3H7.52C4.07 3 2 5.06 2 8.52v7.95C2 19.94 4.07 22 7.52 22h7.95c3.46 0 5.52-2.06 5.52-5.52V8.52C21 5.06 18.93 3 15.48 3Z"
+      fill="currentColor"
+      opacity={0.4}
+    />
+    <path
+      d="M21.02 2.98c-1.79-1.8-3.54-1.84-5.38 0L14.51 4.1c-.1.1-.13.24-.09.37.7 2.45 2.66 4.41 5.11 5.11.03.01.08.01.11.01.1 0 .2-.04.27-.11l1.11-1.12c.91-.91 1.36-1.78 1.36-2.67 0-.9-.45-1.79-1.36-2.71ZM17.86 10.42c-.27-.13-.53-.26-.77-.41-.2-.12-.4-.25-.59-.39-.16-.1-.34-.25-.52-.4-.02-.01-.08-.06-.16-.14-.31-.25-.64-.59-.95-.96-.02-.02-.08-.08-.13-.17-.1-.11-.25-.3-.38-.51-.11-.14-.24-.34-.36-.55-.15-.25-.28-.5-.4-.76-.13-.28-.23-.54-.32-.79L7.9 10.72c-.35.35-.69 1.01-.76 1.5l-.43 2.98c-.09.63.08 1.22.47 1.61.33.33.78.5 1.28.5.11 0 .22-.01.33-.02l2.97-.42c.49-.07 1.15-.4 1.5-.76l5.38-5.38c-.25-.08-.5-.19-.78-.31Z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M21.07 5.23c-1.61-.16-3.22-.28-4.84-.37v-.01l-.22-1.3c-.15-.92-.37-2.3-2.71-2.3h-2.62c-2.33 0-2.55 1.32-2.71 2.29l-.21 1.28c-.93.06-1.86.12-2.79.21l-2.04.2c-.42.04-.72.41-.68.82.04.41.4.71.82.67l2.04-.2c5.24-.52 10.52-.32 15.82.21h.08c.38 0 .71-.29.75-.68a.766.766 0 0 0-.69-.82Z"
+      fill="currentColor"
+    />
+    <path
+      d="M19.23 8.14c-.24-.25-.57-.39-.91-.39H5.68c-.34 0-.68.14-.91.39-.23.25-.36.59-.34.94l.62 10.26c.11 1.52.25 3.42 3.74 3.42h6.42c3.49 0 3.63-1.89 3.74-3.42l.62-10.25c.02-.36-.11-.7-.34-.95Z"
+      fill="currentColor"
+      opacity={0.399}
+    />
+    <path
+      clipRule="evenodd"
+      d="M9.58 17a.75.75 0 0 1 .75-.75h3.33a.75.75 0 0 1 0 1.5h-3.33a.75.75 0 0 1-.75-.75ZM8.75 13a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </svg>
+);`;
+
+const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);`;
+
+const App = `import {Listbox, ListboxItem, ListboxSection, cn} from "@nextui-org/react";
+import {ListboxWrapper} from "./ListboxWrapper";
+import {AddNoteIcon} from "./AddNoteIcon.jsx";
+import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx";
+import {EditDocumentIcon} from "./EditDocumentIcon.jsx";
+import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx";
+
+export default function App() {
+  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+
+  return (
+    <ListboxWrapper>
+      <Listbox variant="flat" aria-label="Listbox menu with sections">
+        <ListboxSection title="Actions" showDivider>  
+          <ListboxItem
+            key="new"
+            description="Create a new file"
+            startContent={<AddNoteIcon className={iconClasses} />}
+          >
+            New file
+          </ListboxItem>
+          <ListboxItem
+            key="copy"
+            description="Copy the file link"
+            startContent={<CopyDocumentIcon className={iconClasses} />}
+          >
+            Copy link
+          </ListboxItem>
+          <ListboxItem
+            key="edit"
+            description="Allows you to edit the file"
+            startContent={<EditDocumentIcon className={iconClasses} />}
+          >
+            Edit file
+          </ListboxItem>
+        </ListboxSection> 
+        <ListboxSection title="Danger zone">  
+          <ListboxItem
+            key="delete"
+            className="text-danger"
+            color="danger"
+            description="Permanently delete the file"
+            startContent={<DeleteDocumentIcon className={cn(iconClasses, "text-danger")} />}
+          >
+            Delete file
+          </ListboxItem>
+        </ListboxSection> 
+      </Listbox>
+    </ListboxWrapper>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/ListboxWrapper.jsx": ListboxWrapper,
+  "/AddNoteIcon.jsx": AddNoteIcon,
+  "/CopyDocumentIcon.jsx": CopyDocumentIcon,
+  "/EditDocumentIcon.jsx": EditDocumentIcon,
+  "/DeleteDocumentIcon.jsx": DeleteDocumentIcon,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/listbox/single-selection.ts

@@ -0,0 +1,48 @@
+const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
+  <div className="w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);`;
+
+const App = `import {Listbox, ListboxItem} from "@nextui-org/react";
+import {ListboxWrapper} from "./ListboxWrapper";
+
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"]));
+
+  const selectedValue = React.useMemo(
+    () => Array.from(selectedKeys).join(", "),
+    [selectedKeys]
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <ListboxWrapper>
+        <Listbox 
+          aria-label="Single selection example"
+          variant="flat"
+          disallowEmptySelection
+          selectionMode="single"
+          selectedKeys={selectedKeys}
+          onSelectionChange={setSelectedKeys}
+        >
+          <ListboxItem key="text">Text</ListboxItem>
+          <ListboxItem key="number">Number</ListboxItem>
+          <ListboxItem key="date">Date</ListboxItem>
+          <ListboxItem key="single_date">Single Date</ListboxItem>
+          <ListboxItem key="iteration">Iteration</ListboxItem>
+        </Listbox>
+      </ListboxWrapper>
+      <p className="text-small text-default-500">Selected value: {selectedValue}</p>
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/ListboxWrapper.jsx": ListboxWrapper,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/listbox/usage.ts

@@ -0,0 +1,35 @@
+const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);`;
+
+const App = `import {Listbox, ListboxItem} from "@nextui-org/react";
+import {ListboxWrapper} from "./ListboxWrapper";
+
+export default function App() {
+  return (
+    <ListboxWrapper>
+      <Listbox
+        aria-label="Actions"
+        onAction={(key) => alert(key)}
+      >
+        <ListboxItem key="new">New file</ListboxItem>
+        <ListboxItem key="copy">Copy link</ListboxItem>
+        <ListboxItem key="edit">Edit file</ListboxItem>
+        <ListboxItem key="delete" className="text-danger" color="danger">
+          Delete file
+        </ListboxItem>
+      </Listbox>
+    </ListboxWrapper>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/ListboxWrapper.jsx": ListboxWrapper,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/listbox/variants.ts

@@ -0,0 +1,72 @@
+const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);`;
+
+const App = `import {Listbox, ListboxItem, RadioGroup, Radio} from "@nextui-org/react";
+import {ListboxWrapper} from "./ListboxWrapper";
+
+export default function App() {
+  const [selectedVariant, setSelectedVariant] = React.useState("solid")
+  const [selectedColor, setSelectedColor] = React.useState("default")
+
+  const variants = ["solid", "bordered", "light", "flat", "faded", "shadow"];
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="flex flex-col gap-4">
+      <ListboxWrapper>
+        <Listbox
+          aria-label="Listbox Variants"
+          color={selectedColor} 
+          variant={selectedVariant}
+        >
+          <ListboxItem key="new">New file</ListboxItem>
+          <ListboxItem key="copy">Copy link</ListboxItem>
+          <ListboxItem key="edit">Edit file</ListboxItem>
+          <ListboxItem key="delete" className="text-danger" color="danger">
+            Delete file
+          </ListboxItem>
+        </Listbox>
+      </ListboxWrapper>  
+      <div className="flex flex-col gap-2">
+        <RadioGroup
+          label="Select listbox item variant"
+          orientation="horizontal"
+          color={selectedVariant}
+          defaultValue="solid"
+          onValueChange={setSelectedVariant}
+        >
+          {variants.map((variant) => (
+            <Radio key={variant} value={variant} className="capitalize">
+              {variant}
+            </Radio>
+          ))}
+        </RadioGroup>
+        <RadioGroup
+          label="Select listbox item color"
+          orientation="horizontal"
+          color={selectedColor}
+          defaultValue="default"
+          onValueChange={setSelectedColor}
+        >
+          {colors.map((color) => (
+            <Radio key={color} value={color} className="capitalize">
+              {color}
+            </Radio>
+          ))}
+        </RadioGroup>
+      </div> 
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/ListboxWrapper.jsx": ListboxWrapper,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/modal/backdrop.ts

@@ -16,6 +16,7 @@ export default function App() {
       <div className="flex flex-wrap gap-3">
         {backdrops.map((b) => (
           <Button  
+            key={b}
             variant="flat" 
             color="warning" 
             onPress={() => handleOpen(b)}
@@ -50,7 +51,7 @@ export default function App() {
                 </p>
               </ModalBody>
               <ModalFooter>
-                <Button color="danger" variant="light" onClick={onClose}>
+                <Button color="danger" variant="light" onPress={onClose}>
                   Close
                 </Button>
                 <Button color="primary" onPress={onClose}>

apps/docs/content/components/modal/custom-backdrop.ts

@@ -38,7 +38,7 @@ export default function App() {
                 </p>
               </ModalBody>
               <ModalFooter>
-                <Button color="danger" variant="light" onClick={onClose}>
+                <Button color="danger" variant="light" onPress={onClose}>
                   Close
                 </Button>
                 <Button color="primary" onPress={onClose}>

apps/docs/content/components/modal/custom-motion.ts

@@ -55,7 +55,7 @@ export default function App() {
                 </p>
               </ModalBody>
               <ModalFooter>
-                <Button color="danger" variant="light" onClick={onClose}>
+                <Button color="danger" variant="light" onPress={onClose}>
                   Close
                 </Button>
                 <Button color="primary" onPress={onClose}>

apps/docs/content/components/modal/custom-styles.ts

@@ -44,7 +44,7 @@ export default function App() {
                 </p>
               </ModalBody>
               <ModalFooter>
-                <Button color="foreground" variant="light" onClick={onClose}>
+                <Button color="foreground" variant="light" onPress={onClose}>
                   Close
                 </Button>
                 <Button className="bg-[#6f4ef2] shadow-lg shadow-indigo-500/20" onPress={onClose}>

apps/docs/content/components/modal/form.ts

@@ -40,7 +40,7 @@ const LockIcon = `export const LockIcon = (props) => (
 );`;
 
 const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, Checkbox, Input, Link} from "@nextui-org/react";
-import {MailFilledIcon} from './MailIcon.jsx';
+import {MailIcon} from './MailIcon.jsx';
 import {LockIcon} from './LockIcon.jsx';
 
 export default function App() {
@@ -91,7 +91,7 @@ export default function App() {
                 </div>
               </ModalBody>
               <ModalFooter>
-                <Button color="danger" variant="flat" onClick={onClose}>
+                <Button color="danger" variant="flat" onPress={onClose}>
                   Close
                 </Button>
                 <Button color="primary" onPress={onClose}>

apps/docs/content/components/modal/non-dismissable.ts

@@ -31,7 +31,7 @@ export default function App() {
                 </p>
               </ModalBody>
               <ModalFooter>
-                <Button color="danger" variant="light" onClick={onClose}>
+                <Button color="danger" variant="light" onPress={onClose}>
                   Close
                 </Button>
                 <Button color="primary" onPress={onClose}>

apps/docs/content/components/modal/overflow.ts

@@ -104,7 +104,128 @@ export default function App() {
                 </p>
               </ModalBody>
               <ModalFooter>
-                <Button color="danger" variant="light" onClick={onClose}>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </div>
+  );
+}`;
+
+const AppTs = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalProps, Button, useDisclosure, RadioGroup, Radio} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+  const [scrollBehavior, setScrollBehavior] = React.useState<ModalProps["scrollBehavior"]>("inside");
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Button onPress={onOpen}>Open Modal</Button>
+      <RadioGroup
+        label="Select scroll behavior"
+        orientation="horizontal"
+        value={scrollBehavior}
+        onValueChange={setScrollBehavior}
+      >
+        <Radio value="inside">inside</Radio>
+        <Radio value="outside">outside</Radio>
+      </RadioGroup>
+      <Modal
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        scrollBehavior={scrollBehavior}
+      >
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">
+                Modal Title
+              </ModalHeader>
+              <ModalBody>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                  Nullam pulvinar risus non risus hendrerit venenatis.
+                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                  Nullam pulvinar risus non risus hendrerit venenatis.
+                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat
+                  consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
+                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem
+                  aliqua enim laboris do dolor eiusmod. Et mollit incididunt
+                  nisi consectetur esse laborum eiusmod pariatur proident Lorem
+                  eiusmod et. Culpa deserunt nostrud ad veniam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                  Nullam pulvinar risus non risus hendrerit venenatis.
+                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
+                  Magna exercitation reprehenderit magna aute tempor cupidatat
+                  consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
+                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem
+                  aliqua enim laboris do dolor eiusmod. Et mollit incididunt
+                  nisi consectetur esse laborum eiusmod pariatur proident Lorem
+                  eiusmod et. Culpa deserunt nostrud ad veniam.
+                </p>
+                <p>
+                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit
+                  duis sit officia eiusmod Lorem aliqua enim laboris do dolor
+                  eiusmod. Et mollit incididunt nisi consectetur esse laborum
+                  eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt
+                  nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur
+                  adipiscing elit. Nullam pulvinar risus non risus hendrerit
+                  venenatis. Pellentesque sit amet hendrerit risus, sed
+                  porttitor quam. Magna exercitation reprehenderit magna aute
+                  tempor cupidatat consequat elit dolor adipisicing. Mollit
+                  dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et
+                  mollit incididunt nisi consectetur esse laborum eiusmod
+                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad
+                  veniam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                  Nullam pulvinar risus non risus hendrerit venenatis.
+                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat
+                  consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
+                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem
+                  aliqua enim laboris do dolor eiusmod. Et mollit incididunt
+                  nisi consectetur esse laborum eiusmod pariatur proident Lorem
+                  eiusmod et. Culpa deserunt nostrud ad veniam.
+                </p>
+                <p>
+                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit
+                  duis sit officia eiusmod Lorem aliqua enim laboris do dolor
+                  eiusmod. Et mollit incididunt nisi consectetur esse laborum
+                  eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt
+                  nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur
+                  adipiscing elit. Nullam pulvinar risus non risus hendrerit
+                  venenatis. Pellentesque sit amet hendrerit risus, sed
+                  porttitor quam. Magna exercitation reprehenderit magna aute
+                  tempor cupidatat consequat elit dolor adipisicing. Mollit
+                  dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et
+                  mollit incididunt nisi consectetur esse laborum eiusmod
+                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad
+                  veniam.
+                </p>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
                   Close
                 </Button>
                 <Button color="primary" onPress={onClose}>
@@ -123,6 +244,11 @@ const react = {
   "/App.jsx": App,
 };
 
+const reactTs = {
+  "/App.tsx": AppTs,
+};
+
 export default {
   ...react,
+  ...reactTs,
 };

apps/docs/content/components/modal/placement.ts

@@ -42,7 +42,7 @@ export default function App() {
                 </p>
               </ModalBody>
               <ModalFooter>
-                <Button color="danger" variant="light" onClick={onClose}>
+                <Button color="danger" variant="light" onPress={onClose}>
                   Close
                 </Button>
                 <Button color="primary" onPress={onClose}>

apps/docs/content/components/modal/sizes.ts

@@ -16,7 +16,7 @@ export default function App() {
     <>
       <div className="flex flex-wrap gap-3">
         {sizes.map((size) => (
-          <Button onPress={() => handleOpen(size)}>Open {size}</Button>
+          <Button key={size} onPress={() => handleOpen(size)}>Open {size}</Button>
         ))}  
       </div>
       <Modal 
@@ -46,7 +46,7 @@ export default function App() {
                 </p>
               </ModalBody>
               <ModalFooter>
-                <Button color="danger" variant="light" onClick={onClose}>
+                <Button color="danger" variant="light" onPress={onClose}>
                   Close
                 </Button>
                 <Button color="primary" onPress={onClose}>

apps/docs/content/components/modal/usage.ts

@@ -31,7 +31,7 @@ export default function App() {
                 </p>
               </ModalBody>
               <ModalFooter>
-                <Button color="danger" variant="light" onClick={onClose}>
+                <Button color="danger" variant="light" onPress={onClose}>
                   Close
                 </Button>
                 <Button color="primary" onPress={onClose}>

apps/docs/content/components/navbar/with-search-input.ts

@@ -79,12 +79,13 @@ export default function App() {
         <Input
           classNames={{
             base: "max-w-full sm:max-w-[10rem] h-10",
+            mainWrapper: "h-full",
             input: "text-small",
-            inputWrapper: "font-normal text-default-500 bg-default-400/20 dark:bg-default-500/20",
+            inputWrapper: "h-full font-normal text-default-500 bg-default-400/20 dark:bg-default-500/20",
           }}
           placeholder="Type to search..."
           size="sm"
-          startContent={<SearchLinearIcon size={18} />}
+          startContent={<SearchIcon size={18} />}
           type="search"
         />
         <Dropdown placement="bottom-end">

apps/docs/content/components/pagination/colors.ts

@@ -7,7 +7,7 @@ export default function App() {
   return (
     <div className="flex flex-wrap gap-4 items-center">
       {colors.map((color) => (
-        <Pagination total={10} initialPage={1} color={color} />
+        <Pagination key={color} total={10} initialPage={1} color={color} />
       ))}
     </div>
   );

apps/docs/content/components/pagination/controlled.ts

@@ -5,7 +5,7 @@ export default function App() {
 
   return (
     <div className="flex flex-col gap-5">
-      <p className="text-default-500">Selected Page: {currentPage}</p>
+      <p className="text-small text-default-500">Selected Page: {currentPage}</p>
       <Pagination
         total={10}
         color="secondary"

apps/docs/content/components/pagination/radius.ts

@@ -7,7 +7,7 @@ export default function App() {
   return (
     <div className="flex flex-wrap gap-4 items-center">
       {radius.map((r) => (
-        <Pagination total={10} initialPage={1} radius={r} />
+        <Pagination key={r} total={10} initialPage={1} radius={r} />
       ))}
     </div>
   );

apps/docs/content/components/pagination/sizes.ts

@@ -7,7 +7,7 @@ export default function App() {
   return (
     <div className="flex flex-wrap gap-4 items-center">
       {sizes.map((size) => (
-        <Pagination total={10} initialPage={1} size={size} />
+        <Pagination key={size} total={10} initialPage={1} size={size} />
       ))}
     </div>
   );

apps/docs/content/components/pagination/variants.ts

@@ -7,7 +7,7 @@ export default function App() {
   return (
     <div className="flex flex-wrap gap-4 items-center">
       {variants.map((variant) => (
-        <Pagination total={10} initialPage={1} variant={variant} />
+        <Pagination key={variant} total={10} initialPage={1} variant={variant} />
       ))}
     </div>
   );

apps/docs/content/components/radio-group/index.ts

@@ -6,12 +6,14 @@ import defaultValue from "./default-value";
 import withDescription from "./with-description";
 import customStyles from "./custom-styles";
 import customImpl from "./custom-impl";
+import invalid from "./invalid";
 
 export const radioGroupContent = {
   usage,
   disabled,
   horizontal,
   controlled,
+  invalid,
   defaultValue,
   withDescription,
   customStyles,