feat(docs): search cmdk implemented

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

@@ -159,7 +159,7 @@ export default async function DocPage({params}: DocPageProps) {
         </footer>
       </div>
       {headings && headings.length > 0 && (
-        <div className="hidden xl:flex xl:col-span-2 mt-8 pl-4">
+        <div className="hidden z-10 xl:flex xl:col-span-2 mt-8 pl-4">
           <DocsToc headings={headings} />
         </div>
       )}

apps/docs/app/docs/layout.tsx

@@ -1,3 +1,5 @@
+import {Image} from "@nextui-org/react";
+
 import manifest from "@/content/docs/manifest.json";
 import {DocsSidebar} from "@/components/docs/sidebar";
 
@@ -7,13 +9,27 @@ interface DocsLayoutProps {
 
 export default function DocsLayout({children}: DocsLayoutProps) {
   return (
-    <main className="min-h-[calc(100vh_-_64px_-_108px)] mb-12">
+    <>
-      <div className="grid grid-cols-12">
+      <main className="container mx-auto max-w-7xl px-6 pt-16 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
-        <div className="hidden relative lg:block lg:col-span-2 mt-8 pr-4">
+        <div className="grid grid-cols-12">
-          <DocsSidebar routes={manifest.routes} />
+          <div className="hidden relative z-10 lg:block lg:col-span-2 mt-8 pr-4">
+            <DocsSidebar routes={manifest.routes} />
+          </div>
+          {children}
         </div>
-        {children}
+      </main>
+      <div
+        aria-hidden="true"
+        className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
+      >
+        <Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
       </div>
-    </main>
+      <div
+        aria-hidden="true"
+        className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
+      >
+        <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
+      </div>
+    </>
   );
 }

apps/docs/app/layout.tsx

@@ -4,6 +4,7 @@ import {clsx} from "@nextui-org/shared-utils";
 
 import {Providers} from "./providers";
 
+import {Cmdk} from "@/components/cmdk";
 import manifest from "@/content/docs/manifest.json";
 import {siteConfig} from "@/config/site";
 import {fontSans} from "@/config/fonts";
@@ -61,9 +62,10 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
         <Providers themeProps={{attribute: "class", defaultTheme: "dark"}}>
           <div className="relative flex flex-col" id="app-container">
             <Navbar routes={manifest.routes} />
-            <main className="container mx-auto max-w-7xl px-6 pt-16 flex-grow">{children}</main>
+            {children}
             <Footer />
           </div>
+          <Cmdk />
         </Providers>
       </body>
     </html>

apps/docs/app/page.tsx

@@ -29,19 +29,21 @@ export default async function Home() {
   const data = await getData();
 
   return (
-    <section className="flex flex-col items-center justify-center">
+    <main className="container mx-auto max-w-7xl px-6 pt-16 flex-grow">
-      <Hero />
+      <section className="flex flex-col items-center justify-center">
-      <FeaturesGrid features={landingContent.topFeatures} />
+        <Hero />
-      <CustomThemes />
+        <FeaturesGrid features={landingContent.topFeatures} />
-      <A11yOtb />
+        <CustomThemes />
-      <DarkMode />
+        <A11yOtb />
-      <Customization />
+        <DarkMode />
-      <LastButNotLeast />
+        <Customization />
-      <Support sponsors={data.sponsors} />
+        <LastButNotLeast />
-      <Spacer y={24} />
+        <Support sponsors={data.sponsors} />
-      <InstallBanner />
+        <Spacer y={24} />
-      <Community />
+        <InstallBanner />
-      <Spacer y={24} />
+        <Community />
-    </section>
+        <Spacer y={24} />
+      </section>
+    </main>
   );
 }

apps/docs/components/cmdk.tsx

@@ -0,0 +1,304 @@
+/* eslint-disable jsx-a11y/no-autofocus */
+"use client";
+
+import {Command} from "cmdk";
+import {useEffect, useState, FC, useMemo, useCallback, useRef} from "react";
+import {matchSorter} from "match-sorter";
+import {Button, Kbd, Modal, ModalContent} from "@nextui-org/react";
+import {CloseIcon} from "@nextui-org/shared-icons";
+import {tv} from "tailwind-variants";
+import {useRouter} from "next/navigation";
+import MultiRef from "react-multi-ref";
+import scrollIntoView from "scroll-into-view-if-needed";
+import {create} from "zustand";
+
+import {
+  DocumentCodeBoldIcon,
+  HashBoldIcon,
+  ChevronRightLinearIcon,
+  SearchLinearIcon,
+} from "./icons";
+
+import searchData from "@/content/docs/search-meta.json";
+import {useUpdateEffect} from "@/hooks/use-update-effect";
+
+export interface CmdkStore {
+  isOpen: boolean;
+  onClose: () => void;
+  onOpen: () => void;
+}
+
+export const useCmdkStore = create<CmdkStore>((set) => ({
+  isOpen: false,
+  onClose: () => set({isOpen: false}),
+  onOpen: () => set({isOpen: true}),
+}));
+
+const cmdk = tv({
+  slots: {
+    base: "max-h-full overflow-y-auto",
+    header: [
+      "flex",
+      "items-center",
+      "w-full",
+      "px-4",
+      "border-b",
+      "border-default-400/50",
+      "dark:border-default-100",
+    ],
+    searchIcon: "text-default-400 text-lg",
+    input: [
+      "w-full",
+      "px-2",
+      "h-14",
+      "font-sans",
+      "text-lg",
+      "outline-none",
+      "rounded-none",
+      "bg-transparent",
+      "text-default-700",
+      "placeholder-default-500",
+      "dark:text-default-500",
+      "dark:placeholder:text-default-300",
+    ],
+    list: ["px-4", "mt-2", "pb-4", "overflow-y-auto", "max-h-[50vh]"],
+    itemWrapper: [
+      "px-4",
+      "mt-2",
+      "group",
+      "flex",
+      "h-16",
+      "justify-between",
+      "items-center",
+      "rounded-lg",
+      "shadow",
+      "bg-content2/50",
+      "active:opacity-70",
+      "cursor-pointer",
+      "transition-opacity",
+      "data-[active=true]:bg-primary",
+      "data-[active=true]:text-primary-foreground",
+    ],
+    leftWrapper: ["flex", "gap-3", "items-center"],
+    leftIcon: [
+      "text-default-500 dark:text-default-300",
+      "group-data-[active=true]:text-primary-foreground",
+    ],
+    itemContent: ["flex", "flex-col", "gap-0", "justify-center"],
+    itemParentTitle: [
+      "text-default-400",
+      "text-xs",
+      "group-data-[active=true]:text-primary-foreground",
+    ],
+    itemTitle: ["text-default-500", "group-data-[active=true]:text-primary-foreground"],
+    emptyWrapper: ["flex", "flex-col", "text-center", "items-center", "justify-center", "h-32"],
+  },
+});
+
+export const Cmdk: FC<{}> = () => {
+  const [query, setQuery] = useState("");
+  const [activeItem, setActiveItem] = useState(0);
+  const [menuNodes] = useState(() => new MultiRef<number, HTMLElement>());
+  const slots = useMemo(() => cmdk(), []);
+
+  const eventRef = useRef<"mouse" | "keyboard">();
+  const listRef = useRef<HTMLDivElement>(null);
+  const router = useRouter();
+
+  const {isOpen, onClose, onOpen} = useCmdkStore();
+
+  const results = useMemo(
+    function getResults() {
+      if (query.length < 2) return [];
+
+      return matchSorter(searchData, query, {
+        keys: ["hierarchy.lvl1", "hierarchy.lvl2", "hierarchy.lvl3", "content"],
+      }).slice(0, 20);
+    },
+    [query],
+  );
+
+  // Toggle the menu when ⌘K / CTRL K is pressed
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      const isAppleDevice = /(Mac|iPhone|iPod|iPad)/i.test(navigator?.platform);
+      const hotkey = isAppleDevice ? "metaKey" : "ctrlKey";
+
+      if (e?.key?.toLowerCase() === "k" && e[hotkey]) {
+        e.preventDefault();
+        isOpen ? onClose() : onOpen();
+      }
+    };
+
+    document.addEventListener("keydown", onKeyDown);
+
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [isOpen]);
+
+  const onInputKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      eventRef.current = "keyboard";
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          if (activeItem + 1 < results.length) {
+            setActiveItem(activeItem + 1);
+          }
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          if (activeItem - 1 >= 0) {
+            setActiveItem(activeItem - 1);
+          }
+          break;
+        }
+        case "Control":
+        case "Alt":
+        case "Shift": {
+          e.preventDefault();
+          break;
+        }
+        case "Enter": {
+          if (results?.length <= 0) {
+            break;
+          }
+
+          onClose();
+          router.push(results[activeItem].url);
+          break;
+        }
+      }
+    },
+    [activeItem, results, router],
+  );
+
+  useUpdateEffect(() => {
+    setActiveItem(0);
+  }, [query]);
+
+  useUpdateEffect(() => {
+    if (!listRef.current || eventRef.current === "mouse") return;
+    const node = menuNodes.map.get(activeItem);
+
+    if (!node) return;
+    scrollIntoView(node, {
+      scrollMode: "if-needed",
+      behavior: "smooth",
+      block: "end",
+      inline: "end",
+      boundary: listRef.current,
+    });
+  }, [activeItem]);
+
+  return (
+    <Modal
+      hideCloseButton
+      backdrop="opaque"
+      classNames={{
+        wrapper: "md:items-start",
+        base: [
+          "mt-[20vh]",
+          "max-w-[calc(100vw-2rem)]",
+          "supports-[backdrop-filter]:bg-background/80",
+          "dark:supports-[backdrop-filter]:bg-background/30",
+          "supports-[backdrop-filter]:backdrop-blur-md",
+          "supports-[backdrop-filter]:backdrop-saturate-150",
+        ],
+        backdrop: ["bg-black/80"],
+      }}
+      isOpen={isOpen}
+      motionProps={{
+        onAnimationComplete: () => {
+          if (!isOpen) {
+            setQuery("");
+          }
+        },
+      }}
+      scrollBehavior="inside"
+      size="xl"
+      onClose={onClose}
+    >
+      <ModalContent>
+        <Command className={slots.base()} label="Global Command Menu" shouldFilter={false}>
+          <div className={slots.header()}>
+            <SearchLinearIcon className={slots.searchIcon()} strokeWidth={2} />
+            <Command.Input
+              autoFocus
+              className={slots.input()}
+              placeholder="Search documentation"
+              value={query}
+              onKeyDown={onInputKeyDown}
+              onValueChange={setQuery}
+            />
+            {query.length > 0 && (
+              <Button
+                isIconOnly
+                className="border data-[hover=true]:bg-content2 border-default-400 dark:border-default-100"
+                size="xs"
+                variant="bordered"
+                onPress={() => setQuery("")}
+              >
+                <CloseIcon />
+              </Button>
+            )}
+            <Kbd className="border-none px-2 py-1 ml-2 font-medium text-[0.6rem]">ESC</Kbd>
+          </div>
+          <Command.List ref={listRef} className={slots.list()} role="listbox">
+            {query.length > 0 ? (
+              <Command.Empty>
+                <div className={slots.emptyWrapper()}>
+                  <div>
+                    <p>No results for &quot;{query}&quot;</p>
+                    <p className="text-default-400">Try searching for something else.</p>
+                  </div>
+                </div>
+              </Command.Empty>
+            ) : (
+              <div className={slots.emptyWrapper()}>
+                <p className="text-default-400">No recent searches</p>
+              </div>
+            )}
+
+            {results.map((item, index) => {
+              const isLvl1 = item.type === "lvl1";
+
+              return (
+                <Command.Item
+                  key={item.objectID}
+                  ref={menuNodes.ref(index)}
+                  className={slots.itemWrapper()}
+                  data-active={index === activeItem}
+                  value={item.content}
+                  onMouseEnter={() => {
+                    eventRef.current = "mouse";
+                    setActiveItem(index);
+                  }}
+                  onSelect={() => {
+                    onClose();
+                    router.push(item.url);
+                  }}
+                >
+                  <div className={slots.leftWrapper()}>
+                    {isLvl1 ? (
+                      <DocumentCodeBoldIcon className={slots.leftIcon()} />
+                    ) : (
+                      <HashBoldIcon className={slots.leftIcon()} />
+                    )}
+                    <div className={slots.itemContent()}>
+                      {!isLvl1 && (
+                        <span className={slots.itemParentTitle()}>{item.hierarchy.lvl1}</span>
+                      )}
+                      <p className={slots.itemTitle()}>{item.content}</p>
+                    </div>
+                  </div>
+                  <ChevronRightLinearIcon size={14} />
+                </Command.Item>
+              );
+            })}
+          </Command.List>
+        </Command>
+      </ModalContent>
+    </Modal>
+  );
+};

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

