feat(root): v2 published

This commit is contained in:
Junior Garcia 2023-07-31 22:10:19 -03:00
parent 1976c62105
commit e940ec06ac
157 changed files with 1709 additions and 938 deletions

View File

@ -0,0 +1,62 @@
---
"@nextui-org/use-aria-accordion-item": patch
"@nextui-org/use-aria-modal-overlay": patch
"@nextui-org/use-aria-toggle-button": patch
"@nextui-org/use-safe-layout-effect": patch
"@nextui-org/framer-transitions": patch
"@nextui-org/use-infinite-scroll": patch
"@nextui-org/use-scroll-position": patch
"@nextui-org/use-update-effect": patch
"@nextui-org/use-callback-ref": patch
"@nextui-org/shared-icons": patch
"@nextui-org/shared-utils": patch
"@nextui-org/pagination": patch
"@nextui-org/use-aria-button": patch
"@nextui-org/react-utils": patch
"@nextui-org/accordion": patch
"@nextui-org/use-disclosure": patch
"@nextui-org/use-is-mounted": patch
"@nextui-org/use-pagination": patch
"@nextui-org/use-real-shape": patch
"@nextui-org/aria-utils": patch
"@nextui-org/test-utils": patch
"@nextui-org/checkbox": patch
"@nextui-org/dropdown": patch
"@nextui-org/progress": patch
"@nextui-org/skeleton": patch
"@nextui-org/use-clipboard": patch
"@nextui-org/use-is-mobile": patch
"@nextui-org/use-ref-state": patch
"@nextui-org/divider": patch
"@nextui-org/popover": patch
"@nextui-org/snippet": patch
"@nextui-org/spinner": patch
"@nextui-org/tooltip": patch
"@nextui-org/avatar": patch
"@nextui-org/button": patch
"@nextui-org/navbar": patch
"@nextui-org/ripple": patch
"@nextui-org/spacer": patch
"@nextui-org/switch": patch
"@nextui-org/badge": patch
"@nextui-org/image": patch
"@nextui-org/input": patch
"@nextui-org/modal": patch
"@nextui-org/radio": patch
"@nextui-org/table": patch
"@nextui-org/use-resize": patch
"@nextui-org/card": patch
"@nextui-org/chip": patch
"@nextui-org/code": patch
"@nextui-org/link": patch
"@nextui-org/tabs": patch
"@nextui-org/user": patch
"@nextui-org/use-image": patch
"@nextui-org/kbd": patch
"@nextui-org/use-ssr": patch
"@nextui-org/system": patch
"@nextui-org/react": patch
"@nextui-org/theme": patch
---
Introducing NextUI v2.0

View File

@ -0,0 +1,62 @@
---
"@nextui-org/use-aria-accordion-item": patch
"@nextui-org/use-aria-modal-overlay": patch
"@nextui-org/use-aria-toggle-button": patch
"@nextui-org/use-safe-layout-effect": patch
"@nextui-org/framer-transitions": patch
"@nextui-org/use-infinite-scroll": patch
"@nextui-org/use-scroll-position": patch
"@nextui-org/use-update-effect": patch
"@nextui-org/use-callback-ref": patch
"@nextui-org/shared-icons": patch
"@nextui-org/shared-utils": patch
"@nextui-org/pagination": patch
"@nextui-org/use-aria-button": patch
"@nextui-org/react-utils": patch
"@nextui-org/accordion": patch
"@nextui-org/use-disclosure": patch
"@nextui-org/use-is-mounted": patch
"@nextui-org/use-pagination": patch
"@nextui-org/use-real-shape": patch
"@nextui-org/aria-utils": patch
"@nextui-org/test-utils": patch
"@nextui-org/checkbox": patch
"@nextui-org/dropdown": patch
"@nextui-org/progress": patch
"@nextui-org/skeleton": patch
"@nextui-org/use-clipboard": patch
"@nextui-org/use-is-mobile": patch
"@nextui-org/use-ref-state": patch
"@nextui-org/divider": patch
"@nextui-org/popover": patch
"@nextui-org/snippet": patch
"@nextui-org/spinner": patch
"@nextui-org/tooltip": patch
"@nextui-org/avatar": patch
"@nextui-org/button": patch
"@nextui-org/navbar": patch
"@nextui-org/ripple": patch
"@nextui-org/spacer": patch
"@nextui-org/switch": patch
"@nextui-org/badge": patch
"@nextui-org/image": patch
"@nextui-org/input": patch
"@nextui-org/modal": patch
"@nextui-org/radio": patch
"@nextui-org/table": patch
"@nextui-org/use-resize": patch
"@nextui-org/card": patch
"@nextui-org/chip": patch
"@nextui-org/code": patch
"@nextui-org/link": patch
"@nextui-org/tabs": patch
"@nextui-org/user": patch
"@nextui-org/use-image": patch
"@nextui-org/kbd": patch
"@nextui-org/use-ssr": patch
"@nextui-org/system": patch
"@nextui-org/react": patch
"@nextui-org/theme": patch
---
Introducing v2 - Readmes updated

