Merge branch 'main' of github.com:nextui-org/nextui into canary

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

@@ -188,9 +188,11 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
                           style={{
                             ...props.style,
                             ...(highlightStyleToken.some((t) => {
+                              const content = token.content.trim();
+
                               const regex = t instanceof RegExp ? t : new RegExp(t);
 
-                              return regex.test(token.content.trim());
+                              return regex.test(content);
                             })
                               ? {color: "rgb(var(--code-function))"}
                               : {}),

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

@@ -8,14 +8,14 @@ type PackageManager = {
 };
 
 const importTabs: PackageManager[] = [
-  {
-    key: "main",
-    name: "Main",
-  },
   {
     key: "individual",
     name: "Individual",
   },
+  {
+    key: "main",
+    name: "Global",
+  },
 ];
 
 export interface ImportTabsProps {

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

@@ -1,16 +1,17 @@
-import {Tabs, Tab, Snippet} from "@nextui-org/react";
+import {Tabs, Tab, Snippet, Code} from "@nextui-org/react";
 import {Key, useState} from "react";
 
 import Codeblock from "./codeblock";
+import {Blockquote} from "./blockquote";
 
 import {YarnIcon, NpmSmallIcon, PnpmIcon, BunIcon, CLIBoldIcon} from "@/components/icons";
 
 type PackageManagerName = "cli" | "npm" | "yarn" | "pnpm" | "bun";
 
 type PackageManager = {
   icon: JSX.Element;
-  label?: string;
   name: PackageManagerName;
+  label?: string;
 };
 
 const packageManagers: PackageManager[] = [
@@ -39,9 +40,13 @@ const packageManagers: PackageManager[] = [
 
 export interface PackageManagersProps {
   commands: Partial<Record<PackageManagerName, React.Key>>;
+  showGlobalInstallWarning?: boolean;
 }
 
-export const PackageManagers = ({commands}: PackageManagersProps) => {
+export const PackageManagers = ({
+  commands,
+  showGlobalInstallWarning = false,
+}: PackageManagersProps) => {
   const [selectedManager, setSelectedManager] = useState<PackageManagerName>(
     commands.cli ? "cli" : "npm",
   );
@@ -51,44 +56,52 @@ export const PackageManagers = ({commands}: PackageManagersProps) => {
   };
 
   return (
-    <Tabs
-      aria-label="NextUI installation commands"
-      classNames={{
-        base: "group mt-4 min-w-[300px] w-full overflow-x-auto",
-        tabList: "h-10",
-      }}
-      selectedKey={selectedManager}
-      variant="underlined"
-      onSelectionChange={handleSelectionChange}
-    >
-      {packageManagers.map(({name, label, icon}) => {
-        if (!commands[name]) return null;
+    <>
+      <Tabs
+        aria-label="NextUI installation commands"
+        classNames={{
+          base: "group mt-4 min-w-[300px] w-full overflow-x-auto",
+          tabList: "h-10",
+        }}
+        selectedKey={selectedManager}
+        variant="underlined"
+        onSelectionChange={handleSelectionChange}
+      >
+        {packageManagers.map(({name, label, icon}) => {
+          if (!commands[name]) return null;
 
-        return (
-          <Tab
-            key={name}
-            title={
-              <div className="flex items-center space-x-2">
-                {icon}
-                <span>{label || name}</span>
-              </div>
-            }
-          >
-            <Snippet
-              disableTooltip
-              fullWidth
-              hideSymbol
-              classNames={{
-                base: "bg-code-background text-code-foreground",
-                pre: "font-light text-base",
-                copyButton: "text-lg text-zinc-500 mr-2",
-              }}
+          return (
+            <Tab
+              key={name}
+              title={
+                <div className="flex items-center space-x-2">
+                  {icon}
+                  <span>{label || name}</span>
+                </div>
+              }
             >
-              <Codeblock removeIndent codeString={commands[name] as string} language="bash" />
-            </Snippet>
-          </Tab>
-        );
-      })}
-    </Tabs>
+              <Snippet
+                disableTooltip
+                fullWidth
+                hideSymbol
+                classNames={{
+                  base: "bg-code-background text-code-foreground",
+                  pre: "font-light text-base",
+                  copyButton: "text-lg text-zinc-500 mr-2",
+                }}
+              >
+                <Codeblock removeIndent codeString={commands[name] as string} language="bash" />
+              </Snippet>
+            </Tab>
+          );
+        })}
+      </Tabs>
+      {showGlobalInstallWarning && (
+        <Blockquote className="my-2">
+          No need to install this package if <Code>@nextui-org/react</Code> is already installed
+          globally.
+        </Blockquote>
+      )}
+    </>
   );
 };

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

@@ -11,7 +11,7 @@ export default function App() {
         alt="Woman listing to music"
         className="object-cover"
         height={200}
-        src="/images/hero-card.jpeg"
+        src="https://nextui.org/images/hero-card.jpeg"
         width={200}
       />
       <CardFooter className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">

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

@@ -165,7 +165,7 @@ export default function App() {
               className="object-cover"
               height={200}
               shadow="md"
-              src="/images/album-cover.png"
+              src="https://nextui.org/images/album-cover.png"
               width="100%"
             />
           </div>

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

@@ -7,7 +7,7 @@ export default function App() {
     <Card className="max-w-[340px]">
       <CardHeader className="justify-between">
         <div className="flex gap-5">
-          <Avatar isBordered radius="full" size="md" src="/avatars/avatar-1.png" />
+          <Avatar isBordered radius="full" size="md" src="https://nextui.org/avatars/avatar-1.png" />
           <div className="flex flex-col gap-1 items-start justify-center">
             <h4 className="text-small font-semibold leading-none text-default-600">Zoey Lang</h4>
             <h5 className="text-small tracking-tight text-default-400">@zoeylang</h5>

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

@@ -12,7 +12,7 @@ export default function App() {
         removeWrapper
         alt="Card background"
         className="z-0 w-full h-full object-cover"
-        src="/images/card-example-4.jpeg"
+        src="https://nextui.org/images/card-example-4.jpeg"
       />
     </Card>
     <Card className="col-span-12 sm:col-span-4 h-[300px]">
@@ -24,7 +24,7 @@ export default function App() {
         removeWrapper
         alt="Card background"
         className="z-0 w-full h-full object-cover"
-        src="/images/card-example-3.jpeg"
+        src="https://nextui.org/images/card-example-3.jpeg"
       />
     </Card>
     <Card className="col-span-12 sm:col-span-4 h-[300px]">
@@ -36,7 +36,7 @@ export default function App() {
         removeWrapper
         alt="Card background"
         className="z-0 w-full h-full object-cover"
-        src="/images/card-example-2.jpeg"
+        src="https://nextui.org/images/card-example-2.jpeg"
       />
     </Card>
     <Card isFooterBlurred className="w-full h-[300px] col-span-12 sm:col-span-5">
@@ -48,7 +48,7 @@ export default function App() {
         removeWrapper
         alt="Card example background"
         className="z-0 w-full h-full scale-125 -translate-y-6 object-cover"
-        src="/images/card-example-6.jpeg"
+        src="https://nextui.org/images/card-example-6.jpeg"
       />
       <CardFooter className="absolute bg-white/30 bottom-0 border-t-1 border-zinc-100/50 z-10 justify-between">
         <div>
@@ -69,14 +69,14 @@ export default function App() {
         removeWrapper
         alt="Relaxing app background"
         className="z-0 w-full h-full object-cover"
-        src="/images/card-example-5.jpeg"
+        src="https://nextui.org/images/card-example-5.jpeg"
       />
       <CardFooter className="absolute bg-black/40 bottom-0 z-10 border-t-1 border-default-600 dark:border-default-100">
         <div className="flex flex-grow gap-2 items-center">
           <Image
             alt="Breathing app icon"
             className="rounded-full w-10 h-11 bg-black"
-            src="/images/breathing-app-icon.jpeg"
+            src="https://nextui.org/images/breathing-app-icon.jpeg"
           />
           <div className="flex flex-col">
             <p className="text-tiny text-white/60">Breathing App</p>

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

@@ -12,7 +12,7 @@ export default function App() {
         <Image
           alt="Card background"
           className="object-cover rounded-xl"
-          src="/images/hero-card-complete.jpeg"
+          src="https://nextui.org/images/hero-card-complete.jpeg"
           width={270}
         />
       </CardBody>

apps/docs/content/docs/components/accordion.mdx

@@ -18,6 +18,7 @@ Accordion display a list of high-level options that can expand/collapse to revea
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add accordion",
     npm: "npm install @nextui-org/accordion",

apps/docs/content/docs/components/autocomplete.mdx

@@ -18,6 +18,7 @@ An autocomplete combines a text input with a listbox, allowing users to filter a
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add autocomplete",
     npm: "npm install @nextui-org/autocomplete",
@@ -209,6 +210,7 @@ The following example shows how you would create a controlled `Autocomplete`, co
 We recommend using the `useFilter` hook from [@react-aria/i18n](https://react-spectrum.adobe.com/react-aria/useFilter.html#usefilter) to manage the filtering of the items.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @react-aria/i18n",
     yarn: "yarn add @react-aria/i18n",
@@ -257,6 +259,7 @@ Autocomplete supports asynchronous filtering, in the example below we are using
 from [react-aria](https://react-spectrum.adobe.com) to handle asynchronous loading and filtering of data from a server.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @react-stately/data",
     yarn: "yarn add @react-stately/data",
@@ -285,6 +288,7 @@ Autocomplete supports asynchronous loading, in the example below we are using a
 The `isLoading` prop is used to show a loading indicator instead of the selector icon when the data is being fetched.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @nextui-org/use-infinite-scroll",
     yarn: "yarn add @nextui-org/use-infinite-scroll",

apps/docs/content/docs/components/avatar.mdx

@@ -19,6 +19,7 @@ The Avatar component is used to represent a user, and displays the profile pictu
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add avatar",
     npm: "npm install @nextui-org/avatar",

apps/docs/content/docs/components/badge.mdx

@@ -18,6 +18,7 @@ Badges are used as a small numerical value or status descriptor for UI elements.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add badge",
     npm: "npm install @nextui-org/badge",

apps/docs/content/docs/components/breadcrumbs.mdx

@@ -18,6 +18,7 @@ Breadcrumbs display a hierarchy of links to the current page or resource in an a
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add breadcrumbs",
     npm: "npm install @nextui-org/breadcrumbs",

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

@@ -18,6 +18,7 @@ Buttons allow users to perform actions and choose with a single tap.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add button",
     npm: "npm install @nextui-org/button",

apps/docs/content/docs/components/calendar.mdx

@@ -18,6 +18,7 @@ A calendar consists of a grouping element containing one or more date grids (e.g
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add calendar",
     npm: "npm install @nextui-org/calendar",

apps/docs/content/docs/components/card.mdx

@@ -18,6 +18,7 @@ Card is a container for text, photos, and actions in the context of a single sub
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add card",
     npm: "npm install @nextui-org/card",

apps/docs/content/docs/components/checkbox-group.mdx

@@ -18,6 +18,7 @@ A CheckboxGroup allows users to select one or more items from a list of choices.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add checkbox",
     npm: "npm install @nextui-org/checkbox",

apps/docs/content/docs/components/checkbox.mdx

@@ -18,6 +18,7 @@ Checkboxes allow users to select multiple items from a list of individual items,
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add checkbox",
     npm: "npm install @nextui-org/checkbox",

apps/docs/content/docs/components/chip.mdx

@@ -18,6 +18,7 @@ A Chip is a small block of essential information that represent an input, attrib
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add chip",
     npm: "npm install @nextui-org/chip",

apps/docs/content/docs/components/circular-progress.mdx

@@ -18,6 +18,7 @@ Circular progress indicators are utilized to indicate an undetermined wait perio
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add progress",
     npm: "npm install @nextui-org/progress",

apps/docs/content/docs/components/code.mdx

@@ -18,6 +18,7 @@ Code is a component used to display inline code.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add code",
     npm: "npm install @nextui-org/code",