feat(docs): import tabs added, link docs in progress

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

@@ -33,6 +33,7 @@ interface CodeDemoProps extends UseCodeDemoProps {
   initialEditorOpen?: boolean;
   enableResize?: boolean;
   showPreview?: boolean;
+  defaultExpanded?: boolean;
   showWindowActions?: boolean;
   iframeSrc?: string;
   asIframe?: boolean;
@@ -50,6 +51,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
   showSandpackPreview = false,
   showWindowActions = false,
   enableResize = false,
+  defaultExpanded = false,
   previewHeight = "auto",
   overflow = "visible",
   highlightedLines,
@@ -76,6 +78,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
         />
       )}
       <DynamicSandpack
+        defaultExpanded={defaultExpanded}
         files={files}
         highlightedLines={highlightedLines}
         showEditor={showEditor}

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

@@ -0,0 +1,58 @@
+import {Tabs, Tab, Snippet} from "@nextui-org/react";
+
+import {Codeblock} from "./codeblock";
+
+type PackageManager = {
+  key: string;
+  name: string;
+};
+
+const importTabs: PackageManager[] = [
+  {
+    key: "global",
+    name: "Global",
+  },
+  {
+    key: "individual",
+    name: "Individual",
+  },
+];
+
+export interface ImportTabsProps {
+  commands: Record<string, string>;
+}
+
+export const ImportTabs = ({commands}: ImportTabsProps) => {
+  return (
+    <Tabs
+      disableAnimation
+      aria-label="NextUI import commands"
+      classNames={{
+        base: "group mt-4",
+        tabList: "relative h-10",
+      }}
+      variant="underlined"
+    >
+      {importTabs.map(({key, name}) => {
+        if (!commands[key]) return null;
+
+        return (
+          <Tab key={key} title={name}>
+            <Snippet
+              disableTooltip
+              fullWidth
+              hideSymbol
+              classNames={{
+                base: "bg-code-background text-code-foreground",
+                pre: "font-light text-base",
+                copyButton: "text-lg text-code-foreground/50",
+              }}
+            >
+              <Codeblock codeString={commands[key] as string} language="jsx" />
+            </Snippet>
+          </Tab>
+        );
+      })}
+    </Tabs>
+  );
+};

apps/docs/components/docs/components/index.ts

@@ -4,3 +4,4 @@ export * from "./blockquote";
 export * from "./community";
 export * from "./frameworks";
 export * from "./code-demo";
+export * from "./import-tabs";

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

@@ -1,4 +1,4 @@
-import {Tabs, TabItem, Snippet} from "@nextui-org/react";
+import {Tabs, Tab, Snippet} from "@nextui-org/react";
 
 import {Codeblock} from "./codeblock";
 
@@ -44,7 +44,7 @@ export const PackageManagers = ({commands}: PackageManagersProps) => {
         if (!commands[name]) return null;
 
         return (
-          <TabItem
+          <Tab
             key={name}
             title={
               <div className="flex items-center space-x-2">
@@ -65,7 +65,7 @@ export const PackageManagers = ({commands}: PackageManagersProps) => {
             >
               <Codeblock codeString={commands[name] as string} language="bash" />
             </Snippet>
-          </TabItem>
+          </Tab>
         );
       })}
     </Tabs>

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import {useMemo, useState} from "react";
-import {Tabs, TabItem, Card, CardBody, Image, Button, RadioGroup, Radio} from "@nextui-org/react";
+import {Tabs, Tab, Card, CardBody, Image, Button, RadioGroup, Radio} from "@nextui-org/react";
 import get from "lodash/get";
 import NextLink from "next/link";
 