@@ -29,7 +29,7 @@ export const ComponentLinks = ({
         href={`https://storiesv2.nextui.org/?path=/story/components-${storybook || component}`}
         radius="md"
         size="sm"
-        startIcon={<StorybookIcon className="text-lg text-[#ff4785]" />}
+        startContent={<StorybookIcon className="text-lg text-[#ff4785]" />}
         variant="flat"
       >
         Storybook
@@ -41,7 +41,7 @@ export const ComponentLinks = ({
         href={`https://www.npmjs.com/package/@nextui-org/${component}`}
         radius="md"
         size="sm"
-        startIcon={<NpmIcon className="text-2xl text-[#E53E3E]" />}
+        startContent={<NpmIcon className="text-2xl text-[#E53E3E]" />}
         variant="flat"
       >
         {`@nextui-org/${component}`}
@@ -54,7 +54,7 @@ export const ComponentLinks = ({
           href={`https://react-spectrum.adobe.com/react-aria/${reactAriaHook}.html`}
           radius="md"
           size="sm"
-          startIcon={<AdobeIcon className="text-lg text-[#E1251B]" />}
+          startContent={<AdobeIcon className="text-lg text-[#E1251B]" />}
           variant="flat"
         >
           React Aria
@@ -67,7 +67,7 @@ export const ComponentLinks = ({
         href={`${COMPONENT_PATH}/${component}`}
         radius="md"
         size="sm"
-        startIcon={<GithubIcon />}
+        startContent={<GithubIcon />}
         variant="flat"
       >
         Source
@@ -79,7 +79,7 @@ export const ComponentLinks = ({
         href={`${COMPONENT_THEME_PATH}/${styles || component}.ts`}
         radius="md"
         size="sm"
-        startIcon={<GithubIcon />}
+        startContent={<GithubIcon />}
         variant="flat"
       >
         Styles source

apps/docs/components/icons/bold/document-code.tsx

@@ -0,0 +1,19 @@
+import {IconSvgProps} from "@/types";
+
+export const DocumentCodeBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <path
+      d="M16 2H8C4.5 2 3 4 3 7V17C3 20 4.5 22 8 22H16C19.5 22 21 20 21 17V7C21 4 19.5 2 16 2ZM10.53 16.47C10.82 16.76 10.82 17.24 10.53 17.53C10.38 17.68 10.19 17.75 10 17.75C9.81 17.75 9.62 17.68 9.47 17.53L7.47 15.53C7.18 15.24 7.18 14.76 7.47 14.47L9.47 12.47C9.76 12.18 10.24 12.18 10.53 12.47C10.82 12.76 10.82 13.24 10.53 13.53L9.06 15L10.53 16.47ZM16.53 15.53L14.53 17.53C14.38 17.68 14.19 17.75 14 17.75C13.81 17.75 13.62 17.68 13.47 17.53C13.18 17.24 13.18 16.76 13.47 16.47L14.94 15L13.47 13.53C13.18 13.24 13.18 12.76 13.47 12.47C13.76 12.18 14.24 12.18 14.53 12.47L16.53 14.47C16.82 14.76 16.82 15.24 16.53 15.53ZM18.5 9.25H16.5C14.98 9.25 13.75 8.02 13.75 6.5V4.5C13.75 4.09 14.09 3.75 14.5 3.75C14.91 3.75 15.25 4.09 15.25 4.5V6.5C15.25 7.19 15.81 7.75 16.5 7.75H18.5C18.91 7.75 19.25 8.09 19.25 8.5C19.25 8.91 18.91 9.25 18.5 9.25Z"
+      fill="currentColor"
+    />
+  </svg>
+);

apps/docs/components/icons/bold/hash.tsx

@@ -0,0 +1,23 @@
+import {IconSvgProps} from "@/types";
+
+export const HashBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <path
+      d="M10.4199 13.4181H13.2599L13.5799 10.5781H10.7399L10.4199 13.4181Z"
+      fill="currentColor"
+    />
+    <path
+      d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM18.82 10.58H15.05L14.73 13.43H18.1C18.5 13.43 18.83 13.76 18.83 14.16C18.83 14.56 18.5 14.89 18.1 14.89H14.57L14.16 18.55C14.12 18.92 13.8 19.2 13.43 19.2C13.4 19.2 13.38 19.2 13.35 19.2C12.95 19.16 12.66 18.79 12.7 18.39L13.09 14.89H10.25L9.84 18.55C9.8 18.92 9.48 19.2 9.11 19.2C9.08 19.2 9.06 19.2 9.03 19.2C8.63 19.16 8.34 18.79 8.38 18.39L8.77 14.89H5.18C4.78 14.89 4.45 14.56 4.45 14.16C4.45 13.76 4.78 13.43 5.18 13.43H8.95L9.27 10.58H5.9C5.5 10.58 5.17 10.25 5.17 9.85C5.17 9.45 5.5 9.12 5.9 9.12H9.43L9.84 5.46C9.88 5.06 10.25 4.77 10.65 4.81C11.05 4.85 11.34 5.22 11.3 5.62L10.91 9.12H13.75L14.16 5.46C14.21 5.06 14.57 4.77 14.97 4.81C15.37 4.85 15.66 5.22 15.62 5.62L15.23 9.12H18.84C19.24 9.12 19.57 9.45 19.57 9.85C19.57 10.25 19.22 10.58 18.82 10.58Z"
+      fill="currentColor"
+    />
+  </svg>
+);

apps/docs/components/icons/bold/index.ts

@@ -11,3 +11,5 @@ export * from "./previous";
 export * from "./repeat-one";
 export * from "./shuffle";
 export * from "./info";
+export * from "./document-code";
+export * from "./hash";

apps/docs/components/icons/linear/chevron-right.tsx

@@ -0,0 +1,23 @@
+import {IconSvgProps} from "@/types";
+
+export const ChevronRightLinearIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={height || size}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={width || size}
+    {...props}
+  >
+    <path
+      d="M8.91003 19.9201L15.43 13.4001C16.2 12.6301 16.2 11.3701 15.43 10.6001L8.91003 4.08008"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth="1.5"
+    />
+  </svg>
+);

apps/docs/components/icons/linear/hash.tsx

@@ -0,0 +1,43 @@
+import {IconSvgProps} from "@/types";
+
+export const HashLinearIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={height || size}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={width || size}
+    {...props}
+  >
+    <path
+      d="M10 3L8 21"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M16 3L14 21"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M3.5 9H21.5"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M2.5 15H20.5"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+  </svg>
+);

apps/docs/components/icons/linear/index.ts

@@ -15,3 +15,6 @@ export * from "./paperclip";
 export * from "./link-squared";
 export * from "./link";
 export * from "./rotate-right";
+export * from "./hash";
+export * from "./chevron-right";
+export * from "./search";

apps/docs/components/icons/linear/search.tsx

@@ -0,0 +1,35 @@
+import {IconSvgProps} from "@/types";
+
+export const SearchLinearIcon = ({
+  size = 24,
+  strokeWidth = 1.5,
+  width,
+  height,
+  ...props
+}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={height || size}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={width || size}
+    {...props}
+  >
+    <path
+      d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={strokeWidth}
+    />
+    <path
+      d="M22 22L20 20"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={strokeWidth}
+    />
+  </svg>
+);

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

@@ -33,7 +33,7 @@ export const Hero = () => {
             as={NextLink}
             className="w-full md:w-auto"
             color="primary"
-            endIcon={
+            endContent={
               <ArrowRightIcon
                 className="group-data-[hover=true]:translate-x-0.5 transition-transform"
                 strokeWidth={2}
@@ -54,7 +54,7 @@ export const Hero = () => {
             href="https://github.com/nextui-org/nextui"
             radius="full"
             size="lg"
-            startIcon={<GithubIcon />}
+            startContent={<GithubIcon />}
             variant="bordered"
           >
             Github

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

@@ -56,7 +56,7 @@ export const InstallBanner = () => {
               as={NextLink}
               className="text-sm"
               color="secondary"
-              endIcon={
+              endContent={
                 <ArrowRightIcon
                   className="group-data-[hover=true]:translate-x-0.5 transition-transform"
                   strokeWidth={2}
@@ -75,7 +75,7 @@ export const InstallBanner = () => {
               href="https://github.com/nextui-org/nextui"
               radius="full"
               size="md"
-              startIcon={<GithubIcon />}
+              startContent={<GithubIcon />}
               variant="bordered"
             >
               Github

apps/docs/components/navbar.tsx

@@ -9,7 +9,6 @@ import {
   NavbarMenuToggle,
   NavbarBrand,
   NavbarItem,
-  Input,
   Link,
   Button,
   Kbd,
@@ -23,16 +22,22 @@ import {clsx} from "@nextui-org/shared-utils";
 import NextLink from "next/link";
 import {usePathname} from "next/navigation";
 import {includes} from "lodash";
-import {SearchIcon} from "@nextui-org/shared-icons";
 import {motion, AnimatePresence} from "framer-motion";
 import {useEffect} from "react";
 
 import {siteConfig} from "@/config/site";
 import {Route} from "@/libs/docs/page";
 import {LargeLogo, SmallLogo, ThemeSwitch} from "@/components";
-import {TwitterIcon, GithubIcon, DiscordIcon, HeartFilledIcon} from "@/components/icons";
+import {
+  TwitterIcon,
+  GithubIcon,
+  DiscordIcon,
+  HeartFilledIcon,
+  SearchLinearIcon,
+} from "@/components/icons";
 import {useIsMounted} from "@/hooks/use-is-mounted";
 import {DocsSidebar} from "@/components/docs/sidebar";
+import {useCmdkStore} from "@/components/cmdk";
 
 export interface NavbarProps {
   routes: Route[];
@@ -49,6 +54,8 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
 
   const pathname = usePathname();
 
+  const cmkdStore = useCmdkStore();
+
   useEffect(() => {
     if (isMenuOpen) {
       setIsMenuOpen(false);
@@ -61,24 +68,26 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
     "/docs/guide/upgrade-to-v2",
   ];
 
-  const searchInput = (
+  const searchButton = (
-    <Input
+    <Button
-      aria-label="Search"
+      aria-label="Quick search"
-      classNames={{
+      className="text-sm font-normal text-default-600 bg-default-400/20 dark:bg-default-500/20"
-        inputWrapper: "bg-default-400/20 dark:bg-default-500/20",
-        input: "text-sm",
-      }}
       endContent={
         <Kbd className="hidden py-0.5 px-2 lg:inline-block" keys={["command"]}>
           K
         </Kbd>
       }
-      labelPlacement="outside"
-      placeholder="Search..."
       startContent={
-        <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
+        <SearchLinearIcon
+          className="text-base text-default-400 pointer-events-none flex-shrink-0"
+          size={18}
+          strokeWidth={2}
+        />
       }
-    />
+      onPress={() => cmkdStore.onOpen()}
+    >
+      Quick Search...
+    </Button>
   );
 
   return (
@@ -105,8 +114,8 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
                   <motion.div animate={{opacity: 1}} exit={{opacity: 0}} initial={{opacity: 0}}>
                     <DropdownTrigger>
                       <Button
-                        className="hidden w-[65px] sm:flex gap-0.5 bg-default-400/20 dark:bg-default-500/20"
+                        className="hidden min-w-fit max-w-[64px] sm:flex gap-0.5 bg-default-400/20 dark:bg-default-500/20"
-                        endIcon={<ChevronDownIcon className="text-xs" />}
+                        endContent={<ChevronDownIcon className="text-xs" />}
                         radius="full"
                         size="xs"
                         variant="flat"
@@ -129,7 +138,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
               </DropdownMenu>
             </Dropdown>
           ) : (
-            <div className="w-[80px]" />
+            <div className="w-[64px]" />
           )}
         </NavbarBrand>
         <ul className="hidden lg:flex gap-4 justify-start">
@@ -184,6 +193,18 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
         <NavbarItem className="flex items-center">
           <ThemeSwitch />
         </NavbarItem>
+        <NavbarItem className="flex items-center">
+          <Button
+            isIconOnly
+            className="p-0"
+            radius="full"
+            size="xs"
+            variant="light"
+            onPress={() => cmkdStore.onOpen()}
+          >
+            <SearchLinearIcon className="text-default-600 dark:text-default-500 mt-px" size={20} />
+          </Button>
+        </NavbarItem>
         <NavbarMenuToggle aria-label={isMenuOpen ? "Close menu" : "Open menu"} />
       </NavbarContent>
 
@@ -200,14 +221,14 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
           </Link>
           <ThemeSwitch />
         </NavbarItem>
-        <NavbarItem className="hidden lg:flex">{searchInput}</NavbarItem>
+        <NavbarItem className="hidden lg:flex">{searchButton}</NavbarItem>
         <NavbarItem className="hidden md:flex">
           <Button
             isExternal
             as={Link}
             className="group text-sm font-normal text-default-600 bg-default-400/20 dark:bg-default-500/20"
             href={siteConfig.links.sponsor}
-            startIcon={
+            startContent={
               <HeartFilledIcon className="text-danger group-data-[hover=true]:animate-heartbeat" />
             }
             variant="flat"
@@ -222,7 +243,6 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
       </NavbarContent>
 
       <NavbarMenu>
-        {searchInput}
         <DocsSidebar className="mt-4" routes={routes} slug={slug} tag={tag} />
         {children}
       </NavbarMenu>

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

@@ -11,8 +11,8 @@ const MyButton = forwardRef((props, ref) => {
     spinnerSize,
     spinner = <Spinner color="current" size={spinnerSize} />,
     spinnerPlacement,
-    startIcon,
+    startContent,
-    endIcon,
+    endContent,
     isLoading,
     disableRipple,
     getButtonProps,
@@ -23,11 +23,11 @@ const MyButton = forwardRef((props, ref) => {
 
   return (
     <button ref={domRef} className={classNames} {...getButtonProps()}>
-      {startIcon}
+      {startContent}
       {isLoading && spinnerPlacement === "start" && spinner}
       {children}
       {isLoading && spinnerPlacement === "end" && spinner}
-      {endIcon}
+      {endContent}
       {!disableRipple && <Drip drips={drips} />}
     </button>
   );
@@ -52,8 +52,8 @@ const MyButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     spinnerSize,
     spinner = <Spinner color="current" size={spinnerSize} />,
     spinnerPlacement,
-    startIcon,
+    startContent,
-    endIcon,
+    endContent,
     isLoading,
     disableRipple,
     getButtonProps,
@@ -64,11 +64,11 @@ const MyButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
 
   return (
     <button ref={domRef} className={classNames} {...getButtonProps()}>
-      {startIcon}
+      {startContent}
       {isLoading && spinnerPlacement === "start" && spinner}
       {children}
       {isLoading && spinnerPlacement === "end" && spinner}
-      {endIcon}
+      {endContent}
       {!disableRipple && <Drip drips={drips} />}
     </button>
   );

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

@@ -72,10 +72,10 @@ import {CameraIcon} from './CameraIcon';
 export default function App() {
   return (
     <div className="flex gap-4 items-center">
-      <Button color="success" endIcon={<CameraIcon/>}>
+      <Button color="success" endContent={<CameraIcon/>}>
         Take a photo
       </Button>    
-      <Button color="danger" variant="bordered" startIcon={<UserIcon/>}>
+      <Button color="danger" variant="bordered" startContent={<UserIcon/>}>
         Delete user
       </Button>
     </div>

apps/docs/content/docs/components/button.mdx

@@ -62,7 +62,7 @@ You can also customize the loading spinner by passing the a custom component to
 
 ### With Icons
 
-You can add icons to the `Button` by passing the `startIcon` or `endIcon` props.
+You can add icons to the `Button` by passing the `startContent` or `endContent` props.
 
 <CodeDemo title="With Icons" files={buttonContent.icons} />
 
@@ -149,8 +149,8 @@ building buttons that work well across devices and interaction methods.
 | size             | `xs` \| `sm` \| `md` \| `lg` \| `xl`                                         | The button size.                                             | `md`      |
 | color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`  | The button color theme.                                      | `default` |
 | radius           | `none` \| `base` \| `sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `3xl` \| `full` | The button border radius.                                    | `xl`      |
-| startIcon        | `ReactNode`                                                                  | The button start content.                                    | -         |
+| startContent     | `ReactNode`                                                                  | The button start content.                                    | -         |
-| endIcon          | `ReactNode`                                                                  | The button end content.                                      | -         |
+| endContent       | `ReactNode`                                                                  | The button end content.                                      | -         |
 | spinner          | `ReactNode`                                                                  | Spinner to display when loading.                             | -         |
 | spinnerPlacement | `start` \| `end`                                                             | The spinner placement.                                       | `start`   |
 | fullWidth        | `boolean`                                                                    | Whether the button should take the full width of its parent. | `false`   |

apps/docs/content/docs/components/modal.mdx

@@ -152,7 +152,7 @@ You can customize the `Modal` component by passing custom Tailwind CSS classes t
 | defaultOpen               | `boolean`                                                                                           | Whether the modal is open by default (uncontrolled).                                                  | -               |
 | isDismissable             | `boolean`                                                                                           | Whether the modal can be closed by clicking on the overlay or pressing the <Kbd>Esc</Kbd> key.        | `true`          |
 | isKeyboardDismissDisabled | `boolean`                                                                                           | Whether pressing the <Kbd>Esc</Kbd> key to close the modal should be disabled.                        | `false`         |
-| showCloseButton           | `boolean`                                                                                           | Whether the modal should display a close button.                                                      | `true`          |
+| hideCloseButton           | `boolean`                                                                                           | Whether to hide the modal close button.                                                               | `false`         |
 | closeButton               | `ReactNode`                                                                                         | Custom close button to display on top right corner.                                                   | -               |
 | motionProps               | [MotionProps](#motion-props)                                                                        | The props to modify the framer motion animation. Use the `variants` API to create your own animation. |                 |
 | portalContainer           | `HTMLElement`                                                                                       | The container element in which the overlay portal will be placed.                                     | `document.body` |

apps/docs/hooks/use-update-effect.ts

@@ -0,0 +1,29 @@
+import {useEffect, useRef} from "react";
+
+/**
+ * React effect hook that invokes only on update.
+ * It doesn't invoke on mount
+ */
+export const useUpdateEffect: typeof useEffect = (effect, deps) => {
+  const renderCycleRef = useRef(false);
+  const effectCycleRef = useRef(false);
+
+  useEffect(() => {
+    const isMounted = renderCycleRef.current;
+    const shouldRun = isMounted && effectCycleRef.current;
+
+    if (shouldRun) {
+      return effect();
+    }
+    effectCycleRef.current = true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  useEffect(() => {
+    renderCycleRef.current = true;
+
+    return () => {
+      renderCycleRef.current = false;
+    };
+  }, []);
+};

apps/docs/layouts/docs.tsx

@@ -68,31 +68,8 @@ export const DocsLayout: FC<DocsLayoutProps> = ({
           )}
         </div>
       </main>
+
       <Footer align="right" />
-
-      {/* <div
-        aria-hidden="true"
-        className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-[-10]"
-      >
-        <Image
-          removeWrapper
-          alt="docs left background"
-          className="z-[-10]"
-          src="/gradients/docs-left.svg"
-        />
-      </div>
-
-      <div
-        aria-hidden="true"
-        className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-[-10] rotate-12"
-      >
-        <Image
-          removeWrapper
-          alt="docs right background"
-          className="z-[-10]"
-          src="/gradients/docs-right.svg"
-        />
-      </div> */}
     </div>
   );
 };

apps/docs/package.json

@@ -33,11 +33,13 @@
     "@react-stately/tree": "^3.6.1",
     "@vercel/analytics": "^1.0.1",
     "canvas-confetti": "^1.4.0",
+    "cmdk": "^0.2.0",
     "color2k": "^2.0.2",
     "framer-motion": "^10.12.16",
     "gray-matter": "^4.0.3",
     "hast-util-to-html": "7.1.2",
     "lodash": "^4.17.21",
+    "match-sorter": "^6.3.1",
     "mini-svg-data-uri": "^1.4.3",
     "mitt": "3.0.0",
     "next": "13.4.7-canary.1",
@@ -50,6 +52,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-live": "^2.3.0",
+    "react-multi-ref": "^1.0.1",
     "refractor": "3.3.1",
     "rehype": "11.0.0",
     "rehype-parse": "7.0.1",
@@ -61,9 +64,11 @@
     "shelljs": "^0.8.4",
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwind-variants": "^0.1.8",
-    "unified": "^9.2.2"
+    "unified": "^9.2.2",
+    "zustand": "^4.3.8"
   },
   "devDependencies": {
+    "@docusaurus/utils": "2.0.0-beta.3",
     "@next/bundle-analyzer": "^13.4.6",
     "@next/env": "^13.4.2",
     "@react-types/shared": "^3.18.0",
@@ -77,20 +82,19 @@
     "@types/react-dom": "18.2.4",
     "@types/refractor": "^3.0.2",
     "@types/shelljs": "^0.8.9",
-    "@docusaurus/utils": "2.0.0-beta.3",
     "@types/uuid": "^8.3.1",
-    "uuid": "^8.3.2",
+    "algoliasearch": "^4.10.3",
     "autoprefixer": "^10.4.14",
     "dotenv": "^16.0.1",
-    "prettier": "^2.7.1",
-    "markdown-toc": "^1.2.0",
-    "algoliasearch": "^4.10.3",
     "eslint-config-next": "^11.0.0",
+    "markdown-toc": "^1.2.0",
     "next-sitemap": "^4.0.7",
     "node-fetch": "^3.2.10",
     "postcss": "^8.4.21",
+    "prettier": "^2.7.1",
     "tailwindcss": "^3.2.7",
     "tsx": "^3.8.2",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "uuid": "^8.3.2"
   }
 }

apps/docs/scripts/update-search-meta.ts

@@ -36,16 +36,24 @@ interface TOCResultItem {
   seen: number
 }
 
+const getUrl = (slug: string) => {
+  const url = removePrefix(slug, "/")
+
+
+  return `/docs${url}`
+}
+
 async function getMDXMeta(file: string) {
   const {content, frontMatter: _frontMatter} = await parseMarkdownFile(file);
 
   const frontMatter = _frontMatter as Record<string, any>
   const tableOfContent = toc(content);
   const json = tableOfContent.json as TOCResultItem[]
-  const slug = fileToPath(file)
+  let slug = fileToPath(file)
     .replace(`/${docsRootFolder}`, "")
     .replace(process.cwd(), "");
 
+
   const result:ResultType[] = [];
   const title = !!frontMatter.title ? frontMatter.title : "";
 
@@ -53,18 +61,18 @@ async function getMDXMeta(file: string) {
     content: title,
     objectID: uuid(),
     type: "lvl1",
-    url: removePrefix(slug, "/"),
+    url: getUrl(slug),
     hierarchy: {
       lvl1: title,
     },
   });
 
   json.forEach((item, index) => {
-    result.push({
+    item.content !== title && result.push({
       content: item.content,
       objectID: uuid(),
       type: `lvl${item.lvl}`,
-      url: removePrefix(slug, "/") + `#${item.slug}`,
+      url: getUrl(slug) + `#${item.slug}`,
       hierarchy: {
         lvl1: title,
         lvl2: item.lvl === 2 ? item.content : json[index - 1]?.content ?? null,
@@ -78,16 +86,9 @@ async function getMDXMeta(file: string) {
 
 async function getSearchMeta(saveMode: "algolia" | "local" = "local") {
   dotenv.config();
-  // Initialize Algolia client
-  const client = algoliasearch(
-    process.env.ALGOLIA_APP_ID || "",
-    process.env.ALGOLIA_ADMIN_API_KEY || "",
-  );
 
   try {
-    const tmpIndex = await client.initIndex("prod_docs_tmp");
+  
-    const mainIndex = await client.initIndex("prod_docs");
-
     let json: any = [];
 
     const files = shell
@@ -128,7 +129,14 @@ async function getSearchMeta(saveMode: "algolia" | "local" = "local") {
       return;
     }
 
+    // Initialize Algolia client
+    const client = algoliasearch(
+      process.env.ALGOLIA_APP_ID || "",
+      process.env.ALGOLIA_ADMIN_API_KEY || "",
+    );
   
+    const tmpIndex = await client.initIndex("prod_docs_tmp");
+    const mainIndex = await client.initIndex("prod_docs");
 
     // Get settings of main index and set them to the temp index
     const indexSettings = await mainIndex.getSettings();

packages/components/accordion/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nextui-org/accordion
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230618174149
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/accordion",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
   "keywords": [
     "react",

packages/components/avatar/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/avatar
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-image@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/avatar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/avatar",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
   "keywords": [
     "avatar"

packages/components/badge/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/badge
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/badge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/badge",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "Badges are used as a small numerical value or status descriptor for UI elements.",
   "keywords": [
     "badge"

packages/components/button/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/button
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/spinner@0.0.0-dev-v2-20230618174149
+  - @nextui-org/drip@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/button/__tests__/button.test.tsx

@@ -41,7 +41,7 @@ describe("Button", () => {
 
   it("should renders with start icon", () => {
     const wrapper = render(
-      <Button startIcon={<span data-testid="start-icon">Icon</span>}>Button</Button>,
+      <Button startContent={<span data-testid="start-icon">Icon</span>}>Button</Button>,
     );
 
     expect(wrapper.getByTestId("start-icon")).toBeInTheDocument();
@@ -49,7 +49,7 @@ describe("Button", () => {
 
   it("should renders with end icon", () => {
     const wrapper = render(
-      <Button endIcon={<span data-testid="end-icon">Icon</span>}>Button</Button>,
+      <Button endContent={<span data-testid="end-icon">Icon</span>}>Button</Button>,
     );
 
     expect(wrapper.getByTestId("end-icon")).toBeInTheDocument();

packages/components/button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/button",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "Buttons allow users to perform actions and choose with a single tap.",
   "keywords": [
     "button"

packages/components/button/src/button.tsx

@@ -16,8 +16,8 @@ const Button = forwardRef<ButtonProps, "button">((props, ref) => {
     spinnerSize,
     spinner = <Spinner color="current" size={spinnerSize} />,
     spinnerPlacement,
-    startIcon,
+    startContent,
-    endIcon,
+    endContent,
     isLoading,
     disableRipple,
     getButtonProps,
@@ -28,11 +28,11 @@ const Button = forwardRef<ButtonProps, "button">((props, ref) => {
 
   return (
     <Component ref={domRef} className={styles} {...getButtonProps()}>
-      {startIcon}
+      {startContent}
       {isLoading && spinnerPlacement === "start" && spinner}
       {children}
       {isLoading && spinnerPlacement === "end" && spinner}
-      {endIcon}
+      {endContent}
       {!disableRipple && <Drip drips={drips} />}
     </Component>
   );

packages/components/button/src/use-button.ts

@@ -33,11 +33,11 @@ export interface UseButtonProps
   /**
    * The button start content.
    */
-  startIcon?: ReactNode;
+  startContent?: ReactNode;
   /**
    * The button end content.
    */
-  endIcon?: ReactNode;
+  endContent?: ReactNode;
   /**
    * Spinner to display when loading.
    * @see https://nextui.org/components/spinner
@@ -63,8 +63,8 @@ export function useButton(props: UseButtonProps) {
     ref,
     as,
     children,
-    startIcon: startIconProp,
+    startContent: startContentProp,
-    endIcon: endIconProp,
+    endContent: endContentProp,
     autoFocus,
     className,
     spinner,
@@ -182,8 +182,8 @@ export function useButton(props: UseButtonProps) {
         })
       : null;
 
-  const startIcon = getIconClone(startIconProp);
+  const startContent = getIconClone(startContentProp);
-  const endIcon = getIconClone(endIconProp);
+  const endContent = getIconClone(endContentProp);
 
   const spinnerSize = useMemo(() => {
     const buttonSpinnerSizeMap: Record<string, SpinnerProps["size"]> = {
@@ -204,8 +204,8 @@ export function useButton(props: UseButtonProps) {
     drips,
     spinner,
     styles,
-    startIcon,
+    startContent,
-    endIcon,
+    endContent,
     isLoading,
     spinnerPlacement,
     spinnerSize,

packages/components/button/stories/button.stories.tsx

@@ -109,8 +109,8 @@ DisableRipple.args = {
 export const WithIcons = Template.bind({});
 WithIcons.args = {
   ...defaultProps,
-  startIcon: <Notification className="fill-current" />,
+  startContent: <Notification className="fill-current" />,
-  endIcon: <Camera className="fill-current" />,
+  endContent: <Camera className="fill-current" />,
 };
 
 export const IconButton = Template.bind({});

packages/components/card/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/card
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/drip@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/card/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/card",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "Card is a container for text, photos, and actions in the context of a single subject.",
   "keywords": [
     "card"

packages/components/checkbox/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/checkbox
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/checkbox",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
   "keywords": [
     "checkbox"

packages/components/chip/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/chip
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/chip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/chip",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "Chips help people enter information, make selections, filter content, or trigger actions.",
   "keywords": [
     "chip"

packages/components/code/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/code
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/code/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/code",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "Code is a component used to display inline code.",
   "keywords": [
     "code"

packages/components/divider/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/divider
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/divider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/divider",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": ". A separator is a visual divider between two groups of content",
   "keywords": [
     "divider"

packages/components/drip/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @nextui-org/drip
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/drip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/drip",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "A ripple effect for ensuring that the user fells the system is reacting instantaneously",
   "keywords": [
     "drip"

packages/components/dropdown/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/dropdown
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-is-mobile@0.0.0-dev-v2-20230618174149
+  - @nextui-org/popover@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/dropdown/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/dropdown",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "A dropdown displays a list of actions or options that a user can choose.",
   "keywords": [
     "dropdown"

packages/components/image/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/image
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-image@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/image",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "A simple image component",
   "keywords": [
     "image"

packages/components/input/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/input
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-aria-field@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/input",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "The input component is designed for capturing user input within a text field.",
   "keywords": [
     "input"

packages/components/kbd/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/kbd
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/kbd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/kbd",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "The keyboard key components indicates which key or set of keys used to execute a specificv  action",
   "keywords": [
     "kbd"

packages/components/link/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/link
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/link",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an <a>",
   "keywords": [
     "link"

packages/components/modal/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @nextui-org/modal
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/use-aria-modal-overlay@0.0.0-dev-v2-20230618174149
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-disclosure@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/modal",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "Displays a dialog with a custom content that requires attention or provides additional information.",
   "keywords": [
     "modal"

packages/components/modal/src/modal-content.tsx

@@ -28,7 +28,7 @@ const ModalContent = forwardRef<ModalContentProps, "section">((props, _) => {
     motionProps,
     backdrop,
     closeButton,
-    showCloseButton,
+    hideCloseButton,
     disableAnimation,
     getDialogProps,
     getBackdropProps,
@@ -57,7 +57,7 @@ const ModalContent = forwardRef<ModalContentProps, "section">((props, _) => {
     <>
       <DismissButton onDismiss={onClose} />
       <Component {...getDialogProps(mergeProps(dialogProps, otherProps))}>
-        {showCloseButton && closeButtonContent}
+        {!hideCloseButton && closeButtonContent}
         {typeof children === "function" ? children(onClose) : children}
       </Component>
       <DismissButton onDismiss={onClose} />

packages/components/modal/src/use-modal.ts

@@ -25,10 +25,10 @@ interface Props extends HTMLNextUIProps<"section"> {
    */
   motionProps?: HTMLMotionProps<"section">;
   /**
-   * Determines if the modal should have a close button in the top right corner.
+   * Determines whether to hide the modal close button.
-   * @default true
+   * @default false
    */
-  showCloseButton?: boolean;
+  hideCloseButton?: boolean;
   /**
    * Custom modal close button element.
    */
@@ -84,7 +84,7 @@ export function useModal(originalProps: UseModalProps) {
     motionProps,
     closeButton,
     isDismissable = true,
-    showCloseButton = true,
+    hideCloseButton = false,
     portalContainer,
     isKeyboardDismissDisabled = false,
     onClose,
@@ -188,7 +188,7 @@ export function useModal(originalProps: UseModalProps) {
     classNames,
     isDismissable,
     closeButton,
-    showCloseButton,
+    hideCloseButton,
     portalContainer,
     backdrop: originalProps.backdrop ?? "opaque",
     isOpen: state.isOpen,

packages/components/navbar/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/navbar
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230618174149
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-scroll-position@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/navbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/navbar",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
   "keywords": [
     "navbar"

packages/components/navbar/stories/navbar.stories.tsx

@@ -237,7 +237,7 @@ const WithDropdownTemplate: ComponentStory<typeof Navbar> = (args: NavbarProps)
           <Dropdown>
             <NavbarItem>
               <DropdownTrigger>
-                <Button endIcon={icons.chevron} radius="full" variant="light">
+                <Button endContent={icons.chevron} radius="full" variant="light">
                   Features
                 </Button>
               </DropdownTrigger>

packages/components/pagination/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/pagination
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-pagination@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/pagination",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "The Pagination component allows you to display active page and navigate between multiple pages.",
   "keywords": [
     "pagination"

packages/components/popover/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nextui-org/popover
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/button@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/popover/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/popover",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "A popover is an overlay element positioned relative to a trigger.",
   "keywords": [
     "popover"

packages/components/progress/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/progress
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-aria-label@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-is-mounted@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/progress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/progress",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
   "keywords": [
     "progress"

packages/components/radio/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/radio
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/radio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/radio",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "Radios allow users to select a single option from a list of mutually exclusive options.",
   "keywords": [
     "radio"

packages/components/skeleton/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/skeleton
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/skeleton/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/skeleton",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "Skeleton is used to display the loading state of some component.",
   "keywords": [
     "skeleton"

packages/components/snippet/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nextui-org/snippet
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-clipboard@0.0.0-dev-v2-20230618174149
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230618174149
+  - @nextui-org/button@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/snippet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/snippet",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "Display a snippet of copyable code for the command line.",
   "keywords": [
     "snippet"

packages/components/spacer/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/spacer
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/spacer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/spacer",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "A flexible spacer component designed to create consistent spacing and maintain alignment in your layout.",
   "keywords": [
     "spacer"

packages/components/spinner/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/spinner
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/spinner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/spinner",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "Loaders express an unspecified wait time or display the length of a process.",
   "keywords": [
     "loading",

packages/components/switch/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/switch
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/switch",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
   "keywords": [
     "switch"

packages/components/table/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/table
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230618174149
+  - @nextui-org/spacer@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/table",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "Tables are used to display tabular data using rows and columns. ",
   "keywords": [
     "table"

packages/components/tabs/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/tabs
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-is-mounted@0.0.0-dev-v2-20230618174149
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/tabs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/tabs",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "Tabs organize content into multiple sections and allow users to navigate between them.",
   "keywords": [
     "tabs"

packages/components/tooltip/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/tooltip
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/tooltip",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "A React Component for rendering dynamically positioned Tooltips",
   "keywords": [
     "tooltip"

packages/components/user/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/user
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/avatar@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/components/user/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/user",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "Flexible User Profile Component.",
   "keywords": [
     "user"

packages/core/react/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @nextui-org/react
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/pagination@0.0.0-dev-v2-20230618174149
+  - @nextui-org/accordion@0.0.0-dev-v2-20230618174149
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230618174149
+  - @nextui-org/dropdown@0.0.0-dev-v2-20230618174149
+  - @nextui-org/progress@0.0.0-dev-v2-20230618174149
+  - @nextui-org/skeleton@0.0.0-dev-v2-20230618174149
+  - @nextui-org/divider@0.0.0-dev-v2-20230618174149
+  - @nextui-org/popover@0.0.0-dev-v2-20230618174149
+  - @nextui-org/snippet@0.0.0-dev-v2-20230618174149
+  - @nextui-org/spinner@0.0.0-dev-v2-20230618174149
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230618174149
+  - @nextui-org/avatar@0.0.0-dev-v2-20230618174149
+  - @nextui-org/button@0.0.0-dev-v2-20230618174149
+  - @nextui-org/navbar@0.0.0-dev-v2-20230618174149
+  - @nextui-org/spacer@0.0.0-dev-v2-20230618174149
+  - @nextui-org/switch@0.0.0-dev-v2-20230618174149
+  - @nextui-org/badge@0.0.0-dev-v2-20230618174149
+  - @nextui-org/image@0.0.0-dev-v2-20230618174149
+  - @nextui-org/input@0.0.0-dev-v2-20230618174149
+  - @nextui-org/modal@0.0.0-dev-v2-20230618174149
+  - @nextui-org/radio@0.0.0-dev-v2-20230618174149
+  - @nextui-org/table@0.0.0-dev-v2-20230618174149
+  - @nextui-org/card@0.0.0-dev-v2-20230618174149
+  - @nextui-org/chip@0.0.0-dev-v2-20230618174149
+  - @nextui-org/code@0.0.0-dev-v2-20230618174149
+  - @nextui-org/drip@0.0.0-dev-v2-20230618174149
+  - @nextui-org/link@0.0.0-dev-v2-20230618174149
+  - @nextui-org/tabs@0.0.0-dev-v2-20230618174149
+  - @nextui-org/user@0.0.0-dev-v2-20230618174149
+  - @nextui-org/kbd@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/react",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "🚀 Beautiful and modern React UI library.",
   "author": "Junior Garcia <jrgarciadev@gmail.com>",
   "homepage": "https://nextui.org",

packages/core/system/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nextui-org/system
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/core/system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/system",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "NextUI system primitives",
   "keywords": [
     "system"

packages/core/theme/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nextui-org/theme
 
+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+
 ## 0.0.0-dev-v2-20230617142344
 
 ### Patch Changes

packages/core/theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/theme",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
   "description": "The default theme for NextUI components",
   "keywords": [
     "theme",