View File

@ -11,7 +11,6 @@ import {MDXContent} from "@/components/mdx-content";
import {siteConfig} from "@/config/site";
import {Route} from "@/libs/docs/page";
import {ChevronRightLinearIcon} from "@/components/icons";
import {__PROD__} from "@/utils";
interface BlogPostProps {
params: {
@ -79,7 +78,7 @@ export async function generateStaticParams(): Promise<BlogPostProps["params"][]>
export default async function DocPage({params}: BlogPostProps) {
const {post} = await getBlogPostFromParams({params});
if (!post || __PROD__) {
if (!post) {
notFound();
}

View File

@ -2,15 +2,10 @@ import {allBlogPosts} from "contentlayer/generated";
import {compareDesc} from "date-fns";
import {BlogPostList} from "@/components/blog-post";
import {__PROD__} from "@/utils";
export default function Blog() {
const posts = allBlogPosts.sort((a, b) => compareDesc(new Date(a.date), new Date(b.date)));
if (__PROD__) {
return null;
}
return (
<div className="w-full lg:px-16 mt-12">
<div className="text-center">

View File

@ -0,0 +1,56 @@
import {Button, Image, Link} from "@nextui-org/react";
import {Blockquote} from "@/components/docs/components/blockquote";
export default function FigmaPage() {
return (
<>
<main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
<section className="w-full flex flex-col items-center lg:px-16 mt-12 gap-6">
<div className="text-center max-w-xl">
<h1 className="mb-2 font-bold text-4xl">NextUI Figma Kit</h1>
<h5 className="text-default-500 text-lg">
A Figma file that contains the basis of the NextUI design system to help you design
your applications.
</h5>
</div>
<iframe
className="aspect-video w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
height="600"
src="https://embed.figma.com/file/1267584376234254760/hf_embed?community_viewer=true&embed_host=nextui"
title="NextUI Figma Kit"
width="800"
/>
<div className="text-center max-w-2xl m-auto">
<Button className="max-w-fit" color="default" variant="bordered">
<Link
isExternal
showAnchorIcon
className="text-current"
href="https://www.figma.com/community/file/1267584376234254760"
>
Open in Figma
</Link>
</Button>
<Blockquote color="warning">
This file is still in development and will be continuously updated.
</Blockquote>
</div>
</section>
</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>
<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>
</>
);
}

View File

@ -64,7 +64,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
<body className={clsx("min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
<Providers themeProps={{attribute: "class", defaultTheme: "dark"}}>
<div className="relative flex flex-col" id="app-container">
<Navbar routes={manifest.routes} />
<Navbar mobileRoutes={manifest.mobileRoutes} routes={manifest.routes} />
{children}
<Footer />
</div>

View File

@ -0,0 +1,116 @@
import React, {useCallback, useEffect} from "react";
import Script from "next/script";
import carbonOptimize from "./carbon-optimize";
import {loadScript} from "@/utils/scripts";
import {useIsMounted} from "@/hooks/use-is-mounted";
import {__PROD__} from "@/utils";
const EA_PROVIDER_RATIO = 0.5;
export const CarbonAd: React.FC<unknown> = () => {
const carbonRef = React.useRef(null);
const [showEthicalAds, setShowEthicalAds] = React.useState(false);
const isMounted = useIsMounted();
const loadEthicalAds = useCallback(() => {
return new Promise((resolve) => {
const script = document.createElement("script");
script.src = "https://media.ethicalads.io/media/client/ethicalads.min.js";
script.async = true;
script.onload = () => {
// @ts-ignore
resolve(window.ethicalads);
};
script.onerror = () => {
resolve(null);
};
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
});
}, []);
useEffect(() => {
const shouldShowEthicalAds = Math.random() < EA_PROVIDER_RATIO;
let loadCarbon: any = null;
const loadCarbonAds = () => {
setShowEthicalAds(false);
// The isolation logic of carbonads is flawed.
// Once the script starts loading, it will asynchronous resolve, with no way to stop it.
// This leads to duplication of the ad. To solve the issue, we debounce the load action.
loadCarbon =
isMounted &&
setTimeout(() => {
const script = loadScript(
"https://cdn.carbonads.com/carbon.js?serve=CESIC53Y&placement=nextuiorg",
carbonRef.current,
);
script.id = "_carbonads_js";
carbonOptimize.init();
});
};
const loadAdProvider = async () => {
if (shouldShowEthicalAds) {
try {
const ethicalads = await loadEthicalAds();
if (!ethicalads) {
loadCarbonAds();
return;
}
// @ts-ignore
ethicalads.wait.then((placements) => {
if (!placements.length) {
loadCarbonAds();
} else {
setShowEthicalAds(true);
}
});
} catch (error) {
loadCarbonAds();
}
} else {
loadCarbonAds();
}
};
loadAdProvider();
return () => {
loadCarbon && clearTimeout(loadCarbon);
};
}, [isMounted]);
if (!__PROD__) return null;
return (
<>
<>
<Script async src="https://media.ethicalads.io/media/client/ethicalads.min.js" />
<div
className="ea-container horizontal"
data-ea-campaign-types="paid|publisher-house|community"
data-ea-publisher="nextuiorg"
data-ea-type="image"
style={{display: showEthicalAds ? "block" : "none"}}
/>
</>
<div className="carbon-ad-container" style={{display: showEthicalAds ? "none" : "block"}}>
<span ref={carbonRef} id="carbon-ad" />
</div>
</>
);
};

View File

@ -0,0 +1,64 @@
export default {
isRefreshAble: function () {
return !(
typeof document.addEventListener === "undefined" || this.browserSupport().hidden === undefined
);
},
browserSupport: function () {
let hidden;
let visibilityChange;
if (typeof document.hidden !== "undefined") {
// Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
return {
hidden: hidden,
visibilityChange: visibilityChange,
};
},
handleVisibilityChange: function () {
const isElementInViewport = function (el) {
let element = document.querySelector(el);
let bounding = element.getBoundingClientRect();
let isVisible;
if (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.right <= window.innerWidth &&
bounding.bottom <= window.innerHeight
) {
isVisible = true;
} else {
isVisible = false;
}
return isVisible;
};
if (!document.hidden) {
if (typeof _carbonads !== "undefined" && isElementInViewport("#carbonads")) {
// eslint-disable-next-line no-undef
_carbonads.refresh();
}
}
},
init: function () {
if (this.isRefreshAble()) {
document.addEventListener(
this.browserSupport().visibilityChange,
this.handleVisibilityChange,
false,
);
}
},
};

View File

@ -0,0 +1 @@
export * from "./carbon-ad";

View File

@ -1,8 +1,10 @@
"use client";
import {FC} from "react";
import {tv, VariantProps} from "tailwind-variants";
const blockquoteStyles = tv({
base: "border pl-4 bg-default-50 my-6 py-3 rounded-xl [&>p]:m-0",
base: "border px-4 bg-default-50 my-6 py-3 rounded-xl [&>p]:m-0",
variants: {
color: {
default: "border-default-200 dark:border-default-100 bg-default-200/20",

View File

@ -7,6 +7,7 @@ import NextImage from "next/image";
import {ThemeSwitch} from "./theme-switch";
import {Sandpack} from "@/components/sandpack";
import {CarbonAd} from "@/components/ads/carbon-ad";
import * as DocsComponents from "@/components/docs/components";
import * as BlogComponents from "@/components/blog/components";
import {Codeblock} from "@/components/docs/components";
@ -195,7 +196,7 @@ export const MDXComponents = {
thead: Thead,
tr: Trow,
td: Tcol,
// CarbonAd,
CarbonAd,
code: Code,
ul: List,
a: (props: React.HTMLAttributes<HTMLAnchorElement>) => <Link {...props} />,

View File

@ -16,6 +16,7 @@ import {
DropdownMenu,
DropdownItem,
DropdownTrigger,
Chip,
} from "@nextui-org/react";
import {dataFocusVisibleClasses} from "@nextui-org/theme";
import {ChevronDownIcon, LinkIcon} from "@nextui-org/shared-icons";
@ -42,16 +43,16 @@ import {
import {useIsMounted} from "@/hooks/use-is-mounted";
import {DocsSidebar} from "@/components/docs/sidebar";
import {useCmdkStore} from "@/components/cmdk";
import {__PROD__} from "@/utils";
export interface NavbarProps {
routes: Route[];
mobileRoutes?: Route[];
tag?: string;
slug?: string;
children?: ReactNode;
}
export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], slug, tag}) => {
const [isMenuOpen, setIsMenuOpen] = useState<boolean | undefined>(false);
const [commandKey, setCommandKey] = useState<"ctrl" | "command">("command");
@ -109,10 +110,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
return null;
}
const navLinkClasses = clsx(
link({color: "foreground"}),
"data-[active=true]:text-primary data-[active=true]:font-medium",
);
const navLinkClasses = clsx(link({color: "foreground"}), "data-[active=true]:text-primary");
return (
<NextUINavbar
@ -169,7 +167,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
<div className="w-[74px]" />
)}
</NavbarBrand>
<ul className="hidden lg:flex gap-4 justify-start">
<ul className="hidden lg:flex gap-4 justify-start items-center">
<NavbarItem>
<NextLink
className={navLinkClasses}
@ -190,18 +188,16 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
Components
</NextLink>
</NavbarItem>
{!__PROD__ && (
<NavbarItem>
<NextLink
className={navLinkClasses}
color="foreground"
data-active={includes(pathname, "blog")}
href="/blog"
>
Blog
</NextLink>
</NavbarItem>
)}
<NavbarItem>
<NextLink
className={navLinkClasses}
color="foreground"
data-active={includes(pathname, "blog")}
href="/blog"
>
Blog
</NextLink>
</NavbarItem>
<NavbarItem>
<NextLink
className={navLinkClasses}
@ -212,6 +208,17 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
Figma
</NextLink>
</NavbarItem>
<NavbarItem>
<Chip
as={NextLink}
className="hover:bg-default-100 transition-colors cursor-pointer"
color="secondary"
href="/blog/nextui-v2"
variant="dot"
>
Introducing NextUI v2.0
</Chip>
</NavbarItem>
</ul>
</NavbarContent>
@ -243,7 +250,12 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
<SearchLinearIcon className="mt-px text-default-600 dark:text-default-500" size={20} />
</button>
</NavbarItem>
<NavbarMenuToggle aria-label={isMenuOpen ? "Close menu" : "Open menu"} className="ml-2" />
<NavbarItem className="w-10 h-full">
<NavbarMenuToggle
aria-label={isMenuOpen ? "Close menu" : "Open menu"}
className="w-full h-full pt-1"
/>
</NavbarItem>
</NavbarContent>
<NavbarContent className="hidden sm:flex basis-1/5 sm:basis-full" justify="end">
@ -273,15 +285,15 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
>
Sponsor
</Button>
</NavbarItem>{" "}
</NavbarItem>
<NavbarMenuToggle
aria-label={isMenuOpen ? "Close menu" : "Open menu"}
className="hidden sm:flex lg:hidden"
className="hidden sm:flex lg:hidden ml-4"
/>
</NavbarContent>
<NavbarMenu>
<DocsSidebar className="mt-4" routes={routes} slug={slug} tag={tag} />
<DocsSidebar className="mt-4" routes={[...mobileRoutes, ...routes]} slug={slug} tag={tag} />
{children}
</NavbarMenu>
</NextUINavbar>

View File

@ -318,5 +318,39 @@
}
]
}
],
"mobileRoutes": [
{
"key": "getting-started",
"title": "Getting Started",
"defaultOpen": true,
"keywords": "getting started, main routes, blog, docs, components, nextui",
"routes": [
{
"key": "docs",
"title": "Documentation",
"keywords": "documentation, guide, nextui",
"path": "/docs/guide/introduction.mdx"
},
{
"key": "components",
"title": "Components",
"keywords": "components, nextui",
"path": "/docs/components/avatar"
},
{
"key": "blog",
"title": "Blog",
"keywords": "blog, nextui, news, updates",
"path": "/blog"
},
{
"key": "figma",
"title": "Figma",
"keywords": "figma, nextui, design, ui kit",
"path": "/figma"
}
]
}
]
}

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
---
title: "Introducing NextUI Version 2"
description: "Discover NextUI v2. TailwindCSS integration, enhanced theming, improved animations, and more."
title: "Introducing NextUI Version 2.0"
description: "Discover NextUI v2.0 TailwindCSS integration, enhanced theming, improved animations, and more."
date: "2023-07-29"
image: "/blog/nextuiv2.jpg"
author:
@ -280,7 +280,7 @@ file helps streamline the process of transforming design ideas into functioning
</Blockquote>
<iframe
height="450"
height="600"
width="800"
src="https://embed.figma.com/file/1267584376234254760/hf_embed?community_viewer=true&embed_host=nextui"
className="aspect-video w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
@ -289,7 +289,12 @@ file helps streamline the process of transforming design ideas into functioning
<Spacer y={10} />
<Button color="default" variant="bordered">
<Link isExternal className="text-current" href="https://www.figma.com/community/file/1267584376234254760">
<Link
isExternal
showAnchorIcon
className="text-current"
href="https://www.figma.com/community/file/1267584376234254760"
>
Open in Figma
</Link>
</Button>

View File

@ -13,6 +13,8 @@ Accordion display a list of high-level options that can expand/collapse to revea
---
<CarbonAd/>
## Import
NextUI exports 2 accordion-related components:

View File

@ -14,6 +14,8 @@ The Avatar component is used to represent a user, and displays the profile pictu
---
<CarbonAd/>
## Import
NextUI exports 3 avatar-related components:

View File

@ -13,6 +13,8 @@ Badges are used as a small numerical value or status descriptor for UI elements.
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -13,6 +13,8 @@ Buttons allow users to perform actions and choose with a single tap.
---
<CarbonAd/>
## Import
NextUI exports 2 button-related components:

View File

@ -13,6 +13,8 @@ Card is a container for text, photos, and actions in the context of a single sub
---
<CarbonAd/>
## Import
NextUI exports 4 card-related components:

View File

@ -13,6 +13,8 @@ A CheckboxGroup allows users to select one or more items from a list of choices.
---
<CarbonAd/>
## Import
NextUI exports 2 checkbox-related components:

View File

@ -13,6 +13,8 @@ Checkboxes allow users to select multiple items from a list of individual items,
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -13,6 +13,8 @@ A Chip is a small block of essential information that represent an input, attrib
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -13,6 +13,8 @@ Circular progress indicators are utilized to indicate an undetermined wait perio
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -13,6 +13,8 @@ Code is a component used to display inline code.
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -13,6 +13,8 @@ Divider is a component that separates content in a page.
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -13,6 +13,8 @@ Displays a list of actions or options that a user can choose.
---
<CarbonAd/>
## Import
NextUI exports 5 dropdown-related components:

View File

@ -13,6 +13,8 @@ The Image component is used to display images with support for fallback.
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -13,6 +13,8 @@ Input is a component that allows users to enter text. It can be used to get user
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -13,6 +13,8 @@ Keyboard key is a component to display which key or combination of keys performs
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -13,6 +13,8 @@ Links allow users to click their way from page to page. This component is styled
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -13,6 +13,8 @@ Displays a dialog with a custom content that requires attention or provides addi
---
<CarbonAd/>
## Import
NextUI exports 5 modal-related components:

View File

@ -13,6 +13,8 @@ A responsive navigation header positioned on top side of your page that includes
---
<CarbonAd/>
## Import
NextUI exports 7 navbar-related components:

View File

@ -13,6 +13,8 @@ The Pagination component allows you to display active page and navigate between
---
<CarbonAd/>
## Import
NextUI exports 3 pagination-related components:

View File

@ -14,6 +14,8 @@ additional rich content on top of something.
---
<CarbonAd/>
## Import
NextUI exports 3 popover-related components:

View File

@ -13,6 +13,8 @@ The Progress component allows you to view the progress of any activity.
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -13,6 +13,8 @@ Radio Group allow users to select a single option from a list of mutually exclus
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -13,6 +13,8 @@ Skeleton is a placeholder to show a loading state and the expected shape of a co
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -13,6 +13,8 @@ Snippet is a component that can be used to display inline or multiline code snip
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -13,6 +13,8 @@ Spacer is a component used to add space between components.
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -13,6 +13,8 @@ Spinner express an unspecified wait time or display the length of a process.
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -13,6 +13,8 @@ The Switch component is used as an alternative between checked and not checked s
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -13,6 +13,8 @@ Tables are used to display tabular data using rows and columns. They allow users
---
<CarbonAd/>
## Import
NextUI exports 6 table-related components:

View File

@ -13,6 +13,8 @@ Tabs organize content into multiple sections and allow users to navigate between
---
<CarbonAd/>
## Import
NextUI exports 2 tabs-related components:

View File

@ -13,6 +13,8 @@ Textarea component is a multi-line Input which allows you to write large texts.
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -13,6 +13,8 @@ Tooltips display a brief, informative message that appears when a user interacts
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -13,6 +13,8 @@ Display user information with avatar and name.
---
<CarbonAd/>
## Import
<ImportTabs

View File

@ -8,7 +8,6 @@ description: Learn how to configure and customize colors with NextUI.
NextUI's plugin enables you to personalize the semantic colors of the theme such as `primary`,
`secondary`, `success`, etc.
```js {7,11}
module.exports = {
plugins: [
@ -29,6 +28,8 @@ module.exports = {
};
```
<CarbonAd />
> **Note**: Colors configurations apply globally across all components.
## Default Colors

View File

@ -11,6 +11,8 @@ create it by adding the following code to your `tailwind.config.js` file.
We recommend adding a palette that ranges from `50` to `900`. You can use tools like [Eva Design System](https://colors.eva.design/),
[Smart Watch](https://smart-swatch.netlify.app/), [Palette](https://palettte.app/) or [Color Box](https://colorbox.io/) to generate your palette.
<CarbonAd />
### Add the new theme to the plugin
```js {9-43}

View File

@ -8,6 +8,8 @@ description: Learn how to create new variants for the NextUI components.
NextUI allows you to create new variants for components that better suit your project's needs.
This can be done by extending the component and its properties, and customizing the styles.
<CarbonAd />
You can create or override the component `variants`, `defaultVariants` and `componentVariants`.
> **Note**: For one-off customizations, refer to the [Override Styles](/docs/customization/override-styles) documentation.

View File

@ -13,6 +13,8 @@ Furthermore, you have the option to create your own theme based on the default o
incorporates [Layout](/docs/customization/layout) tokens and [Color](/docs/customization/colors) tokens, designed
to facilitate your customization process.
<CarbonAd />
## Customizing Layout
You can modify a variety of layout aspects, including spacing units, font sizes, line heights,

View File

@ -32,6 +32,8 @@ This will enable the dark mode for the whole application. However, many applicat
the capability to switch between different themes. For this purpose, we recommend using a
theme switch library or creating your own implementation.
<CarbonAd />
## Using next-themes
For applications using [Next.js](/docs/frameworks/nextjs), the [next-themes](https://github.com/pacocoursey/next-themes)

View File

@ -8,6 +8,8 @@ description: NextUI offers a set of layout options to customize the theme.
NextUI's plugin provides a variety of layout customization options. Alter spacing units,
font sizes, line heights, radii and more to personalize each theme to your liking.
<CarbonAd />
Using layout tokens, you can ensure a uniform aesthetic across all components without
needing to override the default Tailwind CSS configuration.

View File

@ -8,6 +8,8 @@ description: NextUI allows you to override the default styles of the components
Overriding default component styles is as simple as passing your own class names to the `className`
or to the `classNames` prop for components with slots.
<CarbonAd />
### What's is a Slot?
A slot is a part of a component that can be styled separately. For example, the [CircularProgress](/docs/components/circular-progress) component

View File

@ -14,6 +14,8 @@ TailwindCSS plugin. This plugin, which is based on the [tw-colors](https://githu
plugin developed by [L-Blondy](https://github.com/L-Blondy), allows you to customize color schemes,
layout configurations, and more, across different components of your application.
<CarbonAd />
## What is a Theme?
A theme, in the context of NextUI, is a predefined set of colors, layout attributes, and other

View File

@ -13,6 +13,8 @@ Requirements:
------
<CarbonAd />
To use NextUI in your Astro project, you need to follow the following steps:
<Steps>

View File

@ -15,6 +15,8 @@ Requirements:
------
<CarbonAd />
To use NextUI in your Next.js project, you need to follow the steps below, depending on your project structure.
## App directory Setup

View File

@ -13,6 +13,8 @@ Requirements:
------
<CarbonAd />
To use NextUI in your Remix project, you need to follow the following steps:
<Steps>

View File

@ -14,6 +14,8 @@ Requirements:
------
<CarbonAd />
To use NextUI in your Vite project, you need to follow the following steps:
<Steps>

View File

@ -13,6 +13,8 @@ Requirements:
---
<CarbonAd />
To use NextUI in your project, you need to follow the following steps:
## Global Installation

View File

@ -14,6 +14,8 @@ Requirements:
-----
<CarbonAd />
## Next.js upgrade steps
Make sure to follow the previous steps since they are required to upgrade to v2.

View File

@ -36,6 +36,10 @@ async function redirect() {
destination: "/docs/guide/introduction",
permanent: true,
},
{
source: "/v2",
destination: "/blog/nextui-v2",
},
{
source: "/docs/intro",
destination: "/docs/guide/introduction",
@ -73,12 +77,12 @@ async function redirect() {
},
{
source: "/theme",
destination: "/docs/theme/default-theme",
destination: "/docs/customization/theme",
permanent: true,
},
{
source: "/docs/theme",
destination: "/docs/theme/default-theme",
destination: "/docs/customization/theme",
permanent: true,
},
{
@ -96,6 +100,78 @@ async function redirect() {
destination: "/docs/components/button",
permanent: true,
},
// v1 to v2 redirects
{
source: "/docs/theme/dark-mode",
destination: "/docs/customization/dark-mode",
permanent: true,
},
{
source: "/docs/guide/nextui-plus-nextjs",
destination: "/docs/frameworks/nextjs",
permanent: true,
},
{
source: "/docs/theme/default-theme",
destination: "/docs/customization/theme",
permanent: true,
},
{
source: "/docs/theme/customize-theme",
destination: "/docs/customization/customize-theme",
permanent: true,
},
{
source: "/docs/theme/override-styles",
destination: "/docs/customization/override-styles",
permanent: true,
},
{
source: "/docs/theme/typescript",
destination: "/docs/guide/introduction",
permanent: true,
},
{
source: "/docs/theme/utilities",
destination: "/docs/guide/introduction",
permanent: true,
},
{
source: "/docs/theme/media",
destination: "/docs/guide/introduction",
permanent: true,
},
{
source: "/docs/layout/container",
destination: "/docs/guide/introduction",
permanent: true,
},
{
source: "/docs/layout/grid",
destination: "/docs/guide/introduction",
permanent: true,
},
{
source: "/docs/layout/spacer",
destination: "/docs/components/spacer",
permanent: true,
},
{
source: "/docs/components/collapse",
destination: "/docs/components/accordion",
permanent: true,
},
{
source: "/docs/components/text",
destination: "/docs/guide/introduction",
permanent: true,
},
{
source: "/docs/components/button-group",
destination: "/docs/components/button",
permanent: true,
}
];
}

177
apps/docs/styles/ads.css Normal file
View File

@ -0,0 +1,177 @@
/*
* --------------------------------------------------
* Carbon Ads
* --------------------------------------------------
*/
.carbon-ad-container {
@apply relative my-4 min-h-[135px] w-full z-10 rounded-medium bg-background dark:bg-default-50/50 shadow-small p-4;
}
#carbonads * {
margin: initial;
padding: initial;
}
#carbonads {
font-family: inherit;
max-width: 100%;
padding: 0px;
}
#carbonads {
display: flex;
width: 100%;
z-index: 100;
}
#carbonads a {
color: inherit;
text-decoration: none;
transition: color 0.25s ease;
}
#carbonads a:hover {
@apply !text-default-500;
}
#carbonads span {
width: 100%;
position: relative;
display: block;
overflow: hidden;
}
#carbonads .carbon-wrap {
display: flex;
flex-direction: row;
}
#carbonads .carbon-img {
@apply shadow-xl;
display: block;
line-height: 1;
max-width: 130px;
width: 100%;
}
#carbonads .carbon-img img {
display: block;
max-width: 100% !important;
width: 100%;
border-radius: 10px;
border: 0px;
margin: 0px;
}
#carbonads .carbon-text {
@apply !text-default-500;
display: block;
font-size: 1rem;
width: 100%;
padding-left: 8px;
padding-right: 8px;
}
#carbonads .carbon-poweredby {
@apply text-default-400 dark:!text-default-300;
display: flex;
justify-content: flex-end;
align-items: center;
position: absolute;
bottom: 0;
right: 0;
padding: 10px 0;
text-transform: uppercase;
letter-space: .value 0.5px;
font-weight: 600;
font-size: 9px;
line-height: 0;
transition: all 0.25 ease;
}
@media only screen and (max-width:600px) {
#carbonads .carbon-text {
font-size: 0.9rem;
}
}
/*
* --------------------------------------------------
* Ethical Ads
* --------------------------------------------------
*/
.ea-container {
@apply relative my-4 min-h-[135px] w-full z-10 rounded-medium bg-background dark:bg-default-50/50 shadow-small p-4;
}
.ea-container .ea-type-image {
width: 100%;
}
.ea-container .ea-pixel {
display: none !important;
}
.ea-container .ea-type-image .ea-content {
width: 100%;
height: 100% !important;
max-width: 100% !important;
display: flex;
margin: 0 !important;
padding: 0 !important;
background-color: transparent !important;
box-shadow: none !important;
}
.ea-container .ea-type-image .ea-callout {
display: flex !important;
max-width: 100% !important;
justify-content: flex-end !important;
position: absolute;
bottom: 0;
right: 1rem;
}
.ea-container .ea-type-image .ea-callout a,
.ea-container .ea-type-image .ea-callout a .ea-headline,
.ea-container .ea-type-image .ea-callout a .ea-cta {
@apply text-default-400 dark:!text-default-300;
font-weight: 600 !important;
font-size: 9px !important;
}
[data-ea-publisher].loaded .ea-content a strong {
@apply !text-default-500;
}
.ea-container .ea-type-image .ea-content a {
display: block;
line-height: 1;
max-width: 130px;
width: 100%;
}
.ea-container .ea-type-image .ea-text {
width: 100%;
text-align: left !important;
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
}
.ea-container .ea-type-image .ea-text a {
@apply !text-default-300;
width: 100%;
max-width: 100%;
display: block;
font-size: 1rem;
width: 100%;
}
.ea-container .ea-type-image .ea-text .ea-body {
@apply !text-default-500;
}
.ea-container .ea-type-image img {
display: block;
max-width: 100% !important;
width: 100%;
border-radius: 10px;
border: 0px;
margin: 0px;
}
@media only screen and (max-width: 600px) {
.ea-container .ea-type-image .ea-text a {
font-size: 0.9rem;
}
}

View File

@ -4,6 +4,7 @@
@import 'prism.css';
@import 'nprogress.css';
@import 'ads.css';
html {
font-size: 16px;

View File

@ -0,0 +1,17 @@
export const loadScript = (src: string, container: HTMLElement | null) => {
const script = document.createElement("script");
script.setAttribute("async", "");
script.src = src;
container && container.appendChild(script);
return script;
};
export const removeScript = (
script: HTMLScriptElement | HTMLElement,
container: HTMLElement | null,
) => {
if (script.parentNode != container) return;
container && container?.removeChild(script);
};

View File

@ -1,8 +1,8 @@
# @nextui-org/accordion
A Quick description of the component
Accordion display a list of high-level options that can expand/collapse to reveal more information.
> This is an internal utility, not intended for public usage.
Please refer to the [documentation](https://nextui.org//docs/components/accordion) for more information.
## Installation

View File

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

View File

@ -1,8 +1,8 @@
# @nextui-org/avatar
A Quick description of the component
The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.
> This is an internal utility, not intended for public usage.
Please refer to the [documentation](https://nextui.org/docs/components/avatar) for more information.
## Installation

View File

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

View File

@ -1,8 +1,8 @@
# @nextui-org/badge
A Quick description of the component
Badges are used as a small numerical value or status descriptor for UI elements.
> This is an internal utility, not intended for public usage.
Please refer to the [documentation](https://nextui.org/docs/components/badge) for more information.
## Installation

View File

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

View File

@ -1,8 +1,8 @@
# @nextui-org/button
A Quick description of the component
Buttons allow users to perform actions and choose with a single tap.
> This is an internal utility, not intended for public usage.
Please refer to the [documentation](https://nextui.org/docs/components/button) for more information.
## Installation

View File

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

View File

@ -1,8 +1,8 @@
# @nextui-org/card
A Quick description of the component
Card is a container for text, photos, and actions in the context of a single subject.
> This is an internal utility, not intended for public usage.
Please refer to the [documentation](https://nextui.org/docs/components/card) for more information.
## Installation

View File

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

View File

@ -1,8 +1,8 @@
# @nextui-org/checkbox
A Quick description of the component
Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
> This is an internal utility, not intended for public usage.
Please refer to the [documentation](https://nextui.org/docs/components/checkbox) for more information.
## Installation

View File

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

View File

@ -1,8 +1,8 @@
# @nextui-org/chip
A Quick description of the component
A Chip is a small block of essential information that represent an input, attribute, or action.
> This is an internal utility, not intended for public usage.
Please refer to the [documentation](https://nextui.org/docs/components/chip) for more information.
## Installation

View File

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

View File

@ -1,8 +1,8 @@
# @nextui-org/code
A Quick description of the component
Code is a component used to display inline code.
> This is an internal utility, not intended for public usage.
Please refer to the [documentation](https://nextui.org/docs/components/code) for more information.
## Installation

View File

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

View File

@ -1,8 +1,8 @@
# @nextui-org/divider
A Quick description of the component
Divider is a component that separates content in a page.
> This is an internal utility, not intended for public usage.
Please refer to the [documentation](https://nextui.org/docs/components/divider) for more information.
## Installation

View File

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

View File

@ -1,8 +1,8 @@
# @nextui-org/dropdown
A Quick description of the component
Displays a list of actions or options that a user can choose.
> This is an internal utility, not intended for public usage.
Please refer to the [documentation](https://nextui.org/docs/components/dropdown) for more information.
## Installation

View File

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

View File

@ -1,8 +1,8 @@
# @nextui-org/image
A Quick description of the component
The Image component is used to display images with support for fallback.
> This is an internal utility, not intended for public usage.
Please refer to the [documentation](https://nextui.org/docs/components/image) for more information.
## Installation

View File

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

View File

@ -1,8 +1,8 @@
# @nextui-org/input
A Quick description of the component
Input is a component that allows users to enter text. It can be used to get user inputs in forms, search fields, and more.
> This is an internal utility, not intended for public usage.
Please refer to the [documentation](https://nextui.org/docs/components/input) for more information.
## Installation

View File

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

View File

@ -1,8 +1,8 @@
# @nextui-org/kbd
A Quick description of the component
Keyboard key or kbd is a component to display which key or combination of keys performs a given action.
> This is an internal utility, not intended for public usage.
Please refer to the [documentation](https://nextui.org/docs/components/kbd) for more information.
## Installation

View File

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

View File

@ -1,8 +1,8 @@
# @nextui-org/link
A Quick description of the component
Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an `<a>` tag.
> This is an internal utility, not intended for public usage.
Please refer to the [documentation](https://nextui.org/docs/components/link) for more information.
## Installation

View File

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

View File

@ -1,8 +1,8 @@
# @nextui-org/modal
A Quick description of the component
Displays a dialog with a custom content that requires attention or provides additional information.
> This is an internal utility, not intended for public usage.
Please refer to the [documentation](https://nextui.org/docs/components/modal) for more information.
## Installation

View File

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

View File

@ -1,8 +1,8 @@
# @nextui-org/navbar
A Quick description of the component
A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse menu and more.
> This is an internal utility, not intended for public usage.
Please refer to the [documentation](https://nextui.org/docs/components/navbar) for more information.
## Installation

View File

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

View File

@ -1,8 +1,8 @@
# @nextui-org/pagination
A Quick description of the component
The Pagination component allows you to display active page and navigate between multiple pages.
> This is an internal utility, not intended for public usage.
Please refer to the [documentation](https://nextui.org/docs/components/pagination) for more information.
## Installation

View File

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

View File

@ -1,8 +1,8 @@
# @nextui-org/popover
A Quick description of the component
Popover is a non-modal dialog that floats around its disclosure. It's commonly used for displaying additional rich content on top of something.
> This is an internal utility, not intended for public usage.
Please refer to the [documentation](https://nextui.org/docs/components/popover) for more information.
## Installation

Some files were not shown because too many files have changed in this diff Show More