@@ -103,7 +103,7 @@ const CustomThemesExample = ({
         onSelectionChange={onSelectionChange}
       >
         {(item) => (
-          <TabItem
+          <Tab
             key={item.id}
             title={
               <div className="flex flex-col justify-center items-center gap-2">

apps/docs/components/marketing/hero.tsx

@@ -10,7 +10,7 @@ import {
   Spinner,
   Pagination,
   Tabs,
-  TabItem,
+  Tab,
   Link,
 } from "@nextui-org/react";
 import {clsx} from "@nextui-org/shared-utils";
@@ -91,9 +91,9 @@ const FloatingComponents: React.FC<{mounted: boolean}> = ({mounted}) => {
           radius="full"
           size="xs"
         >
-          <TabItem key="notes" title="Notes" />
+          <Tab key="notes" title="Notes" />
-          <TabItem key="tasks" title="Tasks" />
+          <Tab key="tasks" title="Tasks" />
-          <TabItem key="files" title="Files" />
+          <Tab key="files" title="Files" />
         </Tabs>
 
         <UserTwitterCard className="absolute left-[80px] -top-[80px] animate-[levitate_16s_ease_infinite] border-none" />

apps/docs/components/sandpack/code-viewer.tsx

@@ -24,6 +24,7 @@ export interface CodeViewerProps {
   decorators?: Decorators;
   code?: string;
   wrapContent?: boolean;
+  defaultExpanded?: boolean;
   /**
    * This provides a way to control how some components are going to
    * be initialized on the page. The CodeEditor and the Preview components
@@ -38,14 +39,23 @@ const INITIAL_HEIGHT = "200px";
 
 export const SandpackCodeViewer = React.forwardRef<any, CodeViewerProps>(
   (
-    {showTabs, code: propCode, decorators, initMode, showLineNumbers, wrapContent, containerRef},
+    {
+      showTabs,
+      code: propCode,
+      decorators,
+      initMode,
+      defaultExpanded = false,
+      showLineNumbers,
+      wrapContent,
+      containerRef,
+    },
     ref,
   ) => {
     const {sandpack} = useSandpack();
     const {code} = useActiveCode();
 
     const {activeFile} = sandpack;
-    const [isExpanded, setIsExpanded] = React.useState(false);
+    const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
     const id = React.useId();
     // hack to make sure we re-render the code editor and change current file
     // TODO: open an issue on sandpack-react
@@ -72,6 +82,14 @@ export const SandpackCodeViewer = React.forwardRef<any, CodeViewerProps>(
       setInternalKey(getId());
     }, [propCode, code]);
 
+    React.useEffect(() => {
+      if (defaultExpanded && containerRef && containerRef?.current !== null) {
+        const container = containerRef?.current;
+
+        container.style.height = "auto";
+      }
+    }, [defaultExpanded]);
+
     const handleExpand = () => {
       const nextIsExpanded = !isExpanded;
 

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

@@ -1,5 +1,5 @@
 import React from "react";
-import {Tabs, TabItem} from "@nextui-org/react";
+import {Tabs, Tab} from "@nextui-org/react";
 import {SandpackPredefinedTemplate} from "@codesandbox/sandpack-react";
 
 import {TypescriptIcon, JavascriptIcon} from "@/components/icons";
@@ -32,8 +32,8 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({template, onC
       size="xs"
       onSelectionChange={handleToggle}
     >
-      <TabItem key="vite-react-ts" title={<TypescriptIcon className="text-lg text-[#93adcb]" />} />
+      <Tab key="vite-react-ts" title={<TypescriptIcon className="text-lg text-[#93adcb]" />} />
-      <TabItem key="vite-react" title={<JavascriptIcon className="text-lg  text-[#dbbe82]" />} />
+      <Tab key="vite-react" title={<JavascriptIcon className="text-lg  text-[#dbbe82]" />} />
     </Tabs>
   );
 };

apps/docs/components/sandpack/sandpack.tsx

@@ -15,6 +15,7 @@ export interface SandpackProps extends UseSandpackProps {
   showEditor?: boolean;
   showCopyCode?: boolean;
   showReportBug?: boolean;
+  defaultExpanded?: boolean;
   showOpenInCodeSandbox?: boolean;
   children?: React.ReactNode;
 }
@@ -25,6 +26,7 @@ export const Sandpack: FC<SandpackProps> = ({
   highlightedLines,
   showPreview = false,
   showEditor = true,
+  defaultExpanded = false,
   showOpenInCodeSandbox = true,
   showReportBug = true,
   showCopyCode = true,
@@ -66,6 +68,7 @@ export const Sandpack: FC<SandpackProps> = ({
               <SandpackCodeViewer
                 containerRef={editorContainerRef}
                 decorators={decorators}
+                defaultExpanded={defaultExpanded}
                 showTabs={showTabs}
               />
             )}

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

@@ -3,7 +3,7 @@ const App = `import { Chip } from "@nextui-org/react";
 export default function App() {
   return (
     <div className="flex gap-4">
-      <Chip color="default">default</Chip>
+      <Chip color="default">Default</Chip>
       <Chip color="primary">Primary</Chip>
       <Chip color="secondary">Secondary</Chip>
       <Chip color="success">Success</Chip>

apps/docs/content/components/index.ts

@@ -12,3 +12,4 @@ export * from "./divider";
 export * from "./kbd";
 export * from "./spacer";
 export * from "./spinner";
+export * from "./link";

apps/docs/content/components/link/block.ts

@@ -0,0 +1,34 @@
+const App = `import { Link } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-2">
+      <Link isBlock showAnchorIcon href="#" color="foreground">
+        Foreground
+      </Link>
+      <Link isBlock showAnchorIcon href="#" color="primary">
+        Primary
+      </Link>
+      <Link isBlock showAnchorIcon href="#" color="secondary">
+        Secondary
+      </Link>
+      <Link isBlock showAnchorIcon href="#" color="success">
+        Success
+      </Link>
+      <Link isBlock showAnchorIcon href="#" color="warning">
+        Warning
+      </Link>
+      <Link isBlock showAnchorIcon href="#" color="danger">
+        Danger
+      </Link>
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,22 @@
+const App = `import { Link } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Link href="#" color="foreground">Foreground</Link>
+      <Link href="#" color="primary">Primary</Link>
+      <Link href="#" color="secondary">Secondary</Link>
+      <Link href="#" color="success">Success</Link>
+      <Link href="#" color="warning">Warning</Link>
+      <Link href="#" color="danger">Danger</Link>
+    </div> 
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/link/custom-anchor-icon.ts

@@ -0,0 +1,45 @@
+const AnchorIcon = `export const AnchorIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="24"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="24"
+    {...props}
+  >
+    <path
+      d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
+      fill="currentColor"
+    />
+    <path
+      d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
+      fill="currentColor"
+    />
+  </svg>
+);`;
+
+const App = `import { Link } from "@nextui-org/react";
+import { AnchorIcon } from "./AnchorIcon";
+
+export default function App() {
+  return (
+    <Link
+      isExternal
+      showAnchorIcon
+      href="https://github.com/nextui-org/nextui"
+      anchorIcon={<AnchorIcon />}
+    >
+      Custom Icon
+    </Link>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/AnchorIcon.jsx": AnchorIcon,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,78 @@
+const App = `import {forwardRef} from "react";
+import {LinkIcon} from "@nextui-org/shared-icons";
+import {linkAnchorClasses} from "@nextui-org/theme";
+
+import {useLink} from "@nextui-org/react";
+
+const MyLink = forwardRef((props, ref) => {
+  const {
+    Component,
+    children,
+    showAnchorIcon,
+    anchorIcon = <LinkIcon className={linkAnchorClasses} />,
+    getLinkProps,
+  } = useLink({
+    ...props,
+    ref,
+  });
+
+  return (
+    <Component {...getLinkProps()}>
+      <>
+        {children}
+        {showAnchorIcon && anchorIcon}
+      </>
+    </Component>
+  );
+});
+
+MyLink.displayName = "MyLink";
+
+export default MyLink;`;
+
+const AppTs = `import {forwardRef} from "react";
+import {LinkIcon} from "@nextui-org/shared-icons";
+import {linkAnchorClasses} from "@nextui-org/theme";
+
+import {LinkProps, useLink} from "@nextui-org/react";
+
+export interface MyLinkProps extends LinkProps {}
+
+const MyLink = forwardRef<HTMLAnchorElement, MyLinkProps>((props, ref) => {
+  const {
+    Component,
+    children,
+    showAnchorIcon,
+    anchorIcon = <LinkIcon className={linkAnchorClasses} />,
+    getLinkProps,
+  } = useLink({
+    ...props,
+    ref,
+  });
+
+  return (
+    <Component {...getLinkProps()}>
+      <>
+        {children}
+        {showAnchorIcon && anchorIcon}
+      </>
+    </Component>
+  );
+});
+
+MyLink.displayName = "MyLink";
+
+export default MyLink;`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+const reactTs = {
+  "/App.tsx": AppTs,
+};
+
+export default {
+  ...react,
+  ...reactTs,
+};

apps/docs/content/components/link/disabled.ts

@@ -0,0 +1,15 @@
+const App = `import { Link } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Link href="#" isDisabled>Disabled Link</Link>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/link/external.ts

@@ -0,0 +1,26 @@
+const App = `import { Link } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Link isExternal href="https://github.com/nextui-org/nextui">
+        External Link
+      </Link>
+      <Link
+        isExternal
+        href="https://github.com/nextui-org/nextui"
+        showAnchorIcon
+      >
+        External Link Anchor
+      </Link>
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,23 @@
+import usage from "./usage";
+import disabled from "./disabled";
+import sizes from "./sizes";
+import colors from "./colors";
+import underline from "./underline";
+import external from "./external";
+import customAnchorIcon from "./custom-anchor-icon";
+import block from "./block";
+import nextjs from "./nextjs";
+import customImpl from "./custom-impl";
+
+export const linkContent = {
+  usage,
+  disabled,
+  sizes,
+  colors,
+  underline,
+  external,
+  customAnchorIcon,
+  block,
+  nextjs,
+  customImpl,
+};

apps/docs/content/components/link/nextjs.ts

@@ -0,0 +1,18 @@
+const App = `import { Link } from "@nextui-org/react";
+import NextLink from "next/link";
+
+export default function App() {
+  return (
+    <Link href="/route" as={NextLink}>
+      Next.js Link
+    </Link>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,21 @@
+const App = `import { Link } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Link href="#" size="xs">Link</Link>
+      <Link href="#" size="sm">Link</Link>
+      <Link href="#" size="md">Link</Link>
+      <Link href="#" size="lg">Link</Link>
+      <Link href="#" size="xl">Link</Link>
+    </div>  
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/link/underline.ts

@@ -0,0 +1,21 @@
+const App = `import { Link } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Link href="#" underline="none">None</Link>
+      <Link href="#" underline="hover">Hover</Link>
+      <Link href="#" underline="always">Always</Link>
+      <Link href="#" underline="active">Active</Link>
+      <Link href="#" underline="focus">Focus</Link>
+    </div>  
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -0,0 +1,15 @@
+const App = `import { Link } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Link href="#">Default Link</Link>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -19,9 +19,13 @@ NextUI exports 2 accordion-related components:
 - **Accordion**: The main component to display a list of accordion items.
 - **AccordionItem**: The item component to display a single accordion item.
 
-```jsx
+<ImportTabs
-import {Accordion, AccordionItem} from "@nextui-org/react";
+  commands={{
-```
+    global: 'import {Accordion, AccordionItem} from "@nextui-org/react";',
+    individual: 'import {Accordion, AccordionItem} from "@nextui-org/accordion";',
+  }}
+/>
+
 
 ## Usage
 

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

@@ -20,9 +20,12 @@ NextUI exports 3 avatar-related components:
 - **AvatarGroup**: A wrapper component to display a group of avatars.
 - **AvatarIcon**: The default icon used as fallback when the image fails to load.
 
-```jsx
+<ImportTabs
-import {Avatar, AvatarGroup, AvatarIcon} from "@nextui-org/react";
+  commands={{
-```
+    global: 'import {Avatar, AvatarGroup, AvatarIcon} from "@nextui-org/react";',
+    individual: 'import {Avatar, AvatarGroup, AvatarIcon} from "@nextui-org/avatar";',
+  }}
+/>
 
 ## Usage
 

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

@@ -14,9 +14,12 @@ Badges are used as a small numerical value or status descriptor for UI elements.
 
 ## Import
 
-```jsx
+<ImportTabs
-import {Badge} from "@nextui-org/react";
+  commands={{
-```
+    global: 'import {Badge} from "@nextui-org/react";',
+    individual: 'import {Badge} from "@nextui-org/badge";',
+  }}
+/>
 
 ## Usage
 

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

@@ -19,9 +19,12 @@ NextUI exports 2 button-related components:
 - **Button**: The main component to display a button.
 - **ButtonGroup**: A wrapper component to display a group of buttons.
 
-```jsx
+<ImportTabs
-import {Button, ButtonGroup} from "@nextui-org/react";
+  commands={{
-```
+    global: 'import {Button, ButtonGroup} from "@nextui-org/react";',
+    individual: 'import {Button, ButtonGroup} from "@nextui-org/button";',
+  }}
+/>
 
 ## Usage
 

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

@@ -21,9 +21,12 @@ NextUI exports 4 card-related components:
 - **CardBody**: The content of the card.
 - **CardFooter**: Commonly used for actions.
 
-```jsx
+<ImportTabs
-import {Card, CardHeader, CardBody, CardFooter} from "@nextui-org/react";
+  commands={{
-```
+    global: 'import {Card, CardHeader, CardBody, CardFooter} from "@nextui-org/react";',
+    individual: 'import {Card, CardHeader, CardBody, CardFooter} from "@nextui-org/card";',
+  }}
+/>
 
 ## Usage
 

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

@@ -12,9 +12,12 @@ A CheckboxGroup allows users to select one or more items from a list of choices.
 
 ---
 
-```jsx
+<ImportTabs
-import {CheckboxGroup, Checkbox} from "@nextui-org/react";
+  commands={{
-```
+    global: 'import {CheckboxGroup, Checkbox} from "@nextui-org/react";',
+    individual: 'import {CheckboxGroup, Checkbox} from "@nextui-org/checkbox";',
+  }}
+/>
 
 ## Usage
 

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

@@ -14,9 +14,12 @@ Checkboxes allow users to select multiple items from a list of individual items,
 
 ## Import
 
-```jsx
+<ImportTabs
-import {Checkbox} from "@nextui-org/react";
+  commands={{
-```
+    global: 'import {Checkbox} from "@nextui-org/react";',
+    individual: 'import {Checkbox} from "@nextui-org/checkbox";',
+  }}
+/>
 
 ## Usage
 

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

@@ -14,9 +14,12 @@ A Chip is a small block of essential information that represent an input, attrib
 
 ## Import
 
-```jsx
+<ImportTabs
-import {Chip} from "@nextui-org/react";
+  commands={{
-```
+    global: 'import {Chip} from "@nextui-org/react";',
+    individual: 'import {Chip} from "@nextui-org/chip";',
+  }}
+/>
 
 ## Usage
 

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

@@ -14,9 +14,12 @@ Circular progress indicators are utilized to indicate an undetermined wait perio
 
 ## Import
 
-```jsx
+<ImportTabs
-import {CircularProgress} from "@nextui-org/react";
+  commands={{
-```
+    global: 'import {CircularProgress} from "@nextui-org/react";',
+    individual: 'import {CircularProgress} from "@nextui-org/progress";',
+  }}
+/>
 
 ## Usage
 

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

@@ -14,9 +14,13 @@ Code is a component used to display inline code.
 
 ## Import
 
-```jsx
+<ImportTabs
-import {Code} from "@nextui-org/react";
+  commands={{
-```
+    global: 'import {Code} from "@nextui-org/react";',
+    individual: 'import {Code} from "@nextui-org/code";',
+  }}
+/>
+
 
 ## Usage
 

apps/docs/content/docs/components/divider.mdx

@@ -14,9 +14,12 @@ Divider is a component that separates content in a page.
 
 ## Import
 
-```jsx
+<ImportTabs
-import {Divider} from "@nextui-org/react";
+  commands={{
-```
+    global: 'import {Divider} from "@nextui-org/react";',
+    individual: 'import {Divider} from "@nextui-org/divider";',
+  }}
+/>
 
 ## Usage
 

apps/docs/content/docs/components/dropdown.mdx

@@ -10,4 +10,5 @@ Displays a list of actions or options that a user can choose. Dropdown implement
 
 ```jsx
 import { Dropdown } from "@nextui-org/react";
-```
+```
+

apps/docs/content/docs/components/kbd.mdx

@@ -14,9 +14,12 @@ Keyboard key is a component to display which key or combination of keys performs
 
 ## Import
 
-```jsx
+<ImportTabs
-import {Kbd} from "@nextui-org/react";
+  commands={{
-```
+    global: 'import {Kbd} from "@nextui-org/react";',
+    individual: 'import {Kbd} from "@nextui-org/kbd";',
+  }}
+/>
 
 ## Usage
 
@@ -40,6 +43,8 @@ import {Kbd} from "@nextui-org/react";
 
 ## API
 
+### Keyboard Key Props
+
 | Attribute  | Type                                                   | Description                                              | Default |
 | ---------- | ------------------------------------------------------ | -------------------------------------------------------- | ------- |
 | children   | `ReactNode`                                            | The content of the keyboard key.                         | -       |

apps/docs/content/docs/components/link.mdx

@@ -8,6 +8,84 @@ url: https://nextui.org/docs/components/link
 
 Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an `<a>`
 
-```jsx
+<ComponentLinks component="link" reactAriaHook="useLink" />
-import { Link } from "@nextui-org/react";
+
-```
+-----
+
+## Import
+
+<ImportTabs
+  commands={{
+    global: 'import {Link} from "@nextui-org/react";',
+    individual: 'import {Link} from "@nextui-org/link";',
+  }}
+/>
+
+## Usage
+
+<CodeDemo title="Usage" files={linkContent.usage} />
+
+### Disabled
+
+<CodeDemo title="Disabled" files={linkContent.disabled} />
+
+### Sizes
+
+<CodeDemo title="Sizes" files={linkContent.sizes} />
+
+### Colors
+
+<CodeDemo title="Colors" files={linkContent.colors} />
+
+### Underline
+
+<CodeDemo title="Underline" files={linkContent.underline} />
+
+### External
+
+If you pass the `isExternal` prop, the link will have the `target="_blank"` and `rel="noopener noreferrer"` attributes.
+
+<CodeDemo title="External" files={linkContent.external} />
+
+### Custom Anchor Icon
+
+<CodeDemo title="Custom Anchor Icon" files={linkContent.customAnchorIcon} />
+
+### Block Link
+
+If you pass the `isBlock` prop, the link will be rendered as a block element with a `hover` effect.
+
+<CodeDemo title="Block Link" files={linkContent.block} />
+
+
+### Usage with Next.js 
+
+<CodeDemo
+  showPreview={false}
+  defaultExpanded={true}
+  title="Usage with Next.js "
+  files={linkContent.nextjs}
+/>
+
+### Custom Implementation
+
+In case you need to customize the link even further, you can use the `useLink` hook to create your own implementation.
+
+<CodeDemo showPreview={false} title="Custom implementation" files={linkContent.customImpl} />
+
+
+## Data Attributes
+
+`Link` has the following attributes on the `root` element:
+
+- **data-focus**:
+  When the checkbox is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).
+- **data-focus-visible**:
+  When the checkbox is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).
+
+## Accessibility
+
+- Support for mouse, touch, and keyboard interactions.
+- Support for navigation links via `<a>` elements or custom element types via ARIA.
+- Support for disabled links.
+- Keyboard users may activate links using the <kbd>Enter</kbd> key.

apps/docs/content/docs/components/spacer.mdx

@@ -14,9 +14,12 @@ Spacer is a component used to add space between components.
 
 ## Import
 
-```jsx
+<ImportTabs
-import {Spacer} from "@nextui-org/react";
+  commands={{
-```
+    global: 'import {Spacer} from "@nextui-org/react";',
+    individual: 'import {Spacer} from "@nextui-org/spacer";',
+  }}
+/>
 
 ## Usage
 

apps/docs/content/docs/components/spinner.mdx

@@ -14,9 +14,12 @@ Spinner express an unspecified wait time or display the length of a process.
 
 ## Import
 
-```jsx
+<ImportTabs
-import {Spinner} from "@nextui-org/react";
+  commands={{
-```
+    global: 'import {Spinner} from "@nextui-org/react";',
+    individual: 'import {Spinner} from "@nextui-org/spinner";',
+  }}
+/>
 
 ## Usage
 

apps/docs/content/docs/frameworks/nextjs.mdx

@@ -84,13 +84,13 @@ export function Providers({children}: { children: React.ReactNode }) {
 
 Now, Go to your `root` layout page and wrap it with the `NextUIProvider`:
 
-```jsx
+```jsx {6,8,10}
 // app/layout.tsx
 import { Providers } from "./providers";
 
 export default function RootLayout({children}: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" className='dark'>
       <body>
         <Providers>
           {children}
@@ -101,6 +101,9 @@ export default function RootLayout({children}: { children: React.ReactNode }) {
 }
 ```
 
+> **Note**: NextUI automatically add two themes `light` and `dark` to your application. You can use any 
+of them by adding the `dark`/`light` class to the `html` tag. See the [theme docs](/docs/theme/customize-theme) for more details.
+
 Now you can import any NextUI component directly in your Server Components without needing to use
 the `use client;` directive:
 
@@ -117,7 +120,7 @@ export default function Page() {
 }
 ```
 
-> **Important 🚨**: Note that you need to import the components from their own package, not from `@nextui-org/react`. 
+> **Important 🚨**: Note that you need to import the component from the individual package, not the from `@nextui-org/react`. 
 
 <Spacer y={8} />
 

packages/components/accordion/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nextui-org/accordion
 
+## 0.0.0-dev-v2-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230527161625
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230527161625
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230527161625
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/accordion",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/use-image@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/avatar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/avatar",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/badge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/badge",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/spinner@0.0.0-dev-v2-20230527161625
+  - @nextui-org/drip@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/button/package.json

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

packages/components/card/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/card
 
+## 0.0.0-dev-v2-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/drip@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/card/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/card",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/checkbox",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230527161625
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/chip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/chip",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/code/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/code",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/divider/package.json

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

packages/components/drip/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/drip
 
+## 0.0.0-dev-v2-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/drip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/drip",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/use-is-mobile@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/popover@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/dropdown/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/dropdown",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/use-image@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/image/package.json

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

packages/components/input/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/input
 
+## 0.0.0-dev-v2-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230527161625
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/use-aria-field@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/input",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/kbd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/kbd",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230527161625
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/link",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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,20 @@
 # @nextui-org/modal
 
+## 0.0.0-dev-v2-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230527161625
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230527161625
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230527161625
+  - @nextui-org/use-disclosure@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/modal/package.json

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

packages/components/navbar/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/navbar
 
+## 0.0.0-dev-v2-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230527161625
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230527161625
+  - @nextui-org/use-scroll-position@0.0.0-dev-v2-20230527161625
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/navbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/navbar",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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/pagination/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/pagination
 
+## 0.0.0-dev-v2-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230527161625
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/use-pagination@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/pagination",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230527161625
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230527161625
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/button@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/popover/package.json

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

packages/components/popover/stories/popover.stories.tsx

@@ -18,6 +18,12 @@ export default {
         options: ["solid", "bordered", "light", "flat", "faded", "shadow"],
       },
     },
+    size: {
+      control: {
+        type: "select",
+        options: ["xs", "sm", "md", "lg", "xl"],
+      },
+    },
     color: {
       control: {
         type: "select",

packages/components/progress/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/progress
 
+## 0.0.0-dev-v2-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/use-aria-label@0.0.0-dev-v2-20230527161625
+  - @nextui-org/use-is-mounted@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/progress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/progress",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/radio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/radio",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/skeleton/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/skeleton",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230527161625
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/use-clipboard@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230527161625
+  - @nextui-org/button@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/snippet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/snippet",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/spacer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/spacer",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/spinner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/spinner",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/switch",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230527161625
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/spacer@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/table",
-  "version": "0.0.0-dev-v2-20230527145118",
+  "version": "0.0.0-dev-v2-20230527161625",
   "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-20230527161625
+
+### Patch Changes
+
+- Size variant added to popover and tooltip
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230527161625
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/use-is-mounted@0.0.0-dev-v2-20230527161625
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230527161625
+  - @nextui-org/system@0.0.0-dev-v2-20230527161625
+  - @nextui-org/theme@0.0.0-dev-v2-20230527161625
+
 ## 0.0.0-dev-v2-20230527145118
 
 ### Patch Changes

packages/components/tabs/__tests__/tabs.test.tsx

@@ -3,7 +3,7 @@ import {act, render} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import {focus} from "@nextui-org/test-utils";
 
-import {Tabs, TabItem} from "../src";
+import {Tabs, Tab} from "../src";
 
 type Item = {
   id: string;
@@ -33,15 +33,15 @@ describe("Tabs", () => {
   it("should render correctly (static)", () => {
     const wrapper = render(
       <Tabs aria-label="Tabs static test">
-        <TabItem key="item1" title="Item 1">
+        <Tab key="item1" title="Item 1">
           <div>Content 1</div>
-        </TabItem>
+        </Tab>
-        <TabItem key="item2" title="Item 2">
+        <Tab key="item2" title="Item 2">
           <div>Content 2</div>
-        </TabItem>
+        </Tab>
-        <TabItem key="item3" title="Item 3">
+        <Tab key="item3" title="Item 3">
           <div>Content 3</div>
-        </TabItem>
+        </Tab>
       </Tabs>,
     );
 
@@ -52,9 +52,9 @@ describe("Tabs", () => {
     const wrapper = render(
       <Tabs aria-label="Tabs static test" items={tabs}>
         {(item) => (
-          <TabItem key={item.id} title={item.label}>
+          <Tab key={item.id} title={item.label}>
             <div>{item.content}</div>
-          </TabItem>
+          </Tab>
         )}
       </Tabs>,
     );
@@ -67,15 +67,15 @@ describe("Tabs", () => {
 
     render(
       <Tabs ref={ref} aria-label="Tabs static test">
-        <TabItem key="item1" title="Item 1">
+        <Tab key="item1" title="Item 1">
           <div>Content 1</div>
-        </TabItem>
+        </Tab>
-        <TabItem key="item2" title="Item 2">
+        <Tab key="item2" title="Item 2">
           <div>Content 2</div>
-        </TabItem>
+        </Tab>
-        <TabItem key="item3" title="Item 3">
+        <Tab key="item3" title="Item 3">
           <div>Content 3</div>
-        </TabItem>
+        </Tab>
       </Tabs>,
     );
     expect(ref.current).not.toBeNull();
@@ -84,15 +84,15 @@ describe("Tabs", () => {
   test("should select the correct tab with keyboard navigation", async () => {
     const wrapper = render(
       <Tabs aria-label="Tabs static test">
-        <TabItem key="item1" data-testid="item1" title="Item 1">
+        <Tab key="item1" data-testid="item1" title="Item 1">
           <div>Content 1</div>
-        </TabItem>
+        </Tab>
-        <TabItem key="item2" data-testid="item2" title="Item 2">
+        <Tab key="item2" data-testid="item2" title="Item 2">
           <div>Content 2</div>
-        </TabItem>
+        </Tab>
-        <TabItem key="item3" data-testid="item3" title="Item 3">
+        <Tab key="item3" data-testid="item3" title="Item 3">
           <div>Content 3</div>
-        </TabItem>
+        </Tab>
       </Tabs>,
     );
 
@@ -136,15 +136,15 @@ describe("Tabs", () => {
   test("should focus the correct tab with manual keyboard navigation", async () => {
     const wrapper = render(
       <Tabs aria-label="Tabs static test" keyboardActivation="manual">
-        <TabItem key="item1" data-testid="item1" title="Item 1">
+        <Tab key="item1" data-testid="item1" title="Item 1">
           <div>Content 1</div>
-        </TabItem>
+        </Tab>
-        <TabItem key="item2" data-testid="item2" title="Item 2">
+        <Tab key="item2" data-testid="item2" title="Item 2">
           <div>Content 2</div>
-        </TabItem>
+        </Tab>
-        <TabItem key="item3" data-testid="item3" title="Item 3">
+        <Tab key="item3" data-testid="item3" title="Item 3">
           <div>Content 3</div>
-        </TabItem>
+        </Tab>
       </Tabs>,
     );
 
@@ -186,15 +186,15 @@ describe("Tabs", () => {
   it("it should work with defaultSelectedKey", () => {
     const wrapper = render(
       <Tabs aria-label="Tabs static test" defaultSelectedKey="item2">
-        <TabItem key="item1" title="Item 1">
+        <Tab key="item1" title="Item 1">
           <div>Content 1</div>
-        </TabItem>
+        </Tab>
-        <TabItem key="item2" data-testid="item2" title="Item 2">
+        <Tab key="item2" data-testid="item2" title="Item 2">
           <div>Content 2</div>
-        </TabItem>
+        </Tab>
-        <TabItem key="item3" title="Item 3">
+        <Tab key="item3" title="Item 3">
           <div>Content 3</div>
-        </TabItem>
+        </Tab>
       </Tabs>,
     );
 
@@ -206,15 +206,15 @@ describe("Tabs", () => {
   it("should not select a tab when disabled", async () => {
     const wrapper = render(
       <Tabs aria-label="Tabs static test" disabledKeys={["item2"]}>
-        <TabItem key="item1" title="Item 1">
+        <Tab key="item1" title="Item 1">
           <div>Content 1</div>
-        </TabItem>
+        </Tab>
-        <TabItem key="item2" data-testid="item2" title="Item 2">
+        <Tab key="item2" data-testid="item2" title="Item 2">
           <div>Content 2</div>
-        </TabItem>
+        </Tab>
-        <TabItem key="item3" title="Item 3">
+        <Tab key="item3" title="Item 3">
           <div>Content 3</div>
-        </TabItem>
+        </Tab>
       </Tabs>,
     );
 

packages/components/tabs/package.json

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

packages/components/tabs/src/base/tab-item-base.ts

@@ -1,6 +1,5 @@
 import {BaseItem, ItemProps} from "@nextui-org/aria-utils";
 import {ReactNode} from "react";
-
 interface Props<T extends object = {}> extends Omit<ItemProps<"div", T>, "children" | "title"> {
   /**
    * The content of the component.

packages/components/tabs/src/index.ts

@@ -9,4 +9,4 @@ export {useTabs} from "./use-tabs";
 
 // export components
 export {Tabs};
-export {default as TabItem} from "./base/tab-item-base";
+export {default as Tab} from "./base/tab-item-base";

packages/components/tabs/src/tab.tsx

@@ -22,7 +22,7 @@ export interface TabItemProps<T = object> extends HTMLNextUIProps<"div"> {
 /**
  * @internal
  */
-const TabItem = forwardRef<TabItemProps, "div">((props, ref) => {
+const Tab = forwardRef<TabItemProps, "div">((props, ref) => {
   const {className, as, item, style, onClick, ...otherProps} = props;
 
   const {key} = item;
@@ -113,6 +113,6 @@ const TabItem = forwardRef<TabItemProps, "div">((props, ref) => {
   );
 });
 
-TabItem.displayName = "NextUI.TabItem";
+Tab.displayName = "NextUI.Tab";
 
-export default TabItem;
+export default Tab;