archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

chore: merged with main

Browse Source
This commit is contained in:
Junior Garcia 2025-03-12 11:58:47 -03:00
commit 8ac36ceae6
13 changed files with 37 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
apps/docs/components/navbar.tsx
View File

@ -1,6 +1,6 @@
"use client";
import {useRef, useState, FC, ReactNode, Key, useMemo, useCallback} from "react";
import {useRef, useState, FC, ReactNode, useMemo, useCallback} from "react";
import {
link,
Navbar as HeroUINavbar,
@ -12,15 +12,10 @@ import {
Link,
Button,
Kbd,
Dropdown,
DropdownMenu,
DropdownItem,
DropdownTrigger,
Chip,
Divider,
} from "@heroui/react";
import {dataFocusVisibleClasses} from "@heroui/theme";
import {ChevronDownIcon, LinkIcon} from "@heroui/shared-icons";
import {isAppleDevice} from "@react-aria/utils";
import {clsx} from "@heroui/shared-utils";
import NextLink from "next/link";
@ -99,14 +94,6 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
"data-[active=true]:text-primary data-[active=true]:font-semibold",
);
const handleVersionChange = useCallback((key: Key) => {
if (key === "v1") {
const newWindow = window.open("https://v1.heroui.com", "_blank", "noopener,noreferrer");
if (newWindow) newWindow.opener = null;
}
}, []);
const handlePressNavbarItem = useCallback(
(name: string, url: string) => {
posthog.capture("NavbarItem", {
@ -145,40 +132,24 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
</Button>
);
const versionDropdown = useMemo(() => {
const versionChip = useMemo(() => {
return ref.current ? (
<Dropdown placement="bottom-start" portalContainer={ref.current}>
<AnimatePresence>
{isMounted && (
<motion.div animate={{opacity: 1}} exit={{opacity: 0}} initial={{opacity: 0}}>
<DropdownTrigger>
<Button
className="min-w-[74px] max-w-[74px] hidden font-medium text-default-500 text-xs h-6 w-[74px] py-1 min-w-fit sm:flex gap-0.5 bg-default-400/20 dark:bg-default-500/20"
endContent={<ChevronDownIcon className="text-tiny" />}
radius="full"
size="sm"
variant="flat"
>
v{currentVersion}
</Button>
</DropdownTrigger>
</motion.div>
)}
</AnimatePresence>
<DropdownMenu
aria-label="HeroUI versions"
defaultSelectedKeys={["v2"]}
selectionMode="single"
onAction={handleVersionChange}
>
<DropdownItem key="v2">v{currentVersion}</DropdownItem>
<DropdownItem key="v1" endContent={<LinkIcon />}>
v1.0.0
</DropdownItem>
</DropdownMenu>
</Dropdown>
<AnimatePresence>
{isMounted && (
<motion.div animate={{opacity: 1}} exit={{opacity: 0}} initial={{opacity: 0}}>
<Chip
className="max-w-[44px] hidden h-6 w-[44px] py-1 min-w-fit sm:flex gap-0.5 bg-default-400/20 dark:bg-default-500/20"
classNames={{
content: "font-medium text-default-500 text-xs",
}}
>
{currentVersion}
</Chip>
</motion.div>
)}
</AnimatePresence>
) : (
<div className="w-[74px]" />
<div className="w-[44px]" />
);
}, [ref.current, isMounted]);
@ -212,7 +183,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
<SmallLogo className="w-6 h-6 md:hidden" />
<LargeLogo className="h-5 md:h-6" />
</NextLink>
{versionDropdown}
{versionChip}
<Chip
as={NextLink}
className="hidden sm:flex bg-default-200/50 border-1 hover:bg-default-200/80 border-default-400/50 cursor-pointer"

2
apps/docs/content/blog/v2.3.0.mdx
View File

@ -44,7 +44,7 @@ our new CLI, and several enhancements and bug fixes.
Requirements:
- [Tailwind CSS 3.4](https://tailwindcss.com/) or later
- [Tailwind CSS 3.4](https://v3.tailwindcss.com/) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
Upgrade today by running one of the following commands:

2
apps/docs/content/blog/v2.7.0.mdx
View File

@ -278,7 +278,7 @@ function handlePress(e: PressEvent) {
## What's Next?
We're actively working on **Tailwind CSS v4** support! You can check out our progress at [tv4.heroui.com](https://tv4.heroui.com). We'll be releasing a beta version soon ([PR #4656](https://github.com/heroui-inc/heroui/pull/4656)).
We're actively working on **Tailwind CSS v4** support! You can check out our beta version at [beta.heroui.com](https://beta.heroui.com).
We're building an exciting new application that will revolutionize frontend development with HeroUI, making your workflow smoother than ever. Stay tuned for updates! 🔥

2
apps/docs/content/docs/components/spacer.mdx
View File

@ -42,7 +42,7 @@ Spacer is a component used to add space between components.
<CodeDemo title="Usage" files={spacerContent.usage} />
> **Note**: The `x` and `y` values are based on [Tailwind Spacing Scale](https://tailwindcss.com/docs/space)
> **Note**: The `x` and `y` values are based on [Tailwind Spacing Scale](https://v3.tailwindcss.com/docs/space)
<Spacer y={4}/>

2
apps/docs/content/docs/customization/colors.mdx
View File

@ -44,7 +44,7 @@ These colors are split into [Common Colors](#common-colors) and [Semantic Colors
### Common Colors
Common colors, like [TailwindCSS](https://tailwindcss.com/docs/customizing-colors) colors,
Common colors, like [TailwindCSS](https://v3.tailwindcss.com/docs/customizing-colors) colors,
remain consistent regardless of the theme.
To prevent conflicts with TailwindCSS colors, common colors are initially disabled but can

4
apps/docs/content/docs/frameworks/astro.mdx
View File

@ -8,7 +8,7 @@ description: How to use HeroUI with Astro
Requirements:
- [React 18](https://reactjs.org/) or later
- [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/astro) or later
- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/astro) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
- [Framer Motion 11.9](https://www.framer.com/motion/) or later
------
@ -55,7 +55,7 @@ After modifying the `.npmrc` file, you need to run `pnpm install` again to ensur
### Tailwind CSS Setup
HeroUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
[installation guide](https://tailwindcss.com/docs/guides/astro) to install Tailwind CSS. Then you need to add
[installation guide](https://v3.tailwindcss.com/docs/guides/astro) to install Tailwind CSS. Then you need to add
the following code to your `tailwind.config.cjs` file:
<Blockquote color="primary">

4
apps/docs/content/docs/frameworks/laravel.mdx
View File

@ -10,7 +10,7 @@ Requirements:
- [Laravel 11](https://laravel.com/)
- [PHP v8.2](https://www.php.net/)
- [React 18](https://reactjs.org/) or later
- [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/vite#react) or later
- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/laravel#vite) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
- [Framer Motion 11.9](https://www.framer.com/motion/) or later
------
@ -164,7 +164,7 @@ After modifying the `.npmrc` file, you need to run `pnpm install` again to ensur
### Tailwind CSS Setup
HeroUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
[installation guide](https://tailwindcss.com/docs/guides/vite#react) to install Tailwind CSS. Then you need to add
[installation guide](https://v3.tailwindcss.com/docs/guides/vite#react) to install Tailwind CSS. Then you need to add
the following code to your `tailwind.config.js` file:
<Blockquote color="primary">

6
apps/docs/content/docs/frameworks/nextjs.mdx
View File

@ -10,7 +10,7 @@ Requirements:
- [Next.js 12](https://nextjs.org/) or later
- [React 18](https://reactjs.org/) or later
- [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/nextjs) or later
- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/nextjs) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
- [Framer Motion 11.9](https://www.framer.com/motion/) or later
------
@ -176,7 +176,7 @@ After modifying the `.npmrc` file, you need to run `pnpm install` again to ensur
### Tailwind CSS Setup
HeroUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
[installation guide](https://tailwindcss.com/docs/guides/nextjs) to install Tailwind CSS. Then you need to add
[installation guide](https://v3.tailwindcss.com/docs/guides/nextjs) to install Tailwind CSS. Then you need to add
the following code to your `tailwind.config.js` file:
<Blockquote color="primary">
@ -420,7 +420,7 @@ After modifying the `.npmrc` file, you need to run `pnpm install` again to ensur
### Tailwind CSS Setup
HeroUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
[installation guide](https://tailwindcss.com/docs/guides/nextjs) to install Tailwind CSS. Then you need to add
[installation guide](https://v3.tailwindcss.com/docs/guides/nextjs) to install Tailwind CSS. Then you need to add
the following code to your `tailwind.config.js` file:
<Blockquote color="primary">

4
apps/docs/content/docs/frameworks/remix.mdx
View File

@ -8,7 +8,7 @@ description: How to use HeroUI with Remix
Requirements:
- [React 18](https://reactjs.org/) or later
- [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/remix) or later
- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/remix) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
- [Framer Motion 11.9](https://www.framer.com/motion/) or later
------
@ -149,7 +149,7 @@ After modifying the `.npmrc` file, you need to run `pnpm install` again to ensur
### Tailwind CSS Setup
HeroUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
[installation guide](https://tailwindcss.com/docs/guides/remix) to install Tailwind CSS. Then you need to add
[installation guide](https://v3.tailwindcss.com/docs/guides/remix) to install Tailwind CSS. Then you need to add
the following code to your `tailwind.config.js` file:
<Blockquote color="primary">

4
apps/docs/content/docs/frameworks/vite.mdx
View File

@ -9,7 +9,7 @@ Requirements:
- [Vite 2](https://vitejs.dev/) or later
- [React 18](https://reactjs.org/) or later
- [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/vite#react) or later
- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/vite#react) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
- [Framer Motion 11.9](https://www.framer.com/motion/) or later
------
@ -163,7 +163,7 @@ After modifying the `.npmrc` file, you need to run `pnpm install` again to ensur
### Tailwind CSS Setup
HeroUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
[installation guide](https://tailwindcss.com/docs/guides/vite#react) to install Tailwind CSS. Then you need to add
[installation guide](https://v3.tailwindcss.com/docs/guides/vite#react) to install Tailwind CSS. Then you need to add
the following code to your `tailwind.config.js` file:
<Blockquote color="primary">

2
apps/docs/content/docs/guide/design-principles.mdx
View File

@ -26,7 +26,7 @@ load times.
HeroUI is designed with customization at its core. Whether it's theming or overriding styles,
we provide developers with comprehensive control over the aesthetics of the components. Our
integration with the [TailwindCSS](https://tailwindcss.com/) and [Tailwind Variants](https://tailwind-variants.org)
integration with the [TailwindCSS](https://v3.tailwindcss.com/) and [Tailwind Variants](https://tailwind-variants.org)
library and simplifies the customization process and enables an extensive range of design possibilities.
### Consistent API

4
apps/docs/content/docs/guide/installation.mdx
View File

@ -8,7 +8,7 @@ description: Get started with HeroUI in the official documentation, and learn mo
Requirements:
- [React 18](https://reactjs.org/) or later
- [Tailwind CSS 3.4](https://tailwindcss.com/) or later
- [Tailwind CSS 3.4](https://v3.tailwindcss.com/) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
- [Framer Motion 11.9](https://www.framer.com/motion/) or later
---
@ -157,7 +157,7 @@ After modifying the `.npmrc` file, you need to run `pnpm install` again to ensur
#### Tailwind CSS Setup
HeroUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
[installation guide](https://tailwindcss.com/docs/installation) to install Tailwind CSS. Then you need to add
[installation guide](https://v3.tailwindcss.com/docs/installation) to install Tailwind CSS. Then you need to add
the following code to your `tailwind.config.js` file:
<Blockquote color="primary">

2
apps/docs/content/docs/guide/introduction.mdx
View File

@ -20,7 +20,7 @@ Welcome to the HeroUI documentation!
## What is HeroUI?
HeroUI is a UI library for React that helps you build beautiful and accessible user interfaces. Created on top of
[Tailwind CSS](https://tailwindcss.com/) and [React Aria](https://react-spectrum.adobe.com/react-aria/index.html).
[Tailwind CSS](https://v3.tailwindcss.com/) and [React Aria](https://react-spectrum.adobe.com/react-aria/index.html).
HeroUI's primary goal is to streamline the development process, offering a beautiful and adaptable system design for an enhanced user experience.